@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=""/>
@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');

$countSegmentasi = $countSegmentasi->keyBy('segmen');
$seriesSegmentasi = collect($segments)->map(function ($segment) use ($countSegmentasi) {
    return $countSegmentasi[$segment['name']]->total ?? 0;
});
$seriesSegmentasiKomoditas = collect($segments)->map(function ($segment) use ($countSegmentasiByKomoditas, $komoditas) {

    return [
        'name' => $segment['name'],
        'data' => $komoditas->map(function ($item) use ($countSegmentasiByKomoditas, $segment) {

            return optional(
                $countSegmentasiByKomoditas->first(function ($row) use ($item, $segment) {
                    return $row->komoditas_id == $item->id
                        && $row->segmen == $segment['name'];
                })
            )->total ?? 0;

        })->values(),
    ];

})->values();

$segmenDominan = $mapSegmentasi
    ->groupBy('desa_kelurahan_id')
    ->map(function ($items) {
        return $items->sortByDesc('total')->first();
    });

$mapAvgSkorSegmentasi->each(function ($item) use ($segmenDominan) {
    $dominan = $segmenDominan->get($item->desa_kelurahan_id);

    $item->segmen_dominan = $dominan?->segmen;
    $item->jumlah_dominan = $dominan?->total;
});

$segmentasiByDesa = $mapAvgSkorSegmentasi->keyBy('desa_kelurahan_id');
$desaLookup = $desaKelurahan->keyBy('desa_kelurahan_id');

