@canany(['hr_manager_hq', 'admin_home'])

    @extends('adminlte::page')

    @section('title', config('adminlte.title') . ' | Admin Dashboard')

@section('content_header')
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6 m-0 text-dark">
                <h1>Admin Dashboard</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item active">Admin</li>
                </ol>
            </div>
        </div>
    </div>
@stop

@section('content')
    {{-- KPI Dashboard Row --}}
    <div class="row">
        <div class="col-12 col-sm-6 col-md-3">
            <div class="info-box">
                <span class="info-box-icon bg-info elevation-1"><i class="fas fa-users"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Total Headcount</span>
                    <span class="info-box-number">
                        {{ $currentHeadcount }}
                        @if($monthChange != 0)
                            <small class="{{ $monthChange > 0 ? 'text-success' : 'text-danger' }}">
                                <i class="fas fa-arrow-{{ $monthChange > 0 ? 'up' : 'down' }}"></i>
                                {{ abs($monthChange) }}
                            </small>
                        @endif
                    </span>
                </div>
            </div>
        </div>

        <div class="col-12 col-sm-6 col-md-3">
            <div class="info-box">
                <span class="info-box-icon bg-success elevation-1"><i class="fas fa-chart-line"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Turnover Rate</span>
                    <span class="info-box-number">
                        {{ $turnoverRate }}%
                        <small>Last 12 months</small>
                    </span>
                </div>
            </div>
        </div>

        <div class="col-12 col-sm-6 col-md-3">
            <div class="info-box">
                <span class="info-box-icon bg-warning elevation-1"><i class="fas fa-clock"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Avg. Tenure</span>
                    <span class="info-box-number">
                        {{ $avgTenureYears }} years
                        <small>{{ $avgTenureMonths }} months</small>
                    </span>
                </div>
            </div>
        </div>

        <div class="col-12 col-sm-6 col-md-3">
            <div class="info-box">
                <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-exclamation-circle"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Pending Actions</span>
                    <span class="info-box-number">
                        {{ $holidayPending + $totalComplianceIssues }}
                        <small>Requires attention</small>
                    </span>
                </div>
            </div>
        </div>
    </div>

    {{-- Quick Actions --}}
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-light">
                    <h3 class="card-title">Quick Actions</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 col-sm-6 col-6">
                            <a href="{{ route('admin.employees.create') }}" class="btn btn-app w-100">
                                <i class="fas fa-user-plus"></i> Add Employee
                            </a>
                        </div>
                        <div class="col-md-3 col-sm-6 col-6">
                            <a href="{{ route('holiday_approval.index') }}" class="btn btn-app w-100">
                                <span class="badge bg-danger">{{ $pendingHolidayCount }}</span>
                                <i class="fas fa-check-circle"></i> Approve Holidays
                            </a>
                        </div>
                        <div class="col-md-3 col-sm-6 col-6">
                            <a href="{{ route('admin.sickness.index') }}" class="btn btn-app w-100">
                                @if($openSicknessCount > 0)
                                    <span class="badge bg-danger">{{ $openSicknessCount }}</span>
                                @endif
                                <i class="fas fa-briefcase-medical"></i> Sickness
                            </a>
                        </div>
                        <div class="col-md-3 col-sm-6 col-6">
                            <a href="{{ route('admin.reports.index') }}" class="btn btn-app w-100">
                                <i class="fas fa-file-export"></i> Reports
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Main Dashboard Cards --}}
    <div class="row">
        <div class="col-md-8">
            {{-- Employee Overview --}}
            <div class="card">
                <div class="card-header bg-light">
                    <h3 class="card-title">Employee Overview</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="small-box bg-info">
                                <div class="inner">
                                    <h3 id="userCountContainer">{{ $userCount }}</h3>
                                    <p>Current Employees</p>
                                </div>
                                <div class="icon">
                                    <i class="fas fa-user-plus"></i>
                                </div>
                                <a href="{{ route('admin.employees.index') }}" class="small-box-footer">
                                    View All <i class="fas fa-arrow-circle-right"></i>
                                </a>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-box bg-light">
                                <span class="info-box-icon bg-primary"><i class="fas fa-birthday-cake"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Today's Birthdays</span>
                                    <span class="info-box-number">
                                        {{ count($todaysBirthdays) }}
                                        @if(count($todaysBirthdays) > 0)
                                            <small>{{ $todaysBirthdays->pluck('name')->implode(', ') }}</small>
                                        @endif
                                    </span>
                                </div>
                            </div>
                            <div class="info-box bg-light">
                                <span class="info-box-icon bg-secondary"><i class="fas fa-laptop-house"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Working from Home</span>
                                    <span class="info-box-number" id="WFMCountContainer">{{ $employeeWorkFromHomeCount }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-4">
                            <div class="text-center small mb-2"><strong>Employee Trends</strong></div>
                            <div style="position: relative; height: 180px;">
                                <canvas id="employeeChart"></canvas>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-center small mb-2"><strong>Gender Distribution</strong></div>
                            <div style="position: relative; height: 180px;">
                                <canvas id="employeeGenderChart"></canvas>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-center small mb-2"><strong>By Division</strong></div>
                            <div style="position: relative; height: 180px;">
                                <canvas id="divisionEmployeeCountChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Holiday Management --}}
            <div class="card">
                <div class="card-header bg-light">
                    <h3 class="card-title">Holiday Management</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="small-box bg-success">
                                <div class="inner">
                                    <h3 id="holidayCountContainer">{{ $holidayCount }}</h3>
                                    <p>On Holiday Today</p>
                                </div>
                                <div class="icon">
                                    <i class="fa fa-plane-departure"></i>
                                </div>
                                <a href="{{ route('holidays.calendar') }}" class="small-box-footer">
                                    View Calendar <i class="fas fa-arrow-circle-right"></i>
                                </a>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="small-box bg-warning">
                                <div class="inner">
                                    <h3 id="pendingCountContainer">{{ $holidayPending }}</h3>
                                    <p>Pending Approvals</p>
                                </div>
                                <div class="icon">
                                    <i class="fas fa-spinner fa-spin"></i>
                                </div>
                                <a href="{{ route('holiday_approval.index') }}" class="small-box-footer">
                                    Review Now <i class="fas fa-arrow-circle-right"></i>
                                </a>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="small-box bg-info">
                                <div class="inner">
                                    <h3><span id="longestHolidayCounterContainer">{{ $longestHoliday['count'] }}</span></h3>
                                    <p>Longest Holiday (Days)</p>
                                </div>
                                <div class="icon">
                                    <i class="fas fa-umbrella-beach"></i>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="text-center small mb-2"><strong>Holiday Requests</strong></div>
                            <div style="position: relative; height: 180px;">
                                <canvas id="holidayChart"></canvas>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-center small mb-2"><strong>Request Status</strong></div>
                            <div style="position: relative; height: 180px;">
                                <canvas id="holidayStatusChart"></canvas>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-center small mb-2"><strong>Days per Month</strong></div>
                            <div style="position: relative; height: 180px;">
                                <canvas id="holidayDaysPerMonthChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Sickness Tracking --}}
            <div class="card">
                <div class="card-header bg-light">
                    <h3 class="card-title">Sickness Tracking</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="small-box bg-secondary">
                                <div class="inner">
                                    <h3 id="todaySicknessCounterContainer">{{ $todaySickness }}</h3>
                                    <p>Today's Sickness</p>
                                </div>
                                <div class="icon">
                                    <i class="fas fa-viruses"></i>
                                </div>
                                <a href="{{ route('admin.sickness.index') }}" class="small-box-footer">
                                    View Details <i class="fas fa-arrow-circle-right"></i>
                                </a>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="small-box bg-info">
                                <div class="inner">
                                    <h3 id="sicknessCounterContainer">{{ $totalSickness }}</h3>
                                    <p>Last 12 Months</p>
                                </div>
                                <div class="icon">
                                    <i class="fa fa-briefcase-medical"></i>
                                </div>
                                <a href="{{ route('admin.sickness.data') }}" class="small-box-footer">
                                    View Charts <i class="fas fa-arrow-circle-right"></i>
                                </a>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="small-box bg-danger">
                                <div class="inner">
                                    <h3><span id="longestSickCounterContainer">{{ $longestSick['count'] }}</span></h3>
                                    <p>Longest Sick Days</p>
                                </div>
                                <div class="icon">
                                    <i class="fas fa-head-side-cough"></i>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="text-center small mb-2"><strong>Last 12 Months</strong></div>
                            <div style="position: relative; height: 180px;">
                                <canvas id="sicknessPerMonthChart"></canvas>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-center small mb-2"><strong>By Category</strong></div>
                            <div style="position: relative; height: 180px;">
                                <canvas id="sicknessCategoryChart"></canvas>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-center small mb-2"><strong>Sickness Days</strong></div>
                            <div style="position: relative; height: 180px;">
                                <canvas id="sicknessDaysPerMonthChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Sidebar: Alerts & Activity --}}
        <div class="col-md-4">
            {{-- HR Alerts --}}
            <div class="card">
                <div class="card-header bg-light">
                    <h3 class="card-title">Alerts</h3>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        @if($probationsEndingSoon > 0)
                            <li class="list-group-item text-black">
                                <i class="fas fa-user-clock text-warning"></i>
                                <strong>{{ $probationsEndingSoon }}</strong> probation(s) ending within 30 days
                            </li>
                        @endif

                        @if($missingInfo > 0)
                            <li class="list-group-item text-black">
                                <i class="fas fa-info-circle text-danger"></i>
                                <strong>{{ $missingInfo }}</strong> employee(s) with missing information
                                @if($missingInfo <= 10)
                                    <button class="btn btn-outline-primary btn-sm float-right p-0" type="button" data-toggle="collapse" data-target="#missingInfoDetails">
                                        View Details
                                    </button>
                                    <div class="collapse mt-2" id="missingInfoDetails">
                                        <ul class="mb-0 small">
                                            @foreach($employeesWithMissingInfo as $emp)
                                                <li class="text-black">
                                                    <strong>{{ $emp['name'] }}</strong><br>
                                                    <small class="text-muted">Missing: {{ implode(', ', $emp['missing_fields']) }}</small>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @else
                                    <button class="btn btn-outline-info btn-sm float-right p-1" type="button" data-toggle="collapse" data-target="#missingInfoDetails1">
                                        Preview
                                    </button>
                                    <div class="collapse mt-2" id="missingInfoDetails1">
                                        <p class="mb-2 small"><strong>Showing first 20 of {{ $missingInfo }} employees:</strong></p>
                                        <ul class="mb-2 small">
                                            @foreach($employeesWithMissingInfo->take(20) as $emp)
                                                <li class="text-black">
                                                    <strong>{{ $emp['name'] }}</strong><br>
                                                    <small class="text-muted">Missing: {{ implode(', ', $emp['missing_fields']) }}</small>
                                                </li>
                                            @endforeach
                                        </ul>
                                        <a href="{{ route('admin.employees.index') }}" class="btn btn-sm btn-outline-primary">
                                            <i class="fas fa-list"></i> View All Employees
                                        </a>
                                    </div>
                                @endif
                            </li>
                        @endif

                        @if($pendingHolidayCount > 0)
                            <li class="list-group-item d-flex justify-content-between align-items-center text-black">
                                <span>
                                    <i class="fas fa-clock text-info"></i>
                                    <strong>{{ $pendingHolidayCount }}</strong> pending holiday(s)
                                </span>
                                <a href="{{ route('holiday_approval.index') }}" class="btn btn-primary btn-sm">Review</a>
                            </li>
                        @endif

                        @if($probationsEndingSoon == 0 && $missingInfo == 0 && $pendingHolidayCount == 0)
                            <li class="list-group-item text-center text-success">
                                <i class="fas fa-check-circle"></i> All clear! No urgent items
                            </li>
                        @endif
                    </ul>
                </div>
            </div>

            {{-- Recent Starters --}}
            @if($recentHires->count() > 0)
            <div class="card">
                <div class="card-header bg-light">
                    <h3 class="card-title">Recent Starters</h3>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        @foreach($recentHires as $hire)
                            <li class="list-group-item text-black">
                                <strong>{{ $hire->name }}</strong><br>
                                <small class="text-muted">{{ $hire->jobtitle }} - {{ \Carbon\Carbon::parse($hire->join_date)->format('d M Y') }}</small>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
            @endif

            {{-- Upcoming Probations --}}
            @if($upcomingProbations->count() > 0)
            <div class="card">
                <div class="card-header bg-light">
                    <h3 class="card-title">Upcoming Probation Ends</h3>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        @foreach($upcomingProbations as $prob)
                            <li class="list-group-item text-black">
                                <strong>{{ $prob->name }}</strong><br>
                                <small class="text-muted">Ends: {{ \Carbon\Carbon::parse($prob->probation_date)->format('d M Y') }}</small>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
            @endif

            {{-- Latest Approvals --}}
            @if($recentApprovals->count() > 0)
            <div class="card">
                <div class="card-header bg-light">
                    <h3 class="card-title">Recent Approvals</h3>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        @foreach($recentApprovals->take(5) as $approval)
                            <li class="list-group-item text-black">
                                <strong>{{ $approval->getUser->name }}</strong><br>
                                <small class="text-muted">{{ number_format($approval->number_days, 1) }} days - {{ $approval->updated_at->diffForHumans() }}</small>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
            @endif
        </div>
    </div>

    @push('js')
    <script>
        $(document).ready(function() {
            // Employee Join/Leave Chart
            const employeeJoinData = @json($EmployeeJoinData);
            const employeeLeftData = @json($EmployeeLeftData);

            const joinLabels = employeeJoinData.map(item => {
                const shortMonth = new Date(`${item.month}-01-01`).toLocaleString('en-us', {month: 'short'});
                return `${shortMonth} ${item.year.toString().slice(-2)}`;
            });

            const joinCounts = employeeJoinData.map(item => item.count);
            const leftCounts = employeeLeftData.map(item => item.count);

            const sortedEmployeeData = joinLabels.map((label, index) => ({
                label,
                joinCount: joinCounts[index],
                leftCount: leftCounts[index]
            })).sort((a, b) => {
                const [monthA, yearA] = a.label.split(' ');
                const [monthB, yearB] = b.label.split(' ');
                return new Date(`${monthA} 1, ${yearA}`) - new Date(`${monthB} 1, ${yearB}`);
            });

            new Chart(document.getElementById('employeeChart').getContext('2d'), {
                type: 'line',
                data: {
                    labels: sortedEmployeeData.map(item => item.label),
                    datasets: [{
                        label: 'Starter',
                        data: sortedEmployeeData.map(item => item.joinCount),
                        borderColor: 'rgba(54, 162, 235, 1)',
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        borderWidth: 2
                    }, {
                        label: 'Leaver',
                        data: sortedEmployeeData.map(item => item.leftCount),
                        borderColor: 'rgba(255, 99, 132, 1)',
                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    scales: {y: {beginAtZero: true}}
                }
            });

            // Gender Chart
            const genderData = @json($genderCounts);
            const genderCounts = {Male: 0, Female: 0, Other: 0};
            genderData.forEach(item => {
                if (item.gender_group === 'Male') genderCounts.Male += item.count;
                else if (item.gender_group === 'Female') genderCounts.Female += item.count;
                else genderCounts.Other += item.count;
            });

            new Chart(document.getElementById('employeeGenderChart').getContext('2d'), {
                type: 'pie',
                data: {
                    labels: Object.keys(genderCounts),
                    datasets: [{
                        data: Object.values(genderCounts),
                        backgroundColor: ['rgba(54, 162, 235, 0.6)', 'rgba(255, 99, 132, 0.6)', 'rgba(255, 205, 86, 0.6)']
                    }]
                },
                options: {responsive: true, maintainAspectRatio: true}
            });

            // Division Chart
            new Chart(document.getElementById('divisionEmployeeCountChart').getContext('2d'), {
                type: 'bar',
                data: {
                    labels: @json($divisions),
                    datasets: [{
                        label: 'Employees',
                        data: @json($employeeDivisionCounts),
                        backgroundColor: 'rgba(75, 192, 192, 0.6)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    }]
                },
                options: {responsive: true, maintainAspectRatio: true, scales: {y: {beginAtZero: true}}}
            });

            // Holiday Charts
            new Chart(document.getElementById('holidayChart').getContext('2d'), {
                type: 'line',
                data: {
                    labels: Object.keys(@json($holidaysPerMonth)),
                    datasets: [{
                        label: 'Holiday',
                        data: Object.values(@json($holidaysPerMonth)),
                        borderColor: 'rgba(54, 162, 235, 1)',
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        fill: true
                    }, {
                        label: 'Other',
                        data: Object.values(@json($otherHolidaysPerMonth)),
                        borderColor: 'rgba(255, 99, 132, 1)',
                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
                        fill: true
                    }]
                },
                options: {responsive: true, maintainAspectRatio: true}
            });

            new Chart(document.getElementById('holidayStatusChart').getContext('2d'), {
                type: 'bar',
                data: {
                    labels: @json($months),
                    datasets: [{
                        label: 'Approved',
                        data: @json($approvedCounts),
                        backgroundColor: 'rgba(75, 192, 192, 0.6)'
                    }, {
                        label: 'Rejected',
                        data: @json($rejectedCounts),
                        backgroundColor: 'rgba(255, 99, 132, 0.6)'
                    }, {
                        label: 'Pending',
                        data: @json($pendingCounts),
                        backgroundColor: 'rgba(255, 206, 86, 0.6)'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    scales: {x: {stacked: true}, y: {stacked: true}}
                }
            });

            const holidayDaysByMonths = @json($holidayDaysByMonths);
            const holidayDaysData = Array.from({length: 12}, (v, i) => {
                const monthData = holidayDaysByMonths.find(item => item.month == (i + 1));
                return monthData ? parseFloat(monthData.total_days) : 0;
            });

            new Chart(document.getElementById('holidayDaysPerMonthChart').getContext('2d'), {
                type: 'bar',
                data: {
                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                    datasets: [{
                        label: 'Holiday Days',
                        data: holidayDaysData,
                        backgroundColor: 'rgba(54, 162, 235, 0.6)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    }]
                },
                options: {responsive: true, maintainAspectRatio: true, scales: {y: {beginAtZero: true}}}
            });

            // Sickness Charts
            const sicknessByCategory = @json($sicknessByCategory);
            new Chart(document.getElementById('sicknessCategoryChart').getContext('2d'), {
                type: 'pie',
                data: {
                    labels: sicknessByCategory.map(item => item.category),
                    datasets: [{
                        data: sicknessByCategory.map(item => item.count),
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.6)', 'rgba(54, 162, 235, 0.6)', 'rgba(255, 206, 86, 0.6)',
                            'rgba(75, 192, 192, 0.6)', 'rgba(153, 102, 255, 0.6)', 'rgba(255, 159, 64, 0.6)'
                        ]
                    }]
                },
                options: {responsive: true, maintainAspectRatio: true}
            });

            function getLast12Months() {
                const months = [];
                const date = new Date();
                date.setDate(1);
                for (let i = 0; i < 12; i++) {
                    months.push(date.toISOString().slice(0, 7));
                    date.setMonth(date.getMonth() - 1);
                }
                return months.reverse();
            }

            const last12Months = getLast12Months();
            const sicknessByMonths = @json($sicknessByMonths);
            const sicknessCountPerMonth = last12Months.map(month => {
                const [year, monthNumber] = month.split('-');
                const monthData = sicknessByMonths.find(item => item.year == year && item.month == parseInt(monthNumber));
                return monthData ? monthData.count : 0;
            });

            new Chart(document.getElementById('sicknessPerMonthChart').getContext('2d'), {
                type: 'line',
                data: {
                    labels: last12Months.map(month => {
                        const [year, monthNumber] = month.split('-');
                        return new Date(year, monthNumber - 1).toLocaleString('default', {month: 'short', year: '2-digit'});
                    }),
                    datasets: [{
                        label: 'Sickness Count',
                        data: sicknessCountPerMonth,
                        borderColor: 'rgba(75, 192, 192, 1)',
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        fill: true
                    }]
                },
                options: {responsive: true, maintainAspectRatio: true, scales: {y: {beginAtZero: true}}}
            });

            const sicknessDaysByMonths = @json($sicknessDaysByMonths);
            const sicknessDaysPerMonth = last12Months.map(month => {
                const [year, monthNumber] = month.split('-');
                const monthData = sicknessDaysByMonths.find(item => item.year == year && item.month == parseInt(monthNumber));
                return monthData ? monthData.total_days : 0;
            });

            new Chart(document.getElementById('sicknessDaysPerMonthChart').getContext('2d'), {
                type: 'bar',
                data: {
                    labels: last12Months.map(month => {
                        const [year, monthNumber] = month.split('-');
                        return new Date(year, monthNumber - 1).toLocaleString('default', {month: 'short', year: '2-digit'});
                    }),
                    datasets: [{
                        label: 'Sickness Days',
                        data: sicknessDaysPerMonth,
                        backgroundColor: 'rgba(255, 99, 132, 0.6)',
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderWidth: 1
                    }]
                },
                options: {responsive: true, maintainAspectRatio: true, scales: {y: {beginAtZero: true}}}
            });
        });
    </script>
    @endpush
@stop

@section('footer')
    &nbsp;
@stop
@endcan