{{-- Detail Nomor Antrian --}}
<x-layouts.app :title="'Nomor Antrian'">

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

<div class="row g-4 justify-content-center">
<div class="col-lg-6">

    {{-- Kartu Nomor Antrian Utama --}}
    <div class="card mb-4 text-center"
         style="background:linear-gradient(135deg,var(--sw-primary-dark),var(--sw-primary));color:#fff;border:none;">
        <div class="card-body p-5">
            <div style="font-size:0.875rem;opacity:0.85;margin-bottom:0.5rem;">SparkWash — Nomor Antrian</div>
            <div class="fw-900" style="font-size:5rem;line-height:1;letter-spacing:-2px;">
                {{ str_pad($booking->queue_number, 2, '0', STR_PAD_LEFT) }}
            </div>
            <div style="font-size:0.9rem;opacity:0.85;margin-top:0.5rem;">
                {{ $booking->booking_code }}
            </div>
        </div>
    </div>

    {{-- Status Timeline --}}
    <div class="card mb-4">
        <div class="card-body p-4">
            <h6 class="fw-700 mb-4" style="color:var(--sw-dark);">Status Layanan</h6>
            @php
                $steps = [
                    ['key'=>'pending',    'icon'=>'fa-clock',         'label'=>'Booking Dibuat',   'desc'=>'Menunggu pembayaran'],
                    ['key'=>'confirmed',  'icon'=>'fa-circle-check',  'label'=>'Dikonfirmasi',     'desc'=>'Menunggu giliran'],
                    ['key'=>'in_process', 'icon'=>'fa-soap',          'label'=>'Sedang Dicuci',    'desc'=>'Kendaraan sedang diproses'],
                    ['key'=>'completed',  'icon'=>'fa-flag-checkered','label'=>'Selesai',          'desc'=>'Kendaraan siap diambil'],
                ];
                $order = ['pending'=>0,'confirmed'=>1,'in_process'=>2,'completed'=>3,'cancelled'=>-1];
                $cur = $order[$booking->status] ?? 0;
            @endphp
            @foreach ($steps as $i => $step)
            @php $active = $cur >= $order[$step['key']]; $current = $cur === $order[$step['key']]; @endphp
            <div class="d-flex align-items-start gap-3 {{ !$loop->last ? 'mb-3' : '' }}">
                <div class="d-flex flex-column align-items-center">
                    <div class="d-flex align-items-center justify-content-center rounded-circle flex-shrink-0"
                         style="width:40px;height:40px;
                                background:{{ $active ? 'var(--sw-primary)' : '#ECEFF1' }};
                                color:{{ $active ? '#fff' : 'var(--sw-gray)' }};
                                box-shadow:{{ $current ? '0 0 0 4px rgba(79,195,247,.25)' : 'none' }};">
                        <i class="fas {{ $step['icon'] }}" style="font-size:0.85rem;"></i>
                    </div>
                    @if (!$loop->last)
                    <div style="width:2px;height:24px;background:{{ $active ? 'var(--sw-primary-light)' : '#ECEFF1' }};margin:4px 0;"></div>
                    @endif
                </div>
                <div class="pt-1">
                    <div class="fw-600" style="font-size:0.9rem;color:{{ $active ? 'var(--sw-dark)' : 'var(--sw-gray)' }};">
                        {{ $step['label'] }}
                        @if ($current)
                        <span class="badge rounded-pill ms-1"
                              style="background:var(--sw-primary-light);color:var(--sw-primary-dark);font-size:0.65rem;">
                            Sekarang
                        </span>
                        @endif
                    </div>
                    <div style="font-size:0.775rem;color:var(--sw-gray);">{{ $step['desc'] }}</div>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    {{-- Info Booking --}}
    <div class="card mb-4">
        <div class="card-body p-4">
            <h6 class="fw-700 mb-3" style="color:var(--sw-dark);">Informasi Booking</h6>
            <div class="row g-3">
                <div class="col-6">
                    <div style="font-size:0.775rem;color:var(--sw-gray);">Paket Layanan</div>
                    <div class="fw-600" style="font-size:0.875rem;">{{ $booking->service->name }}</div>
                </div>
                <div class="col-6">
                    <div style="font-size:0.775rem;color:var(--sw-gray);">Estimasi Durasi</div>
                    <div class="fw-600" style="font-size:0.875rem;">{{ $booking->service->formatted_duration }}</div>
                </div>
                <div class="col-6">
                    <div style="font-size:0.775rem;color:var(--sw-gray);">Tanggal</div>
                    <div class="fw-600" style="font-size:0.875rem;">
                        {{ $booking->schedule->date->locale('id')->isoFormat('D MMMM Y') }}
                    </div>
                </div>
                <div class="col-6">
                    <div style="font-size:0.775rem;color:var(--sw-gray);">Jam Layanan</div>
                    <div class="fw-700" style="font-size:0.875rem;color:var(--sw-primary-dark);">
                        {{ substr($booking->schedule->time_slot, 0, 5) }} WIB
                    </div>
                </div>
                <div class="col-6">
                    <div style="font-size:0.775rem;color:var(--sw-gray);">Kendaraan</div>
                    <div class="fw-600" style="font-size:0.875rem;">{{ $booking->vehicle_type }}</div>
                </div>
                <div class="col-6">
                    <div style="font-size:0.775rem;color:var(--sw-gray);">Plat Nomor</div>
                    <div class="fw-700" style="font-size:0.875rem;letter-spacing:1px;">{{ $booking->vehicle_plate }}</div>
                </div>
                @if ($ahead > 0)
                <div class="col-12">
                    <div class="alert border-0 rounded-sw mb-0" style="background:#E3F2FD;color:#1565C0;font-size:0.825rem;">
                        <i class="fas fa-info-circle me-1"></i>
                        Ada <strong>{{ $ahead }} kendaraan</strong> di depan Anda dalam antrian ini.
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Tombol Aksi --}}
    <div class="d-flex gap-2">
        <a href="{{ route('customer.booking.show', $booking) }}" class="btn btn-outline-primary flex-grow-1">
            <i class="fas fa-eye me-2"></i>Detail Booking
        </a>
        <a href="{{ route('customer.queue.index') }}" class="btn btn-outline-secondary flex-grow-1">
            <i class="fas fa-arrow-left me-2"></i>Kembali
        </a>
    </div>

</div>
</div>

</x-layouts.app>