@extends('layout.main')

@push('styles')
<style>
    /* Animasi sederhana */
    .fade-in { animation: fadeIn 0.4s ease-in-out; }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
</style>
@endpush

@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">Ringkasan M&E (Theory of Change)</h2>
                <p class="text-gray-500 text-sm mt-1">Capaian Utama Transformasi Bioekonomi Desa Ngada</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">
                    <i data-lucide="download" class="w-4 h-4"></i> Export PDF
                </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">
                    <i data-lucide="calendar" class="w-4 h-4"></i> Filter Tahun
                </button>
            </div>
        </div>

        <!-- 4 Pilar ToC Cards -->
        <!-- Catatan: Anda bisa mengganti class bg-white border dll dengan class '.card' bawaan Vuexy -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            
            <!-- Card 1: Resiliensi -->
            <div class="bg-white p-5 rounded-xl shadow-sm border border-gray-100 relative overflow-hidden group">
                <div class="flex justify-between items-start mb-4">
                    <div>
                        <p class="text-sm font-semibold text-gray-500">1. Resiliensi</p>
                        <h3 class="text-3xl font-bold text-gray-800 mt-1">85%</h3>
                    </div>
                    <div class="p-3 rounded-lg bg-green-100 text-green-600">
                        <i data-lucide="leaf" class="w-6 h-6"></i>
                    </div>
                </div>
                <p class="text-xs text-gray-500 mb-3">Sistem Pertanian Tangguh Iklim</p>
                <div class="w-full bg-gray-100 rounded-full h-1.5">
                    <div class="h-1.5 rounded-full bg-green-500" style="width: 85%"></div>
                </div>
            </div>

            <!-- Card 2: Hilirisasi -->
            <div class="bg-white p-5 rounded-xl shadow-sm border border-gray-100 relative overflow-hidden group">
                <div class="flex justify-between items-start mb-4">
                    <div>
                        <p class="text-sm font-semibold text-gray-500">2. Hilirisasi</p>
                        <h3 class="text-3xl font-bold text-gray-800 mt-1">60%</h3>
                    </div>
                    <div class="p-3 rounded-lg bg-amber-100 text-amber-600">
                        <i data-lucide="factory" class="w-6 h-6"></i>
                    </div>
                </div>
                <p class="text-xs text-gray-500 mb-3">Peningkatan Nilai Tambah</p>
                <div class="w-full bg-gray-100 rounded-full h-1.5">
                    <div class="h-1.5 rounded-full bg-amber-500" style="width: 60%"></div>
                </div>
            </div>

            <!-- Card 3: Koneksi -->
            <div class="bg-white p-5 rounded-xl shadow-sm border border-gray-100 relative overflow-hidden group">
                <div class="flex justify-between items-start mb-4">
                    <div>
                        <p class="text-sm font-semibold text-gray-500">3. Koneksi</p>
                        <h3 class="text-3xl font-bold text-gray-800 mt-1">75%</h3>
                    </div>
                    <div class="p-3 rounded-lg bg-blue-100 text-blue-600">
                        <i data-lucide="network" class="w-6 h-6"></i>
                    </div>
                </div>
                <p class="text-xs text-gray-500 mb-3">Akses Pasar & Kelembagaan</p>
                <div class="w-full bg-gray-100 rounded-full h-1.5">
                    <div class="h-1.5 rounded-full bg-blue-500" style="width: 75%"></div>
                </div>
            </div>

            <!-- Card 4: Akselerasi -->
            <div class="bg-white p-5 rounded-xl shadow-sm border border-gray-100 relative overflow-hidden group">
                <div class="flex justify-between items-start mb-4">
                    <div>
                        <p class="text-sm font-semibold text-gray-500">4. Akselerasi</p>
                        <h3 class="text-3xl font-bold text-gray-800 mt-1">40%</h3>
                    </div>
                    <div class="p-3 rounded-lg bg-purple-100 text-purple-600">
                        <i data-lucide="rocket" class="w-6 h-6"></i>
                    </div>
                </div>
                <p class="text-xs text-gray-500 mb-3">Replikasi & Kebijakan</p>
                <div class="w-full bg-gray-100 rounded-full h-1.5">
                    <div class="h-1.5 rounded-full bg-purple-500" style="width: 40%"></div>
                </div>
            </div>
        </div>

        <!-- Row 2: Charts -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            
            <!-- Chart 1: Dampak Pendapatan (2/3 width) -->
            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 lg:col-span-2">
                <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="trending-up" class="w-5 h-5 text-green-600"></i> Dampak Peningkatan Pendapatan
                    </h3>
                    <span class="text-xs font-medium bg-green-50 text-green-700 px-2 py-1 rounded">2021 - 2024</span>
                </div>
                <p class="text-sm text-gray-500 mb-4">Perbandingan antara skenario tanpa intervensi (baseline) dengan pendapatan aktual setelah intervensi ToC.</p>
                <div class="h-72 w-full relative">
                    <canvas id="chart-impact"></canvas>
                </div>
            </div>

            <!-- Chart 2: Komposisi Komoditas (1/3 width) -->
            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                <h3 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
                    <i data-lucide="sprout" class="w-5 h-5 text-amber-700"></i> Distribusi Lahan
                </h3>
                <p class="text-sm text-gray-500 mb-4">Komposisi agroforestri berdasarkan 4 komoditas utama (Kopi, Vanili, Kakao, Kemiri).</p>
                <div class="h-64 w-full relative flex justify-center items-center">
                    <canvas id="chart-commodity"></canvas>
                </div>
            </div>

        </div>

        <!-- Row 3: Tabel Kinerja Cepat -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="p-6 border-b border-gray-100">
                <h3 class="text-lg font-bold text-gray-800">Status Capaian Output Terkini</h3>
                <p class="text-sm text-gray-500">Ringkasan matriks aktivitas berdasarkan indikator logframe.</p>
            </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">Indikator Output</th>
                            <th class="p-4 font-semibold border-b border-gray-100">Pilar ToC</th>
                            <th class="p-4 font-semibold border-b border-gray-100 text-center">Target</th>
                            <th class="p-4 font-semibold border-b border-gray-100 text-center">Realisasi</th>
                            <th class="p-4 font-semibold border-b border-gray-100 text-center">Status</th>
                        </tr>
                    </thead>
                    <tbody class="text-sm text-gray-700">
                        <tr class="hover:bg-gray-50 border-b border-gray-50 transition-colors">
                            <td class="p-4 flex items-center gap-3">
                                <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600"><i data-lucide="users" class="w-4 h-4"></i></div>
                                Petani dilatih GAP & Agroforestri
                            </td>
                            <td class="p-4"><span class="px-2 py-1 bg-gray-100 rounded text-xs">Resiliensi</span></td>
                            <td class="p-4 text-center font-medium">1,500</td>
                            <td class="p-4 text-center font-bold text-green-600">1,245</td>
                            <td class="p-4 text-center">
                                <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-semibold">On Track</span>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-50 border-b border-gray-50 transition-colors">
                            <td class="p-4 flex items-center gap-3">
                                <div class="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center text-amber-600"><i data-lucide="home" class="w-4 h-4"></i></div>
                                Unit Pengolahan Desa Dibangun
                            </td>
                            <td class="p-4"><span class="px-2 py-1 bg-gray-100 rounded text-xs">Hilirisasi</span></td>
                            <td class="p-4 text-center font-medium">10</td>
                            <td class="p-4 text-center font-bold text-amber-600">8</td>
                            <td class="p-4 text-center">
                                <span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs font-semibold">Tercapai</span>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-50 border-b border-gray-50 transition-colors">
                            <td class="p-4 flex items-center gap-3">
                                <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600"><i data-lucide="handshake" class="w-4 h-4"></i></div>
                                Kontrak Offtaker (MoU)
                            </td>
                            <td class="p-4"><span class="px-2 py-1 bg-gray-100 rounded text-xs">Koneksi</span></td>
                            <td class="p-4 text-center font-medium">10</td>
                            <td class="p-4 text-center font-bold text-blue-600">5</td>
                            <td class="p-4 text-center">
                                <span class="px-2 py-1 bg-amber-100 text-amber-700 rounded-full text-xs font-semibold">Perlu Perhatian</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
 <script>
    document.addEventListener('DOMContentLoaded', function() {
        
        // Inisialisasi Icons (Khusus Mockup, Vuexy mungkin pakai library icon sendiri seperti Tabler/FontAwesome)
        if(typeof lucide !== 'undefined') {
            lucide.createIcons();
        }

        // 1. Chart Dampak Pendapatan (Line/Area Chart)
        const ctxImpact = document.getElementById('chart-impact');
        if(ctxImpact) {
            new Chart(ctxImpact, {
                type: 'line',
                data: {
                    labels: ['2021', '2022', '2023', '2024'],
                    datasets: [
                        { 
                            label: 'Baseline (Tanpa Intervensi)', 
                            data: [12, 12.5, 13, 13.5], 
                            borderColor: '#9ca3af', 
                            backgroundColor: 'transparent', 
                            borderDash: [5, 5],
                            fill: false, 
                            tension: 0.4 
                        },
                        { 
                            label: 'Pendapatan Aktual', 
                            data: [12, 15, 22, 31], 
                            borderColor: '#10b981', 
                            backgroundColor: 'rgba(16, 185, 129, 0.15)', // Light green fill
                            fill: true, 
                            tension: 0.4,
                            pointBackgroundColor: '#10b981',
                            pointBorderWidth: 2,
                            pointRadius: 4
                        }
                    ]
                },
                options: { 
                    maintainAspectRatio: false, 
                    responsive: true,
                    interaction: {
                        mode: 'index',
                        intersect: false,
                    },
                    scales: { 
                        y: { 
                            beginAtZero: false,
                            grid: { color: '#f3f4f6' },
                            ticks: { callback: function(val) { return 'Rp ' + val + 'M'; } } 
                        },
                        x: {
                            grid: { display: false }
                        }
                    }, 
                    plugins: { 
                        tooltip: { 
                            callbacks: { 
                                label: function(ctx) { return ctx.dataset.label + ': Rp ' + ctx.raw + ' Juta'; } 
                            } 
                        },
                        legend: {
                            position: 'bottom',
                            labels: { usePointStyle: true, boxWidth: 8 }
                        }
                    } 
                }
            });
        }

        // 2. Chart Distribusi Komoditas (Doughnut Chart)
        const ctxCommodity = document.getElementById('chart-commodity');
        if(ctxCommodity) {
            new Chart(ctxCommodity, {
                type: 'doughnut',
                data: {
                    labels: ['Kopi', 'Vanili', 'Kakao', 'Kemiri'],
                    datasets: [{ 
                        data: [45, 25, 15, 15], 
                        backgroundColor: ['#6F4E37', '#eab308', '#D2691E', '#9ca3af'], 
                        borderWidth: 2,
                        borderColor: '#ffffff',
                        hoverOffset: 4 
                    }]
                },
                options: { 
                    maintainAspectRatio: false, 
                    responsive: true,
                    cutout: '65%', // Membuat lubang di tengah lebih besar
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: { usePointStyle: true, padding: 20, boxWidth: 8 }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return ' ' + context.label + ': ' + context.raw + '%';
                                }
                            }
                        }
                    }
                }
            });
        }
    });
</script>
@endpush