<?php $__env->startSection('header', 'Dashboard Eksekutif Bupati Sumba Tengah'); ?>

<?php $__env->startSection('styles'); ?>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<style>
    .card-stat {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .card-stat:hover {
        transform: translateY(-5px);
    }
    .chart-container {
        position: relative;
        transition: all 0.5s ease;
    }
    @keyframes  fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in {
        animation: fadeIn 0.8s ease forwards;
    }
</style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Leaflet Map
        var map = L.map('dashboard-map').setView([-9.45, 119.6], 10);
        
        // Base Layers
        var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        });

        var satellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
            attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EBP, and the GIS User Community'
        });

        // Add default layer
        osm.addTo(map);

        // Layer Control
        var baseMaps = {
            "Peta Standar": osm,
            "Satelit": satellite
        };
        L.control.layers(baseMaps).addTo(map);

        var markers = <?php echo json_encode($map_data, 15, 512) ?>;
        markers.forEach(function(m) {
            L.circleMarker([m.latitude, m.longitude], {
                radius: 6,
                fillColor: '#ffffff',
                color: '#0ea5e9',
                weight: 2,
                opacity: 1,
                fillOpacity: 1
            }).addTo(map).bindPopup("<div class='font-bold text-primary'>" + m.name + "</div><div class='text-xs text-gray-500'>" + m.village + "</div>");
        });

        // Component Distribution Chart (Donut)
        var ctxComponent = document.getElementById('componentChart').getContext('2d');
        new Chart(ctxComponent, {
            type: 'doughnut',
            data: {
                labels: <?php echo json_encode($chart_data['component_labels'], 15, 512) ?>,
                datasets: [{
                    data: <?php echo json_encode($chart_data['component_values'], 15, 512) ?>,
                    backgroundColor: ['#ef4444', '#f59e0b', '#10b981', '#3b82f6'],
                    borderWidth: 5,
                    borderColor: '#ffffff',
                    hoverOffset: 15
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                animation: {
                    animateRotate: true,
                    animateScale: true,
                    duration: 2000,
                    easing: 'easeOutQuart'
                },
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: { padding: 20, font: { weight: 'bold' } }
                    }
                },
                cutout: '65%'
            }
        });

        // District Success Chart (Bar)
        var ctxDistrict = document.getElementById('districtChart').getContext('2d');
        new Chart(ctxDistrict, {
            type: 'bar',
            data: {
                labels: <?php echo json_encode($chart_data['district_labels'], 15, 512) ?>,
                datasets: [{
                    label: 'Jumlah Monitoring',
                    data: <?php echo json_encode($chart_data['district_values'], 15, 512) ?>,
                    backgroundColor: function(context) {
                        const colors = ['#ef4444', '#f59e0b', '#10b981', '#3b82f6', '#8b5cf6', '#ec4899'];
                        return colors[context.dataIndex % colors.length];
                    },
                    borderRadius: 8,
                    barThickness: 30
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                animation: {
                    duration: 2000,
                    easing: 'easeOutBounce'
                },
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    y: { 
                        beginAtZero: true,
                        grid: { display: false },
                        ticks: { font: { weight: 'bold' } }
                    },
                    x: {
                        grid: { display: false },
                        ticks: { font: { weight: 'bold' } }
                    }
                }
            }
        });

        // Trends Chart (Line)
        var ctxTrends = document.getElementById('trendsChart').getContext('2d');
        new Chart(ctxTrends, {
            type: 'line',
            data: {
                labels: <?php echo json_encode($chart_data['labels'], 15, 512) ?>,
                datasets: [{
                    label: 'Aktivitas Monitoring',
                    data: <?php echo json_encode($chart_data['values'], 15, 512) ?>,
                    borderColor: '#ffffff',
                    backgroundColor: 'rgba(255, 255, 255, 0.2)',
                    borderWidth: 4,
                    pointBackgroundColor: '#ffffff',
                    pointRadius: 6,
                    fill: true,
                    tension: 0.4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    y: { display: false },
                    x: { 
                        ticks: { color: '#ffffff', font: { weight: 'bold' } },
                        grid: { display: false }
                    }
                }
            }
        });
    });
