@extends("layouts.admin")
@section("title", $mode==="create" ? "Tambah Rute" : "Edit Rute")
@section("content")
<div class="max-w-xl">

    <a href="{{ route('admin.rute.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 rute
    </a>

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

        <div class="flex items-center gap-3 px-6 py-5 border-b border-gray-100">
            <div class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center shrink-0">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-600"><circle cx="6" cy="19" r="2"/><circle cx="18" cy="5" r="2"/><path d="M12 19h4a2 2 0 002-2v-1a2 2 0 00-2-2H8a2 2 0 01-2-2v-1a2 2 0 012-2h4"/></svg>
            </div>
            <div>
                <h2 class="text-base font-semibold text-gray-800">{{ $mode==="create" ? "Tambah rute baru" : "Edit rute" }}</h2>
                <p class="text-xs text-gray-400">{{ $mode==="create" ? "Buat jalur perjalanan baru untuk dijadwalkan." : "Perbarui detail rute yang sudah ada." }}</p>
            </div>
        </div>

        <form method="POST"
              action="{{ $mode==="create" ? route('admin.rute.store') : route('admin.rute.update',$rute) }}"
              class="p-6 space-y-5">
            @csrf
            @if($mode==="edit") @method("PUT") @endif

            {{-- Kota asal & tujuan --}}
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-2">Jalur perjalanan</label>
                <div class="grid grid-cols-2 gap-3 items-center">
                    <div class="relative">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400">
                            <circle cx="12" cy="10" r="3"/><path d="M12 21s7-6.5 7-11a7 7 0 10-14 0c0 4.5 7 11 7 11z"/>
                        </svg>
                        <input type="text" name="kota_asal"
                               class="w-full rounded-xl border border-gray-200 bg-gray-50 pl-10 pr-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="Isi kota asal"
                               value="{{ old('kota_asal', $rute?->kota_asal) }}" required>
                    </div>
                    <div class="relative">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="absolute left-3.5 top-1/2 -translate-y-1/2 text-blue-500">
                            <path d="M12 2v4M12 18v4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M2 12h4M18 12h4M4.9 19.1l2.8-2.8M16.3 7.7l2.8-2.8"/>
                        </svg>
                        <input type="text" name="kota_tujuan"
                               class="w-full rounded-xl border border-gray-200 bg-gray-50 pl-10 pr-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="Isi kota tujuan"
                               value="{{ old('kota_tujuan', $rute?->kota_tujuan) }}" required>
                    </div>
                </div>
                @error('kota_asal')<p class="text-red-600 text-xs mt-1">{{ $message }}</p>@enderror
                @error('kota_tujuan')<p class="text-red-600 text-xs mt-1">{{ $message }}</p>@enderror
            </div>

            {{-- Harga --}}
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1.5">Harga tiket</label>
                <div class="relative">
                    <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-sm text-gray-400 font-medium">Rp</span>
                    <input type="number" name="harga" min="1000" step="500"
                           class="w-full rounded-xl border border-gray-200 bg-gray-50 pl-10 pr-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="harga"
                           value="{{ old('harga', $rute?->harga) }}" required>
                </div>
                @error('harga')<p class="text-red-600 text-xs mt-1">{{ $message }}</p>@enderror
            </div>

            {{-- Toggle aktif --}}
            @if($mode==="edit")
                <label class="flex items-center justify-between rounded-xl border border-gray-200 px-4 py-3.5 cursor-pointer">
                    <div>
                        <div class="text-sm font-medium text-gray-800">Rute aktif</div>
                        <div class="text-xs text-gray-400">Rute nonaktif tidak bisa dijadwalkan atau dipesan.</div>
                    </div>
                    <input type="checkbox" name="aktif" value="1" id="aktif" class="peer sr-only"
                           {{ old('aktif', $rute?->aktif) ? 'checked' : '' }}>
                    <span class="relative w-11 h-6 rounded-full bg-gray-200 peer-checked:bg-blue-600 transition shrink-0 ml-3">
                        <span class="absolute left-0.5 top-0.5 w-5 h-5 rounded-full bg-white shadow transition peer-checked:translate-x-5"></span>
                    </span>
                </label>
            @endif

            {{-- Tombol aksi --}}
            <div class="flex gap-3 pt-2">
                <button type="submit" class="flex-1 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 text-sm transition">
                    Simpan
                </button>
                <a href="{{ route('admin.rute.index') }}"
                   class="flex-1 flex items-center justify-center rounded-xl border border-gray-200 text-gray-600 hover:bg-gray-50 font-medium py-3 text-sm transition">
                    Batal
                </a>
            </div>
        </form>
    </div>
</div>
@endsection