@extends('layouts.app')
@section('title', 'MEC Map (MapLibre)')

@section('contents')
<section class="content">
    <div class="container-fluid">
        <div class="row mb-3">
            <div class="col-12">
                <div class="card">
                    <div class="card-body d-flex flex-wrap align-items-end">
                        <div class="mr-3 mb-2">
                            <label class="text-muted small mb-1">Status</label>
                            <select id="statusFilter" class="form-control form-control-sm">
                                <option value="all">All</option>
                                <option value="completed">Completed</option>
                                <option value="pending">Pending</option>
                                <option value="overdue">Overdue</option>
                            </select>
                        </div>
                        <div class="mr-3 mb-2">
                            <label class="text-muted small mb-1">From</label>
                            <input type="date" id="dateFrom" class="form-control form-control-sm">
                        </div>
                        <div class="mr-3 mb-2">
                            <label class="text-muted small mb-1">To</label>
                            <input type="date" id="dateTo" class="form-control form-control-sm">
                        </div>
                        <div class="mb-2">
                            <button id="applyFilters" class="btn btn-sm btn-primary">Apply (dummy)</button>
                        </div>
                        <div class="ml-auto mb-2 text-muted small">
                            Dummy data only — ready to wire to live sources.
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-3">
            <div class="col-12">
                <div id="sindhMap" class="w-100" style="height: 520px;"></div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                <div class="small-box bg-info">
                    <div class="inner">
                        <h3 id="kpiTotalVisits">0</h3>
                        <p>Total Visits</p>
                    </div>
                    <div class="icon"><i class="fas fa-route"></i></div>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                <div class="small-box bg-warning">
                    <div class="inner">
                        <h3 id="kpiPending">0</h3>
                        <p>Pending Visits</p>
                    </div>
                    <div class="icon"><i class="fas fa-clock"></i></div>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                <div class="small-box bg-danger">
                    <div class="inner">
                        <h3 id="kpiOverdue">0</h3>
                        <p>Overdue Visits</p>
                    </div>
                    <div class="icon"><i class="fas fa-exclamation-triangle"></i></div>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                <div class="small-box bg-primary">
                    <div class="inner">
                        <h3 id="kpiTotalPlans">0</h3>
                        <p>Total Plans</p>
                    </div>
                    <div class="icon"><i class="fas fa-file-alt"></i></div>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                <div class="small-box bg-success">
                    <div class="inner">
                        <h3 id="kpiApproved">0</h3>
                        <p>Approved Plans</p>
                    </div>
                    <div class="icon"><i class="fas fa-check-circle"></i></div>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                <div class="small-box bg-secondary">
                    <div class="inner">
                        <h3 id="kpiRejected">0</h3>
                        <p>Rejected Plans</p>
                    </div>
                    <div class="icon"><i class="fas fa-times-circle"></i></div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('styles')
<link href="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.css" rel="stylesheet" />
<style>
    .small-box .icon { top: 10px; }
    #sindhMap .maplibregl-popup-content { color: #1f2d3d; }
</style>
@endpush

