@extends('layouts.app')

@section('title', 'Convert Link')

@section('content')
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card card-primary card-outline mb-4">
            <div class="card-header">
                <div class="card-title">Paste your Shopee link here</div>
            </div>
            <form action="{{ route('convert.process') }}" method="POST">
                @csrf
                <div class="card-body">
                    <div class="input-group input-group-lg mb-3">
                        <input type="url" name="url" class="form-control" placeholder="https://shopee.vn/..." required autofocus value="{{ old('url') }}">
                        <button type="submit" class="btn btn-primary">Convert</button>
                        <button type="reset" class="btn btn-secondary">Clear</button>
                    </div>
                </div>
            </form>
        </div>

        @if(session('success_result'))
            @php $result = session('success_result'); @endphp
            <div class="card card-success card-outline">
                <div class="card-header">
                    <h3 class="card-title">Conversion Successful</h3>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label>Original URL</label>
                        <input type="text" class="form-control" value="{{ $result->originalUrl }}" readonly>
                    </div>
                    <div class="mb-3">
                        <label>Affiliate URL</label>
                        <div class="input-group">
                            <input type="text" id="affiliate_url" class="form-control fw-bold text-success" value="{{ $result->affiliateUrl }}" readonly>
                            <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard()">Copy</button>
                        </div>
                    </div>
                    <div class="row text-muted small">
                        <div class="col-md-4">Converter: <strong>{{ $result->converterType }}</strong></div>
                        <div class="col-md-4">Session: <strong>{{ $result->sessionUsed }}</strong></div>
                        <div class="col-md-4">Execution Time: <strong>{{ number_format($result->executionTime, 4) }}s</strong></div>
                    </div>
                </div>
            </div>
        @endif

        @if(session('error_result'))
            @php $result = session('error_result'); @endphp
            <div class="card card-danger card-outline">
                <div class="card-header">
                    <h3 class="card-title">Conversion Failed</h3>
                </div>
                <div class="card-body">
                    <p class="text-danger fw-bold">{{ $result->errorMessage }}</p>
                    <div class="mb-3">
                        <label>Original URL</label>
                        <input type="text" class="form-control" value="{{ $result->originalUrl }}" readonly>
                    </div>
                    <div class="row text-muted small">
                        <div class="col-md-4">Converter: <strong>{{ $result->converterType }}</strong></div>
                        <div class="col-md-4">Session: <strong>{{ $result->sessionUsed ?? '-' }}</strong></div>
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
    function copyToClipboard() {
        var copyText = document.getElementById("affiliate_url");
        copyText.select();
        copyText.setSelectionRange(0, 99999); // For mobile devices
        navigator.clipboard.writeText(copyText.value);
        alert("Copied: " + copyText.value);
    }
</script>
@endpush