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

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

@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" id="reportTable">
                                <thead>
                                    <tr id="tableHeader">
                                        <th class="product-name">App</th>
                                        <th class="chi_so">Chỉ 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>

                        <table class="table table-bordered table-financial mt-1 table-mobi" style="width:30%">
                            <thead>
                                <tr>
                                    <th>LVT Global</th>
                                    <th>Tổng LVT Global</th>
                                    <th>Tổng</th>
                                    <th>Trạng thái</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="row-white">
                                    <td class="row-label">Doanh thu</td>
                                    <td id="laravel-revenue">{{ format_currency($totalRevenue, '') }}</td>
                                    <td id="total-revenue">0</td>
                                    <td id="status-revenue">ok</td>
                                </tr>
                                <tr class="row-gray">
                                    <td class="row-label">Chi phí </td>
                                    <td id="laravel-cost">{{ format_currency($totalCost, '') }}</td>
                                    <td id="total-cost">0</td>
                                    <td id="status-cost">ok</td>
                                </tr>
                                <tr class="row-white">
                                    <td class="row-label">Lợi nhuận</td>
                                    <td id="laravel-profit" class="negative">{{ format_currency($profit, '') }}</td>
                                    <td id="total-profit">0</td>
                                    <td id="status-profit">ok</td>
                                </tr>
                                <tr class="row-gray">
                                    <td class="row-label">Lợi nhuận (%)</td>
                                    <td id="laravel-profit-percent" class="negative">{{ format_currency($profitPercent, '') }}%
                                    </td>
                                    <td id="total-profit-percent">0%</td>
                                    <td id="status-profit-percent">ok</td>
                                </tr>
                                <tr class="row-white">
                                    <td class="row-label">Lợi nhuận sau thuế</td>
                                    @php
                                        $laravelNetProfit = $profit -  ($totalRevenue * $taxPercent);
                                    @endphp
                                    <td id="laravel-net-profit" class="{{ $laravelNetProfit < 0 ? 'text-danger' : 'text-success' }}">
                                        {{ format_currency($laravelNetProfit, '') }}
                                    </td>
                                    <td id="total-net-profit">0</td>
                                    <td id="status-net-profit">ok</td>
                                </tr>
                            </tbody>
                        </table>
                    </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);
        const taxPercent = {{ $taxPercent }};


        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];
                th.className = 'month-cell';
                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 (%)' && metric !== 'Lợi nhuận sau thuế') {
                        currentMonths.forEach(month => {
                            const metricData = product.data[metric];
                            const yearData = (metricData && metricData.values) ? metricData.values[currentYear.toString()] : undefined;
                            if (yearData && yearData[month] !== undefined && yearData[month] !==
                                null) {
                                totalValue += yearData[month];
                            }
                        });
                    } else if (metric === 'Lợi nhuận (%)') {
                        // For profit percentage, calculate from revenue and profit totals
                        let revenueTotal = 0;
                        let profitTotal = 0;
                        let costTotal = 0;
                        currentMonths.forEach(month => {
                            const revenueYearData = product.data['Doanh thu'].values[currentYear.toString()];
                            const profitYearData = product.data['Lợi nhuận'].values[currentYear.toString()];
                            const costYearData = product.data['Chi phí'].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];
                            }
                            if (costYearData && costYearData[month] !== undefined &&
                                costYearData[month] !== null) {
                                costTotal += costYearData[month];
                            }
                        });
                        totalValue = costTotal !== 0 ? (profitTotal / costTotal * 100) : 0;
                    } 
                    // else if (metric === 'Lợi nhuận sau thuế') {
                    //     let revenueTotal = 0;
                    //     let costTotal = 0;
                    //     currentMonths.forEach(month => {
                    //         const revenueData = product.data['Doanh thu'];
                    //         const costData = product.data['Chi phí'];
                    //         const revenueYearData = (revenueData && revenueData.values) ? revenueData.values[currentYear.toString()] : undefined;
                    //         const costYearData = (costData && costData.values) ? costData.values[currentYear.toString()] : undefined;
                    //         if (revenueYearData && revenueYearData[month] !== undefined && revenueYearData[month] !== null) {
                    //             revenueTotal += revenueYearData[month];
                    //         }
                    //         if (costYearData && costYearData[month] !== undefined && costYearData[month] !== null) {
                    //             costTotal += costYearData[month];
                    //         }
                    //     });
                    //     totalValue = (revenueTotal * taxPercent) - costTotal;
                    // }

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

                    totalCell.className = 'total-column';
                    if (metric === "Lợi nhuận sau thuế") {
                        row.style.borderBottom = '2px solid red';
                    }

                    // Highlight theo giá trị
                    if (metric === 'Doanh thu') {
                        totalCell.style.backgroundColor = '#fff !important';
                        totalCell.style.color = '#000';
                        totalCell.style.fontWeight = '500';
                    } else if (metric === 'Chi phí') {
                        totalCell.style.backgroundColor = '#fff !important';
                        totalCell.style.fontWeight = '500';
                    } else if (totalValue > 0) {
                        totalCell.style.backgroundColor = 'rgb(46 233 91)'; // xanh nhạt
                        totalCell.style.fontWeight = '500';
                    } else if (totalValue < 0) {
                        totalCell.style.backgroundColor = 'rgb(237 10 31)'; // đỏ nhạt
                        totalCell.style.fontWeight = '500';
                    } else {
                        totalCell.style.backgroundColor = '#fff';
                        totalCell.style.fontWeight = '500';
                    }

                    row.appendChild(totalCell);

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

                        // Hiển thị nếu có value HOẶC nếu đây là metric Lợi nhuận sau thuế (tự tính)
                        if ((value !== undefined && value !== null) || metric === 'Lợi nhuận sau thuế') {
                            if (metric === 'Lợi nhuận (%)') {
                                cell.textContent = value + '%';
                            } else if (metric === 'Lợi nhuận sau thuế') {
                                const revMetric = product.data['Doanh thu'];
                                const costMetric = product.data['Chi phí'];
                                const revenueYearData = (revMetric && revMetric.values) ? revMetric.values[currentYear.toString()] : undefined;
                                const costYearData = (costMetric && costMetric.values) ? costMetric.values[currentYear.toString()] : undefined;
                                const monthRevenue = (revenueYearData && revenueYearData[month]) ? revenueYearData[month] : 0;
                                const monthCost = (costYearData && costYearData[month]) ? costYearData[month] : 0;
                                const netProfitValue = (monthRevenue * taxPercent) - monthCost;
                                cell.textContent = Math.round(netProfitValue).toLocaleString();
                                valueToHighlight = netProfitValue;
                            } else {
                                cell.textContent = Math.round(value).toLocaleString();
                                valueToHighlight = value;
                            }

                            // Highlight từng cell dựa trên giá trị
                            let highlightValue = (metric === 'Lợi nhuận sau thuế') ? (valueToHighlight) : value;

                            if (metric === 'Doanh thu') {
                                cell.style.backgroundColor = '#fff !important';
                                cell.style.fontWeight = '500';
                            } else if (metric === 'Chi phí') {
                                cell.style.backgroundColor = '#fff !important';
                                cell.style.fontWeight = '500';
                            } else if (highlightValue > 0) {
                                cell.style.backgroundColor = 'rgb(46 233 91)'; // xanh nhạt
                                cell.style.fontWeight = '500';
                            } else if (highlightValue < 0) {
                                cell.style.backgroundColor = 'rgb(237 10 31)'; // đỏ nhạt
                                cell.style.fontWeight = '500';
                            } else {
                                cell.style.backgroundColor = '#fff'; // giá trị = 0
                                cell.style.fontWeight = '500';
                            }
                        } else {
                            cell.textContent = '';
                            cell.style.backgroundColor = '#f8f9fa'; // light gray for empty cells
                            cell.style.fontWeight = '500';
                        }

                        row.appendChild(cell);
                    });

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

        }

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

            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 (%)' && metric !== 'Lợi nhuận sau thuế') {
                        // 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;
            const totalCost = grandTotals['Chi phí'].total;
            // công thức tính lợi nhuận %
            grandTotals['Lợi nhuận (%)'].total = totalCost !== 0 ? (totalProfit / totalCost * 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];
                const monthCost = grandTotals['Chi phí'].values[month];
                grandTotals['Lợi nhuận (%)'].values[month] = monthCost !== 0 ? (monthProfit / monthCost *
                    100) : 0;
                grandTotals['Lợi nhuận sau thuế'].values[month] = monthProfit - (monthRevenue * taxPercent);
            });

            grandTotals['Lợi nhuận sau thuế'].total = totalProfit - (totalRevenue * taxPercent) ;

            // 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;


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

                if (metric === "Lợi nhuận sau thuế") {
                    updateNetProfitTable(totalValue);
                } else {
                    updateTable(metric, totalValue);
                }
                // 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 (totalValue > 0) {
                    totalCell.style.backgroundColor = 'rgb(46 233 91)'; // màu xanh lá
                    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';
                    totalCell.style.fontWeight = '500';
                }

                row.appendChild(totalCell);

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

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

                    cell.style.fontWeight = 'bold';
                    cell.style.backgroundColor = '#e9ecef';
                    if (metric === 'Doanh thu') {
                        cell.style.backgroundColor = "#cfe2f3"; // màu xanh nhạt
                        cell.style.fontWeight = 'bold';
                    } else if (metric === 'Chi phí') {
                        cell.style.backgroundColor = "#cfe2f3"; // màu xanh nhạt
                        cell.style.fontWeight = 'bold';
                    } else if (value > 0) {
                        cell.style.backgroundColor = 'rgb(46 233 91)'; // màu xanh nhạt
                        cell.style.fontWeight = 'bold';
                    } else if (value < 0) {
                        cell.style.backgroundColor = 'rgb(237 10 31)'; // màu đỏ nhạt
                        cell.style.fontWeight = 'bold';
                    } else {
                        cell.style.color = '#000';
                        cell.style.fontWeight = '500';
                    }

                    row.appendChild(cell);
                });

                body.appendChild(row);
            });
        }

        function cleanNumber(str) {
            // Bỏ %, dấu phẩy, dấu chấm và khoảng trắng
            return parseFloat(str.replace(/[,%.\s]/g, ''));
        }


        function formatNumber(value, isPercent = false) {
            if (isPercent) {
                return Math.round(value).toLocaleString() + "%";
            } else {
                return Math.round(value).toLocaleString();
            }
        }


        function updateTable(metric, jsValue) {
            let laravelEl, jsFormatted, totalEl, statusEl;

            switch (metric) {
                case 'Doanh thu':
                    laravelEl = document.getElementById("laravel-revenue");
                    jsFormatted = formatNumber(jsValue);
                    totalEl = document.getElementById("total-revenue");
                    statusEl = document.getElementById("status-revenue");
                    break;
                case 'Chi phí':
                    laravelEl = document.getElementById("laravel-cost");
                    jsFormatted = formatNumber(jsValue);
                    totalEl = document.getElementById("total-cost");
                    statusEl = document.getElementById("status-cost");
                    break;
                case 'Lợi nhuận':
                    laravelEl = document.getElementById("laravel-profit");
                    jsFormatted = formatNumber(jsValue);
                    totalEl = document.getElementById("total-profit");
                    statusEl = document.getElementById("status-profit");
                    break;
                case 'Lợi nhuận (%)':
                    laravelEl = document.getElementById("laravel-profit-percent");
                    jsFormatted = formatNumber(jsValue, true);
                    totalEl = document.getElementById("total-profit-percent");
                    statusEl = document.getElementById("status-profit-percent");
                    break;
            }

            if (!laravelEl || !totalEl || !statusEl) return;

            // Ghi giá trị JS vào cột Tổng
            totalEl.textContent = jsFormatted;

            // So sánh Laravel vs JS
            const laravelVal = cleanNumber(laravelEl.textContent);
            const jsVal = cleanNumber(jsFormatted);

            if (Math.abs(laravelVal - jsVal) < 0.1) {
                statusEl.textContent = "true";
                statusEl.style.color = "green";
            } else {
                statusEl.textContent = "false";
                statusEl.style.color = "red";
            }
        }

        function updateNetProfitTable(jsValue) {
            const laravelEl = document.getElementById("laravel-net-profit");
            const totalEl = document.getElementById("total-net-profit");
            const statusEl = document.getElementById("status-net-profit");

            if (!laravelEl || !totalEl || !statusEl) return;

            const jsFormatted = formatNumber(jsValue);
            totalEl.textContent = jsFormatted;

            const laravelVal = cleanNumber(laravelEl.textContent);
            const jsVal = cleanNumber(jsFormatted);

            if (Math.abs(laravelVal - jsVal) < 1) { // allow small rounding diff
                statusEl.textContent = "true";
                statusEl.style.color = "green";
            } else {
                statusEl.textContent = "false";
                statusEl.style.color = "red";
            }
        }

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


    .table-financial {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .table-financial th {
        background-color: #4e73df;
        color: white;
        text-align: center;
        padding: 5px;
        font-size: 14px;
    }

    .table-financial td {
        padding: 5px;
        text-align: center;
        font-weight: 500;
        border: 1px solid #e3e6f0;
    }

    .row-white {
        background-color: #ffffff;
    }

    .row-gray {
        background-color: #f8f9fa;
    }

    .row-label {
        text-align: left !important;
        padding-left: 20px !important;
        font-weight: 700 !important;
        color: #4e73df;
        width: 40%;
    }

            .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 !important;
        font-weight: 600;
        position: sticky !important;
        left: 0 !important;
        z-index: 50 !important;
        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);
    }

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

    .metric-name {
        background-color: #fff !important;
        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);
    }

    .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: 100px !important;
        width: 100px !important;
        box-shadow: 2px 0 4px rgba(0,0,0,0.1);
    }

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

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

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

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

    #tableHeader th {
        background: #46bdc6 !important;
        color: black !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;
    }

    .month-cell {
        min-width: 85px !important;
        width: 85px !important;
    }
</style>