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

<div class="page-header">
    <div>
        <h1 class="page-title"><i class="fas fa-calendar-check me-2" style="color:var(--sw-primary);"></i>Detail Booking</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">Detail Booking</li>
        </ol></nav>
    </div>
</div>

<div class="row g-4">
    <div class="col-lg-7">
        <div class="card">
            <div class="card-body p-4">

                {{-- Kode Booking --}}
                <div class="d-flex align-items-center justify-content-between mb-4">
                    <div>
                        <div style="font-size:0.775rem;color:var(--sw-gray);">Kode Booking</div>
                        <div class="fw-700" style="font-size:1.1rem;color:var(--sw-dark);letter-spacing:1px;">
                            {{ $booking->booking_code }}
                        </div>
                    </div>
                    @php $badge = $booking->status_badge; @endphp
                    <span class="badge-status {{ $badge['class'] }}" style="font-size:0.825rem;padding:0.5em 1em;">
                        {{ $badge['label'] }}
                    </span>
                </div>

                {{-- Status Timeline --}}
                <div class="mb-4 p-3 rounded-sw" style="background:var(--sw-gray-light);">
                    <div class="d-flex justify-content-between position-relative">
                        {{-- Line --}}
                        <div style="position:absolute;top:18px;left:10%;right:10%;height:2px;background:#ECEFF1;z-index:0;"></div>

                        @php
                            $steps = [
                                ['key'=>'pending',    'icon'=>'fa-clock',        'label'=>'Menunggu'],
                                ['key'=>'confirmed',  'icon'=>'fa-circle-check', 'label'=>'Dikonfirmasi'],
                                ['key'=>'in_process', 'icon'=>'fa-soap',         'label'=>'Dicuci'],
                                ['key'=>'completed',  'icon'=>'fa-flag-checkered','label'=>'Selesai'],
                            ];
                            $statusOrder = ['pending'=>0,'confirmed'=>1,'in_process'=>2,'completed'=>3,'cancelled'=>-1];
                            $currentOrder = $statusOrder[$booking->status] ?? 0;
                        @endphp
                        @foreach ($steps as $step)
                        @php $stepOrder = $statusOrder[$step['key']]; $isActive = $currentOrder >= $stepOrder; @endphp
                        <div class="text-center" style="z-index:1;flex:1;">
                            <div class="mx-auto d-flex align-items-center justify-content-center rounded-circle mb-1"
                                 style="width:36px;height:36px;
                                        background:{{ $isActive ? 'var(--sw-primary)' : '#ECEFF1' }};
                                        color:{{ $isActive ? '#fff' : 'var(--sw-gray)' }};">
                                <i class="fas {{ $step['icon'] }}" style="font-size:0.8rem;"></i>
                            </div>
                            <div style="font-size:0.7rem;color:{{ $isActive ? 'var(--sw-primary-dark)' : 'var(--sw-gray)' }};font-weight:{{ $isActive ? '600' : '400' }};">
                                {{ $step['label'] }}
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>

                {{-- Detail Info --}}
                <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.9rem;">{{ $booking->service->name }}</div>
                    </div>
                    <div class="col-6">
                        <div style="font-size:0.775rem;color:var(--sw-gray);">Nomor Antrian</div>
                        <div class="fw-700" style="font-size:0.9rem;color:var(--sw-primary-dark);">
                            #{{ str_pad($booking->queue_number, 2, '0', STR_PAD_LEFT) }}
                        </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.9rem;">
                            {{ $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</div>
                        <div class="fw-600" style="font-size:0.9rem;">
                            {{ 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.9rem;">{{ $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.9rem;letter-spacing:1px;">{{ $booking->vehicle_plate }}</div>
                    </div>
                    @if ($booking->notes)
                    <div class="col-12">
                        <div style="font-size:0.775rem;color:var(--sw-gray);">Catatan</div>
                        <div style="font-size:0.875rem;">{{ $booking->notes }}</div>
                    </div>
                    @endif
                </div>

                {{-- Tombol Aksi --}}
                <div class="d-flex gap-2 mt-4 pt-3" style="border-top:1px solid #ECEFF1;">
                    @if ($booking->payment && $booking->payment->status === 'unpaid')
                    <a href="{{ route('customer.payment.show', $booking) }}" class="btn btn-primary">
                        <i class="fas fa-credit-card me-2"></i>Bayar Sekarang
                    </a>
                    @endif
                    @if ($booking->isCancellable())
                    <form method="POST" action="{{ route('customer.booking.cancel', $booking) }}">
                        @csrf @method('PATCH')
                        <button type="submit" class="btn btn-outline-danger confirm-delete"
                                data-title="Batalkan Booking?"
                                data-text="Booking yang dibatalkan tidak dapat dikembalikan.">
                            <i class="fas fa-xmark me-2"></i>Batalkan
                        </button>
                    </form>
                    @endif
                    <a href="{{ route('customer.queue.show', $booking) }}" class="btn btn-outline-primary ms-auto">
                        <i class="fas fa-list-ol me-2"></i>Lihat Antrian
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- Kartu Pembayaran --}}
    <div class="col-lg-5">
        <div class="card">
            <div class="card-body p-4">
                <h6 class="fw-700 mb-3" style="color:var(--sw-dark);">
                    <i class="fas fa-credit-card me-2" style="color:var(--sw-primary);"></i>
                    Status Pembayaran
                </h6>
                @if ($booking->payment)
                @php $pb = $booking->payment->status_badge; @endphp
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <span style="font-size:0.875rem;color:var(--sw-gray);">Status</span>
                    <span class="badge-status {{ $pb['class'] }}">{{ $pb['label'] }}</span>
                </div>
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <span style="font-size:0.875rem;color:var(--sw-gray);">Total</span>
                    <span class="fw-700" style="color:var(--sw-primary-dark);">
                        {{ $booking->payment->formatted_amount }}
                    </span>
                </div>
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <span style="font-size:0.875rem;color:var(--sw-gray);">Metode</span>
                    <span class="fw-600">{{ $booking->payment->method_label }}</span>
                </div>
                @if ($booking->payment->status === 'unpaid')
                <div class="alert border-0 rounded-sw mb-3" style="background:#FFF3E0;font-size:0.8rem;color:#E65100;">
                    <i class="fas fa-triangle-exclamation me-1"></i>
                    Batas pembayaran: <strong>{{ $booking->payment->expired_at?->format('d M Y, H:i') }} WIB</strong>
                </div>
                <a href="{{ route('customer.payment.show', $booking) }}" class="btn btn-primary w-100">
                    <i class="fas fa-qrcode me-2"></i>Bayar Sekarang
                </a>
                @endif
                @else
                <p style="font-size:0.875rem;color:var(--sw-gray);">Data pembayaran belum tersedia.</p>
                @endif
            </div>
        </div>
    </div>
</div>

</x-layouts.app>