@extends('layouts.app')
@include('partials.back', ['fallback' => route('admin.menu.index')])

@section('title', 'Table QR cards')

@push('head')
<style>
    .sheet { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:20px; padding:24px; }
    .card { background:#A92B17; color:#fff; border-radius:20px; padding:24px; display:flex; flex-direction:column; gap:16px; break-inside:avoid; }
    .card .qr { background:#fff; border-radius:18px; padding:16px; align-self:center; line-height:0; }
    .card h2 { font-size:34px; line-height:1.05; }
    .top { display:flex; justify-content:space-between; font-weight:700; }

    .tools { display:flex; flex-direction:column; gap:8px; background:rgba(0,0,0,.18); border-radius:12px; padding:10px; }
    .tools label.pick { display:flex; align-items:center; gap:8px; font-weight:700; cursor:pointer; }
    .tools .row { display:flex; gap:6px; }
    .tools input[type=text] { flex:1; height:36px; padding:0 10px; border:0; border-radius:8px; min-width:0; }
    .tools button { height:36px; padding:0 12px; border:0; border-radius:8px; font-weight:700; cursor:pointer; }
    .btn-save { background:#fff; color:#A92B17; }
    .btn-del { background:#3b0d06; color:#fff; width:100%; }

    .create-form { display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; }
    .create-form input[type=text] { height:44px; padding:0 14px; border:1px solid #ccc; border-radius:10px; min-width:220px; }
    .err { color:#A92B17; font-size:13px; margin-top:4px; }
    .flash { background:#e7f6ec; color:#1a6b35; padding:10px 14px; border-radius:10px; margin-bottom:12px; }
    .bar { display:flex; gap:12px; align-items:center; margin-top:12px; flex-wrap:wrap; }

    @page { size: A4; margin: 10mm; }


    @media print {
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    body { background:#fff !important; }
    header, nav, footer, .noprint { display:none !important; }

    .sheet {
        display:grid;
        grid-template-columns:repeat(2, 85mm);
        gap:8mm;
        justify-content:center;
        padding:0;
    }
    .card {
        width:85mm;
        break-inside:avoid;
        page-break-inside:avoid;
    }

    body.print-selected .card:not(.picked) { display:none; }
}
</style>
@endpush

@section('content')
<div class="noprint" style="padding:16px 24px">
    @if (session('status'))
        <div class="flash">{{ session('status') }}</div>
    @endif

    <form method="POST" action="{{ route('tables.store') }}" class="create-form">
        @csrf
        <div>
            <input type="text" name="name" value="{{ old('name') }}" placeholder="Table name, e.g. Table 13" required maxlength="255">
            @error('name') <div class="err">{{ $message }}</div> @enderror
        </div>
        <button type="submit" class="btn btn-dark" style="width:auto;padding:0 24px">Create QR</button>
    </form>

    <div class="bar">
        <label><input type="checkbox" id="pick-all"> Select all</label>
        <span id="pick-count">0 selected</span>
        <button type="button" class="btn btn-dark" style="width:auto;padding:0 24px" id="print-btn">Print selected</button>
    </div>
</div>

<div class="sheet">
    @foreach ($cards as $card)
        <div class="card" data-card>
            <div class="top"><span>{{ config('app.name') }}</span><span>{{ $card['name'] }}</span></div>
            <h2>Scan to order.<br>Skip the wait.</h2>
            <div class="qr">{!! $card['svg'] !!}</div>
            <div style="text-align:center;font-size:14px;font-weight:700">Point your phone camera at the code</div>

            <div class="tools noprint">
                <label class="pick"><input type="checkbox" class="pick-box"> Print this card</label>

                <form method="POST" action="{{ route('tables.update', $card['id']) }}" class="row">
                    @csrf @method('PUT')
                    <input type="text" name="name" value="{{ $card['name'] }}" required maxlength="255">
                    <button type="submit" class="btn-save">Save</button>
                </form>

                <form method="POST" action="{{ route('tables.destroy', $card['id']) }}"
                      onsubmit="return confirm('Delete {{ addslashes($card['name']) }}? Its orders will be deleted too.')">
                    @csrf @method('DELETE')
                    <button type="submit" class="btn-del">Delete</button>
                </form>
            </div>
        </div>
    @endforeach
</div>

<script>
    const boxes = [...document.querySelectorAll('.pick-box')];
    const all = document.getElementById('pick-all');
    const count = document.getElementById('pick-count');

    function sync() {
        boxes.forEach(b => b.closest('[data-card]').classList.toggle('picked', b.checked));
        const n = boxes.filter(b => b.checked).length;
        count.textContent = n + ' selected';
        all.checked = n === boxes.length && n > 0;
    }

    boxes.forEach(b => b.addEventListener('change', sync));
    all.addEventListener('change', () => { boxes.forEach(b => b.checked = all.checked); sync(); });

    document.getElementById('print-btn').addEventListener('click', () => {
        const any = boxes.some(b => b.checked);
        if (!any) { alert('Tick at least one card to print.'); return; }
        document.body.classList.add('print-selected');
        window.print();
    });
    window.addEventListener('afterprint', () => document.body.classList.remove('print-selected'));
    sync();
</script>
@endsection