@extends('admin.layout.app')

@section('title', 'Danh mục')

@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>
            </div>

            <div class="card-body">
                <div class="filter-section">
                    <div class="row align-items-center">
                        <form id="filter-form" method="GET" action="{{ route('daily.index_day') }}"
                            class="d-flex align-items-center flex-wrap gap-2">
                            @csrf
                            <div class="col-auto">
                                <input type="date" id="dateInput" class="form-control form-control-sm"
                                    style="width: 150px;" value="{{ $selectedDate ?? date('Y-m-d') }}" name="date">
                            </div>
                            <div class="col-auto" style="width:600px;">
                                <select class="form-select {{ $autoFilterSubmit ? '' : 'select2-multiple' }}"
                                    id="multiple-select-field" name="apps[]"
                                    {{ $autoFilterSubmit ? '' : 'multiple' }} data-placeholder="Chọn ứng dụng">
                                    <option value="">Chọn ứng dụng</option>
                                    <option value="all" {{ $autoFilterSubmit && empty($appsFilter) ? 'selected' : '' }}>
                                        Tất cả ứng dụng
                                    </option>
                                    @foreach ($apps as $app)
                                        <option value="{{ $app->id }}"
                                            {{ in_array($app->id, request('apps', [])) ? 'selected' : '' }}>
                                            {{ $app->app_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-auto">
                                @if(!$autoFilterSubmit)
                                    <button type="submit" class="btn btn-primary btn-sm" id="filter-btn">Lọc</button>
                                @endif
                                <button type="button" class="btn btn-secondary btn-sm ms-2"
                                    onclick="resetFilter()">Reset</button>
                                <button id="toggleThuChiBtn" type="button" class="btn btn-warning btn-sm mt-1 mt-md-0"
                                    onclick="toggleThuChi()">Ẩn Lợi nhuận (1h)/Chi phí (1h)</button>
                                @if (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>
                                @endif
                            </div>
                        </form>
                    </div>
                </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() {
            const autoSubmitEnabled = {{ $autoFilterSubmit ? 'true' : 'false' }};
            const appsSelect = $('#multiple-select-field');

            if (!autoSubmitEnabled && appsSelect.length) {
                appsSelect.select2({
                    width: '100%',
                    placeholder: 'Chọn ứng dụng',
                    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();
                    }
                });
            }
        });
    </script>
    <script>
        function toggleFullscreen(event) {
            event.preventDefault(); // 🚫 chặn submit form

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

            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';
            } 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'
            }
        }
        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) {
                // Nếu là Select2, lấy giá trị từ Select2
                if ($(selectField).hasClass('select2-hidden-accessible')) {
                    selectedApps = $(selectField).val() || [];
                } else {
                    selectedApps = 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
                    products = json.products;
                    console.log('chạy đây');

                    currentHours = generateHoursInDay(selectedDate);
                    // Render lại table
                    renderTable(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) {
                // Nếu là Select2, lấy giá trị từ Select2
                if ($(selectField).hasClass('select2-hidden-accessible')) {
                    selectedApps = $(selectField).val() || [];
                } else {
                    selectedApps = 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);
                }
            });
        }
        // const products = @json($products ?? []);
        let currentHours = [];
        let currentDate = '{{ $selectedDate ?? date('Y-m-d') }}'; // Added current date tracking
        let showThuChi = true; // Biến để theo dõi trạng thái ẩn/hiển thị

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

        function renderTable(products) {


            const header = document.getElementById('tableHeader');
            const body = document.getElementById('tableBody');

            // 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, products);
            if (!Array.isArray(products)) {

                return;
            }
            // Add product rows
            products.forEach(product => {
                let metrics = ['Doanh thu', 'Chi phí', 'Lợi nhuận', 'Lợi nhuận (%)'];

                // Thêm Lợi nhuận (1h) và Chi phí (1h) nếu showThuChi = true
                if (showThuChi) {
                    metrics.push('Chi phí (1h)', 'Lợi nhuận (1h)');
                }

                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');
                    let totalValue = 0;

                    const dateData = product.data[currentDate];

                    if (dateData && dateData[metric]) {
                        if (metric !== 'Lợi nhuận (%)') {
                            currentHours.forEach(hour => {
                                const value = dateData[metric].values[hour];
                                if (value !== undefined && value !== null) {
                                    totalValue += value;
                                }
                            });
                        } else {
                            // For profit percentage, calculate from revenue and profit totals
                            let revenueTotal = 0;
                            let profitTotal = 0;
                            currentHours.forEach(hour => {
                                const revenueValue = dateData['Doanh thu'] ? dateData['Doanh thu']
                                    .values[hour] : 0;
                                const profitValue = dateData['Lợi nhuận'] ? dateData['Lợi nhuận']
                                    .values[hour] : 0;
                                if (revenueValue !== undefined && revenueValue !== null) {
                                    revenueTotal += revenueValue;
                                }
                                if (profitValue !== undefined && profitValue !== null) {
                                    profitTotal += profitValue;
                                }
                            });
                            totalValue = revenueTotal !== 0 ? (profitTotal / revenueTotal * 100) : 0;
                        }
                    }

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

                    if( metric === "Lợi nhuận (1h)"){
                        row.style.borderBottom = '2px solid red';
                    }
                    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 (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 =  'rgb(46 233 91)';
                                cell.style.fontWeight = '500';
                            } else if (metric === 'Chi phí (1h)') {
                                cell.style.backgroundColor =  'rgb(46 233 91)';
                                cell.style.fontWeight = '500';
                            } else if (value > 0) {
                                cell.style.backgroundColor =  'rgb(46 233 91)';
                                cell.style.fontWeight = '500';
                            } else if (value < 0) {
                                cell.style.backgroundColor = 'rgb(237 10 31)'; // màu đỏ
                                cell.style.fontWeight = '500';
                            } 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);
        }

        function addGrandTotalRow(body, products) {
            let metrics = ['Doanh thu', 'Chi phí', 'Lợi nhuận', 'Lợi nhuận (%)'];
          
            // Thêm Lợi nhuận (1h) và Chi phí (1h) nếu showThuChi = true
            if (showThuChi) {
                metrics.push('Chi phí (1h)', 'Lợi nhuận (1h)');
            }

            const grandTotals = {};
            metrics.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] && metric !== 'Lợi nhuận (%)') {
                        let productTotal = 0;
                        currentHours.forEach(hour => {
                            const value = dateData[metric].values[hour];
                            if (value !== undefined && value !== null) {
                                grandTotals[metric].values[hour] += value;
                                productTotal += value;
                            }
                        });
                        grandTotals[metric].total += productTotal;
                    }
                });
            });

            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
            metrics.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 = metrics.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 (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.style.color = '#000'; // Màu xanh cho Lợi nhuận (1h)
                    totalCell.style.backgroundColor = 'rgb(46 233 91)';  
                    totalCell.style.fontWeight = 'bold';

                } else if (metric === 'Chi phí (1h)') {
                    totalCell.style.color = '#000'; // Màu đỏ cho Chi phí (1h)
                    totalCell.style.backgroundColor = 'rgb(46 233 91)'; 
                    totalCell.style.fontWeight = 'bold';
                } else if (totalValue > 0) {
                    totalCell.style.backgroundColor = 'rgb(46 233 91)';  
                    totalCell.style.fontWeight = 'bold';
                } else if (totalValue < 0) {
                    totalCell.style.backgroundColor = 'rgb(237 10 31)'; // màu đỏ
                    totalCell.style.fontWeight = 'bold';
                } 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(1) + '%';
                    } else {
                        cell.textContent =  Math.round(value).toLocaleString('en-US');
                    }

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

                    // Highlight based on value
                    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 = '#d4edda';
                        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;
            
            // Tìm element apps - có thể là multiple-select-field hoặc filter-apps
            const appsSelect = document.getElementById('multiple-select-field') || document.querySelector('select[name="apps[]"]');
            let selectedApps = [];
            
            if (appsSelect) {
                // Nếu là Select2, lấy giá trị từ Select2
                if ($(appsSelect).hasClass('select2-hidden-accessible')) {
                    selectedApps = $(appsSelect).val() || [];
                } else {
                    // Nếu chưa phải Select2, lấy từ selectedOptions
                    selectedApps = Array.from(appsSelect.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);
            });

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

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

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

        function toggleThuChi() {
            showThuChi = !showThuChi;
            const button = document.getElementById('toggleThuChiBtn');
            if (button) {
              

                button.textContent = showThuChi ? 'Ẩn Lợi nhuận (1h)/Chi phí (1h)' : 'Hiện Lợi nhuận (1h)/Chi phí (1h)';
                button.className = showThuChi ? 'btn btn-warning btn-sm mt-1  mt-md-0' :
                    'btn btn-success btn-sm mt-1 mt-md-0';
            }
            renderTableReload();
        }
    </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: 83px !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 */
    }
    .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 */
        max-width: 120px;
        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 !important;
        text-align: left;
        padding-left: 20px !important;
        position: sticky !important;
        left: 120px !important;
        z-index: 40 !important;
        min-width: 100px;
        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;
    }

    /* Fixed total column positioning to match header */
    .total-column {
        position: sticky !important;
        left: 220px !important;
        z-index: 30 !important;
        background-color: #fff !important;
        min-width: 80px;
        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: 180px !important;
        top: 0 !important;
        z-index: 90 !important; /* Cao hơn các cột khác nhưng thấp hơn header chính */
        background-color: #f8f9fa !important;
        min-width: 80px;
        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: 100 !important;
            min-width: 60px !important;
            max-width: 80px !important;
            font-size: 10px !important;
            padding: 4px 2px !important;
            word-wrap: break-word !important;
            white-space: normal !important;
        }

        .metric-name,
        .total-column,
        .total-column-header {
            position: static !important;
            left: auto !important;
            z-index: auto !important;
            min-width: auto !important;
        }
    }

    /* Responsive scroll cho mobile */
    @media (max-width: 768px) {
        .table-container {
            max-height: 60vh !important; /* Giảm chiều cao trên mobile */
            overflow-x: auto;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

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