$mapDesaSegmentasi = $segmentasiByDesa->map(function ($segmentasi, $desaId) use ($desaLookup) {
    $desa = $desaLookup->get($desaId);

    if (!$desa) {
        return null;
    }

    $desa->segmentasi = $segmentasi;

    return $desa;
})->filter()->values();
@endphp
<div class="container-xxl flex-grow-1 container-p-y">
    <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">{{ $countPetani }}</h4>
                    </div>
                    <p class="mb-1">Total Petani</p>
                    <p class="mb-0">
                        <span class="text-heading fw-medium me-2">{{ $countKomoditas }}</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">{{ number_format($sumLahan, 2, ',', '.') }} ha</h4>
                    </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">{{ number_format($avgLahan, 2, ',', '.') }}</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">{{ number_format($avgSkor, 2, ',', '.') }}</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">{{ $avgSegmen }}</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">{{ $countDesa }}</h4>
                    </div>
                    <p class="mb-1">Jumlah Desa Sasaran</p>
                    <p class="mb-0">
                        <span class="text-heading fw-medium me-2">{{ $countKecamatan }}</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>
                                
                                @foreach ($segments as $segment)
                                @php
                                    $total = $countSegmentasi->where('segmen', $segment['name'])->sum('total');
                                    $persen = $countPetani ? ($total / $countPetani) * 100 : 0;
                                @endphp

                                <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_format($total) }}</td>
                                    <td class="text-end pe-0">{{ number_format($persen, 2) }}%</td>
                                </tr>
                                @endforeach
                            </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>
                            @foreach ($mapDesaSegmentasi as $desa)
                            @php
                                $style = $segmentStyles[$desa->segmentasi->segmen] ?? null;
                                $styleDominan = $segmentStyles[$desa->segmentasi->segmen_dominan] ?? null;
                            @endphp
                            <tr>
                                <td class="pe-0">{{ $desa->desa_kelurahan }}</td>
                                <td class="text-end pe-0">{{ number_format($desa->segmentasi->jumlah_petani) }}</td>
                                <td class="pe-0">
                                    <span class="badge bg-{{ $style['color'] ?? 'secondary' }}">
                                        {{ $desa->segmentasi->segmen }}
                                    </span>
                                    ({{ number_format($desa->segmentasi->skor, 2, ',', '.') }})
                                </td>
                                <td class="pe-0">
                                    <span class="badge bg-{{ $styleDominan['color'] ?? 'secondary' }}">
                                        {{ $desa->segmentasi->segmen_dominan }}
                                    </span>
                                    ({{ number_format($desa->segmentasi->jumlah_dominan) }} petani)
                                </td>
                            </tr>
                            @endforeach
                        </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>
                </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>
                            @foreach ($daftarPetani as $item)
                            @php
                                $style = $segmentStyles[$item->segmen()] ?? null;
                            @endphp
                            <tr data-desa="{{ $item->desa_kelurahan_id }}">
                                <td class="pe-0">{{ $item->nama }}</td>
                                <td class="pe-0">{{ $item->desaKelurahan?->nama }}</td>
                                <td class="pe-0">{{ $item->komoditas?->nama }}</td>
                                <td class="text-end pe-0">{{ number_format($item->lahans?->sum('luas_lahan'), 2, ',', '.') }}</td>
                                <td class="text-end pe-0">{{ $item->skor ? number_format($item->skor?->skor_kesiapan_adopsi, 2, ',', '.') : '' }}</td>
                                <td class="pe-0">
                                    @if ($item->skor)
                                    <span class="badge bg-{{ $style['color'] ?? 'secondary' }}">
                                        {{ $item->segmen() }}
                                    </span>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </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>
    $('.data-table').DataTable({
            "paging": false,
            "lengthChange": true,
            "searching": false,
            "ordering": false,
            "info": false,
            "autoWidth": false,
            "responsive": false,
            "scrollX": true
        });

    var tableDesa = $('#table-desa').DataTable({
            "paging": true,
            "lengthChange": false,
            "searching": false,
            "ordering": true,
            "info": false,
            "autoWidth": false,
            "responsive": false,
            "scrollX": true,
            "pageLength": 5,
        });

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

    $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
        if (!selectedDesa) return true;

        if (settings.nTable.id === 'table-petani') {
            const row = tablePetani.row(dataIndex).node();
            return $(row).data('desa') == selectedDesa;
        }
        return true;
    });

    // Chart Segmentasi Petani
    var optionsSegmentasiPetani = {
        series: @json($seriesSegmentasi),
        chart: {
            type: 'donut',
            width: 320,
        },
        labels: @json(array_column($segments, 'name')),
        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,
                    },
                },
            },
        ],
    }
    var chartSegmentasiPetani = new ApexCharts(document.querySelector('#chart-segmentasi-petani'), optionsSegmentasiPetani)
    chartSegmentasiPetani.render()

    // Chart Segmentasi Petani By Komoditas
    var optionsSegmentasiPetaniByKomoditas = {
        series: @json($seriesSegmentasiKomoditas),
        colors: @json($colors),
        chart: {
            type: 'bar',
            height: 240,
            stacked: true,
        },
        plotOptions: {
            bar: {
                horizontal: true,
            },
        },
        stroke: {
            width: 1,
            colors: ['#fff'],
        },
        title: {
            show: false,
        },
        xaxis: {
            categories: @json($komoditas->pluck('nama')),
        },
        tooltip: {
            y: {
                formatter: function (val) {
                    return val + ' petani'
                },
            },
        },
        fill: {
            opacity: 1,
        },
        legend: {
            position: 'top',
            horizontalAlign: 'left',
            offsetX: 40,
        },
    }

    // Chart Segmentasi Petani By Komoditas
    var chartSegmentasiPetaniByKomoditas = new ApexCharts(document.querySelector('#chart-segmentasi-petani-komoditas'), optionsSegmentasiPetaniByKomoditas)
    chartSegmentasiPetaniByKomoditas.render()

    // 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;

        var radarDimensi = new ApexCharts($("#chart-dimensi")[0], 
            options = {
                chart: {
                    height: 240,
                    type: 'radar',
                    toolbar: {
                        show: false
                    }
                },
                series: [
                    {
                        name: "Rata-rata Dimensi Kesiapan Adopsi",
                        data: [{{ round($avgDimensi->skor_d2_sistem_praktik_budidaya, 2) }},
                                {{ round($avgDimensi->skor_d4_sosial_ekonomi, 2) }},
                                {{ round($avgDimensi->skor_d6_rantai_nilai_akses_pasar, 2) }}]
                    }
                ],
                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, config.colors.info],
                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, 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();

        var radarKomponen = new ApexCharts($("#chart-komponen")[0], 
            options = {
                chart: {
                    height: 240,
                    type: 'radar',
                    toolbar: {
                        show: false
                    }
                },
                series: [
                    {
                        name: "Rata-rata Komponen Kesiapan Adopsi",
                        data: [
                                {{ round($avgKomponen->skor_komp_1_d4_k3_motivasi_kapasitas_adopsi, 2) }},
                                {{ round($avgKomponen->skor_komp_2_d4_k2_ekonomi_rumah_tangga, 2) }},
                                {{ round($avgKomponen->skor_komp_3_d2_praktik_budidaya_gap, 2) }},
                                {{ round($avgKomponen->skor_komp_4_d4_k4_keterlibatan_kelembagaan, 2) }},
                                {{ round($avgKomponen->skor_komp_5_d4_k5_k6_akses_kebebasan_keuangan, 2) }},
                                {{ round($avgKomponen->skor_komp_6_d6_k1_k4_k5_rantai_nilai_akses_pasar, 2) }}
                            ]
                    }
                ],
                lotOptions: {
                    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, config.colors.info],
                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();

    // 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 desaData = @json($mapDesaSegmentasi);
    const warnaSegmen = {
        @foreach($segments as $segment)
        "{{ $segment['name'] }}": "var(--bs-{{ $segment['color'] }})",
        @endforeach
    };
    const group = L.featureGroup().addTo(map);
    desaData.forEach(desa => {
        if (!desa.path) return;

        const coordinates = JSON.parse(desa.path);

        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}<br>
            Indeks: ${Number(desa.segmentasi.skor).toFixed(2)}<br>
            Segmen: <b>${desa.segmentasi.segmen}</b><br>
            Segmen Dominan: <b>${desa.segmentasi.segmen_dominan}</b> (${desa.segmentasi.jumlah_dominan} petani)
        `);
        polygon.on('click', function () {
            selectedDesa = desa.desa_kelurahan_id;
            tablePetani.draw();
        });

        polygon.addTo(group);
    });

    if (group.getLayers().length > 0) {
        map.fitBounds(group.getBounds(), {
            padding: [20, 20]
        });
    }

</script>
@endpush