@extends('operations.layout.mainlayout')

<link rel="stylesheet" href="/warehouse_components/css/dashboard.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
<script src="/js/jquery-3.6.0.min.js"></script>
<script src="/bower_components/admin-lte/plugins/chart.js/Chart.min.js"></script>


<style>
    .chart-container {
        position: relative;
        height: 350px;
        width: 100%;
    }
    .map-container {
        height: 400px;
        width: 100%;
    }
    #total-patients {
        min-width: 300px;
    }
</style>
@section('content')
<div class="container-fluid">
    <div class="flex items-center justify-between mb-6">
        <div class="flex items-center">
        </div>
        <div class="flex items-center">
            <img src="{{ url('/images/ministry-of-health.png') }}" alt="Hospital Logo" class="h-16">
        </div>
    </div>
    <div class="flex items-center justify-between mb-6">
        <div class="flex items-center">
            <!-- Total Patients -->
            <div class="bg-white rounded-lg p-6" id="total-patients">
                <h2 class="text-lg font-semibold text-gray-700 mb-4">Total Patients</h2>
                <div class="flex items-center">
                    <span class="text-5xl font-bold">{{ $totalPatients }}</span>
                </div>
            </div>
        </div>
        <div class="flex items-center">
            <h1 class="text-5xl font-bold text-gray-800">Diabetic Foot Dashboard</h1>
        </div>
        <div class="flex items-center">
            <div class="ml-2 text-right">
                <div id="branche_income_range_date" class="form-control"
                        style="background: transparent; border-radius: 30px; cursor: pointer; padding: 6px 20px; border: 1px solid #CCCDDA; width: 100%">
                    <i class="fa fa-calendar"></i>&nbsp;
                    <span></span> <i class="fa fa-caret-down"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">

        <!-- Gender -->
        <div class="bg-white rounded-lg p-6">
            <h2 class="text-lg font-semibold text-gray-700 mb-4">Gender</h2>
            <div class="chart-container">
                <canvas id="genderChart"></canvas>
            </div>
            <div class="mt-4 flex justify-center text-sm">
                @foreach($genderData as $gender)
                    <div class="flex items-center mx-2">
                        <span class="inline-block w-3 h-3 rounded-full mr-1" style="background-color: {{ $gender->name == 'Male' ? '#d0c9fd' : '#d4edff' }}"></span>
                        <span>{{ $gender->name }} {{ $gender->percentage }}%</span>
                    </div>
                @endforeach
            </div>
        </div>
        
        <!-- Age Group -->
        <div class="bg-white rounded-lg p-6">
            <h2 class="text-lg font-semibold text-gray-700 mb-4">Age Group</h2>
            <div class="chart-container">
                <canvas id="ageGroupChart"></canvas>
            </div>
            <div class="mt-4 flex justify-center text-sm">
                @foreach($ageGroupData as $ageGroup)
                    <div class="flex items-center mx-2">
                        <span class="inline-block w-3 h-3 rounded-full mr-1" style="background-color: #d0c9fd"></span>
                        <span>{{ $ageGroup['name'] }} ({{ $ageGroup['percentage'] }}%)</span>
                    </div>
                @endforeach
            </div>
        </div>

        
        <!-- Type of Amputation -->
        <div class="bg-white rounded-lg p-6">
            <h2 class="text-lg font-semibold text-gray-700 mb-4">Type of Amputation</h2>
            <div class="chart-container">
                <canvas id="amputationChart"></canvas>
            </div>
            <div class="mt-4 flex justify-center text-sm">
                @foreach($amputationData as $amputation)
                    <div class="flex items-center mx-2">
                        <span class="inline-block w-3 h-3 rounded-full mr-1" style="background-color: #d0c9fd"></span>
                        <span>{{ $amputation['name'] }} ({{ $amputation['percentage'] }}%)</span>
                    </div>
                @endforeach
            </div>
        </div>
        
        <!-- Patients Per Province -->
        <div class="bg-white rounded-lg p-6 col-span-1 md:col-span-3 lg:col-span-1">
            <h2 class="text-lg font-semibold text-gray-700 mb-4">Patients per Province</h2>
            <div class="map-container">
                <div class="wave-loader-map" id="map-loader">
                    <div class="wave top-wave" style="margin-left: 30%;width: 50%">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                    <div class="wave bottom-wave" style="margin-left: 30%;width: 50%">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>
                <div id="patientsPerProvince-container"></div>
                <div id="saudi-map" style="height: 100%; width: 100%;"></div>
            </div>
        </div>
        
        <!-- HBA1C -->
        <div class="bg-white rounded-lg p-6">
            <h2 class="text-lg font-semibold text-gray-700 mb-4">HBA1C</h2>
            <div class="chart-container">
                <canvas id="hba1cChart"></canvas>
            </div>
            <div class="mt-4 flex justify-center text-sm">
                @foreach($hba1cData as $hba1c)
                    <div class="flex items-center mx-2">
                        <span class="inline-block w-3 h-3 rounded-full mr-1" style="background-color: #d0c9fd"></span>
                        <span>{{ $hba1c['name'] }} ({{ $hba1c['percentage'] }}%)</span>
                    </div>
                @endforeach
            </div>
        </div>
        
        <!-- Referral for Emergency -->
        <div class="bg-white rounded-lg p-6">
            <h2 class="text-lg font-semibold text-gray-700 mb-4">Referral for Emergency</h2>
            <div class="chart-container">
                <canvas id="emergencyChart"></canvas>
            </div>
            <div class="mt-4 flex justify-center text-sm">
                @foreach($emergencyData as $emergency)
                    <div class="flex items-center mx-2">
                        <span class="inline-block w-3 h-3 rounded-full mr-1" style="background-color: #d0c9fd"></span>
                        <span>{{ $emergency['name'] }} ({{ $emergency['percentage'] }}%)</span>
                    </div>
                @endforeach
            </div>
        </div>
        
        <!-- PAD -->
        <div class="bg-white rounded-lg p-6">
            <h2 class="text-lg font-semibold text-gray-700 mb-4">PAD</h2>
            <div class="chart-container">
                <canvas id="padChart"></canvas>
            </div>
            <div class="mt-4 flex justify-center text-sm">
                @foreach($padData as $pad)
                    <div class="flex items-center mx-2">
                        <span class="inline-block w-3 h-3 rounded-full mr-1" style="background-color: #d0c9fd"></span>
                        <span>{{ $pad['name'] }} ({{ $pad['percentage'] }}%)</span>
                    </div>
                @endforeach
            </div>
        </div>
        
        <!-- Type of Diabetes -->
        <div class="bg-white rounded-lg p-6">
            <h2 class="text-lg font-semibold text-gray-700 mb-4">Type of Diabetes</h2>
            <div class="chart-container">
                <canvas id="diabetesTypeChart"></canvas>
            </div>
            <div class="mt-4 flex justify-center text-sm">
                @foreach($diabetesTypeData as $diabetesType)
                    <div class="flex items-center mx-2">
                        <span class="inline-block w-3 h-3 rounded-full mr-1" style="background-color: #d0c9fd"></span>
                        <span>{{ $diabetesType['name'] }} ({{ $diabetesType['percentage'] }}%)</span>
                    </div>
                @endforeach
            </div>
        </div>
        
        <!-- Affected Area -->
        <div class="bg-white rounded-lg p-6">
            <h2 class="text-lg font-semibold text-gray-700 mb-4">Affected Area</h2>
            <div class="chart-container">
                <canvas id="affectedAreaChart"></canvas>
            </div>
            <div class="mt-4 flex justify-center text-sm flex-wrap">
                @foreach($affectedAreaData as $affectedArea)
                    <div class="flex items-center mx-2 my-1">
                        <span class="inline-block w-3 h-3 rounded-full mr-1" style="background-color: {{ $affectedArea->color }}"></span>
                        <span>{{ $affectedArea->name }} {{ $affectedArea->percentage }}%</span>
                    </div>
                @endforeach
            </div>
        </div>
        
        <!-- Diabetic Ulcers -->
        <div class="bg-white rounded-lg p-6">
            <h2 class="text-lg font-semibold text-gray-700 mb-4">Diabetic Ulcers</h2>
            <div class="chart-container">
                <canvas id="diabeticUlcersChart"></canvas>
            </div>
            <div class="mt-4 flex justify-center text-sm flex-wrap">
                @foreach($diabeticUlcersData as $diabeticUlcer)
                    <div class="flex items-center mx-2 my-1">
                        <span class="inline-block w-3 h-3 rounded-full mr-1" style="background-color: {{ $diabeticUlcer['color'] }}"></span>
                        <span>{{ $diabeticUlcer['name'] }} {{ $diabeticUlcer['percentage'] }}%</span>
                    </div>
                @endforeach
            </div>
        </div>
        
        <!-- Charcot Foot -->
        <div class="bg-white rounded-lg p-6">
            <h2 class="text-lg font-semibold text-gray-700 mb-4">Charcot Foot</h2>
            <div class="chart-container">
                <canvas id="charcotFootChart"></canvas>
            </div>
            <div class="mt-4 flex justify-center text-sm">
                @foreach($charcotFootData as $charcot)
                    <div class="flex items-center mx-2">
                        <span class="inline-block w-3 h-3 rounded-full mr-1" style="background-color: #d0c9fd"></span>
                        <span>{{ $charcot['name'] }} ({{ $charcot['percentage'] }}%)</span>
                    </div>
                @endforeach
            </div>
        </div>
        
        <!-- Wound Duration -->
        <div class="bg-white rounded-lg p-6">
            <h2 class="text-lg font-semibold text-gray-700 mb-4">Wound Duration</h2>
            <div class="chart-container">
                <canvas id="woundDurationChart"></canvas>
            </div>
            <div class="mt-4 flex justify-center text-sm flex-wrap">
                @foreach($woundDurationData as $woundDuration)
                    <div class="flex items-center mx-2 my-1">
                        <span class="inline-block w-3 h-3 rounded-full mr-1" style="background-color: {{ $woundDuration->color }}"></span>
                        <span>{{ $woundDuration->name }} {{ $woundDuration->percentage }}%</span>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <div class="mt-8 text-center text-gray-600">
        <p>Powered By <img src="{{ url('/images/blazma-logo-new.jpg') }}" alt="Blazma Logo" class="h-5 mr-4" style="display: inline-block"></p>
    </div>
