@extends('layouts.app')
@section('content')
<div class="mb-3"><div class="page-kicker">Counter resilience</div><h1 class="page-title">Offline ticket queue</h1><div class="muted-line">Keep ticket data when connectivity is unstable, then sync later.</div></div>
<div class="row g-3">
    <div class="col-lg-4">
        <div class="panel panel-pad">
            <h2 class="h5 mb-3">Queue ticket</h2>
            <form method="post" action="{{ route('operations.offline.queue') }}">@csrf
                <select class="form-select mb-2" name="ticket_category_id" required>@foreach($categories as $category)<option value="{{ $category->id }}">{{ $category->name }}</option>@endforeach</select>
                <select class="form-select mb-2" name="gate_name"><option value="">Select gate</option>@foreach($gates as $gate)<option>{{ $gate->name }}</option>@endforeach</select>
                <input class="form-control mb-2" name="visitor_name" placeholder="Visitor name" required>
                <input class="form-control mb-2" name="visitor_cnic" placeholder="CNIC" required>
                <input class="form-control mb-2" name="visitor_phone" placeholder="Phone" required>
                <textarea class="form-control mb-3" name="visitor_address" placeholder="Address" required></textarea>
                <button class="btn btn-primary w-100">Add to offline queue</button>
            </form>
        </div>
    </div>
    <div class="col-lg-8">
        <div class="panel panel-pad">
            <h2 class="h5 mb-3">Queued tickets</h2>
            <div class="table-responsive"><table class="table align-middle">
                <thead><tr><th>Visitor</th><th>Class</th><th>Gate</th><th>Status</th><th>Queued</th><th></th></tr></thead>
                <tbody>@foreach($queued as $item)<tr>
                    <td>{{ $item->visitor_name }}<div class="small text-secondary">{{ $item->visitor_phone }}</div></td>
                    <td>{{ $item->category->code }}</td><td>{{ $item->gate_name ?: '-' }}</td><td><span class="badge badge-soft">{{ strtoupper($item->status) }}</span></td>
                    <td>{{ $item->queued_at->format('d M h:i A') }}</td>
                    <td class="text-end">@if($item->status === 'pending')<form method="post" action="{{ route('operations.offline.sync', $item) }}">@csrf<button class="btn btn-sm btn-outline-primary">Sync</button></form>@elseif($item->ticket)<a class="btn btn-sm btn-outline-secondary" href="{{ route('tickets.show', $item->ticket) }}">Ticket</a>@endif</td>
                </tr>@endforeach</tbody>
            </table></div>{{ $queued->links() }}
        </div>
    </div>
</div>
@endsection