{{-- Author By : zulfazdliabuas@gmail.com | Date : 2026 --}}
@push('styles')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
@endpush

<x-app-layout>
    <div class="py-4">
        <div class="container">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between mb-3">
                        <div>
                            <h2 class="h5 mb-1">Generate Request QR</h2>
                            <p class="text-muted mb-0">QR will take users directly to your request form / landing page.</p>
                        </div>
                        <a href="{{ route('admin.requests.index') }}" class="btn btn-outline-secondary btn-sm">Back</a>
                    </div>

                    <div class="row g-3 align-items-start">
                        <div class="col-lg-6">
                            <label class="form-label">Site</label>
                            <select class="form-select mb-2" id="qr-site" {{ $sites->isEmpty() ? 'disabled' : '' }}>
                                @forelse($sites as $site)
                                    <option value="{{ $site->id }}" @selected(optional($selectedSite)->id === $site->id)>
                                        {{ $site->name }}
                                    </option>
                                @empty
                                    <option value="">No active sites found</option>
                                @endforelse
                            </select>
                            <div class="small text-muted mb-3">Select a site to auto-fill the request link.</div>

                            <label class="form-label">Target URL</label>
                            <div class="input-group mb-2">
                                <input type="text" id="qr-url" class="form-control" value="{{ $defaultUrl }}" placeholder="https://..." autocomplete="off" data-base-url="{{ url('/request') }}">
                                <button class="btn btn-outline-secondary" type="button" id="copy-btn">Copy</button>
                            </div>
                            <div class="small text-muted mb-3">Change if needed (for example add UTM or a specific request link). QR updates automatically.</div>
                            <div class="d-flex gap-2">
                                <button class="btn btn-primary" id="download-btn">Download PNG</button>
                                <button class="btn btn-outline-secondary" id="download-pdf-btn">Download PDF</button>
                                <button class="btn btn-outline-primary" id="regenerate-btn">Refresh QR</button>
                            </div>
                        </div>
                        <div class="col-lg-6 d-flex justify-content-center">
                            <div class="border rounded p-3 bg-light">
                                <img id="qr-image" alt="QR code" style="min-width:220px;min-height:220px;width:220px;height:220px;object-fit:contain;" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                const urlInput = document.getElementById('qr-url');
                const img = document.getElementById('qr-image');
                const siteSelect = document.getElementById('qr-site');
                const pdfBtn = document.getElementById('download-pdf-btn');

                const buildQr = () => {
                    const value = urlInput.value.trim() || '{{ $defaultUrl }}';
                    const src = `https://api.qrserver.com/v1/create-qr-code/?size=220x220&data=${encodeURIComponent(value)}`;
                    img.src = src;
                    img.dataset.src = src;
                };

                const updateUrlFromSite = () => {
                    if (!siteSelect || !siteSelect.value) {
                        return;
                    }
                    const baseUrl = urlInput.dataset.baseUrl || '{{ url('/request') }}';
                    urlInput.value = `${baseUrl}?site_id=${siteSelect.value}`;
                    buildQr();
                };

                const download = () => {
                    const link = document.createElement('a');
                    link.download = 'qr-request.png';
                    link.href = img.dataset.src || img.src;
                    link.click();
                };

                const copy = async () => {
                    try {
                        await navigator.clipboard.writeText(urlInput.value.trim());
                        const btn = document.getElementById('copy-btn');
                        const original = btn.textContent;
                        btn.textContent = 'Copied';
                        setTimeout(() => btn.textContent = original, 1200);
                    } catch (e) {
                        alert('Copy failed. Please copy manually.');
                    }
                };

                buildQr();
                document.getElementById('download-btn').addEventListener('click', download);
                document.getElementById('regenerate-btn').addEventListener('click', buildQr);
                document.getElementById('copy-btn').addEventListener('click', copy);
                urlInput.addEventListener('change', buildQr);
                urlInput.addEventListener('keyup', (e) => { if (e.key === 'Enter') buildQr(); });
                if (siteSelect) {
                    siteSelect.addEventListener('change', updateUrlFromSite);
                }
                if (pdfBtn) {
                    pdfBtn.addEventListener('click', () => {
                        const base = '{{ route('admin.qr.pdf') }}';
                        const value = urlInput.value.trim() || '{{ $defaultUrl }}';
                        const siteId = siteSelect ? siteSelect.value : '';
                        const params = new URLSearchParams({ url: value });
                        if (siteId) {
                            params.append('site_id', siteId);
                        }
                        window.location.href = `${base}?${params.toString()}`;
                    });
                }
            });
        </script>
    @endpush
</x-app-layout>