@extends('layouts.app')
@section('title', 'Order Slip')
@section('content')
<div class="row justify-content-center">
    <div class="col-md-5">
        <div class="card p-4" id="ticketArea">
            <h4 class="text-center mb-3">Order Slip</h4>

            <div class="d-flex justify-content-between small">
                <span>Type: {{ $order->channelLabel() }}</span>
                <span>ORD No: {{ $order->order_number }}</span>
            </div>
            <div class="d-flex justify-content-between small mb-2">
                <span>{{ $order->table ? 'Table: ' . $order->table->name : '' }}</span>
                <span>Status: {{ ucfirst(str_replace('_',' ',$order->status)) }}</span>
            </div>
            <p class="small mb-2">Order At: {{ $order->created_at->format('d M Y h:i A') }}</p>

            <hr>
            <div class="d-flex justify-content-between small fw-bold">
                <span style="width:15%;">S.N</span><span style="width:50%;">Dishes</span><span style="width:15%;">QTY</span><span style="width:20%;text-align:right;">Price</span>
            </div>
            <hr>
            @foreach ($order->items as $i => $item)
            <div class="d-flex justify-content-between small mb-1">
                <span style="width:15%;">{{ $i + 1 }}.</span>
                <span style="width:50%;">{{ $item->displayName() }}</span>
                <span style="width:15%;">{{ $item->quantity }}</span>
                <span style="width:20%;text-align:right;">{{ number_format($item->lineTotal(), 0) }}</span>
            </div>
            @endforeach
            <hr>
            <div class="d-flex justify-content-between fw-bold fs-5"><span>Total Amount</span><span>Rs {{ number_format($order->total, 0) }}</span></div>

            <hr>
            @if ($kotNumbers->count())
            <p class="mb-1">KOT NO: {{ $kotNumbers->implode(',') }}</p>
            @endif
            <p class="mb-1">Printed By: {{ auth()->user()->name }}</p>
            <p class="mb-2">Printed At: {{ now()->format('d M Y h:i A') }}</p>

            <p class="text-center mt-3 mb-0">Thank You!</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 {
    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