<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Print - {{ $booth->code }}</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;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .65rem;
            flex-wrap: wrap;
        }
        .print-toolbar button {
            background: #6366F1;
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: .65rem 1.25rem;
            font-weight: 600;
            cursor: pointer;
        }
        .print-toolbar a {
            display: inline-block;
            padding: .65rem 1.25rem;
            border-radius: 10px;
            border: 1px solid #E2E8F0;
            color: #475569;
            font-weight: 600;
            text-decoration: none;
            background: #fff;
        }
        .print-toolbar a:hover { background: #F8FAFC; color: #1E293B; }
        .booth-print-label {
            min-height: calc(100vh - 60px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2rem 1.5rem;
            text-align: center;
        }
        .booth-print-name {
            margin: 1.25rem 0 0;
            font-size: 1.35rem;
            font-weight: 800;
            line-height: 1.3;
            max-width: 320px;
        }
        .booth-print-numbers {
            margin-top: .85rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
        }
        .booth-print-code,
        .booth-print-mark {
            font-family: ui-monospace, "JetBrains Mono", monospace;
            font-weight: 800;
            letter-spacing: .12em;
        }
        .booth-print-code { font-size: 1.75rem; color: #4B23D4; }
        .booth-print-mark {
            font-size: 2rem;
            min-width: 3.5rem;
            padding: .25rem .65rem;
            border: 2px solid #171A24;
            border-radius: 10px;
        }
        @media print {
            .print-toolbar { display: none !important; }
            .booth-print-label { min-height: 100vh; }
            @page { margin: 12mm; }
        }
    </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 no-print">
    <button type="button" onclick="window.print()">Print</button>
    <a href="{{ route('mexco.admin.booths.show', $booth) }}">Back to Booth</a>
</div>

<div class="booth-print-label">
    <div id="qrcode"></div>
    <h1 class="booth-print-name">{{ $booth->name }}</h1>
    <div class="booth-print-numbers">
        <span class="booth-print-code">{{ $booth->code }}</span>
        <span class="booth-print-mark">{{ $booth->mark }}</span>
    </div>
</div>

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