@extends('layout.main')

@push('style')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
    crossorigin=""/>
<style>
    .clickable-row {
        cursor: pointer;
    }

    .clickable-row:hover {
        background-color: rgba(0, 0, 0, 0.03);
    }
</style>
@endpush

@section('content')
@php
$segments = [
        [
            'name' => 'Penggerak',
            'range' => '4.0 - 5.0',
            'icon' => 'tabler-crown',
            'color' => 'success',
        ],
        [
            'name' => 'Perintis',
            'range' => '3.0 - 3.9',
            'icon' => 'tabler-flag',
            'color' => 'info',
        ],
        [
            'name' => 'Pemerhati',
            'range' => '2.0 - 2.9',
            'icon' => 'tabler-eye',
            'color' => 'warning',
        ],
        [
            'name' => 'Pemula',
            'range' => '1.0 - 1.9',
            'icon' => 'tabler-seedling',
            'color' => 'danger',
        ],
    ];

$colors = collect($segments)
    ->pluck('color')
    ->map(fn($c) => "var(--bs-{$c})")
    ->values();
$segmentStyles = collect($segments)->keyBy('name');

$provinsi = $desaKelurahan
    ->unique('provinsi_id')
    ->sortBy('provinsi')
    ->values();
@endphp
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="row g-6 py-4">
        <form id="form-filter" method="GET" action="{{ route('dashboard.indeks-petani') }}">
            @csrf
        <div class="col-12">
            <div class="card card-border-shadow-primary">
                <div class="card-body py-3">

                    {{-- FILTER WILAYAH --}}
                    <div class="d-flex align-items-center gap-2 flex-wrap">

                        <div class="d-flex align-items-center me-2">
                            <i class="icon-base ti tabler-map-2 me-2"></i>
                            <span class="fw-medium">Wilayah</span>
                        </div>

                        <div class="filter-item">
                            <select id="filter-provinsi" class="form-select form-select-sm" name="provinsi_id" data-default="{{ $provinsi_id }}">
                                <option value="">Semua Provinsi</option>
                                @foreach($provinsi as $p)
                                    <option value="{{ $p->provinsi_id }}" {{ old('provinsi_id', $provinsi_id) == $p->provinsi_id ? 'selected' : '' }}>
                                        {{ $p->provinsi }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="filter-item">
                            <select id="filter-kabkota" class="form-select form-select-sm" name="kabupatenKota_id" data-default="{{ $kabupatenKota_id }}" disabled>
                                <option value="">Semua Kabupaten/Kota</option>
                            </select>
                        </div>

                        <div class="filter-item">
                            <select id="filter-kecamatan" class="form-select form-select-sm" name="kecamatan_id" data-default="{{ $kecamatan_id }}" disabled>
                                <option value="">Semua Kecamatan</option>
                            </select>
                        </div>

                        <div class="filter-item">
                            <select id="filter-desa" class="form-select form-select-sm" name="desaKelurahan_id" data-default="{{ $desaKelurahan_id }}" disabled>
                                <option value="">Semua Desa/Kelurahan</option>
                            </select>
                        </div>

                    </div>

                    <hr class="my-3">

                    {{-- FILTER DATA --}}
                    <div class="d-flex align-items-center gap-2 flex-wrap">

                        <div class="d-flex align-items-center me-2">
                            <i class="icon-base ti tabler-adjustments-horizontal me-2"></i>
                            <span class="fw-medium">Data</span>
                        </div>

                        <div class="filter-item">
                            <select id="filter-komoditas" class="form-select form-select-sm" name="komoditas_id">
                                <option value="">Semua Komoditas</option>
                                @foreach ($komoditas as $item)
                                    <option value="{{ $item->id }}" {{ old('komoditas_id', $komoditas_id) == $item->id ? 'selected' : '' }}>
                                        {{ $item->nama }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        

                        <button
                            type="submit"
                            id="btn-reset-dashboard-filter"
                            class="btn btn-outline-secondary btn-sm">
                            <i class="icon-base ti tabler-filter me-1"></i>
                            Filter
                        </button>
                        <button
                            type="button"
                            id="btn-reset-dashboard-filter"
                            class="btn btn-outline-secondary btn-sm">
                            <i class="icon-base ti tabler-refresh me-1"></i>
                            Reset
                        </button>

                    </div>

                </div>
            </div>
        </div>
        </form>
    </div>
    <div class="row g-6">
        <div class="col-lg-3 col-sm-6">
            <div class="card card-border-shadow-primary h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2">
                        <div class="avatar me-4">
                            <span class="avatar-initial rounded bg-label-primary">
                                <i class="icon-base ti tabler-user-check icon-28px"></i>
                            </span>
                        </div>
                        <h4 class="mb-0" id="count-petani">0</h4>
                    </div>
                    <p class="mb-1">Total Petani</p>
                    <p class="mb-0">
                        <span class="text-heading fw-medium me-2" id="count-komoditas">0</span>
                        <small class="text-body-secondary">komoditas utama</small>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div class="card card-border-shadow-warning h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2">
                        <div class="avatar me-4">
                            <span class="avatar-initial rounded bg-label-warning">
                                <i class="icon-base ti tabler-trees icon-28px"></i>
                            </span>
                        </div>
                        <h4 class="mb-0" id="sum-lahan">0</h4>
                        <small class="text-body-warning">ha</small>
                    </div>
                    <p class="mb-1">Total Luas Lahan</p>
                    <p class="mb-0">
                        <small class="text-body-warning">rata-rata</small>
                        <span class="text-heading fw-medium" id="avg-lahan"></span>
                        <small class="text-body-warning">ha/petani</small>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div class="card card-border-shadow-info h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2">
                        <div class="avatar me-4">
                            <span class="avatar-initial rounded bg-label-info">
                                <i class="icon-base ti tabler-star icon-28px"></i>
                            </span>
                        </div>
                        <h4 class="mb-0" id="avg-skor"></h4>
                    </div>
                    <p class="mb-1">Rata-rata Indeks Kesiapan Adopsi</p>
                    <p class="mb-0">
                        <small class="text-body-secondary">Segmentasi:</small>
                        <span class="text-heading fw-medium me-2" id="avg-segmen"></span>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div class="card card-border-shadow-success h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2">
                        <div class="avatar me-4">
                            <span class="avatar-initial rounded bg-label-success">
                                <i class="icon-base ti tabler-map-2 icon-28px"></i>
                            </span>
                        </div>
                        <h4 class="mb-0" id="count-desa">0</h4>
                    </div>
                    <p class="mb-1">Jumlah Desa Sasaran</p>
                    <p class="mb-0">
                        <span class="text-heading fw-medium me-2" id="count-kecamatan">0</span>
                        <small class="text-body-secondary">kecamatan sasaran</small>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-6 py-4">
        <div class="col-lg-6 col-sm-12">
            <div class="card card-border-shadow-primary h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div class="card-title mb-0">
                        <h5 class="m-0 me-2">Distribusi Segmentasi Petani</h5>
                        <p class="card-subtitle">untuk semua komoditas</p>
                    </div>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-start align-items-start mb-3">
                        <div id="chart-segmentasi-petani"></div>
                        <table class="table card-table table-border-top-0 table-border-bottom-0 data-table">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th class="text-end pe-0">Petani</th>
                                    <th class="text-end pe-0">%</th>
                                </tr>
                            </thead>
                            <tbody id="table-segmentasi-petani"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-sm-12">
            <div class="card card-border-shadow-secondary h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div class="card-title mb-0">
                        <h5 class="m-0 me-2">Distribusi Segmentasi Petani</h5>
                        <p class="card-subtitle">per komoditas</p>
                    </div>
                </div>
                <div class="card-body">
                    <div id="chart-segmentasi-petani-komoditas"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-6 py-4">
        <div class="col-lg-6 col-sm-12">
            <div class="card card-border-shadow-info h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div class="card-title mb-0">
                        <h5 class="m-0 me-2">Rata-rata Dimensi Kesiapan Adopsi</h5>
                        <p class="card-subtitle">untuk semua komoditas</p>
                    </div>
                </div>
                <div class="card-body">
                    <div id="chart-dimensi"></div>
                    <div class="d-flex flex-wrap gap-3 mt-3 small justify-content-center">
                        <div>
                            <span class="badge bg-label-primary">D1</span> Sistem &amp; Praktik Budidaya
                        </div>
                        <div>
                            <span class="badge bg-label-primary">D2</span> Sosial Ekonomi Rumah Tangga
                        </div>
                        <div>
                            <span class="badge bg-label-primary">D3</span> Rantai Nilai &amp; Akses Pasar
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-sm-12">
            <div class="card card-border-shadow-warning h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div class="card-title mb-0">
                        <h5 class="m-0 me-2">Rata-rata Komponen Kesiapan Adopsi</h5>
                        <p class="card-subtitle">untuk semua komoditas</p>
                    </div>
                </div>
                <div class="card-body">
                    <div id="chart-komponen"></div>
                    <div class="d-flex flex-wrap gap-3 mt-3 small justify-content-center">
                        <div>
                            <span class="badge bg-label-primary">K1</span> Motivasi &amp; Kapasitas Adopsi
                        </div>
                        <div>
                            <span class="badge bg-label-primary">K2</span> Kondisi Ekonomi Rumah Tangga
                        </div>
                        <div>
                            <span class="badge bg-label-primary">K3</span> Praktik Budidaya &amp; GAP
                        </div>
                        <div>
                            <span class="badge bg-label-primary">K4</span> Keterlibatan Kelembagaan
                        </div>
                        <div>
                            <span class="badge bg-label-primary">K5</span> Akses &amp; Kebebasan Keuangan
                        </div>
                        <div>
                            <span class="badge bg-label-primary">K6</span> Rantai Nilai &amp; Akses Pasar
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-6 py-4">
        <div class="col-lg-6 col-sm-12">
            <div class="card card-border-shadow-danger h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div class="card-title mb-0">
                        <h5 class="m-0 me-2">Sebaran Segmentasi Petani</h5>
                        <p class="card-subtitle">berdasarkan sebaran wilayah untuk semua komoditas</p>
                    </div>
                </div>
                <div class="card-body">
                    <div id="map-sebaran-petani" style="height: 380px;"></div>
                    <span class="small text-muted">*klik pada desa untuk menampilkan detail informasi dan menyaring daftar petani</span>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-sm-12">
            <div class="card card-border-shadow-success h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div class="card-title mb-0">
                        <h5 class="m-0 me-2">Distribusi Segmentasi Petani</h5>
                        <p class="card-subtitle">berdasarkan sebaran wilayah untuk semua komoditas</p>
                    </div>
                </div>
                <div class="card-body">
                    <table id="table-desa" class="table card-table table-border-top-0 table-border-bottom-0">
                        <thead>
                            <tr>
                                <th class="pe-0">Desa/Kelurahan</th>
                                <th class="text-end pe-0">Petani</th>
                                <th class="pe-0">Segmen Rata-rata</th>
                                <th class="pe-0">Segmen Dominan</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-6 py-4">
        <div class="col-lg-12 col-sm-12">
            <div class="card card-border-shadow-primary h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div class="card-title mb-0">
                        <h5 class="m-0 me-2">Daftar Petani</h5>
                        <p class="card-subtitle">untuk semua komoditas</p>
                    </div>
                    <button type="button" id="btn-reset-filter" class="btn btn-outline-secondary btn-sm">
                        <i class="fas fa-sync-alt me-1"></i>
                        Reset Filter
                    </button>
                </div>
                <div class="card-body">
                    <table id="table-petani" class="table card-table table-border-top-0 table-border-bottom-0">
                        <thead>
                            <tr>
                                <th class="pe-0">Nama Petani</th>
                                <th class="pe-0">Desa/Kelurahan</th>
                                <th class="pe-0">Komoditas</th>
                                <th class="text-end pe-0">Luas Lahan (ha)</th>
                                <th class="text-end pe-0">Indeks Kesiapan Adopsi</th>
                                <th class="pe-0">Segmen</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection


@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
    crossorigin=""></script>

<script>
    const wilayah = @json($wilayah);

    function fillSelect($select, data, valueField, textField, placeholder) {
        $select.empty().append(
            `<option value="">${placeholder}</option>`
        );
        data.forEach(function (item) {
            $select.append(
                `<option value="${item[valueField]}">${item[textField]}</option>`
            );
        });
        $select.trigger('change.select2');
    }
    $('#filter-provinsi').select2().on('change', function () {
        console.log('change provinsi');
        let provinsiId = $(this).val();

        fillSelect($('#filter-kabkota'), [], 'id', 'nama', 'Semua Kabupaten/Kota');
        fillSelect($('#filter-kecamatan'), [], 'id', 'nama', 'Semua Kecamatan');
        fillSelect($('#filter-desa'), [], 'id', 'nama', 'Semua Desa/Kelurahan');

        if (!provinsiId) {
            $('#filter-kabkota, #filter-kecamatan, #filter-desa')
                .prop('disabled', true);

            return;
        }

        let provinsi = wilayah.find(x => x.id == provinsiId);
        if (!provinsi) {
            return;
        }

        let kabupaten = provinsi.kabupaten || [];
        fillSelect($('#filter-kabkota'), kabupaten, 'id', 'nama', 'Semua Kabupaten/Kota');

        $('#filter-kabkota').prop('disabled', false);
        $('#filter-kecamatan, #filter-desa').prop('disabled', true);

        let defaultKabupaten = $('#filter-kabkota').data('default');
        if (defaultKabupaten) {
            $('#filter-kabkota').val(defaultKabupaten).trigger('change');
        }
    });
    $('#filter-kabkota').select2().on('change', function () {
        let kabupatenId = $(this).val();

        fillSelect($('#filter-kecamatan'), [], 'id', 'nama', 'Semua Kecamatan');
        fillSelect($('#filter-desa'), [], 'id', 'nama', 'Semua Desa/Kelurahan');

        $('#filter-desa').prop('disabled', true);

        if (!kabupatenId) {
            $('#filter-kecamatan').prop('disabled', true);
            return;
        }

        // Cari kabupaten di semua provinsi
        let kabupaten = null;

        wilayah.forEach(function (provinsi) {
            let found = (provinsi.kabupaten || []).find(
                x => x.id == kabupatenId
            );

            if (found) {
                kabupaten = found;
            }
        });

        if (!kabupaten) {
            return;
        }

        let kecamatan = kabupaten.kecamatan || [];
        fillSelect($('#filter-kecamatan'), kecamatan, 'id', 'nama', 'Semua Kecamatan');

        $('#filter-kecamatan').prop('disabled', false);

        let defaultKecamatan = $('#filter-kecamatan').data('default');
        if (defaultKecamatan) {
            console.log('defaultKecamatan', defaultKecamatan);
            $('#filter-kecamatan').val(defaultKecamatan).trigger('change');
        }
    });
    $('#filter-kecamatan').select2().on('change', function () {
        let kecamatanId = $(this).val();

        fillSelect($('#filter-desa'), [], 'id', 'nama', 'Semua Desa/Kelurahan');

        if (!kecamatanId) {
            $('#filter-desa').prop('disabled', true);
            return;
        }

        let kecamatan = null;
        wilayah.forEach(function (provinsi) {
            (provinsi.kabupaten || []).forEach(function (kabupaten) {
                let found = (kabupaten.kecamatan || []).find(
                    x => x.id == kecamatanId
                );
                if (found) {
                    kecamatan = found;
                }
            });
        });

        if (!kecamatan) {
            return;
        }

        let desa = kecamatan.desa || [];
        fillSelect($('#filter-desa'), desa, 'id', 'nama', 'Semua Desa/Kelurahan');

        $('#filter-desa').prop('disabled', false);

        let defaultDesa = $('#filter-desa').data('default');
        console.log('defaultDesa', defaultDesa);
        if (defaultDesa) {
            console.log('default desa', defaultDesa);
            $('#filter-desa').val(defaultDesa).trigger('change');
        }
    });
    $('#filter-desa, #filter-segmen, #filter-komoditas').select2();

    let defaultProvinsi = $('#filter-provinsi').data('default');
    if (defaultProvinsi) {
        $('#filter-provinsi')
            .val(defaultProvinsi)
            .trigger('change');
    }

    $('.data-table').DataTable({
            "paging": false,
            "lengthChange": true,
            "searching": false,
            "ordering": false,
            "info": false,
            "autoWidth": false,
            "responsive": false,
            "scrollX": true
        });
    
    let selectedDesa = null;
    let selectedKomoditas = null;
    let selectedSegmen = null;

    $('#btn-reset-filter').on('click', function () {

        selectedDesa = null;
        selectedKomoditas = null;
        selectedSegmen = null;

        // Reset chart
        chartSegmentasiPetani.resetSeries();
        chartSegmentasiPetaniByKomoditas.resetSeries();

        // Refresh DataTable
        updatePetaniSubtitle();
        tablePetani.draw();
    });

    function updatePetaniSubtitle() {
        let subtitle = 'untuk semua komoditas, semua segmen, dan semua desa/kelurahan';

        if (selectedKomoditas) {
            subtitle = `untuk komoditas ${selectedKomoditas}`;
        }

        if (selectedSegmen) {
            subtitle += ` dengan segmen ${selectedSegmen}`;
        }

        if (selectedDesa) {
            subtitle += ` pada desa/kel. ${selectedDesa}`;
        }

        $('.card-subtitle').text(subtitle);
    }


    // Chart Dimensi dan Komponen Kesiapan Adopsi
    let cardColor, labelColor, fontFamily, headingColor, shadeColor, legendColor, borderColor, barBgColor;
    if (isDarkStyle) {
        barBgColor = '#3d4157';
        shadeColor = 'dark';
    } else {
        barBgColor = '#efeef0';
        shadeColor = '';
    }
    cardColor = config.colors.cardColor;
    labelColor = config.colors.textMuted;
    legendColor = config.colors.bodyColor;
    borderColor = config.colors.borderColor;
    headingColor = config.colors.headingColor;
</script>

<script>

    $(document).ready(function () {
        $.ajax({
            url: '{{ route('dashboard.indeks-petani.summary') }}',
            type: 'GET',
            data: $('#form-filter').serialize(),
            dataType: 'json',
            success: function (data) {
                $('#count-petani').text(data.petani);    
                $('#count-komoditas').text(data.komoditas);
                $('#sum-lahan').text(new Intl.NumberFormat('id-ID', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(data.sum_lahan));
                $('#avg-lahan').text(new Intl.NumberFormat('id-ID', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(data.avg_lahan));
                $('#count-desa').text(data.desa);
                $('#count-kecamatan').text(data.kecamatan);
                $('#avg-skor').text(new Intl.NumberFormat('id-ID', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(data.skor));
                $('#avg-segmen').text(data.segmen);
            }
        });
    })
</script>
<script>
    $(document).ready(function () {
        const segments = @json($segments);

        // Chart Segmentasi Petani
        var chartSegmentasiPetani;

        function loadChartSegmentasiPetani() {
            $.ajax({
                url: '{{ route("dashboard.indeks-petani.segmen") }}',
                type: 'GET',
                data: $('#form-filter').serialize(),
                dataType: 'json',
                success: function(response) {
                    if (chartSegmentasiPetani) {
                        chartSegmentasiPetani.destroy();
                    }
                    var optionsSegmentasiPetani = {
                        series: response.series,
                        chart: {
                            type: 'donut',
                            width: 320,
                            events: {
                                dataPointSelection: function(event, chartContext, config) {

                                    const segmen =
                                        chartContext.w.config.labels[
                                            config.dataPointIndex
                                        ];

                                    console.log('Segmen dipilih:', segmen);

                                    // Set filter segmen
                                    selectedSegmen = segmen;

                                    // Refresh DataTable
                                    updatePetaniSubtitle();
                                    tablePetani.draw();
                                }
                            }
                        },
                        labels: @json(collect($segments)->pluck('name')->values()),
                        colors: @json($colors),
                        plotOptions: {
                            pie: {
                                borderRadius: 12,
                                spacing: 5,
                                donut: {
                                    size: '68%',
                                    labels: {
                                        show: true,
                                        total: {
                                            show: true,
                                            label: 'Petani Tersegmentasi',
                                        },
                                    },
                                },
                            },
                        },
                        stroke: {
                            width: 0,
                        },
                        dataLabels: {
                            enabled: false,
                        },
                        legend: {
                            show: false,
                        },
                        responsive: [
                            {
                                breakpoint: 360,
                                options: {
                                    chart: {
                                        width: 240,
                                    },
                                },
                            },
                        ],
                    };

                    chartSegmentasiPetani = new ApexCharts(
                        document.querySelector('#chart-segmentasi-petani'),
                        optionsSegmentasiPetani
                    );

                    chartSegmentasiPetani.render();

                    let html = '';

                    segments.forEach(function(segment, index) {

                        const total = response.series[index] ?? 0;
                        const persen = response.persentase[index] ?? 0;

                        html += `
                            <tr>
                                <td>
                                    <div class="d-flex justify-content-start align-items-center">
                                        <div class="me-2">
                                            <i class="icon-base ti ${segment.icon} icon-lg text-${segment.color}"></i>
                                        </div>

                                        <span class="text-${segment.color}">
                                            ${segment.name}
                                        </span>
                                    </div>
                                </td>

                                <td class="text-end pe-0">
                                    ${Number(total).toLocaleString('id-ID')}
                                </td>

                                <td class="text-end pe-0">
                                    ${Number(persen).toLocaleString('id-ID', {
                                        minimumFractionDigits: 2,
                                        maximumFractionDigits: 2
                                    })}%
                                </td>
                            </tr>
                        `;
                    });

                    $('#table-segmentasi-petani').html(html);
                },

                error: function(xhr) {
                    console.error('Gagal mengambil data segmentasi:', xhr);
                }
            });
        }

        loadChartSegmentasiPetani();
    })
</script>
<script>
    $(document).ready(function () {
        var optionsSegmentasiPetaniByKomoditas = {
            series: [],
            colors: @json($colors),

            chart: {
                type: 'bar',
                height: 240,
                stacked: true,

                events: {
                    dataPointSelection: function(event, chartContext, config) {
                        const komoditas =
                            config.w.config.xaxis.categories[config.dataPointIndex];

                        console.log('Komoditas dipilih:', komoditas);

                        selectedKomoditas = komoditas;

                        updatePetaniSubtitle();
                        tablePetani.draw();
                    }
                }
            },

            plotOptions: {
                bar: {
                    horizontal: true,
                },
            },

            stroke: {
                width: 1,
                colors: ['#fff'],
            },

            title: {
                show: false,
            },

            xaxis: {
                categories: [],
            },

            tooltip: {
                y: {
                    formatter: function(val) {
                        return val + ' petani';
                    },
                },
            },

            fill: {
                opacity: 1,
            },

            legend: {
                position: 'top',
                horizontalAlign: 'left',
                offsetX: 40,
            },
        };

        var chartSegmentasiPetaniByKomoditas =
            new ApexCharts(
                document.querySelector('#chart-segmentasi-petani-komoditas'),
                optionsSegmentasiPetaniByKomoditas
            );

        chartSegmentasiPetaniByKomoditas.render();

        function loadChartSegmentasiKomoditas() {

            $.ajax({
                url: "{{ route('dashboard.indeks-petani.segmen.komoditas') }}",
                type: "GET",
                data: $('#form-filter').serialize(),
                dataType: "json",
                beforeSend: function() {
                    // optional
                    // tampilkan loading
                },
                success: function(response) {

                    chartSegmentasiPetaniByKomoditas.updateOptions({
                        xaxis: {
                            categories: response.categories
                        }
                    });

                    chartSegmentasiPetaniByKomoditas.updateSeries(
                        response.series
                    );
                },
                error: function(xhr) {
                    console.error(
                        'Gagal mengambil data chart:',
                        xhr.responseText
                    );
                }
            });
        }

        loadChartSegmentasiKomoditas();
    })
</script>
<script>
    $(document).ready(function () {
        var radarDimensi = new ApexCharts($("#chart-dimensi")[0], {
            chart: {
                height: 240,
                type: 'radar',
                toolbar: {
                    show: false
                }
            },
            series: [{
                name: "Rata-rata Dimensi Kesiapan Adopsi",
                data: []
            }],
            labels: [
                'Sistem & Praktik Budidaya',
                'Sosial Ekonomi Rumah Tangga',
                'Rantai Nilai & Akses Pasar'
            ],
            plotOptions: {
                radar: {
                    polygons: {
                        strokeColors: borderColor,
                        connectorColors: borderColor
                    }
                }
            },
            stroke: {
                width: 2
            },
            legend: {
                show: true,
                fontSize: '13px',
                position: 'bottom',
                labels: {
                    colors: legendColor,
                    useSeriesColors: false
                },
                markers: {
                    height: 12,
                    width: 12
                },
                itemMargin: {
                    horizontal: 10
                },
                onItemHover: {
                    highlightDataSeries: false
                }
            },
            colors: [config.colors.primary],
            fill: {
                opacity: 0.85
            },
            markers: {
                show: true,
                width: 1
            },
            grid: {
                show: false,
                padding: {
                    top: -25,
                    bottom: -5
                }
            },
            xaxis: {
                categories: ['D1', 'D2', 'D3'],
                labels: {
                    show: true,
                    style: {
                        colors: [labelColor, labelColor, labelColor],
                        fontSize: '13px',
                        fontFamily: fontFamily
                    }
                }
            },
            yaxis: {
                show: true,
                min: 0,
                max: 5,
                tickAmount: 5
            },
            responsive: [{
                breakpoint: 769,
                options: {
                    chart: {
                        height: 400
                    }
                }
            }]
        });

        radarDimensi.render();

        function loadChartRadarDimensi() {

            $.ajax({
                url: "{{ route('dashboard.indeks-petani.dimensi') }}",
                type: "GET",
                data: $('#form-filter').serialize(),
                dataType: "json",
                beforeSend: function() {
                    // optional
                    // tampilkan loading
                },
                success: function(response) {
                    radarDimensi.updateSeries([{
                        name: "Rata-rata Dimensi Kesiapan Adopsi",
                        data: response.radarDimensi
                    }]);
                },
                error: function(xhr) {
                    console.error(
                        'Gagal mengambil data chart:',
                        xhr.responseText
                    );
                }
            });
        }

        loadChartRadarDimensi();
    })
</script>
<script>
    $(document).ready(function () {
        var radarKomponen = new ApexCharts($("#chart-komponen")[0], {
            chart: {
                height: 240,
                type: 'radar',
                toolbar: {
                    show: false
                }
            },
            series: [{
                name: "Rata-rata Komponen Kesiapan Adopsi",
                data: []
            }],
            labels: [
                'Sistem & Praktik Budidaya',
                'Sosial Ekonomi Rumah Tangga',
                'Rantai Nilai & Akses Pasar'
            ],
            plotOptions: {
                radar: {
                    polygons: {
                        strokeColors: borderColor,
                        connectorColors: borderColor
                    }
                }
            },
            stroke: {
                width: 2
            },
            legend: {
                show: true,
                fontSize: '13px',
                position: 'bottom',
                labels: {
                    colors: legendColor,
                    useSeriesColors: false
                },
                markers: {
                    height: 12,
                    width: 12
                },
                itemMargin: {
                    horizontal: 10
                },
                onItemHover: {
                    highlightDataSeries: false
                }
            },
            colors: [config.colors.primary],
            fill: {
                opacity: 0.85
            },
            markers: {
                show: true,
                width: 1
            },
            grid: {
                show: false,
                padding: {
                    top: -25,
                    bottom: -5
                }
            },
            xaxis: {
                categories: ['K1', 'K2', 'K3', 'K4', 'K5', 'K6'],
                labels: {
                    show: true,
                    style: {
                        colors: [labelColor, labelColor, labelColor, labelColor, labelColor, labelColor],
                        fontSize: '13px',
                        fontFamily: fontFamily
                    }
                }
            },
            yaxis: {
                show: true,
                min: 0,
                max: 5,
                tickAmount: 5
            },
            responsive: [{
                breakpoint: 769,
                options: {
                    chart: {
                        height: 400
                    }
                }
            }]
        });

        radarKomponen.render();

        function loadChartRadarKomponen() {

            $.ajax({
                url: "{{ route('dashboard.indeks-petani.komponen') }}",
                type: "GET",
                data: $('#form-filter').serialize(),
                dataType: "json",
                beforeSend: function() {
                    // optional
                    // tampilkan loading
                },
                success: function(response) {
                    radarKomponen.updateSeries([{
                        name: "Rata-rata Komponen Kesiapan Adopsi",
                        data: response.radarKomponen
                    }]);
                },
                error: function(xhr) {
                    console.error(
                        'Gagal mengambil data chart:',
                        xhr.responseText
                    );
                }
            });
        }

        loadChartRadarKomponen();
    })
</script>
<script>
    $(document).ready(function () {
        // Map Sebaran Petani
        var map = L.map('map-sebaran-petani').setView([-0.789, 113.921], 5);

        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }).addTo(map);

        const warnaSegmen = {
            @foreach($segments as $segment)
                "{{ $segment['name'] }}": "var(--bs-{{ $segment['color'] }})",
            @endforeach
        };

        let selectedDesa = null;

        const group = L.featureGroup().addTo(map);

        function loadMapDesa() {

            $.ajax({
                url: "{{ route('dashboard.indeks-petani.map') }}",
                type: "GET",
                data: $('#form-filter').serialize(),
                beforeSend: function () {
                    // Optional
                    // $('#map-loading').show();
                },
                success: function (desaData) {
                    group.clearLayers();

                    if (!desaData || desaData.length === 0) {
                        return;
                    }
                    desaData.forEach(function (desa) {
                        if (!desa.path) {
                            return;
                        }
                        let coordinates;

                        try {
                            coordinates = typeof desa.path === 'string'
                                ? JSON.parse(desa.path)
                                : desa.path;
                        } catch (error) {
                            console.error('Path polygon tidak valid:', desa);
                            return;
                        }

                        const polygon = L.polygon(coordinates, {
                            color: '#666',
                            weight: 1,
                            fillColor:
                                warnaSegmen[desa.segmentasi?.segmen] || '#ccc',
                            fillOpacity: 0.7
                        });

                        polygon.desaId = desa.desa_kelurahan_id;

                        polygon.bindPopup(`
                            <b>Desa/Kel.: ${desa.desa_kelurahan ?? '-'}</b><br>
                            Kec.: ${desa.kecamatan ?? '-'}<br>
                            Kab.: ${desa.kabupaten ?? '-'}<br>
                            <hr>
                            Petani: ${desa.segmentasi?.jumlah_petani ?? 0}<br>
                            Indeks:
                            ${Number(desa.segmentasi?.skor ?? 0).toFixed(2)}
                            <br>
                            Segmen:
                            <b>${desa.segmentasi?.segmen ?? '-'}</b>
                            <br>
                            Segmen Dominan:
                            <b>${desa.segmentasi?.segmen_dominan ?? '-'}</b>
                            (${desa.segmentasi?.jumlah_dominan ?? 0} petani)
                        `);

                        polygon.addTo(group);
                    });

                    if (group.getLayers().length > 0) {
                        map.fitBounds(group.getBounds(), {
                            padding: [20, 20]
                        });
                    }
                },
                error: function (xhr) {
                    console.error(
                        'Gagal mengambil data map:',
                        xhr.responseText
                    );
                },
                complete: function () {
                    // Optional
                    // $('#map-loading').hide();
                }
            });
        }

        loadMapDesa();
    })
</script>
<script>
    $(document).ready(function () {
        var tableDesa = $('#table-desa').DataTable({
            "paging": true,
            "pageLength": 5,
            "lengthChange": false,
            "searching": false,
            "ordering": true,
            "info": false,
            "autoWidth": false,
            "responsive": false,
            "scrollX": true,
            "serverSide": false,
            "processing": true,
            "ajax": {
                "url": "{{ route('dashboard.indeks-petani.desa') }}",
                "type": "GET",
                "data": function (data) {
                    data = $('#form-filter').serialize();
                    return data;
                },
                dataSrc: function(json) {
                    return json;
                },
                "dataType": "json"
            },
            columns: [
                {
                    data: 'desa'
                },
                {
                    data: 'jumlah_petani',
                    className: 'text-end',
                    render: function(data) {
                        return Number(data).toLocaleString('id-ID');
                    }
                },
                {
                    data: null,
                    render: function(data) {
                        return `
                            <span class="badge bg-${data.color ?? 'secondary'}">
                                ${data.segmen ?? '-'}
                            </span>
                            (${Number(data.skor).toLocaleString('id-ID', {
                                minimumFractionDigits: 2,
                                maximumFractionDigits: 2
                            })})
                        `;
                    }
                },
                {
                    data: null,
                    render: function(data) {
                        return `
                            <span class="badge bg-${data.color_dominan ?? 'secondary'}">
                                ${data.segmen_dominan ?? '-'}
                            </span>
                            (${Number(data.jumlah_dominan ?? 0).toLocaleString('id-ID')} petani)
                        `;
                    }
                }
            ]
        });
    })
</script>
<script>
    $(document).ready(function () {
        var tablePetani = $('#table-petani').DataTable({
            "paging": true,
            "pageLength": 10,
            "lengthChange": false,
            "searching": true,
            "ordering": true,
            "info": true,
            "autoWidth": false,
            "responsive": false,
            "scrollX": true,
            "serverSide": false,
            "processing": true,
            "ajax": {
                "url": "{{ route('dashboard.indeks-petani.data') }}",
                "type": "GET",
                "data": function (data) {
                    data = $('#form-filter').serialize();
                    return data;
                },
                dataSrc: function(json) {
                    return json;
                },
                "dataType": "json"
            },
            columns: [
                {
                    data: 'nama',
                    name: 'nama',
                    className: 'pe-0'
                },
                {
                    data: 'desa',
                    name: 'desa',
                    className: 'pe-0'
                },
                {
                    data: 'komoditas',
                    name: 'komoditas',
                    className: 'pe-0'
                },
                {
                    data: 'luas_lahan',
                    name: 'luas_lahan',
                    className: 'text-end pe-0',
                    render: function(data) {
                        return Number(data ?? 0).toLocaleString('id-ID', {
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2
                        });
                    }
                },
                {
                    data: 'skor',
                    name: 'skor',
                    className: 'text-end pe-0',
                    render: function(data) {
                        if (data === null || data === '') {
                            return '';
                        }

                        return Number(data).toLocaleString('id-ID', {
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2
                        });
                    }
                },
                {
                    data: null,
                    name: 'segmen',
                    className: 'pe-0',
                    orderable: false,
                    render: function(data) {

                        if (!data.skor || !data.segmen) {
                            return '';
                        }

                        return `
                            <span class="badge bg-${data.color ?? 'secondary'}">
                                ${data.segmen}
                            </span>
                        `;
                    }
                }
            ],
            order: [
                [0, 'asc']
            ],
            createdRow: function(row, data) {
                $(row)
                    .addClass('clickable-row')
                    .attr('data-desa', data.desa_kelurahan_id)
                    .attr('data-komoditas', data.komoditas)
                    .attr('data-segmen', data.segmen ?? '')
                    .attr('data-url', data.url);
            }
        });

        $('#table-petani tbody').on('click', 'tr.clickable-row', function() {
            const url = $(this).data('url');

            if (url) {
                window.location.href = url;
            }
        });
    })
</script>
@endpush