@extends('layouts.public')

@section('title', 'Peta Aset - IPA')

@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
@endpush

@section('content')
    <section class="bg-white border-b">
        <div class="container-custom py-8">
            <h1 class="text-3xl font-bold text-gray-900">Peta Aset</h1>
            <p class="text-gray-500 mt-1">Jelajahi persebaran aset daerah</p>
        </div>
    </section>

    <section class="container-custom py-8">
        <div class="card p-5 mb-4 shadow-sm">
            <div class="flex flex-col gap-4 lg:flex-row lg:items-center">
                <div>
                    <div class="text-sm font-medium text-gray-700">Filter Kategori:</div>
                    <select x-model="category" @change="filterMarkers(category)"
                        class="mt-2 w-full lg:w-auto px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent text-sm">
                        <option value="">Semua Kategori</option>
                        @foreach($categories as $cat)
                            <option value="{{ $cat->slug }}">{{ $cat->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="text-sm text-gray-600 lg:ml-auto">
                    <strong>{{ $assets->count() }}</strong> aset ditampilkan di peta
                </div>
                <div class="rounded-full bg-primary-50 text-primary-700 px-3 py-2 text-sm">
                    Klik marker untuk melihat detail aset
                </div>
            </div>
        </div>

        <div id="assets-map" class="w-full h-[600px] rounded-xl overflow-hidden border border-gray-200 z-0"></div>
    </section>
@endsection

@push('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
    const assets = `@json($assets)`;

    const markers = [];
    let map;

    document.addEventListener('DOMContentLoaded', function () {
        map = L.map('assets-map').setView([-6.2, 106.816666], 12);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; OpenStreetMap'
        }).addTo(map);

        const bounds = [];
        assets.forEach(asset => {
            if (! asset.lat || ! asset.lng) return;
            const marker = L.marker([asset.lat, asset.lng], { category: asset.category })
                .bindPopup(`
                    <div style="min-width:200px">
                        <div style="font-size:11px;color:#d97706;font-weight:600">${asset.category_name}</div>
                        <div style="font-weight:600;margin:4px 0">${asset.name}</div>
                        <div style="font-size:12px;color:#6b7280">${asset.address || ''}</div>
                        <a href="/aset/${asset.slug}" style="display:inline-block;margin-top:8px;color:#f59e0b;font-weight:500;font-size:12px">Lihat Detail &rarr;</a>
                    </div>
                `);
            marker.addTo(map);
            markers.push(marker);
            bounds.push([asset.lat, asset.lng]);
        });

        if (bounds.length) {
            map.fitBounds(bounds, { padding: [50, 50] });
        }
    });

    function filterMarkers(category) {
        markers.forEach(marker => {
            const match = ! category || marker.options.category === category;
            match ? marker.addTo(map) : map.removeLayer(marker);
        });
    }
</script>
@endpush