@extends('layouts.admin')
@section('breadcumb')
    <div class="breadcumb pt-2 px-1">
        <div class="row">
            <div class="col-md-6">
                <div class="title">
                    <h3>Dashboard <span style="color:rgb(165, 165, 165);font-size:10px">Version 1.0</span></h3>
                </div>
            </div>
            <div class="col-md-6">
                <ul class="breadcumb_list">
                    <li><a href="/"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
                    <li><i class="fa fa-angle-right" aria-hidden="true"></i></li>
                    <li class="active">Dashboard</li>
                </ul>
            </div>
        </div>
    </div>
@endsection
@section('content')
    <style>
        .custom-header {
            background-color: #CF203EFF;
        }

        .transaction_info h4 {
            font-size: 16px;
            font-weight: bold;
            text-transform: capitalize;
        }

        .transaction_info h3 {
            font-size: 14px;
            font-weight: bold;
        }

        .loader {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 8px solid #f3f3f3;
            border-top: 8px solid #3498db;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
    @php
        $user_id = auth()->user()->id;
    @endphp
    <div class="content">
        <div class="row">
            <div class="col-md-12">
                <h2 style="font-size: 16px;font-weight:bold;margin-bottom:0"><i class="fa fa-bar-chart"
                        aria-hidden="true"></i> <span>Demographics Data</span></h2>
            </div>
            <div class="col-md-12 mt-2">
                <div class="row">
                    <div class="col-md-3">
                        <form action="{{ route('admin.home') }}" method="get">
                            <div class="card">
                                <div class="card-body py-2">
                                    <input type="date" class="form-control" id="from_date" name="from_date"
                                        value="{{ date('Y-m-d') }}">
                                    <input type="date" class="form-control mt-2" id="to_date" name="to_date"
                                        value="{{ date('Y-m-d') }}">
                                    <div class=" d-flex align-items-center">
                                        <button class=" btn btn-sm btn-info mt-3 mr-2"><i class="fa fa-filter"
                                                aria-hidden="true"></i>Filter</button>
                                        @if (session()->has('is_filter') && session('is_filter') == true)
                                            <a href="{{ route('admin.home') }}" class=" btn btn-sm btn-danger mt-3"> <i
                                                    class="fa fa-trash" aria-hidden="true"></i> Clear</a>
                                        @endif
                                    </div>

                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body py-2">
                                <div class="text-dark font-weight-bold">{{ $totalMale }}</div>
                                <div class="text-dark">Total Male</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body py-2">
                                <div class="text-dark font-weight-bold">{{ $totalFemale }}</div>
                                <div class="text-dark">Total Female</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body py-2">
                                <div class="text-dark font-weight-bold">{{ $accompanyingFamilyMembers }}</div>
                                <div class="text-dark">Accompanying Family Members</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body py-2">
                                <div class="text-dark font-weight-bold">{{ $accompanyingFemaleFamilyMembers }}</div>
                                <div class="text-dark">Accompanying Female Family Members</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body py-2">
                                <div class="text-dark font-weight-bold">{{ $accompanyingChildren }}</div>
                                <div class="text-dark">Accompanying Children</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body py-2">
                                <div class="text-dark font-weight-bold">{{ $accompanyingFemaleChildren }}</div>
                                <div class="text-dark">Accompanying Female Children</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body py-2">
                                <div class="text-dark font-weight-bold">{{ $accompanyingLeftinCoA }}</div>
                                <div class="text-dark">Number of household members left in CoA</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-6">
                <div class="row">
                    {{-- Widget - latest entries --}}
                    <div class="col-md-12">
                        <div class="card border-0 shadow-lg">
                            <div class="card-header py-2 border-0 custom-header">
                                <h3 class="text-center text-white mb-0" style="font-size: 16px;font-weight:500">
                                    Demographics Report
                                </h3>
                            </div>
                            <div class="card-body">
                                <div class="c-chart-wrapper">
                                    <canvas class="chart" id="demographics-chart" height="450" width="500"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card border-0 shadow-lg">
                    <div class="card-header custom-header">
                        <h3 class="text-white" style="font-size: 14px;margin-bottom:0">Country Asylum Report</h3>
                    </div>
                    <div class="card-body">
                        <div class="c-chart-wrapper">
                            <canvas id="area-chart" width="450" height="440"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-7">
                <div class="card border-0 shadow-lg">

                    <div class="card-header py-2 border-0 custom-header">
                        <h3 class="text-center text-white mb-0" style="font-size: 16px;font-weight:500">
                            Month wise Demographics Report
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="c-chart-wrapper" style="height: 300px;">
                            <canvas id="myChart" width="500" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-5">
                <div class="card border-0 shadow-lg">

                    <div class="card-header py-2 border-0 custom-header">
                        <h3 class="text-center text-white mb-0" style="font-size: 16px;font-weight:500">
                            Future Plans stay in SSD Report
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="c-chart-wrapper" style="height: 300px;">
                            <canvas id="ssd-chart" width="500" height="400"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // Function to show demographic data
        function showDemographics(data) {
            var labels = ["Total Male", "Total Female", "Accompanying Family Members", "Accompanying Female Family Members",
                "Accompanying Children", "Accompanying Female Children"
            ];
            var values = [
                data.totalMale,
                data.totalFemale,
                data.accompanyingFamilyMembers,
                data.accompanyingFemaleFamilyMembers,
                data.accompanyingChildren,
                data.accompanyingFemaleChildren
            ];

            var backgroundColors = [
                'rgba(75, 192, 192, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 205, 86, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ];

            var borderColors = [
                'rgba(75, 192, 192, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 205, 86, 1)',
                'rgba(255, 99, 132, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ];

            var datasets = labels.map((label, index) => {
                return {
                    label: label,
                    data: [values[index]],
                    backgroundColor: backgroundColors[index],
                    borderColor: borderColors[index],
                    borderWidth: 1
                };
            });

            var ctx = document.getElementById('demographics-chart').getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['Categories'], // Single label to group all categories
                    datasets: datasets
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: {
                            display: true,
                            title: {
                                display: true,
                                text: 'Demographic Categories'
                            }
                        },
                        y: {
                            display: true,
                            title: {
                                display: true,
                                text: 'Count'
                            }
                        }
                    }
                }
            });
        }

        // Call the showDemographics function and pass the demographic data from the PHP variables
        var demographicData = {
            totalMale: {{ $totalMale }},
            totalFemale: {{ $totalFemale }},
            accompanyingFamilyMembers: {{ $accompanyingFamilyMembers }},
            accompanyingFemaleFamilyMembers: {{ $accompanyingFemaleFamilyMembers }},
            accompanyingChildren: {{ $accompanyingChildren }},
            accompanyingFemaleChildren: {{ $accompanyingFemaleChildren }}
        };

        showDemographics(demographicData);
    </script>




    <script>
        var ctx = document.getElementById('area-chart').getContext('2d');

        var data = {
            labels: {!! json_encode($asylumCountries) !!},
            datasets: [{
                    label: "Total Male",
                    data: {!! json_encode(array_values($totalAsylumMaleData)) !!},
                    borderColor: 'rgba(255, 99, 132, 1)',
                    backgroundColor: 'rgba(255, 99, 132, 0.4)',
                    fill: true
                },
                {
                    label: "Total Female",
                    data: {!! json_encode(array_values($totalAsylumFemaleData)) !!},
                    borderColor: 'rgba(54, 162, 235, 1)',
                    backgroundColor: 'rgba(54, 162, 235, 0.4)',
                    fill: true
                },
                {
                    label: "Accompanying Family Members",
                    data: {!! json_encode(array_values($asylumAccompanyingFamilyMembersData)) !!},
                    borderColor: 'rgba(255, 205, 86, 1)',
                    backgroundColor: 'rgba(255, 205, 86, 0.4)',
                    fill: true
                },
                {
                    label: "Accompanying Female Family Members",
                    data: {!! json_encode(array_values($asylumAccompanyingFemaleFamilyMembersData)) !!},
                    borderColor: 'rgba(75, 192, 192, 1)',
                    backgroundColor: 'rgba(75, 192, 192, 0.4)',
                    fill: true
                },
                {
                    label: "Accompanying Children",
                    data: {!! json_encode(array_values($asylumAccompanyingChildrenData)) !!},
                    borderColor: 'rgba(153, 102, 255, 1)',
                    backgroundColor: 'rgba(153, 102, 255, 0.4)',
                    fill: true
                },
                {
                    label: "Accompanying Female Children",
                    data: {!! json_encode(array_values($asylumAccompanyingFemaleChildrenData)) !!},
                    borderColor: 'rgba(255, 159, 64, 1)',
                    backgroundColor: 'rgba(255, 159, 64, 0.4)',
                    fill: true
                },
                {
                    label: "Household Members Left in CoA",
                    data: {!! json_encode(array_values($asylumAccompanyingLeftinCoAData)) !!},
                    borderColor: 'rgba(0, 0, 0, 1)',
                    backgroundColor: 'rgba(0, 0, 0, 0.4)',
                    fill: true
                }
            ]
        };

        var areaChart = new Chart(ctx, {
            type: 'line',
            data: data,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    tooltip: {
                        mode: 'index',
                        intersect: false
                    }
                },
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'Asylum Countries'
                        }
                    },
                    y: {
                        stacked: true,
                        title: {
                            display: true,
                            text: 'Value'
                        }
                    }
                }
            }
        });
    </script>




    <script>
        // Your dynamic data from PHP
        const formattedMonthlyData = {!! json_encode($formattedMonthlyData) !!};

        // Extract labels and data for the chart
        const labels = formattedMonthlyData.map(item => item.month);
        const totalMaleData = formattedMonthlyData.map(item => item.total_male);
        const totalFemaleData = formattedMonthlyData.map(item => item.total_female);
        const totalFamilyMembersData = formattedMonthlyData.map(item => item.total_family_members);
        const totalFemaleFamilyMembersData = formattedMonthlyData.map(item => item.total_female_family_members);
        const totalChildrensData = formattedMonthlyData.map(item => item.total_childrens);
        const totalFemaleChildrensData = formattedMonthlyData.map(item => item.total_female_childrens);
        const totalMembersInCoAData = formattedMonthlyData.map(item => item.total_members_in_co_a);

        const datasets = [{
                label: 'Total Male',
                backgroundColor: 'rgba(255, 99, 132, 0.7)',
                borderColor: 'rgba(255, 99, 132, 1)',
                data: totalMaleData
            },
            {
                label: 'Total Female',
                backgroundColor: 'rgba(54, 162, 235, 0.7)',
                borderColor: 'rgba(54, 162, 235, 1)',
                data: totalFemaleData
            },
            {
                label: 'Total Family Members',
                backgroundColor: 'rgba(255, 205, 86, 0.7)',
                borderColor: 'rgba(255, 205, 86, 1)',
                data: totalFamilyMembersData
            },
            {
                label: 'Total Female Family Members',
                backgroundColor: 'rgba(75, 192, 192, 0.7)',
                borderColor: 'rgba(75, 192, 192, 1)',
                data: totalFemaleFamilyMembersData
            },
            {
                label: 'Total Childrens',
                backgroundColor: 'rgba(153, 102, 255, 0.7)',
                borderColor: 'rgba(153, 102, 255, 1)',
                data: totalChildrensData
            },
            {
                label: 'Total Female Childrens',
                backgroundColor: 'rgba(255, 159, 64, 0.7)',
                borderColor: 'rgba(255, 159, 64, 1)',
                data: totalFemaleChildrensData
            },
            {
                label: 'Total Members in CoA',
                backgroundColor: 'rgba(0, 0, 0, 0.7)',
                borderColor: 'rgba(0, 0, 0, 1)',
                data: totalMembersInCoAData
            },
            // Add more datasets as needed
        ];

        const config = {
            type: 'bar',
            data: {
                labels: labels,
                datasets: datasets
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: false,
                        text: 'Month-wise Chart'
                    }
                },
                scales: {
                    x: {
                        stacked: true,
                        title: {
                            display: true,
                            text: 'Month-wise Chart'
                        }
                    },
                    y: {
                        stacked: true,
                        title: {
                            display: true,
                            text: 'Value'
                        }
                    }
                }
            }
        };

        const ctxMonth = document.getElementById('myChart').getContext('2d');
        new Chart(ctxMonth, config);
    </script>

    <script>
        // Your dynamic data from PHP
        const futurePlanMonthlyData = {!! json_encode($futurePlanMonthlyData) !!};

        // Extract labels (months) and datasets (categories)
        const ssdLabels = futurePlanMonthlyData.map(item => item.month);
        const categories = Object.keys(futurePlanMonthlyData[0]).slice(1); // Remove 'month' from categories

        // Initialize datasets array
        const ssdDatasets = categories.map(category => ({
            label: category,
            backgroundColor: getRandomColor(), // Define a function to generate random colors
            borderColor: getRandomColor(),
            data: futurePlanMonthlyData.map(item => item[category])
        }));

        const ssdConfig = {
            type: 'bar',
            data: {
                labels: ssdLabels,
                datasets: ssdDatasets
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: false,
                        text: 'Future Plans'
                    }
                },
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'Future Plans stay in SSD'
                        },
                        stacked: true
                    },
                    y: {
                        stacked: true,
                        title: {
                            display: true,
                            text: 'Value'
                        }
                    }
                }
            }
        };

        const ctx_ssd = document.getElementById('ssd-chart').getContext('2d');
        new Chart(ctx_ssd, ssdConfig);

        // Function to generate random colors for datasets
        function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }
    </script>
