@extends('layout.main')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/vendor/libs/apex-charts/apex-charts.css') }}" />
<style>
    #ageGroupChart .apexcharts-tooltip,
    #educationChart .apexcharts-tooltip,
    #landAreaChart .apexcharts-tooltip,
    #incomeChart .apexcharts-tooltip {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        overflow: visible !important;
    }
@endpush

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="row g-6">
    <!-- Card Border Shadow -->
    <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-truck icon-28px"></i
                ></span>
            </div>
            <h4 class="mb-0">{{ $data['total_petani'] }}</h4>
            </div>
            <p class="mb-1">Total Petani</p>
            <p class="mb-0">
            <!-- <span class="text-heading fw-medium me-2">+18.2%</span> -->
            <small class="text-body-secondary">Terdata</small>
            </p>
        </div>
        </div>
    </div>
    <div class="col-lg-2 col-sm-6">
        <div class="card card-border-shadow-secondary 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-secondary"
                ><i class="icon-base ti tabler-alert-triangle icon-28px"></i
                ></span>
            </div>
            <h4 class="mb-0">{{ $data['petani_lakilaki'] }}</h4>
            </div>
            <p class="mb-1">Petani Laki-laki</p>
            <p class="mb-0">
            <span class="text-heading fw-medium me-2">{{ $data['total_petani'] > 0 ? round(($data['petani_lakilaki'] / $data['total_petani']) * 100) : 0 }}%</span>
            <small class="text-body-secondary">Dari Total Petani</small>
            </p>
        </div>
        </div>
    </div>
    <div class="col-lg-2 col-sm-6">
        <div class="card card-border-shadow-danger 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-danger"
                ><i class="icon-base ti tabler-git-fork icon-28px"></i
                ></span>
            </div>
            <h4 class="mb-0">{{ $data['petani_perempuan'] }}</h4>
            </div>
            <p class="mb-1">Petani Perempuan</p>
            <p class="mb-0">
            <span class="text-heading fw-medium me-2">{{ $data['total_petani'] > 0 ? round(($data['petani_perempuan'] / $data['total_petani']) * 100) : 0 }}%</span>
            <small class="text-body-secondary">Dari Total Petani</small>
            </p>
        </div>
        </div>
    </div>
    <div class="col-lg-2 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-clock icon-28px"></i
                ></span>
            </div>
            <h4 class="mb-0">{{ $data['total_komoditas'] }}</h4>
            </div>
            <p class="mb-1">Total Komoditas</p>
            <p class="mb-0">
            <!-- <span class="text-heading fw-medium me-2">-2.5%</span> -->
            <small class="text-body-secondary">Dari Seluruh Petani</small>
            </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-clock icon-28px"></i
                ></span>
            </div>
            <h4 class="mb-0">{{ $data['total_luas_lahan'] }}</h4>
            </div>
            <p class="mb-1">Total Luas Lahan</p>
            <p class="mb-0">
            <span class="text-heading fw-medium me-2">{{ $data['ratarata_luas_lahan'] ? number_format($data['ratarata_luas_lahan'], 2) : 0 }}</span>
            <small class="text-body-secondary">Rata-rata per Lahan</small>
            </p>
        </div>
        </div>
    </div>
    <!--/ Card Border Shadow -->
    <!-- Vehicles overview -->
    <div class="col-xxl-4 col-lg-6">
        <div class="card h-100">
            <div class="card-header d-flex align-items-center justify-content-between">
                <div class="card-title mb-0">
                    <h5 class="m-0 me-2">Gender</h5>
                    <small class="text-body-secondary">Distribusi petani berdasarkan gender</small>
                </div>
            </div>
            <div class="card-body">
                <div id="genderChart"></div>
            </div>
        </div>
    </div>
    <div class="col-xxl-4 col-lg-6">
        <div class="card h-100">
            <div class="card-header">
                <div class="card-title mb-0">
                    <h5 class="m-0 me-2">Kelompok Umur</h5>
                    <small class="text-body-secondary">
                        Distribusi petani berdasarkan kelompok umur
                    </small>
                </div>
            </div>

            <div class="card-body">
                <div id="ageGroupChart"></div>
            </div>
        </div>
    </div>
    <div class="col-xxl-4 col-lg-6">
        <div class="card h-100">
            <div class="card-header">
                <div class="card-title mb-0">
                    <h5 class="m-0 me-2">Tingkat Pendidikan</h5>

                    <small class="text-body-secondary">
                        Distribusi petani berdasarkan pendidikan terakhir
                    </small>
                </div>
            </div>

            <div class="card-body">
                <div id="educationChart"></div>
            </div>
        </div>
    </div>
    <div class="col-xxl-4 col-lg-6">
        <div class="card h-100">
            <div class="card-header d-flex align-items-center justify-content-between">
                <div class="card-title mb-0">
                    <h5 class="m-0 me-2">
                        Komoditas Utama yang Dikelola
                    </h5>

                    <small class="text-body-secondary">
                        Jumlah petani berdasarkan komoditas utama
                    </small>
                </div>
            </div>

            <div class="card-body">
                <div id="commodityChart"></div>
            </div>
        </div>
    </div>
    <div class="col-xxl-4 col-lg-6">
        <div class="card h-100">
            <div class="card-header">
                <div class="card-title mb-0">
                    <h5 class="m-0 me-2">
                        Luas Lahan yang Dimiliki
                    </h5>

                    <small class="text-body-secondary">
                        Distribusi petani berdasarkan luas lahan garapan
                    </small>
                </div>
            </div>

            <div class="card-body">
                <div id="landAreaChart"></div>
            </div>
        </div>
    </div>
    <div class="col-xxl-4 col-lg-6">
        <div class="card h-100">
            <div class="card-header">
                <div class="card-title mb-0">
                    <h5 class="m-0 me-2">
                        Rentang Penghasilan per Bulan
                    </h5>

                    <small class="text-body-secondary">
                        Distribusi petani berdasarkan penghasilan dari usaha tani per musim
                    </small>
                </div>
            </div>

            <div class="card-body">
                <div id="incomeChart"></div>
            </div>
        </div>
    </div>
    <div class="col-xxl-12 col-lg-6">
        <div class="card">
            <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-3">
                <div>
                    <div class="d-flex align-items-center gap-2">
                        <h5 class="card-title mb-0">Daftar Petani</h5>
                        <span class="badge bg-label-primary">{{ $daftarPetani->total() }} petani</span>
                    </div>
                    <small class="text-body-secondary">Menampilkan data petani sesuai data yang tersedia</small>
                </div>

                <div class="d-flex align-items-center gap-2">
                    <div class="input-group input-group-merge" style="width: 220px;">
                        <span class="input-group-text"><i class="icon-base ti tabler-search"></i></span>
                        <input type="text" class="form-control" placeholder="Cari petani...">
                    </div>

                    <button
                        type="button"
                        class="btn btn-outline-secondary"
                    >
                        <i class="icon-base ti tabler-download me-1"></i>
                        Export
                    </button>

                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-hover">

                    <thead>
                        <tr>
                            <th>ID Petani</th>
                            <th>Nama Petani</th>
                            <th>Gender</th>
                            <th>Umur</th>
                            <th>Komoditas</th>
                            <th>Luas Lahan</th>
                            <th>Pendidikan</th>
                        </tr>
                    </thead>

                    <tbody>

                        @forelse ($daftarPetani as $petani)

                            @php
                                $umur = $petani->tanggal_lahir
                                    ? \Carbon\Carbon::parse($petani->tanggal_lahir)->age
                                    : null;

                                $totalLuas = $petani->lahan
                                    ? $petani->lahan->sum('luas_lahan')
                                    : 0;
                            @endphp

                            <tr>
                                <td>
                                    <span class="text-heading fw-medium">
                                        {{ $petani->kode ?? $petani->id }}
                                    </span>
                                </td>

                                <td>
                                    <span class="text-heading fw-medium">
                                        {{ $petani->nama ?? '-' }}
                                    </span>
                                </td>

                                <td>
                                    @if ($petani->jenis_kelamin == 1)
                                        <span class="badge bg-label-primary">
                                            Laki-laki
                                        </span>
                                    @else
                                        <span class="badge bg-label-danger">
                                            Perempuan
                                        </span>
                                    @endif
                                </td>

                                <td>
                                    {{ $umur ? $umur . ' tahun' : '-' }}
                                </td>

                                <td>
                                    {{ $petani->komoditas?->nama ?? '-' }}
                                </td>

                                <td>
                                    {{ $petani->total_luas_lahan
                                        ? number_format($petani->total_luas_lahan, 2, ',', '.') . ' ha'
                                        : '-'
                                    }}
                                </td>

                                <td>
                                    @php
                                        $pendidikanRaw = $petani->getRawOriginal('pendidikan_terakhir');

                                        $pendidikan = match ($pendidikanRaw) {
                                            '01_tidak_sekolah' => 'Tidak Sekolah',
                                            '02_sd' => 'SD',
                                            '03_smp' => 'SMP',
                                            '04_sma' => 'SMA',
                                            '05_diploma' => 'Diploma',
                                            '06_sarjana' => 'Sarjana',
                                            '07_magister' => 'Magister',
                                            default => '-',
                                        };
                                    @endphp

                                    {{ $pendidikan }}
                                </td>

                            </tr>

                        @empty

                            <tr>
                                <td
                                    colspan="7"
                                    class="text-center py-5 text-body-secondary"
                                >
                                    Belum ada data petani.
                                </td>
                            </tr>

                        @endforelse

                    </tbody>
                </table>
            </div>

            <div class="card-footer d-flex flex-wrap justify-content-between align-items-center gap-3">

            <small class="text-body-secondary">
                Menampilkan
                {{ $daftarPetani->firstItem() ?? 0 }}
                -
                {{ $daftarPetani->lastItem() ?? 0 }}
                dari
                {{ $daftarPetani->total() }}
                petani
            </small>

            <div>
                {{ $daftarPetani->onEachSide(1)->links('pagination::bootstrap-5') }}
            </div>

        </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('assets/vendor/libs/apex-charts/apexcharts.js') }}"></script>
