@extends('layout.main')
@push('style')
<style>
    .fade-in { animation: fadeIn 0.4s ease-in-out; }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    /* Custom progress bar animation */
    .progress-bar { transition: width 1s ease-in-out; }
</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">Hilirisasi & Nilai Tambah</h2>
                <p class="text-gray-500 text-sm mt-1">Pengembangan Unit Pengolahan, Pasca Panen & Inklusi Perempuan/Pemuda</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="download" class="w-4 h-4"></i> Unduh Laporan
                </button>
                <button class="bg-amber-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-amber-700 flex items-center gap-2 shadow-sm">
                    <i data-lucide="plus" class="w-4 h-4"></i> Input Data Pengolahan
                </button>
            </div>
        </div>

        <!-- 4 KPI Cards (Berdasarkan ToC Output Indicators Hilirisasi) -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            
            <!-- KPI 1: Unit Pengolahan -->
            <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 Pengolahan Desa</p>
                    <div class="p-2 rounded-md bg-amber-50 text-amber-600"><i data-lucide="factory" class="w-5 h-5"></i></div>
                </div>
                <h3 class="text-2xl font-bold text-gray-800">8 <span class="text-base font-normal text-gray-500">Unit</span></h3>
                <p class="text-xs text-gray-400 mt-1">Target ToC: 10 Unit Dibangun</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 progress-bar" style="width: 80%"></div>
                </div>
            </div>

            <!-- KPI 2: Kelompok Perempuan/Pemuda -->
            <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">Kelompok Usaha Aktif</p>
                    <div class="p-2 rounded-md bg-orange-50 text-orange-600"><i data-lucide="users" class="w-5 h-5"></i></div>
                </div>
                <h3 class="text-2xl font-bold text-gray-800">15 <span class="text-base font-normal text-gray-500">Kelompok</span></h3>
                <p class="text-xs text-gray-400 mt-1">Fokus: Perempuan & Pemuda</p>
                <div class="w-full bg-gray-100 rounded-full h-1.5 mt-4">
                    <div class="h-1.5 rounded-full bg-orange-500 progress-bar" style="width: 75%"></div>
                </div>
            </div>

            <!-- KPI 3: Sertifikasi Produk -->
            <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">Sertifikasi Produk</p>
                    <div class="p-2 rounded-md bg-yellow-50 text-yellow-600"><i data-lucide="award" class="w-5 h-5"></i></div>
                </div>
                <h3 class="text-2xl font-bold text-gray-800">12 <span class="text-base font-normal text-gray-500">Izin/Sertifikat</span></h3>
                <p class="text-xs text-gray-400 mt-1">PIRT, Halal, & Organik</p>
                <div class="w-full bg-gray-100 rounded-full h-1.5 mt-4">
                    <div class="h-1.5 rounded-full bg-yellow-500 progress-bar" style="width: 48%"></div>
                </div>
            </div>

            <!-- KPI 4: Volume Pengolahan Lokal -->
            <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">Volume Diolah Lokal</p>
                    <div class="p-2 rounded-md bg-green-50 text-green-600"><i data-lucide="package-check" class="w-5 h-5"></i></div>
                </div>
                <h3 class="text-2xl font-bold text-gray-800">450 <span class="text-base font-normal text-gray-500">Ton</span></h3>
                <p class="text-xs text-gray-400 mt-1">Target ToC: 500 Ton per Tahun</p>
                <div class="w-full bg-gray-100 rounded-full h-1.5 mt-4">
                    <div class="h-1.5 rounded-full bg-green-500 progress-bar" style="width: 90%"></div>
                </div>
            </div>

        </div>

        <!-- Charts Row: Dampak Harga & Tren Volume -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            
            <!-- Chart 1: Perbandingan Harga Jual (Inti Hilirisasi) -->
            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                <div class="flex justify-between items-center mb-1">
                    <h3 class="text-lg font-bold text-gray-800">Perbandingan Harga Jual (Outcome)</h3>
                    <div class="p-1.5 bg-amber-50 text-amber-600 rounded"><i data-lucide="coins" class="w-4 h-4"></i></div>
                </div>
                <p class="text-xs text-gray-500 mb-6">Selisih nilai komoditas mentah (gelondong/basah) vs produk olahan (roasted/kering)</p>
                <div class="h-72 w-full relative">
                    <canvas id="chart-price-comparison"></canvas>
                </div>
            </div>

            <!-- Chart 2: Tren Peningkatan Kapasitas Olahan -->
            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                <div class="flex justify-between items-center mb-1">
                    <h3 class="text-lg font-bold text-gray-800">Tren Volume Pengolahan (Ton)</h3>
                    <div class="p-1.5 bg-blue-50 text-blue-600 rounded"><i data-lucide="bar-chart-2" class="w-4 h-4"></i></div>
                </div>
                <p class="text-xs text-gray-500 mb-6">Akumulasi produk turunan yang dihasilkan oleh Unit Pengolahan Desa per Kuartal</p>
                <div class="h-72 w-full relative">
                    <canvas id="chart-processing-volume"></canvas>
                </div>
            </div>

        </div>

        <!-- Tabel Profil Unit Pengolahan -->
        <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">Profil Unit Pengolahan Desa (UPD)</h3>
                    <p class="text-sm text-gray-500">Daftar kelompok usaha pengolahan dan status sertifikasi produk unggulan.</p>
                </div>
                <button class="text-sm text-amber-600 font-medium hover:text-amber-700">Manajemen UPD &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 Kelompok / UPD</th>
                            <th class="p-4 font-semibold border-b border-gray-100">Lokasi Desa</th>
                            <th class="p-4 font-semibold border-b border-gray-100">Fokus Komoditas</th>
                            <th class="p-4 font-semibold border-b border-gray-100 text-center">Status Sertifikasi</th>
                            <th class="p-4 font-semibold border-b border-gray-100 text-right">Kapasitas/Bulan</th>
                            <th class="p-4 font-semibold border-b border-gray-100 text-center">Inklusi</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 font-medium text-gray-900 flex items-center gap-2">
                                <div class="w-6 h-6 rounded bg-amber-100 text-amber-700 flex items-center justify-center"><i data-lucide="coffee" class="w-3 h-3"></i></div>
                                KWT Kopi Radabata
                            </td>
                            <td class="p-4">Radabata</td>
                            <td class="p-4">Kopi Bubuk & Roasted Bean</td>
                            <td class="p-4 text-center">
                                <div class="flex justify-center gap-1">
                                    <span class="px-2 py-1 bg-green-100 text-green-700 rounded text-[10px] font-bold">PIRT</span>
                                    <span class="px-2 py-1 bg-green-100 text-green-700 rounded text-[10px] font-bold">HALAL</span>
                                </div>
                            </td>
                            <td class="p-4 text-right font-medium">1.5 Ton</td>
                            <td class="p-4 text-center">
                                <span class="px-2 py-1 border border-pink-200 text-pink-700 bg-pink-50 rounded text-xs">Perempuan (100%)</span>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-50 border-b border-gray-50 transition-colors">
                            <td class="p-4 font-medium text-gray-900 flex items-center gap-2">
                                <div class="w-6 h-6 rounded bg-yellow-100 text-yellow-700 flex items-center justify-center"><i data-lucide="sun" class="w-3 h-3"></i></div>
                                Pemuda Tani Vanili
                            </td>
                            <td class="p-4">Ubedolumolo</td>
                            <td class="p-4">Vanili Kering (Curing)</td>
                            <td class="p-4 text-center">
                                <div class="flex justify-center gap-1">
                                    <span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-[10px] font-bold">Proses</span>
                                </div>
                            </td>
                            <td class="p-4 text-right font-medium">0.2 Ton</td>
                            <td class="p-4 text-center">
                                <span class="px-2 py-1 border border-blue-200 text-blue-700 bg-blue-50 rounded text-xs">Pemuda (80%)</span>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-50 border-b border-gray-50 transition-colors">
                            <td class="p-4 font-medium text-gray-900 flex items-center gap-2">
                                <div class="w-6 h-6 rounded bg-orange-100 text-orange-700 flex items-center justify-center"><i data-lucide="cookie" class="w-3 h-3"></i></div>
                                UPD Kakao Beja
                            </td>
                            <td class="p-4">Beja</td>
                            <td class="p-4">Biji Kakao Fermentasi</td>
                            <td class="p-4 text-center">
                                <div class="flex justify-center gap-1">
                                    <span class="px-2 py-1 bg-green-100 text-green-700 rounded text-[10px] font-bold">PIRT</span>
                                </div>
                            </td>
                            <td class="p-4 text-right font-medium">2.0 Ton</td>
                            <td class="p-4 text-center">
                                <span class="px-2 py-1 border border-purple-200 text-purple-700 bg-purple-50 rounded text-xs">Campuran</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. Chart 1: Perbandingan Harga Mentah vs Olahan (Bar Chart)
        const ctxPrice = document.getElementById('chart-price-comparison');
        if (ctxPrice) {
            new Chart(ctxPrice, {
                type: 'bar',
                data: {
                    labels: ['Kopi (kg)', 'Vanili (kg)', 'Kakao (kg)', 'Kemiri (kg)'],
                    datasets: [
                        {
                            label: 'Mentah/Gelondong (Rp)',
                            data: [35000, 200000, 25000, 15000],
                            backgroundColor: '#9ca3af', // Gray
                            borderRadius: { topLeft: 4, topRight: 4, bottomLeft: 0, bottomRight: 0 },
                            barPercentage: 0.6,
                            categoryPercentage: 0.8
                        },
                        {
                            label: 'Produk Olahan (Rp)',
                            data: [120000, 1500000, 80000, 45000],
                            backgroundColor: '#d97706', // Amber-600
                            borderRadius: { topLeft: 4, topRight: 4, bottomLeft: 0, bottomRight: 0 },
                            barPercentage: 0.6,
                            categoryPercentage: 0.8
                        }
                    ]
                },
                options: {
                    responsive: true, 
                    maintainAspectRatio: false,
                    scales: {
                        y: { 
                            beginAtZero: true, 
                            grid: { color: '#f3f4f6' },
                            ticks: {
                                callback: function(value) {
                                    if (value >= 1000000) return 'Rp ' + (value/1000000) + ' Jt';
                                    if (value >= 1000) return 'Rp ' + (value/1000) + ' Rb';
                                    return 'Rp ' + value;
                                }
                            }
                        },
                        x: { grid: { display: false } }
                    },
                    plugins: {
                        legend: { position: 'top', labels: { usePointStyle: true, boxWidth: 8 } },
                        tooltip: { 
                            callbacks: { 
                                label: function(ctx) { 
                                    return ctx.dataset.label + ': Rp ' + ctx.raw.toLocaleString('id-ID'); 
                                } 
                            } 
                        }
                    }
                }
            });
        }

        // 3. Chart 2: Tren Volume Pengolahan (Line/Area Chart)
        const ctxVolume = document.getElementById('chart-processing-volume');
        if (ctxVolume) {
            new Chart(ctxVolume, {
                type: 'line',
                data: {
                    labels: ['Q1 2023', 'Q2 2023', 'Q3 2023', 'Q4 2023', 'Q1 2024', 'Q2 2024'],
                    datasets: [
                        {
                            label: 'Kopi Bubuk/Roasted',
                            data: [12, 15, 18, 25, 30, 45],
                            borderColor: '#6F4E37',
                            backgroundColor: 'rgba(111, 78, 55, 0.1)',
                            fill: true,
                            tension: 0.4,
                            borderWidth: 2
                        },
                        {
                            label: 'Kakao Fermentasi',
                            data: [5, 8, 12, 15, 22, 28],
                            borderColor: '#D2691E',
                            backgroundColor: 'transparent',
                            tension: 0.4,
                            borderWidth: 2
                        }
                    ]
                },
                options: {
                    responsive: true, 
                    maintainAspectRatio: false,
                    interaction: { mode: 'index', intersect: false },
                    scales: {
                        y: { 
                            title: { display: true, text: 'Volume (Ton)' }, 
                            grid: { color: '#f3f4f6' } 
                        },
                        x: { grid: { display: false } }
                    },
                    plugins: {
                        legend: { position: 'bottom', labels: { usePointStyle: true, boxWidth: 8 } }
                    }
                }
            });
        }

    });
</script>
@endpush