</script>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<!-- Header Bupati Section -->
<div class="mb-8 flex flex-col md:flex-row md:items-center justify-between animate-fade-in">
    <div>
        <h1 class="text-3xl font-extrabold text-gray-900 tracking-tight">Dashboard Eksekutif</h1>
        <p class="text-gray-500 mt-1">Monitoring Program PK-POM Kabupaten Sumba Tengah</p>
    </div>
    <div class="mt-4 md:mt-0 flex items-center bg-white p-2 rounded-2xl shadow-sm border border-gray-100">
        <div class="px-4 py-2 text-right">
            <p class="text-[10px] font-bold text-gray-400 uppercase">Status Sistem</p>
            <p class="text-sm font-bold text-green-500 flex items-center">
                <span class="w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse"></span> Online & Sinkron
            </p>
        </div>
        <div class="h-10 w-px bg-gray-100 mx-2"></div>
        <div class="px-4 py-2">
            <p class="text-[10px] font-bold text-gray-400 uppercase">Update Terakhir</p>
            <p class="text-sm font-bold text-gray-700"><?php echo e(now()->format('d M Y, H:i')); ?></p>
        </div>
    </div>
</div>

<!-- Colorful Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 animate-fade-in" style="animation-delay: 0.1s">
    <div class="card-stat bg-gradient-to-br from-red-500 to-red-600 p-6 rounded-3xl shadow-lg shadow-red-200 text-white relative overflow-hidden">
        <div class="relative z-10">
            <p class="text-sm font-bold text-red-100 uppercase tracking-wider">Total Penerima</p>
            <h3 class="text-4xl font-black mt-2"><?php echo e(number_format($stats['total_beneficiaries'])); ?></h3>
            <p class="text-xs text-red-100 mt-4 font-medium italic">Keluarga Penerima Manfaat</p>
        </div>
        <i class="fas fa-users absolute -right-4 -bottom-4 text-8xl text-white/10"></i>
    </div>

    <div class="card-stat bg-gradient-to-br from-orange-500 to-orange-600 p-6 rounded-3xl shadow-lg shadow-orange-200 text-white relative overflow-hidden">
        <div class="relative z-10">
            <p class="text-sm font-bold text-orange-100 uppercase tracking-wider">Total Komponen</p>
            <h3 class="text-4xl font-black mt-2"><?php echo e(number_format($stats['total_components'])); ?></h3>
            <p class="text-xs text-orange-100 mt-4 font-medium italic">Unit Bantuan Terdistribusi</p>
        </div>
        <i class="fas fa-box-open absolute -right-4 -bottom-4 text-8xl text-white/10"></i>
    </div>

    <div class="card-stat bg-gradient-to-br from-green-500 to-green-600 p-6 rounded-3xl shadow-lg shadow-green-200 text-white relative overflow-hidden">
        <div class="relative z-10">
            <p class="text-sm font-bold text-green-100 uppercase tracking-wider">Kondisi Sehat</p>
            <h3 class="text-4xl font-black mt-2"><?php echo e(number_format($stats['healthy_count'])); ?></h3>
            <p class="text-xs text-green-100 mt-4 font-medium italic">Tanaman & Ternak Kondisi Baik</p>
        </div>
        <i class="fas fa-heart-pulse absolute -right-4 -bottom-4 text-8xl text-white/10"></i>
    </div>

    <div class="card-stat bg-gradient-to-br from-yellow-500 to-yellow-600 p-6 rounded-3xl shadow-lg shadow-yellow-200 text-white relative overflow-hidden">
        <div class="relative z-10">
            <p class="text-sm font-bold text-yellow-100 uppercase tracking-wider">Monitoring</p>
            <h3 class="text-4xl font-black mt-2"><?php echo e(number_format($stats['monitoring_count'])); ?></h3>
            <p class="text-xs text-yellow-100 mt-4 font-medium italic">Laporan Bulan Berjalan</p>
        </div>
        <i class="fas fa-clipboard-check absolute -right-4 -bottom-4 text-8xl text-white/10"></i>
    </div>

    <div class="card-stat bg-gradient-to-br from-purple-500 to-purple-600 p-6 rounded-3xl shadow-lg shadow-purple-200 text-white relative overflow-hidden">
        <div class="relative z-10">
            <p class="text-sm font-bold text-purple-100 uppercase tracking-wider">Success Rate</p>
            <h3 class="text-4xl font-black mt-2"><?php echo e($stats['success_rate']); ?>%</h3>
            <p class="text-xs text-purple-100 mt-4 font-medium italic">Indikator Keberhasilan Program</p>
        </div>
        <i class="fas fa-chart-line absolute -right-4 -bottom-4 text-8xl text-white/10"></i>
    </div>
