@extends('layout.main')
@section('styles')
<style>
    /* Animasi sederhana yang Anda pilih */
    .fade-in { animation: fadeIn 0.4s ease-in-out; }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    /* Tambahan styling untuk peta interaktif */
    .map-polygon {
        transition: all 0.3s ease;
        cursor: pointer;
    }
    .map-polygon:hover {
        fill-opacity: 0.5;
        stroke-width: 2;
    }
    .map-point {
        transition: all 0.3s ease;
        cursor: pointer;
    }
    .map-point:hover {
        r: 4;
        stroke: #1f2937;
        stroke-width: 1.5;
    }
</style>
@endsection

@push('scripts-head')
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@endpush

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="content-body fade-in space-y-6">
        
        <!-- Header Section -->
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
            <div>
                <h2 class="text-2xl font-bold text-gray-800">Resiliensi & Produksi Pertanian</h2>
                <p class="text-gray-500 text-sm mt-1">Pengembangan Agroforestry Polikultur Adaptif Iklim & Praktik GAP</p>
            </div>
            <div class="flex gap-2">
                <button class="bg-white border border-gray-200 text-gray-600 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-50 flex items-center gap-2 shadow-sm">
                    <i data-lucide="map" class="w-4 h-4"></i> Mode Pemetaan
                </button>
                <button class="bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-green-700 flex items-center gap-2 shadow-sm">
                    <i data-lucide="plus" class="w-4 h-4"></i> Tambah Data Lahan
                </button>
            </div>
        </div>

        <!-- 4 KPI Cards (Berdasarkan ToC Outcome & Output Indicators) -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            
            <!-- KPI 1: Adopsi Praktik -->
            <div class="bg-white p-5 rounded-xl shadow-sm border border-gray-100 relative overflow-hidden">
                <div class="flex justify-between items-start mb-2">
                    <p class="text-sm font-semibold text-gray-500">Adopsi Iklim Cerdas</p>
                    <div class="p-2 rounded-md bg-green-50 text-green-600"><i data-lucide="sprout" class="w-5 h-5"></i></div>
                </div>
                <h3 class="text-2xl font-bold text-gray-800">78%</h3>
                <p class="text-xs text-gray-400 mt-1">Target ToC: 85% Petani Menerapkan GAP</p>
                <div class="mt-4 flex items-center gap-2 text-sm text-green-600 font-medium">
                    <i data-lucide="trending-up" class="w-4 h-4"></i> +12% dari tahun lalu
                </div>
            </div>

            <!-- KPI 2: Petani Dilatih -->
            <div class="bg-white p-5 rounded-xl shadow-sm border border-gray-100 relative overflow-hidden">
                <div class="flex justify-between items-start mb-2">
                    <p class="text-sm font-semibold text-gray-500">Petani Dilatih GAP</p>
                    <div class="p-2 rounded-md bg-blue-50 text-blue-600"><i data-lucide="users" class="w-5 h-5"></i></div>
                </div>
                <h3 class="text-2xl font-bold text-gray-800">1,245 <span class="text-base font-normal text-gray-500">Orang</span></h3>
                <p class="text-xs text-gray-400 mt-1">Output Indicator: Target 1,500 Petani</p>
                <div class="w-full bg-gray-100 rounded-full h-1.5 mt-4">
                    <div class="h-1.5 rounded-full bg-blue-500" style="width: 83%"></div>
                </div>
            </div>

            <!-- KPI 3: Bibit Ditanam -->
            <div class="bg-white p-5 rounded-xl shadow-sm border border-gray-100 relative overflow-hidden">
                <div class="flex justify-between items-start mb-2">
                    <p class="text-sm font-semibold text-gray-500">Bibit & Pohon Pelindung</p>
                    <div class="p-2 rounded-md bg-amber-50 text-amber-600"><i data-lucide="trees" class="w-5 h-5"></i></div>
                </div>
                <h3 class="text-2xl font-bold text-gray-800">45.2K <span class="text-base font-normal text-gray-500">Pohon</span></h3>
                <p class="text-xs text-gray-400 mt-1">Output Indicator: Didistribusikan & Ditanam</p>
                <div class="w-full bg-gray-100 rounded-full h-1.5 mt-4">
                    <div class="h-1.5 rounded-full bg-amber-500" style="width: 90%"></div>
                </div>
            </div>

            <!-- KPI 4: Infrastruktur Konservasi -->
            <div class="bg-white p-5 rounded-xl shadow-sm border border-gray-100 relative overflow-hidden">
                <div class="flex justify-between items-start mb-2">
                    <p class="text-sm font-semibold text-gray-500">Unit Infrastruktur Air</p>
                    <div class="p-2 rounded-md bg-cyan-50 text-cyan-600"><i data-lucide="droplet" class="w-5 h-5"></i></div>
                </div>
                <h3 class="text-2xl font-bold text-gray-800">34 <span class="text-base font-normal text-gray-500">Unit</span></h3>
                <p class="text-xs text-gray-400 mt-1">Output: Irigasi mikro & panen air</p>
                <div class="w-full bg-gray-100 rounded-full h-1.5 mt-4">
                    <div class="h-1.5 rounded-full bg-cyan-500" style="width: 68%"></div>
                </div>
            </div>

        </div>

        <!-- Pemetaan Spasial Section (Fitur Utama M&E Lapangan) -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            
            <!-- Peta -->
            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 lg:col-span-2 flex flex-col">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-bold text-gray-800 flex items-center gap-2">
                        <i data-lucide="map" class="w-5 h-5 text-blue-600"></i> Peta Interaktif Sebaran Lahan & Tanaman
                    </h3>
                    <span class="bg-blue-50 text-blue-600 text-xs px-2 py-1 rounded font-medium">Live M&E</span>
                </div>
                <p class="text-sm text-gray-500 mb-4">Peta spasial tingkat lahan. Klik pada poligon hijau/biru untuk melihat data KK, atau klik titik tanaman untuk melihat riwayat intervensi.</p>
                
                <div class="flex-1 bg-[#f8fafc] rounded-lg border border-gray-200 relative overflow-hidden flex items-center justify-center min-h-[400px]">
                    <!-- Canvas SVG Mockup untuk Poligon & Titik -->
                    <svg viewBox="0 0 200 120" class="w-full h-full max-h-[400px]" id="map-svg-resiliensi">
                        <pattern id="grid-pattern" width="10" height="10" patternUnits="userSpaceOnUse">
                            <path d="M 10 0 L 0 0 0 10" fill="none" stroke="#e2e8f0" stroke-width="0.5" />
                        </pattern>
                        <rect width="100%" height="100%" fill="url(#grid-pattern)" />
                        <!-- Area akan di-generate via JavaScript -->
                    </svg>

                    <!-- Legenda Peta -->
                    <div class="absolute bottom-3 left-3 bg-white/95 p-3 rounded-lg text-xs border border-gray-200 shadow-sm backdrop-blur-sm">
                        <div class="font-bold text-gray-700 mb-2">Legenda Tanaman:</div>
                        <div class="grid grid-cols-2 gap-x-4 gap-y-2">
                            <div class="flex items-center gap-2"><div class="w-3 h-3 bg-[#6F4E37] rounded-full shadow-sm"></div> Kopi</div>
                            <div class="flex items-center gap-2"><div class="w-3 h-3 bg-[#eab308] rounded-full shadow-sm"></div> Vanili</div>
                            <div class="flex items-center gap-2"><div class="w-3 h-3 bg-[#D2691E] rounded-full shadow-sm"></div> Kakao</div>
                            <div class="flex items-center gap-2"><div class="w-3 h-3 bg-[#9ca3af] rounded-full shadow-sm"></div> Kemiri</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Detail Panel -->
            <div class="bg-gray-50 p-0 rounded-xl shadow-sm border border-gray-200 flex flex-col overflow-hidden">
                <div class="bg-white p-5 border-b border-gray-200">
                    <h3 class="text-lg font-bold text-gray-800 flex items-center gap-2">
                        <i data-lucide="file-search" class="w-5 h-5 text-gray-600"></i> Detail Inspeksi Lahan
                    </h3>
                </div>
                <div class="flex-1 p-5 overflow-y-auto" id="map-detail-panel">
                    <!-- Default Empty State -->
                    <div class="h-full flex flex-col items-center justify-center text-gray-400 text-center space-y-3 mt-10">
                        <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-2">
                            <i data-lucide="mouse-pointer-click" class="w-8 h-8 text-gray-300"></i>
                        </div>
                        <p class="text-sm">Pilih poligon lahan atau titik tanaman pada peta untuk memuat data evaluasi kesejahteraan & intervensi.</p>
                    </div>
                </div>
            </div>

        </div>

        <!-- Charts Row: Produktivitas & Distribusi Bibit -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            
            <!-- Chart 1: Produktivitas Lahan -->
            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                <h3 class="text-lg font-bold text-gray-800 mb-1">Tingkat Produktivitas per Ha (Outcome)</h3>
                <p class="text-xs text-gray-500 mb-6">Peningkatan tonase pasca adopsi Agroforestri Iklim Cerdas</p>
                <div class="h-64 w-full relative">
                    <canvas id="chart-productivity"></canvas>
                </div>
            </div>

            <!-- Chart 2: Capaian Distribusi Bibit -->
            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                <h3 class="text-lg font-bold text-gray-800 mb-1">Distribusi Bibit & Pohon Pelindung (Output)</h3>
                <p class="text-xs text-gray-500 mb-6">Akumulasi tanaman yang didistribusikan per komoditas utama</p>
                <div class="h-64 w-full relative">
                    <canvas id="chart-seedlings"></canvas>
                </div>
            </div>

        </div>

        <!-- Tabel Logbook Desa -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="p-6 border-b border-gray-100 flex justify-between items-center">
                <div>
                    <h3 class="text-lg font-bold text-gray-800">Capaian Intervensi per Desa</h3>
                    <p class="text-sm text-gray-500">Rincian agregat tingkat desa untuk komponen resiliensi (MoA/FAO framework).</p>
                </div>
                <button class="text-sm text-green-600 font-medium hover:text-green-700">Lihat Semua Data &rarr;</button>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-gray-50 text-gray-500 text-sm">
                            <th class="p-4 font-semibold border-b border-gray-100">Nama Desa</th>
                            <th class="p-4 font-semibold border-b border-gray-100">Total Petani GAP</th>
                            <th class="p-4 font-semibold border-b border-gray-100">Luas Agroforestri (Ha)</th>
                            <th class="p-4 font-semibold border-b border-gray-100 text-center">Infrastruktur Air</th>
                            <th class="p-4 font-semibold border-b border-gray-100 text-center">Indeks Tanah</th>
                            <th class="p-4 font-semibold border-b border-gray-100">Status Hama</th>
                        </tr>
                    </thead>
                    <tbody class="text-sm text-gray-700">
                        <tr class="hover:bg-gray-50 border-b border-gray-50">
                            <td class="p-4 font-medium text-gray-900">Radabata</td>
                            <td class="p-4">450 Orang</td>
                            <td class="p-4">320 Ha</td>
                            <td class="p-4 text-center">12 Unit</td>
                            <td class="p-4 text-center"><span class="text-green-600 font-bold">Baik (+0.8)</span></td>
                            <td class="p-4"><span class="px-2 py-1 bg-green-100 text-green-700 rounded text-xs font-semibold">Menurun</span></td>
                        </tr>
                        <tr class="hover:bg-gray-50 border-b border-gray-50">
                            <td class="p-4 font-medium text-gray-900">Ubedolumolo</td>
                            <td class="p-4">385 Orang</td>
                            <td class="p-4">215 Ha</td>
                            <td class="p-4 text-center">8 Unit</td>
                            <td class="p-4 text-center"><span class="text-green-600 font-bold">Cukup (+0.4)</span></td>
                            <td class="p-4"><span class="px-2 py-1 bg-amber-100 text-amber-700 rounded text-xs font-semibold">Terkendali</span></td>
                        </tr>
                        <tr class="hover:bg-gray-50 border-b border-gray-50">
                            <td class="p-4 font-medium text-gray-900">Beja</td>
                            <td class="p-4">210 Orang</td>
                            <td class="p-4">150 Ha</td>
                            <td class="p-4 text-center">14 Unit</td>
                            <td class="p-4 text-center"><span class="text-amber-600 font-bold">Sedang (0.0)</span></td>
                            <td class="p-4"><span class="px-2 py-1 bg-red-100 text-red-700 rounded text-xs font-semibold">Waspada</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    
    // 1. Inisialisasi Icons
    if(typeof lucide !== 'undefined') {
        lucide.createIcons();
    }

    // 2. Data Spasial Lahan (Mockup JSON untuk Peta)
    const spatialData = [
        {
            id: 'L-001', owner: 'Yosef Neta', familySize: 5, area: '1.2 Ha', village: 'Radabata',
            polygon: "15,25 75,15 90,85 20,70", fill: "rgba(34, 197, 94, 0.15)", stroke: "#16a34a",
            plants: [
                { id: 'P-01', type: 'Kopi', cx: 35, cy: 35, planted: 'Mei 2021', status: 'Produktif', intervensi: 'Pemupukan Organik (Okt 2023)', panen: '45 kg/musim', color: '#6F4E37' },
                { id: 'P-02', type: 'Vanili', cx: 65, cy: 45, planted: 'Jan 2022', status: 'Berbunga', intervensi: 'Pelatihan Polinasi (Feb 2024)', panen: 'Belum panen', color: '#eab308' },
                { id: 'P-03', type: 'Kopi', cx: 50, cy: 65, planted: 'Mei 2021', status: 'Produktif', intervensi: 'Pemangkasan (Nov 2023)', panen: '40 kg/musim', color: '#6F4E37' },
            ]
        },
        {
            id: 'L-002', owner: 'Maria Goreti', familySize: 3, area: '0.8 Ha', village: 'Ubedolumolo',
            polygon: "110,40 170,15 190,65 125,85", fill: "rgba(59, 130, 246, 0.15)", stroke: "#2563eb",
            plants: [
                { id: 'P-04', type: 'Kemiri', cx: 140, cy: 45, planted: 'Agu 2018', status: 'Produktif', intervensi: 'Pembersihan Gulma', panen: '120 kg/musim', color: '#9ca3af' },
                { id: 'P-05', type: 'Kakao', cx: 165, cy: 55, planted: 'Okt 2020', status: 'Terserang Hama', intervensi: 'Penyemprotan Bio-pestisida (Jan 2024)', panen: '20 kg/musim', color: '#D2691E' },
            ]
        }
    ];

    // 3. Render Peta Interaktif
    function renderMap() {
        const svg = document.getElementById('map-svg-resiliensi');
        let htmlContent = svg.innerHTML; // Keep grid pattern

        spatialData.forEach((lahan, lIdx) => {
            let groupHtml = `<g class="group">`;
            
            // Render Polygon
            groupHtml += `
                <polygon 
                    points="${lahan.polygon}" 
                    fill="${lahan.fill}" 
                    stroke="${lahan.stroke}" 
                    stroke-width="1.5"
                    class="map-polygon"
                    onclick="handleMapClick('lahan', ${lIdx}, null, event)">
                </polygon>`;
            
            // Render Label Pemilik
            const firstCoord = lahan.polygon.split(' ')[0].split(',');
            groupHtml += `<text x="${firstCoord[0]}" y="${firstCoord[1] - 4}" font-size="5" font-weight="bold" fill="#374151" class="pointer-events-none drop-shadow-sm">${lahan.owner}</text>`;
            
            // Render Titik Tanaman
            lahan.plants.forEach((plant, pIdx) => {
                groupHtml += `
                    <circle 
                        cx="${plant.cx}" cy="${plant.cy}" r="2.5" 
                        fill="${plant.color}" stroke="#ffffff" stroke-width="0.8"
                        class="map-point"
                        onclick="handleMapClick('plant', ${lIdx}, ${pIdx}, event)">
                        <title>${plant.type} - ${plant.status}</title>
                    </circle>`;
            });

            groupHtml += `</g>`;
            htmlContent += groupHtml;
        });
        svg.innerHTML = htmlContent;
    }

    // Expose function to global scope for onclick handler
    window.handleMapClick = function(type, lahanIdx, plantIdx, event) {
        event.stopPropagation();
        const panel = document.getElementById('map-detail-panel');
        const lahan = spatialData[lahanIdx];

        if (type === 'lahan') {
            // Tampilan Data Lahan (Keluarga & Daftar Komoditas)
            let komoditasHtml = '';
            lahan.plants.forEach(p => {
                const statusBadge = p.status === 'Produktif' ? 'bg-green-100 text-green-700' : (p.status === 'Berbunga' ? 'bg-blue-100 text-blue-700' : 'bg-red-100 text-red-700');
                komoditasHtml += `
                <div class="flex justify-between items-center py-2 border-b border-gray-50 last:border-0">
                    <div class="flex items-center gap-2">
                        <div class="w-2.5 h-2.5 rounded-full" style="background-color: ${p.color}"></div>
                        <span class="text-sm font-medium text-gray-700">${p.type}</span>
                    </div>
                    <span class="text-xs px-2 py-1 rounded-full ${statusBadge}">${p.status}</span>
                </div>`;
            });

            panel.innerHTML = `
                <div class="fade-in">
                    <div class="flex items-center gap-3 mb-4">
                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-700">
                            <i data-lucide="user" class="w-5 h-5"></i>
                        </div>
                        <div>
                            <h4 class="font-bold text-gray-900">${lahan.owner}</h4>
                            <p class="text-xs text-gray-500 flex items-center gap-1"><i data-lucide="map-pin" class="w-3 h-3"></i> Desa ${lahan.village}</p>
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-2 gap-3 mb-5">
                        <div class="bg-gray-50 p-3 rounded-lg border border-gray-100">
                            <span class="text-xs text-gray-500 block mb-1">Luas Poligon Lahan</span>
                            <span class="font-bold text-gray-800">${lahan.area}</span>
                        </div>
                        <div class="bg-gray-50 p-3 rounded-lg border border-gray-100">
                            <span class="text-xs text-gray-500 block mb-1">Tanggungan Anggota KK</span>
                            <span class="font-bold text-gray-800">${lahan.familySize} Jiwa</span>
                        </div>
                    </div>

                    <h5 class="text-sm font-bold text-gray-800 mb-2 border-b border-gray-100 pb-2">Diversifikasi Tanaman (Polikultur)</h5>
                    <div class="bg-white rounded-lg border border-gray-100 p-2">
                        ${komoditasHtml}
                    </div>
                </div>
            `;
        } else if (type === 'plant') {
            // Tampilan Detail Tanaman (Riwayat Intervensi)
            const plant = lahan.plants[plantIdx];
            const statusBg = plant.status === 'Produktif' ? 'bg-green-50' : (plant.status === 'Berbunga' ? 'bg-blue-50' : 'bg-red-50');
            const statusText = plant.status === 'Produktif' ? 'text-green-700' : (plant.status === 'Berbunga' ? 'text-blue-700' : 'text-red-700');

            panel.innerHTML = `
                <div class="fade-in">
                    <div class="p-4 rounded-lg mb-4 flex justify-between items-start border border-gray-100 ${statusBg}">
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <div class="w-3 h-3 rounded-full" style="background-color: ${plant.color}"></div>
                                <h4 class="font-bold text-gray-900">Tanaman ${plant.type}</h4>
                            </div>
                            <p class="text-xs text-gray-600">Pemilik Lahan: ${lahan.owner}</p>
                        </div>
                        <span class="text-xs font-bold px-2 py-1 bg-white rounded-md shadow-sm ${statusText}">${plant.status}</span>
                    </div>

                    <div class="space-y-4">
                        <div>
                            <p class="text-xs text-gray-500 mb-1 uppercase tracking-wider font-semibold">Profil Tanaman</p>
                            <div class="bg-white p-3 rounded-lg border border-gray-100 flex justify-between items-center">
                                <span class="text-sm text-gray-600">Bulan/Tahun Tanam</span>
                                <span class="text-sm font-bold text-gray-900">${plant.planted}</span>
                            </div>
                        </div>

                        <div>
                            <p class="text-xs text-gray-500 mb-1 uppercase tracking-wider font-semibold">Riwayat Intervensi M&E</p>
                            <div class="bg-white p-3 rounded-lg border border-gray-100 border-l-4 border-l-green-500">
                                <p class="text-sm font-medium text-gray-800">${plant.intervensi}</p>
                                <p class="text-xs text-gray-400 mt-1">Sesuai standar Good Agricultural Practices</p>
                            </div>
                        </div>

                        <div>
                            <p class="text-xs text-gray-500 mb-1 uppercase tracking-wider font-semibold">Kinerja Panen Terakhir</p>
                            <div class="bg-white p-3 rounded-lg border border-gray-100 flex items-center gap-3">
                                <div class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center text-amber-600">
                                    <i data-lucide="scale" class="w-5 h-5"></i>
                                </div>
                                <div>
                                    <span class="block text-xl font-bold text-gray-900">${plant.panen}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        }
        lucide.createIcons(); // re-init ikon untuk konten baru
    };

    renderMap(); // Jalankan render awal

    // 4. Inisialisasi Chart.js
    
    // Chart 1: Tren Produktivitas Lahan (Line Chart)
    const ctxProd = document.getElementById('chart-productivity');
    if (ctxProd) {
        new Chart(ctxProd, {
            type: 'line',
            data: {
                labels: ['2021 (Baseline)', '2022', '2023', '2024 (Target)'],
                datasets: [
                    {
                        label: 'Kopi',
                        data: [0.5, 0.7, 1.1, 1.5],
                        borderColor: '#6F4E37',
                        backgroundColor: '#6F4E37',
                        tension: 0.3,
                        borderWidth: 2
                    },
                    {
                        label: 'Vanili',
                        data: [0.1, 0.15, 0.3, 0.5],
                        borderColor: '#eab308',
                        backgroundColor: '#eab308',
                        tension: 0.3,
                        borderWidth: 2
                    },
                    {
                        label: 'Kakao',
                        data: [0.4, 0.5, 0.8, 1.2],
                        borderColor: '#D2691E',
                        backgroundColor: '#D2691E',
                        tension: 0.3,
                        borderWidth: 2
                    }
                ]
            },
            options: {
                responsive: true, maintainAspectRatio: false,
                interaction: { mode: 'index', intersect: false },
                scales: {
                    y: { title: { display: true, text: 'Ton per Hektar (Ton/Ha)' }, grid: { color: '#f3f4f6' } },
                    x: { grid: { display: false } }
                },
                plugins: {
                    legend: { position: 'bottom', labels: { usePointStyle: true, boxWidth: 8 } }
                }
            }
        });
    }

    // Chart 2: Distribusi Bibit & Pohon (Bar Chart)
    const ctxSeed = document.getElementById('chart-seedlings');
    if (ctxSeed) {
        new Chart(ctxSeed, {
            type: 'bar',
            data: {
                labels: ['Kopi Arabika', 'Vanili Alor', 'Kakao Klon', 'Kemiri Sunan', 'Pohon Pelindung (Lamtoro/Sengon)'],
                datasets: [
                    {
                        label: 'Jumlah Bibit Didistribusikan',
                        data: [15000, 5200, 8000, 7000, 10000],
                        backgroundColor: [
                            'rgba(111, 78, 55, 0.8)',   // Kopi
                            'rgba(234, 179, 8, 0.8)',   // Vanili
                            'rgba(210, 105, 30, 0.8)',  // Kakao
                            'rgba(156, 163, 175, 0.8)', // Kemiri
                            'rgba(34, 197, 94, 0.8)'    // Pelindung (Hijau)
                        ],
                        borderRadius: 4
                    }
                ]
            },
            options: {
                responsive: true, maintainAspectRatio: false,
                scales: {
                    y: { beginAtZero: true, grid: { color: '#f3f4f6' } },
                    x: { grid: { display: false } }
                },
                plugins: {
                    legend: { display: false }, // Disembunyikan karena label sudah jelas di X axis
                    tooltip: { callbacks: { label: function(ctx) { return ctx.raw.toLocaleString('id-ID') + ' Bibit'; } } }
                }
            }
        });
    }

});
</script>
@endpush