@extends("layouts.pelanggan")
@section("title","Riwayat Pemesanan")
@section("content")

<div class="mb-6">
    <h1 class="text-2xl font-bold text-blue-800">Riwayat Pemesanan</h1>
    <p class="text-sm text-gray-500 mt-1">Semua perjalanan yang pernah kamu pesan ada di sini</p>
</div>

@if($pemesanan->isEmpty())
<div class="card flex flex-col items-center text-center py-14 px-6">
    <div class="w-16 h-16 rounded-full bg-blue-50 flex items-center justify-center mb-4">
        <svg class="w-8 h-8 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
        </svg>
    </div>
    <p class="text-gray-600 font-medium">Belum ada riwayat pemesanan</p>
    <p class="text-sm text-gray-400 mt-1 mb-5">Yuk cari jadwal keberangkatanmu berikutnya</p>
    <a href="{{ route('p.cari') }}" class="btn-primary text-sm px-5 py-2">Cari Tiket Sekarang</a>
</div>
@else
<div class="space-y-4">
    @foreach($pemesanan as $p)
    <div class="card hover:shadow-md transition-shadow duration-200">

        {{-- baris atas: kode booking + badge status --}}
        <div class="flex flex-wrap items-center justify-between gap-2 pb-3 mb-3 border-b border-gray-100">
            <div class="flex items-center gap-2">
                <svg class="w-4 h-4 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h.01M15 12h.01M4 6h16a1 1 0 011 1v3a2 2 0 000 4v3a1 1 0 01-1 1H4a1 1 0 01-1-1v-3a2 2 0 000-4V7a1 1 0 011-1z" />
                </svg>
                <span class="font-mono text-sm font-semibold text-blue-700">{{ $p->kode_booking }}</span>
            </div>
            <div class="flex items-center gap-2">
                <span class="px-2.5 py-1 rounded-full text-xs font-medium
                        {{ $p->status_bayar === 'lunas' ? 'bg-green-100 text-green-700' :
                          ($p->status_bayar === 'gagal'  ? 'bg-red-100 text-red-700' :
                                                            'bg-yellow-100 text-yellow-700') }}">
                    {{ $p->label_status }}
                </span>
                <span class="px-2.5 py-1 rounded-full text-xs font-medium
                        {{ $p->status_pemesanan === 'dikonfirmasi' ? 'bg-blue-100 text-blue-700' :
                          ($p->status_pemesanan === 'dibatalkan' ? 'bg-red-100 text-red-700' :
                            ($p->status_pemesanan === 'selesai' ? 'bg-slate-100 text-slate-700' : 'bg-yellow-100 text-yellow-700')) }}">
                    {{ $p->label_status_pemesanan }}
                </span>
            </div>
        </div>

        {{-- baris tengah: rute + detail jadwal --}}
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div class="min-w-0">
                <div class="flex items-center gap-2 text-lg font-semibold text-gray-800">
                    <span class="truncate">{{ $p->jadwal->rute->kota_asal }}</span>
                    <svg class="w-4 h-4 text-blue-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
                    </svg>
                    <span class="truncate">{{ $p->jadwal->rute->kota_tujuan }}</span>
                </div>
                <div class="flex flex-wrap items-center gap-x-4 gap-y-1 mt-2 text-sm text-gray-500">
                    <span class="flex items-center gap-1.5">
                        <svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                        {{ $p->jadwal->tanggal_berangkat->isoFormat('D MMM Y') }}
                    </span>
                    <span class="flex items-center gap-1.5">
                        <svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        {{ $p->jadwal->slot_waktu }} WIB
                    </span>
                    <span class="flex items-center gap-1.5">
                        <svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a4 4 0 00-3-3.87M9 20H4v-2a4 4 0 013-3.87m6-5.13a4 4 0 11-8 0 4 4 0 018 0zm6 0a4 4 0 11-8 0 4 4 0 018 0z" />
                        </svg>
                        {{ $p->penumpang->count() }} penumpang
                    </span>
                </div>
            </div>

            {{-- baris aksi --}}
            <div class="flex flex-wrap md:flex-nowrap items-center gap-2 shrink-0">
                @if($p->can_show_etiket)
                <a href="{{ route('p.etiket', $p->kode_booking) }}"
                    class="btn-primary text-sm px-4 py-1.5 whitespace-nowrap">
                    Lihat E-Ticket
                </a>

                @if(! empty($p->complaint['show']))
                @if($p->complaint['disabled'])
                <button type="button"
                    class="px-4 py-1.5 rounded-lg bg-slate-200 text-slate-600 text-sm whitespace-nowrap cursor-not-allowed"
                    disabled>
                    {{ $p->complaint['label'] }}
                </button>
                @else
                <a href="{{ $p->complaint['href'] }}"
                    class="px-4 py-1.5 rounded-lg text-sm font-medium text-white whitespace-nowrap
                        {{ $p->complaint['variant'] === 'orange'
                            ? 'bg-orange-500 hover:bg-orange-600'
                            : 'bg-green-500 hover:bg-green-600' }}">
                    {{ $p->complaint['label'] }}
                </a>
                @endif
                @endif
                @elseif($p->status_pemesanan === 'menunggu_konfirmasi')
                <a href="{{ route('p.bayar', $p->kode_booking) }}"
                    class="btn-secondary text-sm px-4 py-1.5 whitespace-nowrap">
                    Lihat Status Pembayaran
                </a>
                @endif
            </div>
        </div>
    </div>
    @endforeach
</div>

<div class="mt-6">{{ $pemesanan->links() }}</div>
@endif
@endsection