@extends('layouts.app')
@section('title', strtoupper($station) . ' Ticket')
@section('content')
<div class="alert alert-info small">
    This prints via your browser/device's own printer setup — no print agent needed. Works
    from any phone, tablet, or computer on the network, as long as the printer is reachable
    from <em>this device</em> (e.g. set up as a shared/network printer in its OS settings).
</div>

<div class="row justify-content-center">
    <div class="col-md-5">
        <div class="card p-4" id="ticketArea">
            <h5 class="text-center mb-0">{{ strtoupper($station) === 'KOT' ? 'KITCHEN ORDER TICKET' : 'BAR ORDER TICKET' }}</h5>
            <p class="text-center text-muted small">Order #{{ $order->order_number }} — {{ $order->created_at->format('h:i A') }}</p>
            <p class="text-center small">{{ $order->table->name ?? ucfirst(str_replace('_',' ',$order->order_type)) }}</p>
            <hr>
            @foreach ($items as $item)
            <div class="mb-1">
                <strong>{{ $item->quantity }} × {{ $item->displayName() }}</strong>
                @if ($item->notes)<div class="small text-muted ms-3">Note: {{ $item->notes }}</div>@endif
            </div>
            @endforeach
            <hr>
            <p class="text-center small text-muted">Fired by {{ $order->user->name ?? '-' }}</p>
        </div>

        <button class="btn btn-dark w-100 mt-3 d-print-none" onclick="window.print()">🖨️ Print</button>
    </div>
</div>
@endsection
@section('scripts')
<style>
@media print {
    /* Isolate-and-show instead of an exclusion list: hide EVERYTHING by
       default, then explicitly show only the ticket. This is deliberately
       more robust than listing every element to hide (nav, buttons, alerts,
       etc.) — that approach missed the mobile bottom tab bar, which is
       exactly the kind of thing that's easy to forget to add to a list and
       then bleeds through on a real printout. Isolating the ticket means
       anything added to the layout later is hidden by default too. */
    body * { visibility: hidden; }
    #ticketArea, #ticketArea * { visibility: visible; }
    #ticketArea {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        border: none !important;
        box-shadow: none !important;
    }
    @page { margin: 0.3cm; }
}
</style>
@endsection