<?php $__env->startSection('title', 'Data Desa'); ?>
<?php $__env->startSection('meta_description', 'Data statistik dan informasi demografis Desa Suka Baru'); ?>

<?php $__env->startSection('content'); ?>


<div class="bg-primary py-10">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <nav class="text-blue-200 text-sm mb-2">
            <a href="<?php echo e(route('home')); ?>" class="hover:text-white">Beranda</a>
            <span class="mx-2">/</span>
            <span class="text-white">Data Desa</span>
        </nav>
        <h1 class="text-3xl font-bold text-white">Data & Statistik Desa</h1>
        <p class="text-blue-200 mt-1">Informasi demografis dan sosial Desa Suka Baru secara lengkap</p>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">

    
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10">
        <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 text-center hover:shadow-md transition-all duration-300 group">
            <div class="w-12 h-12 bg-blue-50 text-primary rounded-xl flex items-center justify-center mx-auto mb-2 group-hover:scale-110 transition-transform">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
            </div>
            <div class="text-3xl md:text-4xl font-bold mb-1 text-primary"><?php echo e(number_format($statistic->jumlah_penduduk)); ?></div>
            <div class="text-sm text-gray-500">Total Penduduk</div>
        </div>

        <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 text-center hover:shadow-md transition-all duration-300 group">
            <div class="w-12 h-12 bg-blue-50 text-blue-600 rounded-xl flex items-center justify-center mx-auto mb-2 group-hover:scale-110 transition-transform">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
            </div>
            <div class="text-3xl md:text-4xl font-bold mb-1 text-blue-600"><?php echo e(number_format($statistic->jumlah_kk)); ?></div>
            <div class="text-sm text-gray-500">Kepala Keluarga</div>
        </div>

        <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 text-center hover:shadow-md transition-all duration-300 group">
            <div class="w-12 h-12 bg-sky-50 text-sky-600 rounded-xl flex items-center justify-center mx-auto mb-2 group-hover:scale-110 transition-transform">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
            </div>
            <div class="text-3xl md:text-4xl font-bold mb-1 text-sky-600"><?php echo e($statistic->jumlah_dusun); ?></div>
            <div class="text-sm text-gray-500">Dusun</div>
        </div>

        <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 text-center hover:shadow-md transition-all duration-300 group">
            <div class="w-12 h-12 bg-sky-50 text-sky-700 rounded-xl flex items-center justify-center mx-auto mb-2 group-hover:scale-110 transition-transform">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/></svg>
            </div>
            <div class="text-3xl md:text-4xl font-bold mb-1 text-sky-700"><?php echo e($statistic->jumlah_rt); ?></div>
            <div class="text-sm text-gray-500">RT</div>
        </div>
    </div>

    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        
        <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
            <h2 class="font-bold text-primary text-lg mb-1">Komposisi Jenis Kelamin</h2>
            <p class="text-gray-400 text-sm mb-4">Distribusi penduduk berdasarkan jenis kelamin</p>
            <div class="relative" style="height:260px;">
                <canvas id="genderDonut"></canvas>
            </div>
            <div class="flex justify-center gap-8 mt-4">
                <div class="flex items-center gap-2">
                    <span class="w-3 h-3 rounded-full" style="background:#1E3A8A"></span>
                    <span class="text-sm text-gray-600">Laki-laki <strong class="text-primary"><?php echo e(number_format($statistic->laki_laki)); ?></strong></span>
                </div>
                <div class="flex items-center gap-2">
                    <span class="w-3 h-3 rounded-full" style="background:#93c5fd"></span>
                    <span class="text-sm text-gray-600">Perempuan <strong class="text-primary"><?php echo e(number_format($statistic->perempuan)); ?></strong></span>
                </div>
            </div>
        </div>

        
        <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
            <h2 class="font-bold text-primary text-lg mb-1">Perbandingan Penduduk</h2>
            <p class="text-gray-400 text-sm mb-4">Jumlah laki-laki vs perempuan</p>
            <div class="relative" style="height:260px;">
                <canvas id="genderBar"></canvas>
            </div>
        </div>
    </div>

    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        
        <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
            <h2 class="font-bold text-primary text-lg mb-1">Tingkat Pendidikan</h2>
            <p class="text-gray-400 text-sm mb-4">Distribusi pendidikan masyarakat desa</p>
            <div class="relative" style="height:260px;">
                <canvas id="educationPie"></canvas>
            </div>
        </div>

        
        <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
            <h2 class="font-bold text-primary text-lg mb-1">Mata Pencaharian</h2>
            <p class="text-gray-400 text-sm mb-4">Sebaran jenis pekerjaan penduduk</p>
            <div class="relative" style="height:260px;">
                <canvas id="jobBar"></canvas>
            </div>
        </div>
    </div>

    
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
        
        <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
            <h2 class="font-bold text-primary text-lg mb-4">Rasio Jenis Kelamin</h2>
            <?php
            $rasio = $statistic->perempuan > 0 ? round(($statistic->laki_laki / $statistic->perempuan) * 100) : 0;
            $pctL = $statistic->jumlah_penduduk > 0 ? round(($statistic->laki_laki / $statistic->jumlah_penduduk) * 100) : 0;
            $pctP = 100 - $pctL;
            ?>
            <div class="text-center mb-4">
                <div class="text-4xl font-bold text-primary"><?php echo e($rasio); ?></div>
                <div class="text-gray-400 text-sm">laki-laki per 100 perempuan</div>
            </div>
            <div class="space-y-3">
                <div>
                    <div class="flex justify-between text-sm mb-1">
                        <span class="text-gray-600">Laki-laki</span>
                        <span class="font-medium text-primary"><?php echo e($pctL); ?>%</span>
                    </div>
                    <div class="w-full bg-gray-100 rounded-full h-3">
                        <div class="h-3 rounded-full transition-all duration-1000" style="width:<?php echo e($pctL); ?>%;background:#1E3A8A"></div>
                    </div>
                </div>
                <div>
                    <div class="flex justify-between text-sm mb-1">
                        <span class="text-gray-600">Perempuan</span>
                        <span class="font-medium" style="color:#93c5fd"><?php echo e($pctP); ?>%</span>
                    </div>
                    <div class="w-full bg-gray-100 rounded-full h-3">
                        <div class="h-3 rounded-full transition-all duration-1000" style="width:<?php echo e($pctP); ?>%;background:#93c5fd"></div>
                    </div>
                </div>
            </div>
        </div>

        
        <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
            <h2 class="font-bold text-primary text-lg mb-4">Data Wilayah</h2>
            <div class="space-y-4">
                <div class="flex items-center justify-between py-2 border-b border-gray-100">
                    <span class="text-gray-600 text-sm">Luas Wilayah</span>
                    <span class="font-bold text-primary"><?php echo e(number_format($statistic->luas_wilayah_ha, 2)); ?> Ha</span>
                </div>
                <div class="flex items-center justify-between py-2 border-b border-gray-100">
                    <span class="text-gray-600 text-sm">Jumlah Dusun</span>
                    <span class="font-bold text-primary"><?php echo e($statistic->jumlah_dusun); ?></span>
                </div>
                <div class="flex items-center justify-between py-2 border-b border-gray-100">
                    <span class="text-gray-600 text-sm">Jumlah RT</span>
                    <span class="font-bold text-primary"><?php echo e($statistic->jumlah_rt); ?></span>
                </div>
                <div class="flex items-center justify-between py-2">
                    <span class="text-gray-600 text-sm">Kepadatan</span>
                    <span class="font-bold text-primary">
                        <?php if($statistic->luas_wilayah_ha > 0): ?>
                            <?php echo e(number_format($statistic->jumlah_penduduk / ($statistic->luas_wilayah_ha / 100), 1)); ?> jiwa/km²
                        <?php else: ?>
                            —
                        <?php endif; ?>
                    </span>
                </div>
            </div>
        </div>

        
        <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
            <h2 class="font-bold text-primary text-lg mb-4">Ringkasan Keluarga</h2>
            <div class="space-y-4">
                <div class="text-center bg-blue-50 rounded-xl p-4">
                    <div class="text-3xl font-bold text-primary">
                        <?php echo e($statistic->jumlah_kk > 0 ? number_format($statistic->jumlah_penduduk / $statistic->jumlah_kk, 1) : '—'); ?>

                    </div>
                    <div class="text-gray-500 text-sm mt-1">rata-rata jiwa per KK</div>
                </div>
                <div class="flex items-center justify-between py-2 border-b border-gray-100">
                    <span class="text-gray-600 text-sm">Total KK</span>
                    <span class="font-bold text-primary"><?php echo e(number_format($statistic->jumlah_kk)); ?></span>
                </div>
                <div class="flex items-center justify-between py-2">
                    <span class="text-gray-600 text-sm">Total Jiwa</span>
                    <span class="font-bold text-primary"><?php echo e(number_format($statistic->jumlah_penduduk)); ?></span>
                </div>
            </div>
        </div>
    </div>

    
    <?php if($statistic->tingkat_pendidikan || $statistic->mata_pencaharian): ?>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <?php if($statistic->tingkat_pendidikan): ?>
        <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
            <h2 class="font-bold text-primary text-lg mb-3 flex items-center gap-2">
                <svg class="w-5 h-5 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0112 20.055a11.952 11.952 0 01-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"/></svg>
                Keterangan Tingkat Pendidikan
            </h2>
            <div class="text-gray-600 text-sm leading-relaxed whitespace-pre-line"><?php echo e($statistic->tingkat_pendidikan); ?></div>
        </div>
        <?php endif; ?>
        <?php if($statistic->mata_pencaharian): ?>
        <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
            <h2 class="font-bold text-primary text-lg mb-3 flex items-center gap-2">
                <svg class="w-5 h-5 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                Keterangan Mata Pencaharian
            </h2>
            <div class="text-gray-600 text-sm leading-relaxed whitespace-pre-line"><?php echo e($statistic->mata_pencaharian); ?></div>
        </div>
        <?php endif; ?>
    </div>
    <?php endif; ?>

