@extends('layouts.master')
@section('contain')
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor"> Good Neighbour Summary </h3>
        </div>
        <div class="col-md-7 align-self-center text-end">
            <div class="d-flex justify-content-end align-items-center">
                <ol class="breadcrumb justify-content-end">
                    <li><a class="breadcrumb-item active" href="{{ url('/') }}">Home</a></li>
                    <li><a class="breadcrumb-item active" href="javascript:history.go(-1);">back</a></li>
                </ol>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card col-md-9" style="position: relative;">
                            <canvas id="incidentChart"></canvas>
                        </div>
                        <div class="col-md-3" id="dropdown-container" style="position: absolute; top: 0; right: 0;">
                            <div class="d-flex flex-column">
                                <div class="mb-2">
                                    <select style="font-size: smaller;" id="year-filter" class="custom-select">

                                    </select>
                                </div>
                                <div class="mb-2">
                                    <select id="department-filter" class="custom-select">
                                        <option value="">Filter By Department</option>
                                        @foreach ($departments as $department)
                                            <option value="{{ $department->id }}">{{ $department->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="card">
                                    <div class="card-body">
                                        <h5 class="font-bold">Mean time to repair</h5>
                                        <p id="mean-time-to" class="card-text" style="font-size: 48px; font-weight: bold;">
                                            {{ round($avgHoursToRepair->avg_hours_to_repair, 1) }} Hrs</p>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- <script>
        const ctx = document.getElementById('incidentChart').getContext('2d');
        let data = @json($formattedData);

        const statuses = ['submitted', 'received', 'on the case', 'in progress', 'resolved'];
        let chart;

        function initializeChart(data) {
            const labels = Object.keys(data);
            const datasets = statuses.map(status => {
                return {
                    label: status,
                    data: labels.map(label => data[label]['statuses'][status] || 0),
                    backgroundColor: getStatusColor(status),
                    stack: 'Stack 1'
                };
            });

            if (chart) {
                chart.destroy();
            }

            chart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: datasets
                },
                options: {
                    responsive: true,
                    scales: {
                        x: {
                            stacked: true
                        },
                        y: {
                            stacked: true
                        }
                    }
                }
            });
        }

        function getStatusColor(status) {
            switch (status) {
                case 'submitted':
                    return '#f01e1e';
                case 'received':
                    return '#ffd65b';
                case 'on the case':
                    return '#ffbf00';
                case 'in progress':
                    return '#4da64d';
                case 'resolved':
                    return '#10cc10';
                default:
                    return '#201e1e';
            }
        }

        document.getElementById('year-filter').addEventListener('change', function() {
            fetchDataAndUpdateChart();
        });

        document.getElementById('department-filter').addEventListener('change', function() {
            fetchDataAndUpdateChart();
        });

        function fetchDataAndUpdateChart() {
            const selectedMonth = document.getElementById('year-filter').value;
            const selectedDepartment = document.getElementById('department-filter').value;
            const url = "{{ route('incident.summary.ajax') }}";

            $.ajax({
                url: url,
                type: 'GET',
                data: {
                    month: selectedMonth,
                    department_id: selectedDepartment
                },
                success: function(response) {
                    data = response;
                    initializeChart(data);
                }
            });
        }

        // Initialize chart with default data
        initializeChart(data);
    </script> --}}
    <script>
        const ctx = document.getElementById('incidentChart').getContext('2d');
        let data = @json($formattedData== null);

        // Define all years to be displayed on the chart
        const currentYear = new Date().getFullYear();
        const startYear = currentYear - 10;
        const allYears = Array.from({
            length: currentYear - startYear + 1
        }, (_, i) => startYear + i);
        const allMonths = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October',
            'November', 'December'
        ];
        const statuses = ['submitted', 'received', 'on the case', 'in progress', 'resolved'];
        let chart;

        function initializeYearFilter() {
            const yearFilter = document.getElementById('year-filter');
            allYears.reverse().forEach(year => {
                const option = document.createElement('option');
                option.value = year;
                option.textContent = year;
                yearFilter.appendChild(option);
            });
            yearFilter.value = currentYear; // Set the default year to the current year
        }

        function initializeChart(data) {
            // document.getElementById('mean-time-to').textContent = data.avgHoursToRepair ? data.avgHoursToRepair : "00";
            document.getElementById('mean-time-to').textContent = data.avgHoursToRepair ? (Math.round(data.avgHoursToRepair * 10) / 10).toFixed(1) + " Hrs" : "00 Hrs";

            // Extract available months from data and ensure all months are included
            const labels = allMonths; // Use allMonths to ensure every month is represented
            const datasets = statuses.map((status, index) => {
                return {
                    label: status,
                    data: labels.map(label => data[label]?.statuses[status] ||
                    0), // Use optional chaining to handle undefined months
                    backgroundColor: getStatusColor(status),
                    stack: index.toString() // Use different stack values for each dataset to separate bars
                };
            });

            // Calculate the maximum value across all datasets
            const maxDataValue = Math.max(...datasets.flatMap(dataset => dataset.data));
            const suggestedMax = maxDataValue + 2; // Adjust this as needed to provide a buffer above the max value

            if (chart) {
                chart.destroy();
            }

            chart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: datasets
                },
                options: {
                    responsive: true,
                    scales: {
                        x: {
                            stacked: false, // Set to false for grouped bars
                            beginAtZero: true
                        },
                        y: {
                            stacked: false, // Set to false for grouped bars
                            beginAtZero: true,
                            max: suggestedMax, // Set maximum value dynamically
                            ticks: {
                                stepSize: 1 // Adjust step size if needed
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: true, // Display the legend for each status
                            position: 'top'
                        }
                    }
                }
            });
        }

        function getStatusColor(status) {
            switch (status) {
                case 'submitted':
                    return '#f01e1e';
                case 'received':
                    return '#ffd65b';
                case 'on the case':
                    return '#ffbf00';
                case 'in progress':
                    return '#4da64d';
                case 'resolved':
                    return '#10cc10';
                default:
                    return '#201e1e';
            }
        }

        document.getElementById('year-filter').addEventListener('change', function() {
            fetchDataAndUpdateChart();
        });

        document.getElementById('department-filter').addEventListener('change', function() {
            fetchDataAndUpdateChart();
        });

        function fetchDataAndUpdateChart() {
            const selectedYear = document.getElementById('year-filter').value;
            const selectedDepartment = document.getElementById('department-filter').value;
            const url = "{{ route('incident.summary.ajax') }}";

            $.ajax({
                url: url,
                type: 'GET',
                data: {
                    year: selectedYear, // Use 'year' instead of 'month'
                    department_id: selectedDepartment
                },
                success: function(response) {
                    // alert(JSON.stringify(response));
                    console.log(response);
                    data = response;
                    initializeChart(data);
                }
            });
        }

        // Initialize year filter and chart with default data
        fetchDataAndUpdateChart();
        initializeYearFilter();
        initializeChart(data);
    </script>
@endsection