@extends('admin.layout.app')

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

@section('content')
    @php
        $autoFilterSubmit = Auth::check() && Auth::user()->filter_auto_submit;
    @endphp
    <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  flex-wrap justify-content-between align-items-center gap-2">
                <h6 class="m-0 font-weight-bold text-primary ">Danh sách daily theo tháng</h6>
                <div class="d-flex align-items-center gap-3 d-flex  flex-wrap">
                    <div class="flex-fill">
                        <label for="google-ads-last-update" class="form-label text-muted mb-1 small">
                            Google Ads cập nhật
                        </label>
                        <input type="datetime-local" id="google-ads-last-update"
                            class="form-control form-control-sm shadow-sm rounded-3" disabled placeholder="Chưa cập nhật">
                    </div>

                    <div class="flex-fill">
                        <label for="google-admob-last-update" class="form-label text-muted mb-1 small">
                            Google AdMob cập nhật
                        </label>
                        <input type="datetime-local" id="google-admob-last-update"
                            class="form-control form-control-sm shadow-sm rounded-3" disabled placeholder="Chưa cập nhật">
                    </div>
                </div>

            </div>
            <div class="card-body">
                @can('view-report')
                    @include('components.dashboard-filters', [
                        'dashboard' => 'daily_month',
                        'action' => route('daily.index_month'),
                        'data' => [
                            'apps' => $apps,
                            'users' => $users ?? []
                        ],
                        'slot' => (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>' : '')
                    ])
                @else
                    <div class="filter-section">
                        <div class="row align-items-center">
                            <form method="GET" action="{{ route('daily.index_month') }}"
                                class="d-flex align-items-center flex-wrap gap-2">
                                @csrf
                                <div class="col-auto">
                                    <select name="month" class="form-select form-select-sm" style="width: 150px;">
                                        @for ($i = 1; $i <= 12; $i++)
                                            <option value="{{ $i }}" {{ $i == $month ? 'selected' : '' }}>
                                                Tháng {{ $i }}
                                            </option>
                                        @endfor
                                    </select>
                                </div>
                                <div class="col-auto">
                                    <input type="number" class="form-control form-control-sm" name="year"
                                        style="width: 79px;" value="{{ $year ?? now()->year }}" min="2020" max="2030">
                                </div>
                                <div class="col-auto">
                                    <button type="submit" class="btn btn-primary btn-sm">Lọc</button>
                                    <button type="button" class="btn btn-secondary btn-sm ms-2" onclick="resetFilter()">Reset</button>
                                </div>
                            </form>
                        </div>
                    </div>
                @endcan
                @can('view-report')
                    <!-- Table Container -->
                    <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>
                                    <!-- Date columns will be inserted here -->
                                </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>
                        </tbody>

                    </table>
                @endcan
                @cannot('view-report')
                    <div class="row">
                        <div class="col-12 col-lg-12 col-xl-12">
                            <div class="card-header bg-light">
                                <h5 class="card-title mb-0">LVT Global</h5>
                            </div>
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table table-hover mb-0">
                                        <thead class="table-light">
                                            <tr>
                                                <th scope="col" style="width: 200px;">Chỉ số</th>
                                                <th scope="col" class="text-end">Tổng</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td class="fw-medium">Doanh thu</td>
                                                <td class="text-end table-value">{{ format_currency($totalRevenue, '') }}</td>
                                            </tr>
                                            <tr>
                                                <td class="fw-medium">Chi phí</td>
                                                <td class="text-end table-value">{{ format_currency($totalCost, '') }}</td>
                                            </tr>
                                            <tr>
                                                <td class="fw-medium">Lợi nhuận</td>
                                                <td class="text-end table-value profit-value">
                                                    {{ format_currency($profit, '') }}</td>
                                            </tr>
                                            <tr>
                                                <td class="fw-medium">Lợi nhuận (%)</td>
                                                <td class="text-end table-value profit-value">
                                                    {{ format_currency($profitPercent, '') }}%</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>
                    </div>
                @endcannot
            </div>
        </div>

    </div>
@endsection
@push('styles')
    <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.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <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>
@endpush
@push('scripts')
    <script>
        $(document).ready(function() {
            const autoSubmitEnabled = {{ $autoFilterSubmit ? 'true' : 'false' }};
            const appsSelect = $('#multiple-select-field');
            const usersSelect = $('#multiple-select-field-user');
            
            if (!autoSubmitEnabled && appsSelect.length) {
                appsSelect.select2({
                    width: '100%',
                    placeholder: appsSelect.data('placeholder'),
                    closeOnSelect: false,
                });
            }
            
            if (!autoSubmitEnabled && usersSelect.length) {
                usersSelect.select2({
                    width: '100%',
                    placeholder: usersSelect.data('placeholder'),
                    closeOnSelect: false,
                });
            }

            if (autoSubmitEnabled) {
                $('#monthSelect, #yearInput').on('change', filterByMonth);

                if (appsSelect.length) {
                    appsSelect.on('change select2:select select2:unselect select2:clear', filterByMonth);
                }
                if (usersSelect.length) {
                    usersSelect.on('change select2:select select2:unselect select2:clear', filterByMonth);
                }
            }
        });
    </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('admob-reports');
        channel.bind('AdmobReportFinished', function(data) {

            const selectedMonth = parseInt(document.getElementById('monthSelect').value);
            const selectedYear = parseInt(document.getElementById('yearInput').value);
            const selectField = document.getElementById('multiple-select-field');
            const selectUser = document.getElementById('multiple-select-field-user');
            const selectedApps = selectField ?
                Array.from(selectField.selectedOptions).map(option => option.value) : [];

            const selectedUsers = selectUser ?
                Array.from(selectUser.selectedOptions).map(option => option.value) : [];

            if (!selectedMonth || !selectedYear) {
                alert('Vui lòng chọn tháng và năm');
                return;
            }
            // Redirect kèm query string
            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);
            });

            $.ajax({
                url: '{{ route('daily.index_month') }}',
                type: 'GET',
                dataType: 'json',
                data: {
                    month: selectedMonth,
                    year: selectedYear,
                    apps: selectedApps,
                    users: selectedUsers
                },
                success: function(json) {
                    // Cập nhật products và currentDates
                    products = json.products;

                    console.log('Event Google Admob nhận được:', json.products.length > 0);
                    if (json.products.length > 0) {
                        console.log('cập nhật admob');
                        // Lấy thông tin cập nhật cuối cùng
                        fetchUpdateTrackingStatus();
                    }
                    currentDates = generateDatesInMonth(selectedYear, selectedMonth);
                    // Render lại table
                    renderTable(products);
                },
                error: function(xhr, status, error) {
                    console.error('Lỗi fetch dữ liệu:', error);
                }
            });
        });
        // Channel cho Google Ads
        var googleAdsChannel = pusher.subscribe('google-ads-reports');
        googleAdsChannel.bind('GoogleAdsReportFinished', function(data) {
            // alert("Google Ads: " + data.message);
            console.log('Event Google Ads nhận được:', data.message);
            if (data.message === 'success') {
                console.log('cập nhật ads');
                // Lấy thông tin cập nhật cuối cùng
                fetchUpdateTrackingStatus();
            }

        });

        $(document).ready(function() {

            const selectedMonth = parseInt(document.getElementById('monthSelect').value);
            const selectedYear = parseInt(document.getElementById('yearInput').value);
            const selectField = document.getElementById('multiple-select-field');
            const selectUser = document.getElementById('multiple-select-field-user');
            const selectedApps = selectField ?
                Array.from(selectField.selectedOptions).map(option => option.value) : [];

            const selectedUsers = selectUser ?
                Array.from(selectUser.selectedOptions).map(option => option.value) : [];

            if (!selectedMonth || !selectedYear) {
                alert('Vui lòng chọn tháng và năm');
                return;
            }
            // Redirect kèm query string
            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);
            });
            $.ajax({
                url: '{{ route('daily.index_month') }}',
                type: 'GET',
                dataType: 'json',
                data: {
                    month: selectedMonth,
                    year: selectedYear,
                    apps: selectedApps,
                    users: selectedUsers
                },
                success: function(json) {
                    // Cập nhật products và currentDates
                    // console.log(json);

                    products = json.products;

                    currentDates = generateDatesInMonth(selectedYear, selectedMonth);
                    // Render lại table
                    renderTable(products);
                },
                error: function(xhr, status, error) {
                    console.error('Lỗi fetch dữ liệu:', error);
                }
            });
        });
        let currentDates = []; // sẽ lưu ngày hiển thị hiện tại

        function generateDatesInMonth(year, month) {
            const dates = [];
            const daysInMonth = new Date(year, month, 0).getDate();

            for (let day = 1; day <= daysInMonth; day++) {
                const monthStr = month.toString().padStart(2, '0');
                const dayStr = day.toString().padStart(2, '0');
                const dateStr = `${monthStr}/${dayStr}`;
                dates.push(dateStr);
            }

            return dates;
        }

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

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

            // Add new date columns
            currentDates.forEach(date => {
                const th = document.createElement('th');
                th.textContent = date;
                header.appendChild(th);
            });

            // Clear body
            body.innerHTML = '';

            addGrandTotalRow(body);
            if (!Array.isArray(products) || products.length === 0) {
                return;
            }
            // 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');
                    // row.style.border = '2px solid #000';
                    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;

                    // Calculate total only from current dates
                    if (metric !== 'Lợi nhuận (%)') {
                        currentDates.forEach(date => {
                            const value = product.data[metric].values[date];
                            if (value !== undefined && value !== null) {
                                totalValue += value;
                            }
                        });
                    } else {
                        // For profit percentage, calculate from revenue and profit totals
                        let revenueTotal = 0;
                        let profitTotal = 0;
                        currentDates.forEach(date => {
                            const revenueValue = product.data['Doanh thu'].values[date];
                            const profitValue = product.data['Lợi nhuận'].values[date];
                            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) + '%' : Math
                        .round(totalValue).toLocaleString('en-US'));


                    totalCell.className = 'total-column';
                    if( metric === "Lợi nhuận (%)"){
                        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);

                    // Date columns
                    currentDates.forEach(date => {
                        const cell = document.createElement('td');
                        const value = product.data[metric].values[date];

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

                            // Highlight từng cell dựa trên giá trị
                            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 (value > 0) {
                                cell.style.backgroundColor = 'rgb(46 233 91)'; // xanh nhạt
                                cell.style.fontWeight = '500';
                            } else if (value < 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 (%)'];

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

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

                // Sum up all products for current dates only
                products.forEach(product => {
                    if (metric !== 'Lợi nhuận (%)') {
                        // Calculate total only from current visible dates
                        let productTotal = 0;
                        currentDates.forEach(date => {
                            const value = product.data[metric].values[date];
                            if (value !== undefined && value !== null) {
                                grandTotals[metric].values[date] += 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;

            // Calculate profit percentage for each date
            currentDates.forEach(date => {
                const dateRevenue = grandTotals['Doanh thu'].values[date];
                const dateProfit = grandTotals['Lợi nhuận'].values[date];
                const dateCost = grandTotals['Chi phí'].values[date];
                grandTotals['Lợi nhuận (%)'].values[date] = dateCost !== 0 ? ((dateRevenue - dateCost) / dateCost *
                    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;


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

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

                // Date columns
                currentDates.forEach(date => {
                    const cell = document.createElement('td');
                    const value = grandTotals[metric].values[date];

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

            // 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);
            // console.log(`Comparing ${metric}: Laravel=${laravelVal}, JS=${jsVal}`);

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



        function filterByMonth() {
            const selectedMonth = parseInt(document.getElementById('monthSelect').value);
            const selectedYear = parseInt(document.getElementById('yearInput').value);
            
            const selectField = document.getElementById('multiple-select-field');
            const selectUser = document.getElementById('multiple-select-field-user');
            
            const selectedApps = selectField ?
                Array.from(selectField.selectedOptions).map(option => option.value) : [];
            const selectedUsers = selectUser ?
                Array.from(selectUser.selectedOptions).map(option => option.value) : [];

            if (!selectedMonth || !selectedYear) {
                alert('Vui lòng chọn tháng và năm');
                return;
            }
            // Redirect kèm query string
            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);
            });
            // Redirect (GET request)
            window.location.href = `{{ route('daily.index_month') }}?${params.toString()}`;
            // currentDates = generateDatesInMonth(selectedYear, selectedMonth);
            // renderTable();
        }

        function resetFilter() {
            const now = new Date();
            const currentMonth = now.getMonth() + 1; // JS trả 0-11
            const currentYear = now.getFullYear();

            document.getElementById('monthSelect').value = currentMonth;
            document.getElementById('yearInput').value = currentYear;
            
            const multipleSelect = document.getElementById('multiple-select-field');
            if (multipleSelect) {
                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 = '';
                    $(multipleSelect).trigger('change');
                }
            }
            
            const multipleSelectuser = document.getElementById('multiple-select-field-user');
            if (multipleSelectuser) {
                if ($(multipleSelectuser).hasClass('select2-hidden-accessible')) {
                    $(multipleSelectuser).val(null).trigger('change');
                } else if (multipleSelectuser.multiple) {
                    Array.from(multipleSelectuser.options).forEach(option => option.selected = false);
                } else {
                    multipleSelectuser.value = '';
                    $(multipleSelectuser).trigger('change');
                }
            }
            
            // 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_month') }}?${params.toString()}`;
            // currentDates = generateDatesInMonth(currentYear, currentMonth);
            // renderTable();
        }


        const selectedMonth = parseInt(document.getElementById('monthSelect').value);
        const selectedYear = parseInt(document.getElementById('yearInput').value);

        currentDates = generateDatesInMonth(selectedYear, selectedMonth);
        renderTable();

        // Load thông tin cập nhật khi trang load
        fetchUpdateTrackingStatus();

        // Function để lấy thông tin cập nhật cuối cùng
        function fetchUpdateTrackingStatus() {
            $.ajax({
                url: '/admin/update-tracking/status',
                method: 'GET',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    // console.log('Update tracking status:', response);
                    displayUpdateStatus(response);
                },
                error: function(xhr, status, error) {
                    console.error('Lỗi khi lấy thông tin cập nhật:', error);
                    console.error('Response:', xhr.responseText);
                }
            });
        }

        // Function để hiển thị thông tin cập nhật
        function displayUpdateStatus(data) {
            // Format thời gian cho input datetime-local
            function formatDateTimeForInput(dateTime) {
                if (!dateTime) return '';
                const date = new Date(dateTime);
                // Format: YYYY-MM-DDTHH:MM
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');
                const hours = String(date.getHours()).padStart(2, '0');
                const minutes = String(date.getMinutes()).padStart(2, '0');
                return `${year}-${month}-${day}T${hours}:${minutes}`;
            }

            // Format thời gian cho hiển thị
            function formatDateTimeForDisplay(dateTime) {
                if (!dateTime) return 'Chưa cập nhật';
                const date = new Date(dateTime);
                return date.toLocaleString('vi-VN', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit'
                });
            }

            // Cập nhật Google Ads input
            const googleAdsInput = document.getElementById('google-ads-last-update');
            if (googleAdsInput) {
                googleAdsInput.value = formatDateTimeForInput(data.google_ads_last_update);
                googleAdsInput.placeholder = formatDateTimeForDisplay(data.google_ads_last_update);

                // // Thêm màu sắc dựa trên trạng thái
                // if (data.google_ads_last_update) {
                //     googleAdsInput.style.borderColor = data.google_ads_needs_update ? '#ffc107' : '#28a745';
                //     googleAdsInput.style.backgroundColor = data.google_ads_needs_update ? '#fff3cd' : '#d4edda';
                // } else {
                //     googleAdsInput.style.borderColor = '#dc3545';
                //     googleAdsInput.style.backgroundColor = '#f8d7da';
                // }
            }

            // Cập nhật Google AdMob input
            const admobInput = document.getElementById('google-admob-last-update');
            if (admobInput) {
                admobInput.value = formatDateTimeForInput(data.google_admob_last_update);
                admobInput.placeholder = formatDateTimeForDisplay(data.google_admob_last_update);

                // Thêm màu sắc dựa trên trạng thái
                // if (data.google_admob_last_update) {
                //     admobInput.style.borderColor = data.google_admob_needs_update ? '#ffc107' : '#28a745';
                //     admobInput.style.backgroundColor = data.google_admob_needs_update ? '#fff3cd' : '#d4edda';
                // } else {
                //     admobInput.style.borderColor = '#dc3545';
                //     admobInput.style.backgroundColor = '#f8d7da';
                // }
            }

            // console.log('Đã cập nhật thời gian:', {
            //     google_ads: data.google_ads_last_update,
            //     admob: data.google_admob_last_update
            // });
        }

        // ========== 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 DOM ready
        $(document).ready(function() {
            setTimeout(enhanceTableScroll, 100);
        });
    </script>
@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;
        }
    }

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

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

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

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

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

    .chi_so {
        position: sticky !important;
        left: 120px !important;
        z-index: 50 !important;
        background-color: #f8f9fa !important;
        box-shadow: 2px 0 4px rgba(0,0,0,0.1); /* Shadow bên phải */
    }
    .table>:not(caption)>*>*{
        padding: .3rem !important;
    }
    .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 */
    }

    /* Ensure total column header stays fixed during vertical scroll */
    .total-column-header {
        position: sticky !important;
        left: 220px !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 */
    }

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

    @media(max-width:768px) {
        .table-mobi {
            width: 100% !important;
        }



        .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,
        .chi_so {
            position: static !important;
            left: auto !important;
            z-index: auto !important;
            min-width: auto !important;
            box-shadow: none !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>