@extends("layouts.admin")
@section("title","Manajemen Rute")
@section("content")

<div class="flex items-center justify-between mb-5">
    <div>
        <h2 class="text-lg font-semibold text-gray-800">Daftar rute</h2>
        <p class="text-sm text-gray-400 mt-0.5">{{ $rute->total() }} rute terdaftar</p>
    </div>
    <a href="{{ route('admin.rute.create') }}"
       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="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
        Tambah rute
    </a>
</div>

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

    {{-- Header tabel (desktop) --}}
    <div class="hidden md:grid grid-cols-[1fr_1fr_140px_110px_100px] gap-3 px-5 py-3 border-b border-gray-100 text-xs font-medium text-gray-400">
        <div>Asal</div>
        <div>Tujuan</div>
        <div class="text-right">Harga</div>
        <div class="text-center">Status</div>
        <div class="text-center">Aksi</div>
    </div>

    @forelse($rute as $r)
        {{-- Baris desktop --}}
        <div class="hidden md:grid grid-cols-[1fr_1fr_140px_110px_100px] gap-3 items-center px-5 py-4 border-b border-gray-50 last:border-0 hover:bg-gray-50/60 transition">
            <div class="flex items-center gap-2.5 min-w-0">
                <span class="w-2 h-2 rounded-full bg-blue-500 shrink-0"></span>
                <span class="text-sm font-medium text-gray-800 truncate">{{ $r->kota_asal }}</span>
            </div>
            <div class="flex items-center gap-2.5 min-w-0">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-gray-300 shrink-0"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                <span class="text-sm font-medium text-gray-800 truncate">{{ $r->kota_tujuan }}</span>
            </div>
            <div class="text-right text-sm font-semibold text-gray-700 tabular-nums">
                Rp {{ number_format($r->harga,0,",",".") }}
            </div>
            <div class="flex justify-center">
                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium
                    {{ $r->aktif ? 'bg-green-50 text-green-700' : 'bg-gray-100 text-gray-500' }}">
                    <span class="w-1.5 h-1.5 rounded-full {{ $r->aktif ? 'bg-green-500' : 'bg-gray-400' }}"></span>
                    {{ $r->aktif ? 'Aktif' : 'Nonaktif' }}
                </span>
            </div>
            <div class="flex items-center justify-center gap-1">
                <a href="{{ route('admin.rute.edit',$r) }}"
                   class="w-8 h-8 flex items-center justify-center rounded-lg text-gray-400 hover:bg-blue-50 hover:text-blue-600 transition"
                   aria-label="Edit rute">
                    <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="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                </a>
                <form method="POST" action="{{ route('admin.rute.destroy',$r) }}"
                      onsubmit="return confirm('Hapus rute {{ $r->kota_asal }} → {{ $r->kota_tujuan }}?')">
                    @csrf @method("DELETE")
                    <button type="submit"
                            class="w-8 h-8 flex items-center justify-center rounded-lg text-gray-400 hover:bg-red-50 hover:text-red-600 transition"
                            aria-label="Hapus rute">
                        <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="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0l-1 14a2 2 0 01-2 2H7a2 2 0 01-2-2L4 6"/></svg>
                    </button>
                </form>
            </div>
        </div>

        {{-- Kartu mobile --}}
        <div class="md:hidden px-4 py-4 border-b border-gray-50 last:border-0">
            <div class="flex items-start justify-between gap-3">
                <div class="min-w-0">
                    <div class="flex items-center gap-2 text-sm font-semibold text-gray-800">
                        <span>{{ $r->kota_asal }}</span>
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-gray-300 shrink-0"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                        <span>{{ $r->kota_tujuan }}</span>
                    </div>
                    <div class="text-sm font-semibold text-blue-700 mt-1">Rp {{ number_format($r->harga,0,",",".") }}</div>
                </div>
                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium shrink-0
                    {{ $r->aktif ? 'bg-green-50 text-green-700' : 'bg-gray-100 text-gray-500' }}">
                    <span class="w-1.5 h-1.5 rounded-full {{ $r->aktif ? 'bg-green-500' : 'bg-gray-400' }}"></span>
                    {{ $r->aktif ? 'Aktif' : 'Nonaktif' }}
                </span>
            </div>
            <div class="flex gap-2 mt-3">
                <a href="{{ route('admin.rute.edit',$r) }}"
                   class="flex-1 flex items-center justify-center gap-1.5 rounded-lg border border-gray-200 text-gray-600 text-xs font-medium py-2">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                    Edit
                </a>
                <form method="POST" action="{{ route('admin.rute.destroy',$r) }}" class="flex-1"
                      onsubmit="return confirm('Hapus rute {{ $r->kota_asal }} → {{ $r->kota_tujuan }}?')">
                    @csrf @method("DELETE")
                    <button type="submit"
                            class="w-full flex items-center justify-center gap-1.5 rounded-lg border border-red-100 text-red-600 text-xs font-medium py-2">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0l-1 14a2 2 0 01-2 2H7a2 2 0 01-2-2L4 6"/></svg>
                        Hapus
                    </button>
                </form>
            </div>
        </div>
    @empty
        <div class="flex flex-col items-center justify-center py-14 px-4 text-center">
            <div class="w-12 h-12 rounded-full bg-gray-50 flex items-center justify-center mb-3">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-300"><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 class="text-sm font-medium text-gray-600">Belum ada rute</div>
            <p class="text-xs text-gray-400 mt-1 mb-4">Tambahkan rute pertama untuk mulai menjadwalkan perjalanan.</p>
            <a href="{{ route('admin.rute.create') }}" class="text-sm font-semibold text-blue-600 hover:text-blue-700">
                + Tambah rute
            </a>
        </div>
    @endforelse

    @if($rute->hasPages())
        <div class="px-5 py-4 border-t border-gray-100">
            {{ $rute->links() }}
        </div>
    @endif
</div>
@endsection