@php
    $isMkt = auth()->user() && auth()->user()->role_id == 2;
@endphp
@extends('admin.layout.app')

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

@section('content')
    <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 năm</h6>
            </div>
            <div class="card-body">
                <!-- Tabs for table/chart -->
                <ul class="nav nav-tabs mb-3" id="yearTabs" role="tablist">
                    @can('view-report')
                        <li class="nav-item" role="presentation">
                            <button class="nav-link{{ !$isMkt ? ' active' : '' }}" id="table-tab" data-bs-toggle="tab" data-bs-target="#tableTab"
                                type="button" role="tab" aria-controls="tableTab" aria-selected="{{ !$isMkt ? 'true' : 'false' }}">Bảng dữ
                                liệu</button>
                        </li>
                    @endcan
                    <li class="nav-item" role="presentation">
                        <button class="nav-link{{ $isMkt ? ' active' : '' }}" id="chart-tab" data-bs-toggle="tab" data-bs-target="#chartTab"
                            type="button" role="tab" aria-controls="chartTab" aria-selected="{{ $isMkt ? 'true' : 'false' }}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
                                class="bi bi-bar-chart" viewBox="0 0 16 16">
                                <path d="M0 0h1v15h15v1H0V0zm10 10h2v3h-2v-3zm-4-4h2v7H6V6zm-4 8h2v-2H2v2z" />
                            </svg> Biểu đồ lợi nhuận
                        </button>
                    </li>
                </ul>
                <div class="tab-content" id="yearTabsContent">
                    <div class="filter-section">
                        <div class="row align-items-center">
                            <form method="GET" action="{{ route('daily.index_year') }}"
                                class="d-flex align-items-center flex-wrap gap-2">
                                @csrf
                                <!-- Removed month selector, only keep year selector -->
                                <div class="col-auto">
                                    <select id="yearSelect" class="form-select form-select-sm" name="year"
                                        style="width: 150px;">
                                        @php
                                            $currentYear = date('Y');
                                        @endphp
                                        @for ($y = 2000; $y <= $currentYear; $y++)
                                            <option value="{{ $y }}" {{ $y == $year ? 'selected' : '' }}>
                                                {{ $y }}
                                            </option>
                                        @endfor
                                    </select>

                                </div>
                                 @can('view-report')
                                <div class="col-auto" style="width:600px;">
                                    <select class="form-select" multiple id="multiple-select-field" name="apps[]"
                                        data-placeholder="Chọn ứng dụng">
                                        @foreach ($apps as $app)
                                            <option value="{{ $app->id }}"
                                                {{ in_array($app->id, $appsFilter ?? []) ? 'selected' : '' }}>
                                                {{ $app->app_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                @endcan
                                @if(Auth::user()->role_id == 1)
                                    <div class="col-auto" style="width:400px;">
                                        <select class="form-select" multiple id="multiple-select-field-user" name="users[]"
                                            data-placeholder="Chọn nhân viên">

                                            @foreach ($users as $user)
                                                <option value="{{ $user->id }}"
                                                    {{ in_array($user->id, $usersFilter ?? []) ? 'selected' : '' }}>
                                                    {{ $user->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                @endif
                                <div class="col-auto">
                                    <!-- Updated button function name -->
                                    <button class="btn btn-primary btn-sm" onclick="filterByYear()">Lọc</button>
                                    <button class="btn btn-secondary btn-sm ms-2" onclick="resetFilter()">Reset</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="tab-pane fade{{ !$isMkt ? ' show active' : '' }}" id="tableTab" role="tabpanel" aria-labelledby="table-tab">

                        <div class="table-container">
                            <table class="table data-table">
                                <thead>
                                    <tr id="tableHeader">
                                        <th class="product-name">Sản phẩm</th>
                                        <th style="position: sticky; left: 120px; z-index: 10; background-color: #f8f9fa;">
                                            Chi số
                                        </th>
                                        <!-- Updated total column positioning to match CSS class -->
                                        <th class="total-column-header">Tổng</th>
                                        <!-- Month columns will be inserted here instead of date columns -->
                                    </tr>
                                </thead>
                                <tbody id="tableBody">
                                    <!-- Data rows will be inserted here -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="tab-pane fade{{ $isMkt ? ' show active' : '' }}" id="chartTab" role="tabpanel" aria-labelledby="chart-tab">
                        <!-- Filter Section for Chart Tab (reuse year/app/user filter) -->

                        <div class="my-4 chart-responsive-wrapper">
                            <canvas id="profitBarChart" height="120" style="width:100%;"></canvas>
                        </div>
                        <div class="d-block d-md-none text-center mt-2" style="font-size:12px;color:#888;">
                            Kéo ngang để xem hết biểu đồ
                        </div>
                    </div>
                </div>
                <!-- Đã chuyển table-container vào trong tab-pane #tableTab -->
            </div>
        </div>
    </div>
@endsection
@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush
@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.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 src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@endpush
@push('scripts')
    <script>
        // Chart.js for profit bar chart
        let profitChartInstance = null;
        // Sync filter values between table and chart tab
        function syncChartFilterFromTable() {
            document.getElementById('yearSelect').value = document.getElementById('yearSelect').value;
            // Sync apps
            const tableApps = document.getElementById('multiple-select-field');
            const chartApps = document.getElementById('multiple-select-field-chart');
            if (tableApps && chartApps) {
                Array.from(chartApps.options).forEach(opt => opt.selected = false);
                Array.from(tableApps.selectedOptions).forEach(opt => {
                    const match = Array.from(chartApps.options).find(o => o.value == opt.value);
                    if (match) match.selected = true;
                });
            }
            // Sync users
            const tableUsers = document.getElementById('multiple-select-field-user');
            const chartUsers = document.getElementById('multiple-select-field-user-chart');
            if (tableUsers && chartUsers) {
                Array.from(chartUsers.options).forEach(opt => opt.selected = false);
                Array.from(tableUsers.selectedOptions).forEach(opt => {
                    const match = Array.from(chartUsers.options).find(o => o.value == opt.value);
                    if (match) match.selected = true;
                });
            }
        }

        function renderProfitChart() {
            if (typeof Chart === 'undefined') return setTimeout(renderProfitChart, 200);
            const canvas = document.getElementById('profitBarChart');
            if (!canvas) return;
            const ctx = canvas.getContext('2d');
            // Tính tổng lợi nhuận của tất cả app cho từng tháng
            const labels = currentMonths.map(m => 'T' + parseInt(m, 10));
            const totalProfits = currentMonths.map(month => {
                let sum = 0;
                products.forEach(product => {
                    const yearData = product.data['Lợi nhuận'].values[currentYear.toString()];
                    if (yearData && yearData[month] !== undefined && yearData[month] !== null) {
                        sum += yearData[month];
                    }
                });
                return sum;
            });
            const datasets = [{
                label: 'Tổng lợi nhuận',
                data: totalProfits,
                backgroundColor: 'rgba(54, 162, 235, 0.7)',
                borderRadius: 6,
                maxBarThickness: 38
            }];
            if (profitChartInstance) profitChartInstance.destroy();
            profitChartInstance = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels,
                    datasets
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            display: false
                        },
                        title: {
                            display: true,
                            text: 'Biểu đồ tổng lợi nhuận theo tháng'
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: 'Lợi nhuận'
                            }
                        }
                    }
                }
            });
        }

        function getRandomColor() {
            const hue = Math.floor(Math.random() * 360);
            return `hsl(${hue}, 70%, 70%)`;
        }
        // Tab event: render chart when shown
        document.addEventListener('DOMContentLoaded', function() {
            // Nếu là MKT thì render chart luôn khi vào
            if({{ $isMkt ? 'true' : 'false' }}) {
                renderProfitChart();
            }
            var chartTab = document.getElementById('chart-tab');
            if (chartTab) {
                chartTab.addEventListener('shown.bs.tab', function(event) {
                    syncChartFilterFromTable();
                    renderProfitChart();
                });
            }
        });
        // Chart filter handlers
        function filterByYearChart() {
            // Sync table filter from chart filter
            document.getElementById('yearSelect').value = document.getElementById('yearSelect').value;
            // Sync apps
            const tableApps = document.getElementById('multiple-select-field');
            const chartApps = document.getElementById('multiple-select-field-chart');
            if (tableApps && chartApps) {
                Array.from(tableApps.options).forEach(opt => opt.selected = false);
                Array.from(chartApps.selectedOptions).forEach(opt => {
                    const match = Array.from(tableApps.options).find(o => o.value == opt.value);
                    if (match) match.selected = true;
                });
            }
            // Sync users
            const tableUsers = document.getElementById('multiple-select-field-user');
            const chartUsers = document.getElementById('multiple-select-field-user-chart');
            if (tableUsers && chartUsers) {
                Array.from(tableUsers.options).forEach(opt => opt.selected = false);
                Array.from(chartUsers.selectedOptions).forEach(opt => {
                    const match = Array.from(tableUsers.options).find(o => o.value == opt.value);
                    if (match) match.selected = true;
                });
            }
            filterByYear();
        }

        function resetFilterChart() {
            document.getElementById('yearSelect').value = new Date().getFullYear();
            const chartApps = document.getElementById('multiple-select-field-chart');
            if (chartApps) Array.from(chartApps.options).forEach(opt => opt.selected = false);
            const chartUsers = document.getElementById('multiple-select-field-user-chart');
            if (chartUsers) Array.from(chartUsers.options).forEach(opt => opt.selected = false);
            filterByYearChart();
        }

        $(document).ready(function() {
            $('#multiple-select-field').select2({
                width: '100%',
                placeholder: $(this).data('placeholder'),
                closeOnSelect: false,
            });
            $('#multiple-select-field-user').select2({
                width: '100%',
                placeholder: $(this).data('placeholder'),
                closeOnSelect: false,
            });
        });

        const products = @json($products);


        let currentMonths = []; // sẽ lưu tháng hiển thị hiện tại
        //  let currentYear = 2024; // lưu năm hiện tại

        function generateMonthsInYear() {
            const months = [];
            for (let month = 1; month <= 12; month++) {
                const monthStr = month.toString().padStart(2, '0');
                months.push(monthStr);
            }
            return months;
        }

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

            // Clear previous month columns
            const fixedColumnsCount = 3; // "Sản phẩm", "Chi số", "Tổng"
            while (header.children.length > fixedColumnsCount) {
                header.removeChild(header.lastChild);
            }

            const monthNames = ['T1', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'T8', 'T9', 'T10', 'T11', 'T12'];
            currentMonths.forEach((month, index) => {
                const th = document.createElement('th');
                th.textContent = monthNames[index];
                header.appendChild(th);
            });

            // Clear body
            body.innerHTML = '';

            addGrandTotalRow(body);

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

                metrics.forEach((metric, index) => {
                    const row = index === 0 ? document.createElement('tr') : 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;

                    if (metric !== 'Lợi nhuận (%)') {
                        currentMonths.forEach(month => {
                            const yearData = product.data[metric].values[currentYear.toString()];
                            if (yearData && yearData[month] !== undefined && yearData[month] !==
                                null) {
                                totalValue += yearData[month];
                            }
                        });
                    } else {
                        // For profit percentage, calculate from revenue and profit totals
                        let revenueTotal = 0;
                        let profitTotal = 0;
                        currentMonths.forEach(month => {
                            const revenueYearData = product.data['Doanh thu'].values[currentYear
                                .toString()];
                            const profitYearData = product.data['Lợi nhuận'].values[currentYear
                                .toString()];
                            if (revenueYearData && revenueYearData[month] !== undefined &&
                                revenueYearData[month] !== null) {
                                revenueTotal += revenueYearData[month];
                            }
                            if (profitYearData && profitYearData[month] !== undefined &&
                                profitYearData[month] !== null) {
                                profitTotal += profitYearData[month];
                            }
                        });
                        totalValue = revenueTotal !== 0 ? (profitTotal / revenueTotal * 100) : 0;
                    }

                    totalCell.textContent = (metric === 'Lợi nhuận (%)' ? totalValue.toFixed(0) + '%' : Math
                        .round(totalValue));

                    totalCell.className = 'total-column';

                    // Highlight theo giá trị
                    if (totalValue > 0) {
                        totalCell.style.backgroundColor = '#d4edda'; // xanh nhạt
                        totalCell.style.color = '#155724';
                    } else if (totalValue < 0) {
                        totalCell.style.backgroundColor = '#f8d7da'; // đỏ nhạt
                        totalCell.style.color = '#721c24';
                    } else {
                        totalCell.style.backgroundColor = '#fff';
                        totalCell.style.color = '#000';
                    }

                    row.appendChild(totalCell);

                    currentMonths.forEach(month => {
                        const cell = document.createElement('td');
                        const yearData = product.data[metric].values[currentYear.toString()];
                        const value = yearData ? yearData[month] : undefined;

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

                            // Highlight từng cell dựa trên giá trị
                            if (value > 0) {
                                cell.style.backgroundColor = '#d4edda'; // xanh nhạt
                                cell.style.color = '#155724';
                            } else if (value < 0) {
                                cell.style.backgroundColor = '#f8d7da'; // đỏ nhạt
                                cell.style.color = '#721c24';
                            } else {
                                cell.style.backgroundColor = '#fff'; // giá trị = 0
                                cell.style.color = '#000';
                            }
                        } else {
                            cell.textContent = '';
                            cell.style.backgroundColor = '#f8f9fa'; // light gray for empty cells
                            cell.style.color = '#6c757d';
                        }

                        row.appendChild(cell);
                    });

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

        }

        function addGrandTotalRow(body) {
            const metrics = ['Doanh thu', 'Chi phí', 'Lợi nhuận', 'Lợi nhuận (%)'];

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

                // Initialize month values
                currentMonths.forEach(month => {
                    grandTotals[metric].values[month] = 0;
                });

                products.forEach(product => {
                    if (metric !== 'Lợi nhuận (%)') {
                        // Calculate total only from current visible months
                        let productTotal = 0;
                        currentMonths.forEach(month => {
                            const yearData = product.data[metric].values[currentYear.toString()];
                            const value = yearData ? yearData[month] : undefined;
                            if (value !== undefined && value !== null) {
                                grandTotals[metric].values[month] += value;
                                productTotal += value;
                            }
                        });
                        grandTotals[metric].total += productTotal;
                    }
                });
            });

            const totalRevenue = grandTotals['Doanh thu'].total;
            const totalProfit = grandTotals['Lợi nhuận'].total;
            grandTotals['Lợi nhuận (%)'].total = totalRevenue !== 0 ? (totalProfit / totalRevenue * 100) : 0;

            // Calculate profit percentage for each month
            currentMonths.forEach(month => {
                const monthRevenue = grandTotals['Doanh thu'].values[month];
                const monthProfit = grandTotals['Lợi nhuận'].values[month];
                grandTotals['Lợi nhuận (%)'].values[month] = monthRevenue !== 0 ? (monthProfit / monthRevenue *
                    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 = 'bold';
                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 = 'bold';
                    productCell.style.backgroundColor = '#e9ecef';
                    row.appendChild(productCell);
                }

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

                // Total column
                const totalCell = document.createElement('td');
                const totalValue = grandTotals[metric].total;
                totalCell.textContent = (metric === 'Lợi nhuận (%)' ? totalValue.toFixed(0) + '%' : Math.round(
                    totalValue));

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

                // Highlight based on value
                if (totalValue > 0) {
                    totalCell.style.backgroundColor = '#d4edda';
                } else if (totalValue < 0) {
                    totalCell.style.backgroundColor = '#f8d7da';
                } else {
                    totalCell.style.color = '#000';
                }

                row.appendChild(totalCell);

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

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

                    // cell.style.fontWeight = 'bold';
                    cell.style.backgroundColor = '#e9ecef';

                    // Highlight based on value
                    if (value > 0) {
                        cell.style.backgroundColor = '#d4edda';
                    } else if (value < 0) {
                        cell.style.backgroundColor = '#f8d7da';
                    } else {
                        cell.style.color = '#000';
                    }

                    row.appendChild(cell);
                });

                body.appendChild(row);
            });
        }

        function filterByYear() {
            const selectedYear = parseInt(document.getElementById('yearSelect').value);
            const selectedApps = Array.from(document.getElementById('multiple-select-field').selectedOptions)
                .map(option => option.value);
            const selectedUsers = Array.from(document.getElementById('multiple-select-field-user').selectedOptions)
                .map(option => option.value);
            if (!selectedYear) {
                alert('Vui lòng chọn năm');
                return;
            }
            const params = new URLSearchParams();
            //params.append("month", selectedMonth);
            params.append("year", selectedYear);

            selectedApps.forEach(appId => {
                params.append("apps[]", appId);
            });
            selectedUsers.forEach(appId => {
                params.append("users[]", appId);
            });
            window.location.href = `{{ route('daily.index_year') }}?${params.toString()}`;
        }

        // function resetFilter() {
        //     const now = new Date();
        //     const currentYear = now.getFullYear();
        //     document.getElementById('yearSelect').value = currentYear;

        //     const multipleSelect = document.getElementById('multiple-select-field');
        //     Array.from(multipleSelect.options).forEach(option => option.selected = false);
        //     const multipleSelectuser = document.getElementById('multiple-select-field-user');
        //     Array.from(multipleSelectuser.options).forEach(option => option.selected = false);
        //     // Redirect về mặc định (tháng/năm hiện tại, không có apps)
        //     const params = new URLSearchParams();
        //     //  params.append("month", currentMonth);
        //     params.append("year", currentYear);

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

        currentYear = parseInt(document.getElementById('yearSelect').value);
        currentMonths = generateMonthsInYear();
        renderTable();
    </script>
