@extends(getTemplate() . '.panel.layouts.panel_layout')

@push('styles_top')
    <style>
        .chart-container {
            position: relative;
            height: 400px;
            width: 100%;
            margin: 20px 0;
        }
    </style>
@endpush

@section('content')
    @include(
        'web.default.panel.reports.department-wise.partials._overview',
        compact('totalEmployees', 'totalCourses', 'totalPackages'))
    <div class="row gx-5 gx-xl-10">
        <section class="mt-5 col-12">
            @if (!empty($departmentStats) && $departmentStats->isNotEmpty())
                <div class="card card-flush h-md-100 pt-4">
                    <div class="card-header">
                        <h3 class="card-title">Department Statistics</h3>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="departmentChart"></canvas>
                        </div>
                    </div>
                </div>
            @else
                <div class="text-center">
                    <img src="/assets/default/img/no_result.png" alt="No Packages" class="img-fluid"
                        style="max-width: 300px;">
                    <h3 class="mt-3">No Statistics Found</h3>
                    <p>Completion statistics will be visible here once trainingg has been assigned.</p>
                    <a href="/panel/organisations/department-training"><button class="btn btn-primary">
                            <i class="ki-outline ki-plus fs-2"></i>Assign Training
                        </button>
                    </a>
                </div>
            @endif
        </section>
    </div>
    <div id="modalContainer"></div>
@endsection

@push('scripts_bottom')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const ctx = document.getElementById('departmentChart').getContext('2d');

            // Prepare and sort data
            const departments = {!! json_encode($departmentStats->pluck('department_name')) !!};
            const progress = {!! json_encode($departmentStats->pluck('avg_progress')) !!};

            // Create paired array and sort by completion
            const paired = departments.map((dept, i) => ({
                department: dept,
                progress: progress[i]
            })).sort((a, b) => b.progress - a.progress);

            const data = {
                labels: paired.map(item => item.department),
                datasets: [{
                    label: 'Completion Progress',
                    data: paired.map(item => item.progress),
                    backgroundColor: paired.map(item => {
                        const progress = item.progress;
                        if (progress >= 75) return 'rgba(40, 167, 69, 0.7)'; // Green
                        if (progress >= 50) return 'rgba(255, 193, 7, 0.7)'; // Yellow
                        if (progress >= 25) return 'rgba(255, 127, 80, 0.7)'; // Orange
                        return 'rgba(220, 53, 69, 0.7)'; // Red
                    }),
                    borderColor: 'rgba(0, 0, 0, 0.1)',
                    borderWidth: 1
                }]
            };

            new Chart(ctx, {
                type: 'bar',
                data: data,
                options: {
                    indexAxis: 'y',
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        title: {
                            display: true,
                            text: 'Department Training Progress'
                        }
                    },
                    scales: {
                        x: {
                            beginAtZero: true,
                            max: 100,
                            ticks: {
                                callback: value => `${value}%`
                            }
                        }
                    },
                    plugins: {
                        tooltip: {
                            callbacks: {
                                label: (context) => `Progress: ${context.raw}%`
                            }
                        }
                    }
                }
            });
        });
    </script>
@endpush