@extends('layouts.main')

@section('main-container')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div class="page-header d-print-none">
    <div class="container-xl">
        <div class="row align-items-center">
            <div class="col">
                <h2 class="page-title">Visual Summary Dashboard</h2>
            </div>
        </div>
    </div>
</div>

<div class="page-body">
<div class="container-xl">

<div class="row">
<div class="col-md-6">
    <div class="card mb-3">
        <div class="card-header bg-primary text-white">
            WHS / Asset Handover Process Flow
        </div>
        <div class="card-body">
            <canvas id="processChart" height="420"></canvas>
        </div>
    </div>
</div>


<script>
    const chartData = @json($chartData);
</script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>

<script>
const ctx = document.getElementById('processChart').getContext('2d');

new Chart(ctx, {
    type: 'bar',
    data: {
        labels: chartData.labels,     // 👈 from controller
        datasets: [{
            label: 'Number of Records',
            data: chartData.data,     // 👈 from controller
            backgroundColor: [
                '#4e79a7',
                '#f28e2b',
                '#e15759',
                '#76b7b2',
                '#59a14f',
                '#edc949',
                '#af7aa1'
            ],
            borderRadius: 6,
            barThickness: 45
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { display: false },
            datalabels: {
                anchor: 'end',
                align: 'top',
                font: { weight: 'bold' }
            }
        },
        scales: {
            y: { beginAtZero: true }
        }
    },
    plugins: [ChartDataLabels]
});
</script>

<div class="card mb-3 col-md-6">
    <div class="card-header bg-primary text-white">
        📍 Assets Location on Map
    </div>

    <div class="card-body">
        <!-- Google Map Container -->
        <div id="processMap"
             style="height: 400px; width: 100%; border-radius: 6px;"></div>

        <!-- Map Legend -->
        <div class="mt-3 d-flex gap-4 flex-wrap">
            <div class="d-flex align-items-center gap-2">
                <img src="https://maps.google.com/mapfiles/ms/icons/blue-dot.png" width="18">
                <span><strong>Jharkhand</strong></span>
            </div>

            <div class="d-flex align-items-center gap-2">
                <img src="https://maps.google.com/mapfiles/ms/icons/green-dot.png" width="18">
                <span><strong>Odisha</strong></span>
            </div>

            <div class="d-flex align-items-center gap-2">
                <img src="https://maps.google.com/mapfiles/ms/icons/red-dot.png" width="18">
                <span><strong>West Bengal</strong></span>
            </div>
        </div>
    </div>
</div>


<!-- Google Maps API -->
<script
    
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCu38ZTPcRp2NPk3uvRcagQA-mY-3SXlWE&callback=initMap"
    async
    defer>
</script>

<script>
    const handovers = @json($latlong);

    function initMap() {

        const EAST_INDIA_BOUNDS = {
            north: 27.5,
            south: 18.0,
            west: 83.0,
            east: 89.9
        };

        const map = new google.maps.Map(document.getElementById("processMap"), {
            center: { lat: 22.5, lng: 86.5 },
            zoom: 6,
            minZoom: 6,
            maxZoom: 18,
            restriction: {
                latLngBounds: EAST_INDIA_BOUNDS,
                strictBounds: true
            },
            mapTypeId: "roadmap"
        });

        /* =========================
           STATE BOUNDARIES
        ==========================*/

        const jharkhand = [
            { lat: 25.6, lng: 83.3 },
            { lat: 24.8, lng: 84.6 },
            { lat: 24.5, lng: 85.9 },
            { lat: 23.8, lng: 86.9 },
            { lat: 23.1, lng: 87.3 },
            { lat: 22.7, lng: 86.8 },
            { lat: 22.6, lng: 85.6 },
            { lat: 23.2, lng: 84.6 },
            { lat: 24.0, lng: 83.9 }
        ];

        const odisha = [
            { lat: 22.7, lng: 83.9 },
            { lat: 21.9, lng: 84.8 },
            { lat: 21.4, lng: 85.6 },
            { lat: 20.8, lng: 86.3 },
            { lat: 19.8, lng: 86.9 },
            { lat: 18.9, lng: 84.7 },
            { lat: 19.6, lng: 83.2 },
            { lat: 21.0, lng: 82.9 }
        ];

        const westBengal = [
            { lat: 27.2, lng: 88.0 },
            { lat: 26.2, lng: 88.4 },
            { lat: 25.4, lng: 88.7 },
            { lat: 24.6, lng: 88.4 },
            { lat: 23.6, lng: 88.2 },
            { lat: 22.9, lng: 88.0 },
            { lat: 21.6, lng: 87.4 },
            { lat: 22.6, lng: 86.8 },
            { lat: 23.5, lng: 87.2 },
            { lat: 24.7, lng: 87.8 }
        ];

        function inPolygon(point, polygon) {
            let x = point.lng, y = point.lat;
            let inside = false;

            for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
                let xi = polygon[i].lng, yi = polygon[i].lat;
                let xj = polygon[j].lng, yj = polygon[j].lat;

                let intersect = ((yi > y) !== (yj > y)) &&
                    (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
                if (intersect) inside = !inside;
            }
            return inside;
        }

        function getMarkerIcon(position) {
            if (inPolygon(position, jharkhand))
                return "https://maps.google.com/mapfiles/ms/icons/blue-dot.png";

            if (inPolygon(position, odisha))
                return "https://maps.google.com/mapfiles/ms/icons/green-dot.png";

            if (inPolygon(position, westBengal))
                return "https://maps.google.com/mapfiles/ms/icons/red-dot.png";

            return "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png";
        }

        /* =========================
           MARKERS
        ==========================*/

        const infoWindow = new google.maps.InfoWindow();

        handovers.forEach(item => {

            if (!item.latitude || !item.longitude) return;

            const lat = Number(item.latitude);
            const lng = Number(item.longitude);
            if (isNaN(lat) || isNaN(lng)) return;

            const position = { lat, lng };

            const marker = new google.maps.Marker({
                position,
                map,
                icon: getMarkerIcon(position),
                animation: google.maps.Animation.DROP
            });

            const content = `
                <div style="min-width:200px">
                    <strong>Water Harvesting Structure</strong><br>
                    <b>Length:</b> ${item.length ?? '-'} m<br>
                    <b>Width:</b> ${item.width ?? '-'} m<br>
                    <b>Depth/Height:</b> ${item.depth_or_height ?? '-'} m
                </div>
            `;

            marker.addListener("click", () => {
                infoWindow.setContent(content);
                infoWindow.open(map, marker);
            });
        });
    }
</script>









{{-- ================= Geo Donat ================= --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="container-xl">

<div class="row row-cards mb-4">
    <div class="col-12">
        <div class="card shadow-sm">
            <div class="card-header bg-primary text-white d-flex align-items-center">
                <h5 class="card-title mb-0">
                    <i class="ti ti-map-pin me-2"></i> Our Presence
                </h5>
            </div>

<div class="card-body">
    <div class="row row-cards text-center">

        <div class="col-12 col-md-2">
            <div class="card border shadow-sm">
                <div class="card-body p-2" style="background-color: #e3f2fd;"> <!-- Light Blue -->
                    <h6 class="text-muted mb-1">Unit</h6>
                    <canvas id="chartUnit" height="120"></canvas>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-2">
            <div class="card border shadow-sm">
                <div class="card-body p-2" style="background-color: #e8f5e9;"> <!-- Light Green -->
                    <h6 class="text-muted mb-1">State</h6>
                    <canvas id="chartState" height="120"></canvas>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-2">
            <div class="card border shadow-sm">
                <div class="card-body p-2" style="background-color: #fff3e0;"> <!-- Light Orange -->
                    <h6 class="text-muted mb-1">District</h6>
                    <canvas id="chartDistrict" height="120"></canvas>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-2">
            <div class="card border shadow-sm">
                <div class="card-body p-2" style="background-color: #f3e5f5;"> <!-- Light Purple -->
                    <h6 class="text-muted mb-1">Block</h6>
                    <canvas id="chartBlock" height="120"></canvas>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-2">
            <div class="card border shadow-sm">
                <div class="card-body p-2" style="background-color: #ffebee;"> <!-- Light Red -->
                    <h6 class="text-muted mb-1">Panchayat</h6>
                    <canvas id="chartPanchayat" height="120"></canvas>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-2">
            <div class="card border shadow-sm">
                <div class="card-body p-2" style="background-color: #e0f7fa;"> <!-- Light Teal -->
                    <h6 class="text-muted mb-1">Village</h6>
                    <canvas id="chartVillage" height="120"></canvas>
                </div>
            </div>
        </div>

    </div>
</div>

        </div>
    </div>
</div>


<script>
const centerTextPlugin = {
    id: 'centerText',
    beforeDraw(chart) {
        const { ctx, chartArea } = chart;
        if (!chartArea) return;

        const data = chart.data.datasets[0].data;
        const working = data[0];
        const total = data[0] + data[1];

        ctx.save();
        ctx.font = 'bold 16px Arial';
        ctx.fillStyle = '#495057';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(
            `${working}/${total}`,
            (chartArea.left + chartArea.right) / 2,
            (chartArea.top + chartArea.bottom) / 2
        );
        ctx.restore();
    }
};
</script>

<script>
const doughnutData = @json($doughnutData);

function createDoughnutChart(canvasId, working, total, color) {
    const canvas = document.getElementById(canvasId);
    if (!canvas) return;

    new Chart(canvas, {
        type: 'doughnut',
        data: {
            labels: ['Working', 'Remaining'],
            datasets: [{
                data: [working, total - working],
                backgroundColor: [color, '#e9ecef'],
                borderWidth: 0
            }]
        },
        options: {
            cutout: '70%',
            responsive: true,
            plugins: {
                legend: { display: false },
                tooltip: { enabled: true }
            }
        },
        plugins: [centerTextPlugin] // 👈 Add the plugin here
    });
}

// Dynamically render all charts
Object.keys(doughnutData).forEach(key => {
    const canvasId = 'chart' + key; // e.g., chartUnit
    const { working, total, color } = doughnutData[key];
    createDoughnutChart(canvasId, working, total, color);
});
</script>





@endsection