@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])
<div class="container-fluid py-4">
    <!-- Spareparts and Maintenances -->
    <div class="row" style="margin-top: 200px;">
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <div class="card">
                <div class="card-body p-3">
                    <div class="row">
                        <div class="col-8">
                            <div class="numbers">
                                <p class="text-sm mb-0 text-uppercase font-weight-bold">Total</p>
                                <p class="text-sm mb-0 text-uppercase font-weight-bold">Spareparts</p>
                                <h5 class="font-weight-bolder">{{ $sparepartsCount }}</h5>
                            </div>
                        </div>
                        <div class="col-4 text-end">
                            <div class="icon icon-shape bg-gradient-primary shadow-primary text-center rounded-circle">
                                <i class="ni ni-box-2 text-lg opacity-10" aria-hidden="true"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Total Maintenances -->
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <div class="card">
                <div class="card-body p-3">
                    <div class="row">
                        <div class="col-8">
                            <div class="numbers">
                                <p class="text-sm mb-0 text-uppercase font-weight-bold">Total</p>
                                <p class="text-sm mb-0 text-uppercase font-weight-bold">Maintenances</p>
                                <h5 class="font-weight-bolder">{{ $maintenanceCount }}</h5>
                            </div>
                        </div>
                        <div class="col-4 text-end">
                            <div class="icon icon-shape bg-gradient-danger shadow-danger text-center rounded-circle">
                                <i class="ni ni-settings text-lg opacity-10" aria-hidden="true"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Unstarted Maintenances -->
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <div class="card">
                <div class="card-body p-3">
                    <div class="row">
                        <div class="col-8">
                            <div class="numbers">
                                <p class="text-sm mb-0 text-uppercase text-warning font-weight-bold">Pending</p>
                                <p class="text-sm mb-0 text-uppercase font-weight-bold">Maintenances</p>
                                <h5 class="font-weight-bolder">{{ $unstartedMaintenanceCount }}</h5>
                            </div>
                        </div>
                        <div class="col-4 text-end">
                            <div
                                class="icon icon-shape bg-gradient-secondary shadow-secondary text-center rounded-circle">
                                <i class="ni ni-calendar-grid-58 text-lg opacity-10" aria-hidden="true"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Active Maintenances -->
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <div class="card">
                <div class="card-body p-3">
                    <div class="row">
                        <div class="col-8">
                            <div class="numbers">
                                <p class="text-sm mb-0 text-uppercase font-weight-bold" style="color: #FFC107;">Active
                                </p>
                                <p class="text-sm mb-0 text-uppercase font-weight-bold">Maintenances</p>
                                <h5 class="font-weight-bolder">{{ $activeMaintenanceCount }}</h5>
                            </div>
                        </div>
                        <div class="col-4 text-end">
                            <div class="icon icon-shape bg-gradient-warning shadow-warning text-center rounded-circle">
                                <i class="ni ni-time-alarm text-lg opacity-10" aria-hidden="true"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-4">
        <!-- Completed Maintenances -->
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <div class="card">
                <div class="card-body p-3">
                    <div class="row">
                        <div class="col-8">
                            <div class="numbers">
                                <p class="text-sm mb-0 text-uppercase text-success font-weight-bold">Completed</p>
                                <p class="text-sm mb-0 text-uppercase font-weight-bold">Maintenances</p>
                                <h5 class="font-weight-bolder">{{ $completedMaintenanceCount }}</h5>
                            </div>
                        </div>
                        <div class="col-4 text-end">
                            <div class="icon icon-shape bg-gradient-info shadow-info text-center rounded-circle">
                                <i class="ni ni-check-bold text-lg opacity-10" aria-hidden="true"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Incident Chart -->
    <div class="row mt-4">
        <div class="col-lg-7 mb-lg-0 mb-4">
            <div class="card z-index-2 h-100">
                <div class="card-header pb-0 pt-3 bg-transparent">
                    <h6 class="text-capitalize">Maintenance Overview for {{ $currentYear }}</h6>
                    <h6 id="total-incidents" class="text-muted"></h6>
                </div>
                <div class="card-body p-3">
                    <div class="chart">
                        <canvas id="incident-chart" class="chart-canvas" height="300"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('js')
<script src="./assets/js/plugins/chartjs.min.js"></script>
<script>
    var ctx = document.getElementById('incident-chart').getContext('2d');
    
    // Define the full months array from January to December
    var fullMonths = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    
    // Define the incidents data for each month, defaulting to 0 if no data is available
    var incidentsData = {!! json_encode($incidentCounts) !!}; // Original data from the controller
    var monthsFromServer = {!! json_encode($months) !!}; // Month names from server

    // Filter months that have data and map them to the incidentsData
    var filteredMonths = [];
    var filteredIncidentsData = [];

    monthsFromServer.forEach((month, index) => {
        // Find the index of the month in the fullMonths array
        var monthIndex = fullMonths.indexOf(month);
        if (monthIndex !== -1) {
            // Push the month and corresponding incident data to the filtered arrays
            filteredMonths.push(fullMonths[monthIndex]);
            filteredIncidentsData.push(incidentsData[index]);
        }
    });

    // Calculate the total incidents for the year
    var totalIncidents = filteredIncidentsData.reduce((acc, val) => acc + val, 0);

    // Display the total incidents in the HTML
    document.getElementById('total-incidents').innerText = `Total Maintenance: ${totalIncidents}`;

    var incidentChart = new Chart(ctx, {
        type: 'pie',  // Pie chart
        data: {
            labels: filteredMonths,  // Use only the months that have data
            datasets: [{
                label: 'Number of Incidents in {{ $currentYear }}',  // Year in label
                data: filteredIncidentsData,  // Use the filtered incidents data for pie slices
                backgroundColor: [  // Set colors for each slice
                    'rgba(75, 192, 192, 0.6)',  
                    'rgba(153, 102, 255, 0.6)',  
                    'rgba(255, 159, 64, 0.6)',  
                    'rgba(255, 99, 132, 0.6)',  
                    'rgba(54, 162, 235, 0.6)',  
                    'rgba(201, 203, 207, 0.6)', 
                    'rgba(75, 192, 192, 0.6)',
                    'rgba(153, 102, 255, 0.6)',
                    'rgba(255, 159, 64, 0.6)',
                    'rgba(255, 99, 132, 0.6)',
                    'rgba(54, 162, 235, 0.6)',
                    'rgba(201, 203, 207, 0.6)'
                ],
                hoverBackgroundColor: [  // Hover effect colors
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)',
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(201, 203, 207, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)',
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(201, 203, 207, 1)'
                ]
            }]
        },
        options: {
            responsive: true,  // Make chart responsive
            maintainAspectRatio: false,  // Adjust to container's size
            plugins: {
                legend: {
                    display: true,  // Display the legend
                    labels: {
                        color: '#333',  // Change legend text color
                        font: {
                            size: 14,  // Font size
                            weight: 'bold'  // Font weight
                        }
                    }
                },
                tooltip: {
                    backgroundColor: 'rgba(0,0,0,0.7)',  // Darker tooltip background
                    titleFont: {
                        size: 16,
                        weight: 'bold',
                    },
                    bodyFont: {
                        size: 14,
                    },
                    padding: 10,  // Padding inside the tooltip
                    cornerRadius: 5,  // Rounded corners
                }
            },
            scales: {
                x: {
                    display: false  // Hide x-axis for pie chart
                },
                y: {
                    display: false  // Hide y-axis for pie chart
                }
            },
            animation: {
                duration: 2000,  // Animation duration in milliseconds
                easing: 'easeInOutBounce'  // Animation effect
            }
        }
    });
</script>
@endpush