@extends('operations.layout.mainlayout')

@section('content')

    <style>
        .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: #BA395F;
            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: #ba395e;
            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: #ba395e;
            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: #d35f81;
            box-shadow: 0 0 0 3px rgba(186, 57, 94, 0.15);
        }

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

        .custom-select {
            width: 100%;
            padding: 10px 15px 10px 20px;
            border: 1px solid #E6E6E6;
            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: #d35f81;
            box-shadow: 0 0 0 3px rgba(186, 57, 94, 0.15);
        }

        .custom-select-wrapper::after {
            content: '\f078';
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            color: #ba395e;
            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 {
            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.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 #BA395F;
            animation: spin 1s linear infinite;
        }

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

        .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: 20px;
        }

        .select2-dropdown {
            border: 1px solid #E6E6E6;
            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: #BA395F;
        }

        .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">Critical Results Rate Statistics</h2>
                <p class="dashboard-subtitle">Monitor critical result rates across labs and units</p>
            </div>
            <button id="fullscreenToggle" class="btn" style="background: #BA395F; 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="criticalDateRange">Date Range</label>
                        <div class="custom-datepicker">
                            <i class="fa fa-calendar-alt"></i>
                            <input type="text" id="criticalDateRange" class="date-range-picker">
                        </div>
                    </div>
                    <div class="filter-item">
                        <label for="criticalLabFilter">Processing Lab</label>
                        <div class="custom-select-wrapper">
                            <select id="criticalLabFilter" 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="criticalCategoryFilter">Unit Category</label>
                        <div class="custom-select-wrapper">
                            <select id="criticalCategoryFilter" class="custom-select">
                                <option value="">All Categories</option>
                                @foreach($filters['unitCategories'] as $category)
                                    <option value="{{ $category->ID }}">{{ $category->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>
            </div>
        </div>

        <div class="charts-container">
            <div class="chart-loader">
                <div class="loader-ring"></div>
            </div>
            <div id="criticalRateChartContainer" class="chart-card">
                <div class="chart-header">
                    <h3 class="chart-title">Critical Results Distribution</h3>
                    <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="criticalRateChart"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('warehouse_scripts')
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
    <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 criticalRateChart = null;
let lastFilters = null;
let autoRefreshInterval = null;

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

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

function getFilters() {
    const dateRange = $('#criticalDateRange').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: $('#criticalLabFilter').val(),
        unit_category: $('#criticalCategoryFilter').val()
    };
}

function setupDownloadButtons() {
    $('.download-svg').click(function() {
        if (criticalRateChart) {
            const fileName = 'critical-results-distribution';
            criticalRateChart.exports.exportToSVG({
                filename: fileName
            });
        }
    });

    $('.download-png').click(function() {
        if (criticalRateChart) {
            const fileName = 'critical-results-distribution';
            criticalRateChart.exports.exportToPng({
                filename: fileName
            });
        }
    });

    $('.download-csv').click(function() {
        if (criticalRateChart) {
            const fileName = 'critical-results-distribution';
            const series = criticalRateChart.w.config.series;
            const categories = criticalRateChart.w.config.xaxis.categories;
            
            let csvContent = "Category";
            series.forEach(s => {
                csvContent += "," + s.name;
            });
            csvContent += "\n";
            
            categories.forEach((category, index) => {
                csvContent += `"${category}"`;
                series.forEach(s => {
                    csvContent += "," + s.data[index];
                });
                csvContent += "\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);
            }
        }
    });
}

function fetchAndRenderChart() {
    const filters = getFilters();
    
    if (lastFilters && JSON.stringify(lastFilters) === JSON.stringify(filters)) {
        return;
    }
    
    lastFilters = filters;
    showLoader();

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

function renderCriticalRateChart(data) {
    const getChartColors = () => {
        if (data.view_type === 'unit_breakdown') {
            if (!Array.isArray(data.series?.[0]?.data)) {
                return ['#3498db'];
            }
            return ['#3498db', '#2ecc71', '#e74c3c'];
        } else if (data.view_type === 'overall') {
            return ['#3498db', '#2ecc71', '#e74c3c'];
        }
        return ['#3498db', '#2ecc71', '#e74c3c', '#f39c12', '#9b59b6', '#1abc9c', '#34495e', '#e67e22'];
    };

    const options = {
        series: data.series || [{
            name: 'Value',
            data: Array.isArray(data.data) ? data.data : []
        }],
        chart: {
            type: 'bar',
            height: 380,
            toolbar: {
                show: true,
                tools: {
                    download: true,
                    selection: false,
                    zoom: false,
                    zoomin: false,
                    zoomout: false,
                    pan: false,
                    reset: false
                }
            }
        },
        colors: getChartColors(),
        plotOptions: {
            bar: {
                horizontal: false,
                columnWidth: '55%',
                endingShape: 'rounded',
                borderRadius: 4,
                distributed: data.view_type === 'overall'
            },
        },
        dataLabels: {
            enabled: true,
            formatter: function(val, { seriesIndex, dataPointIndex, w }) {
                if (data.view_type === 'unit_breakdown') {
                    if (seriesIndex === 2) {
                        return val.toFixed(2) + '%';
                    }
                    return val.toLocaleString();
                } else if (data.view_type === 'overall' && dataPointIndex === 2) {
                    return val.toFixed(2) + '%';
                }
                return val.toLocaleString();
            },
            style: {
                fontSize: '12px',
                colors: ['#fff']
            }
        },
        stroke: {
            show: true,
            width: 2,
            colors: ['transparent']
        },
        xaxis: {
            categories: data.labels || [],
            labels: {
                style: {
                    fontSize: '12px'
                },
                trim: true,
                maxHeight: 120,
                rotate: -45
            }
        },
        yaxis: data.view_type === 'unit_breakdown' ? [
            {
                title: {
                    text: 'Count',
                    style: {
                        fontSize: '14px'
                    }
                },
                labels: {
                    formatter: function(val) {
                        return Math.round(val).toLocaleString();
                    }
                }
            },
            {
                show: false
            },
            {
                opposite: true,
                title: {
                    text: 'Critical Rate (%)',
                    style: {
                        fontSize: '14px'
                    }
                },
                labels: {
                    formatter: function(val) {
                        return val.toFixed(2) + '%';
                    }
                }
            }
        ] : {
            title: {
                text: 'Value',
                style: {
                    fontSize: '14px'
                }
            },
            labels: {
                formatter: function(val) {
                    return val.toLocaleString();
                }
            }
        },
        fill: {
            opacity: 1
        },
        tooltip: {
            y: {
                formatter: function(val, { seriesIndex, dataPointIndex, w }) {
                    if (data.view_type === 'unit_breakdown') {
                        if (seriesIndex === 2) {
                            return val.toFixed(2) + '%';
                        }
                        return val.toLocaleString();
                    } else if (data.view_type === 'overall' && dataPointIndex === 2) {
                        return val.toFixed(2) + '%';
                    }
                    return val.toLocaleString();
                }
            }
        },
        legend: {
            show: data.view_type === 'unit_breakdown'
        }
    };

    if (criticalRateChart) {
        criticalRateChart.destroy();
    }
    
    criticalRateChart = new ApexCharts(document.querySelector("#criticalRateChart"), options);
    criticalRateChart.render();
}

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

$(document).ready(function() {
    $('#criticalDateRange').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')]
        }
    });

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

    $('.custom-select').on('select2:opening', function() {
        $('.custom-select').not(this).each(function() {
            if ($(this).data('select2')) {
                $(this).select2('close');
            }
        });
    });

    fetchAndRenderChart();
    setupDownloadButtons();
    $('#criticalDateRange').on('apply.daterangepicker', fetchAndRenderChart);
    $('#criticalLabFilter, #criticalCategoryFilter').on('change', fetchAndRenderChart);
    $('#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) {
            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