@extends('layouts.front')
@section('content')
    <style>
        .fix_height {
            height: 300px !important;
        }

        #demographics-chart {
            width: 100%;
            height: 300px;
        }

        #chartdiv {
            width: 100%;
            height: 280px;
        }

        #piChart {
            width: 100%;
            height: 500px;
        }

        #tools {
            padding: 0.3em 1em;
            text-align: right;
            max-width: 100%;
        }

        #tools input.active {
            font-weight: bold;
        }

        .tooltip_map {
            position: absolute;
            top: 10px;
            right: 10px;
            background: white;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            max-width: 200px;
        }

        .tooltip_map ul {
            list-style: none;
            padding: 0;
        }

        .tooltip_map li {
            margin-bottom: 2px;
            font-size: 7px;
        }

        .tooltip_map li span {
            display: inline-block;
            font-size: 8px;
            font-weight: bold;
        }

        .map__wrap {
            position: relative;
        }

        #sudan_map path {
            cursor: pointer;
        }

        @media (max-width: 767px) {
            .map__wrap {
                padding-top: 196px !important;
            }

            .tooltip_map {
                right: unset;
                left: 50%;
                transform: translateX(-50%);
            }
        }

        .custom_table_header {
            display: flex;
            justify-content: space-between;
            padding: 10px;
            background-color: #004d9a;
            font-weight: bold;
            font-size: 9px;
            color: #fff;
        }

        .custom_table_header div:not(.left),
        .table_body_item div:not(.left),
        .sub_table__item div:not(.left) {
            width: 11.66%;
            text-align: left;
        }

        .custom_table_header .left,
        .table_body_item .left,
        .sub_table__item .left {
            width: 30%;
            text-align: left;
        }

        .table_body_item {
            padding: 0;
            border: none;
            width: 100%;
            display: flex;
            align-items: center;
            font-size: 9px;
            justify-content: space-between;
            padding: 10px;
        }

        .sub_table__item {
            padding: 0;
            border: none;
            width: 100%;
            display: flex;
            align-items: center;
            font-size: 9px;
            justify-content: space-between;
            padding: 10px;
        }

        .sub_table__item .left {
            padding-left: 15px;
        }

        .form-group-sm {
            max-width: 200px;
            margin-bottom: 10px;
        }

        .d-flex .form-group-sm {
            margin-right: 0.5rem;
        }

        .form-control-sm {
            max-width: 150px;
        }

        .custom-icon {
            border: solid black;
            border-width: 0 2px 2px 0;
            display: inline-block;
            padding: 3px;
            margin-left: 10px;
        }

        .down {
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }

        .up {
            transform: rotate(-135deg);
            -webkit-transform: rotate(-135deg);
        }

        .key-figures {
            padding: 10px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 20px;
        }

        .key-figures-title {
            font-size: 16px;
            font-weight: bold;
            color: #007bff;
            margin-bottom: 10px;
        }

        .key-figure {
            display: flex;
            align-items: center;
            font-size: 10px;
            margin-bottom: 8px;
            color: #ff6600;
        }

        .key-figure .icon {
            margin-right: 8px;
            font-size: 18px;
        }

        .key-figure .number {
            font-size: 18px;
            font-weight: bold;
            margin-right: 5px;
        }

        .main-content {
            padding-top: 20px;
        }

        .main-content .card {
            margin-bottom: 20px;
        }

        .main-content .card-header {
            background-color: #004d9a;
            color: #fff;
        }

        .main-content .card-body {
            padding: 15px;
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        .map-container {
            position: relative;
        }
    </style>

    <link rel="stylesheet" href="{{ asset('css/custom-bootstrap.css') }}">
    <div class="main-content">
        <div class="container">
            <div class="grid-container">
                <!-- First Row: 3x3 -->
                <div class="key-figures">
                    <h5 class="key-figures-title">Key Figures</h5>
                    <div class="key-figure">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            style="fill: rgba(242, 104, 40, 1);transform: ;msFilter:;">
                            <circle cx="6" cy="4" r="2"></circle>
                            <path d="M9 7H3a1 1 0 0 0-1 1v7h2v7h4v-7h2V8a1 1 0 0 0-1-1z"></path>
                            <circle cx="17" cy="4" r="2"></circle>
                            <path d="M20.21 7.73a1 1 0 0 0-1-.73h-4.5a1 1 0 0 0-1 .73L12 14h2l-1 4h2v4h4v-4h2l-1-4h2z">
                            </path>
                        </svg>
                        <span class="number">{{ $totalFamilyMembersCount }}</span> Family Members
                    </div>
                    <div class="key-figure">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            style="fill: rgba(242, 104, 40, 1);transform: ;msFilter:;">
                            <circle cx="12" cy="4" r="2"></circle>
                            <path d="M15 7H9a1 1 0 0 0-1 1v7h2v7h4v-7h2V8a1 1 0 0 0-1-1z"></path>
                        </svg>
                        <span class="number">{{ $totalMaleCount }}</span> Male
                    </div>
                    <div class="key-figure">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            style="fill: rgba(242, 104, 40, 1);transform: ;msFilter:;">
                            <circle cx="12" cy="4" r="2"></circle>
                            <path d="M15 7H9a1 1 0 0 0-1 1v7h2v7h4v-7h2V8a1 1 0 0 0-1-1z"></path>
                        </svg>
                        <span class="number">{{ $totalFemaleCount }}</span> Female
                    </div>
                    <div class="key-figure">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            style="fill: rgba(242, 104, 40, 1);transform: ;msFilter:;">
                            <path d="m14.303 6-3-2H6V2H4v20h2v-8h4.697l3 2H20V6z"></path>
                        </svg>
                        <span class="number">{{ $nationalityData }}</span> Nationalities
                    </div>
                    <div class="d-flex flex-wrap justify-content-between align-items-center">
                        <div class="d-flex align-items-center mb-3 mb-md-0">
                            <label for="from_date" class="mr-2 mb-0">Date Update</label>
                            <div class="form-group form-group-sm mr-2 mb-0">
                                <input type="date" id="from_date" class="form-control form-control-sm">
                            </div>
                            <div class="form-group form-group-sm mb-0">
                                <input type="date" id="to_date" class="form-control form-control-sm">
                            </div>
                        </div>
                        <div class="d-flex align-items-center">
                            <label for="state_of_origin_dropdown" class="mr-2 mb-0">State of Origin</label>
                            <select id="state_of_origin_dropdown" class="form-control form-control-sm">
                                @foreach ($statesOfOrigin as $state)
                                    <option value="{{ $state->state_of_origin }}"
                                        {{ $state->state_of_origin == $defaultState ? 'selected' : '' }}>
                                        {{ $state->state_of_origin }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header header_bg_primary">
                        <h4>Displacement Trends By State Of Origin</h4>
                    </div>
                    <div class="card-body">
                        <div id="displacement_chart"></div>
                    </div>
                </div>


                <div class="card">
                    <div class="card-header header_bg_primary">
                        <h4>Demographics Report</h4>
                    </div>
                    <div class="card-body">
                        <div class="map__wrap">
                            <div id="sudan_map">
                                @include('frontend.includes.demographics-svg')
                            </div>
                            <div class="tooltip_map" id="tooltip_map">
                                <ul>
                                    <li><span class="state_name"></span></li>
                                    <li><span>Male: </span><span class="total_male"></span></li>
                                    <li><span>Female: </span><span class="total_female"></span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header header_bg_primary">
                        <h4>Transport Provider Category</h4>
                    </div>
                    <div class="card-body">
                        <div id="transport_chart"></div>
                    </div>
                </div>

                <!-- Second Row: 3x3 -->

                <div class="card">
                    <div class="card-header header_bg_primary">
                        <h4>Return State and Country Data</h4>
                    </div>
                    <div class="card-body">
                        <!-- Nested list for state and country data -->
                        <ul id="return_data_list"></ul>
                    </div>
                </div>

                <!-- Third Row: 3x3 -->


                <div class="card">
                    <div class="card-header header_bg_primary">
                        <h4>Duration of Stay and Previous Returns</h4>
                    </div>
                    <div class="card-body">
                        <!-- Nested list for state and country data -->
                        <ul id="consolidatedChart"></ul>
                    </div>
                </div>


                <div class="card">
                    <div class="card-header header_bg_primary">
                        <h4>Monthly Data</h4>
                    </div>
                    <div class="card-body">
                        <canvas id="monthDataChart" width="400" height="280"></canvas>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header header_bg_primary">
                        <h4>Assistance Received</h4>
                    </div>
                    <div class="card-body">
                        <div id="assistance_chart"></div>
                    </div>
                </div>




                <div class="card">
                    <div class="card-header header_bg_primary">
                        <h4>Asylum By Country </h4>
                    </div>
                    <div class="card-body fix_height">
                        <div id="chartdiv"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection



@push('script')
    <script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        const data_state = {!! json_encode($formattedmapData) !!};
        $.each(data_state, function(index, value) {
            if (value.return_state == 'Lakes State') {
                $('.state_name').text(value.return_state);
                $('.total_male').text(value.total_male);
                $('.total_female').text(value.total_female);
                $('.total_family_members').text(value.total_family_members);
                $('.total_female_family_members').text(value.total_female_family_members);
                $('.total_childrens').text(value.total_childrens);
                $('.total_female_childrens').text(value.total_female_childrens);
                $('.total_members_in_co_a').text(value.total_members_in_co_a);
            }
        });
        $(document).ready(function() {
            const tooltip_map = $('#tooltip_map');
            const clickablePaths = $('#sudan_map path'); // Update with your actual path selector

            clickablePaths.click(function() {
                const name = $(this).attr('data-name');
                console.log('Clicked name:', name); // Debug output to check the clicked name
                $.each(data_state, function(index, value) {
                    if (value.return_state == name) {
                        $('.state_name').text(value.return_state);
                        $('.total_male').text(value.total_male);
                        $('.total_female').text(value.total_female);
                        $('.total_family_members').text(value.total_family_members);
                        $('.total_female_family_members').text(value.total_female_family_members);
                        $('.total_childrens').text(value.total_childrens);
                        $('.total_female_childrens').text(value.total_female_childrens);
                        $('.total_members_in_co_a').text(value.total_members_in_co_a);
                    }
                });

            });
        });
    </script>

    <script>
        const chartData = null;
        // Create labels and datasets from the PHP data
        const labels = chartData.map(item => item.month_year); // Use month_year for the labels
        const datasets = [{
                label: 'Male',
                backgroundColor: 'rgba(255, 0, 0, 0.7)', // Deep Red
                data: chartData.map(item => item.total_male),
            },
            {
                label: 'Female',
                backgroundColor: 'rgba(0, 0, 255, 0.7)', // Deep Blue
                data: chartData.map(item => item.total_female),
            },
            {
                label: 'Family Members',
                backgroundColor: 'rgba(0, 128, 0, 0.7)', // Deep Green
                data: chartData.map(item => item.total_family_members),
            },
            {
                label: 'Female Family Members',
                backgroundColor: 'rgba(255, 255, 0, 0.7)', // Deep Yellow
                data: chartData.map(item => item.total_female_family_members),
            },
            {
                label: 'Children',
                backgroundColor: 'rgba(128, 0, 128, 0.7)', // Deep Purple
                data: chartData.map(item => item.total_childrens),
            },
            {
                label: 'Female Children',
                backgroundColor: 'rgba(255, 165, 0, 0.7)', // Deep Orange
                data: chartData.map(item => item.total_female_childrens),
            },
            {
                label: 'Members in Co-A',
                backgroundColor: 'rgba(75, 0, 130, 0.7)', // Deep Indigo
                data: chartData.map(item => item.total_members_in_co_a),
            },
            // Add similar datasets for other categories
        ];

        const ctxMonth = document.getElementById('monthDataChart').getContext('2d');
        const monthDataChart = new Chart(ctxMonth, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: datasets,
            },
            options: {
                scales: {
                    x: {
                        stacked: true,
                    },
                    y: {
                        stacked: true,
                    },
                },
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const datasetLabel = context.dataset.label || '';
                                const value = context.formattedValue;
                                return `${datasetLabel}: ${value}`;
                            },
                        },
                    },
                },
            },
        });
    </script>



    <script>
        am5.ready(function() {
            var root = am5.Root.new("chartdiv");

            root.setThemes([
                am5themes_Animated.new(root)
            ]);

            var chart = root.container.children.push(am5xy.XYChart.new(root, {
                panX: false,
                panY: false,
                wheelX: "panX",
                wheelY: "zoomX",
                layout: root.verticalLayout
            }));

            var colors = chart.get("colors");

            var data = [
                @foreach ($asylumCountries as $index => $country)
                    {
                        country: "{{ $country }}",
                        male: {{ $totalAsylumMaleData[$index] }},
                        female: {{ $totalAsylumFemaleData[$index] }},
                        familyMember: {{ $asylumAccompanyingFamilyMembersData[$index] }},
                        femaleFamilyMember: {{ $asylumAccompanyingFemaleFamilyMembersData[$index] }},
                        children: {{ $asylumAccompanyingChildrenData[$index] }},
                        femaleChildren: {{ $asylumAccompanyingFemaleChildrenData[$index] }},
                        icon: "/images/country_flag/{{ strtolower($country) }}.svg",
                        columnSettings: {
                            fill: colors.next()
                        }
                    },
                @endforeach
            ];

            var xRenderer = am5xy.AxisRendererX.new(root, {
                minGridDistance: 30
            });

            var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
                categoryField: "country",
                renderer: xRenderer,
                bullet: function(root, axis, dataItem) {
                    return am5xy.AxisBullet.new(root, {
                        location: 0.5,
                        sprite: am5.Picture.new(root, {
                            width: 24,
                            height: 24,
                            centerY: am5.p50,
                            centerX: am5.p50,
                            src: dataItem.dataContext.icon
                        })
                    });
                }
            }));

            xRenderer.grid.template.setAll({
                location: 1
            });

            xRenderer.labels.template.setAll({
                paddingTop: 20,
                fontWeight: "bold"
            });

            xAxis.data.setAll(data);

            var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
                renderer: am5xy.AxisRendererY.new(root, {
                    strokeOpacity: 0.1
                })
            }));

            var series = chart.series.push(am5xy.ColumnSeries.new(root, {
                xAxis: xAxis,
                yAxis: yAxis,
                valueYField: "male",
                categoryXField: "country"
            }));

            series.columns.template.setAll({
                tooltipText: "[bold]{categoryX}[/]\nMale: {male}\nFemale: {female}\nFamily Members: {familyMember}\nFemale Family Members: {femaleFamilyMember}\nChildren: {children}\nFemale Children: {femaleChildren}",
                tooltipY: 0,
                strokeOpacity: 0,
                templateField: "columnSettings"
            });

            series.data.setAll(data);

            series.appear();
            chart.appear(1000, 100);
        });
    </script>

    <script>
        $(document).ready(function() {
            // Fetch and render the default state data on page load
            let initialRender = renderDisplacementChart(@json($defaultStateData));
            let transportRender = renderTransportChart(@json($defaultStateData));
            let returnDataTable = updateReturnDataList(@json($defaultStateData));
            let assistanceRender = renderAssistanceChart(@json($defaultStateData));
            let returnIntentionsRender = renderConsolidatedChart(@json($defaultStateData));
            // initialRender.render();

            // Function to handle changes and fetch data
            function fetchData() {
                $("#displacement_chart").html('');
                var selectedState = $('#state_of_origin_dropdown').val();
                var fromDate = $('#from_date').val();
                var toDate = $('#to_date').val();

                $.ajax({
                    url: '{{ route('displacement.data') }}',
                    type: 'GET',
                    data: {
                        state_of_origin: selectedState,
                        from_date: fromDate,
                        to_date: toDate
                    },
                    dataType: 'json',
                    success: function(response) {
                        let changeRender = renderDisplacementChart(response);
                        let transportRender = renderTransportChart(response);
                        let returnDataTable = updateReturnDataList(response);
                        let assistanceRender = renderAssistanceChart(response);
                        let returnIntentionsRender = renderConsolidatedChart(response);
                        // changeRender.render();
                    },
                    error: function(xhr, status, error) {
                        console.error("Error fetching data:", error);
                    }
                });
            }

            // Event listener for dropdown change
            $('#state_of_origin_dropdown').on('change', fetchData);

            // Event listeners for date change
            $('#from_date').on('change', fetchData);
            $('#to_date').on('change', fetchData);
        });

        function renderDisplacementChart(data) {
            // Get unique return_state values
            var returnStates = [...new Set(data.map(item => item.return_state))];

            // Initialize arrays to store counts for different categories
            var totalIndividuals = [];
            var idpCount = [];
            var returneeCount = [];
            var refugeeCount = [];

            // Iterate through each return_state
            returnStates.forEach(state => {
                // Filter data for the current state
                var stateData = data.filter(item => item.return_state === state);

                // Calculate counts for each category
                var totalCount = stateData.length;
                var idp = stateData.filter(item => item.category === 'idp').length;
                var returnee = stateData.filter(item => item.category === 'returnee').length;
                var refugee = stateData.filter(item => item.category === 'refugee').length;

                // Push counts to respective arrays
                totalIndividuals.push(totalCount);
                idpCount.push(idp);
                returneeCount.push(returnee);
                refugeeCount.push(refugee);
            });

            var options = {
                series: [{
                        name: 'Total Individual',
                        data: totalIndividuals
                    },
                    {
                        name: 'IDP',
                        data: idpCount
                    },
                    {
                        name: 'Returnee',
                        data: returneeCount
                    },
                    {
                        name: 'Refugee',
                        data: refugeeCount
                    }
                ],
                chart: {
                    type: 'bar',
                    height: 250,
                    stacked: true
                },
                plotOptions: {
                    bar: {
                        horizontal: true,
                        columnWidth: '55%',
                        endingShape: 'rounded'
                    },
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    show: true,
                    width: 2,
                    colors: ['transparent']
                },
                xaxis: {
                    categories: returnStates,
                },
                yaxis: {
                    title: {
                        text: 'Point Of Entry'
                    }
                },
                fill: {
                    opacity: 1
                },
                tooltip: {
                    y: {
                        formatter: function(val, {
                            seriesIndex,
                            dataPointIndex,
                            w
                        }) {
                            var seriesName = w.globals.seriesNames[seriesIndex];
                            return val;
                        }
                    }
                }
            };


            var chart = new ApexCharts(document.querySelector("#displacement_chart"), options);
            chart.render();
        }


        function renderTransportChart(data) {
            var transportLabels = [...new Set(data.map(item => item.transport))];

            var transportCounts = transportLabels.map(transport => {
                var count = data.filter(item => item.transport === transport).length;
                return count;
            });

            var transportOptions = {
                series: [{
                    name: 'Total Individual',
                    data: transportCounts
                }],
                chart: {
                    type: 'bar',
                    height: 270
                },
                plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: '55%',
                        endingShape: 'rounded'
                    },
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    show: true,
                    width: 2,
                    colors: ['transparent']
                },
                xaxis: {
                    categories: transportLabels,
                },
                yaxis: {
                    title: {
                        text: 'Transport Provider Category'
                    }
                },
                fill: {
                    opacity: 1
                },
                tooltip: {
                    y: {
                        formatter: function(val) {
                            return val;
                        }
                    }
                }
            };

            var transportChart = new ApexCharts(document.querySelector("#transport_chart"), transportOptions);
            transportChart.render();
        }

        // Function to update the return data table
        function updateReturnDataList(data) {
            var list = $('#return_data_list');
            list.empty(); // Clear list before updating

            // Group data by state
            var groupedData = groupBy(data, 'return_state');

            list.append(
                '<div class="custom_table_header"><div class="left">State</div><div>Male</div><div>Female</div><div>IDP</div><div>Returnee</div><div>Refugee</div><div class="right">Individual</div></div>'
            );
            // Iterate through the grouped data
            Object.keys(groupedData).forEach(function(state) {
                // Get data for the state
                var stateData = groupedData[state];

                // Calculate total individuals for the state
                var totalIndividualsState = stateData.length;
                var totalMale = stateData.filter(item => item.sex === 'male').length;
                var totalFemale = stateData.filter(item => item.sex === 'female').length;
                var totalIDP = stateData.filter(item => item.category === 'idp').length;
                var totalReturnee = stateData.filter(item => item.category === 'returnee').length;
                var totalRefugee = stateData.filter(item => item.category === 'refugee').length;

                if (totalIndividualsState > 0) {
                    // Create accordion card for the state
                    var stateCard = $('<div>');
                    var cardHeader = $('<div>').attr('id', state.replace(/ /g, '_'));
                    var btnLink = $('<button>')
                        .addClass('table_body_item')
                        .attr('data-toggle', 'collapse')
                        .attr('data-target', '#' + state.replace(/ /g, '_') + '_collapse')
                        .attr('aria-expanded', 'true')
                        .attr('aria-controls', state.replace(/ /g, '_') + '_collapse')
                        .html(
                            `<div class="left">${state}</div><div>${totalMale}</div><div>${totalFemale}</div><div>${totalIDP}</div><div>${totalReturnee}</div><div>${totalRefugee}</div><div class="right">${totalIndividualsState}</div><i class="custom-icon down"></i>`
                        );
                    cardHeader.append(btnLink);
                    stateCard.append(cardHeader);

                    // Create collapsible content for the state
                    var collapseDiv = $('<div>')
                        .addClass('collapse')
                        .attr('id', state.replace(/ /g, '_') + '_collapse')
                        .attr('aria-labelledby', state.replace(/ /g, '_'))
                        .attr('data-parent', '#return_data_list');
                    var cardBody = $('<div>').addClass('child_table_item');
                    var countryList = $('<ul>').addClass('list-group ml-0');

                    // Group data by country under the state
                    var groupedCountryData = groupBy(stateData, 'return_country');

                    // Iterate through the grouped country data
                    Object.keys(groupedCountryData).forEach(function(country) {
                        // Get data for the country
                        var countryData = groupedCountryData[country];

                        // Calculate total individuals for the country
                        var totalIndividualsCountry = countryData.length;
                        var totalcountryMale = countryData.filter(item => item.sex === 'male').length;
                        var totalcountryFemale = countryData.filter(item => item.sex === 'female').length;
                        var totalcountryIDP = countryData.filter(item => item.category === 'idp').length;
                        var totalcountryReturnee = countryData.filter(item => item.category === 'returnee')
                            .length;
                        var totalcountryRefugee = countryData.filter(item => item.category === 'refugee')
                            .length;

                        // Create a list item for the country
                        var countryItem = $('<li>')
                            .addClass('list-group-item sub_table__item')
                            .html(
                                `<div class="left">${country}</div><div>${totalcountryMale}</div><div>${totalcountryFemale}</div><div>${totalcountryIDP}</div><div>${totalcountryReturnee}</div><div>${totalcountryRefugee}</div><div class="right">${totalIndividualsCountry}</div>`
                            );
                        countryList.append(countryItem); // Append country item to the country list
                    });

                    cardBody.append(countryList);
                    collapseDiv.append(cardBody);
                    stateCard.append(collapseDiv);

                    list.append(stateCard); // Append state item to the main list

                    // Toggle arrow direction on collapse
                    btnLink.on('click', function() {
                        $(this).find('.custom-icon').toggleClass('down up');
                    });
                }
            });
        }


        // Function to group data by a specific key
        function groupBy(array, key) {
            return array.reduce(function(rv, x) {
                (rv[x[key]] = rv[x[key]] || []).push(x);
                return rv;
            }, {});
        }

        function renderAssistanceChart(data) {
            // Initialize counts
            var assistanceCounts = {
                food_aid: 0,
                shelter: 0,
                non_food_items: 0,
                healthcare: 0,
                cash_transfer: 0,
                others: 0
            };

            // Iterate over each data item
            data.forEach(item => {
                // Ensure assistance_received is an array
                var assistanceArray = Array.isArray(item.assistance_received) ? item.assistance_received : [];

                // Count each assistance type in the array
                assistanceArray.forEach(assistance => {
                    if (assistance in assistanceCounts) {
                        assistanceCounts[assistance]++;
                    } else {
                        assistanceCounts.others++;
                    }
                });
            });

            // Extract the counts into an array for the chart
            var counts = [
                assistanceCounts.food_aid,
                assistanceCounts.shelter,
                assistanceCounts.non_food_items,
                assistanceCounts.healthcare,
                assistanceCounts.cash_transfer,
                assistanceCounts.others
            ];

            // Chart data
            var options = {
                series: counts,
                chart: {
                    type: 'polarArea',
                    height: 250
                },
                labels: ['Food Aid', 'Shelter', 'Non-food Items', 'Healthcare', 'Cash Transfer', 'Others'],
                fill: {
                    opacity: 1
                },
                tooltip: {
                    y: {
                        formatter: function(val) {
                            return val + ' individuals';
                        }
                    }
                }
            };

            // Render chart
            var chart = new ApexCharts(document.querySelector("#assistance_chart"), options);
            chart.render();
        }

        function renderConsolidatedChart(data) {
            var countryData = {};

            // Initialize data structures for each country found in the dataset
            data.forEach(item => {
                if (item.bordering_country) {
                    if (!countryData[item.bordering_country]) {
                        countryData[item.bordering_country] = {
                            stayDurations: {
                                '<1 Month': 0,
                                '1 - 3 Months': 0,
                                '3 - 6 Months': 0
                            },
                            returnCounts: {
                                '1': 0,
                                '2': 0,
                                '2 - 3': 0,
                                '4 - 5': 0,
                                '6+': 0
                            }
                        };
                    }
                }
            });

            // Count occurrences for stay durations and return counts for each country
            data.forEach(item => {
                if (item.bordering_country) {
                    const stayCategory = item.stay_in_ssd; // Get the category directly from the item
                    const returnCategory = item.returned_to_ssd;

                    if (stayCategory && countryData[item.bordering_country].stayDurations.hasOwnProperty(
                            stayCategory)) {
                        countryData[item.bordering_country].stayDurations[stayCategory]++;
                    }

                    if (returnCategory && countryData[item.bordering_country].returnCounts.hasOwnProperty(
                            returnCategory)) {
                        countryData[item.bordering_country].returnCounts[returnCategory]++;
                    }
                }
            });

            // Prepare series data for the chart
            var staySeries = {
                name: 'Stay Durations',
                data: []
            };
            var returnSeries = {
                name: 'Return Counts',
                data: []
            };

            Object.keys(countryData).forEach(country => {
                // Calculate the sum of all stay durations for the tooltip
                var stayDurationSum = Object.values(countryData[country].stayDurations).reduce((a, b) => a + b, 0);
                staySeries.data.push({
                    x: country,
                    y: stayDurationSum,
                    stayDetails: countryData[country].stayDurations
                });

                var returnCountSum = Object.values(countryData[country].returnCounts).reduce((a, b) => a + b, 0);
                returnSeries.data.push({
                    x: country,
                    y: returnCountSum
                });
            });

            // Chart configuration
            var options = {
                series: [staySeries, returnSeries],
                chart: {
                    type: 'bar',
                    height: 270,
                    stacked: true
                },
                plotOptions: {
                    bar: {
                        horizontal: false
                    }
                },
                xaxis: {
                    categories: Object.keys(countryData),
                    title: {
                        text: 'Bordering Countries'
                    }
                },
                yaxis: {
                    title: {
                        text: 'Total Individuals'
                    }
                },
                fill: {
                    opacity: 1
                },
                legend: {
                    position: 'right',
                    offsetY: 40
                },
                tooltip: {
                    y: {
                        formatter: function(val, opts) {
                            if (opts.seriesIndex === 0) { // Stay Durations
                                let details = opts.w.config.series[opts.seriesIndex].data[opts.dataPointIndex]
                                    .stayDetails;
                                let tooltipText = ``;
                                Object.keys(details).forEach(key => {
                                    tooltipText += `${key}: ${details[key]}<br>`;
                                });
                                return tooltipText;
                            } else { // Return Counts
                                return val;
                            }
                        }
                    }
                }
            };

            // Render chart
            var chart = new ApexCharts(document.querySelector("#consolidatedChart"), options);
            chart.render();
        }
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            const today = new Date().toISOString().split('T')[0];
            document.getElementById('from_date').value = today;
            document.getElementById('to_date').value = today;
        });
    </script>
@endpush