@include('admin.header', [
    'title' => 'Client Scanner',
    'active' => 'scanner',
    'searchPlaceholder' => 'Search scanner leads, QR links, submissions...'
])

<section class="page-hero mb-3">
    <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3">
        <div>
            <h1 class="page-title mb-2">Client Scanner</h1>
            <p class="mb-0 text-secondary">Generate QR codes for exhibitions and track customer enquiries.</p>
        </div>
        <div class="d-flex flex-wrap gap-2">
            <a class="btn-outline-earth" href="{{ route('client-enquiry.create') }}" target="_blank" rel="noopener">
                <i class="bi bi-box-arrow-up-right"></i> Open Form
            </a>
            <a class="btn-earth" href="{{ route('admin.scanner-form.qr.svg') }}">
                <i class="bi bi-download"></i> Download SVG
            </a>
        </div>
    </div>
</section>

<section class="row g-3 mb-3">
    <div class="col-12 col-sm-6 col-xxl-3">
        <div class="stat-card" data-watermark="&#xf6f3;">
            <div class="d-flex align-items-center gap-3">
                <span class="stat-icon"><i class="bi bi-qr-code-scan"></i></span>
                <div><div class="text-muted small fw-bold">Unique QR Scans</div><div class="stat-value">{{ number_format($uniqueScans) }}</div></div>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-6 col-xxl-3">
        <div class="stat-card" data-watermark="&#xf4ca;">
            <div class="d-flex align-items-center gap-3">
                <span class="stat-icon"><i class="bi bi-person-check-fill"></i></span>
                <div><div class="text-muted small fw-bold">Scanner Leads</div><div class="stat-value">{{ number_format($scannerSubmissions) }}</div></div>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-6 col-xxl-3">
        <div class="stat-card amber" data-watermark="&#xf3ef;">
            <div class="d-flex align-items-center gap-3">
                <span class="stat-icon"><i class="bi bi-globe2"></i></span>
                <div><div class="text-muted small fw-bold">Website Leads</div><div class="stat-value">{{ number_format($websiteSubmissions) }}</div></div>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-6 col-xxl-3">
        <div class="stat-card amber" data-watermark="&#xf1d8;">
            <div class="d-flex align-items-center gap-3">
                <span class="stat-icon"><i class="bi bi-envelope-paper-fill"></i></span>
                <div><div class="text-muted small fw-bold">Total Enquiries</div><div class="stat-value">{{ number_format($totalSubmissions) }}</div></div>
            </div>
        </div>
    </div>
</section>

<section class="row g-3 mb-3">
    <div class="col-12 col-xl-5">
        <div class="content-card">
            <div class="card-head">
                <h2 class="card-title"><span class="title-icon"><i class="bi bi-ui-checks"></i></span>Enquiry Form Fields</h2>
            </div>
            <div class="card-body-pad">
                <div class="row g-3">
                    @foreach (['Name' => 'Required customer name field.', 'Email' => 'Validated email address.', 'Phone Number' => 'Required contact number.', 'Message' => 'Optional enquiry details.'] as $field => $help)
                        <div class="col-12 col-md-6">
                            <div class="p-3 rounded border bg-white bg-opacity-50 h-100">
                                <div class="fw-bold">{{ $field }}</div>
                                <div class="small text-muted mt-1">{{ $help }}</div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="mt-3">
                    <div class="fw-bold mb-2">Products</div>
                    <div class="d-flex flex-wrap gap-2">
                        @foreach ($productOptions as $label)
                            <span class="pill">{{ $label }}</span>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-xl-7">
        <div class="content-card">
            <div class="card-head">
                <h2 class="card-title"><span class="title-icon" style="background:#b8782d"><i class="bi bi-qr-code"></i></span>Exhibition QR Code</h2>
                <span class="pill">{{ $scannerLink->is_active ? 'Active' : 'Inactive' }}</span>
            </div>
            <div class="card-body-pad">
                <div class="row g-3 align-items-center">
                    <div class="col-12 col-md-5 text-center">
                        <div class="bg-white p-3 rounded border d-inline-block shadow-sm">
                            <img src="{{ $qrPreview }}" alt="BAOPCL client enquiry QR code" style="width:min(320px,100%);height:auto;">
                        </div>
                    </div>
                    <div class="col-12 col-md-7">
                        <p class="fw-bold mb-2">Scan this code to open the BAOPCL product enquiry form.</p>
                        <label class="form-label fw-bold small text-muted" for="scannerUrl">QR target URL</label>
                        <div class="input-group mb-3">
                            <input class="form-control" id="scannerUrl" type="text" value="{{ $scannerUrl }}" readonly>
                            <button class="btn-outline-earth" id="copyScannerUrl" type="button"><i class="bi bi-clipboard"></i> Copy Link</button>
                        </div>
                        <div class="d-flex flex-wrap gap-2 mb-3">
                            <a class="btn-earth" href="{{ route('admin.scanner-form.qr.svg') }}"><i class="bi bi-filetype-svg"></i> Download QR (SVG)</a>
                            <a class="btn-outline-earth" href="{{ route('admin.scanner-form.qr.png') }}"><i class="bi bi-filetype-png"></i> Download QR (PNG)</a>
                        </div>
                        <div class="d-flex flex-wrap gap-2 small">
                            <span class="pill">Unique scans: {{ number_format($scannerLink->scan_count) }}</span>
                            <span class="pill">Scanner submissions: {{ number_format($scannerLink->submission_count) }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@push('scripts')
    <script>
        document.getElementById('copyScannerUrl')?.addEventListener('click', async () => {
            const input = document.getElementById('scannerUrl');
            await navigator.clipboard.writeText(input.value);
        });
    </script>
@endpush

@include('admin.footer')