@extends('layouts.app')

@push('head')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin />
@endpush

@section('title', 'Detail Ruas Jalan — ' . $ruas->nama_jalan . ' — ' . config('app.name', 'Website Pemetaan PJU'))

@section('content')
@php $base = rtrim(request()->getBasePath(), '/'); @endphp
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-semibold font-display text-body">Detail Ruas Jalan</h1>
            <p class="mt-1 text-sm text-muted">{{ $ruas->nama_jalan }}</p>
        </div>
        <div class="flex items-center gap-2">
            <a href="{{ $base.'/data-jalan' }}" class="text-sm text-muted hover:text-body">← Data Jalan</a>
            <a href="{{ $base.'/data-jalan/'.$ruas->id.'/edit' }}" class="px-3 py-1.5 rounded-lg border border-theme text-sm font-medium">Edit Ruas</a>
        </div>
    </div>

    @if(session('success'))
        <div class="mb-4 p-4 rounded-xl alert-success text-sm">
            {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div class="mb-4 p-4 rounded-xl alert-error text-sm">
            {{ session('error') }}
        </div>
    @endif

    {{-- Informasi Ruas Jalan (berdasarkan kolom tabel ruas_jalan) --}}
    <div class="card p-5 mb-4 rounded-xl border border-theme bg-surface shadow-sm">
        <h2 class="text-lg font-semibold font-display text-body mb-4 pb-2 border-b border-theme">Informasi Ruas Jalan</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-4 text-sm">
            <div>
                <span class="text-muted block mb-0.5">Nomor Ruas</span>
                <span class="text-body font-medium">{{ $ruas->nomor_ruas ?? '–' }}</span>
            </div>
            <div>
                <span class="text-muted block mb-0.5">Nama Jalan</span>
                <span class="text-body font-medium">{{ $ruas->nama_jalan ?? '–' }}</span>
            </div>
            <div>
                <span class="text-muted block mb-0.5">Panjang Jalan (km)</span>
                <span class="text-body font-medium">{{ $ruas->panjang_jalan ?? '–' }}</span>
            </div>
            <div>
                <span class="text-muted block mb-0.5">Status Jalan</span>
                <span class="text-body font-medium">{{ $ruas->status_jalan ?? '–' }}</span>
            </div>
            <div>
                <span class="text-muted block mb-0.5">Jenis Jalan</span>
                <span class="text-body font-medium">{{ $ruas->jenisJalan?->nama ?? '–' }}</span>
            </div>
            <div>
                <span class="text-muted block mb-0.5">Kecamatan</span>
                <span class="text-body font-medium">{{ $ruas->kecamatanRel?->nama ?? '–' }}</span>
            </div>
            <div>
                <span class="text-muted block mb-0.5">Kabupaten/Kota</span>
                <span class="text-body font-medium">{{ $ruas->kabupaten?->nama ?? '–' }}</span>
            </div>
            <div>
                <span class="text-muted block mb-0.5">Titik Pangkal</span>
                <span class="text-body font-mono text-xs">Lat {{ number_format($pangkal['lat'], 6) }}, Lng {{ number_format($pangkal['lng'], 6) }}</span>
            </div>
            <div>
                <span class="text-muted block mb-0.5">Titik Ujung</span>
                <span class="text-body font-mono text-xs">Lat {{ number_format($ujung['lat'], 6) }}, Lng {{ number_format($ujung['lng'], 6) }}</span>
            </div>
            @if($ruas->file_ruas_path)
            <div>
                <span class="text-muted block mb-0.5">File Ruas</span>
                <span class="text-body font-medium">{{ $ruas->file_ruas_type ?? 'Lampiran' }}</span>
            </div>
            @endif
        </div>
    </div>

    {{-- Peta — wrapper isolasi stacking agar modal pasti di atas --}}
    <div class="flex flex-col sm:flex-row gap-4 mb-6">
        <div class="map-wrapper-pju flex-1 rounded-xl border border-theme overflow-hidden bg-surface shadow-sm">
            <div id="map" style="width: 100%; height: 420px; min-height: 400px;"></div>
        </div>
        @if($fileGambarUrl)
            <div class="w-full sm:w-72 flex-shrink-0">
                <p class="text-sm font-medium text-secondary mb-2">Gambar Ruas</p>
                <img src="{{ $fileGambarUrl }}" alt="Gambar ruas jalan" class="rounded-lg border border-theme w-full h-auto max-h-64 object-contain bg-page">
            </div>
        @endif
    </div>

    {{-- Tabel PJU + Link Tambah PJU (halaman baru) --}}
    <div class="mb-4 flex items-center justify-between">
        <h2 class="text-lg font-semibold font-display text-body">Data PJU Ruas {{ $ruas->nama_jalan }}</h2>
        <a href="{{ $base.'/pju/create?ruas_jalan_id='.$ruas->id }}" class="px-4 py-2 rounded-lg btn-primary text-white text-sm font-medium inline-flex items-center gap-2">
            <i class="fa-solid fa-plus"></i> Tambah PJU
        </a>
    </div>

    @if($pjuList->isEmpty())
        <div class="card p-6 text-center text-muted">
            Belum ada data PJU di ruas ini. Klik "Tambah PJU" untuk menambah.
        </div>
    @else
        <div class="overflow-x-auto rounded-xl border border-theme bg-surface shadow-sm">
            <table class="w-full text-sm text-left">
                <thead>
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wider text-white opacity-90 whitespace-nowrap" style="background:var(--color-primary);">NO</th>
                        <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wider text-white opacity-90 whitespace-nowrap" style="background:var(--color-primary);">KODE PJU</th>
                        <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wider text-white opacity-90 whitespace-nowrap" style="background:var(--color-primary);">LOKASI PJU</th>
                        <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wider text-white opacity-90 whitespace-nowrap" style="background:var(--color-primary);">JENIS LAMPU / JENIS TIANG</th>
                        <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wider text-white opacity-90 whitespace-nowrap" style="background:var(--color-primary);">PANEL</th>
                        <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wider text-white opacity-90 whitespace-nowrap" style="background:var(--color-primary);">KONDISI</th>
                        <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wider text-white opacity-90 whitespace-nowrap" style="background:var(--color-primary);">AKSI</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($pjuList as $index => $pju)
                        @php
                            $isEven = $index % 2 === 0;
                            $no = (($pjuList->currentPage() - 1) * $pjuList->perPage()) + $index + 1;
                        @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))' }}'">
                            <td class="px-4 py-3.5 text-muted font-medium text-center w-10">{{ $no }}</td>
                            <td class="px-4 py-3 font-mono text-xs">{{ $pju->kodePjuTampilanRuas($ruas) }}</td>
                            <td class="px-4 py-3">{{ $pju->letak_pju !== null ? (\App\Models\Pju::opsiLetakPju()[$pju->letak_pju] ?? '–') : '–' }}</td>
                            <td class="px-4 py-3">
                                {{ $pju->jenisLampu?->nama ?? '–' }} / {{ $pju->jenisTiang?->nama ?? '–' }}
                            </td>
                            <td class="px-4 py-3">
                                @if($pju->panel_ada)
                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-semibold"
                                          style="background:#dcfce7; color:#166534; border:1px solid #86efac;">Ada</span>
                                @else
                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-semibold"
                                          style="background:#f1f5f9; color:#475569; border:1px solid #cbd5e1;">Tidak ada</span>
                                @endif
                            </td>
                            <td class="px-4 py-3">
                                @include('pju.partials.kondisi-indikator-badge', ['pju' => $pju])
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex items-center justify-center gap-1.5 flex-wrap">
                                    <a href="{{ $base.'/pju/'.$pju->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" aria-label="Detail"
                                       onmouseover="this.style.background='var(--color-primary)';this.style.color='#fff'"
                                       onmouseout="this.style.background='color-mix(in srgb, var(--color-primary) 12%, transparent)';this.style.color='var(--color-primary)'">
                                        <i class="fa-solid fa-eye"></i>
                                    </a>
                                    <a href="{{ $base.'/pju/'.$pju->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" aria-label="Edit"
                                       onmouseover="this.style.background='#f59e0b';this.style.color='#fff'"
                                       onmouseout="this.style.background='#fef3c7';this.style.color='#92400e'">
                                        <i class="fa-solid fa-pen-to-square"></i>
                                    </a>
                                    <form action="{{ $base.'/pju/'.$pju->id }}" method="POST" class="inline" onsubmit="return confirm('Yakin hapus PJU ini?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="inline-flex items-center justify-center w-9 h-9 rounded-lg cursor-pointer transition-all"
                                                style="background:#fee2e2; color:#991b1b; border:1.5px solid #f87171;"
                                                title="Hapus" aria-label="Hapus"
                                                onmouseover="this.style.background='#dc2626';this.style.color='#fff'"
                                                onmouseout="this.style.background='#fee2e2';this.style.color='#991b1b'">
                                            <i class="fa-solid fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @if($pjuList->hasPages())
            <div class="mt-4 flex justify-end">
                {{ $pjuList->links() }}
            </div>
        @endif
    @endif

    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var geojsonForMap = @json($geojsonForMap);
            var pangkal = @json($pangkal);
            var ujung = @json($ujung);
            var pjuPoints = @json($pjuPointsForMapAll ?? []);

            var defaultCenter = [{{ $pangkal['lat'] }}, {{ $pangkal['lng'] }}];
            var map = L.map('map', { center: defaultCenter, zoom: 16 });

            var osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
                maxZoom: 19
            });
            var satelliteLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
                attribution: 'Tiles &copy; Esri &mdash; Source: Esri, Maxar, Earthstar Geographics, and the GIS User Community',
                maxZoom: 19
            });
            L.control.layers(
                { 'Peta OSM': osmLayer, 'Citra satelit': satelliteLayer },
                null,
                { collapsed: false, position: 'topright' }
            ).addTo(map);
            osmLayer.addTo(map);

            if (geojsonForMap && geojsonForMap.geometry) {
                L.geoJSON({ type: 'FeatureCollection', features: [geojsonForMap] }, {
                    style: { color: '#dc2626', weight: 5, opacity: 0.9 }
                }).addTo(map);
            }

            var iconPangkal = L.divIcon({
                className: 'ruas-endpoint-icon-wrap',
                html: '<div class="ruas-marker-pangkal" role="img" aria-label="Titik pangkal ruas"><span class="ruas-marker-pangkal__label">P</span></div>',
                iconSize: [30, 30],
                iconAnchor: [15, 15]
            });
            var iconUjung = L.divIcon({
                className: 'ruas-endpoint-icon-wrap',
                html: '<div class="ruas-marker-ujung" role="img" aria-label="Titik ujung ruas"><span class="ruas-marker-ujung__label">U</span></div>',
                iconSize: [30, 30],
                iconAnchor: [15, 15]
            });

            var pjuGlowIconCache = {};
            function makePjuGlowIcon(kondisiKey) {
                var key = kondisiKey && ['sangat_baik', 'baik', 'kurang_baik', 'rusak', 'belum_lengkap'].indexOf(kondisiKey) >= 0
                    ? kondisiKey : 'belum_lengkap';
                if (!pjuGlowIconCache[key]) {
                    pjuGlowIconCache[key] = L.divIcon({
                        className: 'pju-glow-icon-leaflet',
                        html: '<div class="pju-glow-dot pju-glow-dot--' + key + '" title="PJU"><span class="pju-glow-dot__core"></span></div>',
                        iconSize: [22, 22],
                        iconAnchor: [11, 11]
                    });
                }
                return pjuGlowIconCache[key];
            }

            function pjuPopupHtml(p) {
                var lines = ['<strong>' + (p.nama || 'PJU') + '</strong>'];
                lines.push('Nomor PJU: ' + (p.nomor_pju || '–'));
                lines.push(p.kondisi_label || '–');
                if (p.persen != null) {
                    lines.push('Skor: ' + String(p.persen).replace('.', ',') + '%');
                }
                return lines.join('<br>');
            }

            var pangkalTerisi = @json($pangkalTerisi ?? false);
            var ujungTerisi = @json($ujungTerisi ?? false);
            if (pangkalTerisi) {
                var pangkalMarker = L.marker([pangkal.lat, pangkal.lng], { icon: iconPangkal })
                    .bindPopup('<strong>Titik pangkal</strong><br>Awal ruas jalan')
                    .addTo(map);
                if (pangkalMarker._icon) pangkalMarker._icon.alt = 'Titik pangkal';
            }
            if (ujungTerisi) {
                var ujungMarker = L.marker([ujung.lat, ujung.lng], { icon: iconUjung })
                    .bindPopup('<strong>Titik ujung</strong><br>Akhir ruas jalan')
                    .addTo(map);
                if (ujungMarker._icon) ujungMarker._icon.alt = 'Titik ujung';
            }

            pjuPoints.forEach(function(p) {
                L.marker([p.lat, p.lng], { icon: makePjuGlowIcon(p.kondisi_key) })
                    .bindPopup(pjuPopupHtml(p))
                    .addTo(map);
            });

            var legend = L.control({ position: 'bottomleft' });
            legend.onAdd = function() {
                var div = L.DomUtil.create('div', 'leaflet-legend p-3 rounded-lg shadow bg-white border border-gray-200 text-sm');
                div.innerHTML = '<strong class="block mb-2">Legenda PJU</strong>';
                div.innerHTML += '<div class="flex items-center gap-2 mb-1"><span class="pju-glow-dot pju-glow-dot--sangat_baik flex-shrink-0"><span class="pju-glow-dot__core"></span></span> Sangat baik</div>';
                div.innerHTML += '<div class="flex items-center gap-2 mb-1"><span class="pju-glow-dot pju-glow-dot--baik flex-shrink-0"><span class="pju-glow-dot__core"></span></span> Baik</div>';
                div.innerHTML += '<div class="flex items-center gap-2 mb-1"><span class="pju-glow-dot pju-glow-dot--kurang_baik flex-shrink-0"><span class="pju-glow-dot__core"></span></span> Kurang baik</div>';
                div.innerHTML += '<div class="flex items-center gap-2 mb-1"><span class="pju-glow-dot pju-glow-dot--rusak flex-shrink-0"><span class="pju-glow-dot__core"></span></span> Rusak</div>';
                div.innerHTML += '<div class="flex items-center gap-2"><span class="pju-glow-dot pju-glow-dot--belum_lengkap flex-shrink-0"><span class="pju-glow-dot__core"></span></span> Belum lengkap</div>';
                return div;
            };
            legend.addTo(map);

            var bounds = L.latLngBounds();
            if (pangkalTerisi || ujungTerisi) {
                bounds.extend([pangkal.lat, pangkal.lng]);
                bounds.extend([ujung.lat, ujung.lng]);
            }
            pjuPoints.forEach(function(p) { bounds.extend([p.lat, p.lng]); });
            if (bounds.isValid()) map.fitBounds(bounds.pad(0.15));
            else map.setView([pangkal.lat, pangkal.lng], 14);
            setTimeout(function() { map.invalidateSize(); }, 100);
        });
    </script>
    <style>
        .map-wrapper-pju { position: relative; z-index: 0; isolation: isolate; }
        .ruas-endpoint-icon-wrap { background: none !important; border: none !important; }
        .ruas-marker-pangkal {
            width: 26px; height: 26px;
            display: flex; align-items: center; justify-content: center;
            background: linear-gradient(135deg, #16a34a, #15803d);
            color: #fff; font-size: 11px; font-weight: 800;
            transform: rotate(45deg);
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(22, 163, 74, 0.55), 0 0 0 2px #fff;
        }
        .ruas-marker-pangkal__label { transform: rotate(-45deg); line-height: 1; }
        .ruas-marker-ujung {
            width: 28px; height: 28px;
            display: flex; align-items: center; justify-content: center;
            background: linear-gradient(180deg, #ea580c, #c2410c);
            color: #fff; font-size: 12px; font-weight: 800;
            border-radius: 6px;
            box-shadow: 0 2px 8px rgba(234, 88, 12, 0.5), 0 0 0 2px #fff;
        }
        .ruas-marker-ujung__label { line-height: 1; }
        .pju-glow-icon-leaflet { background: none !important; border: none !important; }
        .pju-glow-dot {
            width: 22px; height: 22px;
            display: flex; align-items: center; justify-content: center;
        }
        .pju-glow-dot__core {
            width: 7px; height: 7px;
            border-radius: 50%;
            animation: pju-glow-pulse 2.2s ease-in-out infinite;
        }
        .pju-glow-dot--sangat_baik .pju-glow-dot__core {
            background: #16a34a;
            box-shadow: 0 0 4px 2px rgba(34, 197, 94, 0.95), 0 0 10px 4px rgba(34, 197, 94, 0.45);
        }
        .pju-glow-dot--baik .pju-glow-dot__core {
            background: #2563eb;
            box-shadow: 0 0 4px 2px rgba(59, 130, 246, 0.95), 0 0 10px 4px rgba(59, 130, 246, 0.45);
        }
        .pju-glow-dot--kurang_baik .pju-glow-dot__core {
            background: #ca8a04;
            box-shadow: 0 0 4px 2px rgba(250, 204, 21, 0.95), 0 0 10px 4px rgba(250, 204, 21, 0.45);
        }
        .pju-glow-dot--rusak .pju-glow-dot__core {
            background: #dc2626;
            box-shadow: 0 0 4px 2px rgba(248, 113, 113, 0.95), 0 0 10px 4px rgba(248, 113, 113, 0.45);
        }
        .pju-glow-dot--belum_lengkap .pju-glow-dot__core {
            background: #64748b;
            box-shadow: 0 0 3px 1px rgba(148, 163, 184, 0.9), 0 0 8px 3px rgba(148, 163, 184, 0.35);
            animation: none;
        }
        @keyframes pju-glow-pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.15); opacity: 0.92; }
        }
        .leaflet-legend { min-width: 170px; }
    </style>
@endsection