@extends('admin.layout.app')

@section('title', 'Daily Day')

@section('content')
    @php
        $autoFilterSubmit = Auth::check() && Auth::user()->filter_auto_submit;
    @endphp
    <div id="globalLoadingOverlay" class="loading-overlay" style="display: none;">
        <div class="text-center">
            <div class="spinner-border text-light" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <div class="mt-3 text-white fw-semibold">Đang tải dữ liệu...</div>
        </div>
    </div>
    <div class="container-fluid {{ Auth::check() && Auth::user()->is_layout_two == 1 ? 'mt-2 p-0' : '' }}">

        <!-- Page Heading -->
        {{-- <h1 class="h3 mb-2 text-gray-800">Danh mục app</h1> --}}
        <!-- DataTales Example -->
        <div class="card shadow mb-4">
            <div class="card-header py-3 d-flex justify-content-between align-items-center">
                <h6 class="m-0 font-weight-bold text-primary ">Danh sách daily theo ngày</h6>
                @include('components.daily-switch-button')
            </div>

            <div class="card-body">
                @include('components.dashboard-filters', [
                    'dashboard' => 'daily_day',
                    'action' => route('daily.index_day'),
                    'data' => [
                        'apps' => $apps,
                        'users' => $users ?? [],
                    ],
                    'slot' =>
                        '
                                                                                                                                                                                                                                <div class="position-relative d-inline-block" id="colToggleWrapper">
                                                                                                                                                                                                                                    <button class="btn btn-warning btn-sm" type="button" onclick="toggleColDropdown(event)">
                                                                                                                                                                                                                                        <i class="fas fa-columns"></i> Ẩn/Hiện cột
                                                                                                                                                                                                                                    </button>
                                                                                                                                                                                                                                    <ul id="colToggleMenu" style="display:none; position:absolute; top:100%; left:0; z-index:1060; background:#fff; border:1px solid #ddd; border-radius:6px; min-width:200px; padding:10px; box-shadow:0 4px 12px rgba(0,0,0,.15); list-style:none; margin:4px 0 0;">
                                                                                                                                                                                                                                        <li><div class="form-check"><input class="form-check-input column-toggle-checkbox" type="checkbox" value="Doanh thu" id="col_doanh_thu" checked><label class="form-check-label" for="col_doanh_thu">Doanh thu</label></div></li>
                                                                                                                                                                                                                                        <li><div class="form-check"><input class="form-check-input column-toggle-checkbox" type="checkbox" value="Chi phí" id="col_chi_phi" checked><label class="form-check-label" for="col_chi_phi">Chi phí</label></div></li>
                                                                                                                                                                                                                                        <li><div class="form-check"><input class="form-check-input column-toggle-checkbox" type="checkbox" value="Lợi nhuận" id="col_loi_nhuan" checked><label class="form-check-label" for="col_loi_nhuan">Lợi nhuận</label></div></li>
                                                                                                                                                                                                                                        <li><div class="form-check"><input class="form-check-input column-toggle-checkbox" type="checkbox" value="Lợi nhuận (%)" id="col_loi_nhuan_pct" checked><label class="form-check-label" for="col_loi_nhuan_pct">Lợi nhuận (%)</label></div></li>
                                                                                                                                                                                                                                        <li><hr style="margin:6px 0;"></li>
                                                                                                                                                                                                                                        <li><div class="form-check"><input class="form-check-input column-toggle-checkbox" type="checkbox" value="Chi phí (1h)" id="col_chi_phi_1h" checked><label class="form-check-label" for="col_chi_phi_1h">Chi phí (1h)</label></div></li>
                                                                                                                                                                                                                                        <li><div class="form-check"><input class="form-check-input column-toggle-checkbox" type="checkbox" value="Lợi nhuận (1h)" id="col_loi_nhuan_1h" checked><label class="form-check-label" for="col_loi_nhuan_1h">Lợi nhuận (1h)</label></div></li>
                                                                                                                                                                                                                                    </ul>
                                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                                <script>
                                                                                                                                                                                                                                function toggleColDropdown(e) {
                                                                                                                                                                                                                                    e.stopPropagation();
                                                                                                                                                                                                                                    var menu = document.getElementById("colToggleMenu");
                                                                                                                                                                                                                                    if (menu) { menu.style.display = menu.style.display === "none" ? "block" : "none"; }
                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                document.addEventListener("click", function(e) {
                                                                                                                                                                                                                                    var w = document.getElementById("colToggleWrapper");
                                                                                                                                                                                                                                    var m = document.getElementById("colToggleMenu");
                                                                                                                                                                                                                                    if (m && w && !w.contains(e.target)) { m.style.display = "none"; }
                                                                                                                                                                                                                                });
                                                                                                                                                                                                                                </script>
                                                                                                                                                                                                                                                                        ' .
                        (Auth::check() && Auth::user()->is_layout_two == 0
                            ? '<button class="btn btn-secondary btn-sm" id="fullscreenBtn" onclick="toggleFullscreen(event)"><i class="fa-solid fa-expand" id="fullscreen-icon"></i></button>'
                            : ''),
                
                    // '<div class="form-check form-switch ms-2 d-inline-block align-middle">
                    //                                                     <input class="form-check-input" type="checkbox" id="showLossOnly" onchange="renderTable()">
                    //                                                    <label class="form-check-label user-select-none" for="showLossOnly">Chỉ hiện App vượt lỗ</label>
                    //                                                 </div>',
                ])

                <!-- Table Container -->
                <div class="table-container">
                    <table class="table data-table">
                        <thead>
                            <tr id="tableHeader">
                                <th class="product-name">App</th>
                                <th class="chi_so">Chỉ số
                                </th>
                                <th class="total-column-header">Tổng</th>
                                <!-- Hour columns will be inserted here -->
                            </tr>
                        </thead>
                        <tbody id="tableBody">
                            <!-- Data rows will be inserted here -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
@endsection
@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .loading-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.45);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1050;
        }

        .loading-overlay .spinner-border {
            width: 3rem;
            height: 3rem;
        }
    </style>