@endpush
<style scoped>
    .chart-responsive-wrapper {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    @media (max-width: 768px) {
        .chart-responsive-wrapper {
            margin-left: -8px;
            margin-right: -8px;
            padding: 10px 2px 10px 2px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
        }

        #profitBarChart {
            min-width: 600px;
            max-width: 1200px;
            background: #f8fafc;
            border-radius: 8px;
            box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.04);
            padding: 8px;
            margin: 0 auto;
            display: block;
        }

        .table-container {
            border-radius: 10px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
            background: #fff;
        }

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

        #tableHeader th{
        background: #46bdc6 !important;
    }
            .filter-section {
            border-radius: 10px;
            box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.04);
            background: #f8f9fa;
            margin-bottom: 10px;
        }

        .d-block.d-md-none.text-center.mt-2 {
            font-size: 12px;
            color: #888;
            margin-top: 8px;
        }

        .nav-tabs .nav-link {
            font-size: 13px;
            padding: 8px 10px;
        }

        .card-header h6 {
            font-size: 15px;
        }
    }

    .table-container {
        overflow-x: auto;
        overflow-y: auto;
        border: 1px solid #dee2e6;
        max-height: 70vh;
        /* Limit height to enable vertical scrolling */
    }

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

    .data-table th {
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        padding: 8px;
        text-align: center;
        font-weight: 600;
        position: sticky;
        top: 0;
        z-index: 10;
    }

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

    .product-name {
        background-color: #f8f9fa;
        font-weight: 600;
        position: sticky;
        left: 0;
        z-index: 5;
        min-width: 120px;
        white-space: normal; word-break: break-word;
    }

    .metric-name {
        background-color: #fff;
        text-align: left;
        padding-left: 20px !important;
        position: sticky;
        left: 120px;
        z-index: 5;
        min-width: 100px;
    }

    .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;
        left: 220px;
        z-index: 5;
        background-color: #fff;
        min-width: 80px;
    }

    /* Ensure total column header stays fixed during vertical scroll */
    .total-column-header {
        position: sticky;
        left: 220px;
        top: 0;
        z-index: 15;
        background-color: #f8f9fa;
        min-width: 80px;
    }

    @media (max-width: 768px) {

        .product-name,
        .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>