@extends("layouts.pelanggan")
@section("title","Data Penumpang")
@section("content")
<div class="max-w-3xl 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 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]">2</span>
            Data Penumpang
        </span>
        <span class="w-4 h-px bg-gray-200 shrink-0"></span>
        <span class="flex items-center gap-1 whitespace-nowrap">
            <span class="w-5 h-5 shrink-0 rounded-full bg-gray-200 text-gray-500 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">Isi Data Penumpang</h1>
        <p class="text-sm text-gray-500 mt-0.5">Lengkapi data penumpang untuk kursi yang sudah Anda pilih.</p>
    </div>

    <form method="POST" action="{{ route('p.pesan') }}" class="space-y-4 px-4" id="form-penumpang">
        @csrf
        <input type="hidden" name="jadwal_id" value="{{ $jadwal->id }}">
        @foreach($kursi as $nomor)
            <input type="hidden" name="kursi[]" value="{{ $nomor }}">
        @endforeach

        {{-- Ringkasan perjalanan --}}
        <div class="rounded-2xl bg-white border border-gray-100 shadow-sm p-4">
            <div class="flex items-center gap-2">
                <div class="w-9 h-9 shrink-0 rounded-full bg-blue-50 flex items-center justify-center text-blue-600">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M3 12h18M14 6l6 6-6 6"/>
                    </svg>
                </div>
                <div>
                    <div class="font-semibold text-gray-900 text-sm">{{ $jadwal->rute->kota_asal }} &rarr; {{ $jadwal->rute->kota_tujuan }}</div>
                    <div class="text-xs text-gray-500">{{ $jadwal->tanggal_berangkat->isoFormat('dddd, D MMM Y') }} &middot; {{ $jadwal->slot_waktu }} WIB</div>
                </div>
            </div>

            <div class="mt-3 pt-3 border-t border-dashed border-gray-200 flex items-center justify-between">
                <div class="flex flex-wrap gap-1.5">
                    @foreach($kursi as $nomor)
                        <span class="inline-flex items-center justify-center min-w-[28px] h-7 px-2 rounded-lg bg-blue-600 text-white text-xs font-bold">{{ $nomor }}</span>
                    @endforeach
                </div>
                <div class="text-right shrink-0 ml-3">
                    <div class="text-[11px] text-gray-400">Total ({{ count($kursi) }} kursi)</div>
                    <div class="text-sm font-bold text-blue-700">Rp {{ number_format(count($kursi) * $jadwal->rute->harga,0,',','.') }}</div>
                </div>
            </div>
        </div>

        {{-- Form per penumpang --}}
        @foreach($kursi as $idx => $nomor)
            <div class="rounded-2xl bg-white border border-gray-100 shadow-sm p-4">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center gap-2">
                        <span class="w-8 h-8 rounded-lg bg-blue-600 text-white text-sm font-bold flex items-center justify-center">{{ $nomor }}</span>
                        <span class="text-sm font-semibold text-gray-700">Penumpang {{ $idx + 1 }}</span>
                    </div>
                    <span class="text-[11px] font-medium text-green-700 bg-green-50 px-2 py-1 rounded-full">Kursi {{ $nomor }}</span>
                </div>

                <div class="space-y-3">
                    <div>
                        <label class="block text-xs font-medium text-gray-500 mb-1">Nama Lengkap</label>
                        <input type="text" name="penumpang[{{ $idx }}][nama]"
                               value="{{ old('penumpang.'.$idx.'.nama') }}"
                               class="w-full rounded-xl border border-gray-200 bg-gray-50 px-3.5 py-3 text-sm text-gray-900 focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none transition"
                               placeholder="Nama Lengkap" required>
                        @error('penumpang.'.$idx.'.nama')<p class="text-red-600 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>

                    <div>
                        <label class="block text-xs font-medium text-gray-500 mb-1">Nomor Telepon</label>
                        <input type="tel" inputmode="numeric" name="penumpang[{{ $idx }}][telepon]"
                               value="{{ old('penumpang.'.$idx.'.telepon') }}"
                               class="w-full rounded-xl border border-gray-200 bg-gray-50 px-3.5 py-3 text-sm text-gray-900 focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none transition"
                               placeholder="0812xxxxxxx" required>
                        @error('penumpang.'.$idx.'.telepon')<p class="text-red-600 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>

                    {{-- Jenis Kelamin: pakai JS toggle langsung, tidak bergantung ke peer-checked --}}
                    <div>
                        <label class="block text-xs font-medium text-gray-500 mb-2">Jenis Kelamin</label>
                        <input type="hidden" name="penumpang[{{ $idx }}][jenis_kelamin]"
                               id="gender-input-{{ $idx }}"
                               value="{{ old('penumpang.'.$idx.'.jenis_kelamin') }}" required>
                        <div class="grid grid-cols-2 gap-2">
                            @foreach(['Laki-laki','Perempuan'] as $g)
                                <button type="button"
                                        onclick="pilihGender({{ $idx }}, '{{ $g }}', this)"
                                        data-value="{{ $g }}"
                                        class="gender-btn-{{ $idx }} text-center text-sm py-2.5 rounded-xl border transition
                                            {{ old('penumpang.'.$idx.'.jenis_kelamin')===$g
                                                ? 'border-blue-600 bg-blue-50 text-blue-700 font-semibold'
                                                : 'border-gray-200 text-gray-600' }}">
                                    {{ $g }}
                                </button>
                            @endforeach
                        </div>
                        @error('penumpang.'.$idx.'.jenis_kelamin')<p class="text-red-600 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                </div>
            </div>
        @endforeach

        {{-- Metode bayar fixed: transfer manual (satu-satunya opsi, tidak perlu ditanyakan) --}}
        <input type="hidden" name="metode_bayar" value="transfer_manual">

        {{-- Tombol submit untuk desktop, mobile pakai sticky bar di bawah --}}
        <button type="submit" class="hidden md:flex w-full items-center justify-center gap-2 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3.5 transition">
            Lanjut ke Pembayaran
            <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="M5 12h14M13 6l6 6-6 6"/></svg>
        </button>
    </form>

    {{-- Sticky bottom bar khusus mobile — digeser ke atas bottom nav bawaan (bottom-16 = 64px, sesuaikan kalau tinggi nav kamu beda) --}}
    <div class="md:hidden fixed bottom-16 left-0 right-0 z-40 bg-white border-t border-gray-100 px-4 py-3 flex items-center gap-3 shadow-[0_-4px_12px_rgba(0,0,0,0.06)]">
        <div class="flex-1 min-w-0">
            <div class="text-[11px] text-gray-400">Total Bayar</div>
            <div class="text-base font-bold text-blue-700 truncate">Rp {{ number_format(count($kursi) * $jadwal->rute->harga,0,',','.') }}</div>
        </div>
        <button type="submit" form="form-penumpang" class="flex-1 rounded-xl bg-blue-600 active:bg-blue-700 text-white font-semibold py-3 text-sm">
            Lanjut ke Pembayaran
        </button>
    </div>
</div>

<script>
function pilihGender(idx, value, tombol) {
    document.getElementById('gender-input-' + idx).value = value;
    document.querySelectorAll('.gender-btn-' + idx).forEach(btn => {
        const aktif = btn.getAttribute('data-value') === value;
        btn.classList.toggle('border-blue-600', aktif);
        btn.classList.toggle('bg-blue-50', aktif);
        btn.classList.toggle('text-blue-700', aktif);
        btn.classList.toggle('font-semibold', aktif);
        btn.classList.toggle('border-gray-200', !aktif);
        btn.classList.toggle('text-gray-600', !aktif);
    });
}
</script>
@endsection