@extends("layouts.pelanggan")
@section("title","Pilih Kursi")
@section("content")
<div x-data="kursiSelector()" x-init="init()" data-max-kursi="{{ min($jadwal->kursi_tersedia, 36) }}" data-price="{{ $jadwal->rute->harga }}">

{{--
<div class="hidden">
    <h2 class="hidden">
        {{ $jadwal->rute->kota_asal }} → {{ $jadwal->rute->kota_tujuan }}
    </h2>
    <p class="hidden">
        🗓 {{ $jadwal->tanggal_berangkat->isoFormat("dddd, D MMMM Y") }}
        &nbsp; 🕒 {{ $jadwal->slot_waktu }} WIB
        &nbsp; 🚌 {{ $jadwal->bus->nama_armada }}
    </p>
    <p class="hidden">
        Harga per kursi: Rp {{ number_format($jadwal->rute->harga, 0, ",", ".") }}
    </p>
--}}

<div class="bg-white border border-slate-200 rounded-xl shadow-sm p-5 mb-6">
    <h2 class="text-xl font-bold text-blue-800">
        {{ $jadwal->rute->kota_asal }} &rarr; {{ $jadwal->rute->kota_tujuan }}
    </h2>
    <p class="text-gray-500 mt-2">
        &#128197; {{ $jadwal->tanggal_berangkat->isoFormat("dddd, D MMMM Y") }}
    </p>
    <p class="text-gray-500 mt-1">
        &#128652; {{ $jadwal->bus?->nama_armada ?? 'Armada belum tersedia' }}
    </p>
    <p class="mt-4 text-sm text-slate-500">Harga per kursi</p>
    <p class="font-semibold text-green-700">
        Rp{{ number_format($jadwal->rute->harga, 0, ",", ".") }}
    </p>
</div>

{{-- Pilih Jam Keberangkatan --}}
<div class="bg-white border border-slate-200 rounded-xl shadow-sm p-5 mb-6">
    <h3 class="font-semibold text-slate-900">Pilih Jam Keberangkatan</h3>
    <div class="flex flex-wrap gap-3 mt-4">
        @foreach($jadwalList as $item)
            <a
                href="{{ route('p.kursi', $item->id) }}"
                @class([
                    'rounded-xl border px-5 py-3 text-sm font-semibold transition-colors',
                    'border-blue-700 bg-blue-700 text-white shadow-sm' => $item->id === $jadwal->id,
                    'border-slate-200 bg-white text-slate-700 hover:border-blue-200 hover:bg-blue-50 hover:text-blue-700' => $item->id !== $jadwal->id,
                ])
                @if($item->id === $jadwal->id) aria-current="true" @endif
            >
                {{ $item->slot_waktu }} WIB
            </a>
        @endforeach
    </div>
</div>

