@extends('operations.layout.mainlayout')

@section('content')


    <style>
        .wrapper {
            background-color: #f4f6f9;
        }
        
        .dashboard-wrapper {
            padding: 20px;
            min-height: calc(100vh - 100px);
            background-color: #f4f6f9;
        }

        .dashboard-header {
            margin-bottom: 25px;
            padding: 20px;
            /*background: linear-gradient(135deg, #880e4f 0%, #d81b60 100%);*/
            /* background: linear-gradient(135deg, var(--blazma-primary) 0%, #f06292 100%); */
            border-radius: 12px;
            /* color: white;
            box-shadow: 0 10px 25px -5px rgba(var(--blazma-primary-rgb), 0.3); */
        }

        .dashboard-title {
            margin: 0;
            font-weight: 700;
            letter-spacing: 0.5px;
            font-size: 36px;
            line-height: 140%;
            color: var(--blazma-primary);
            border: 1px solid #EEF1F4;
        }

        .dashboard-subtitle {
            opacity: 0.9;
            margin-top: 5px;
            font-weight: 400;
            font-size: 16px;
            line-height: 19px;
        }

        .filter-container {
            margin-bottom: 25px;
        }

        .filter-card {
            /*background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(225, 230, 239, 0.8);*/
            
            padding: 20px 30px;
            gap: 20px;
            left: 70px;
            top: 198px;
            background: #FFFFFF;
            box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.06);
            border-radius: 30px;

        }

        .filter-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 20px;
        }

        .filter-item {
            flex: 1;
            min-width: 200px;
        }

        .filter-item label {
            display: block;
            font-weight: 600;
            margin-bottom: 8px;
            color: #4b5563;
            font-size: 13px;
        }

        .custom-datepicker {
            position: relative;
        }

        .custom-datepicker i.fa-calendar-alt {
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--blazma-primary);
            z-index: 1;
        }

        .custom-datepicker::after {
            content: '\f078';
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            color: var(--blazma-primary);
            font-size: 12px;
        }

        .date-range-picker {
            width: 100%;
            padding: 10px 35px 10px 45px;
            border: 1px solid #E6E6E6;
            border-radius: 25px;
            font-size: 14px;
            color: #4a5568;
            background-color: white;
            transition: border-color 0.2s, box-shadow 0.2s;
            height: 46px;
        }

        .date-range-picker:focus {
            outline: none;
            border-color: var(--blazma-primary);
            box-shadow: 0 0 0 3px rgba(var(--blazma-primary-rgb), 0.15);
        }

        .custom-select-wrapper {
            position: relative;
        }

        .custom-select {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 14px;
            color: #4a5568;
            background-color: white;
            appearance: none;
            -webkit-appearance: none;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .custom-select:focus {
            outline: none;
            border-color: var(--blazma-primary);
            box-shadow: 0 0 0 3px rgba(var(--blazma-primary-rgb), 0.15);
        }

        .custom-select-wrapper::after {
            content: '\f078';
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            color: var(--blazma-primary);
            font-size: 12px;
        }

        .refresh-btn {
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding: 4px 16px 4px 4px;
            gap: 8px;
            width: 123px;
            height: 46px;
            border: 1px solid var(--blazma-primary);
            border-radius: 30px;
            background: transparent;
            position: relative;
            margin-top: 23px;
            color: #101828;
            font-family: 'Lato', sans-serif;
            font-style: normal;
            font-weight: 400;
            font-size: 16px;
            line-height: 19px;
        }

        .refresh-btn i.fa-sync-alt {
            color: #FFFFFF;
            font-size: 16px;
            display: inline-block;
        }

        .refresh-btn .icon-circle {
            width: 40px;
            height: 40px;
            background: var(--blazma-primary);
            border-radius: 50%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .refresh-btn:hover {
            background: rgba(var(--blazma-primary-rgb), 0.04);
        }

        .refresh-btn:active {
            background: rgba(var(--blazma-primary-rgb), 0.08);
        }

        .charts-container {
            position: relative;
        }

        .charts-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 20px;
        }

        .chart-card {
            background: white;
            border-radius: 30px;
            overflow: hidden;
            box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.06);
            border: none;
            width: 570px;
            margin-bottom: 20px;
            display: flex;
            flex-direction: column;
        }

        .chart-header {
            padding: 24px 30px 20px;
            background: #F9FAFB;
            border-bottom: 1px solid white;
        }

        .chart-title {
            font-weight: 600;
            font-size: 18px;
            color: #101828;
            margin: 0;
            font-family: 'Lato', sans-serif;
        }

        .chart-body {
            padding: 0px 20px;
            height: 385px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .custom-legend {
            display: flex;
            flex-direction: column;
            padding: 0px 30px 24px;
        }

        .custom-legend-item {
            display: flex;
            align-items: center;
            margin-bottom: 6px;
            font-size: 14px;
        }

        .custom-legend-item .legend-color {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 8px;
        }

        .custom-legend-item .legend-label {
            font-weight: 500;
            margin-right: 8px;
            color: #4b5563;
            width: 80px;
        }

        .custom-legend-item .legend-count {
            font-weight: 600;
            margin-right: 6px;
            color: #000;
            width: 50px;
            text-align: right;
            padding-right: 10px;
        }

        .custom-legend-item .legend-percentage {
            color: #757897;
            font-size: 12px;
            width: 60px;
        }

        .donut-total-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 24px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.9);
            pointer-events: none;
            z-index: 2;
            font-family: 'Inter', sans-serif;
        }

        .legend-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            margin-top: 20px;
            border: 1px solid rgba(225, 230, 239, 0.8);
        }

        .legend-title {
            font-weight: 600;
            font-size: 16px;
            color: #374151;
            margin: 0 0 15px 0;
        }

        .status-legend-container {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            padding: 5px 0;
        }

        .legend-badge {
            display: flex;
            align-items: center;
            padding: 8px 15px;
            background: #f9fafb;
            border-radius: 50px;
            transition: transform 0.1s;
        }

        .legend-badge:hover {
            transform: translateY(-2px);
        }

        .legend-color {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
        }

        .legend-label {
            font-size: 13px;
            font-weight: 500;
            color: #4b5563;
        }

        .chart-loader {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(255, 255, 255, 0.8);
            z-index: 100;
            backdrop-filter: blur(3px);
            border-radius: 12px;
            display: none;
        }

        .loader-ring {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 4px solid #f3f3f3;
            border-top: 4px solid var(--blazma-primary);
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .empty-state {
            background-color: #f9fafb;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            color: #6b7280;
        }

        .empty-state p {
            margin: 10px 0 0;
            font-size: 14px;
        }

        .select2-container--default .select2-selection--single {
            box-sizing: border-box !important;
            display: flex !important;
            flex-direction: row;
            align-items: center;
            padding: 10px 15px 10px 20px;
            gap: 191px;
            height: 46px !important;
            border: 1px solid #E6E6E6 !important;
            border-radius: 30px !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            padding: 0;
            color: #4a5568;
            line-height: normal;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 46px;
            right: 15px;
        }

        .select2-dropdown {
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .select2-results__option {
            padding: 10px 15px;
            font-size: 14px;
        }

        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: var(--blazma-primary);
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow b{
            display: none;
        }

        .custom-legend {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin-top: 10px;
            margin-left: 10px;
            padding: 10px;
        }
        .custom-legend-item {
            display: flex;
            align-items: center;
            margin-bottom: 6px;
            font-size: 14px;
        }
        .custom-legend-item .legend-color {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 8px;
        }
        .custom-legend-item .legend-label {
            font-weight: 500;
            margin-right: 8px;
            color: #4b5563;
        }
        .custom-legend-item .legend-count {
            font-weight: 600;
            margin-right: 6px;
            padding-left: 1rem;
            color: #000;
        }
        .custom-legend-item .legend-percentage {
            color: #757897;
            font-size: 12px;
        }

        .donut-total-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 24px;
            font-weight: 700;
            color: #222;
            pointer-events: none;
            z-index: 2;
            font-family: 'Inter', 'Lato', Arial, sans-serif;
        }

    </style>


    <div class="dashboard-wrapper">
    <div class="dashboard-header" style="display: flex; justify-content: space-between; align-items: center;">
        <div>
            <h2 class="dashboard-title">Processing Branch Statistics</h2>
            <p class="dashboard-subtitle">Monitor sample processing status across branches</p>
        </div>
        <button id="fullscreenToggle" class="btn" style="background: var(--blazma-primary); color: white; border-radius: 25px; padding: 10px 20px;">
            <i class="fas fa-expand"></i> Fullscreen
        </button>
    </div>

    <div class="filter-container">
        <div class="filter-card">
            <div class="filter-row">
                <div class="filter-item">
                    <label for="processingDateRange">Date Range</label>
                    <div class="custom-datepicker">
                        <i class="fa fa-calendar-alt"></i>
                        <input type="text" id="processingDateRange" class="date-range-picker">
                    </div>
                </div>
                <div class="filter-item">
                    <label for="processingBranchFilter">Processing Branch</label>
                    <div class="custom-select-wrapper">
                        <select id="processingBranchFilter" class="custom-select">
                            <option value="">All Branches</option>
                            @foreach($filters['processingLabs'] as $lab)
                                <option value="{{ $lab->ID }}">{{ $lab->NAME_EN }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="filter-item">
                    <label for="autoRefresh">Auto Refresh</label>
                    <div class="custom-select-wrapper">
                        <select id="autoRefresh" class="custom-select">
                            <option value="0">Disabled</option>
                            <option value="1">1 Minute</option>
                            <option value="5" selected>5 Minutes</option>
                            <option value="10">10 Minutes</option>
                            <option value="15">15 Minutes</option>
                            <option value="30">30 Minutes</option>
                        </select>
                    </div>
                </div>
                <div class="filter-item">
                    <button id="refreshStats" class="refresh-btn">
                        <div class="icon-circle">
                            <i class="fa fa-sync-alt"></i>
                        </div>
                        Refresh
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div id="processingStatsChartContainer" class="charts-container">
        <div class="chart-loader">
            <div class="loader-ring"></div>
        </div>
        <div id="branchChartsRow" class="charts-grid"></div>
    </div>
</div>
@endsection

@section('warehouse_scripts')
<script src="/js/moment.min.js"></script>
<script src="/warehouse_components/js/apexcharts.min.js"></script>
<link rel="stylesheet" type="text/css" href="/bower_components/admin-lte/plugins/daterangepicker/daterangepicker.css" />
<script type="text/javascript" src="/bower_components/admin-lte/plugins/daterangepicker/daterangepicker.js"></script>
<link rel="stylesheet" href="/bower_components/admin-lte/plugins/select2/css/select2.min.css">
<script src="/bower_components/admin-lte/plugins/select2/js/select2.min.js"></script>

<script>
let branchCharts = {};

function showLoader() {
    $('.chart-loader').css('display', 'flex');
}

function hideLoader() {
    $('.chart-loader').css('display', 'none');
}

function fetchAndRenderCharts() {
    showLoader();
    const dateRange = $('#processingDateRange').data('daterangepicker');
    const filters = {
        date_from: dateRange ? dateRange.startDate.format('YYYY-MM-DD') : null,
        date_to: dateRange ? dateRange.endDate.format('YYYY-MM-DD') : null,
        processing_branch_id: $('#processingBranchFilter').val()
    };

    $.ajax({
        url: '/operations/command-center/processing-stats/data',
        type: 'GET',
        data: filters,
        headers: {
            'api-key': '{{ $api_key }}',
            'profile-id': '{{ $profile_id }}'
        },
        success: function(response) {
            renderBranchCharts(response);
            hideLoader();
        },
        error: function(error) {
            if (xhr.status === 440) {
                alert('Please login first');
                window.location.href = '/operations/login';
            }
            console.error("Error fetching chart data:", error);
            $('#branchChartsRow').html(`
                <div class="empty-state">
                    <i class="fa fa-exclamation-circle fa-3x"></i>
                    <p>Could not load chart data. Please try again later.</p>
                </div>
            `);
            hideLoader();
        }
    });
}

function renderBranchCharts(data) {
    $('#branchChartsRow').empty();

    Object.keys(branchCharts).forEach(chartId => {
        if (branchCharts[chartId]) {
            branchCharts[chartId].destroy();
            delete branchCharts[chartId];
        }
    });

    const statusColors = {
        'Ordered': '#F992AF',
        'Collected': '#B6C2FC',
        'Received': '#FFE18F',
        'Ready': '#FFBE9A',
        'Cancelled': '#649DEC',
        'Rejected': '#E5E8EB',
        'New': '#99CEFF',
        'Processed': '#8ED1CC',
        'In Process': '#FFBD99',
        'Pending': '#B4C7D4'
    };

    data.branches.forEach((branch, index) => {
        const chartId = `branch-chart-${branch.branch_id}`;
        const branchDiv = `
            <div class="chart-card">
                <div class="chart-header">
                    <h3 class="chart-title">${branch.branch_name}</h3>
                </div>
                <div class="chart-body" id="${chartId}" style="position: relative;">
                    <div class="donut-total-center" id="donut-total-${chartId}"></div>
                </div>
                <div class="custom-legend" id="legend-${chartId}"></div>
            </div>
        `;
        $('#branchChartsRow').append(branchDiv);

        if (branch.data.length === 0) {
            $(`#${chartId}`).html(`
                <div class="empty-state">
                    <i class="fa fa-info-circle fa-2x"></i>
                    <p>No data available for this branch.</p>
                </div>
            `);
            return;
        }

        const customColors = branch.labels.map(label => {
            const statusName = label.replace(/\s*\(\d+\)$/, '');
            return statusColors[statusName] || branch.colors[branch.labels.indexOf(label)];
        });

        const options = {
            series: branch.data,
            chart: {
                type: 'donut',
                height: 385,
                fontFamily: "'Inter', 'Helvetica', 'Arial', sans-serif",
                toolbar: {
                    show: false
                },
                animations: {
                    enabled: true,
                    speed: 300,
                    animateGradually: {
                        enabled: true,
                        delay: 150
                    },
                    dynamicAnimation: {
                        enabled: true,
                        speed: 350
                    }
                }
            },
            labels: branch.labels,
            colors: customColors,
            legend: {
                show: false
            },
            dataLabels: {
                enabled: true,
                formatter: function(val, opts) { 
                    const originalLabel = opts.w.globals.labels[opts.seriesIndex];
                    const displayName = originalLabel.replace(/\s*\(\d+\)$/, ''); 
                    const actualNumericCount = opts.w.globals.series[opts.seriesIndex]; 
                    const percentageString = parseFloat(opts.w.globals.seriesPercent[opts.seriesIndex]).toFixed(2) + '%';
                    
                    return `${displayName}\n${actualNumericCount} ${percentageString}`;
                },
                style: {
                    fontSize: '12px',
                    fontFamily: 'Inter, Arial, sans-serif',
                    fontWeight: 'normal',
                    colors: ['#FFFFFF']
                },
                dropShadow: {
                    enabled: true,
                    top: 1,
                    left: 1,
                    blur: 1,
                    opacity: 0.5
                }
            },
            tooltip: {
                y: {
                    formatter: function(val) {
                        return val;
                    }
                },
                theme: 'dark',
                style: {
                    fontSize: '12px',
                    fontFamily: "'Inter', 'Helvetica', 'Arial', sans-serif"
                }
            },
            plotOptions: {
                pie: {
                    customScale: 1,
                    expandOnClick: false,
                    donut: {
                        size: '35%',
                        labels: {
                            show: true,
                            name: { show: false },
                            value: { show: false },
                            total: {
                                showAlways: true,
                                show: true,
                                label: '',
                                fontSize: '24px',
                                fontWeight: 600,
                                color: 'rgba(0, 0, 0, 0.9)',
                                formatter: function(w) {
                                    return w.globals.seriesTotals.reduce((a, b) => a + b, 0);
                                }
                            }
                        }
                    }
                }
            },
            stroke: {
                width: 2,
                colors: ['#fff']
            }
        };

        branchCharts[chartId] = new ApexCharts(document.querySelector(`#${chartId}`), options);
        branchCharts[chartId].render();
        const total = branch.data.reduce((a, b) => a + b, 0);
        document.getElementById(`donut-total-${chartId}`).innerText = total;
        renderCustomLegend(`legend-${chartId}`, branch.labels, customColors, branch.data);
    });

    if (data.branches.length === 0) {
        $('#branchChartsRow').html(`
            <div class="empty-state">
                <i class="fa fa-info-circle fa-3x"></i>
                <p>No data available for the selected filters.</p>
            </div>
        `);
    }
}

function renderCustomLegend(containerId, labels, colors, data) {
    const container = document.getElementById(containerId);
    if (!container) return;
    container.innerHTML = '';
    const total = data.reduce((a, b) => a + b, 0);
    labels.forEach((label, i) => {
        const count = data[i];
        const percentage = total > 0 ? ((count / total) * 100).toFixed(2) + '%' : '0.00%';
        const cleanLabel = label.replace(/\s*\(\d+\)/, '');
        const legendItem = document.createElement('div');
        legendItem.className = 'custom-legend-item';
        legendItem.innerHTML = `
            <span class="legend-color" style="background-color: ${colors[i]};"></span>
            <span class="legend-label">${cleanLabel}</span>
            <span class="legend-count">${count}</span>
            <span class="legend-percentage">${percentage}</span>
        `;
        container.appendChild(legendItem);
    });
}

function renderStatusLegend(statusLegend) {
    const legendContainer = $('#statusLegend');
    legendContainer.empty();
    statusLegend.forEach(status => {
        const legendItem = `
            <div class="legend-badge">
                <span class="legend-color" style="background-color: ${status.color};"></span>
                <span class="legend-label">${status.label}</span>
            </div>
        `;
        legendContainer.append(legendItem);
    });
}

$(document).ready(function() {
    $('#processingDateRange').daterangepicker({
        opens: 'left',
        autoApply: true,
        locale: { format: 'YYYY-MM-DD' },
        startDate: moment().subtract(6, 'days'),
        endDate: moment(),
        ranges: {
           'Today': [moment(), moment()],
           'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
           'Last 3 Months': [moment().subtract(3, 'months'), moment()],
           'Last 6 Months': [moment().subtract(6, 'months'), moment()],
           'Last Year': [moment().subtract(1, 'year'), moment()]
        }
    });

    $('.custom-select').each(function() {
        $(this).select2({
            width: '100%',
            minimumResultsForSearch: 5,
            dropdownCssClass: 'select2-dropdown-modern',
            dropdownParent: $(this).closest('.custom-select-wrapper')
        });
    });

    fetchAndRenderCharts();
    $('#processingDateRange').on('apply.daterangepicker', fetchAndRenderCharts);
    $('#processingBranchFilter').on('change', fetchAndRenderCharts);
    $('#refreshStats').on('click', fetchAndRenderCharts);

    let autoRefreshInterval = null;

    function setAutoRefresh() {
        if (autoRefreshInterval) {
            clearInterval(autoRefreshInterval);
            autoRefreshInterval = null;
        }

        const minutes = parseInt($('#autoRefresh').val());
        if (minutes > 0) {
            const intervalMs = minutes * 60 * 1000;
            autoRefreshInterval = setInterval(fetchAndRenderCharts, intervalMs);
        }
    }

    $('#autoRefresh').on('change', setAutoRefresh);
    setAutoRefresh();

    // Fullscreen functionality
    const fullscreenBtn = document.getElementById('fullscreenToggle');
    const wrapper = document.querySelector('.wrapper');
    
    function toggleFullscreen() {
        if (!document.fullscreenElement && !document.webkitFullscreenElement && 
            !document.mozFullScreenElement && !document.msFullscreenElement) {
            // Enter fullscreen
            if (wrapper.requestFullscreen) {
                wrapper.requestFullscreen();
            } else if (wrapper.webkitRequestFullscreen) {
                wrapper.webkitRequestFullscreen();
            } else if (wrapper.mozRequestFullScreen) {
                wrapper.mozRequestFullScreen();
            } else if (wrapper.msRequestFullscreen) {
                wrapper.msRequestFullscreen();
            }
        } else {
            // Exit fullscreen
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        }
    }

    function handleFullscreenChange() {
        const navbar = document.querySelector('.main-header');
        const isFullscreen = document.fullscreenElement || document.webkitFullscreenElement || 
                            document.mozFullScreenElement || document.msFullscreenElement;
        
        if (isFullscreen) {
            if (navbar) navbar.style.display = 'none';
            fullscreenBtn.innerHTML = '<i class="fas fa-compress"></i> Exit Fullscreen';
        } else {
            if (navbar) navbar.style.display = '';
            fullscreenBtn.innerHTML = '<i class="fas fa-expand"></i> Fullscreen';
        }
    }

    fullscreenBtn.addEventListener('click', toggleFullscreen);
    document.addEventListener('fullscreenchange', handleFullscreenChange);
    document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
    document.addEventListener('mozfullscreenchange', handleFullscreenChange);
    document.addEventListener('MSFullscreenChange', handleFullscreenChange);
});
</script>
@endsection