@extends('layouts.pelanggan')
@section('title','E-Ticket')
@section('content')
<div class="max-w-xl mx-auto px-4 sm:px-0">
    

    <div class="bg-slate-50 border border-slate-200 rounded-3xl p-4 shadow-sm mb-5">
        <div class="text-sm text-slate-500">Kode Booking</div>
        <div class="mt-3 flex items-center justify-between gap-3">
            <div>
                <div class="text-2xl font-bold text-slate-900">{{ $pemesanan->kode_booking }}</div>
                <div class="text-xs text-slate-500 mt-1">Simpan kode booking ini untuk pengecekan tiket.</div>
            </div>
            <button onclick="navigator.clipboard.writeText('{{ $pemesanan->kode_booking }}')"
                    class="inline-flex items-center gap-2 rounded-2xl border border-slate-200 bg-white px-3 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-100">
                <span>Salin</span>
            </button>
        </div>
    </div>

    <div class="bg-white border border-slate-200 rounded-3xl shadow-sm p-5 mb-5">
        <div class="flex items-center gap-3 text-slate-900 mb-4">
            <div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-blue-50 text-blue-700">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 10.5h7.5m-7.5 3h7.5M9.75 16.5h4.5" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M6.75 20.25h.75a1.5 1.5 0 003 0h4.5a1.5 1.5 0 003 0h.75" />
                </svg>
            </div>
            <div>
                <div class="text-sm font-semibold">PT. Bilah Pane Putra</div>
                <div class="text-xs text-slate-500">Bus</div>
            </div>
        </div>

        <div class="space-y-3 border-y border-slate-200 py-4">
            <div class="flex items-start gap-3">
                <div class="mt-1 h-2 w-2 rounded-full bg-blue-500"></div>
                <div>
                    <div class="text-sm font-semibold text-slate-900">{{ $pemesanan->jadwal->rute->kota_asal }}</div>
                    <div class="text-xs text-slate-500">{{ $pemesanan->jadwal->slot_waktu }} • {{ $pemesanan->jadwal->tanggal_berangkat->isoFormat('D MMMM Y') }}</div>
                </div>
            </div>
            <div class="flex items-center justify-center text-blue-500">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M7.93 2.29a.75.75 0 011.06 0L12.72 6h3.78a.75.75 0 010 1.5H12.75l-3.72-3.72a.75.75 0 010-1.06zM5.22 7.5a.75.75 0 000 1.06L9 12.34v3.78a.75.75 0 001.5 0v-3.78L6.28 8.56a.75.75 0 00-1.06 0z" clip-rule="evenodd" />
                </svg>
            </div>
            <div class="flex items-start gap-3">
                <div class="mt-1 h-2 w-2 rounded-full bg-slate-300"></div>
                <div>
                    <div class="text-sm font-semibold text-slate-900">{{ $pemesanan->jadwal->rute->kota_tujuan }}</div>
                    <div class="text-xs text-slate-500">{{ $pemesanan->jadwal->tanggal_berangkat->isoFormat('D MMMM Y') }}</div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-3 gap-4 pt-4 text-sm text-slate-600">
            <div class="text-center">
                <div class="text-xs uppercase tracking-[0.2em] text-slate-400">Kursi</div>
                <div class="mt-2 font-semibold text-blue-700">{{ $pemesanan->penumpang->pluck('kursi.nomor_kursi')->join(', ') }}</div>
            </div>
            <div class="text-center border-l border-r border-slate-200">
                <div class="text-xs uppercase tracking-[0.2em] text-slate-400">Jumlah Penumpang</div>
                <div class="mt-2 font-semibold text-slate-900">{{ $pemesanan->penumpang->count() }} Orang</div>
            </div>
            <div class="text-center">
                <div class="text-xs uppercase tracking-[0.2em] text-slate-400">Harga</div>
                <div class="mt-2 font-semibold text-blue-700">Rp {{ number_format($pemesanan->total_harga,0,',','.') }}</div>
            </div>
        </div>
    </div>

    <div class="bg-white border border-slate-200 rounded-3xl shadow-sm p-5 mb-5">

    <h3 class="text-lg font-bold text-slate-900 mb-4">
        Daftar Penumpang
    </h3>

    <div class="overflow-x-auto">

        <table class="min-w-full border border-slate-200 rounded-xl overflow-hidden">

            <thead class="bg-blue-700 text-white">

                <tr>

                    <th class="px-4 py-3 text-center">No</th>

                    <th class="px-4 py-3 text-left">
                        Nama Penumpang
                    </th>

                    <th class="px-4 py-3 text-center">
                        Jenis Kelamin
                    </th>

                    <th class="px-4 py-3 text-center">
                        No. HP
                    </th>

                    <th class="px-4 py-3 text-center">
                        Kursi
                    </th>

                </tr>

            </thead>

            <tbody>

                @foreach($pemesanan->penumpang as $i => $penumpang)

                <tr class="border-t hover:bg-slate-50">

                    <td class="px-4 py-3 text-center">
                        {{ $i+1 }}
                    </td>

                    <td class="px-4 py-3">
                        {{ $penumpang->nama_penumpang }}
                    </td>

                    <td class="px-4 py-3 text-center">
                        {{ $penumpang->jenis_kelamin }}
                    </td>

                    <td class="px-4 py-3 text-center">
                        {{ $penumpang->no_telepon }}
                    </td>

                    <td class="px-4 py-3 text-center font-semibold text-blue-700">
                        {{ $penumpang->kursi->nomor_kursi }}
                    </td>

                </tr>

                @endforeach

            </tbody>

        </table>

    </div>

</div>
    <div class="bg-slate-50 border border-slate-200 rounded-3xl p-4 text-sm text-slate-700">
        <div class="font-semibold text-slate-900">Penting</div>
        <p class="mt-2">Tunjukkan e-ticket ini saat naik bus. Harap datang 30 menit sebelum keberangkatan.</p>
    </div>

    <div class="grid grid-cols-1 gap-3 mt-5 sm:grid-cols-2">
        <a href="{{ route('p.etiket.download', $pemesanan->kode_booking) }}"
   class="inline-flex items-center justify-center rounded-3xl border border-slate-200 bg-white py-3 text-sm font-semibold text-slate-900 hover:bg-slate-100">
    Unduh Tiket
</a>
        <a href="{{ route('beranda') }}" class="inline-flex items-center justify-center rounded-3xl bg-blue-700 py-3 text-sm font-semibold text-white hover:bg-blue-800">
            Kembali ke Beranda
        </a>
    </div>
</div>
@endsection