@extends("layouts.pelanggan")
@section("title","Cari Jadwal")
@section("content")

{{-- Hero Section --}}
<div class="relative overflow-hidden bg-gradient-to-br from-blue-50 to-indigo-100 -mx-4 -mt-4 px-4 pt-8 pb-10 md:-mx-8 md:-mt-8 md:px-8 mb-6">
    {{-- Dekorasi garis diagonal merah-putih-hijau --}}
    <div class="absolute top-0 right-0 w-40 h-40 md:w-56 md:h-56 pointer-events-none">
        <svg viewBox="0 0 200 200" class="w-full h-full">
            <line x1="200" y1="0" x2="60" y2="200" stroke="#dc2626" stroke-width="10" stroke-linecap="round" opacity="0.6"/>
            <line x1="222" y1="18" x2="82" y2="218" stroke="#d1d5db" stroke-width="10" stroke-linecap="round" opacity="0.6"/>
            <line x1="244" y1="36" x2="104" y2="236" stroke="#16a34a" stroke-width="10" stroke-linecap="round" opacity="0.6"/>
        </svg>
    </div>

    <div class="relative z-10 max-w-md">
        <h1 class="text-3xl md:text-4xl font-extrabold text-gray-900 leading-tight">
            Cari <span class="text-blue-700">Tiket Bus</span>
        </h1>
        <div class="w-12 h-1 bg-blue-700 rounded-full mt-2 mb-4"></div>
        <p class="text-gray-500 text-sm md:text-base">
            Temukan perjalanan terbaik Anda dengan mudah dan cepat
        </p>
    </div>
</div>

{{-- Form Pencarian --}}
<div class="bg-white shadow-lg rounded-2xl p-5 md:p-6 mb-8">
    <form method="GET" action="{{ route("p.cari") }}" class="space-y-5">

        {{-- Kota Asal --}}
        <div>
            <div class="flex items-center gap-3 mb-2">
                <span class="flex items-center justify-center w-9 h-9 rounded-lg bg-red-100 text-red-500 flex-shrink-0">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M9.69 18.933a.75.75 0 00.62 0c.121-.055 4.976-2.27 7.5-6.024 1.096-1.63 1.69-3.28 1.69-4.909a8 8 0 10-16 0c0 1.63.594 3.28 1.69 4.909 2.524 3.754 7.38 5.97 7.5 6.024zM10 12a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/>
                    </svg>
                </span>
                <label class="text-base font-semibold text-gray-800">Kota Asal</label>
            </div>
            <div class="relative">
                <select name="asal" required
                    class="appearance-none w-full bg-white border border-gray-200 rounded-xl px-4 py-3 pr-10 text-gray-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <option value="">-- Pilih Kota --</option>
                    @foreach($rute->pluck("kota_asal")->unique()->sort() as $kota)
                        <option value="{{ $kota }}" {{ old("asal",request("asal"))==$kota ? "selected" : "" }}>
                            {{ $kota }}
                        </option>
                    @endforeach
                </select>
                <svg class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/>
                </svg>
            </div>
        </div>

        {{-- Kota Tujuan --}}
        <div>
            <div class="flex items-center gap-3 mb-2">
                <span class="flex items-center justify-center w-9 h-9 rounded-lg bg-green-100 text-green-600 flex-shrink-0">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M9.69 18.933a.75.75 0 00.62 0c.121-.055 4.976-2.27 7.5-6.024 1.096-1.63 1.69-3.28 1.69-4.909a8 8 0 10-16 0c0 1.63.594 3.28 1.69 4.909 2.524 3.754 7.38 5.97 7.5 6.024zM10 12a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/>
                    </svg>
                </span>
                <label class="text-base font-semibold text-gray-800">Kota Tujuan</label>
            </div>
            <div class="relative">
                <select name="tujuan" required
                    class="appearance-none w-full bg-white border border-gray-200 rounded-xl px-4 py-3 pr-10 text-gray-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <option value="">-- Pilih Kota --</option>
                    @foreach($rute->pluck("kota_tujuan")->unique()->sort() as $kota)
                        <option value="{{ $kota }}" {{ old("tujuan",request("tujuan"))==$kota ? "selected" : "" }}>
                            {{ $kota }}
                        </option>
                    @endforeach
                </select>
                <svg class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/>
                </svg>
            </div>
        </div>

        {{-- Tanggal Berangkat --}}
        <div>
            <div class="flex items-center gap-3 mb-2">
                <span class="flex items-center justify-center w-9 h-9 rounded-lg bg-blue-100 text-blue-600 flex-shrink-0">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5a.75.75 0 000 1.5h10.5a.75.75 0 000-1.5H4.75z" clip-rule="evenodd"/>
                    </svg>
                </span>
                <label class="text-base font-semibold text-gray-800">Tanggal Berangkat</label>
            </div>
            <input type="date" name="tanggal"
                   value="{{ old("tanggal", request("tanggal")) }}"
                   min="{{ today()->toDateString() }}"
                   required
                   class="w-full bg-white border border-gray-200 rounded-xl px-4 py-3 text-gray-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
        </div>

        {{-- Tombol Cari --}}
        <button type="submit"
            class="w-full bg-blue-700 hover:bg-blue-800 active:bg-blue-900 transition-colors text-white font-semibold rounded-xl py-3.5 flex items-center justify-center gap-2 text-base shadow-md">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd"/>
            </svg>
            Cari Jadwal
        </button>
    </form>
</div>

{{-- Hasil Pencarian --}}
@if(request()->filled(['asal', 'tujuan', 'tanggal']))
    @if($jadwal->isEmpty())
        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6 text-center text-yellow-700">
            Tidak ada jadwal tersedia untuk rute dan tanggal yang dipilih.
        </div>
    @else
        <h2 class="text-xl font-semibold mb-4">
            {{ $jadwal->count() }} Jadwal Ditemukan
        </h2>
        <div class="space-y-4">
        @foreach($jadwal as $j)
            <div class="bg-white shadow-sm rounded-2xl p-5 flex flex-col md:flex-row md:items-center justify-between gap-4">
                <div>
                    <div class="text-xl font-bold text-blue-800">
                        {{ $j->rute->kota_asal }} → {{ $j->rute->kota_tujuan }}
                    </div>
                    <div class="text-gray-500 text-sm mt-1">
                        🗓 {{ $j->tanggal_berangkat->isoFormat("dddd, D MMMM Y") }}
                        &nbsp;&nbsp;🕒 {{ $j->slot_waktu }} WIB
                    </div>
                    <div class="text-sm text-gray-500 mt-1">
                        🚌 {{ $j->bus->nama_armada }} ({{ $j->bus->nomor_polisi }})
                    </div>
                </div>
                <div class="text-right">
                    <div class="text-2xl font-bold text-green-700">
                        Rp {{ number_format($j->rute->harga, 0, ",", ".") }}
                    </div>
                    <div class="text-sm text-gray-500">{{ $j->kursi_tersedia }} kursi tersedia</div>
                    <a href="{{ route("p.kursi", $j->id) }}"
                       class="bg-blue-700 hover:bg-blue-800 text-white font-semibold rounded-xl mt-2 inline-block px-6 py-2.5 shadow-sm transition-colors">
                        Pilih Kursi →
                    </a>
                </div>
            </div>
        @endforeach
        </div>
    @endif
@endif
@endsection