@extends("layouts.admin")
@section("title","Detail Transaksi")

@section("content")
<div class="max-w-2xl">

    <a href="{{ route('admin.transaksi.index') }}"
       class="inline-flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-700 mb-4">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
        Kembali ke daftar transaksi
    </a>

    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">

        {{-- Header: kode booking + status --}}
        <div class="flex items-center justify-between px-6 py-5 border-b border-gray-100">
            <div>
                <div class="text-xs text-gray-400 mb-0.5">Kode booking</div>
                <div class="text-base font-bold text-blue-700 font-mono tracking-wide">{{ $pemesanan->kode_booking }}</div>
            </div>
            @php
                $statusColor = match($pemesanan->status_bayar) {
                    'lunas' => 'bg-green-50 text-green-700',
                    'gagal' => 'bg-red-50 text-red-700',
                    default => 'bg-amber-50 text-amber-700',
                };
                $statusDot = match($pemesanan->status_bayar) {
                    'lunas' => 'bg-green-500',
                    'gagal' => 'bg-red-500',
                    default => 'bg-amber-500',
                };
            @endphp
            <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold {{ $statusColor }}">
                <span class="w-1.5 h-1.5 rounded-full {{ $statusDot }}"></span>
                {{ $pemesanan->label_status }}
            </span>
        </div>

        <div class="p-6 space-y-6">

            {{-- Info grid --}}
            <div class="grid grid-cols-2 gap-x-4 gap-y-4 text-sm">
                <div>
                    <div class="text-xs text-gray-400 mb-0.5">Status pemesanan</div>
                    <div class="font-medium text-gray-800">{{ $pemesanan->label_status_pemesanan }}</div>
                </div>
                <div>
                    <div class="text-xs text-gray-400 mb-0.5">Pelanggan</div>
                    <div class="font-medium text-gray-800">{{ $pemesanan->pengguna?->nama_lengkap ?? 'Manual' }}</div>
                </div>
                <div class="col-span-2">
                    <div class="text-xs text-gray-400 mb-0.5">Rute & jadwal</div>
                    @if($pemesanan->jadwal)
                        <div class="font-medium text-gray-800">{{ $pemesanan->jadwal->rute?->label ?? '-' }}</div>
                        <div class="text-gray-500 text-xs mt-0.5">
                            {{ optional($pemesanan->jadwal->tanggal_berangkat)->isoFormat('D MMM Y') }} &middot; {{ $pemesanan->jadwal->slot_waktu }} WIB
                        </div>
                    @else
                        <div class="text-gray-400">Jadwal belum tersedia</div>
                    @endif
                </div>
                <div>
                    <div class="text-xs text-gray-400 mb-0.5">Total harga</div>
                    <div class="font-bold text-green-700 text-base">Rp {{ number_format($pemesanan->total_harga,0,",",".") }}</div>
                </div>
                <div>
                    <div class="text-xs text-gray-400 mb-0.5">Metode bayar</div>
                    <div class="font-medium text-gray-800">{{ $pemesanan->metode_bayar === 'transfer_manual' ? 'Transfer Manual' : 'Bayar di Loket' }}</div>
                </div>
                <div>
                    <div class="text-xs text-gray-400 mb-0.5">Dikonfirmasi oleh</div>
                    <div class="font-medium text-gray-800">{{ $pemesanan->dikonfirmasiOleh?->nama ?? '—' }}</div>
                </div>
                <div>
                    <div class="text-xs text-gray-400 mb-0.5">Dikonfirmasi pada</div>
                    <div class="font-medium text-gray-800">{{ $pemesanan->dikonfirmasi_pada?->format('d M Y H:i') ?? '—' }}</div>
                </div>
            </div>

            {{-- Data penumpang --}}
            <div>
                <div class="flex items-center gap-2 mb-3">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-400"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg>
                    <h3 class="text-sm font-semibold text-gray-700">Data penumpang</h3>
                </div>

                <div class="rounded-xl border border-gray-100 overflow-hidden">
                    <div class="grid grid-cols-[70px_1fr_140px] gap-3 px-4 py-2.5 bg-gray-50 text-xs font-medium text-gray-400">
                        <div>Kursi</div>
                        <div>Nama</div>
                        <div>No telepon</div>
                    </div>
                    @forelse($pemesanan->penumpang as $detail)
                        <div class="grid grid-cols-[70px_1fr_140px] gap-3 px-4 py-3 text-sm border-t border-gray-50 items-center">
                            <span class="inline-flex items-center justify-center w-7 h-7 rounded-lg bg-blue-50 text-blue-700 text-xs font-bold">
                                {{ $detail->kursi?->nomor_kursi ?? '-' }}
                            </span>
                            <span class="font-medium text-gray-800 truncate">{{ $detail->nama_penumpang }}</span>
                            <span class="text-gray-600">{{ $detail->no_telepon ?? '-' }}</span>
                        </div>
                    @empty
                        <div class="px-4 py-6 text-center text-sm text-gray-400">Tidak ada data penumpang</div>
                    @endforelse
                </div>
            </div>

            {{-- Bukti transfer --}}
            <div>
                <div class="flex items-center gap-2 mb-3">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-400"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
                    <h3 class="text-sm font-semibold text-gray-700">Bukti transfer</h3>
                </div>

                @if($pemesanan->bukti_transfer)
                    <a href="{{ route('admin.transaksi.bukti-transfer', $pemesanan) }}" target="_blank"
                       class="inline-flex items-center gap-1.5 rounded-xl border border-blue-100 bg-blue-50 text-blue-700 text-sm font-medium px-4 py-2.5 hover:bg-blue-100 transition">
                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><path d="M15 3h6v6M10 14L21 3"/></svg>
                        Lihat bukti transfer
                    </a>
                @else
                    <div class="flex items-center gap-2 rounded-xl bg-amber-50 border border-amber-100 px-4 py-2.5">
                        <svg width="16" height="16" class="shrink-0 text-amber-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 9v4m0 4h.01M10.3 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.7 3.86a2 2 0 00-3.4 0z"/></svg>
                        <span class="text-sm text-amber-700">Belum ada bukti transfer. Pesanan tetap bisa dikonfirmasi.</span>
                    </div>
                @endif
            </div>

            {{-- Aksi --}}
            @if($pemesanan->status_pemesanan === "menunggu_konfirmasi")
                <div class="flex flex-wrap gap-3 pt-5 border-t border-gray-100">
                    <form method="POST" action="{{ route('admin.transaksi.verifikasi',$pemesanan) }}">
                        @csrf @method('PATCH')
                        <input type="hidden" name="action" value="lunas">
                        <button type="submit" class="inline-flex items-center gap-1.5 rounded-xl bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold px-4 py-2.5 transition">
                            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
                            Konfirmasi pesanan
                        </button>
                    </form>
                    <form method="POST" action="{{ route('admin.transaksi.verifikasi',$pemesanan) }}">
                        @csrf @method('PATCH')
                        <input type="hidden" name="action" value="gagal">
                        <button type="submit" class="inline-flex items-center gap-1.5 rounded-xl border border-red-200 text-red-600 hover:bg-red-50 text-sm font-semibold px-4 py-2.5 transition">
                            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
                            Tolak pesanan
                        </button>
                    </form>
                </div>
            @elseif($pemesanan->status_pemesanan === 'dikonfirmasi')
                <div class="flex flex-wrap gap-3 pt-5 border-t border-gray-100">
                    <form method="POST" action="{{ route('admin.transaksi.verifikasi',$pemesanan) }}">
                        @csrf @method('PATCH')
                        <input type="hidden" name="action" value="selesai">
                        <button type="submit" class="inline-flex items-center gap-1.5 rounded-xl bg-gray-800 hover:bg-gray-900 text-white text-sm font-semibold px-4 py-2.5 transition">
                            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
                            Tandai selesai
                        </button>
                    </form>
                </div>
            @endif

        </div>
    </div>
</div>
@endsection