</div>

<!-- Real-time Component Monitoring -->
<div class="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 animate-fade-in" style="animation-delay: 0.15s">
    <?php $__currentLoopData = $realtime_component_stats; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $label => $c_stat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
    <div class="bg-white p-6 rounded-3xl shadow-sm border border-gray-100 flex flex-col justify-between">
        <div class="flex items-center justify-between mb-4">
            <div class="p-3 bg-<?php echo e($c_stat['color']); ?>-50 rounded-2xl">
                <i class="fas fa-<?php echo e($c_stat['icon']); ?> text-<?php echo e($c_stat['color']); ?>-500 text-xl"></i>
            </div>
            <div class="text-right">
                <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest"><?php echo e($label); ?></p>
                <p class="text-sm font-black text-gray-800"><?php echo e(number_format($c_stat['total'])); ?> Unit</p>
            </div>
        </div>
        
        <div class="space-y-4">
            <div>
                <div class="flex justify-between text-[10px] font-bold mb-1">
                    <span class="text-gray-500 uppercase">Progres Keberhasilan</span>
                    <span class="text-<?php echo e($c_stat['color']); ?>-600"><?php echo e($c_stat['avg_growth']); ?>%</span>
                </div>
                <div class="w-full bg-gray-100 rounded-full h-2 overflow-hidden">
                    <div class="bg-<?php echo e($c_stat['color']); ?>-500 h-full rounded-full transition-all duration-1000" style="width: <?php echo e($c_stat['avg_growth']); ?>%"></div>
                </div>
            </div>

            <div class="flex gap-1 h-1.5">
                <?php $__currentLoopData = ['Sangat Baik' => 'bg-green-400', 'Cukup Baik' => 'bg-blue-400', 'Perlu Perhatian' => 'bg-yellow-400', 'Gagal' => 'bg-red-400']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $status => $bg): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <?php 
                        $count = $c_stat['status_counts'][$status] ?? 0;
                        $percent = $c_stat['total'] > 0 ? ($count / $c_stat['total']) * 100 : 0;
                    ?>
                    <?php if($percent > 0): ?>
                        <div class="<?php echo e($bg); ?> rounded-full" style="width: <?php echo e($percent); ?>%" title="<?php echo e($status); ?>: <?php echo e($count); ?>"></div>
                    <?php endif; ?>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
            
            <div class="grid grid-cols-2 gap-y-1 gap-x-2 text-[8px] font-bold uppercase text-gray-400">
                <div class="flex items-center"><span class="w-1.5 h-1.5 bg-green-400 rounded-full mr-1"></span> Baik: <?php echo e($c_stat['status_counts']['Sangat Baik'] ?? 0); ?></div>
                <div class="flex items-center"><span class="w-1.5 h-1.5 bg-red-400 rounded-full mr-1"></span> Gagal: <?php echo e($c_stat['status_counts']['Gagal'] ?? 0); ?></div>
            </div>
        </div>
    </div>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>

<div class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-8 animate-fade-in" style="animation-delay: 0.2s">
    <!-- Chart: Component Composition -->
    <div class="bg-white p-8 rounded-3xl shadow-sm border border-gray-100">
        <div class="flex items-center justify-between mb-8">
            <div>
                <h3 class="text-xl font-extrabold text-gray-800">Komposisi Program</h3>
                <p class="text-sm text-gray-500">Distribusi bantuan per kategori</p>
            </div>
            <div class="p-3 bg-gray-50 rounded-2xl">
                <i class="fas fa-pie-chart text-primary text-xl"></i>
            </div>
        </div>
        <div class="h-80 chart-container">
            <canvas id="componentChart"></canvas>
        </div>
    </div>

    <!-- Chart: District Success -->
    <div class="bg-white p-8 rounded-3xl shadow-sm border border-gray-100">
        <div class="flex items-center justify-between mb-8">
            <div>
                <h3 class="text-xl font-extrabold text-gray-800">Capaian Monitoring</h3>
                <p class="text-sm text-gray-500">Jumlah aktivitas per kecamatan</p>
            </div>
            <div class="p-3 bg-gray-50 rounded-2xl">
                <i class="fas fa-map-marked-alt text-primary text-xl"></i>
            </div>
        </div>
        <div class="h-80 chart-container">
            <canvas id="districtChart"></canvas>
        </div>
    </div>
