@extends('lay.dnekcab.retsam')

@section('title')
  {{ $page_title }}
@endsection

@section('css')
<style>


    /* ====================== */
    /* Dashboard Stat Cards   */
    /* ====================== */

    .dashboard-cards-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0px;
    }

    .dashboard-stat-card {
        background: linear-gradient(135deg, var(--card-bg), var(--card-bg-dark));
        border-radius: 16px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
        height: 160px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: #fff;
        transition: all 0.3s ease;
        border: none;
        position: relative;
        overflow: hidden;
    }

    .dashboard-stat-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    }

    .dashboard-stat-card .card-header {
        background: transparent;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        padding: 12px 16px;
    }

    .dashboard-stat-card .card-title {
        color: #fff !important;
        font-size: {{ app()->getLocale() == 'en' ? '15px' : '20px' }} !important;
        font-weight: 700;
        margin: 0;
        text-transform: uppercase;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        letter-spacing: 0.5px;
    }

    .dashboard-stat-card .card-body {
        padding: 0 16px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .dashboard-stat-card .card-icon,
    .dashboard-stat-card .card-value {
        flex: 0 0 48%;
        text-align: center;
        font-size: 20px;
        font-weight: 700;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        padding: 10px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(4px);
    }

    .dashboard-stat-card .card-icon i {
        font-size: 28px;
        color: #fff;
    }

    /* Color Variations with Title Accents */
    .transport-card {
        --card-bg: #4E8CFF;
        --card-bg-dark: #3A6FD6;
        border-left: 4px solid lighten(#4E8CFF, 10%);
    }

    .protocol-card {
        --card-bg: #FF5E5E;
        --card-bg-dark: #E04A4A;
        border-left: 4px solid lighten(#FF5E5E, 10%);
    }

    .incoming-letters-card {
        --card-bg: #6E45E2;
        --card-bg-dark: #5533C1;
        border-left: 4px solid lighten(#6E45E2, 10%);
    }

    .outgoing-letters-card {
        --card-bg: #00C9A7;
        --card-bg-dark: #00A58E;
        border-left: 4px solid lighten(#00C9A7, 10%);
    }

    .meetings-card {
        --card-bg: #6E0D25;
        --card-bg-dark: #9C1433;
        border-left: 4px solid lighten(#6E0D25, 10%);
    }

    .araiz-card {
        --card-bg: #8E44AD;
        --card-bg-dark: #7D3C98;
        border-left: 4px solid lighten(#8E44AD, 10%);
    }

    /* Responsive Adjustments */
    @media (max-width: 768px) {
        .dashboard-stat-card {
            height: auto;
            min-height: 140px;
        }

        .dashboard-stat-card .card-body {
            flex-direction: column;
            gap: 8px;
        }

        .dashboard-stat-card .card-icon,
        .dashboard-stat-card .card-value {
            width: 100%;
        }

        .dashboard-stat-card .card-title {
            font-size: {{ app()->getLocale() == 'en' ? '12px' : '20px' }};
            padding-bottom: 15px;
        }
    }
        .card-title-area {
            padding: 12px 8px 0;
        }

        .card-title {
            font-size: {{ app()->getLocale() == 'en' ? '14px' : '18px' }};
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: 0;
        }

        .card-body {
            padding: 0 16px 16px;
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .card-icon,
        .card-value {
            flex: 0 0 48%;
            text-align: center;
            font-size: 20px;
            font-weight: 700;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 12px;
            padding: 10px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .card-icon i {
            font-size: 28px;
            color: #fff;
        }

        /* ====================== */
    /* Chart Container Styles */
    /* ====================== */

    .chart-container {
        position: relative;
        width: 100%;
        height: 300px; /* Fixed height */
        min-height: 300px;
        max-height: 300px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Lock chart dimensions to prevent zoom distortion */
    .apexcharts-canvas,
    .apexcharts-canvas svg {
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }

    /* Responsive behavior */
    @media (max-width: 992px) {
        .chart-container {
            height: 280px;
            min-height: 280px;
            max-height: 280px;
        }
    }

    @media (max-width: 768px) {
        .chart-container {
            height: 250px;
            min-height: 250px;
            max-height: 250px;
        }
    }

    @media (max-width: 576px) {
        .chart-container {
            height: 220px;
            min-height: 220px;
            max-height: 220px;
        }
    }

    /* Prevent text scaling in charts */
    .apexcharts-text,
    .apexcharts-title-text,
    .apexcharts-legend-text {
        transform: scale(1) !important;
    }

    /* Chart card specific adjustments */
    .chart-card {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .chart-card .card-body {
        padding: 0;
        flex: 1;
        display: flex;
        min-height: 0; /* Prevent flex growth */
    }

    /* Fix for ApexCharts tooltips */
    .apexcharts-tooltip {
        transform: scale(1) !important;
        transform-origin: center center !important;
    }
</style>
@endsection

@section('page-content')
<div class="page-content">
    <div class="container-fluid">

        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <div style="display: flex;" class="align-items-center">
                <h4 class="mb-sm-0 font-size-18 title">{{ $page_title }}</h4>
            </div>
            <div class="page-title-right">
                <h6 class="filterDate" style="font-size:10px !important;"></h6>
            </div>
        </div>

        <div class="col-lg-12" id="data_content">

            <div class="row dashboard-cards-row">
                @if(auth()->user()->hasPermissionTo('Transport - All Transport'))
                <div class="col-md-2 col-sm-4 col-6">
                    <div class="card dashboard-stat-card transport-card text-white text-center">
                        <div class="card-header card-title-area">
                            <h5 class="card-title">{{ __('dashboard.transports') }}</h5>
                        </div>
                        <div class="card-body d-flex align-items-center justify-content-between">
                            <div class="card-icon">
                                <i class="bx bx-bus"></i>
                            </div>
                            <div class="card-value">
                                <a href="{{ route('allTransport') }}" class="text-white" target="_blank">{{ $active_transport ?? '0' }}</a>
                            </div>
                        </div>
                    </div>
                </div>
                @endif

                @if(auth()->user()->hasPermissionTo('Protocol - All Protocol'))
                <div class="col-md-2 col-sm-4 col-6">
                    <div class="card dashboard-stat-card protocol-card text-white text-center">
                        <div class="card-header card-title-area">
                            <h5 class="card-title">{{ __('dashboard.protocols') }}</h5>
                        </div>
                        <div class="card-body d-flex align-items-center justify-content-between">
                            <div class="card-icon">
                                <i class="bx bx-shield"></i>
                            </div>
                            <div class="card-value">
                                <a href="{{ route('allProtocol') }}" class="text-white" target="_blank">{{ $active_protocol ?? '0' }}</a>
                            </div>
                        </div>
                    </div>
                </div>
                @endif

                @if(auth()->user()->hasPermissionTo('Letters - Incoming Letter'))
                <div class="col-md-2 col-sm-4 col-6">
                    <div class="card dashboard-stat-card incoming-letters-card text-white text-center">
                        <div class="card-header card-title-area">
                            <h5 class="card-title">{{ __('dashboard.imports') }}</h5>
                        </div>
                        <div class="card-body d-flex align-items-center justify-content-between">
                            <div class="card-icon">
                                <i class="bx bx-envelope"></i>
                            </div>
                            <div class="card-value">
                                <a href="{{ route('letter.incoming.list') }}" class="text-white" target="_blank">{{ $active_import ?? '0' }}</a>
                            </div>
                        </div>
                    </div>
                </div>
                @endif

                @if(auth()->user()->hasPermissionTo('Letters - Outgoing Letter'))
                <div class="col-md-2 col-sm-4 col-6">
                    <div class="card dashboard-stat-card outgoing-letters-card text-white text-center">
                        <div class="card-header card-title-area">
                            <h5 class="card-title">{{ __('dashboard.exports') }}</h5>
                        </div>
                        <div class="card-body d-flex align-items-center justify-content-between">
                            <div class="card-icon">
                                <i class="bx bx-paper-plane"></i>
                            </div>
                            <div class="card-value">
                                <a href="{{ route('letter.outgoing.list') }}" class="text-white" target="_blank">{{ $active_export ?? '0' }}</a>
                            </div>
                        </div>
                    </div>
                </div>
                @endif

                @if(auth()->user()->hasPermissionTo('Meeting - All Meetings'))
                <div class="col-md-2 col-sm-4 col-6">
                    <div class="card dashboard-stat-card meetings-card text-white text-center">
                        <div class="card-header card-title-area">
                            <h5 class="card-title">{{ __('dashboard.meetings') }}</h5>
                        </div>
                        <div class="card-body d-flex align-items-center justify-content-between">
                            <div class="card-icon">
                                <i class="bx bx-user-voice"></i>
                            </div>
                            <div class="card-value">
                                 <a href="{{ route('meetings.index') }}" class="text-white" target="_blank">{{ $active_meeting ?? '0' }}</a>
                            </div>
                        </div>
                    </div>
                </div>
                @endif

                @if(auth()->user()->hasPermissionTo('Application - All Application'))
                <div class="col-md-2 col-sm-4 col-6">
                    <div class="card dashboard-stat-card araiz-card text-white text-center">
                        <div class="card-header card-title-area">
                            <h5 class="card-title">{{ __('dashboard.araiz') }}</h5>
                        </div>
                        <div class="card-body d-flex align-items-center justify-content-between">
                            <div class="card-icon">
                                <i class="bx bx-file"></i>
                            </div>
                            <div class="card-value">
                                <a href="{{ route('allApplication') }}" class="text-white" target="_blank">{{ $active_araiz ?? '0' }}</a>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
            </div>

            <!-- First Row of Charts -->
            <div class="row mt-4">
                <div class="col-md-4">
                    <div class="card chart-card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Transport Status Distribution</h5>
                        </div>
                        <div class="card-body">
                            <div id="transportStatusChart" class="chart-container"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card chart-card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Monthly Letter Count</h5>
                        </div>
                        <div class="card-body">
                            <div id="monthlyLettersChart" class="chart-container"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card chart-card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Meeting Completion Rate</h5>
                        </div>
                        <div class="card-body">
                            <div id="meetingCompletionChart" class="chart-container"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Second Row of Charts -->
            <div class="row mt-4">
                <div class="col-md-4">
                    <div class="card chart-card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Protocol Status Overview</h5>
                        </div>
                        <div class="card-body">
                            <div id="protocolStatusChart" class="chart-container"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card chart-card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Application Types</h5>
                        </div>
                        <div class="card-body">
                            <div id="applicationTypesChart" class="chart-container"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card chart-card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Letter Types Comparison</h5>
                        </div>
                        <div class="card-body">
                            <div id="letterTypesChart" class="chart-container"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Third Row of Charts -->
            <div class="row mt-4">
                <div class="col-md-4">
                    <div class="card chart-card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Transport Usage Trend</h5>
                        </div>
                        <div class="card-body">
                            <div id="transportTrendChart" class="chart-container"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card chart-card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Employee Activity</h5>
                        </div>
                        <div class="card-body">
                            <div id="employeeActivityChart" class="chart-container"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card chart-card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Document Status</h5>
                        </div>
                        <div class="card-body">
                            <div id="documentStatusChart" class="chart-container"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Fourth Row of Charts -->
            <div class="row mt-4">
                <div class="col-md-6">
                    <div class="card chart-card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Quarterly Performance</h5>
                        </div>
                        <div class="card-body">
                            <div id="quarterlyPerformanceChart" class="chart-container"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card chart-card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Department Workload</h5>
                        </div>
                        <div class="card-body">
                            <div id="departmentWorkloadChart" class="chart-container"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script src="{{asset('assets/dnekcab/js/pages/axios.js')}}"></script>
<script>
    var fromDate = '';
    var toDate = '';
    var termValue = '';

    $(document).ready(function(){
        // Common chart settings
        const chartOptions = {
            chart: {
                height: '100%',
                type: 'line',
                toolbar: {
                    show: true,
                    tools: {
                        download: true,
                        selection: false,
                        zoom: false,
                        zoomin: false,
                        zoomout: false,
                        pan: false,
                        reset: false
                    }
                },
                animations: {
                    enabled: true,
                    easing: 'easeinout',
                    speed: 800
                }
            },
            colors: ['#4E8CFF', '#FF5E5E', '#6E45E2', '#00C9A7', '#6E0D25', '#8E44AD'],
            dataLabels: {
                enabled: false
            },
            stroke: {
                curve: 'smooth',
                width: 2
            },
            tooltip: {
                shared: true,
                intersect: false
            },
            legend: {
                position: 'top',
                horizontalAlign: 'center'
            },
            responsive: [{
                breakpoint: 768,
                options: {
                    chart: {
                        height: 250
                    },
                    legend: {
                        position: 'bottom'
                    }
                }
            }]
        };

        // Initialize all charts
        initTransportStatusChart();
        initMonthlyLettersChart();
        initMeetingCompletionChart();
        initProtocolStatusChart();
        initApplicationTypesChart();
        initLetterTypesChart();
        initTransportTrendChart();
        initEmployeeActivityChart();
        initDocumentStatusChart();
        initQuarterlyPerformanceChart();
        initDepartmentWorkloadChart();

        // Chart 1: Transport Status Distribution (Pie)
        function initTransportStatusChart() {
            var options = {
                series: [65, 25, 10],
                chart: {
                    type: 'pie',
                    height: '100%'
                },
                labels: ["Active", "Pending", "Cancelled"],
                colors: ['#4E8CFF', '#FFB822', '#FD625E'],
                legend: {
                    position: 'bottom'
                },
                responsive: [{
                    breakpoint: 480,
                    options: {
                        chart: {
                            height: 250
                        },
                        legend: {
                            position: 'bottom'
                        }
                    }
                }]
            };

            var chart = new ApexCharts(document.querySelector("#transportStatusChart"), options);
            chart.render();
        }

        // Chart 2: Monthly Letter Count (Line)
        function initMonthlyLettersChart() {
            var options = {
                series: [{
                    name: "Incoming",
                    data: [30, 40, 35, 50, 49, 60, 70, 91, 125, 110, 95, 120]
                }, {
                    name: "Outgoing",
                    data: [20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75]
                }],
                chart: {
                    type: 'line',
                    height: '100%'
                },
                stroke: {
                    width: 3
                },
                xaxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                },
                colors: ['#6E45E2', '#00C9A7']
            };

            var chart = new ApexCharts(document.querySelector("#monthlyLettersChart"), options);
            chart.render();
        }

        // Chart 3: Meeting Completion Rate (Radial)
        function initMeetingCompletionChart() {
            var options = {
                series: [82],
                chart: {
                    type: 'radialBar',
                    height: '100%'
                },
                plotOptions: {
                    radialBar: {
                        startAngle: -135,
                        endAngle: 135,
                        hollow: {
                            margin: 0,
                            size: '70%',
                        },
                        dataLabels: {
                            name: {
                                offsetY: -10,
                                color: '#333',
                                fontSize: '13px'
                            },
                            value: {
                                color: '#333',
                                fontSize: '30px',
                                show: true
                            }
                        },
                        track: {
                            background: '#e0e0e0',
                            strokeWidth: '97%',
                            margin: 5,
                        }
                    }
                },
                fill: {
                    type: 'gradient',
                    gradient: {
                        shade: 'dark',
                        shadeIntensity: 0.15,
                        inverseColors: false,
                        opacityFrom: 1,
                        opacityTo: 1,
                        stops: [0, 50, 65, 91]
                    },
                },
                stroke: {
                    dashArray: 4
                },
                labels: ['Completion Rate'],
                colors: ['#6E0D25']
            };

            var chart = new ApexCharts(document.querySelector("#meetingCompletionChart"), options);
            chart.render();
        }

        // Chart 4: Protocol Status Overview (Bar)
        function initProtocolStatusChart() {
            var options = {
                series: [{
                    name: 'Count',
                    data: [44, 55, 41, 37, 22]
                }],
                chart: {
                    type: 'bar',
                    height: '100%'
                },
                plotOptions: {
                    bar: {
                        borderRadius: 4,
                        horizontal: true,
                    }
                },
                dataLabels: {
                    enabled: false
                },
                xaxis: {
                    categories: ['Draft', 'Pending', 'Approved', 'Rejected', 'Archived'],
                },
                colors: ['#FF5E5E']
            };

            var chart = new ApexCharts(document.querySelector("#protocolStatusChart"), options);
            chart.render();
        }

        // Chart 5: Application Types (Donut)
        function initApplicationTypesChart() {
            var options = {
                series: [44, 55, 13, 33],
                chart: {
                    type: 'donut',
                    height: '100%'
                },
                labels: ['Leave', 'Training', 'Promotion', 'Transfer'],
                legend: {
                    position: 'bottom'
                },
                colors: ['#4E8CFF', '#FF5E5E', '#6E45E2', '#00C9A7'],
                responsive: [{
                    breakpoint: 480,
                    options: {
                        chart: {
                            width: 200
                        },
                        legend: {
                            position: 'bottom'
                        }
                    }
                }]
            };

            var chart = new ApexCharts(document.querySelector("#applicationTypesChart"), options);
            chart.render();
        }

        // Chart 6: Letter Types Comparison (Area)
        function initLetterTypesChart() {
            var options = {
                series: [{
                    name: 'Official',
                    data: [31, 40, 28, 51, 42, 109, 100]
                }, {
                    name: 'Personal',
                    data: [11, 32, 45, 32, 34, 52, 41]
                }],
                chart: {
                    type: 'area',
                    height: '100%',
                    stacked: false
                },
                stroke: {
                    curve: 'smooth',
                    width: 2
                },
                fill: {
                    type: 'gradient',
                    gradient: {
                        shadeIntensity: 1,
                        inverseColors: false,
                        opacityFrom: 0.5,
                        opacityTo: 0.1,
                        stops: [0, 90, 100]
                    },
                },
                xaxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
                },
                colors: ['#6E45E2', '#00C9A7']
            };

            var chart = new ApexCharts(document.querySelector("#letterTypesChart"), options);
            chart.render();
        }

        // Chart 7: Transport Usage Trend (Line)
        function initTransportTrendChart() {
            var options = {
                series: [{
                    name: "Usage Hours",
                    data: [10, 15, 12, 18, 20, 25, 22, 30, 28, 35, 40, 38]
                }],
                chart: {
                    type: 'line',
                    height: '100%'
                },
                stroke: {
                    width: 3,
                    curve: 'smooth'
                },
                xaxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                },
                colors: ['#4E8CFF'],
                markers: {
                    size: 5,
                    hover: {
                        size: 7
                    }
                },
                tooltip: {
                    y: {
                        formatter: function(val) {
                            return val + " hours"
                        }
                    }
                }
            };

            var chart = new ApexCharts(document.querySelector("#transportTrendChart"), options);
            chart.render();
        }

        // Chart 8: Employee Activity (Bar)
        function initEmployeeActivityChart() {
            var options = {
                series: [{
                    name: 'High Level',
                    data: [44, 55, 41, 67, 22, 43]
                }, {
                    name: 'Low Level',
                    data: [13, 23, 20, 8, 13, 27]
                }],
                chart: {
                    type: 'bar',
                    height: '100%',
                    stacked: true,
                },
                plotOptions: {
                    bar: {
                        horizontal: true,
                        columnWidth: '80%',
                    },
                },
                xaxis: {
                    categories: ['Meetings', 'Letters', 'Protocols', 'Transports', 'Applications', 'Documents'],
                },
                tooltip: {
                    y: {
                        formatter: function(val) {
                            return val + " activities"
                        }
                    }
                },
                colors: ['#6E0D25', '#8E44AD']
            };

            var chart = new ApexCharts(document.querySelector("#employeeActivityChart"), options);
            chart.render();
        }

        // Chart 9: Document Status (Pie)
        function initDocumentStatusChart() {
            var options = {
                series: [75, 15, 10],
                chart: {
                    type: 'pie',
                    height: '100%'
                },
                labels: ["Approved", "Pending", "Rejected"],
                colors: ['#4E8CFF', '#FFB822', '#FD625E'],
                legend: {
                    position: 'bottom'
                },
                responsive: [{
                    breakpoint: 480,
                    options: {
                        chart: {
                            height: 250
                        },
                        legend: {
                            position: 'bottom'
                        }
                    }
                }]
            };

            var chart = new ApexCharts(document.querySelector("#documentStatusChart"), options);
            chart.render();
        }

        // Chart 10: Quarterly Performance (Radar)
        function initQuarterlyPerformanceChart() {
            var options = {
                series: [{
                    name: 'Q1',
                    data: [80, 50, 30, 40, 70, 90]
                }, {
                    name: 'Q2',
                    data: [20, 90, 60, 80, 50, 10]
                }, {
                    name: 'Q3',
                    data: [85, 45, 65, 30, 75, 25]
                }],
                chart: {
                    type: 'radar',
                    height: '100%',
                    dropShadow: {
                        enabled: true,
                        blur: 1,
                        left: 1,
                        top: 1
                    }
                },
                colors: ['#4E8CFF', '#FF5E5E', '#6E45E2'],
                stroke: {
                    width: 2
                },
                fill: {
                    opacity: 0.1
                },
                markers: {
                    size: 0
                },
                xaxis: {
                    categories: ['Transport', 'Protocols', 'Letters', 'Meetings', 'Documents', 'Applications']
                }
            };

            var chart = new ApexCharts(document.querySelector("#quarterlyPerformanceChart"), options);
            chart.render();
        }

        // Chart 11: Department Workload (Bar)
        function initDepartmentWorkloadChart() {
            var options = {
                series: [{
                    name: 'Current Workload',
                    data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
                }],
                chart: {
                    type: 'bar',
                    height: '100%'
                },
                plotOptions: {
                    bar: {
                        borderRadius: 4,
                        horizontal: true,
                    }
                },
                dataLabels: {
                    enabled: false
                },
                xaxis: {
                    categories: ['HR', 'Finance', 'IT', 'Marketing', 'Operations', 'Logistics', 'Legal', 'Procurement', 'Admin', 'Security'],
                },
                colors: ['#00C9A7']
            };

            var chart = new ApexCharts(document.querySelector("#departmentWorkloadChart"), options);
            chart.render();
        }

        // Your existing functions...
        getGeneralCounters(fromDate,toDate, termValue);
        getVacancyCounts(fromDate,toDate, termValue);
        getVacancyCounts(fromDate,toDate, termValue);
        getPieCounts(fromDate,toDate, termValue);
        getDonutCounts(fromDate,toDate, termValue);

        $(document).on("click", "#dateRange", function(){
            let term = $(this).attr('data');

            if(term =='dateRange'){
                $('.date_range_form').removeClass('hiddens');
            } else {
                $('.date_range_form').addClass('hiddens');
            }
        });

        $(document).on("click", "#currWeek, #currMonth, #currYear, #all", function(){
            $('.date_range_form').addClass('hiddens');
            $("#from").val('');
            $("#to").val('');
            let term = $(this).attr('data');
            let from = '';
            let to = '';

            getGeneralCounters(from,to,term);
            getVacancyCounts(from,to,term);
            getVacancyCounts(from,to,term);
            getPieCounts(from,to,term);
            getDonutCounts(from,to,term);
        });

        $(document).on("blur", ".datepickers", function() {
            let term = 'dateRange';
            let from = $("#from").val();
            let to = $("#to").val();

            getGeneralCounters(from,to,term);
            getVacancyCounts(from,to,term);
            getVacancyCounts(from,to,term);
            getPieCounts(from,to,term);
            getDonutCounts(from,to,term);
        });
    });
</script>
@endsection