@extends('operations.layout.mainlayout')

@section('content')

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

        :root {
            --primary-brand-color: #D81B60;
            --primary-brand-light: #F48FB1;
            --primary-bg: #F8F9FD;
            --card-bg: #FFFFFF;
            --text-primary: #212529;
            --text-secondary: #6C757D;
            --border-color: #DEE2E6;
            --border-light-color: #F1F3F5;
            --input-border-color: #CED4DA;
            --input-focus-border-color: var(--primary-brand-color);
            --input-focus-shadow-color: rgba(var(--blazma-primary-rgb), 0.2);

            --blue-accent: #007BFF;
            --green-accent: #28A745;
            --red-accent: #DC3545;

            --font-family-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

            --border-radius-sm: 0.25rem;
            --border-radius-md: 0.5rem;
            --border-radius-lg: 0.75rem;

            --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
            --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
        }

        *, *::before, *::after {
            box-sizing: border-box;
        }
        body {
            font-family: var(--font-family-sans-serif);
            background-color: var(--primary-bg);
            color: var(--text-primary);
            line-height: 1.6;
            margin: 0;
        }

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

        .dashboard-header {
            margin-bottom: 25px;
            padding: 20px;
            border-radius: 12px;
        }

        .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 {
            padding: 20px 30px;
            gap: 20px;
            background: #FFFFFF;
            box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.06);
            border-radius: 30px;
            border: none;
        }

        .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 {
            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: 30px;
            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: 30px;
            font-size: 14px;
            color: #4a5568;
            background-color: white;
            background-image: none;
            appearance: none;
            -webkit-appearance: none;
            transition: border-color 0.2s, box-shadow 0.2s;
            height: 46px;
        }

        .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;
        }

        .charts-container {
            position: relative;
        }

        .chart-card {
            background: white;
            border-radius: 30px;
            overflow: hidden;
            box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.06);
            border: none;
            width: 100%;
            margin-bottom: 25px;
        }

        .chart-header {
            padding: 24px 30px 20px;
            background: #F9FAFB;
            border-bottom: 1px solid white;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

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

        .chart-actions {
            display: flex;
            gap: 10px;
        }

        .action-btn {
            padding: 6px 16px;
            border: 1px solid #757897;
            border-radius: 30px;
            font-size: 14px;
            font-weight: 400;
            color: #757897;
            background-color: transparent;
            cursor: pointer;
            transition: all 0.2s;
            font-family: 'Lato', sans-serif;
        }

        .action-btn:hover {
            background-color: #F9FAFB;
        }

        .chart-body {
            padding: 16px;
            min-height: 380px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
        }

        .chart-body > div[id^="changedRateChart"] {
            width: 100% !important;
        }

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

        .loader-ring {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 5px solid var(--border-light-color);
            border-top: 5px solid var(--primary-brand-color);
            animation: spin 0.8s linear infinite;
        }

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

        .empty-state {
            background-color: var(--primary-bg);
            border-radius: var(--border-radius-md);
            padding: 30px;
            text-align: center;
            color: var(--text-secondary);
            width: 100%;
        }

        .empty-state .fa-exclamation-circle {
            font-size: 48px;
            color: var(--primary-brand-light);
            margin-bottom: 15px;
        }

        .empty-state p {
            margin: 0;
            font-size: 16px;
            font-weight: 500;
        }

        .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-selection__arrow b[role="presentation"] {
            display: none !important;
        }

        .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);
        }

        span[role="presentation"] {
            display: none !important;
        }
        .select2-selection__arrow b[role="presentation"] {
            display: none !important;
        }
    </style>

    <div class="dashboard-wrapper">
        <div class="dashboard-header" style="display: flex; justify-content: space-between; align-items: center;">
            <div>
                <h2 class="dashboard-title">Changed Results Rate Statistics</h2>
                <p class="dashboard-subtitle">Monitor changed result rates across labs and units</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="changedDateRange">Date Range</label>
                        <div class="custom-datepicker">
                            <i class="fas fa-calendar-alt"></i>
                            <input type="text" id="changedDateRange" class="date-range-picker">
                        </div>
                    </div>
                    <div class="filter-item">
                        <label for="changedLabFilter">Processing Lab</label>
                        <div class="custom-select-wrapper">
                            <select id="changedLabFilter" class="custom-select">
                                <option value="">All Labs</option>
                                @foreach($filters['processingLabs'] as $lab)
                                    <option value="{{ $lab->ID }}">{{ $lab->NAME_EN }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="filter-item">
                        <label for="changedCategoryFilter">Unit Category</label>
                        <div class="custom-select-wrapper">
                            <select id="changedCategoryFilter" class="custom-select">
                                <option value="">All Categories</option>
                                @if(isset($filters['unitCategories']))
                                    @foreach($filters['unitCategories'] as $category)
                                        <option value="{{ $category->ID }}">{{ $category->NAME_EN }}</option>
                                    @endforeach
                                @endif
                            </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>
            </div>
        </div>

        <div class="charts-container">
            <div class="chart-loader">
                <div class="loader-ring"></div>
            </div>
            <div id="changedRateChartContainer" class="chart-card">
                <div class="chart-header">
                    <div>
                        <h3 class="chart-title">Changed Results Distribution</h3>
                        <div class="chart-subtitle">Changed result rates by processing unit</div>
                    </div>
                    <div class="chart-actions">
                        <button class="action-btn download-svg">Download SVG</button>
                        <button class="action-btn download-png">Download PNG</button>
                        <button class="action-btn download-csv">Download CSV</button>
                    </div>
                </div>
                <div class="chart-body">
                    <div id="changedRateChart"></div>
                </div>
            </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 changedRateChart = null;
        let lastFilters = null;
        let autoRefreshInterval = null;

        function getCssVar(cssVarNameWithVarSyntax) {
            if (cssVarNameWithVarSyntax && cssVarNameWithVarSyntax.startsWith('var(--') && cssVarNameWithVarSyntax.endsWith(')')) {
                const varName = cssVarNameWithVarSyntax.substring(4, cssVarNameWithVarSyntax.length - 1);
                let value = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
                if (value.startsWith('var(--')) {
                    return getCssVar(value);
                }
                return value || cssVarNameWithVarSyntax;
            }
            return cssVarNameWithVarSyntax;
        }


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

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

        function getFilters() {
            const dateRange = $('#changedDateRange').data('daterangepicker');
            return {
                date_from: dateRange ? dateRange.startDate.format('YYYY-MM-DD') : null,
                date_to: dateRange ? dateRange.endDate.format('YYYY-MM-DD') : null,
                processing_lab_id: $('#changedLabFilter').val(),
                unit_category_id: $('#changedCategoryFilter').val()
            };
        }

        function fetchAndRenderCharts() {
            const filters = getFilters();

            if (lastFilters && JSON.stringify(lastFilters) === JSON.stringify(filters)) {
                return;
            }

            lastFilters = filters;
            showLoader();

            $.ajax({
                url: '/operations/command-center/changed-rate-stats/data',
                type: 'GET',
                data: filters,
                headers: {
                    'api-key': '{{ $api_key }}',
                    'profile-id': '{{ $profile_id }}'
                },
                success: function(response) {
                    renderChangedRateChart(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);
                    $('#changedRateChart').html(`
                <div class="empty-state">
                    <i class="fas fa-exclamation-circle fa-3x"></i>
                    <p>Could not load chart data. Please try again.</p>
                </div>
            `);
                    hideLoader();
                }
            });
        }

        function renderChangedRateChart(data) {
            const baseChartColors = {
                blue: 'var(--blue-accent)',
                green: 'var(--green-accent)',
                pink: 'var(--primary-brand-color)',
                grey: 'var(--text-secondary)',
                lightGrey: 'var(--border-light-color)',
                fontFamily: 'var(--font-family-sans-serif)'
            };

            const resolvedChartColors = {
                blue: getCssVar(baseChartColors.blue) || '#007BFF',
                green: getCssVar(baseChartColors.green) || '#28A745',
                pink: getCssVar(baseChartColors.pink) || '#D81B60',
                grey: getCssVar(baseChartColors.grey) || '#6C757D',
                lightGrey: getCssVar(baseChartColors.lightGrey) || '#F1F3F5',
                fontFamily: getCssVar(baseChartColors.fontFamily) || 'Inter, sans-serif'
            };

            const getChartColorsArray = () => {
                return [resolvedChartColors.blue, resolvedChartColors.green, resolvedChartColors.pink];
            };

            const options = {
                series: data.series || [{
                    name: 'Value',
                    data: Array.isArray(data.data) ? data.data : []
                }],
                chart: {
                    type: 'bar',
                    height: 380,
                    fontFamily: resolvedChartColors.fontFamily,
                    foreColor: resolvedChartColors.grey,
                    toolbar: {
                        show: false,
                        tools: {
                            download: true,
                            selection: false, zoom: false, zoomin: false, zoomout: false, pan: false, reset: false
                        },
                        export: {
                            csv: { filename: 'changed-results-stats' },
                            svg: { filename: 'changed-results-stats' },
                            png: { filename: 'changed-results-stats' }
                        }
                    }
                },
                colors: getChartColorsArray(),
                plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: data.view_type === 'unit_breakdown' ? '70%' : '55%',
                        borderRadius: 5,
                        distributed: data.view_type === 'overall'
                    },
                },
                dataLabels: {
                    enabled: true,
                    formatter: function(val, { seriesIndex, dataPointIndex, w }) {
                        if (data.view_type === 'unit_breakdown') {
                            if (w.config.series[seriesIndex] && w.config.series[seriesIndex].name && w.config.series[seriesIndex].name.toLowerCase().includes('rate')) {
                                return val.toFixed(2) + '%';
                            }
                            if (seriesIndex === 2 && (w.config.series[seriesIndex].name || '').toLowerCase().includes('rate')) {
                                return val.toFixed(2) + '%';
                            }
                            return val.toLocaleString();
                        } else if (data.view_type === 'overall' && dataPointIndex === 2) {
                            if (w.config.xaxis.categories[dataPointIndex] && w.config.xaxis.categories[dataPointIndex].toLowerCase().includes('rate')) {
                                return val.toFixed(2) + '%';
                            }
                        }
                        return val.toLocaleString();
                    },
                    style: {
                        fontSize: '12px',
                        fontWeight: 500,
                        colors: ['#fff']
                    },
                    offsetY: -20
                },
                stroke: {
                    show: true,
                    width: 2,
                    colors: ['transparent']
                },
                xaxis: {
                    categories: data.labels || [],
                    labels: {
                        style: {
                            colors: resolvedChartColors.grey,
                            fontSize: '12px',
                            fontWeight: 500,
                        },
                        trim: true,
                        maxHeight: 100,
                        rotate: -30,
                        rotateAlways: false,
                        hideOverlappingLabels: true,
                    },
                    axisBorder: { show: false },
                    axisTicks: { show: false },
                },
                yaxis: data.view_type === 'unit_breakdown' ? [
                    {
                        title: { text: 'Count', style: { color: resolvedChartColors.grey, fontSize: '13px', fontWeight: 500 } },
                        labels: { style: { colors: resolvedChartColors.grey, fontSize: '12px' }, formatter: val => Math.round(val).toLocaleString() }
                    },
                    { show: false },
                    {
                        opposite: true,
                        max: (data.series && data.series[2] && (data.series[2].name || '').toLowerCase().includes('rate') && Math.max(...(data.series[2].data || [])) <= 100) ? 100 : undefined,
                        title: { text: 'Changed Rate (%)', style: { color: resolvedChartColors.grey, fontSize: '13px', fontWeight: 500 } },
                        labels: { style: { colors: resolvedChartColors.grey, fontSize: '12px' }, formatter: val => val.toFixed(1) + '%' }
                    }
                ] : {
                    title: { text: 'Value', style: { color: resolvedChartColors.grey, fontSize: '13px', fontWeight: 500 } },
                    labels: {
                        style: { colors: resolvedChartColors.grey, fontSize: '12px' },
                        formatter: function(val) {
                            return val.toLocaleString();
                        }
                    }
                },
                fill: {
                    opacity: 0.95,
                    type: 'solid',
                },
                tooltip: {
                    enabled: true,
                    theme: 'dark',
                    y: {
                        formatter: function(val, { seriesIndex, dataPointIndex, w }) {
                            const seriesName = w.globals.seriesNames[seriesIndex] || '';
                            const categoryName = w.globals.labels[dataPointIndex] || '';

                            if (data.view_type === 'unit_breakdown') {
                                if (seriesName.toLowerCase().includes('rate')) {
                                    return val.toFixed(2) + '%';
                                }
                                return val.toLocaleString() + " " + seriesName.replace('Tests', '').trim();
                            } else if (data.view_type === 'overall') {
                                if (categoryName.toLowerCase().includes('rate')) {
                                    return val.toFixed(2) + '%';
                                }
                            }
                            return val.toLocaleString();
                        }
                    }
                },
                legend: {
                    show: data.view_type === 'unit_breakdown',
                    position: 'top',
                    horizontalAlign: 'right',
                    fontSize: '13px',
                    fontWeight: 500,
                    fontFamily: resolvedChartColors.fontFamily,
                    markers: { radius: 5 },
                    itemMargin: { horizontal: 10, vertical: 5 },
                    labels: { colors: resolvedChartColors.grey }
                },
                grid: {
                    borderColor: resolvedChartColors.lightGrey,
                    strokeDashArray: 4,
                    yaxis: { lines: { show: true } },
                    xaxis: { lines: { show: false } }
                }
            };

            if (changedRateChart) {
                changedRateChart.destroy();
            }

            changedRateChart = new ApexCharts(document.querySelector("#changedRateChart"), options);
            changedRateChart.render().catch(function(err) {
                console.error("ApexCharts render error:", err);
                $('#changedRateChart').html(`
            <div class="empty-state">
                <i class="fas fa-exclamation-circle fa-3x"></i>
                <p>Error rendering chart.</p>
            </div>
        `);
            });;
        }

        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);
            }
        }

        $(document).ready(function() {
            $('#changedDateRange').daterangepicker({
                opens: 'left',
                autoApply: true,
                locale: {
                    format: 'YYYY-MM-DD',
                },
                startDate: moment().subtract(6, 'days'),
                endDate: moment(),
                ranges: {
                    'Today': [moment().startOf('day'), moment().endOf('day')],
                    'Yesterday': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
                    'Last 7 Days': [moment().subtract(6, 'days').startOf('day'), moment().endOf('day')],
                    'Last 30 Days': [moment().subtract(29, 'days').startOf('day'), moment().endOf('day')],
                    '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').startOf('day'), moment().endOf('day')],
                    'Last 6 Months': [moment().subtract(6, 'months').startOf('day'), moment().endOf('day')],
                    'Last Year': [moment().subtract(1, 'year').startOf('day'), moment().endOf('day')]
                }
            });

            $('#changedLabFilter, #changedCategoryFilter').select2({
                width: '100%',
                minimumResultsForSearch: 5,
                dropdownCssClass: 'select2-dropdown-modern'
            });

            $('.custom-select').on('select2:opening', function (e) {
                const currentSelectId = $(this).attr('id');
                $('.custom-select').each(function () {
                    if ($(this).attr('id') !== currentSelectId && $(this).data('select2')) {
                        $(this).select2('close');
                    }
                });
            });

            fetchAndRenderCharts();
            $('#changedDateRange').on('apply.daterangepicker', fetchAndRenderCharts);
            $('#changedLabFilter, #changedCategoryFilter').on('change', fetchAndRenderCharts);
            $('#autoRefresh').on('change', setAutoRefresh);
            setAutoRefresh();
            setupDownloadButtons();
        });

        function setupDownloadButtons() {
            $('.download-svg').click(function() {
                const chartCard = $(this).closest('.chart-card');
                if (changedRateChart) {
                    const fileName = chartCard.find('.chart-title').text().toLowerCase().replace(/\s+/g, '-');
                    changedRateChart.exports.exportToSVG({
                        filename: fileName
                    });
                }
            });

            $('.download-png').click(function() {
                const chartCard = $(this).closest('.chart-card');
                if (changedRateChart) {
                    const fileName = chartCard.find('.chart-title').text().toLowerCase().replace(/\s+/g, '-');
                    changedRateChart.exports.exportToPng({
                        filename: fileName
                    });
                }
            });

            $('.download-csv').click(function() {
                const chartCard = $(this).closest('.chart-card');
                if (changedRateChart) {
                    const fileName = chartCard.find('.chart-title').text().toLowerCase().replace(/\s+/g, '-');
                    const series = changedRateChart.w.config.series[0].data;
                    const categories = changedRateChart.w.config.xaxis.categories;
                    
                    let csvContent = "Category,Value\n";
                    categories.forEach((category, index) => {
                        csvContent += `"${category}",${series[index]}\n`;
                    });
                    
                    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
                    const link = document.createElement("a");
                    if (link.download !== undefined) {
                        const url = URL.createObjectURL(blob);
                        link.setAttribute("href", url);
                        link.setAttribute("download", `${fileName}.csv`);
                        link.style.visibility = 'hidden';
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                    }
                }
            });
        }

        // Fullscreen functionality
        const fullscreenBtn = document.getElementById('fullscreenToggle');
        const wrapper = document.querySelector('.wrapper');
        
        function toggleFullscreen() {
            if (!document.fullscreenElement && !document.webkitFullscreenElement && 
                !document.mozFullScreenElement && !document.msFullscreenElement) {
                if (wrapper.requestFullscreen) {
                    wrapper.requestFullscreen();
                } else if (wrapper.webkitRequestFullscreen) {
                    wrapper.webkitRequestFullscreen();
                } else if (wrapper.mozRequestFullScreen) {
                    wrapper.mozRequestFullScreen();
                } else if (wrapper.msRequestFullscreen) {
                    wrapper.msRequestFullscreen();
                }
            } else {
                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