</div>

<div class="mt-8 grid grid-cols-1 lg:grid-cols-3 gap-8 animate-fade-in" style="animation-delay: 0.3s">
    <!-- Map Section -->
    <div class="lg:col-span-2 bg-white p-8 rounded-3xl shadow-sm border border-gray-100 relative overflow-hidden">
        <div class="flex items-center justify-between mb-6 relative z-10">
            <div>
                <h3 class="text-xl font-extrabold text-gray-800">Geografis Penerima</h3>
                <p class="text-sm text-gray-500">Sebaran lokasi bantuan di Sumba Tengah</p>
            </div>
            <a href="<?php echo e(route('map')); ?>" class="px-6 py-2 bg-primary text-white rounded-full text-xs font-bold hover:bg-sky-600 transition shadow-md shadow-blue-100">
                Lihat Peta Detail
            </a>
        </div>
        <div id="dashboard-map" class="rounded-3xl h-96 border border-gray-100 shadow-inner overflow-hidden"></div>
    </div>

    <!-- Trend Section with Background -->
    <div class="bg-gradient-to-br from-primary to-blue-700 p-8 rounded-3xl shadow-xl shadow-blue-200 text-white">
        <div class="flex items-center justify-between mb-8">
            <h3 class="text-xl font-extrabold">Tren Aktivitas</h3>
            <i class="fas fa-wave-square text-white/50"></i>
        </div>
        <div class="h-56 mb-8">
            <canvas id="trendsChart"></canvas>
        </div>
        <div class="space-y-4">
            <div class="bg-white/10 p-4 rounded-2xl backdrop-blur-sm border border-white/10">
                <p class="text-[10px] font-bold uppercase text-blue-100">Analisis Mingguan</p>
                <p class="text-sm mt-1 font-medium italic">Aktivitas monitoring meningkat 12% dibanding bulan lalu.</p>
            </div>
            <div class="bg-white/10 p-4 rounded-2xl backdrop-blur-sm border border-white/10">
                <p class="text-[10px] font-bold uppercase text-blue-100">Target Selanjutnya</p>
                <p class="text-sm mt-1 font-medium italic">Fokus pada monitoring pasca-panen di Kec. Katikutana.</p>
            </div>
        </div>
    </div>
</div>

<!-- Recent Activity List -->
<div class="mt-8 bg-white p-8 rounded-3xl shadow-sm border border-gray-100 animate-fade-in" style="animation-delay: 0.4s">
    <div class="flex items-center justify-between mb-8">
        <div>
            <h3 class="text-xl font-extrabold text-gray-800">Dokumentasi Terbaru</h3>
            <p class="text-sm text-gray-500">Bukti visual aktivitas lapangan</p>
        </div>
        <a href="<?php echo e(route('documentation.index')); ?>" class="text-primary text-sm font-bold hover:underline">Lihat Semua Galeri</a>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-5 gap-6">
        <?php $__empty_1 = true; $__currentLoopData = $recent_activities; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $activity): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
        <div class="group cursor-pointer">
            <div class="aspect-square rounded-2xl overflow-hidden mb-3 shadow-sm border border-gray-50 relative">
                <img src="<?php echo e(asset('storage/' . $activity->file_path)); ?>" class="w-full h-full object-cover transition duration-500 group-hover:scale-110" alt="Activity">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-end p-3">
                    <p class="text-[10px] text-white font-bold"><?php echo e($activity->beneficiary->village); ?></p>
                </div>
            </div>
            <h4 class="text-xs font-bold text-gray-800 truncate"><?php echo e($activity->beneficiary->name); ?></h4>
            <p class="text-[10px] text-gray-400"><?php echo e($activity->created_at->diffForHumans()); ?></p>
        </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
        <div class="col-span-full text-center py-10 text-gray-400 italic">
            Belum ada dokumentasi terbaru.
        </div>
        <?php endif; ?>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/sumba001/public_html/pom500.sumbatengahkab.go.id/resources/views/dashboard.blade.php ENDPATH**/ ?>