@extends('layouts.app')

@section('title', 'Data Jalan (Ruas Jalan) — ' . config('app.name', 'Website Pemetaan PJU'))

@section('content')
@php
    $base = rtrim(request()->getBasePath(), '/');
    $hasActiveFilter = request()->filled('q') || request()->filled('kecamatan_id');
@endphp
    {{-- Page Header --}}
    <div class="page-header">
        <div>
            <h1 class="page-title">Data Jalan</h1>
            <p class="page-subtitle">Ruas jalan dan lokasi PJU</p>
        </div>
        <a href="{{ $base.'/data-jalan/create' }}" class="btn-primary inline-flex items-center gap-2">
            <i class="fa-solid fa-plus"></i> Tambah Data Jalan
        </a>
    </div>

    {{-- Alert --}}
    @if(session('success'))
        <div class="mb-5 flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium"
             style="background:color-mix(in srgb, var(--color-primary) 12%, transparent); color:var(--color-primary); border:1.5px solid color-mix(in srgb, var(--color-primary) 35%, transparent);">
            <i class="fa-solid fa-circle-check text-base"></i>
            {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div class="mb-5 flex items-center gap-3 px-4 py-3 rounded-lg alert-error text-sm font-medium">
            <i class="fa-solid fa-circle-exclamation text-base"></i>
            {{ session('error') }}
        </div>
    @endif
    @if(isset($error) && $error)
        <div class="mb-5 flex items-center gap-3 px-4 py-3 rounded-lg alert-error text-sm font-medium">
            <i class="fa-solid fa-circle-exclamation text-base"></i>
            {{ $error }}
        </div>
    @endif

    {{-- Filter & pencarian --}}
    <div class="mb-5 p-4 rounded-xl border border-theme bg-surface flex flex-wrap items-end gap-3">
        <form action="{{ $base.'/data-jalan' }}" method="GET" class="flex flex-wrap items-end gap-3 flex-1 min-w-0" role="search">
            <div class="flex flex-col gap-1 min-w-[12rem] flex-1 sm:max-w-md">
                <label for="filter_q" class="text-xs font-medium text-muted">Pencarian</label>
                <input type="search" name="q" id="filter_q" value="{{ request('q') }}"
                       placeholder="Cari Nama Ruas Jalan/Nomor Ruas"
                       class="input-theme w-full" autocomplete="off">
            </div>
            <div class="flex flex-col gap-1 min-w-[11rem]">
                <label for="filter_kecamatan" class="text-xs font-medium text-muted">Kecamatan</label>
                <select name="kecamatan_id" id="filter_kecamatan" class="input-theme w-full">
                    <option value="">Semua kecamatan</option>
                    @foreach($kecamatanFilter ?? [] as $k)
                        <option value="{{ $k->id }}" @selected((string) request('kecamatan_id') === (string) $k->id)>{{ $k->nama }}</option>
                    @endforeach
                </select>
            </div>
            <div class="flex flex-wrap items-center gap-2 pb-0.5">
                <button type="submit" class="btn-primary inline-flex items-center gap-2 text-sm px-4 py-2">
                    <i class="fa-solid fa-magnifying-glass"></i> Cari
                </button>
                <a href="{{ $base.'/data-jalan' }}" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-theme text-sm font-medium text-body hover:bg-page">
                    Reset
                </a>
            </div>
        </form>
    </div>

    {{-- GeoJSON: Sync file → DB (Import folder & Regenerate file sementara tidak dipakai) --}}
    {{-- <div class="mb-5 p-4 rounded-xl border border-theme bg-surface flex flex-wrap items-center gap-3">
        <span class="text-sm font-medium text-body">GeoJSON:</span>
        <form action="{{ $base.'/data-jalan/sync-from-public-geojson' }}" method="POST" class="inline" onsubmit="return confirm('Sync data dari file public/geojson/ruas_jalan.geojson ke tabel ruas_jalan (match nomor_ruas)? Data geojson/pangkal/ujung di DB akan diisi dari file.');">
            @csrf
            <button type="submit" class="px-3 py-1.5 rounded-lg bg-primary/10 border border-primary/30 text-primary text-sm font-medium hover:bg-primary/20">Sync file peta → DB</button>
        </form>
        <form action="{{ $base.'/data-jalan/import-geojson-folder' }}" method="POST" class="inline" onsubmit="return confirm('Import semua file .geojson/.json dari folder storage/app/geojson_import ke tabel ruas_jalan?');">
            @csrf
            <button type="submit" class="px-3 py-1.5 rounded-lg border border-theme text-sm font-medium hover:bg-page">Import dari folder</button>
        </form>
        <form action="{{ $base.'/data-jalan/regenerate-geojson' }}" method="POST" class="inline" onsubmit="return confirm('Regenerate file public/geojson/ruas_jalan.geojson dari data DB?');">
            @csrf
            <button type="submit" class="px-3 py-1.5 rounded-lg border border-theme text-sm font-medium hover:bg-page">Regenerate file peta</button>
        </form>
        <span class="text-xs text-muted">Sync: isi kolom geojson/titik pangkal/ujung di DB dari file ruas_jalan.geojson (match nomor_ruas). Agar detail ruas tampil polyline.</span>
    </div> --}}

    @if ($items->isEmpty())
        <div class="flex flex-col items-center justify-center py-20 rounded-xl border border-theme bg-surface gap-4">
            <div class="w-16 h-16 rounded-full flex items-center justify-center"
                 style="background:color-mix(in srgb, var(--color-primary) 10%, transparent);">
                <i class="fa-solid fa-route text-2xl" style="color:var(--color-primary);"></i>
            </div>
            @if ($hasActiveFilter)
                <p class="text-muted text-sm">Tidak ada data yang cocok dengan pencarian atau filter kecamatan.</p>
                <p class="text-muted text-xs max-w-sm text-center">Ubah kata kunci / kecamatan atau kosongkan filter.</p>
                <a href="{{ $base.'/data-jalan' }}" class="btn-primary inline-flex items-center gap-2 text-sm">
                    <i class="fa-solid fa-rotate-left"></i> Tampilkan semua data
                </a>
            @else
                <p class="text-muted text-sm">Belum ada data ruas jalan.</p>
                <p class="text-muted text-xs max-w-sm text-center">Tambah data jalan untuk mengelola ruas dan titik PJU di peta.</p>
                <a href="{{ $base.'/data-jalan/create' }}" class="btn-primary inline-flex items-center gap-2 text-sm">
                    <i class="fa-solid fa-plus"></i> Tambah Sekarang
                </a>
            @endif
        </div>
    @else

        {{-- Info Count --}}
        <div class="mb-3">
            <p class="text-sm text-muted">
                Menampilkan <strong class="text-body">{{ $items->firstItem() ?? 0 }}</strong>–<strong class="text-body">{{ $items->lastItem() ?? 0 }}</strong> dari <strong class="text-body">{{ $items->total() }}</strong> data jalan
            </p>
        </div>

        {{-- Table --}}
        <div class="rounded-xl border border-theme bg-surface shadow-sm overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-sm" aria-label="Tabel Data Jalan (Ruas Jalan)">

                    {{-- Head --}}
                    <thead>
                        <tr style="background:var(--color-primary);">
                            <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wider text-white opacity-90 whitespace-nowrap">#</th>
                            <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wider text-white opacity-90 whitespace-nowrap">Nama Jalan</th>
                            <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wider text-white opacity-90 whitespace-nowrap">Nomor Ruas</th>
                            <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wider text-white opacity-90 whitespace-nowrap">Panjang Jalan (km)</th>
                            <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wider text-white opacity-90 whitespace-nowrap">Status</th>
                            <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wider text-white opacity-90 whitespace-nowrap">Kecamatan</th>
                            <th class="px-4 py-3 text-center text-xs font-bold uppercase tracking-wider text-white opacity-90 whitespace-nowrap">JML PJU</th>
                            <th class="px-4 py-3 text-center text-xs font-bold uppercase tracking-wider text-white opacity-90 whitespace-nowrap">Aksi</th>
                        </tr>
                    </thead>

                    {{-- Body --}}
                    <tbody>
                        @foreach ($items as $index => $item)
                            @php
                                $isEven = $index % 2 === 0;
                                $no = ($items->currentPage() - 1) * $items->perPage() + $index + 1;
                                $kp = (string) ($item->kode_prov ?? '');
                                $kk = (string) ($item->kode_kota ?? '');
                                $nrRaw = trim((string) ($item->getRawOriginal('nomor_ruas') ?? ''));
                                if ($nrRaw === '' && $kp === '' && $kk === '') {
                                    $nomorRuasTampil = '–';
                                } else {
                                    $nrSeg = $nrRaw !== '' && ctype_digit($nrRaw)
                                        ? str_pad($nrRaw, 4, '0', STR_PAD_LEFT)
                                        : ($nrRaw !== '' ? $nrRaw : '');
                                    $seg = array_values(array_filter([$kp, $kk, $nrSeg], fn ($v) => $v !== null && $v !== ''));
                                    $nomorRuasTampil = count($seg) ? implode('.', $seg) : '–';
                                }
                                $pj = $item->panjang_jalan;
                                $panjangTampil = ($pj !== null && $pj !== '')
                                    ? number_format((float) str_replace(',', '.', (string) $pj), 3, '.', '')
                                    : '–';
                            @endphp
                            <tr style="{{ $isEven ? 'background:var(--color-surface);' : 'background:color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));' }}"
                                class="border-b border-theme last:border-0 transition-colors"
                                onmouseover="this.style.background='color-mix(in srgb, var(--color-primary) 12%, var(--color-surface))'"
                                onmouseout="this.style.background='{{ $isEven ? 'var(--color-surface)' : 'color-mix(in srgb, var(--color-primary) 5%, var(--color-surface))' }}'">

                                {{-- No --}}
                                <td class="px-4 py-3.5 text-muted font-medium text-center w-10">{{ $no }}</td>

                                {{-- Nama Jalan --}}
                                <td class="px-4 py-3.5">
                                    <a href="{{ $base.'/data-jalan/'.$item->id }}" class="font-bold text-body hover:underline" style="color:var(--color-primary);">
                                        {{ $item->nama_jalan ?? '–' }}
                                    </a>
                                </td>

                                {{-- Nomor Ruas: kode_prov.kode_kota.nomor (nomor numerik → 4 digit, contoh 35.10.0001) --}}
                                <td class="px-4 py-3.5 text-body font-mono text-xs whitespace-nowrap">{{ $nomorRuasTampil }}</td>

                                {{-- Panjang Jalan: 3 angka di belakang koma --}}
                                <td class="px-4 py-3.5 text-body font-mono text-xs whitespace-nowrap">{{ $panjangTampil }}</td>

                                {{-- Status --}}
                                <td class="px-4 py-3.5">
                                    @if($item->status_jalan)
                                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold whitespace-nowrap"
                                              style="background:color-mix(in srgb, var(--color-primary) 12%, transparent); color:var(--color-primary); border:1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);">
                                            {{ $item->status_jalan }}
                                        </span>
                                    @else
                                        <span class="text-muted">–</span>
                                    @endif
                                </td>

                                {{-- Kecamatan --}}
                                <td class="px-4 py-3.5 text-body">{{ $item->kecamatanRel?->nama ?? '–' }}</td>

                                {{-- JML PJU --}}
                                <td class="px-4 py-3.5 text-center text-body font-mono text-xs whitespace-nowrap">
                                    {{ (int) ($item->pju_count ?? 0) }}
                                </td>

                                {{-- Aksi --}}
                                <td class="px-4 py-3.5">
                                    <div class="flex items-center justify-center gap-2 flex-wrap">

                                        <a href="{{ $base.'/data-jalan/'.$item->id }}"
                                           class="inline-flex items-center justify-center w-9 h-9 rounded-lg transition-all"
                                           style="background:color-mix(in srgb, var(--color-primary) 12%, transparent); color:var(--color-primary); border:1.5px solid color-mix(in srgb, var(--color-primary) 35%, transparent);"
                                           title="Detail"
                                           onmouseover="this.style.background='var(--color-primary)';this.style.color='#fff';this.style.borderColor='var(--color-primary)'"
                                           onmouseout="this.style.background='color-mix(in srgb, var(--color-primary) 12%, transparent)';this.style.color='var(--color-primary)';this.style.borderColor='color-mix(in srgb, var(--color-primary) 35%, transparent)'">
                                            <i class="fa-solid fa-eye"></i>
                                        </a>

                                        <a href="{{ $base.'/data-jalan/'.$item->id.'/edit' }}"
                                           class="inline-flex items-center justify-center w-9 h-9 rounded-lg transition-all"
                                           style="background:#fef3c7; color:#92400e; border:1.5px solid #f59e0b;"
                                           title="Edit"
                                           onmouseover="this.style.background='#f59e0b';this.style.color='#fff';this.style.borderColor='#f59e0b'"
                                           onmouseout="this.style.background='#fef3c7';this.style.color='#92400e';this.style.borderColor='#f59e0b'">
                                            <i class="fa-solid fa-pen-to-square"></i>
                                        </a>

                                        @if(!empty($item->has_maps) && !empty($item->google_maps_url))
                                            <a href="{{ $item->google_maps_url }}"
                                               target="_blank"
                                               rel="noopener"
                                               class="inline-flex items-center justify-center w-9 h-9 rounded-lg transition-all"
                                               style="background:rgba(34,197,94,.14); color:#166534; border:1.5px solid rgba(34,197,94,.6);"
                                               title="Buka di Google Maps"
                                               onmouseover="this.style.background='#22c55e';this.style.color='#fff';this.style.borderColor='#22c55e'"
                                               onmouseout="this.style.background='rgba(34,197,94,.14)';this.style.color='#166534';this.style.borderColor='rgba(34,197,94,.6)'">
                                                <i class="fa-solid fa-map-location-dot"></i>
                                            </a>
                                        @else
                                            <button type="button"
                                                    class="inline-flex items-center justify-center w-9 h-9 rounded-lg cursor-not-allowed"
                                                    style="background:rgba(148,163,184,.25); color:#64748b; border:1.5px solid rgba(148,163,184,.6);"
                                                    title="Koordinat belum ada"
                                                    disabled>
                                                <i class="fa-solid fa-map-location-dot"></i>
                                            </button>
                                        @endif

                                        <form action="{{ $base.'/data-jalan/'.$item->id }}" method="POST" class="inline"
                                              onsubmit="return confirm('Yakin ingin menghapus data jalan ini?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit"
                                                    class="inline-flex items-center justify-center w-9 h-9 rounded-lg transition-all cursor-pointer"
                                                    style="background:#fee2e2; color:#991b1b; border:1.5px solid #f87171;"
                                                    title="Hapus"
                                                    onmouseover="this.style.background='#dc2626';this.style.color='#fff';this.style.borderColor='#dc2626'"
                                                    onmouseout="this.style.background='#fee2e2';this.style.color='#991b1b';this.style.borderColor='#f87171'">
                                                <i class="fa-solid fa-trash"></i>
                                            </button>
                                        </form>

                                    </div>
                                </td>

                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Pagination bawah, mepet kanan --}}
        @if($items->hasPages())
            <div class="mt-4 flex justify-end">
                {{ $items->links() }}
            </div>
        @endif
    @endif

@endsection