@endpush
@push('scripts')
    <script src="https://js.pusher.com/8.4.0/pusher.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            // Update checkbox state on load
            $('.column-toggle-checkbox').each(function() {
                if (visibleMetrics.includes($(this).val())) {
                    $(this).prop('checked', true);
                } else {
                    $(this).prop('checked', false);
                }
            });

            const autoSubmitEnabled = {{ $autoFilterSubmit ? 'true' : 'false' }};
            const appsSelect = $('#multiple-select-field');
            const usersSelect = $('#multiple-select-field-user');

            if (!autoSubmitEnabled && appsSelect.length) {
                appsSelect.select2({
                    width: '100%',
                    placeholder: 'Chọn ứng dụng',
                    closeOnSelect: false,
                });
            }

            if (!autoSubmitEnabled && usersSelect.length) {
                usersSelect.select2({
                    width: '100%',
                    placeholder: 'Chọn nhân viên',
                    closeOnSelect: false,
                });
            }

            if (autoSubmitEnabled) {
                // Auto-submit cho date input
                $('#dateInput').on('change', function() {
                    if (typeof filterByDate === 'function') {
                        filterByDate();
                    } else {
                        $('#filter-form').submit();
                    }
                });

                // Auto-submit cho select (thường hoặc Select2)
                appsSelect.on('change select2:select select2:unselect select2:clear', function() {
                    if (typeof filterByDate === 'function') {
                        filterByDate();
                    } else {
                        $('#filter-form').submit();
                    }
                });

                if (usersSelect.length) {
                    usersSelect.on('change select2:select select2:unselect select2:clear', function() {
                        if (typeof filterByDate === 'function') {
                            filterByDate();
                        } else {
                            $('#filter-form').submit();
                        }
                    });
                }
            }
        });
        // Hàm kiểm tra và kích hoạt gọi Bot từ Frontend
        function checkAndTriggerCallBot(products) {
            if (!products || products.length === 0) return;

            const now = new Date();
            const currentHourStr = now.getHours().toString().padStart(2, '0') + ':00';
            const todayStr = "{{ now()->toDateString() }}";
            let alertData = [];

            products.forEach(p => {
                const dateData = p.data[todayStr];
                if (!dateData || !dateData['Lợi nhuận']) return;

                const profitAmount = dateData['Lợi nhuận'].values[currentHourStr];

                // Xác định ngưỡng báo lỗ hiệu dụng (Số tiền)
                const lossThreshold = (p.loss_price_today || p.loss_price || p.default_loss_price || 0);

                // Chỉ gửi lên nếu Lỗ (số tiền âm) và giá trị tuyệt đối vượt ngưỡng
                if (profitAmount !== undefined && profitAmount < 0 && Math.abs(profitAmount) > lossThreshold) {
                    console.log(
                        `%c ⚠️ PHÁT HIỆN LỖ: App ${p.name} | Lợi nhuận: ${profitAmount} | Ngưỡng: ${lossThreshold} `,
                        'background: #ff4d4d; color: #fff; font-weight: bold; padding: 2px 5px;');

                    alertData.push({
                        name: p.name,
                        profit: profitAmount,
                        hour: currentHourStr,
                        date: todayStr,
                        loss_price: lossThreshold
                    });
                }
            });

            if (alertData.length === 0) {
                console.log('%c ✅ Không có app nào vượt ngưỡng lỗ trong giờ hiện tại. ',
                    'color: #28a745; font-weight: bold;');
                return;
            }

            console.log('%c 🚀 Đang gửi dữ liệu báo lỗ sang Call Bot API... ', 'color: #007bff; font-weight: bold;',
                alertData);

            // Gửi dữ liệu đã lọc qua API (Gọn nhẹ, không lo max_input_vars)
            $.ajax({
                url: "{{ route('daily.api_call_bot_tel') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    alert_data: alertData,
                    source: 'frontend_dashboard'
                },
                success: function(response) {
                    if (response.success && response.triggered) {
                        console.log('Call Bot API Success:', response.message);
                    }
                },
                error: function(xhr) {
                    console.error('Call Bot API Error:', xhr.status, xhr.responseText);
                }
            });
        }
    </script>
    <script>
        // Hàm khởi tạo trạng thái fullscreen từ localStorage
        function initFullscreenState() {
            const isFullscreen = localStorage.getItem('dashboard_fullscreen') === 'true';
            const icon = document.getElementById('fullscreen-icon');
            const config = document.querySelector('.bg-gradient-primary-config');

            if (isFullscreen) {
                if (icon) icon.classList.replace('fa-expand', 'fa-compress');
                if (config) config.style.display = 'none';
            }
        }

        function toggleFullscreen(event) {
            event.preventDefault(); // 🚫 chặn submit form

            const icon = document.getElementById('fullscreen-icon');
            const config = document.querySelector('.bg-gradient-primary-config');
            let isFullscreen = false;

            if (icon.classList.contains('fa-expand')) {
                // 🔹 Khi đang icon phóng to → đổi thành thu nhỏ
                icon.classList.replace('fa-expand', 'fa-compress');
                config.style.display = 'none';
                isFullscreen = true;
            } else {
                // 🔹 Khi đang icon thu nhỏ → đổi thành phóng to
                icon.classList.replace('fa-compress', 'fa-expand');
                config.style.display = ''; // hoặc 'block'
                isFullscreen = false;
            }
            // Lưu trạng thái vào localStorage
            localStorage.setItem('dashboard_fullscreen', isFullscreen);
        }

        // Gọi hàm khởi tạo khi DOM loaded
        document.addEventListener('DOMContentLoaded', initFullscreenState);
        let products = [];
        Pusher.logToConsole = false;
        var pusher = new Pusher('ca58f8fcae9e9e86aaa6', {
            cluster: 'ap1',
            forceTLS: true
        });
        // Channel cho AdMob
        var channel = pusher.subscribe('google-ads-hourly-reports');
        channel.bind('GoogleAdsHourlyReportFinished', function(data) {
            const dateInput = document.getElementById('dateInput') || document.querySelector('input[name="date"]');
            const selectedDate = dateInput ? dateInput.value : null;

            const selectField = document.getElementById('multiple-select-field') || document.querySelector(
                'select[name="apps[]"]');
            let selectedApps = [];

            if (selectField) {
                if ($(selectField).hasClass('select2-hidden-accessible')) {
                    selectedApps = $(selectField).val() || [];
                } else {
                    selectedApps = Array.from(selectField.selectedOptions).map(option => option.value);
                }
            }

            const selectUser = document.getElementById('multiple-select-field-user') || document.querySelector(
                'select[name="users[]"]');
            let selectedUsers = [];

            if (selectUser) {
                if ($(selectUser).hasClass('select2-hidden-accessible')) {
                    selectedUsers = $(selectUser).val() || [];
                } else {
                    selectedUsers = Array.from(selectUser.selectedOptions).map(option => option.value);
                }
            }

            if (!selectedDate) {
                alert('Vui lòng chọn ngày');
                return;
            }
            // Redirect kèm query string
            const params = new URLSearchParams();
            params.append("date", selectedDate);

            selectedApps.forEach(appId => {
                params.append("apps[]", appId);
            });
            selectedUsers.forEach(userId => {
                params.append("users[]", userId);
            });
            $.ajax({
                url: '{{ route('daily.index_day') }}',
                type: 'GET',
                dataType: 'json',
                data: {
                    date: selectedDate,
                    apps: selectedApps,
                    users: selectedUsers,
                },
                success: function(json) {
                    // Cập nhật products và currentDates
                    products = json.products;
                    console.log('Dữ liệu từ Server (Pusher):', json);

                    currentHours = generateHoursInDay(selectedDate);
                    // Render lại table
                    renderTable(products);

                    // Kích hoạt gọi bot nếu có lỗi
                    //checkAndTriggerCallBot(products);
                },
                error: function(xhr, status, error) {
                    console.error('Lỗi fetch dữ liệu:', error);
                }
            });
        });
        $(document).ready(function() {

            // const selectedDate = document.getElementById('dateInput').value;

            // const selectField = document.getElementById('multiple-select-field');
            // const selectedApps = selectField ?
            //     Array.from(selectField.selectedOptions).map(option => option.value) : [];
            // if (!selectedDate) {
            //     alert('Vui lòng chọn ngày');
            //     return;
            // }
            // // Redirect kèm query string
            // const params = new URLSearchParams();
            // params.append("date", selectedDate);
            // selectedApps.forEach(appId => {
            //     params.append("apps[]", appId);
            // });
            // $.ajax({
            //     url: '{{ route('daily.index_day') }}',
            //     type: 'GET',
            //     dataType: 'json',
            //     data: {
            //         date: selectedDate,
            //         apps: selectedApps,
            //     },
            //     success: function(json) {
            //         // Cập nhật products và currentDates
            //         // console.log(json);

            //         products = json.products;

            //         currentHours = generateHoursInDay(selectedDate);
            //         // Render lại table
            //         renderTable(products);
            //     },
            //     error: function(xhr, status, error) {
            //         console.error('Lỗi fetch dữ liệu:', error);
            //     }
            // });
            renderTableReload();
        });

        function renderTableReload() {
            const dateInput = document.getElementById('dateInput') || document.querySelector('input[name="date"]');
            const selectedDate = dateInput ? dateInput.value : null;

            const selectField = document.getElementById('multiple-select-field') || document.querySelector(
                'select[name="apps[]"]');
            let selectedApps = [];

            if (selectField) {
                if ($(selectField).hasClass('select2-hidden-accessible')) {
                    selectedApps = $(selectField).val() || [];
                } else {
                    selectedApps = Array.from(selectField.selectedOptions).map(option => option.value);
                }
            }

            const selectUser = document.getElementById('multiple-select-field-user') || document.querySelector(
                'select[name="users[]"]');
            let selectedUsers = [];

            if (selectUser) {
                if ($(selectUser).hasClass('select2-hidden-accessible')) {
                    selectedUsers = $(selectUser).val() || [];
                } else {
                    selectedUsers = Array.from(selectUser.selectedOptions).map(option => option.value);
                }
            }

            if (!selectedDate) {
                alert('Vui lòng chọn ngày');
                return;
            }
            // Redirect kèm query string
            const params = new URLSearchParams();
            params.append("date", selectedDate);
            selectedApps.forEach(appId => {
                params.append("apps[]", appId);
            });
            selectedUsers.forEach(userId => {
                params.append("users[]", userId);
            });
            $.ajax({
                url: '{{ route('daily.index_day') }}',
                type: 'GET',
                dataType: 'json',
                data: {
                    date: selectedDate,
                    apps: selectedApps,
                    users: selectedUsers,
                },
                success: function(json) {
                    // Cập nhật products và currentDates
                    console.log('chay day');

                    products = json.products;

                    currentHours = generateHoursInDay(selectedDate);
                    // Render lại table
                    renderTable(products);

                    // Kích hoạt gọi bot nếu có lỗi
                    //   checkAndTriggerCallBot(products);
                },
                error: function(xhr, status, error) {
                    console.error('Lỗi fetch dữ liệu:', error);
                }
            });
        }
        // const products = @json($products ?? []);
        let currentHours = [];
        let currentDate = '{{ $selectedDate ?? date('Y-m-d') }}'; // Added current date tracking

        let savedMetricsDay = localStorage.getItem('daily_day_visible_metrics');
        let visibleMetrics = savedMetricsDay ? JSON.parse(savedMetricsDay) : ['Doanh thu', 'Chi phí', 'Lợi nhuận',
            'Lợi nhuận (%)', 'Chi phí (1h)', 'Lợi nhuận (1h)'
        ];

        function generateHoursInDay() {
            const hours = [];
            for (let hour = 1; hour < 24; hour++) {
                const hourStr = hour.toString().padStart(2, '0') + ':00';
                hours.push(hourStr);
            }
            return hours;
        }

        // Thêm biến global để lưu data gốc
        let originalProducts = @json($products ?? []);

        function renderTable(data = null) {
            const header = document.getElementById('tableHeader');
            const body = document.getElementById('tableBody');

            // Cập nhật data gốc nếu có data mới truyền vào
            if (data) {
                originalProducts = data;
            }

            // check render if filter loss active
            const showLossOnly = document.getElementById('showLossOnly') ? document.getElementById('showLossOnly').checked :
                false;
            let displayProducts = originalProducts;

            if (showLossOnly) {
                const now = new Date();
                const currentHourStr = now.getHours().toString().padStart(2, '0') + ':00';

                // Lấy giá trị default loss từ PHP
                const defaultLossPrice = {{ gs('default_loss_price') ?? 0 }};

                displayProducts = originalProducts.filter(p => {
                    const dateData = p.data[currentDate];
                    if (!dateData || !dateData['Lợi nhuận']) return false;

                    const profitAmount = dateData['Lợi nhuận'].values[currentHourStr];
                    if (profitAmount === undefined) return false;

                    // Xác định ngưỡng
                    const lossThreshold = (p.loss_price_today || p.loss_price || p.default_loss_price ||
                        defaultLossPrice || 0);

                    // Logic: Lỗ và |Lỗ| > Threshold
                    return (profitAmount < 0 && Math.abs(profitAmount) > lossThreshold);
                });
            }

            // Clear previous hour columns
            const fixedColumnsCount = 3;
            while (header.children.length > fixedColumnsCount) {
                header.removeChild(header.lastChild);
            }

            currentHours.forEach(hour => {
                const th = document.createElement('th');
                th.textContent = hour;
                header.appendChild(th);
            });

            // Clear body
            body.innerHTML = '';

            addGrandTotalRow(body, displayProducts);
            if (!Array.isArray(displayProducts)) {
                return;
            }
            // Add product rows
            displayProducts.forEach(product => {
                let metrics = [...visibleMetrics];

                metrics.forEach((metric, index) => {
                    const row = document.createElement('tr');

                    if (index === 0) {
                        const productCell = document.createElement('td');
                        productCell.textContent = product.name;
                        productCell.className = 'product-name';
                        productCell.rowSpan = metrics.length;
                        row.appendChild(productCell);
                    }

                    // Metric name
                    const metricCell = document.createElement('td');
                    metricCell.textContent = metric;
                    metricCell.className = 'metric-name';
                    row.appendChild(metricCell);

                    const totalCell = document.createElement('td');
                    const dateData = product.data[currentDate];
                    let totalValue = 0;
                    let cumulativeMetrics = ['Doanh thu', 'Chi phí', 'Lợi nhuận'];

                    if (dateData && dateData[metric]) {
                        if (cumulativeMetrics.includes(metric)) {
                            // Cumulative metrics: total is the last hour's value
                            let lastFound = false;
                            for (let i = currentHours.length - 1; i >= 0; i--) {
                                const hour = currentHours[i];
                                const value = dateData[metric].values[hour];
                                if (value !== undefined && value !== null) {
                                    totalValue = value;
                                    lastFound = true;
                                    break;
                                }
                            }
                        } else if (metric === 'Lợi nhuận (%)') {
                            // Percentage: calculate from total Revenue and total Profit
                            let revenueTotal = 0;
                            let profitTotal = 0;
                            let costTotal = 0;

                            // Get latest Revenue and Profit values
                            for (let i = currentHours.length - 1; i >= 0; i--) {
                                const hour = currentHours[i];
                                if (revenueTotal === 0 && dateData['Doanh thu'] && dateData['Doanh thu']
                                    .values[hour]) revenueTotal = dateData['Doanh thu'].values[hour];
                                if (profitTotal === 0 && dateData['Lợi nhuận'] && dateData['Lợi nhuận']
                                    .values[hour]) profitTotal = dateData['Lợi nhuận'].values[hour];
                                if (costTotal === 0 && dateData['Chi phí'] && dateData['Chi phí'].values[
                                        hour]) costTotal = dateData['Chi phí'].values[hour];
                                if (revenueTotal !== 0 && profitTotal !== 0 && costTotal !== 0) break;
                            }
                            totalValue = costTotal !== 0 ? (profitTotal / costTotal * 100) : 0;
                        } else {
                            // Incremental metrics (e.g. 1h metrics): total is the sum of all hours
                            currentHours.forEach(hour => {
                                const value = dateData[metric].values[hour];
                                if (value !== undefined && value !== null) {
                                    totalValue += value;
                                }
                            });
                        }
                    }

                    totalCell.textContent = (metric === 'Lợi nhuận (%)' ? totalValue.toFixed(0) + '%' :
                        totalValue.toLocaleString());
                    // console.log(totalValue.toLocaleString());
                    totalCell.className = 'total-column';

                    if (index === metrics.length - 1) {
                        row.style.borderBottom = '2px solid red';
                    }
                    if (metric === "Lợi nhuận (1h)") {
                        totalCell.textContent = "";

                    }
                    if (metric === "Chi phí (1h)") {
                        totalCell.textContent = "";
                    }
                    if (metric === "Lợi nhuận (%)") {
                        row.classList.add('highlight-total');
                    }
                    // Highlight theo giá trị
                    if (metric === 'Doanh thu') {
                        totalCell.style.backgroundColor = "#fff"; // màu xanh nhạt
                        totalCell.style.fontWeight = '500';
                    } else if (metric === 'Chi phí') {
                        totalCell.style.backgroundColor = "#fff"; // màu xanh nhạt
                        totalCell.style.fontWeight = '500';
                    } else
                    if (totalValue > 0) {
                        totalCell.style.backgroundColor = 'rgb(46 233 91)';
                        totalCell.style.fontWeight = '500';
                    } else if (totalValue < 0) {
                        totalCell.style.backgroundColor = 'rgb(237 10 31)'; // màu đỏ 
                        totalCell.style.fontWeight = '500';
                    } else {
                        totalCell.style.backgroundColor = '#f8f9fa'; // Light gray for zero values
                        totalCell.style.fontWeight = '500';
                    }

                    row.appendChild(totalCell);

                    currentHours.forEach(hour => {
                        const cell = document.createElement('td');

                        let value = null;
                        if (dateData && dateData[metric] && dateData[metric].values) {
                            value = dateData[metric].values[hour];
                        }

                        if (value !== undefined && value !== null) {
                            if (metric === 'Lợi nhuận (%)') {
                                cell.textContent = value.toFixed(0) + '%';
                            } else {
                                cell.textContent = value.toLocaleString();
                            }

                            // Highlight từng cell dựa trên giá trị


                            if (index === metrics.length - 1) {
                                cell.style.borderBottom = '2px solid red';
                            }
                            if (metric === 'Doanh thu') {
                                cell.style.backgroundColor = '#cfe2f3 !important';
                                cell.style.fontWeight = '500';
                            } else if (metric === 'Chi phí') {
                                cell.style.backgroundColor = '#cfe2f3 !important';
                                cell.style.fontWeight = '500';
                            } else if (metric === 'Lợi nhuận (1h)') {

                                cell.style.backgroundColor = value < 0 ? 'rgb(237 10 31)' : (value >
                                    0 ? 'rgb(46 233 91)' : '#fff');
                                cell.style.fontWeight = '500';
                            } else if (metric === 'Chi phí (1h)') {
                                cell.style.backgroundColor = value < 0 ? 'rgb(237 10 31)' : (value >
                                    0 ? 'rgb(46 233 91)' : '#fff');
                                cell.style.fontWeight = '500';
                            } else if (value < 0) {
                                cell.style.backgroundColor = 'rgb(237 10 31)';
                            } else if (value > 0) {
                                cell.style.backgroundColor = 'rgb(46 233 91)';
                            } else {
                                cell.style.backgroundColor = '#fff';
                                cell.style.fontWeight = '500';
                            }
                        } else {
                            cell.textContent = metric === 'Lợi nhuận (%)' ? '0%' : '0';
                            cell.style.backgroundColor = '#f8f9fa';
                            cell.style.fontWeight = '500';
                        }

                        row.appendChild(cell);
                    });

                    body.appendChild(row);
                });
            });

            // Enhance scroll sau khi render xong
            setTimeout(enhanceTableScroll, 100);

            // Auto-scroll đến giờ hiện tại
            setTimeout(scrollToCurrentHour, 150);
        }

        function scrollToCurrentHour() {
            const now = new Date();
            const currentHourStr = now.getHours().toString().padStart(2, '0') + ':00';
            const tableContainer = document.querySelector('.table-container');
            const headerRow = document.getElementById('tableHeader');
            if (!tableContainer || !headerRow) return;

            const ths = headerRow.querySelectorAll('th');
            let targetTh = null;
            ths.forEach(th => {
                if (th.textContent.trim() === currentHourStr) {
                    targetTh = th;
                }
            });

            if (targetTh) {
                // Tính vị trí scroll: đưa cột hiện tại vào vùng nhìn thấy giữa bảng
                const containerScrollLeft = tableContainer.scrollLeft;
                const containerWidth = tableContainer.clientWidth;
                const thLeft = targetTh.offsetLeft;
                const thWidth = targetTh.offsetWidth;
                const scrollTarget = thLeft - (containerWidth / 2) + (thWidth / 2);
                tableContainer.scrollTo({
                    left: Math.max(0, scrollTarget),
                    behavior: 'smooth'
                });
            }
        }

        function addGrandTotalRow(body, products) {
            let allMetrics = ['Doanh thu', 'Chi phí', 'Lợi nhuận', 'Lợi nhuận (%)', 'Chi phí (1h)', 'Lợi nhuận (1h)'];
            let metricsToRender = [...visibleMetrics];

            const grandTotals = {};
            allMetrics.forEach(metric => {
                grandTotals[metric] = {
                    total: 0,
                    values: {}
                };

                currentHours.forEach(hour => {
                    grandTotals[metric].values[hour] = 0;
                });
                if (!Array.isArray(products)) {

                    return;
                }
                products.forEach(product => {
                    const dateData = product.data[currentDate];
                    if (!dateData || !dateData[metric]) return;

                    let cumulativeMetrics = ['Doanh thu', 'Chi phí', 'Lợi nhuận'];

                    if (cumulativeMetrics.includes(metric)) {
                        // Cumulative: add the latest hour's value of this product
                        let lastHourValue = 0;
                        for (let i = currentHours.length - 1; i >= 0; i--) {
                            const hour = currentHours[i];
                            const value = dateData[metric].values[hour];
                            if (value !== undefined && value !== null) {
                                lastHourValue = value;
                                break;
                            }
                        }

                        // Add each hour's value to hourly grand totals
                        currentHours.forEach(hour => {
                            const value = dateData[metric].values[hour];
                            if (value !== undefined && value !== null) {
                                grandTotals[metric].values[hour] += value;
                            }
                        });

                        // Grand total for the row is the latest combined value
                        // (will be recalculated after loop to ensure it's the sum of latests)
                        // grandTotals[metric].total += lastHourValue;
                    } else if (metric !== 'Lợi nhuận (%)') {
                        // Incremental (e.g. 1h metrics): add all hours
                        currentHours.forEach(hour => {
                            const value = dateData[metric].values[hour];
                            if (value !== undefined && value !== null) {
                                grandTotals[metric].values[hour] += value;
                                grandTotals[metric].total += value;
                            }
                        });
                    }
                });

                // Finalize cumulative total as the sum of all app values at the latest common hour
                let cumulativeMetrics = ['Doanh thu', 'Chi phí', 'Lợi nhuận'];
                if (cumulativeMetrics.includes(metric)) {
                    let totalLatest = 0;
                    // Actually, simpler: for cumulative grand total, it's just the value of the last hour in grandTotals.values
                    for (let i = currentHours.length - 1; i >= 0; i--) {
                        const hour = currentHours[i];
                        if (grandTotals[metric].values[hour] !== 0) {
                            totalLatest = grandTotals[metric].values[hour];
                            break;
                        }
                    }
                    grandTotals[metric].total = totalLatest;
                }
            });

            const totalRevenue = grandTotals['Doanh thu'].total;
            const totalProfit = grandTotals['Lợi nhuận'].total;
            const totalCost = grandTotals['Chi phí'].total;
            // công thức tính lợi nhuận %
            grandTotals['Lợi nhuận (%)'].total = totalCost !== 0 ? ((totalRevenue - totalCost) / totalCost * 100) : 0;

            currentHours.forEach(hour => {
                const hourRevenue = grandTotals['Doanh thu'].values[hour];
                const hourProfit = grandTotals['Lợi nhuận'].values[hour];
                const hourCost = grandTotals['Chi phí'].values[hour];
                grandTotals['Lợi nhuận (%)'].values[hour] = hourCost !== 0 ? ((hourRevenue - hourCost) / hourCost *
                    100) : 0;
            });

            // Create grand total rows
            metricsToRender.forEach((metric, index) => {
                const row = document.createElement('tr');
                //  row.style.borderBottom = '2px solid #000'; // Add separator line
                row.style.fontWeight = '500';
                row.style.backgroundColor = '#e9ecef';

                if (index === 0) {
                    const productCell = document.createElement('td');
                    productCell.textContent = 'LVT Global';
                    productCell.className = 'product-name';
                    productCell.rowSpan = metricsToRender.length;
                    productCell.style.fontWeight = '500';
                    productCell.style.backgroundColor = '#e9ecef';
                    row.appendChild(productCell);
                }

                // Metric name
                const metricCell = document.createElement('td');
                metricCell.textContent = metric;
                metricCell.className = 'metric-name';
                metricCell.style.fontWeight = '500';
                metricCell.style.backgroundColor = '#e9ecef';
                row.appendChild(metricCell);

                // Total column
                const totalCell = document.createElement('td');
                const totalValue = grandTotals[metric].total;
                // làm tròn tổng 
                totalCell.textContent = (metric === 'Lợi nhuận (%)' ? totalValue.toFixed(0) + '%' : Math.round(
                    totalValue).toLocaleString('en-US'));

                totalCell.className = 'total-column';
                totalCell.style.fontWeight = '500';
                totalCell.style.backgroundColor = '#e9ecef';

                // Highlight based on value

                if (index === metricsToRender.length - 1) {
                    totalCell.style.borderBottom = '2px solid red';
                }
                if (metric === 'Doanh thu') {
                    totalCell.style.backgroundColor = "#cfe2f3"; // màu xanh nhạt
                    totalCell.style.fontWeight = 'bold';
                } else if (metric === 'Chi phí') {
                    totalCell.style.backgroundColor = "#cfe2f3"; // màu xanh nhạt
                    totalCell.style.fontWeight = 'bold';
                } else
                if (metric === 'Lợi nhuận (1h)') {
                    totalCell.textContent = "";
                    totalCell.style.color = '#000'; // Màu xanh cho Lợi nhuận (1h)
                    totalCell.style.backgroundColor = totalValue < 0 ? 'rgb(237 10 31)' : (totalValue > 0 ?
                        'rgb(46 233 91)' : '#e9ecef');
                    totalCell.style.fontWeight = 'bold';

                } else if (metric === 'Chi phí (1h)') {
                    totalCell.textContent = "";
                    totalCell.style.color = '#000'; // Màu đỏ cho Chi phí (1h)
                    totalCell.style.backgroundColor = totalValue < 0 ? 'rgb(237 10 31)' : (totalValue > 0 ?
                        'rgb(46 233 91)' : '#e9ecef');
                    totalCell.style.fontWeight = 'bold';
                } else if (totalValue < 0) {
                    totalCell.style.backgroundColor = 'rgb(237 10 31)';
                } else if (totalValue > 0) {
                    totalCell.style.backgroundColor = 'rgb(46 233 91)';
                } else {
                    totalCell.style.color = '#000';
                }

                row.appendChild(totalCell);

                currentHours.forEach(hour => {
                    const cell = document.createElement('td');
                    const value = grandTotals[metric].values[hour];

                    if (metric === 'Lợi nhuận (%)') {
                        cell.textContent = value.toFixed(0) + '%';
                    } else {
                        cell.textContent = Math.round(value).toLocaleString('en-US');
                    }

                    cell.style.fontWeight = '500';
                    cell.style.backgroundColor = '#e9ecef';

                    // Highlight based on value

                    if (index === metricsToRender.length - 1) {
                        cell.style.borderBottom = '2px solid red';
                    }
                    if (metric === 'Doanh thu') {
                        cell.style.backgroundColor = "#cfe2f3";
                        cell.style.fontWeight = 'bold';
                    } else if (metric === 'Chi phí') {
                        cell.style.backgroundColor = "#cfe2f3";
                        cell.style.fontWeight = 'bold';
                    } else if (metric === 'Lợi nhuận (1h)') {

                        cell.style.backgroundColor = value < 0 ? 'rgb(237 10 31)' : (value > 0 ?
                            'rgb(46 233 91)' : '#e9ecef');
                        cell.style.fontWeight = 'bold';
                    } else if (metric === 'Chi phí (1h)') {
                        cell.style.backgroundColor = '#d4edda';
                        cell.style.fontWeight = 'bold';
                    } else if (value > 0) {
                        cell.style.backgroundColor = 'rgb(46 233 91)';
                        cell.style.fontWeight = 'bold';
                    } else if (value < 0) {
                        cell.style.backgroundColor = 'rgb(237 10 31)'; // màu đỏ
                        cell.style.fontWeight = 'bold';
                    } else {
                        cell.style.color = '#000';
                        cell.style.fontWeight = 'bold';
                    }

                    row.appendChild(cell);
                });

                body.appendChild(row);
            });
        }

        function toggleLoadingOverlay(isVisible) {
            const overlay = document.getElementById('globalLoadingOverlay');
            if (!overlay) return;
            overlay.style.display = isVisible ? 'flex' : 'none';
        }

        function filterByDate(event) {
            // Ngăn form submit mặc định
            if (event) {
                event.preventDefault();
            }

            // Tìm element date - có thể là dateInput hoặc filter-date
            const dateInput = document.getElementById('dateInput') || document.querySelector('input[name="date"]');
            const selectedDate = dateInput ? dateInput.value : null;

            const appsSelect = document.getElementById('multiple-select-field') || document.querySelector(
                'select[name="apps[]"]');
            let selectedApps = [];
            if (appsSelect) {
                if ($(appsSelect).hasClass('select2-hidden-accessible')) {
                    selectedApps = $(appsSelect).val() || [];
                } else {
                    selectedApps = Array.from(appsSelect.selectedOptions).map(option => option.value);
                }
            }

            const usersSelect = document.getElementById('multiple-select-field-user') || document.querySelector(
                'select[name="users[]"]');
            let selectedUsers = [];
            if (usersSelect) {
                if ($(usersSelect).hasClass('select2-hidden-accessible')) {
                    selectedUsers = $(usersSelect).val() || [];
                } else {
                    selectedUsers = Array.from(usersSelect.selectedOptions).map(option => option.value);
                }
            }

            if (!selectedDate) {
                alert('Vui lòng chọn ngày');
                return;
            }

            // Tạo URL với parameters
            const params = new URLSearchParams();
            params.append('date', selectedDate);
            selectedApps.forEach(appId => {
                params.append('apps[]', appId);
            });
            selectedUsers.forEach(userId => {
                params.append('users[]', userId);
            });

            const url = `{{ route('daily.index_day') }}?${params.toString()}`;

            // Hiển thị loading overlay
            toggleLoadingOverlay(true);

            // Gửi request AJAX để lấy dữ liệu mới
            fetch(url, {
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json',
                    }
                })
                .then(response => response.json())
                .then(data => {
                    // Cập nhật dữ liệu
                    products.splice(0, products.length, ...data.products);
                    currentDate = selectedDate;
                    currentHours = generateHoursInDay();
                    renderTable(products);

                    // Cập nhật URL trong browser
                    const newUrl = `{{ route('daily.index_day') }}?${params.toString()}`;
                    window.history.pushState({}, '', newUrl);
                })
                .catch(error => {
                    console.error('Error:', error);
                    // alert('Có lỗi xảy ra khi tải dữ liệu');
                })
                .finally(() => {
                    toggleLoadingOverlay(false);
                });
        }

        function resetFilter() {
            const today = new Date().toISOString().split('T')[0];
            const dateInput = document.getElementById('dateInput') || document.querySelector('input[name="date"]');
            if (dateInput) {
                dateInput.value = today;
            }

            const usersSelect = document.getElementById('multiple-select-field-user') || document.querySelector(
                'select[name="users[]"]');
            if (usersSelect) {
                if ($(usersSelect).hasClass('select2-hidden-accessible')) {
                    $(usersSelect).val(null).trigger('change');
                } else if (usersSelect.multiple) {
                    Array.from(usersSelect.options).forEach(option => option.selected = false);
                } else {
                    usersSelect.value = 'all';
                    $(usersSelect).trigger('change');
                }
            }

            const multipleSelect = document.getElementById('multiple-select-field') || document.querySelector(
                'select[name="apps[]"]');
            if (multipleSelect) {
                // Nếu là Select2, reset bằng Select2
                if ($(multipleSelect).hasClass('select2-hidden-accessible')) {
                    $(multipleSelect).val(null).trigger('change');
                } else if (multipleSelect.multiple) {
                    Array.from(multipleSelect.options).forEach(option => option.selected = false);
                } else {
                    multipleSelect.value = 'all';
                    $(multipleSelect).trigger('change');
                }
            }

            currentDate = today; // Reset current date
            currentHours = generateHoursInDay();

            const params = new URLSearchParams();
            params.append("date", today);

            window.location.href = `{{ route('daily.index_day') }}?${params.toString()}`;
        }

        // Đọc parameters từ URL khi trang load
        const urlParams = new URLSearchParams(window.location.search);
        const dateFromUrl = urlParams.get('date');
        const appsFromUrl = urlParams.getAll('apps[]');

        // Sử dụng date từ URL nếu có, nếu không thì dùng giá trị mặc định
        currentDate = dateFromUrl || '{{ $selectedDate ?? date('Y-m-d') }}';

        // Cập nhật date input nếu có date trong URL
        if (dateFromUrl) {
            const dateInput = document.getElementById('dateInput') || document.querySelector('input[name="date"]');
            if (dateInput) {
                dateInput.value = dateFromUrl;
            }
        }

        // Cập nhật apps select nếu có apps trong URL
        if (appsFromUrl.length > 0) {
            const selectField = document.getElementById('multiple-select-field') || document.querySelector(
                'select[name="apps[]"]');
            if (selectField) {
                // Nếu là Select2, set giá trị bằng Select2
                if ($(selectField).hasClass('select2-hidden-accessible')) {
                    $(selectField).val(appsFromUrl).trigger('change');
                } else {
                    Array.from(selectField.options).forEach(option => {
                        option.selected = appsFromUrl.includes(option.value);
                    });
                    $(selectField).trigger('change');
                }
            }
        }

        // Cập nhật users select nếu có users trong URL
        const usersFromUrl = urlParams.getAll('users[]');
        if (usersFromUrl.length > 0) {
            const selectUser = document.getElementById('multiple-select-field-user') || document.querySelector(
                'select[name="users[]"]');
            if (selectUser) {
                if ($(selectUser).hasClass('select2-hidden-accessible')) {
                    $(selectUser).val(usersFromUrl).trigger('change');
                } else {
                    Array.from(selectUser.options).forEach(option => {
                        option.selected = usersFromUrl.includes(option.value);
                    });
                    $(selectUser).trigger('change');
                }
            }
        }

        currentHours = generateHoursInDay();
        renderTable();

        // ========== SCROLL ENHANCEMENT ==========
        function enhanceTableScroll() {
            const tableContainer = document.querySelector('.table-container');
            if (!tableContainer) return;

            // Thêm smooth scroll behavior
            tableContainer.style.scrollBehavior = 'smooth';

            // Kiểm tra xem có phải mobile không
            const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
                window.innerWidth <= 768 ||
                ('ontouchstart' in window);

            // Keyboard navigation cho scroll - CHỈ trên desktop
            if (!isMobile) {
                tableContainer.addEventListener('keydown', function(e) {
                    const scrollAmount = 100; // pixels

                    switch (e.key) {
                        case 'ArrowLeft':
                            e.preventDefault();
                            this.scrollLeft -= scrollAmount;
                            break;
                        case 'ArrowRight':
                            e.preventDefault();
                            this.scrollLeft += scrollAmount;
                            break;
                        case 'Home':
                            e.preventDefault();
                            this.scrollLeft = 0;
                            break;
                        case 'End':
                            e.preventDefault();
                            this.scrollLeft = this.scrollWidth;
                            break;
                    }
                });

                // Thêm tabindex để có thể focus và dùng keyboard
                tableContainer.setAttribute('tabindex', '0');

                // Mouse wheel horizontal scroll (Shift + wheel) - CHỈ trên desktop
                tableContainer.addEventListener('wheel', function(e) {
                    if (e.shiftKey) {
                        e.preventDefault();
                        this.scrollLeft += e.deltaY;
                    }
                });
            }

            // Touch/swipe support cho mobile - CHỈ cho scroll ngang
            let startX = 0;
            let startY = 0;
            let scrollLeft = 0;
            let isHorizontalScroll = false;

            tableContainer.addEventListener('touchstart', function(e) {
                startX = e.touches[0].pageX;
                startY = e.touches[0].pageY;
                scrollLeft = this.scrollLeft;
                isHorizontalScroll = false;
            }, {
                passive: true
            });

            tableContainer.addEventListener('touchmove', function(e) {
                if (!startX) return;

                const x = e.touches[0].pageX;
                const y = e.touches[0].pageY;
                const diffX = Math.abs(x - startX);
                const diffY = Math.abs(y - startY);

                // Chỉ xử lý horizontal scroll nếu swipe ngang nhiều hơn dọc
                if (!isHorizontalScroll && diffX > diffY && diffX > 10) {
                    isHorizontalScroll = true;
                }

                // CHỈ preventDefault khi scroll ngang
                if (isHorizontalScroll) {
                    e.preventDefault();
                    const walk = (x - startX) * 1.5;
                    this.scrollLeft = scrollLeft - walk;
                }
                // Nếu scroll dọc, để browser xử lý tự nhiên
            }, {
                passive: false
            });

            tableContainer.addEventListener('touchend', function() {
                startX = 0;
                startY = 0;
                isHorizontalScroll = false;
            }, {
                passive: true
            });

            // Scroll indicator (hiển thị vị trí scroll)
            // const scrollIndicator = document.createElement('div');
            // scrollIndicator.className = 'scroll-indicator';
            // scrollIndicator.innerHTML = `
        //     <div class="scroll-info">
        //         <span class="scroll-position">0%</span>
        //         <span class="scroll-hint">Shift+Wheel hoặc ←→ để cuộn ngang</span>
        //     </div>
        // `;
            // tableContainer.parentNode.insertBefore(scrollIndicator, tableContainer.nextSibling);

            // // Update scroll indicator
            // tableContainer.addEventListener('scroll', function() {
            //     const scrollPercent = Math.round((this.scrollLeft / (this.scrollWidth - this.clientWidth)) * 100) || 0;
            //     const positionSpan = scrollIndicator.querySelector('.scroll-position');
            //     if (positionSpan) {
            //         positionSpan.textContent = scrollPercent + '%';
            //     }
            // });
        }

        // Gọi enhance scroll sau khi render table
        setTimeout(enhanceTableScroll, 100);

        // Xử lý khi người dùng nhấn nút Back/Forward của browser
        window.addEventListener('popstate', function(event) {
            const urlParams = new URLSearchParams(window.location.search);
            const dateFromUrl = urlParams.get('date');
            const appsFromUrl = urlParams.getAll('apps[]');

            if (dateFromUrl) {
                const dateInput = document.getElementById('dateInput') || document.querySelector(
                    'input[name="date"]');
                if (dateInput) {
                    dateInput.value = dateFromUrl;
                }

                // Cập nhật select apps
                const selectField = document.getElementById('multiple-select-field') || document.querySelector(
                    'select[name="apps[]"]');
                if (selectField) {
                    // Nếu là Select2, set giá trị bằng Select2
                    if ($(selectField).hasClass('select2-hidden-accessible')) {
                        $(selectField).val(appsFromUrl).trigger('change');
                    } else {
                        Array.from(selectField.options).forEach(option => {
                            option.selected = appsFromUrl.includes(option.value);
                        });
                        $(selectField).trigger('change');
                    }
                }

                // Cập nhật select users
                const usersFromUrl = urlParams.getAll('users[]');
                const selectUser = document.getElementById('multiple-select-field-user') || document.querySelector(
                    'select[name="users[]"]');
                if (selectUser) {
                    if ($(selectUser).hasClass('select2-hidden-accessible')) {
                        $(selectUser).val(usersFromUrl).trigger('change');
                    } else {
                        Array.from(selectUser.options).forEach(option => {
                            option.selected = usersFromUrl.includes(option.value);
                        });
                        $(selectUser).trigger('change');
                    }
                }

                // Load dữ liệu mới
                filterByDate();
            }
        });

        $(document).on('change', '.column-toggle-checkbox', function() {
            visibleMetrics = [];
            $('.column-toggle-checkbox:checked').each(function() {
                visibleMetrics.push($(this).val());
            });
            localStorage.setItem('daily_day_visible_metrics', JSON.stringify(visibleMetrics));
            renderTableReload();
        });

        // Custom dropdown toggle cho nút Ẩn/Hiện cột
        function toggleColDropdown(e) {
            e.stopPropagation();
            const menu = document.getElementById('colToggleMenu');
            if (menu) {
                menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
            }
        }

        // Đóng dropdown khi click ra ngoài
        document.addEventListener('click', function(e) {
            const wrapper = document.getElementById('colToggleWrapper');
            const menu = document.getElementById('colToggleMenu');
            if (menu && wrapper && !wrapper.contains(e.target)) {
                menu.style.display = 'none';
            }
        });
    </script>
