@extends('layouts.usermain')
@section('main-container')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="page-header d-print-none">
	<div class="container-xl">
		<div class="row g-2 align-items-center">
                <div class="col">
                    <h2 class="page-title">
                        Visual Analytics & Key Metrics
                    </h2>
                </div>
            </div>
	    </div>
    </div>
</div>
<!-- Page body -->
<div class="page-body">
  <div class="container-xl">
    <div class="card mb-3">
        <div class="card-header bg-primary text-white">
            WHS Applications:{{ $totalApplications }}
        </div>  
  <div class="row  mt-4">
  <div class="col-12 col-md-6 col-lg-3">
    <div class="card text-white bg-success">
      <div class="card-body d-flex align-items-center">
        <span class="stamp stamp-md bg-white text-success me-3">
          <i class="ti ti-check"></i>
        </span>
        <div>
          <h3 class="m-0 text-white">{{ $approved }}</h3>
          <div class="text-white-75">Approved</div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-12 col-md-6 col-lg-3">
    <div class="card text-white bg-warning">
      <div class="card-body d-flex align-items-center">
        <span class="stamp stamp-md bg-white text-warning me-3">
          <i class="ti ti-x"></i>
        </span>
        <div>
          <h3 class="m-0 text-white">{{ $rejected ?? 0 }} </h3>
          <div class="text-white-75">Rejected</div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-12 col-md-6 col-lg-3">
    <div class="card text-white bg-danger">
      <div class="card-body d-flex align-items-center">
        <span class="stamp stamp-md bg-white text-danger me-3">
          <i class="ti ti-clock"></i>
        </span>
        <div>
          <h3 class="m-0 text-white">{{ $pending  }}</h3>
          <div class="text-white-75">Pending</div>
        </div>
      </div>
    </div>
  </div>

<div class="col-12 col-md-6 col-lg-3">
    <div class="card text-white bg-danger">
      <div class="card-body d-flex align-items-center">
        <span class="stamp stamp-md bg-white text-danger me-3">
          <i class="ti ti-clock"></i>
        </span>
        <div>
          <h3 class="m-0 text-white">{{ $needsCorrection  }}</h3>
          <div class="text-white-75">Needs Correction</div>
        </div>
      </div>
    </div>
  </div>
   
</div>
</div>
</div>
</div>


<div class="container-xl">
    <div class="row">
        <!-- LEFT : BAR CHART -->
<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" style="height:420px;">
            <canvas id="processChart"></canvas>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {

    const chartData = @json($chartData);
    const canvas = document.getElementById('processChart');

    if (!canvas) return;

    // 🔴 Destroy if exists
    if (window.processChartInstance) {
        window.processChartInstance.destroy();
    }

    window.processChartInstance = new Chart(canvas, {
        type: 'bar',
        data: {
            labels: chartData.labels,
            datasets: [{
                label: 'Number of Records',
                data: chartData.data,
                backgroundColor: [
                    '#4e79a7',
                    '#f28e2b',
                    '#e15759',
                    '#76b7b2',
                    '#59a14f',
                    '#edc949',
                    '#af7aa1'
                ],
                borderRadius: 6,
                barThickness: 40
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            animation: false,

            plugins: {
                legend: { display: false },
                datalabels: {
                    anchor: 'end',
                    align: 'top',
                    font: { weight: 'bold' }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: { precision: 0 }
                }
            }
        },
        plugins: [ChartDataLabels]
    });

});
</script>







        <!-- RIGHT : GOOGLE MAP -->
        <div class="col-md-6">
            <div class="card mb-3 h-100">
                <div class="card-header bg-primary text-white">
                    📍 Assets Location on Map
                </div>

                <div class="card-body">
                    <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">
                            <strong>Jharkhand</strong>
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            <img src="https://maps.google.com/mapfiles/ms/icons/green-dot.png" width="18">
                            <strong>Odisha</strong>
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            <img src="https://maps.google.com/mapfiles/ms/icons/red-dot.png" width="18">
                            <strong>West Bengal</strong>
                        </div>
                    </div>
                </div>
            </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="page-body">
<div class="container">
<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>


    </div>
  </div>
</div>                    
@endsection