{{-- Antrian Aktif Customer --}}
<x-layouts.app :title="'Antrian Saya'">

<div class="page-header">
    <div>
        <h1 class="page-title"><i class="fas fa-list-ol me-2" style="color:var(--sw-primary);"></i>Antrian Saya</h1>
        <nav aria-label="breadcrumb"><ol class="breadcrumb mb-0" style="font-size:0.8rem;">
            <li class="breadcrumb-item"><a href="{{ route('customer.dashboard') }}" style="color:var(--sw-primary);text-decoration:none;">Dashboard</a></li>
            <li class="breadcrumb-item active">Antrian</li>
        </ol></nav>
    </div>
</div>

@if ($bookings->isEmpty())
<div class="card"><div class="card-body text-center py-5" style="color:var(--sw-gray);">
    <i class="fas fa-car d-block mb-2" style="font-size:2.5rem;color:#ECEFF1;"></i>
    <div>Tidak ada antrian aktif saat ini.</div>
    <a href="{{ route('customer.booking.create') }}" class="btn btn-primary btn-sm mt-3 px-4">
        <i class="fas fa-plus me-1"></i>Booking Sekarang
    </a>
</div></div>
@else
<div class="row g-3">
    @foreach ($bookings as $booking)
    <div class="col-md-6 col-lg-4">
        <div class="card h-100 card-hover">
            <div class="card-body p-4">
                {{-- Nomor Antrian Besar --}}
                <div class="text-center mb-3">
                    <div style="font-size:0.775rem;color:var(--sw-gray);margin-bottom:0.25rem;">Nomor Antrian</div>
                    <div class="fw-900 d-inline-flex align-items-center justify-content-center"
                         style="width:72px;height:72px;border-radius:20px;
                                background:linear-gradient(135deg,var(--sw-primary),var(--sw-primary-dark));
                                color:#fff;font-size:1.75rem;box-shadow:0 6px 20px rgba(79,195,247,.4);">
                        {{ str_pad($booking->queue_number, 2, '0', STR_PAD_LEFT) }}
                    </div>
                </div>

                <h6 class="fw-700 text-center mb-1" style="color:var(--sw-dark);">
                    {{ $booking->service->name }}
                </h6>
                <div class="text-center mb-3" style="font-size:0.8rem;color:var(--sw-gray);">
                    {{ $booking->schedule->date->locale('id')->isoFormat('D MMM Y') }}
                    &nbsp;·&nbsp;
                    {{ substr($booking->schedule->time_slot, 0, 5) }} WIB
                </div>

                @php $badge = $booking->status_badge; @endphp
                <div class="text-center mb-3">
                    <span class="badge-status {{ $badge['class'] }}">{{ $badge['label'] }}</span>
                </div>

                <div class="d-flex align-items-center justify-content-between"
                     style="font-size:0.8rem;color:var(--sw-gray);border-top:1px solid #F5F7FA;padding-top:0.75rem;">
                    <span><i class="fas fa-car me-1"></i>{{ $booking->vehicle_plate }}</span>
                    <a href="{{ route('customer.queue.show', $booking) }}"
                       style="color:var(--sw-primary);text-decoration:none;font-weight:500;">
                        Detail <i class="fas fa-arrow-right ms-1"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>
@endif

</x-layouts.app>