</div>

<?php $__env->startPush('scripts'); ?>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {

    const primary = '#1E3A8A';
    const secondary = '#2563EB';
    const light = '#93c5fd';
    const lighter = '#dbeafe';
    const palette = ['#1E3A8A','#2563EB','#3b82f6','#60a5fa','#93c5fd','#bfdbfe'];

    Chart.defaults.font.family = "'Inter', sans-serif";
    Chart.defaults.color = '#6b7280';

    // ─── 1. Donut Jenis Kelamin ───────────────────────────
    const genderDonutCtx = document.getElementById('genderDonut');
    if (genderDonutCtx) {
        new Chart(genderDonutCtx, {
            type: 'doughnut',
            data: {
                labels: ['Laki-laki', 'Perempuan'],
                datasets: [{
                    data: [<?php echo e($statistic->laki_laki); ?>, <?php echo e($statistic->perempuan); ?>],
                    backgroundColor: [primary, light],
                    borderColor: ['#fff','#fff'],
                    borderWidth: 3,
                    hoverOffset: 8,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '68%',
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: ctx => ` ${ctx.label}: ${ctx.parsed.toLocaleString('id-ID')} jiwa`
                        }
                    }
                }
            }
        });
    }

    // ─── 2. Bar Perbandingan Laki vs Perempuan ────────────
    const genderBarCtx = document.getElementById('genderBar');
    if (genderBarCtx) {
        new Chart(genderBarCtx, {
            type: 'bar',
            data: {
                labels: ['Laki-laki', 'Perempuan', 'Total'],
                datasets: [{
                    label: 'Jumlah Jiwa',
                    data: [<?php echo e($statistic->laki_laki); ?>, <?php echo e($statistic->perempuan); ?>, <?php echo e($statistic->jumlah_penduduk); ?>],
                    backgroundColor: [primary, light, secondary],
                    borderRadius: 10,
                    borderSkipped: false,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: ctx => ` ${ctx.parsed.y.toLocaleString('id-ID')} jiwa`
                        }
                    }
                },
                scales: {
                    y: { beginAtZero: true, grid: { color: '#f1f5f9' },
                         ticks: { callback: v => v.toLocaleString('id-ID') } },
                    x: { grid: { display: false } }
                }
            }
        });
    }

    // ─── 3. Pie Tingkat Pendidikan ────────────────────────
    const educationPieCtx = document.getElementById('educationPie');
    if (educationPieCtx) {
        const eduLabels = ['SD/Sederajat','SMP/Sederajat','SMA/Sederajat','Perguruan Tinggi','Tidak Sekolah'];
        const eduData   = [40, 25, 25, 7, 3];
        new Chart(educationPieCtx, {
            type: 'pie',
            data: {
                labels: eduLabels,
                datasets: [{
                    data: eduData,
                    backgroundColor: palette,
                    borderColor: '#fff',
                    borderWidth: 3,
                    hoverOffset: 8,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: { boxWidth: 12, padding: 12, font: { size: 11 } }
                    },
                    tooltip: {
                        callbacks: {
                            label: ctx => ` ${ctx.label}: ${ctx.parsed}%`
                        }
                    }
                }
            }
        });
    }

    // ─── 4. Horizontal Bar Mata Pencaharian ───────────────
    const jobBarCtx = document.getElementById('jobBar');
    if (jobBarCtx) {
        const jobLabels = ['Petani','Pekebun','Pedagang/UMKM','PNS/TNI/Polri','Buruh','Lainnya'];
        const jobData   = [60, 20, 10, 5, 3, 2];
        new Chart(jobBarCtx, {
            type: 'bar',
            data: {
                labels: jobLabels,
                datasets: [{
                    label: 'Persentase (%)',
                    data: jobData,
                    backgroundColor: palette,
                    borderRadius: 8,
                    borderSkipped: false,
                }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: ctx => ` ${ctx.parsed.x}%`
                        }
                    }
                },
                scales: {
                    x: {
                        beginAtZero: true,
                        max: 70,
                        grid: { color: '#f1f5f9' },
                        ticks: { callback: v => v + '%' }
                    },
                    y: { grid: { display: false } }
                }
            }
        });
    }

});
</script>
<?php $__env->stopPush(); ?>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH F:\web Desa Suka Baru\website-desa-suka-baru\resources\views/public/data-desa.blade.php ENDPATH**/ ?>