@endpush

@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush

<style scoped>
    .table-container {
        overflow-x: auto;
        overflow-y: auto;
        border: 1px solid #dee2e6;
        max-height: 80vh;
        /* Giới hạn chiều cao để có scroll dọc */
        position: relative;
        /* Quan trọng cho sticky header */

        /* Cải thiện scroll-x */
        -webkit-overflow-scrolling: touch;
        /* Smooth scrolling trên mobile */
        scrollbar-width: thin;
        /* Firefox */
        scrollbar-color: #6c757d #f8f9fa;
        /* Firefox */
    }

    /* Custom scrollbar cho Webkit browsers (Chrome, Safari, Edge) */
    .table-container::-webkit-scrollbar {
        height: 12px;
        /* Chiều cao thanh scroll ngang */
        width: 12px;
        /* Chiều rộng thanh scroll dọc */
    }

    .table-container::-webkit-scrollbar-track {
        background: #f8f9fa;
        border-radius: 6px;
    }

    .table-container::-webkit-scrollbar-thumb {
        background: #6c757d;
        border-radius: 6px;
        border: 2px solid #f8f9fa;
    }

    .table-container::-webkit-scrollbar-thumb:hover {
        background: #495057;
    }

    .table-container::-webkit-scrollbar-corner {
        background: #f8f9fa;
    }

    /* Scroll Indicator */
    .scroll-indicator {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-top: none;
        padding: 8px 15px;
        font-size: 12px;
        color: #6c757d;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .scroll-info {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .scroll-position {
        font-weight: 600;
        color: #495057;
    }

    .scroll-hint {
        font-style: italic;
        opacity: 0.8;
    }

    /* Focus outline cho table container */
    .table-container:focus {
        outline: 2px solid #0d6efd;
        outline-offset: -2px;
    }

    /* Mobile scroll indicator */
    @media (max-width: 768px) {
        .scroll-hint {
            display: none;
        }

        .scroll-indicator {
            padding: 5px 10px;
            font-size: 11px;
        }
    }


    /* Căn phải cho các số trong td */
    .data-table td:not(.product-name):not(.metric-name) {
        text-align: right;
    }

    .table>:not(caption)>*>* {
        padding: .3rem !important;
    }

    .data-table {
        margin: 0;
        font-size: 12px;
        white-space: nowrap;
    }

    .chi_so {
        position: sticky !important;
        left: 120px !important;
        z-index: 50 !important;
        background-color: #f8f9fa !important;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
        /* Shadow bên phải */
        min-width: 100px !important;
        width: 100px !important;
    }

    .data-table th {
        background-color: #f8f9fa !important;
        border: 1px solid #dee2e6;
        padding: 8px;
        text-align: center;
        font-weight: 600;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        /* Tăng z-index cao hơn */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        /* Thêm shadow để nổi bật */
    }

    .data-table td {
        border: 1px solid #8d99a5;
        padding: 6px 8px;
        text-align: center;
    }

    #collapse-danh-muc-quan-ly,
    #collapse-danh-muc-report {
        z-index: 1050;
    }

    .product-name {
        background-color: #f8f9fa !important;
        font-weight: 600;
        position: sticky !important;
        left: 0 !important;
        z-index: 50 !important;
        /* Thấp hơn header nhưng cao hơn content */
        min-width: 120px !important;
        width: 120px !important;
        white-space: normal;
        word-break: break-word;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
        /* Shadow bên phải */
    }

    .metric-name {
        background-color: #fff;
        text-align: left;
        padding-left: 10px !important;
        position: sticky !important;
        left: 120px !important;
        z-index: 40 !important;
        min-width: 100px !important;
        width: 100px !important;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
        /* Shadow bên phải */
    }

    .positive {
        background-color: #d4edda;
        color: #155724;
    }

    .negative {
        background-color: #f8d7da;
        color: #721c24;
    }

    .btn-edit {
        background-color: #0d6efd;
        color: white;
        border: none;
        padding: 2px 8px;
        border-radius: 3px;
        font-size: 11px;
    }

    .filter-section {
        background-color: #f8f9fa;
        padding: 15px;
        border: 1px solid #dee2e6;
        border-bottom: none;
        margin-bottom: 0;
    }

    .date-input {
        width: 140px;
    }

    /* CSS để các filter nằm trên 1 hàng */
    #filter-form {
        flex-wrap: nowrap !important;
        padding-bottom: 5px;
    }


    #filter-form .col-auto:has(#multiple-select-field) {
        width: 500px !important;
    }

    #filter-form .col-auto:has(#multiple-select-field-user) {
        width: 250px !important;
    }

    /* Đảm bảo Select2 chiếm hết chiều rộng của container */
    #filter-form .select2-container {
        width: 100% !important;
    }

    @media (max-width: 1200px) {
        /* #filter-form .col-auto:has(#multiple-select-field) {
            width: 200px !important;
        } */
        /* #filter-form .col-auto:has(#multiple-select-field-user) {
            width: 180px !important;
        } */
    }

    /* Fixed total column positioning to match header */
    .total-column {
        position: sticky !important;
        left: 220px !important;
        z-index: 30 !important;
        background-color: #fff;
        min-width: 100px !important;
        width: 100px !important;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
        /* Shadow bên phải */
    }

    #tableHeader th {
        background: #46bdc6 !important;
        font-weight: bold;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
    }

    /* Đảm bảo header App và Chỉ số có z-index cao nhất */
    #tableHeader th:first-child,
    #tableHeader th:nth-child(2) {
        z-index: 150 !important;
    }

    /* Header Tổng có z-index cao */
    #tableHeader th:nth-child(3) {
        z-index: 120 !important;
    }

    /* Ensure total column header stays fixed during vertical scroll */
    .total-column-header {
        position: sticky !important;
        left: 220px !important;
        top: 0 !important;
        z-index: 120 !important;
        /* Cao hơn các cột khác but lower than intersection */
        background-color: #46bdc6 !important;
        min-width: 100px !important;
        width: 100px !important;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1);
        /* Shadow cả 2 hướng */
    }

    @media (max-width: 768px) {
        .product-name {
            position: sticky !important;
            left: 0 !important;
            z-index: 110 !important;
            min-width: 100px !important;
            width: 100px !important;
            font-size: 11px !important;
            padding: 6px 4px !important;
            word-wrap: break-word !important;
            white-space: normal !important;
            background-color: #f8f9fa !important;
            box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1) !important;
        }

        #filter-form {
            flex-wrap: wrap !important;
        }

        #filter-form .col-auto {
            width: 100%;
        }

        #filter-form .col-auto input {
            width: 100% !important;
        }

        #filter-form .col-auto button {
            width: 100% !important;
        }

        #filter-form .col-auto .form-switch .form-check-input {
            width: 30px !important;
            height: 15px !important;
        }

        #filter-form .col-auto:has(#multiple-select-field-user) {
            width: 100% !important;
        }

        .chi_so,
        .metric-name,
        .total-column,
        .total-column-header {
            position: relative !important;
            left: auto !important;
            z-index: 10 !important;
            min-width: 80px !important;
            width: auto !important;
            box-shadow: none !important;
        }

        .chi_so {
            padding-left: 5px !important;
        }

        #tableHeader th:not(.product-name) {
            position: sticky !important;
            top: 0 !important;
            left: auto !important;
            z-index: 100 !important;
        }

        .table-container {
            max-height: 75vh !important;
            overflow-x: auto !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch !important;
        }

        .data-table td,
        .data-table th {
            padding: 8px 6px !important;
            font-size: 11px !important;
        }
    }
</style>