</div>
@endsection

@php
    $ageGroupTotal = array_sum(array_column($ageGroupData, 'count'));
    $amputationTotal = $amputationData->sum('count');
    $hba1cTotal = $hba1cData->sum('count');
    $padTotal = array_sum(array_column($padData, 'count'));
    $diabetesTypeTotal = $diabetesTypeData->sum('count');
    $charcotFootTotal = array_sum(array_column($charcotFootData, 'count'));
@endphp

<script src="/js/highmaps.js"></script>
<script src="/js/exporting.js"></script>
@section('warehouse_scripts')
    <script>
    $(document).ready(function() {
        initPatientsPerProvinceMap();
        // Update dashboard when time frame changes
        $('#timeFrameSelector').change(function() {
            const timeFrame = $(this).val();
            window.location.href = "{{ url('/operations/diabetic/foot-dashboard') }}?time_frame=" + timeFrame;
        });

        function getUrlParam(name) {
            const params = new URLSearchParams(window.location.search);
            return params.get(name);
        }

        // Parse dates from URL if available
        let fromDateParam = getUrlParam('fromDate');
        let endDateParam = getUrlParam('endDate');

        // Fallback to today's date if URL parameters are not provided
        let start = fromDateParam ? moment(fromDateParam, 'YYYY-MM-DD') : moment();
        let end = endDateParam ? moment(endDateParam, 'YYYY-MM-DD') : moment();

        function cb(start, end) {
            $('#branche_income_range_date span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        }

        $('#branche_income_range_date').daterangepicker({
            startDate: start,
            endDate: end,
            showDropdowns: true,
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                'Last 3 Months': [moment().subtract(3, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                'This Year': [moment().startOf('year'), moment().endOf('year')],
            },
            dateLimit: {
                years: 5
            }
        }, function (start, end) {
            cb(start, end); // Update UI

            const fromDate = start.format('YYYY-MM-DD');
            const toDate = end.format('YYYY-MM-DD');

            // Extract cityId from current URL
            const currentParams = new URLSearchParams(window.location.search);
            const cityId = currentParams.get('cityId');

            // Build new URL
            let newUrl = "{{ url('/operations/diabetic/foot-dashboard') }}?fromDate=" + fromDate + "&endDate=" + toDate;
            if (cityId) {
                newUrl += "&cityId=" + cityId;
            }

            window.location.href = newUrl;
        });

        // Set the label on initial load
        cb(start, end);


        // Chart colors
        const chartColors = {
            purple: '#d0c9fd',
            green: '#8cbeff',
            gray: '#afedc8'
        };

        // Gender Chart
        const genderCtx = document.getElementById('genderChart').getContext('2d');
        const genderData = {
            labels: [
                @foreach($genderData as $gender)
                    '{{ $gender->name }}',
                @endforeach
            ],
            datasets: [{
                data: [
                    @foreach($genderData as $gender)
                        {{ $gender->count }},
                    @endforeach
                ],
                backgroundColor: [
                    chartColors.green,  // Male (light blue)
                    chartColors.purple,  // Female (light pink)
                ],
                borderWidth: 0
            }]
        };
        new Chart(genderCtx, {
            type: 'pie',
            data: genderData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });
        
        // Age Group Chart
        const ageGroupCtx = document.getElementById('ageGroupChart').getContext('2d');
        const ageGroupData = {
            labels: [
                @foreach($ageGroupData as $ageGroup)
                    '{{ $ageGroup['name'] }}',
                @endforeach
            ],
            datasets: [{
                label: 'Age Group',
                data: [
                    @foreach($ageGroupData as $ageGroup)
                        {{ $ageGroup['count'] }},
                    @endforeach
                ],
                backgroundColor: Array({{ count($ageGroupData) }}).fill(chartColors.purple),
                borderWidth: 0
            }]
        };
        new Chart(ageGroupCtx, {
            type: 'bar',
            data: ageGroupData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                indexAxis: 'y',
                plugins: {
                    legend: {
                        display: false
                    },
                    datalabels: {
                        anchor: 'center',
                        align: 'center',
                        formatter: function(value) {
                            return value + '%';
                        },
                        color: '#000',
                        font: {
                            weight: 'bold'
                        }
                    }
                },
                tooltips: {
                    callbacks: {
                        title: function(tooltipItems, data) {
                            return 'Age Group'; // Always display "Age Group" as the title
                        },
                        label: function(tooltipItem, data) {
                            const label = data.labels[tooltipItem.index];
                            const value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                            return label + ': ' + value; // Show "Under 40: 3"
                        }
                    }
                },
                scales: {
                    yAxes: [{
                        display: true,
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
            }
        });

        
        // Amputation Chart
        const amputationCtx = document.getElementById('amputationChart').getContext('2d');
        const amputationData = {
            labels: [
                @foreach($amputationData as $amputation)
                    '{{ $amputation->name }}',
                @endforeach
            ],
            datasets: [{
                label: 'Type of Amputation',
                data: [
                    @foreach($amputationData as $amputation)
                        {{ $amputation->count }},
                    @endforeach
                ],
                backgroundColor: Array({{ count($amputationData) }}).fill(chartColors.purple),
                borderWidth: 0
            }]
        };

        new Chart(amputationCtx, {
            type: 'bar',
            data: amputationData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                indexAxis: 'y',
                plugins: {
                    legend: {
                        display: false
                    }
                },
                tooltips: {
                    callbacks: {
                        title: function(tooltipItems, data) {
                            return 'Type of Amputation'; // Custom fixed title
                        },
                        label: function(tooltipItem, data) {
                            const label = data.labels[tooltipItem.index];
                            const value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                            return label + ': ' + value; // e.g. "Below Knee: 2"
                        }
                    }
                },
                scales: {
                    yAxes: [{
                        display: true,
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
            }
        });

        
        function initPatientsPerProvinceMap() {

            filterPatientsPerProvinceMap(); // Initial load without date range filter
            $('#map-loader').show();
        }

        function filterPatientsPerProvinceMap(filterData = {}) {
            const { cityId = null } = filterData;
            let fromDateParam = getUrlParam('fromDate');
            let endDateParam = getUrlParam('endDate');
            $.ajax({
                url: '/operations/diabetic/patients-per-province-map',
                data: {
                    cityId: cityId,
                    fromDate: fromDateParam,
                    endDate: endDateParam
                },
                type: 'GET',
                async: true,
                dataType: "json",
                success: function(data) {
                    patientsPerProvinceMap(data);
                    $('.wave-loader').hide();
                    $('#map-loader').hide();
                }
            });
        }

        function patientsPerProvinceMap(data) {
            Highcharts.getJSON('https://code.highcharts.com/mapdata/countries/sa/sa-all.topo.json', function(geojson) {

                // Initialize the chart
                Highcharts.mapChart('patientsPerProvince-container', {
                    maintainAspectRatio: false,
                    responsive: true,
                    chart: {
                        map: geojson,
                        toolbar: {
                            show: false,
                        }
                    },
                    title: {
                        text: ''
                    },
                    mapNavigation: {
                        enabled: true,
                        buttonOptions: {
                            verticalAlign: 'bottom'
                        }
                    },
                    colorAxis: {
                        min: 0,
                    },
                    series: [{
                        data: data,
                        name: 'Total Tests',
                        states: {
                            hover: {
                                color: '#e35a80'
                            }
                        },
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}'
                        },
                        point: {
                            events: {
                                click: function() {
                                    // When a city (point) is clicked, call the filter function with city info
                                    const cityId = this['hc-key'];

                                    // Get current URL parameters
                                    const urlParams = new URLSearchParams(window.location.search);
                                    const fromDate = urlParams.get('fromDate');
                                    const endDate = urlParams.get('endDate');
                                    const timeFrame = urlParams.get('time_frame');

                                    // Build new URL
                                    let newUrl = `/operations/diabetic/foot-dashboard?cityId=${cityId}`;
                                    if (timeFrame) {
                                        newUrl += `&time_frame=${encodeURIComponent(timeFrame)}`;
                                    }

                                    if (fromDate && endDate) {
                                        newUrl += `&fromDate=${encodeURIComponent(fromDate)}&endDate=${encodeURIComponent(endDate)}`;
                                    }

                                    window.location.href = newUrl;
                                }
                            }
                        }
                    }]
                });
            });
        }
        
        // HBA1C Chart
        const hba1cCtx = document.getElementById('hba1cChart').getContext('2d');
        const hba1cData = {
            labels: [
                @foreach($hba1cData as $hba1c)
                    '{{ $hba1c->name }}',
                @endforeach
            ],
            datasets: [{
                label: 'HBA1C',
                data: [
                    @foreach($hba1cData as $hba1c)
                        {{ $hba1c->count }},
                    @endforeach
                ],
                backgroundColor: Array({{ count($hba1cData) }}).fill(chartColors.purple),
                borderWidth: 0
            }]
        };

        new Chart(hba1cCtx, {
            type: 'bar',
            data: hba1cData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                indexAxis: 'y',
                plugins: {
                    legend: {
                        display: false
                    }
                },
                tooltips: {
                    callbacks: {
                        title: function(tooltipItems, data) {
                            return 'HBA1C'; // Fixed title
                        },
                        label: function(tooltipItem, data) {
                            const label = data.labels[tooltipItem.index];
                            const value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                            return label + ': ' + value; // e.g. "Normal: 12"
                        }
                    }
                },
                scales: {
                    yAxes: [{
                        display: true,
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
            }
        });

        const emergencyCtx = document.getElementById('emergencyChart').getContext('2d');
        const emergencyData = {
            labels: [
                @foreach($emergencyData as $emergency)
                    '{{ $emergency['name'] }}',
                @endforeach
            ],
            datasets: [{
                label: 'Referral for Emergency',
                data: [
                    @foreach($emergencyData as $emergency)
                        {{ $emergency['count'] }},
                    @endforeach
                ],
                backgroundColor: Array({{ count($emergencyData) }}).fill(chartColors.purple),
                borderWidth: 0
            }]
        };

        new Chart(emergencyCtx, {
            type: 'horizontalBar',
            data: emergencyData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                indexAxis: 'y',
                plugins: {
                    legend: {
                        display: false
                    }
                },
                tooltips: {
                    callbacks: {
                        title: function(tooltipItems, data) {
                            return 'Referral for Emergency'; // Fixed title
                        },
                        label: function(tooltipItem, data) {
                            const label = data.labels[tooltipItem.index];
                            const value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                            return label + ': ' + value;
                        }
                    }
                },
                scales: {
                    xAxes: [{
                        display: true,
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
            }
        });

        
        // PAD Chart
        const padCtx = document.getElementById('padChart').getContext('2d');
        const padData = {
            labels: [
                @foreach($padData as $pad)
                    '{{ $pad['name'] }}',
                @endforeach
            ],
            datasets: [{
                label: 'PAD',
                data: [
                    @foreach($padData as $pad)
                        {{ $pad['count'] }},
                    @endforeach
                ],
                backgroundColor: Array({{ count($padData) }}).fill(chartColors.purple),
                borderWidth: 0
            }]
        };

        new Chart(padCtx, {
            type: 'bar',
            data: padData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                indexAxis: 'y',
                plugins: {
                    legend: {
                        display: false
                    }
                },
                tooltips: {
                    callbacks: {
                        title: function(tooltipItems, data) {
                            return 'PAD'; // Fixed title
                        },
                        label: function(tooltipItem, data) {
                            const label = data.labels[tooltipItem.index];
                            const value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                            return label + ': ' + value; // e.g. "Critical PAD: 4"
                        }
                    }
                },
                scales: {
                    yAxes: [{
                        display: true,
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
            }
        });
        
        // Diabetes Type Chart
        const diabetesTypeCtx = document.getElementById('diabetesTypeChart').getContext('2d');
        const diabetesTypeData = {
            labels: [
                @foreach($diabetesTypeData as $diabetesType)
                    '{{ $diabetesType->name }}',
                @endforeach
            ],
            datasets: [{
                label: 'Diabetes Type',
                data: [
                    @foreach($diabetesTypeData as $diabetesType)
                        {{ $diabetesType->count }},
                    @endforeach
                ],
                backgroundColor: Array({{ count($diabetesTypeData) }}).fill(chartColors.purple),
                borderWidth: 0
            }]
        };

        new Chart(diabetesTypeCtx, {
            type: 'horizontalBar',
            data: diabetesTypeData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                indexAxis: 'y',
                plugins: {
                    legend: {
                        display: false
                    }
                },
                tooltips: {
                    callbacks: {
                        title: function(tooltipItems, data) {
                            return 'Diabetes Type'; // Fixed title
                        },
                        label: function(tooltipItem, data) {
                            const label = data.labels[tooltipItem.index];
                            const value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                            return label + ': ' + value; // e.g. "Type 1: 50"
                        }
                    }
                },
                scales: {
                    xAxes: [{
                        display: true,
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
            }
        });

        // Affected Area Chart
        const affectedAreaCtx = document.getElementById('affectedAreaChart').getContext('2d');
        const affectedAreaData = {
            labels: [
                @foreach($affectedAreaData as $affectedArea)
                    '{!! $affectedArea->name !!}',
                @endforeach
            ],
            datasets: [{
                data: [
                    @foreach($affectedAreaData as $affectedArea)
                        {{ $affectedArea->count }},
                    @endforeach
                ],
                backgroundColor: [
                    chartColors.purple,
                    chartColors.green,
                    chartColors.gray
                ],
                borderWidth: 0
            }]
        };

        new Chart(affectedAreaCtx, {
            type: 'pie',
            data: affectedAreaData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        callbacks: {
                            title: function(tooltipItems, data) {
                                return 'Affected Area'; // Fixed title
                            },
                            label: function(tooltipItem, data) {
                                const label = data.labels[tooltipItem.index];
                                const value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                                return label + ': ' + value; // e.g. "Leg: 20"
                            }
                        }
                    }
                }
            }
        });
        
        // Diabetic Ulcers Chart
        const diabeticUlcersCtx = document.getElementById('diabeticUlcersChart').getContext('2d');
        const diabeticUlcersData = {
            labels: [
                @foreach($diabeticUlcersData as $ulcer)
                    '{{ $ulcer['name'] }}',
                @endforeach
            ],
            datasets: [{
                data: [
                    @foreach($diabeticUlcersData as $ulcer)
                        {{ $ulcer['count'] }},
                    @endforeach
                ],
                backgroundColor: [
                    chartColors.purple,
                    chartColors.green,
                    chartColors.gray
                ],
                borderWidth: 0
            }]
        };
        new Chart(diabeticUlcersCtx, {
            type: 'pie',
            data: diabeticUlcersData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'right',
                        labels: {
                            boxWidth: 15,
                            font: {
                                size: 10
                            }
                        }
                    }
                }
            }
        });
        
        // Charcot Foot Chart
        const charcotFootCtx = document.getElementById('charcotFootChart').getContext('2d');
        const charcotFootData = {
            labels: [
                @foreach($charcotFootData as $charcot)
                    '{{ $charcot['name'] }}',
                @endforeach
            ],
            datasets: [{
                label: 'Charcot Foot',
                data: [
                    @foreach($charcotFootData as $charcot)
                        {{ $charcot['count'] }},
                    @endforeach
                ],
                backgroundColor: Array({{ count($charcotFootData) }}).fill(chartColors.purple),
                borderWidth: 0
            }]
        };

        new Chart(charcotFootCtx, {
            type: 'bar',
            data: charcotFootData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                indexAxis: 'y',
                plugins: {
                    legend: {
                        display: false
                    }
                },
                tooltips: {
                    callbacks: {
                        title: function(tooltipItems, data) {
                            return 'Charcot Foot'; // Fixed title
                        },
                        label: function(tooltipItem, data) {
                            const label = data.labels[tooltipItem.index];
                            const value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                            return label + ': ' + value; // e.g. "Leg: 20"
                        }
                    }
                },
                scales: {
                    yAxes: [{
                        display: true,
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
            }
        });

        
        // Wound Duration Chart
        const woundDurationCtx = document.getElementById('woundDurationChart').getContext('2d');
        const woundDurationData = {
            labels: [
                @foreach($woundDurationData as $duration)
                    '{{ $duration->name }}',
                @endforeach
            ],
            datasets: [{
                data: [
                    @foreach($woundDurationData as $duration)
                        {{ $duration->count }},
                    @endforeach
                ],
                backgroundColor: [
                    chartColors.purple,
                    chartColors.green,
                    chartColors.gray
                ],
                borderWidth: 0
            }]
        };
        new Chart(woundDurationCtx, {
            type: 'pie',
            data: woundDurationData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'right',
                        labels: {
                            boxWidth: 15,
                            font: {
                                size: 10
                            }
                        }
                    }
                }
            }
        });
    });
    </script>
@endsection