@extends("layouts.pelanggan")
@section("title","Pembayaran")
@section("content")
<div class="max-w-2xl mx-auto pb-28 md:pb-6">

    {{-- Progress stepper --}}
    <div class="flex items-center justify-center gap-1.5 px-4 pt-4 pb-2 text-[11px] font-medium text-gray-400 whitespace-nowrap overflow-x-auto">
        <span class="flex items-center gap-1 text-blue-600 whitespace-nowrap">
            <span class="w-5 h-5 shrink-0 rounded-full bg-blue-600 text-white flex items-center justify-center text-[10px]">&#10003;</span>
            Pilih Kursi
        </span>
        <span class="w-4 h-px bg-blue-300 shrink-0"></span>
        <span class="flex items-center gap-1 text-blue-600 whitespace-nowrap">
            <span class="w-5 h-5 shrink-0 rounded-full bg-blue-600 text-white flex items-center justify-center text-[10px]">&#10003;</span>
            Data Penumpang
        </span>
        <span class="w-4 h-px bg-blue-300 shrink-0"></span>
        <span class="flex items-center gap-1 text-blue-600 font-semibold whitespace-nowrap">
            <span class="w-5 h-5 shrink-0 rounded-full bg-blue-600 text-white flex items-center justify-center text-[10px]">3</span>
            Pembayaran
        </span>
    </div>

    <div class="px-4 mb-4">
        <h1 class="text-xl font-bold text-blue-800">Selesaikan Pembayaran</h1>
        <p class="text-sm text-gray-500 mt-0.5">Transfer sesuai nominal, lalu unggah bukti agar lebih cepat diverifikasi.</p>
    </div>

    <div class="space-y-4 px-4">

        {{-- Ringkasan pemesanan --}}
        <div class="rounded-2xl bg-white border border-gray-100 shadow-sm p-4">
            <div class="text-sm font-semibold text-gray-700 mb-3">Ringkasan Pemesanan</div>

            <div class="flex items-center justify-between rounded-xl bg-blue-50 px-3.5 py-2.5 mb-3">
                <span class="text-xs text-blue-600 font-medium">Kode Booking</span>
                <div class="flex items-center gap-2">
                    <span class="text-sm font-bold text-blue-700 tracking-wide font-mono">{{ $pemesanan->kode_booking }}</span>
                    <button type="button" onclick="salinTeks('{{ $pemesanan->kode_booking }}', this)"
                            class="text-blue-600 shrink-0" aria-label="Salin kode booking">
                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
                    </button>
                </div>
            </div>

            <dl class="space-y-2 text-sm">
                <div class="flex justify-between gap-3">
                    <dt class="text-gray-500 shrink-0">Rute</dt>
                    <dd class="font-medium text-gray-800 text-right">{{ $pemesanan->jadwal->rute->kota_asal }} &rarr; {{ $pemesanan->jadwal->rute->kota_tujuan }}</dd>
                </div>
                <div class="flex justify-between gap-3">
                    <dt class="text-gray-500 shrink-0">Tanggal &amp; Waktu</dt>
                    <dd class="font-medium text-gray-800 text-right">{{ $pemesanan->jadwal->tanggal_berangkat->isoFormat("D MMM Y") }} pukul {{ $pemesanan->jadwal->slot_waktu }} WIB</dd>
                </div>
                <div class="flex justify-between gap-3">
                    <dt class="text-gray-500 shrink-0">Penumpang</dt>
                    <dd class="font-medium text-gray-800 text-right">{{ $pemesanan->penumpang->count() }} orang</dd>
                </div>
            </dl>

            <div class="mt-3 pt-3 border-t border-gray-200 flex items-center justify-between">
                <span class="text-sm font-semibold text-gray-800">Total</span>
                <span class="text-lg font-bold text-green-700">Rp {{ number_format($pemesanan->total_harga, 0, ",", ".") }}</span>
            </div>
        </div>

        @if($pemesanan->metode_bayar === "transfer_manual")

            {{-- Instruksi transfer --}}
            <div class="rounded-2xl bg-white border border-gray-100 shadow-sm p-4">
                <div class="text-sm font-semibold text-gray-700 mb-3">Transfer Manual</div>

                <div class="rounded-xl border border-blue-100 bg-blue-50 p-3.5 space-y-3">
                    <div class="flex items-center justify-between gap-3">
                        <div class="min-w-0">
                            <div class="text-[11px] text-blue-500">Bank BCA a.n. PT. Bilah Pane Putra</div>
                            <div class="text-base font-bold text-blue-800 tracking-wide font-mono">1234567890</div>
                        </div>
                        <button type="button" onclick="salinTeks('1234567890', this)"
                                class="shrink-0 flex items-center gap-1 rounded-lg bg-white border border-blue-200 text-blue-700 text-xs font-semibold px-3 py-2">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
                            Salin
                        </button>
                    </div>
                    <div class="pt-3 border-t border-blue-100 flex items-center justify-between">
                        <span class="text-xs text-blue-500">Nominal transfer</span>
                        <span class="text-sm font-bold text-blue-800">Rp {{ number_format($pemesanan->total_harga, 0, ",", ".") }}</span>
                    </div>
                </div>

                <div class="mt-3 flex items-start gap-2 rounded-xl bg-gray-50 border border-gray-100 px-3.5 py-2.5">
                    <svg width="16" height="16" class="shrink-0 text-gray-400 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 8v5m0 3h.01"/></svg>
                    <span class="text-xs text-gray-600">Bukti transfer bersifat opsional. Anda bisa langsung menunggu admin mengonfirmasi pesanan.</span>
                </div>
            </div>

            {{-- Status --}}
            <div class="rounded-2xl bg-white border border-gray-100 shadow-sm p-4 flex items-center gap-3">
                @if($pemesanan->bukti_transfer)
                    <div class="w-9 h-9 shrink-0 rounded-full bg-green-50 flex items-center justify-center text-green-600">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
                    </div>
                @else
                    <div class="w-9 h-9 shrink-0 rounded-full bg-amber-50 flex items-center justify-center text-amber-500">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>
                    </div>
                @endif
                <div class="min-w-0">
                    <div class="text-sm font-semibold text-gray-800">{{ $pemesanan->label_status }} &middot; {{ $pemesanan->label_status_pemesanan }}</div>
                    <div class="text-xs text-gray-500">
                        @if($pemesanan->bukti_transfer)
                            Bukti transfer sudah diunggah, menunggu konfirmasi admin.
                        @else
                            Belum ada bukti transfer. Pesanan tetap bisa dikonfirmasi admin tanpa bukti.
                        @endif
                    </div>
                    @if($pemesanan->bukti_transfer)
                        <a href="{{ route('p.bukti-transfer', $pemesanan) }}" target="_blank"
                           class="inline-block mt-1 text-xs font-semibold text-blue-600 hover:text-blue-800">
                            Lihat bukti transfer
                        </a>
                    @endif
                </div>
            </div>

            {{-- Upload bukti transfer --}}
            <form method="POST" action="{{ route('p.bayar.upload', $pemesanan->kode_booking) }}"
                  enctype="multipart/form-data" id="form-bukti" class="rounded-2xl bg-white border border-gray-100 shadow-sm p-4">
                @csrf
                <label class="block text-sm font-semibold text-gray-700 mb-1">Unggah Bukti Transfer</label>
                <p class="text-xs text-gray-400 mb-3">Opsional &middot; JPG, PNG, atau PDF, maks. 3 MB.</p>

                <label for="bukti" class="flex flex-col items-center justify-center gap-1.5 rounded-xl border-2 border-dashed border-gray-200 py-6 cursor-pointer hover:border-blue-300 transition">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-gray-400"><path d="M12 3v12m0 0l-4-4m4 4l4-4M4 21h16"/></svg>
                    <span class="text-sm font-medium text-gray-600" id="nama-file">Pilih file</span>
                    <input id="bukti" name="bukti" type="file" accept="image/*,.pdf" class="hidden"
                           onchange="document.getElementById('nama-file').textContent = this.files[0] ? this.files[0].name : 'Pilih file'">
                </label>
                @error('bukti')<p class="text-red-600 text-xs mt-1">{{ $message }}</p>@enderror

                <button type="submit" class="hidden md:block w-full mt-4 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3.5 transition">
                    Unggah Bukti Transfer
                </button>
            </form>

        @elseif($pemesanan->metode_bayar === 'bayar_di_loket')

            <div class="rounded-2xl bg-white border border-gray-100 shadow-sm p-4">
                <div class="text-sm font-semibold text-gray-700 mb-3">Bayar di Loket</div>
                <div class="rounded-xl border border-blue-100 bg-blue-50 p-3.5">
                    <p class="text-sm text-blue-700">Pembayaran dilakukan di loket. Admin akan mengonfirmasi pesanan setelah pembayaran diterima di lokasi.</p>
                    <p class="mt-3 text-sm font-semibold text-blue-800">{{ $pemesanan->label_status }} &middot; {{ $pemesanan->label_status_pemesanan }}</p>
                    <p class="text-xs text-blue-500 mt-1">Jika sudah dikonfirmasi, Anda akan diarahkan ke e-ticket.</p>
                </div>
            </div>

        @endif
    </div>

    {{-- Sticky bottom bar khusus mobile, hanya tampil untuk transfer manual --}}
    @if($pemesanan->metode_bayar === "transfer_manual")
        <div class="md:hidden fixed bottom-16 left-0 right-0 z-40 bg-white border-t border-gray-100 px-4 py-3 shadow-[0_-4px_12px_rgba(0,0,0,0.06)]">
            <button type="submit" form="form-bukti" class="w-full rounded-xl bg-blue-600 active:bg-blue-700 text-white font-semibold py-3 text-sm">
                Unggah Bukti Transfer
            </button>
        </div>
    @endif
</div>

<script>
function salinTeks(teks, tombol) {
    navigator.clipboard.writeText(teks).then(() => {
        const asli = tombol.innerHTML;
        tombol.innerHTML = 'Tersalin';
        setTimeout(() => tombol.innerHTML = asli, 1500);
    });
}
</script>
@endsection