@extends('layouts.epelcon')
@section('title', 'QR Ordering Codes')

@section('content')
@php $hotelName = \App\Models\Setting::get('hotel_name', 'Epelcon Hospitality'); @endphp
<div>
    <div class="mb-5 flex flex-wrap items-center justify-between gap-3 print:hidden">
        <div>
            <h1 class="text-xl font-extrabold text-slate-900 lg:text-2xl">QR Ordering Codes</h1>
            <p class="max-w-2xl text-sm text-slate-500">Print a QR card for every restaurant table and guest room. Guests scan the code with their phone camera to open the online menu with their table or room pre-selected — the order lands straight in the kitchen and bar queues.</p>
        </div>
        <button onclick="window.print()" class="rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-bold text-white shadow-lg shadow-indigo-600/25 hover:bg-indigo-700">🖨 Print QR cards</button>
    </div>

    <form method="GET" action="{{ route('epelcon.qr.index') }}" class="mb-6 flex flex-wrap items-end gap-3 rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200 print:hidden">
        <label>
            <span class="mb-1 block text-xs font-bold uppercase text-slate-500">Restaurant tables</span>
            <input type="number" name="tables" value="{{ $tables }}" min="1" max="60" class="w-32 rounded-xl border-slate-200 text-sm">
        </label>
        <button class="rounded-xl bg-slate-900 px-4 py-2.5 text-sm font-bold text-white hover:bg-slate-700">Update</button>
        <p class="text-xs text-slate-400">{{ $tables }} table cards + {{ $rooms->count() }} room cards</p>
    </form>

    @php
        $labels = collect(range(1, $tables))->map(fn ($i) => 'Table ' . $i)
            ->concat($rooms->map(fn ($room) => 'Room ' . $room->number));
    @endphp

    <div id="qr-grid" class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
        @foreach ($labels as $label)
            <div class="qr-card flex flex-col items-center rounded-2xl bg-white p-5 text-center shadow-sm ring-1 ring-slate-200">
                <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-amber-600">{{ $hotelName }}</p>
                <p class="mt-1 text-lg font-extrabold text-slate-900">{{ $label }}</p>
                <div class="qr-target mt-3" data-url="{{ route('site.order') }}?table={{ urlencode($label) }}"></div>
                <p class="mt-3 text-[11px] font-semibold text-slate-500">Scan to order food & drinks</p>
            </div>
        @endforeach
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
    document.querySelectorAll('.qr-target').forEach(function (el) {
        new QRCode(el, {
            text: el.dataset.url,
            width: 120,
            height: 120,
            correctLevel: QRCode.CorrectLevel.M,
        });
    });
</script>
<style>
    @media print {
        .print\:hidden { display: none !important; }
        body { background: #fff !important; }
        #qr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
        .qr-card { break-inside: avoid; page-break-inside: avoid; box-shadow: none !important; border: 1px dashed #cbd5e1; }
    }
</style>
@endpush
