@extends('layouts.app')
@section('content')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets\css\dashboard.css') }}">

    @php $user = \Auth::user(); @endphp
    <div class="page-wrapper Medical-oxygen-equipment-infrastructure-01">
        <div class="page-body home-dashboard-head">
            <div class="row">
                <div class="col-sm-12">
                    @include('common.error')
                </div>
            </div>
            <!-- Main -->
            <!-- Main Card Row One -->
            <div class="row">
                <div class="col-md-6 col-lg-3">
                    <div class="score-card sc_color_1">
                        <div class="txt-icon">
                            <img src="{{ asset('assets\images\auth/TOTAL-REGISTRATION.svg') }}" />
                        </div>
                        <h2>{{ $registration }}</h2>
                        <div class="txt-cd">TOTAL NO. OF REGISTRATION</div>
                        <img class="img-fluid hexaagon-shape" src="{{ asset('assets\images\auth/hexagon_shape.svg') }}" />
                    </div>
                </div>

                <div class="col-md-6 col-lg-3">
                    <div class="score-card sc_color_2">
                        <div class="txt-icon">
                            <img src="{{ asset('assets\images\auth/COMPLETED-APPLICATIONS.svg') }}" />
                        </div>
                        <h2>{{ $completed_applicarions }}</h2>
                        <div class="txt-cd">TOTAL COMPLETED APPLICATIONS</div>
                        <img class="img-fluid hexaagon-shape" src="{{ asset('assets\images\auth/hexagon_shape.svg') }}" />
                    </div>
                </div>

                <div class="col-md-6 col-lg-3">
                    <div class="score-card sc_color_3">
                        <h2>{{ $in_process }}</h2>
                        <div class="txt-icon">
                            <img src="{{ asset('assets\images\auth/PROGRESS.svg') }}" />
                        </div>
                        <div class="txt-cd">IN PROGRESS</div>
                        <img class="img-fluid hexaagon-shape" src="{{ asset('assets\images\auth/hexagon_shape.svg') }}" />
                    </div>
                </div>

                <div class="col-md-6 col-lg-3">
                    <div class="score-card sc_color_4">
                        <div class="txt-icon">
                            <img src="{{ asset('assets\images\auth/TOTAL-MEMBERS.svg') }}" />
                        </div>
                        <h2>{{ $total_members }}</h2>
                        <div class="txt-cd">MEMBERS</div>
                        <img class="img-fluid hexaagon-shape" src="{{ asset('assets\images\auth/hexagon_shape.svg') }}" />
                    </div>
                </div>
            </div>

            <form class="" method="GET" action="{{ url('home') }}" id="needs-validation">
                @csrf
                <div class="row">
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-block">
                                <div class="row">

                                    <div class="col-sm- col-md-3 col-lg-4">
                                        <select name="filter_data" class="form-control" id="filter_data">
                                            <option value="">--Select Program--</option>
                                            @foreach ($mst_programs as $key => $value)
                                                <option value="{{ $value->program_id }}"
                                                    {{ !empty(Session::get('manage_home_filter_session')['filter_data']) && Session::get('manage_home_filter_session')['filter_data'] == $value->program_id ? 'selected' : '' }}>
                                                    {{ $value->program_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-sm-3 col-md-3 col-lg-3">
                                        <button class="btn btn-primary btn_submit" name="filter" id="filter"
                                            value="Search" type="submit">Filter</button>
                                        <button type="submit" name="clearFilter" id="clearFilter" class="btn btn-danger"
                                            value="clear">Clear</button>
                                    </div>
                                    {{-- <div class="col-md-5 text-right">
                                        <a href="{{ url('shortlistexcelexport') }}">
                                            <img src="{{ asset('assets\images\excel.png') }}" data-toggle="tooltip"
                                                data-placement="left" alt="Excel Export" style="height: 40px;"
                                                title="Excel Export"></a>
                                    </div> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            <!-- Main Card Row Two -->
            <div class="row graph-length">
                <div class="col-md-6 col-lg-6">
                    <div class="card">
                        <div class="card-body">
                            <p class="chart-title text-center">Religion Wise</p>
                            <div id="pie-chart-4"></div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-lg-6">
                    <div class="card">
                        <div class="card-body">
                            <p class="chart-title text-center">Caste Category</p>
                            <div id="bar-chart-1"></div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-lg-6">
                    <div class="card">
                        <div class="card-body">
                            <p class="chart-title text-center">Gender Wise Report</p>
                            <div id="pie-chart-2"></div>
                        </div>
                    </div>
                </div>




                <div class="col-md-6 col-lg-6">
                    <div class="card">
                        <div class="card-body">
                            <p class="chart-title text-center">Outreach Channels</p>
                            <div id="pie-chart-3"></div>
                        </div>
                    </div>
                </div>



                @if (!empty(Session::get('manage_home_filter_session')['filter_data']))
                    @if (Session::get('manage_home_filter_session')['filter_data'] == 11)
                        <div class="col-md-6 col-lg-6">
                            <div class="card">
                                <div class="card-body">
                                    <p class="chart-title text-center">Political Experience</p>
                                    <div id="politicalExperience"></div>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="col-md-6 col-lg-6">
                            <div class="card">
                                <div class="card-body">
                                    <p class="chart-title text-center">Position Elected</p>
                                    <div id="positionElected"></div>
                                </div>
                            </div>
                        </div>
                    @endif
                @else
                    <div class="col-md-6 col-lg-6">
                        <div class="card">
                            <div class="card-body">
                                <p class="chart-title text-center">Position Elected</p>
                                <div id="positionElected"></div>
                            </div>
                        </div>
                    </div>
                @endif

                <div class="col-md-6 col-lg-6">
                    <div class="card">
                        <div class="card-body">
                            <p class="chart-title text-center">Political Party</p>
                            <div id="polticalParty"></div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <p class="chart-title text-center">State Wise</p>
                            <div id="state_bar-chart-5"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Pie Chart Library -->
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="{{ asset('assets\js\pie-chart.js') }}"></script>

    <!-- Language Wise Report Pie Chart -->
    @php
        $cast_wise = json_encode($cast_wise);
    @endphp
    <script>
        // Parse JSON data from PHP into a JavaScript variable
        var bar_chart = JSON.parse('{!! addslashes($cast_wise) !!}');

        var castCounts = {};
        // Loop through the bar_chart array
        for (var i = 0; i < bar_chart.length; i++) {
            // Get the value for the current element
            var value = bar_chart[i]['value'];
            // Increment the count for the current value in the castCounts object
            if (castCounts.hasOwnProperty(value)) {
                castCounts[value]++;
            } else {
                castCounts[value] = 1;
            }
        }

        var categories = Object.keys(castCounts);
        var data = Object.values(castCounts);

        const castBarChartOptions = {
            series: [{
                name: 'Cast',
                data: data,
            }],
            chart: {
                type: 'bar',
                height: 350,
                toolbar: {
                    show: true, // Show the toolbar
                    tools: {
                        download: true, // Enable the download tool
                        selection: false,
                        zoom: false,
                        zoomin: false,
                        zoomout: false,
                        pan: false,
                        reset: false,
                    },
                    autoSelected: 'download', // Automatically select download tool
                },
            },
            colors: ['#1a237e', '#880e4f', '#f57c00', '#1b5e20', '#311b92', '#004d40', '#e65100', '#1b5e20'],
            plotOptions: {
                bar: {
                    distributed: true,
                    borderRadius: 4,
                    horizontal: true, // Set to true for horizontal bars
                    columnWidth: '40%',
                },
            },
            dataLabels: {
                enabled: false,
            },
            legend: {
                show: false,
            },
            // yaxis: {
            //     categories: categories,
            // },
            xaxis: {
                categories: categories,
            },
        };

        const castBarChart = new ApexCharts(
            document.querySelector('#bar-chart-1'),
            castBarChartOptions
        );
        castBarChart.render();
    </script>
    <!-- Outreach Channels Bar Chart -->
    @php
        $outreach_channels = json_encode($outreach_channels);
    @endphp
    <script>
        // Parse JSON data from PHP into a JavaScript variable
        var bar_chart = JSON.parse('{!! addslashes($outreach_channels) !!}');

        var outreachCounts = {};
        // Loop through the bar_chart array
        for (var i = 0; i < bar_chart.length; i++) {
            // Get the value for the current element
            var value = bar_chart[i]['value'];
            // Increment the count for the current value in the outreachCounts object
            if (outreachCounts.hasOwnProperty(value)) {
                outreachCounts[value]++;
            } else {
                outreachCounts[value] = 1;
            }
        }

        var categories = Object.keys(outreachCounts);
        var data = Object.values(outreachCounts);

        const outreachBarChartOptions = {
            series: [{
                name: 'Total',
                data: data,
            }],
            chart: {
                type: 'bar',
                height: 350,
                toolbar: {
                    show: true, // Show the toolbar
                    tools: {
                        download: true, // Enable the download tool
                        selection: false,
                        zoom: false,
                        zoomin: false,
                        zoomout: false,
                        pan: false,
                        reset: false,
                    },
                    autoSelected: 'download', // Automatically select download tool
                },
            },
            colors: ['#1a237e', '#880e4f', '#f57c00', '#1b5e20', '#311b92', '#004d40', '#e65100', '#1b5e20'],
            plotOptions: {
                bar: {
                    distributed: true,
                    borderRadius: 4,
                    horizontal: true, // Set to true for horizontal bars
                    columnWidth: '40%',
                },
            },
            dataLabels: {
                enabled: false,
            },
            legend: {
                show: false,
            },
            // yaxis: {
            //     categories: categories,
            // },
            xaxis: {
                categories: categories,
            },
        };

        const outreachBarChart = new ApexCharts(
            document.querySelector('#pie-chart-3'),
            outreachBarChartOptions
        );
        outreachBarChart.render();
    </script>
    {{-- <script>
        var pie_chart = {!! $outreach_channels !!};
        
        console.log(pie_chart);
        
        var data = [];
        console.log(pie_chart);
        var instagram_count = 0;
        var facebook_count = 0;
        var twitter_count = 0;
        var linkedIn_count = 0;
        
        for (var i = 0; i < pie_chart.length; i++) {
            instagram_count += parseFloat(pie_chart[i]['instagram_count']);
            facebook_count += parseFloat(pie_chart[i]['facebook_count']);
            twitter_count += parseFloat(pie_chart[i]['twitter_count']);
            linkedIn_count += parseFloat(pie_chart[i]['linkedIn_count']);
        }
        
        data.push(instagram_count);
        data.push(facebook_count);
        data.push(twitter_count);
        data.push(linkedIn_count);
        
        const outreachBarChartOptions = {
            series: [{
                name: 'Outreach',
                data: data,
            }],
            chart: {
                type: 'bar',
                height: 350,
                toolbar: {
                    show: true, // Show the toolbar
                    tools: {
                        download: true, // Enable the download tool
                        selection: false,
                        zoom: false,
                        zoomin: false,
                        zoomout: false,
                        pan: false,
                        reset: false,
                    },
                    autoSelected: 'download', // Automatically select download tool
                },
            },
            colors: ['#FF00FF', '#1877F2', '#1DA1F2', '#2867B2'],
            plotOptions: {
                bar: {
                    distributed: true,
                    borderRadius: 4,
                    horizontal: true, // Set to true for horizontal bars
                    columnWidth: '40%',
                },
            },
            dataLabels: {
                enabled: false,
            },
            legend: {
                show: false,
            },
            xaxis: {
                categories: ['Instagram', 'Facebook', 'Twitter', 'LinkedIn'], // Use categories for x-axis
                title: {
                    text: 'Counts',
                },
            },
            yaxis: {
                title: {
                    text: '', // Y-axis title is empty
                },
            },
        };

        const outreacBarChart = new ApexCharts(
            document.querySelector('#pie-chart-3'),
            outreachBarChartOptions
        );
        outreacBarChart.render();
    </script> --}}



    <!-- Relegion Wise Bar Chart -->
    @php
        $religion_wise = json_encode($religion_wise);
    @endphp
    <script>
        // Parse JSON data from PHP into a JavaScript variable
        var bar_chart = JSON.parse('{!! addslashes($religion_wise) !!}');

        var religionCounts = {};
        // Loop through the bar_chart array
        for (var i = 0; i < bar_chart.length; i++) {
            // Get the value for the current element
            var value = bar_chart[i]['value'];
            // Increment the count for the current value in the religionCounts object
            if (religionCounts.hasOwnProperty(value)) {
                religionCounts[value]++;
            } else {
                religionCounts[value] = 1;
            }
        }

        var categories = Object.keys(religionCounts);
        var data = Object.values(religionCounts);

        const religionBarChartOptions = {
            series: [{
                name: 'Religion',
                data: data,
            }],
            chart: {
                type: 'bar',
                height: 350,
                toolbar: {
                    show: true, // Show the toolbar
                    tools: {
                        download: true, // Enable the download tool
                        selection: false,
                        zoom: false,
                        zoomin: false,
                        zoomout: false,
                        pan: false,
                        reset: false,
                    },
                    autoSelected: 'download', // Automatically select download tool
                },
            },
            colors: ['#1a237e', '#880e4f', '#f57c00', '#1b5e20', '#311b92', '#004d40', '#e65100', '#1b5e20'],
            plotOptions: {
                bar: {
                    distributed: true,
                    borderRadius: 4,
                    horizontal: true, // Set to true for horizontal bars
                    columnWidth: '40%',
                },
            },
            dataLabels: {
                enabled: false,
            },
            legend: {
                show: false,
            },
            // yaxis: {
            //     categories: categories,
            // },
            xaxis: {
                categories: categories,
            },
        };

        const religionBarChart = new ApexCharts(
            document.querySelector('#pie-chart-4'),
            religionBarChartOptions
        );
        religionBarChart.render();
    </script>


    <!-- Gender Wise Bar Chart -->
    @php
        $gender_wise = json_encode($gender_wise);
    @endphp
    {{-- <script>
        // Parse JSON data from PHP into a JavaScript variable
        var pie_chart = JSON.parse('{!! addslashes($gender_wise) !!}');
        console.log(pie_chart);

        var genderCounts = {};
        // Loop through the pie_chart array
        for (var i = 0; i < pie_chart.length; i++) {
            // Get the value for the current element
            var value = pie_chart[i]['value'];
            // Increment the count for the current value in the genderCounts object
            if (genderCounts.hasOwnProperty(value)) {
                genderCounts[value]++;
            } else {
                genderCounts[value] = 1;
            }
        }
        var data = Object.values(genderCounts);
        const pieChartOptions2 = {
            series: data,
            chart: {
                type: 'donut',
                height: 350,
                toolbar: {
                    show: false,
                },
            },
            labels: Object.keys(genderCounts),
            colors: ['#246dec', '#cc3c43', '#367952', '#f5b74f', '#4f35a1'],
            legend: {
                show: true,
                position: 'bottom',
                horizontalAlign: 'center',
                floating: false,
                fontSize: '14px',
                fontFamily: 'Helvetica, Arial',
                fontWeight: 400,
                offsetX: 0,
                offsetY: 8,
            },
            plotOptions: {
                pie: {
                    donut: {
                        size: '60%', // Decrease the size of the hole to 60%
                    },
                },
            },
            dataLabels: {
                enabled: true,
                formatter: function(val, opts) {
                    return `${opts.w.config.series[opts.seriesIndex]}%`;
                },
            },
            responsive: [{
                breakpoint: 480,
                options: {
                    chart: {
                        width: 200,
                    },
                    legend: {
                        show: false,
                    },
                },
            }],
        };

        const pieChart2 = new ApexCharts(
            document.querySelector('#pie-chart-2'),
            pieChartOptions2
        );
        pieChart2.render();
    </script> --}}
    <script>
        // Parse JSON data from PHP into a JavaScript variable
        var bar_chart = JSON.parse('{!! addslashes($gender_wise) !!}');

        var genderCounts = {};
        // Loop through the bar_chart array
        for (var i = 0; i < bar_chart.length; i++) {
            // Get the value for the current element
            var value = bar_chart[i]['value'];
            // Increment the count for the current value in the genderCounts object
            if (genderCounts.hasOwnProperty(value)) {
                genderCounts[value]++;
            } else {
                genderCounts[value] = 1;
            }
        }

        var categories = Object.keys(genderCounts);
        var data = Object.values(genderCounts);

        const genderBarChartOptions = {
            series: [{
                name: 'Gender',
                data: data,
            }],
            chart: {
                type: 'bar',
                height: 350,
                toolbar: {
                    show: true, // Show the toolbar
                    tools: {
                        download: true, // Enable the download tool
                        selection: false,
                        zoom: false,
                        zoomin: false,
                        zoomout: false,
                        pan: false,
                        reset: false,
                    },
                    autoSelected: 'download', // Automatically select download tool
                },
            },
            colors: ['#8e99f3', '#ff7fc7', '#004d40', '#e65100', '#ffc107', '#228b22', ],
            plotOptions: {
                bar: {
                    distributed: true,
                    borderRadius: 4,
                    horizontal: true, // Set to true for horizontal bars
                    columnWidth: '40%',
                },
            },
            dataLabels: {
                enabled: false,
            },
            legend: {
                show: false,
            },
            // yaxis: {
            //     categories: categories,
            // },
            xaxis: {
                categories: categories,
            },
        };

        const genderBarChart = new ApexCharts(
            document.querySelector('#pie-chart-2'),
            genderBarChartOptions
        );
        genderBarChart.render();
    </script>

    <!-- State Wise Bar Chart -->
    @php
        $state_wise = json_encode($state_wise);
    @endphp
    <script>
        // Parse JSON data from PHP into a JavaScript variable
        var bar_chart = JSON.parse('{!! addslashes($state_wise) !!}');

        var stateWiseCounts = {};
        // Loop through the bar_chart array
        for (var i = 0; i < bar_chart.length; i++) {
            // Get the value for the current element
            var value = bar_chart[i]['value'];
            // Increment the count for the current value in the stateWiseCounts object
            if (stateWiseCounts.hasOwnProperty(value)) {
                stateWiseCounts[value]++;
            } else {
                stateWiseCounts[value] = 1;
            }
        }

        var categories = Object.keys(stateWiseCounts);
        var data = Object.values(stateWiseCounts);

        const stateBarChartOptions = {
            series: [{
                name: 'State',
                data: data,
            }],
            chart: {
                type: 'bar',
                height: 350,
                toolbar: {
                    show: true, // Show the toolbar
                    tools: {
                        download: true, // Enable the download tool
                    },
                    autoSelected: 'download', // Automatically select download tool
                },
            },
            colors: [
                '#1f77b4', // Andaman and Nicobar Islands (Blue)
                '#ff7f0e', // Andhra Pradesh (Orange)
                '#2ca02c', // Arunachal Pradesh (Green)
                '#d62728', // Assam (Red)
                '#9467bd', // Bihar (Purple)
                '#8c564b', // Chandigarh (Brown)
                '#e377c2', // Chhattisgarh (Pink)
                '#7f7f7f', // Dadra and Nagar Haveli and Daman and Diu (Grey)
                '#bcbd22', // Delhi (Lime)
                '#17becf', // Goa (Cyan)
                '#9edae5', // Gujarat (Light Blue)
                '#393b79', // Haryana (Dark Blue)
                '#5254a3', // Himachal Pradesh (Indigo)
                '#6b6ecf', // Jammu and Kashmir (Light Indigo)
                '#637939', // Jharkhand (Dark Green)
                '#8ca252', // Karnataka (Yellow Green)
                '#b5cf6b', // Kerala (Yellow)
                '#cedb9c', // Ladakh (Light Yellow Green)
                '#ad494a', // Lakshadweep (Dark Red)
                '#ff9896', // Madhya Pradesh (Light Red)
                '#9467bd', // Maharashtra (Purple)
                '#c5b0d5', // Manipur (Lavender)
                '#8c564b', // Meghalaya (Brown)
                '#c49c94', // Mizoram (Light Brown)
                '#e377c2', // Nagaland (Pink)
                '#f7b6d2', // Odisha (Light Pink)
                '#c7c7c7', // Puducherry (Light Grey)
                '#bcbd22', // Punjab (Lime)
                '#dbdb8d', // Rajasthan (Light Lime)
                '#17becf', // Sikkim (Cyan)
                '#9edae5', // Tamil Nadu (Light Blue)
                '#393b79', // Telangana (Dark Blue)
                '#5254a3', // Tripura (Indigo)
                '#6b6ecf', // Uttar Pradesh (Light Indigo)
                '#637939', // Uttarakhand (Dark Green)
                '#8ca252' // West Bengal (Yellow Green)
            ],
            plotOptions: {
                bar: {
                    distributed: true,
                    borderRadius: 4,
                    horizontal: false,
                    columnWidth: '40%',
                },
            },
            dataLabels: {
                enabled: false,
            },
            legend: {
                show: false,
            },
            xaxis: {
                categories: categories,
            },
            yaxis: {
                title: {
                    text: '',
                },
            },
        };

        const stateBarChart = new ApexCharts(
            document.querySelector('#state_bar-chart-5'),
            stateBarChartOptions
        );
        stateBarChart.render();
    </script>
    <!-- Political Party Bar Chart -->
    @php
        $poltical_party = json_encode($poltical_party);
    @endphp
    <script>
        var bar_chart = JSON.parse('{!! addslashes($poltical_party) !!}');

        var polticalPartyCounts = {};
        for (var i = 0; i < bar_chart.length; i++) {
            var value = bar_chart[i]['value'];
            if (polticalPartyCounts.hasOwnProperty(value)) {
                polticalPartyCounts[value]++;
            } else {
                polticalPartyCounts[value] = 1;
            }
        }

        var categories = Object.keys(polticalPartyCounts);
        var data = Object.values(polticalPartyCounts);

        const politicalPartyChartOptions = {
            series: [{
                name: 'Political Party',
                data: data,
            }],
            chart: {
                type: 'bar',
                height: 350,
                toolbar: {
                    show: true,
                    tools: {
                        download: true, // Enable the download tool
                    },
                    autoSelected: 'download', // Automatically select download tool
                },
            },
            colors: ['#263238', '#1a237e', '#e65100', '#1976d2', '#2e7d32', '#b71c1c', '#8c0032', '#e64a19', '#f9a825',
                '#558b2f', '#78909c'
            ],
            plotOptions: {
                bar: {
                    distributed: true,
                    borderRadius: 4,
                    horizontal: false,
                    columnWidth: '40%',
                },
            },
            dataLabels: {
                enabled: false,
            },
            legend: {
                show: false,
            },
            xaxis: {
                categories: categories,
                labels: {
                    rotate: -45,
                    style: {
                        fontSize: '11px',
                    }
                }
            },
            yaxis: {
                title: {
                    text: '',
                },
            },
        };

        const politicalPartyChart = new ApexCharts(
            document.querySelector('#polticalParty'),
            politicalPartyChartOptions
        );
        politicalPartyChart.render();
    </script>

    <!-- Position Elected Bar Chart -->
    @php
        $position_elected = json_encode($position_elected);
    @endphp
    <script>
        var bar_chart = JSON.parse('{!! addslashes($position_elected) !!}');

        var positionElectedCounts = {};
        for (var i = 0; i < bar_chart.length; i++) {
            var value = bar_chart[i]['value'];
            if (positionElectedCounts.hasOwnProperty(value)) {
                positionElectedCounts[value]++;
            } else {
                positionElectedCounts[value] = 1;
            }
        }

        var categories = Object.keys(positionElectedCounts);
        var data = Object.values(positionElectedCounts);

        const barChartOptions = {
            series: [{
                name: 'Position Elected',
                data: data,
            }],
            chart: {
                type: 'bar',
                height: 350,
                toolbar: {
                    show: true, // Show the toolbar
                    tools: {
                        download: true, // Enable the download tool
                        selection: false,
                        zoom: false,
                        zoomin: false,
                        zoomout: false,
                        pan: false,
                        reset: false,
                    },
                    autoSelected: 'download', // Automatically select download tool
                },
            },
            colors: ['#1a237e', '#880e4f', '#1b5e20', '#f57c00', '#311b92', '#004d40', '#e65100', '#1b5e20'],
            plotOptions: {
                bar: {
                    distributed: true,
                    borderRadius: 4,
                    horizontal: false,
                    columnWidth: '40%',
                },
            },
            dataLabels: {
                enabled: false,
            },
            legend: {
                show: false,
            },
            xaxis: {
                categories: categories,
                labels: {
                    rotate: -45,
                    style: {
                        fontSize: '10px',
                    },
                    wrap: true, // Enable word wrapping
                    maxWidth: 5 // Maximum width for each label before wrapping
                }
            },
            yaxis: {
                title: {
                    text: '',
                },
            },
        };

        const barChart = new ApexCharts(
            document.querySelector('#positionElected'),
            barChartOptions
        );
        barChart.render();
    </script>

    <!-- Political Experience Bar Chart -->
    @php
        $political_experience = json_encode($political_experience);
    @endphp
    <script>
        // Parse JSON data from PHP into a JavaScript variable
        var bar_chart = JSON.parse('{!! addslashes($political_experience) !!}');

        var politicalExperienceCounts = {};
        // Loop through the bar_chart array
        for (var i = 0; i < bar_chart.length; i++) {
            // Get the value for the current element
            var value = bar_chart[i]['value'];
            // Increment the count for the current value in the politicalExperienceCounts object
            if (politicalExperienceCounts.hasOwnProperty(value)) {
                politicalExperienceCounts[value]++;
            } else {
                politicalExperienceCounts[value] = 1;
            }
        }

        var categories = Object.keys(politicalExperienceCounts);
        var data = Object.values(politicalExperienceCounts);

        const politicalExperienceBarChartOptions = {
            series: [{
                name: 'Total',
                data: data,
            }],
            chart: {
                type: 'bar',
                height: 350,
                toolbar: {
                    show: true, // Show the toolbar
                    tools: {
                        download: true, // Enable the download tool
                        selection: false,
                        zoom: false,
                        zoomin: false,
                        zoomout: false,
                        pan: false,
                        reset: false,
                    },
                    autoSelected: 'download', // Automatically select download tool
                },
            },
            colors: ['#C0C0C0', '#808080', '#800000', '#808000', '#008000', '#800080', '#008080', '#000080', '00FF00',
                '00FFFF'
            ],
            plotOptions: {
                bar: {
                    distributed: true,
                    borderRadius: 4,
                    horizontal: false,
                    columnWidth: '40%',
                },
            },
            dataLabels: {
                enabled: false,
            },
            legend: {
                show: false,
            },
            xaxis: {
                categories: categories,
                labels: {
                    rotate: -45,
                    style: {
                        fontSize: '10px',
                    }
                }
            },
            yaxis: {
                title: {
                    text: '',
                },
            },
        };

        const politicalExperienceBarChart = new ApexCharts(
            document.querySelector('#politicalExperience'),
            politicalExperienceBarChartOptions
        );
        politicalExperienceBarChart.render();
    </script>
@endsection