@push('scripts')
<script src="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Dummy data for KPIs (replace with real data later)
        const kpis = {
            totalVisits: 128,
            pendingVisits: 24,
            overdueVisits: 9,
            totalPlans: 42,
            approvedPlans: 31,
            rejectedPlans: 4,
        };

        const sindhCities = [
            { name: "Karachi",   coords: [67.0011, 24.8607], desc: "Capital of Sindh and Pakistan’s largest city." },
            { name: "Hyderabad", coords: [68.3578, 25.3960], desc: "Historical Sindhi city on the Indus River." },
            { name: "Sukkur",    coords: [68.8574, 27.7052], desc: "City near the Indus with strategic importance." },
            { name: "Larkana",   coords: [68.2120, 27.5588], desc: "Known for Mohenjo-daro archaeological site nearby." },
            { name: "Thatta",    coords: [67.9235, 24.7475], desc: "Old Sindhi city with deep cultural heritage." }
        ];

        // Filters (dummy)
        function applyFilters() {
            const status = document.getElementById('statusFilter').value;
            // No status per city yet; keep kpis static for now
            updateKpis(kpis);
        }

        document.getElementById('applyFilters').addEventListener('click', function(e) {
            e.preventDefault();
            applyFilters();
        });

        function updateKpis(data) {
            document.getElementById('kpiTotalVisits').innerText = data.totalVisits;
            document.getElementById('kpiPending').innerText = data.pendingVisits;
            document.getElementById('kpiOverdue').innerText = data.overdueVisits;
            document.getElementById('kpiTotalPlans').innerText = data.totalPlans;
            document.getElementById('kpiApproved').innerText = data.approvedPlans;
            document.getElementById('kpiRejected').innerText = data.rejectedPlans;
        }

        // Initialize KPIs
        updateKpis(kpis);

        // ----------------------------
        // MapLibre GL JS (no token, OSM raster tiles)
        // ----------------------------
        const map = new maplibregl.Map({
            container: 'sindhMap',
            style: {
                version: 8,
                sources: {
                    'osm-tiles': {
                        type: 'raster',
                        tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
                        tileSize: 256,
                        attribution: '&copy; OpenStreetMap contributors'
                    }
                },
                layers: [{
                    id: 'osm-tiles',
                    type: 'raster',
                    source: 'osm-tiles',
                    minzoom: 0,
                    maxzoom: 19
                }]
            },
            center: [68.1, 26.2],
            zoom: 6.3
        });

        map.addControl(new maplibregl.NavigationControl(), 'top-right');

        // Add city highlights and markers when map loads
        map.on('load', () => {
            // GeoJSON for cities
            const cityGeoJson = {
                type: 'FeatureCollection',
                features: sindhCities.map((city, idx) => ({
                    type: 'Feature',
                    properties: {
                        name: city.name,
                        desc: city.desc,
                        color: ['#4CAF50', '#FFC107', '#E53935', '#1E88E5', '#8E44AD'][idx % 5]
                    },
                    geometry: {
                        type: 'Point',
                        coordinates: city.coords
                    }
                }))
            };

            // Add source
            if (!map.getSource('sindh-cities')) {
                map.addSource('sindh-cities', {
                    type: 'geojson',
                    data: cityGeoJson
                });
            }

            // Highlight layer (circles under markers)
            if (!map.getLayer('city-circles')) {
                map.addLayer({
                    id: 'city-circles',
                    type: 'circle',
                    source: 'sindh-cities',
                    paint: {
                        'circle-radius': [
                            'interpolate', ['linear'], ['zoom'],
                            5, 8,
                            8, 12,
                            10, 18
                        ],
                        'circle-color': ['get', 'color'],
                        'circle-opacity': 0.35,
                        'circle-stroke-color': ['get', 'color'],
                        'circle-stroke-width': 2
                    }
                });
            }

            // Markers with hover tooltip and click popup
            sindhCities.forEach(city => {
                const el = document.createElement('div');
                el.className = 'ml-marker';
                el.style.width = '14px';
                el.style.height = '14px';
                el.style.borderRadius = '50%';
                el.style.border = '2px solid #fff';
                el.style.boxShadow = '0 0 4px rgba(0,0,0,0.25)';
                el.style.background = '#1E88E5';
                el.style.cursor = 'pointer';

                const popup = new maplibregl.Popup({ offset: 12 }).setHTML(`
                    <strong>${city.name}</strong><br/>
                    ${city.desc}
                `);

                const marker = new maplibregl.Marker(el)
                    .setLngLat(city.coords)
                    .setPopup(popup)
                    .addTo(map);

                // Hover tooltip (lightweight popup)
                let hoverPopup;
                el.addEventListener('mouseenter', () => {
                    hoverPopup = new maplibregl.Popup({ closeButton: false, closeOnClick: false, offset: 8 })
                        .setLngLat(city.coords)
                        .setHTML(city.name)
                        .addTo(map);
                });
                el.addEventListener('mouseleave', () => {
                    if (hoverPopup) {
                        hoverPopup.remove();
                        hoverPopup = null;
                    }
                });
            });
        });
    });
</script>
@endpush