<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Print Booths - {{ $event->name }}</title>
    @include('partials.mexco-favicon')
    <link rel="stylesheet" href="{{ asset('css/mexco-qrcode.css') }}">
    <style>
        * { box-sizing: border-box; }
        body {
            margin: 0;
            font-family: Inter, "Plus Jakarta Sans", system-ui, sans-serif;
            color: #171A24;
            background: #fff;
        }
        .print-toolbar {
            padding: 1rem;
            text-align: center;
            border-bottom: 1px solid #E2E8F0;
            background: #F8FAFC;
        }
        .print-toolbar button {
            background: #6366F1;
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: .65rem 1.25rem;
            font-weight: 600;
            cursor: pointer;
        }
        .print-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.25rem;
            padding: 1.25rem;
        }
        @media (max-width: 900px) { .print-grid { grid-template-columns: repeat(2, 1fr); } }
        .booth-print-label {
            border: 1.5px solid #171A24;
            border-radius: 12px;
            padding: 1rem .75rem 1.1rem;
            text-align: center;
            break-inside: avoid;
            page-break-inside: avoid;
        }
        .booth-print-name {
            margin: .85rem 0 0;
            font-size: .95rem;
            font-weight: 800;
            line-height: 1.25;
            min-height: 2.5em;
        }
        .booth-print-numbers {
            margin-top: .65rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .75rem;
        }
        .booth-print-code,
        .booth-print-mark {
            font-family: ui-monospace, "JetBrains Mono", monospace;
            font-weight: 800;
            letter-spacing: .1em;
        }
        .booth-print-code { font-size: 1.15rem; color: #4B23D4; }
        .booth-print-mark {
            font-size: 1.35rem;
            min-width: 2.75rem;
            padding: .15rem .5rem;
            border: 2px solid #171A24;
            border-radius: 8px;
        }
        @media print {
            .print-toolbar { display: none !important; }
            .print-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0; }
            @page { margin: 10mm; }
        }
    </style>
    <script>window.MEETUP_APP_ICON = @json(asset(config('mexco.logos.app_icon')));</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script src="{{ asset('js/mexco-qrcode.js') }}"></script>
</head>
<body>
<div class="print-toolbar">
    <button type="button" onclick="window.print()">Print all ({{ $booths->count() }})</button>
</div>

<div class="print-grid">
    @foreach($booths as $booth)
        <div class="booth-print-label">
            <div id="qrcode-{{ $booth->id }}"></div>
            <div class="booth-print-name">{{ $booth->name }}</div>
            <div class="booth-print-numbers">
                <span class="booth-print-code">{{ $booth->code }}</span>
                <span class="booth-print-mark">{{ $booth->mark }}</span>
            </div>
        </div>
    @endforeach
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    @foreach($booths as $booth)
    MexcoQR.render(document.getElementById('qrcode-{{ $booth->id }}'), @json($booth->qrPayload()), 180, {
        colorDark: '#5B21B6'
    });
    @endforeach
    @if(request()->boolean('auto'))
    setTimeout(function () { window.print(); }, 700);
    @endif
});
</script>
</body>
</html>