<script>
'use strict';

document.addEventListener('DOMContentLoaded', function () {
    const genderChartEl = document.querySelector('#genderChart');

    if (!genderChartEl) {
        return;
    }

    const headingColor = config.colors.headingColor;
    const legendColor = config.colors.bodyColor;
    const fontFamily = config.fontFamily;

    const lakiLaki = Number(
        @json($data['petani_lakilaki'] ?? 0)
    );

    const perempuan = Number(
        @json($data['petani_perempuan'] ?? 0)
    );

    const totalPetani = lakiLaki + perempuan;

    const genderChartConfig = {
        chart: {
            height: 365,
            parentHeightOffset: 0,
            type: 'donut',
            toolbar: {
                show: false
            }
        },

        labels: ['Laki-laki', 'Perempuan'],

        series: [lakiLaki, perempuan],

        colors: [
            config.colors.primary,
            config.colors.secondary
        ],

        stroke: { width: 0},

        dataLabels: {enabled: false},

        legend: {
            show: true,
            position: 'bottom',
            offsetY: 10,

            markers: {
                size: 4,
                strokeWidth: 0
            },

            itemMargin: {
                horizontal: 15,
                vertical: 5
            },

            fontSize: '13px',
            fontFamily: fontFamily,
            fontWeight: 400,

            labels: {
                colors: legendColor,
                useSeriesColors: false
            },

            formatter: function (seriesName, options) {
                const value =
                    options.w.globals.series[
                        options.seriesIndex
                    ];

                const percentage = totalPetani > 0
                    ? ((value / totalPetani) * 100).toFixed(1)
                    : '0.0';

                return `${seriesName}: ${value} (${percentage}%)`;
            }
        },

        tooltip: {
            theme: 'dark',

            y: {
                formatter: function (value) {
                    const percentage = totalPetani > 0
                        ? ((value / totalPetani) * 100).toFixed(1)
                        : '0.0';

                    return `${value} petani (${percentage}%)`;
                }
            }
        },

        grid: {
            padding: {
                top: 15
            }
        },

        plotOptions: {
            pie: {
                donut: {
                    size: '75%',

                    labels: {
                        show: true,

                        value: {
                            fontSize: '38px',
                            fontFamily: fontFamily,
                            color: headingColor,
                            fontWeight: 500,
                            offsetY: -20,

                            formatter: function (value) {
                                return parseInt(value);
                            }
                        },

                        name: {
                            offsetY: 30,
                            fontFamily: fontFamily
                        },

                        total: {
                            show: true,
                            showAlways: true,
                            fontSize: '15px',
                            fontFamily: fontFamily,
                            color: legendColor,
                            label: 'Total Petani',

                            formatter: function () {
                                return totalPetani;
                            }
                        }
                    }
                }
            }
        },

        responsive: [
            {
                breakpoint: 1025,
                options: {
                    chart: {
                        height: 380
                    }
                }
            }
        ]
    };

    const genderChart = new ApexCharts(
        genderChartEl,
        genderChartConfig
    );

    genderChart.render();

    const ageGroupChartEl = document.querySelector('#ageGroupChart');

    if (ageGroupChartEl) {

        const ageGroupChartConfig = {
            chart: {
                height: 320,
                type: 'bar',
                parentHeightOffset: 0,
                toolbar: {
                    show: false
                }
            },

            series: [
                {
                    name: 'Petani',
                    data: [
                        @json($data['kelompok_umur']['kurang_30']),
                        @json($data['kelompok_umur']['30_39']),
                        @json($data['kelompok_umur']['40_49']),
                        @json($data['kelompok_umur']['50_59']),
                        @json($data['kelompok_umur']['60_keatas'])
                    ]
                }
            ],

            colors: [
                config.colors.primary
            ],

            plotOptions: {
                bar: {
                    borderRadius: 4,
                    columnWidth: '45%',
                    distributed: false,
                    dataLabels: {
                        position: 'top'
                    }
                }
            },

            dataLabels: {
                enabled: true,
                offsetY: -20,

                style: {
                    fontSize: '13px',
                    fontFamily: fontFamily,
                    fontWeight: 500,
                    colors: [
                        headingColor
                    ]
                },

                formatter: function (value) {
                    return value;
                }
            },

            xaxis: {
                categories: [
                    '< 30',
                    '30 - 39',
                    '40 - 49',
                    '50 - 59',
                    '≥ 60'
                ],

                labels: {
                    style: {
                        colors: legendColor,
                        fontSize: '12px',
                        fontFamily: fontFamily
                    },

                    formatter: function (value) {
                        return value + ' tahun';
                    }
                },

                axisBorder: {
                    show: false
                },

                axisTicks: {
                    show: false
                }
            },

            yaxis: {
                min: 0,

                labels: {
                    style: {
                        colors: legendColor,
                        fontSize: '12px',
                        fontFamily: fontFamily
                    },

                    formatter: function (value) {
                        return Math.floor(value);
                    }
                },

                title: {
                    text: 'Petani',
                    style: {
                        color: legendColor,
                        fontSize: '12px',
                        fontFamily: fontFamily,
                        fontWeight: 400
                    }
                }
            },

            grid: {
                borderColor: config.colors.borderColor,
                strokeDashArray: 5,

                xaxis: {
                    lines: {
                        show: false
                    }
                },

                padding: {
                    top: 20
                }
            },

            legend: {
                show: false
            },

            tooltip: {
                custom: function({ series, seriesIndex, dataPointIndex, w }) {
                    const value = series[seriesIndex][dataPointIndex];
                    const label = w.globals.labels[dataPointIndex];

                    return `
                        <div
                            style="
                                background: ${config.colors.primary};
                                color: #fff;
                                padding: 8px 12px;
                                border-radius: 5px;
                                font-size: 13px;
                                font-weight: 500;
                                font-family: ${fontFamily};
                                box-shadow: 0 4px 12px rgba(0,0,0,.15);
                            "
                        >
                            ${label} tahun:&nbsp;
                            <strong>${value} petani</strong>
                        </div>
                    `;
                }
            },

            responsive: [
                {
                    breakpoint: 576,

                    options: {
                        chart: {
                            height: 300
                        },

                        plotOptions: {
                            bar: {
                                columnWidth: '55%'
                            }
                        }
                    }
                }
            ]
        };

        const ageGroupChart = new ApexCharts(
            ageGroupChartEl,
            ageGroupChartConfig
        );

        ageGroupChart.render();

        const educationChartEl = document.querySelector('#educationChart');

        if (educationChartEl) {

            const educationData = [
                Number(@json($data['pendidikan']['tidak_sekolah'] ?? 0)),
                Number(@json($data['pendidikan']['sd'] ?? 0)),
                Number(@json($data['pendidikan']['smp'] ?? 0)),
                Number(@json($data['pendidikan']['sma'] ?? 0)),
                Number(@json($data['pendidikan']['diploma'] ?? 0)),
                Number(@json($data['pendidikan']['s1_keatas'] ?? 0))
            ];

            const totalPendidikan = educationData.reduce(
                (total, value) => total + value,
                0
            );

            const educationChartConfig = {
                chart: {
                    height: 330,
                    type: 'bar',
                    parentHeightOffset: 0,
                    toolbar: {
                        show: false
                    }
                },

                series: [
                    {
                        name: 'Petani',
                        data: educationData
                    }
                ],

                colors: [
                    config.colors.success
                ],

                plotOptions: {
                    bar: {
                        horizontal: true,
                        borderRadius: 4,
                        barHeight: '55%',
                        dataLabels: {
                            position: 'top'
                        }
                    }
                },

                dataLabels: {
                    enabled: true,
                    textAnchor: 'start',
                    offsetX: 6,

                    style: {
                        fontSize: '12px',
                        fontFamily: fontFamily,
                        fontWeight: 500,
                        colors: [
                            headingColor
                        ]
                    },

                    formatter: function (value) {
                        const percentage = totalPendidikan > 0
                            ? ((value / totalPendidikan) * 100).toFixed(1)
                            : '0.0';

                        return `${value} (${percentage}%)`;
                    }
                },

                xaxis: {
                    categories: [
                        'Tidak Sekolah',
                        'SD / Sederajat',
                        'SMP / Sederajat',
                        'SMA / Sederajat',
                        'Diploma',
                        'S1 ke atas'
                    ],

                    labels: {
                        style: {
                            colors: legendColor,
                            fontSize: '12px',
                            fontFamily: fontFamily
                        },

                        formatter: function (value) {
                            return Math.floor(value);
                        }
                    },

                    axisBorder: {
                        show: false
                    },

                    axisTicks: {
                        show: false
                    },

                    title: {
                        text: 'Petani',

                        style: {
                            color: legendColor,
                            fontSize: '12px',
                            fontFamily: fontFamily,
                            fontWeight: 400
                        }
                    }
                },

                yaxis: {
                    labels: {
                        style: {
                            colors: legendColor,
                            fontSize: '12px',
                            fontFamily: fontFamily
                        }
                    }
                },

                grid: {
                    borderColor: config.colors.borderColor,
                    strokeDashArray: 5,

                    xaxis: {
                        lines: {
                            show: true
                        }
                    },

                    yaxis: {
                        lines: {
                            show: false
                        }
                    },

                    padding: {
                        right: 55
                    }
                },

                legend: {
                    show: false
                },

                tooltip: {
                    custom: function({
                        series,
                        seriesIndex,
                        dataPointIndex,
                        w
                    }) {
                        const value =
                            series[seriesIndex][dataPointIndex];

                        const label =
                            w.globals.labels[dataPointIndex];

                        const percentage = totalPendidikan > 0
                            ? (
                                (value / totalPendidikan) * 100
                            ).toFixed(1)
                            : '0.0';

                        return `
                            <div
                                style="
                                    background: ${config.colors.success};
                                    color: #fff;
                                    padding: 8px 12px;
                                    border-radius: 5px;
                                    font-size: 13px;
                                    font-weight: 500;
                                    font-family: ${fontFamily};
                                    box-shadow: 0 4px 12px rgba(0,0,0,.15);
                                "
                            >
                                ${label}:&nbsp;
                                <strong>
                                    ${value} petani (${percentage}%)
                                </strong>
                            </div>
                        `;
                    }
                }
            };

            const educationChart = new ApexCharts(
                educationChartEl,
                educationChartConfig
            );

            educationChart.render();
        }

        const commodityChartEl = document.querySelector('#commodityChart');

        if (commodityChartEl) {

            const commodityLabels = @json(
                $data['komoditas_utama']['labels'] ?? []
            );

            const commoditySeries = @json(
                $data['komoditas_utama']['series'] ?? []
            );

            const totalCommodityFarmers = commoditySeries.reduce(
                (total, value) => total + Number(value),
                0
            );

            const commodityChartConfig = {
                chart: {
                    height: 330,
                    type: 'donut',
                    parentHeightOffset: 0,
                    toolbar: {
                        show: false
                    }
                },

                labels: commodityLabels,

                series: commoditySeries,

                colors: [
                    config.colors.primary,
                    config.colors.warning,
                    config.colors.success,
                    config.colors.info,
                    config.colors.danger,
                    config.colors.secondary
                ],

                stroke: {
                    width: 0
                },

                dataLabels: {
                    enabled: false
                },

                legend: {
                    show: true,
                    position: 'right',
                    horizontalAlign: 'center',

                    markers: {
                        size: 5,
                        strokeWidth: 0
                    },

                    itemMargin: {
                        horizontal: 8,
                        vertical: 7
                    },

                    fontSize: '12px',
                    fontFamily: fontFamily,
                    fontWeight: 400,

                    labels: {
                        colors: legendColor,
                        useSeriesColors: false
                    },

                    formatter: function(seriesName, options) {

                        const value =
                            options.w.globals.series[
                                options.seriesIndex
                            ];

                        const percentage =
                            totalCommodityFarmers > 0
                                ? (
                                    (
                                        value /
                                        totalCommodityFarmers
                                    ) * 100
                                ).toFixed(1)
                                : '0.0';

                        return `${seriesName}: ${value} (${percentage}%)`;
                    }
                },

                tooltip: {
                    custom: function({
                        series,
                        seriesIndex,
                        w
                    }) {

                        const value = series[seriesIndex];

                        const label =
                            w.globals.labels[seriesIndex];

                        const percentage =
                            totalCommodityFarmers > 0
                                ? (
                                    (
                                        value /
                                        totalCommodityFarmers
                                    ) * 100
                                ).toFixed(1)
                                : '0.0';

                        const color =
                            w.globals.colors[seriesIndex];

                        return `
                            <div
                                style="
                                    background: ${color};
                                    color: #fff;
                                    padding: 8px 12px;
                                    border-radius: 5px;
                                    font-size: 13px;
                                    font-weight: 500;
                                    font-family: ${fontFamily};
                                    box-shadow:
                                        0 4px 12px rgba(0,0,0,.15);
                                "
                            >
                                ${label}:&nbsp;

                                <strong>
                                    ${value} petani
                                    (${percentage}%)
                                </strong>
                            </div>
                        `;
                    }
                },

                plotOptions: {
                    pie: {
                        donut: {
                            size: '68%',

                            labels: {
                                show: true,

                                value: {
                                    fontSize: '30px',
                                    fontFamily: fontFamily,
                                    color: headingColor,
                                    fontWeight: 500,
                                    offsetY: -15,

                                    formatter: function(value) {
                                        return parseInt(value);
                                    }
                                },

                                name: {
                                    offsetY: 25,
                                    fontFamily: fontFamily
                                },

                                total: {
                                    show: true,
                                    showAlways: true,
                                    fontSize: '13px',
                                    fontFamily: fontFamily,
                                    color: legendColor,
                                    label: 'Petani',

                                    formatter: function() {
                                        return totalCommodityFarmers;
                                    }
                                }
                            }
                        }
                    }
                },

                responsive: [
                    {
                        breakpoint: 1400,

                        options: {
                            chart: {
                                height: 350
                            },

                            legend: {
                                position: 'bottom'
                            }
                        }
                    },

                    {
                        breakpoint: 576,

                        options: {
                            chart: {
                                height: 330
                            },

                            legend: {
                                position: 'bottom'
                            }
                        }
                    }
                ]
            };

            const commodityChart = new ApexCharts(
                commodityChartEl,
                commodityChartConfig
            );

            commodityChart.render();
        }

        const landAreaChartEl = document.querySelector('#landAreaChart');

        if (landAreaChartEl) {

            const landAreaData = [
                Number(@json($data['luas_lahan']['kurang_05'] ?? 0)),
                Number(@json($data['luas_lahan']['05_1'] ?? 0)),
                Number(@json($data['luas_lahan']['1_2'] ?? 0)),
                Number(@json($data['luas_lahan']['lebih_2'] ?? 0))
            ];

            const totalLandFarmers = landAreaData.reduce(
                (total, value) => total + value,
                0
            );

            const landAreaChartConfig = {
                chart: {
                    height: 330,
                    type: 'bar',
                    parentHeightOffset: 0,
                    toolbar: {
                        show: false
                    }
                },

                series: [
                    {
                        name: 'Petani',
                        data: landAreaData
                    }
                ],

                colors: [
                    config.colors.warning
                ],

                plotOptions: {
                    bar: {
                        horizontal: true,
                        borderRadius: 4,
                        barHeight: '50%',
                        dataLabels: {
                            position: 'top'
                        }
                    }
                },

                dataLabels: {
                    enabled: true,
                    textAnchor: 'start',
                    offsetX: 6,

                    style: {
                        fontSize: '12px',
                        fontFamily: fontFamily,
                        fontWeight: 500,
                        colors: [
                            headingColor
                        ]
                    },

                    formatter: function (value) {

                        const percentage = totalLandFarmers > 0
                            ? (
                                (value / totalLandFarmers) * 100
                            ).toFixed(1)
                            : '0.0';

                        return `${value} (${percentage}%)`;
                    }
                },

                xaxis: {
                    categories: [
                        '< 0,5 ha',
                        '0,5 - 1 ha',
                        '1 - 2 ha',
                        '> 2 ha'
                    ],

                    labels: {
                        style: {
                            colors: legendColor,
                            fontSize: '12px',
                            fontFamily: fontFamily
                        },

                        formatter: function (value) {
                            return Math.floor(value);
                        }
                    },

                    axisBorder: {
                        show: false
                    },

                    axisTicks: {
                        show: false
                    },

                    title: {
                        text: 'Petani',

                        style: {
                            color: legendColor,
                            fontSize: '12px',
                            fontFamily: fontFamily,
                            fontWeight: 400
                        }
                    }
                },

                yaxis: {
                    labels: {
                        style: {
                            colors: legendColor,
                            fontSize: '12px',
                            fontFamily: fontFamily
                        }
                    }
                },

                grid: {
                    borderColor: config.colors.borderColor,
                    strokeDashArray: 5,

                    xaxis: {
                        lines: {
                            show: true
                        }
                    },

                    yaxis: {
                        lines: {
                            show: false
                        }
                    },

                    padding: {
                        right: 55
                    }
                },

                legend: {
                    show: false
                },

                tooltip: {
                    custom: function({
                        series,
                        seriesIndex,
                        dataPointIndex,
                        w
                    }) {

                        const value =
                            series[seriesIndex][dataPointIndex];

                        const label =
                            w.globals.labels[dataPointIndex];

                        const percentage = totalLandFarmers > 0
                            ? (
                                (value / totalLandFarmers) * 100
                            ).toFixed(1)
                            : '0.0';

                        return `
                            <div
                                style="
                                    background: ${config.colors.warning};
                                    color: #fff;
                                    padding: 8px 12px;
                                    border-radius: 5px;
                                    font-size: 13px;
                                    font-weight: 500;
                                    font-family: ${fontFamily};
                                    box-shadow:
                                        0 4px 12px rgba(0,0,0,.15);
                                "
                            >
                                ${label}:&nbsp;

                                <strong>
                                    ${value} petani
                                    (${percentage}%)
                                </strong>
                            </div>
                        `;
                    }
                }
            };

            const landAreaChart = new ApexCharts(
                landAreaChartEl,
                landAreaChartConfig
            );

            landAreaChart.render();
        }

        const incomeChartEl = document.querySelector('#incomeChart');

        if (incomeChartEl) {

            const incomeData = [
                Number(@json($data['penghasilan']['kurang_1'] ?? 0)),
                Number(@json($data['penghasilan']['1_3'] ?? 0)),
                Number(@json($data['penghasilan']['3_5'] ?? 0)),
                Number(@json($data['penghasilan']['5_10'] ?? 0)),
                Number(@json($data['penghasilan']['lebih_10'] ?? 0))
            ];

            const totalIncomeFarmers = incomeData.reduce(
                (total, value) => total + value,
                0
            );

            const incomeChartConfig = {
                chart: {
                    height: 330,
                    type: 'bar',
                    parentHeightOffset: 0,
                    toolbar: {
                        show: false
                    }
                },

                series: [
                    {
                        name: 'Petani',
                        data: incomeData
                    }
                ],

                colors: [
                    config.colors.info
                ],

                plotOptions: {
                    bar: {
                        horizontal: true,
                        borderRadius: 4,
                        barHeight: '50%',
                        dataLabels: {
                            position: 'top'
                        }
                    }
                },

                dataLabels: {
                    enabled: true,
                    textAnchor: 'start',
                    offsetX: 6,

                    style: {
                        fontSize: '12px',
                        fontFamily: fontFamily,
                        fontWeight: 500,
                        colors: [
                            headingColor
                        ]
                    },

                    formatter: function (value) {
                        const percentage =
                            totalIncomeFarmers > 0
                                ? (
                                    (value / totalIncomeFarmers) *
                                    100
                                ).toFixed(1)
                                : '0.0';

                        return `${value} (${percentage}%)`;
                    }
                },

                xaxis: {
                    categories: [
                        '< Rp1 juta',
                        'Rp1 - 3 juta',
                        'Rp3 - 5 juta',
                        'Rp5 - 10 juta',
                        '> Rp10 juta'
                    ],

                    labels: {
                        style: {
                            colors: legendColor,
                            fontSize: '12px',
                            fontFamily: fontFamily
                        },

                        formatter: function (value) {
                            return Math.floor(value);
                        }
                    },

                    axisBorder: {
                        show: false
                    },

                    axisTicks: {
                        show: false
                    },

                    title: {
                        text: 'Petani',

                        style: {
                            color: legendColor,
                            fontSize: '12px',
                            fontFamily: fontFamily,
                            fontWeight: 400
                        }
                    }
                },

                yaxis: {
                    labels: {
                        style: {
                            colors: legendColor,
                            fontSize: '12px',
                            fontFamily: fontFamily
                        }
                    }
                },

                grid: {
                    borderColor: config.colors.borderColor,
                    strokeDashArray: 5,

                    xaxis: {
                        lines: {
                            show: true
                        }
                    },

                    yaxis: {
                        lines: {
                            show: false
                        }
                    },

                    padding: {
                        right: 55
                    }
                },

                legend: {
                    show: false
                },

                tooltip: {
                    custom: function({
                        series,
                        seriesIndex,
                        dataPointIndex,
                        w
                    }) {

                        const value =
                            series[seriesIndex][dataPointIndex];

                        const label =
                            w.globals.labels[dataPointIndex];

                        const percentage =
                            totalIncomeFarmers > 0
                                ? (
                                    (value / totalIncomeFarmers) *
                                    100
                                ).toFixed(1)
                                : '0.0';

                        return `
                            <div
                                style="
                                    background: ${config.colors.info};
                                    color: #fff;
                                    padding: 8px 12px;
                                    border-radius: 5px;
                                    font-size: 13px;
                                    font-weight: 500;
                                    font-family: ${fontFamily};
                                    box-shadow:
                                        0 4px 12px rgba(0,0,0,.15);
                                "
                            >
                                ${label}:&nbsp;

                                <strong>
                                    ${value} petani
                                    (${percentage}%)
                                </strong>
                            </div>
                        `;
                    }
                }
            };

            const incomeChart = new ApexCharts(
                incomeChartEl,
                incomeChartConfig
            );

            incomeChart.render();
        }
    }
});
</script>
@endpush