@endsection
@push('scripts')
    <script>
        $('#from_date, #to_date').on('change', function() {
            var fromDate = $('#from_date').val();
            var toDate = $('#to_date').val();

            $.ajax({
                url: '{{ route('admin.home') }}',
                type: 'GET',
                data: {
                    from_date: fromDate,
                    to_date: toDate,
                },
                success: function(response) {
                    // Update the dashboard with the new data
                    updateCharts(response);
                }
            });
        });

        function updateCharts(data) {
            // Update demographic chart
            showDemographics({
                totalMale: data.totalMale,
                totalFemale: data.totalFemale,
                accompanyingFamilyMembers: data.accompanyingFamilyMembers,
                accompanyingFemaleFamilyMembers: data.accompanyingFemaleFamilyMembers,
                accompanyingChildren: data.accompanyingChildren,
                accompanyingFemaleChildren: data.accompanyingFemaleChildren,
                accompanyingLeftinCoA: data.accompanyingLeftinCoA
            });

            // Update area chart
            updateAreaChart({
                asylumCountries: data.asylumCountries,
                totalAsylumMaleData: data.totalAsylumMaleData,
                totalAsylumFemaleData: data.totalAsylumFemaleData,
                asylumAccompanyingFamilyMembersData: data.asylumAccompanyingFamilyMembersData,
                asylumAccompanyingFemaleFamilyMembersData: data.asylumAccompanyingFemaleFamilyMembersData,
                asylumAccompanyingChildrenData: data.asylumAccompanyingChildrenData,
                asylumAccompanyingFemaleChildrenData: data.asylumAccompanyingFemaleChildrenData,
                asylumAccompanyingLeftinCoAData: data.asylumAccompanyingLeftinCoAData
            });

            // Update monthly chart
            updateMonthlyChart(data.formattedMonthlyData);

            // Update SSD chart
            updateSSDChart(data.futurePlanMonthlyData);
        }

        // Update the showDemographics function to recreate the chart with new data
        function showDemographics(data) {
            var labels = ["Total Male", "Total Female", "Accompanying Family Members", "Accompanying Female Family Members",
                "Accompanying Children", "Accompanying Female Children", "Household Members Left in CoA"
            ];
            var values = [
                data.totalMale,
                data.totalFemale,
                data.accompanyingFamilyMembers,
                data.accompanyingFemaleFamilyMembers,
                data.accompanyingChildren,
                data.accompanyingFemaleChildren,
                data.accompanyingLeftinCoA // Adding the new data
            ];

            var backgroundColors = [
                'rgba(75, 192, 192, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 205, 86, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)',
                'rgba(0, 0, 0, 0.2)' // Added the new background color
            ];

            var borderColors = [
                'rgba(75, 192, 192, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 205, 86, 1)',
                'rgba(255, 99, 132, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)',
                'rgba(0, 0, 0, 1)' // Added the new border color
            ];

            var datasets = labels.map((label, index) => {
                return {
                    label: label,
                    data: [values[index]],
                    backgroundColor: backgroundColors[index],
                    borderColor: borderColors[index],
                    borderWidth: 1
                };
            });

            var ctx = document.getElementById('demographics-chart').getContext('2d');
            if (window.myChart) {
                window.myChart.destroy();
            }
            window.myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['Categories'], // Single label to group all categories
                    datasets: datasets
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: {
                            display: true,
                            title: {
                                display: true,
                                text: 'Demographic Categories'
                            }
                        },
                        y: {
                            display: true,
                            title: {
                                display: true,
                                text: 'Count'
                            }
                        }
                    }
                }
            });
        }

        // Function to update area chart
        function updateAreaChart(data) {
            var ctx = document.getElementById('area-chart').getContext('2d');
            if (window.areaChart) {
                window.areaChart.destroy();
            }
            window.areaChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: data.asylumCountries,
                    datasets: [{
                            label: "Total Male",
                            data: data.totalAsylumMaleData,
                            borderColor: 'rgba(255, 99, 132, 1)',
                            backgroundColor: 'rgba(255, 99, 132, 0.4)',
                            fill: true
                        },
                        {
                            label: "Total Female",
                            data: data.totalAsylumFemaleData,
                            borderColor: 'rgba(54, 162, 235, 1)',
                            backgroundColor: 'rgba(54, 162, 235, 0.4)',
                            fill: true
                        },
                        {
                            label: "Accompanying Family Members",
                            data: data.asylumAccompanyingFamilyMembersData,
                            borderColor: 'rgba(255, 205, 86, 1)',
                            backgroundColor: 'rgba(255, 205, 86, 0.4)',
                            fill: true
                        },
                        {
                            label: "Accompanying Female Family Members",
                            data: data.asylumAccompanyingFemaleFamilyMembersData,
                            borderColor: 'rgba(75, 192, 192, 1)',
                            backgroundColor: 'rgba(75, 192, 192, 0.4)',
                            fill: true
                        },
                        {
                            label: "Accompanying Children",
                            data: data.asylumAccompanyingChildrenData,
                            borderColor: 'rgba(153, 102, 255, 1)',
                            backgroundColor: 'rgba(153, 102, 255, 0.4)',
                            fill: true
                        },
                        {
                            label: "Accompanying Female Children",
                            data: data.asylumAccompanyingFemaleChildrenData,
                            borderColor: 'rgba(255, 159, 64, 1)',
                            backgroundColor: 'rgba(255, 159, 64, 0.4)',
                            fill: true
                        },
                        {
                            label: "Household Members Left in CoA",
                            data: data.asylumAccompanyingLeftinCoAData,
                            borderColor: 'rgba(0, 0, 0, 1)',
                            backgroundColor: 'rgba(0, 0, 0, 0.4)',
                            fill: true
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        tooltip: {
                            mode: 'index',
                            intersect: false
                        }
                    },
                    scales: {
                        x: {
                            title: {
                                display: true,
                                text: 'Asylum Countries'
                            }
                        },
                        y: {
                            stacked: true,
                            title: {
                                display: true,
                                text: 'Value'
                            }
                        }
                    }
                }
            });
        }

        // Function to update monthly chart
        function updateMonthlyChart(formattedMonthlyData) {
            const labels = formattedMonthlyData.map(item => item.month);
            const totalMaleData = formattedMonthlyData.map(item => item.total_male);
            const totalFemaleData = formattedMonthlyData.map(item => item.total_female);
            const totalFamilyMembersData = formattedMonthlyData.map(item => item.total_family_members);
            const totalFemaleFamilyMembersData = formattedMonthlyData.map(item => item.total_female_family_members);
            const totalChildrensData = formattedMonthlyData.map(item => item.total_childrens);
            const totalFemaleChildrensData = formattedMonthlyData.map(item => item.total_female_childrens);
            const totalMembersInCoAData = formattedMonthlyData.map(item => item.total_members_in_co_a);

            const datasets = [{
                    label: 'Total Male',
                    backgroundColor: 'rgba(255, 99, 132, 0.7)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    data: totalMaleData
                },
                {
                    label: 'Total Female',
                    backgroundColor: 'rgba(54, 162, 235, 0.7)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    data: totalFemaleData
                },
                {
                    label: 'Total Family Members',
                    backgroundColor: 'rgba(255, 205, 86, 0.7)',
                    borderColor: 'rgba(255, 205, 86, 1)',
                    data: totalFamilyMembersData
                },
                {
                    label: 'Total Female Family Members',
                    backgroundColor: 'rgba(75, 192, 192, 0.7)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    data: totalFemaleFamilyMembersData
                },
                {
                    label: 'Total Childrens',
                    backgroundColor: 'rgba(153, 102, 255, 0.7)',
                    borderColor: 'rgba(153, 102, 255, 1)',
                    data: totalChildrensData
                },
                {
                    label: 'Total Female Childrens',
                    backgroundColor: 'rgba(255, 159, 64, 0.7)',
                    borderColor: 'rgba(255, 159, 64, 1)',
                    data: totalFemaleChildrensData
                },
                {
                    label: 'Total Members in CoA',
                    backgroundColor: 'rgba(0, 0, 0, 0.7)',
                    borderColor: 'rgba(0, 0, 0, 1)',
                    data: totalMembersInCoAData
                },
                // Add more datasets as needed
            ];

            const config = {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: datasets
                },
                options: {
                    responsive: true,
                    plugins: {
                        title: {
                            display: false,
                            text: 'Month-wise Chart'
                        }
                    },
                    scales: {
                        x: {
                            stacked: true,
                            title: {
                                display: true,
                                text: 'Month-wise Chart'
                            }
                        },
                        y: {
                            stacked: true,
                            title: {
                                display: true,
                                text: 'Value'
                            }
                        }
                    }
                }
            };

            const ctxMonth = document.getElementById('myChart').getContext('2d');
            if (window.myMonthChart) {
                window.myMonthChart.destroy();
            }
            window.myMonthChart = new Chart(ctxMonth, config);
        }

        // Function to update SSD chart
        function updateSSDChart(futurePlanMonthlyData) {
            const ssdLabels = futurePlanMonthlyData.map(item => item.month);
            const categories = Object.keys(futurePlanMonthlyData[0]).slice(1); // Remove 'month' from categories

            // Initialize datasets array
            const ssdDatasets = categories.map(category => ({
                label: category,
                backgroundColor: getRandomColor(), // Define a function to generate random colors
                borderColor: getRandomColor(),
                data: futurePlanMonthlyData.map(item => item[category])
            }));

            const ssdConfig = {
                type: 'bar',
                data: {
                    labels: ssdLabels,
                    datasets: ssdDatasets
                },
                options: {
                    responsive: true,
                    plugins: {
                        title: {
                            display: false,
                            text: 'Future Plans'
                        }
                    },
                    scales: {
                        x: {
                            title: {
                                display: true,
                                text: 'Future Plans stay in SSD'
                            },
                            stacked: true
                        },
                        y: {
                            stacked: true,
                            title: {
                                display: true,
                                text: 'Value'
                            }
                        }
                    }
                }
            };

            const ctx_ssd = document.getElementById('ssd-chart').getContext('2d');
            if (window.mySSDChart) {
                window.mySSDChart.destroy();
            }
            window.mySSDChart = new Chart(ctx_ssd, ssdConfig);
        }

        // Function to generate random colors for datasets
        function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        // Initialize charts on page load
        $(document).ready(function() {
            showDemographics({
                totalMale: {{ $totalMale }},
                totalFemale: {{ $totalFemale }},
                accompanyingFamilyMembers: {{ $accompanyingFamilyMembers }},
                accompanyingFemaleFamilyMembers: {{ $accompanyingFemaleFamilyMembers }},
                accompanyingChildren: {{ $accompanyingChildren }},
                accompanyingFemaleChildren: {{ $accompanyingFemaleChildren }},
                accompanyingLeftinCoA: {{ $accompanyingLeftinCoA }} // Adding the new data
            });

            updateAreaChart({
                asylumCountries: {!! json_encode($asylumCountries) !!},
                totalAsylumMaleData: {!! json_encode(array_values($totalAsylumMaleData)) !!},
                totalAsylumFemaleData: {!! json_encode(array_values($totalAsylumFemaleData)) !!},
                asylumAccompanyingFamilyMembersData: {!! json_encode(array_values($asylumAccompanyingFamilyMembersData)) !!},
                asylumAccompanyingFemaleFamilyMembersData: {!! json_encode(array_values($asylumAccompanyingFemaleFamilyMembersData)) !!},
                asylumAccompanyingChildrenData: {!! json_encode(array_values($asylumAccompanyingChildrenData)) !!},
                asylumAccompanyingFemaleChildrenData: {!! json_encode(array_values($asylumAccompanyingFemaleChildrenData)) !!},
                asylumAccompanyingLeftinCoAData: {!! json_encode(array_values($asylumAccompanyingLeftinCoAData)) !!}
            });

            updateMonthlyChart({!! json_encode($formattedMonthlyData) !!});
            updateSSDChart({!! json_encode($futurePlanMonthlyData) !!});
        });
    </script>
@endpush