{{-- Grid denah kursi --}}
<div class="mb-6">
    <h3 class="font-semibold mb-4">Denah Kursi Bus (Pilih kursi)</h3>

    <div class="flex items-center gap-6 mb-4">
        <div class="flex items-center gap-2">
            <span class="w-4 h-4 bg-white border border-blue-200 rounded-sm block"></span>
            <span class="text-sm text-gray-600">Tersedia</span>
        </div>
        <div class="flex items-center gap-2">
            <span class="w-4 h-4 bg-gray-300 rounded-sm block"></span>
            <span class="text-sm text-gray-600">Dipesan</span>
        </div>
        <div class="flex items-center gap-2">
            <span class="w-4 h-4 bg-blue-700 rounded-sm block"></span>
            <span class="text-sm text-gray-600">Dipilih</span>
        </div>
    </div>

    <div class="bg-white border border-slate-200 rounded-3xl shadow-sm p-5">
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-blue-50 rounded-full flex items-center justify-center text-blue-700">🚌</div>
                <div>
                    <div class="text-sm text-slate-400">Denah Kursi</div>
                    <div class="text-sm font-semibold text-slate-900">Susunan tempat duduk bus</div>
                </div>
            </div>
            <div class="h-2 w-20 bg-slate-100 rounded-full"></div>
        </div>

        {{-- Dua grid terpisah (kiri & kanan) dengan aisle divider di tengah --}}
        <div class="flex items-stretch justify-center gap-3 max-w-xs sm:max-w-sm mx-auto py-2">

            {{-- Kolom Kiri --}}
            <div class="grid grid-cols-2 gap-2.5">
                @foreach(range(0, 8) as $row)
                    @foreach([$row * 4 + 1, $row * 4 + 2] as $seat)
                        @php
                            $nomor = str_pad($seat, 2, "0", STR_PAD_LEFT);
                            $k = $kursi->get($nomor);
                            $terisi = $k && $k->status !== 'tersedia';
                        @endphp
                        <button
                            type="button"
                            :disabled="{{ $terisi ? 'true' : 'false' }}"
                            @click="toggleKursi('{{ $nomor }}')"
                            :class="{
                                'bg-slate-200 border-slate-300 text-slate-500 cursor-not-allowed': {{ $terisi ? 'true' : 'false' }},
                                'bg-blue-700 border-blue-700 text-white': !{{ $terisi ? 'true' : 'false' }} && dipilih.includes('{{ $nomor }}'),
                                'bg-white border border-slate-200 hover:border-blue-300 text-slate-900': !{{ $terisi ? 'true' : 'false' }} && !dipilih.includes('{{ $nomor }}'),
                            }"
                            class="appearance-none [-webkit-appearance:none] outline-none focus:outline-none w-12 h-11 sm:w-13 sm:h-12 rounded-xl border transition-colors text-sm font-semibold leading-none">
                            {{ $nomor }}
                        </button>
                    @endforeach
                @endforeach
            </div>

            {{-- Aisle Divider --}}
            <div class="flex flex-col items-center w-6">
                <div class="w-px flex-1 bg-slate-200"></div>
                <span class="text-[10px] tracking-[0.15em] text-blue-200 my-2 [writing-mode:vertical-rl]">AISLE</span>
                <div class="w-px flex-1 bg-slate-200"></div>
            </div>

            {{-- Kolom Kanan --}}
            <div class="grid grid-cols-2 gap-2.5">
                @foreach(range(0, 8) as $row)
                    @foreach([$row * 4 + 3, $row * 4 + 4] as $seat)
                        @php
                            $nomor = str_pad($seat, 2, "0", STR_PAD_LEFT);
                            $k = $kursi->get($nomor);
                            $terisi = $k && $k->status !== 'tersedia';
                        @endphp
                        <button
                            type="button"
                            :disabled="{{ $terisi ? 'true' : 'false' }}"
                            @click="toggleKursi('{{ $nomor }}')"
                            :class="{
                                'bg-slate-200 border-slate-300 text-slate-500 cursor-not-allowed': {{ $terisi ? 'true' : 'false' }},
                                'bg-blue-700 border-blue-700 text-white': !{{ $terisi ? 'true' : 'false' }} && dipilih.includes('{{ $nomor }}'),
                                'bg-white border border-slate-200 hover:border-blue-300 text-slate-900': !{{ $terisi ? 'true' : 'false' }} && !dipilih.includes('{{ $nomor }}'),
                            }"
                            class="appearance-none [-webkit-appearance:none] outline-none focus:outline-none w-12 h-11 sm:w-13 sm:h-12 rounded-xl border transition-colors text-sm font-semibold leading-none">
                            {{ $nomor }}
                        </button>
                    @endforeach
                @endforeach
            </div>
        </div>
    </div>
</div>

{{-- Form Checkout --}}
    <form method="POST" action="{{ route('p.datapenumpang') }}" x-ref="formPesan" x-on:submit="prepareSubmit()">
    @csrf
    <input type="hidden" name="jadwal_id" value="{{ $jadwal->id }}">

    {{-- Hidden inputs kursi dipilih --}}
    <template x-for="nomor in dipilih" :key="nomor">
        <input type="hidden" name="kursi[]" :value="nomor">
    </template>

    <div class="bg-white border border-slate-200 rounded-3xl shadow-sm p-5 mt-6" x-show="dipilih.length > 0">
        <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
            <div>
                <div class="text-sm text-slate-500">Harga Total</div>
                <div class="text-2xl font-bold text-emerald-700">Rp <span x-text="(dipilih.length * price).toLocaleString('id-ID')"></span></div>
            </div>
            <div class="space-y-1 text-right">
                <div class="text-sm text-slate-500">Kursi:</div>
                <div class="text-base font-semibold text-slate-900" x-text="dipilih.join(', ')"></div>
            </div>
            <button type="submit" class="bg-blue-700 text-white rounded-2xl px-6 py-3 text-sm font-semibold hover:bg-blue-800 transition-colors" :disabled="dipilih.length === 0">
                Pesan
            </button>
        </div>
    </div>
</form>
</div>

@push("scripts")
<script>
function kursiSelector() {
    return {
        dipilih: [],
        maxKursi: 1,
        price: 0,
        init() {
            // initialize numeric values from data attributes (safe for Blade)
            const metaMax = this.$el.getAttribute('data-max-kursi');
            const metaPrice = this.$el.getAttribute('data-price');
            this.maxKursi = parseInt(metaMax) || 1;
            this.price = parseInt(metaPrice) || 0;
        },
        prepareSubmit() {
            // Ensure hidden inputs exist before submit (fallback)
            this.dipilih.forEach(nomor => {
                const selector = `input[name="kursi[]"][value="${nomor}"]`;
                if (! this.$refs.formPesan.querySelector(selector)) {
                    const inp = document.createElement('input');
                    inp.type = 'hidden';
                    inp.name = 'kursi[]';
                    inp.value = nomor;
                    this.$refs.formPesan.appendChild(inp);
                }
            });
        },

        toggleKursi(nomor) {
            if (this.dipilih.includes(nomor)) {
                this.dipilih = this.dipilih.filter(n => n !== nomor);
            } else if (this.dipilih.length < this.maxKursi) {
                this.dipilih.push(nomor);
            } else {
                alert(`Maksimal ${this.maxKursi} kursi per pemesanan.`);
            }
        }
    };
}
</script>
@endpush
@endsection