@extends('admin.layout.app')

@section('title', $pageTitle . ' | LVT ')

@section('content')
    <div class="container-fluid {{ Auth::check() && Auth::user()->is_layout_two == 1 ? 'mt-2 p-0' : '' }}">
        <div class="row">
            <div class="col-12">
                <div class="control-panel">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <select class="form-select" id="appSelect" name="appSelect">
                                <option value="">Chọn app</option>
                                @foreach ($apps as $index => $app)
                                    <option value="{{ $app->id }}" {{ $index === 0 ? 'selected' : '' }}>
                                        {{ $app->app_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <input type="text" class="form-control" id="daterange" name="daterange">
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button class="btn btn-primary w-50" onclick="updateTable()">
                                <i class="fas fa-search"></i> Tìm kiếm
                            </button>
                        </div>
                        <div class="col-md-2">
                            <button type="button" class="btn btn-primary btn-user" id="btnFetchData">&#43; Lấy dữ liệu
                            </button>
                        </div>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-bordered table-hover mb-0">
                        <thead id="tableHead">

                        </thead>
                        <tbody id="tableBody">

                        </tbody>
                    </table>
                </div>


                {{-- <div class="mt-3 d-md-none">
                    <div class="alert alert-info">
                        <small><i class="fas fa-info-circle"></i> Swipe horizontally to view all columns. Click column
                            headers to sort.</small>
                    </div>
                </div> --}}
            </div>
        </div>
        {{-- google Admob --}}
        {{-- <div class="modal fade" id="selectGoogleModal" tabindex="-1" aria-labelledby="selectGoogleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="selectGoogleModalLabel">
                            <i class="bi bi-google"></i> Chọn tài khoản Google AdMob
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="selectGoogleForm">
                            <div class="mb-2">
                                <label for="googleAccountSelect" class="form-label">
                                    <i class="bi bi-person-circle"></i> Tài khoản Google
                                </label>
                                <select class="form-select" id="googleAccountSelect" required>
                                    <option value="">Chọn tài khoản</option>
                                    @foreach ($admobs as $token)
                                        <option value="{{ $token->id }}" data-client_id="{{ $token->google_client_id }}"
                                            data-client_secret="{{ $token->google_client_secret }}"
                                            data-redirect_uri="{{ $token->google_redirect_uri }}"
                                            data-publisher_id="{{ $token->publisher_id }}"
                                            data-account_email="{{ $token->account_email }}">

                                            {{ $token->admob_name }}
                                            @if (!empty($token->account_email))
                                                - {{ $token->account_email }}
                                            @endif
                                        </option>
                                    @endforeach
                                </select>

                            </div>
                            <div class="mt-1">

                                <input type="text" class="form-control" id="daterangeReport" name="daterangeReport">

                            </div>
                        </form>
                        <div id="googleResponse" class="mt-2"></div>
                    </div>
                    <div class="modal-footer">

                        <button type="button" class="btn btn-primary" id="getAdmobBtn" disabled>
                            <i class="bi bi-download"></i> Lấy dữ liệu
                        </button>
                        <button type="button" class="btn btn-primary" id="btnAdmobLogin" disabled>
                            <i class="bi bi-download"></i> Đăng nhập
                        </button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            <i class="bi bi-x-circle"></i> Hủy
                        </button>
                    </div>
                </div>
            </div>
        </div> --}}
        <div id="loadingOverlay">
            <div class="loader loader--style2" title="1">
                <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px"
                    viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
                    <path fill="#000"
                        d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
                        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25"
                            to="360 25 25" dur="0.6s" repeatCount="indefinite" />
                    </path>
                </svg>
                <p> Mất vài phút để lấy dữ liệu! </p>
            </div>
        </div>

    </div>
@endsection
@push('styles')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.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.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $('#appSelect').select2({
            placeholder: "Chọn ứng dụng...",
            allowClear: true,
            width: '100%',
            tags: true, // cho phép nhập text mới nếu muốn
            tokenSeparators: [',', ' ']
        });
        $('#daterange,#daterangeReport').daterangepicker({
            startDate: moment().startOf('month'), // ngày đầu tháng
            endDate: moment(),
            locale: {
                format: 'YYYY-MM-DD'
            },
            ranges: {
                'Hôm nay': [moment(), moment()],
                'Hôm qua': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                '7 ngày qua': [moment().subtract(6, 'days'), moment()],
                '30 ngày qua': [moment().subtract(29, 'days'), moment()],
                'Tháng này': [moment().startOf('month'), moment().endOf('month')],
                'Tháng trước': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf(
                    'month')]
            }

        });
        // Lưu khoảng date hiện tại ra biến toàn cục
        let startDate = moment().startOf('month').format('YYYY-MM-DD');
        let endDate = moment().format('YYYY-MM-DD');

        // Khi người dùng chọn ngày
        $('#daterange').on('apply.daterangepicker', function(ev, picker) {
            startDate = picker.startDate.format('YYYY-MM-DD');
            endDate = picker.endDate.format('YYYY-MM-DD');


        });
        // Lưu khoảng date hiện tại ra biến toàn cục
        let startDateReport = moment().startOf('month').format('YYYY-MM-DD');
        let endDateReport = moment().format('YYYY-MM-DD');

        // Khi người dùng chọn ngày
        $('#daterangeReport').on('apply.daterangepicker', function(ev, picker) {
            startDateReport = picker.startDate.format('YYYY-MM-DD');
            endDateReport = picker.endDate.format('YYYY-MM-DD');


        });

        function showToast(icon, title, message, time = 4000, delay = 0) {
            setTimeout(() => {
                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: icon,
                    title: title,
                    html: message,
                    showConfirmButton: false,
                    timer: time,
                    timerProgressBar: true
                });
            }, delay);
        }
        $("#btnFetchData").on("click", function() {
            $.ajax({
                url: "{{ route('admob.google.country') }}", // 🔥 thay URL API của bạn
                type: "GET",
                beforeSend: function() {
                    $("#loadingOverlay").fadeIn(); // 🔥 Hiện loading
                },
                success: function(res) {
                    let delay = 0;

                    if (res.google_errors && res.google_errors.length > 0) {
                        showToast('error', 'Lỗi Google Ads', res.google_errors.join('<br>'), 5000,
                            delay);
                        delay += 5500;
                    }

                    if (res.admob_errors && res.admob_errors.length > 0) {
                        showToast('error', 'Lỗi AdMob', res.admob_errors.join('<br>'), 5000, delay);
                        delay += 5500;
                    }

                    if (res.success) {
                        showToast('success', 'Thành công', res.message, 3000, delay);
                        delay += 3500;

                        // reload sau khi hiện xong toast cuối
                        // setTimeout(() => location.reload(), delay);
                    }
                },
                error: function(xhr) {
                    console.error("❌ Lỗi:", xhr.responseText);
                },
                complete: function() {
                    $("#loadingOverlay").fadeOut(); // 🔥 Ẩn loading
                }
            });
        });
        document.addEventListener('DOMContentLoaded', function() {
            const googleAccountSelect = document.getElementById('googleAccountSelect');
            const getAdmobBtn = document.getElementById('getAdmobBtn');
            const btnAdmobLogin = document.getElementById('btnAdmobLogin');
            const googleResponse = document.getElementById('googleResponse');

            if (googleAccountSelect) {
                googleAccountSelect.addEventListener('change', function() {
                    getAdmobBtn.disabled = !googleAccountSelect.value;
                    btnAdmobLogin.disabled = !googleAccountSelect.value;
                });
            }
            if (btnAdmobLogin) {
                btnAdmobLogin.addEventListener('click', function() {
                    if (!googleAccountSelect.value) return;
                    btnAdmobLogin.disabled = true;
                    googleResponse.innerHTML = '';
                    const selectedOption = googleAccountSelect.options[googleAccountSelect.selectedIndex];
                    // Nếu bạn render các data-* attribute trong option thì lấy như sau:
                    const client_id = selectedOption.getAttribute('data-client_id');
                    const client_secret = selectedOption.getAttribute('data-client_secret');
                    const redirect_uri = selectedOption.getAttribute('data-redirect_uri');
                    const publisher_id = selectedOption.getAttribute('data-publisher_id');
                    const account_email = selectedOption.getAttribute('data-account_email');
                    $.ajax({
                        url: "{{ route('admob.login') }}",
                        type: "GET",
                        data: {
                            token_id: googleAccountSelect.value,
                            client_id: client_id,
                            client_secret: client_secret,
                            redirect_uri: redirect_uri,
                            publisher_id: publisher_id,
                            account_email: account_email,
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(res) {
                            if (res.success === 'success') {
                                Swal.fire('Thành công', res.message, 'success').then(
                                    () => {
                                        location.reload();
                                    });
                            }
                            if (res.auth_url) {
                                window.location.href = res
                                    .auth_url; // Chuyển hướng sang Google OAuth
                            }
                        },
                        error: function(xhr) {
                            googleResponse.innerHTML = '<div class="alert alert-danger">' + (xhr
                                .responseJSON?.message || 'Có lỗi xảy ra!') + '</div>';
                        },
                        complete: function() {
                            getAdmobBtn.innerHTML =
                                '<i class="bi bi-download"></i> Lấy dữ liệu';
                            getAdmobBtn.disabled = false;
                        }
                    });
                });
            };
            if (getAdmobBtn) {
                getAdmobBtn.addEventListener('click', function() {
                    if (!googleAccountSelect.value) return;
                    getAdmobBtn.innerHTML =
                        '<span class="spinner-border spinner-border-sm me-2"></span>Đang lấy dữ liệu...';
                    getAdmobBtn.disabled = true;
                    googleResponse.innerHTML = '';
                    // Lấy thông tin từ option được chọn
                    const selectedOption = googleAccountSelect.options[googleAccountSelect.selectedIndex];
                    // Nếu bạn render các data-* attribute trong option thì lấy như sau:
                    const client_id = selectedOption.getAttribute('data-client_id');
                    const client_secret = selectedOption.getAttribute('data-client_secret');
                    const redirect_uri = selectedOption.getAttribute('data-redirect_uri');
                    const publisher_id = selectedOption.getAttribute('data-publisher_id');
                    const account_email = selectedOption.getAttribute('data-account_email');
                    // Gửi AJAX lấy dữ liệu AdMob
                    $.ajax({
                        url: "{{ route('admob.google.country') }}",
                        type: "GET",
                        data: {
                            token_id: googleAccountSelect.value,
                            client_id: client_id,
                            client_secret: client_secret,
                            redirect_uri: redirect_uri,
                            publisher_id: publisher_id,
                            account_email: account_email,
                            startDate: startDateReport,
                            endDate: endDateReport,
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(res) {
                            if (res.success === 'success') {
                                Swal.fire('Thành công', res.message, 'success').then(
                                    () => {
                                        location.reload();
                                    });
                            }
                            if (res.auth_url) {
                                window.location.href = res
                                    .auth_url; // Chuyển hướng sang Google OAuth
                            }
                        },
                        error: function(xhr) {
                            googleResponse.innerHTML = '<div class="alert alert-danger">' + (xhr
                                .responseJSON?.message || 'Có lỗi xảy ra!') + '</div>';
                        },
                        complete: function() {
                            getAdmobBtn.innerHTML =
                                '<i class="bi bi-download"></i> Lấy dữ liệu';
                            getAdmobBtn.disabled = false;
                        }
                    });
                });
            }
        });
        const countries = [
            'United States of America',
            'United Kingdom',
            'Germany',
            'France',
            'Canada',
            'Brazil',
            'Italy',
            'Mexico',
            'Netherlands',
            'Australia',
            'Spain',
            'South Korea',
            'Belgium',
            'Poland',
            'Austria',
            'Romania',
            'Turkey',
            'Switzerland',
            'New Zealand',
            'Ireland',
            'Czechia',
            'Hungary',
            'Japan',
            'Slovakia',
            'Portugal',
            'Greece',
            'Sweden',
            'Croatia',
            'Philippines',
            'South Africa',
            'Azerbaijan',
            'Puerto Rico',
            'Israel',
            'Chile',
            'Argentina'

        ];

        let currentData = [];
        let sortColumn = null;
        let sortDirection = 'asc';

        function generateSampleData(startDate, endDate) {
            const data = [];
            const start = new Date(startDate);
            const end = new Date(endDate);
            const dates = [];

            // Generate date range
            for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
                dates.push(new Date(d));
            }

            countries.forEach(country => {
                const countryData = {
                    country
                };
                let totalAdmob = 0,
                    totalAds = 0,
                    totalIns = 0,
                    totalCostins = 0,
                    totalRoas = 0,
                    totalR = 0;

                dates.forEach(date => {
                    const dateStr = date.toLocaleDateString('en-GB');
                    const admob = Math.floor(Math.random() * 1000) + 100;
                    const ads = Math.floor(Math.random() * 800) + 50;
                    const ins = Math.floor(Math.random() * 600) + 25;
                    const costins = Math.floor(Math.random() * 500) + 10;
                    const r = Math.floor(Math.random() * 300) + 5;
                    const roas = parseFloat((Math.random() * 5 + 0.5).toFixed(2));

                    totalAdmob += admob;
                    totalAds += ads;
                    totalIns += ins;
                    totalCostins += costins;
                    totalRoas += roas;
                    totalR += r;

                    countryData[dateStr] = {
                        admob,
                        ads,
                        ins,
                        costins,
                        roas,
                        r
                    };
                });

                countryData.sumSection = {
                    admob: totalAdmob,
                    ads: totalAds,
                    ins: totalIns,
                    costins: totalCostins,
                    roas: (totalRoas / dates.length).toFixed(2), // Average ROAS
                    r: totalR
                };

                data.push(countryData);
            });

            return {
                data,
                dates
            };
        }

        function generateTableHeader(dates) {
            const tableHead = document.getElementById('tableHead');
            tableHead.innerHTML = '';

            // Main header row
            const mainHeaderRow = document.createElement('tr');
            mainHeaderRow.className = 'table-header';

            const countryHeader = document.createElement('th');
            countryHeader.rowSpan = 2;
            countryHeader.className = 'country-cell';
            countryHeader.textContent = 'Country';
            mainHeaderRow.appendChild(countryHeader);

            const sumSectionHeader = document.createElement('th');
            sumSectionHeader.colSpan = 6;
            sumSectionHeader.className = 'text-center sum-section-header';
            sumSectionHeader.textContent = 'SUM';
            mainHeaderRow.appendChild(sumSectionHeader);

            dates.forEach(date => {
                const dateHeader = document.createElement('th');
                dateHeader.colSpan = 6;
                dateHeader.className = 'text-center';
                dateHeader.textContent = date; // giữ nguyên YYYY-MM-DD
                mainHeaderRow.appendChild(dateHeader);
            });

            tableHead.appendChild(mainHeaderRow);

            // Sub header row
            const subHeaderRow = document.createElement('tr');
            subHeaderRow.className = 'table-subheader';

            ['Admob', 'Ads', 'Ins', 'CostIns', 'Roas %', 'R'].forEach((col, colIndex) => {
                const th = document.createElement('th');
                th.className = 'data-cell sum-section-header';
                th.classList.add('sortable');

                const metricName = col.toLowerCase().replace(' %', '').replace('costins', 'costins');
                th.onclick = () => sortTable(`sum_${metricName}`);
                th.innerHTML = `${col} <i class="fas fa-sort sort-icon"></i>`;

                subHeaderRow.appendChild(th);
            });

            dates.forEach((dateStr, dateIndex) => {
                ['Admob', 'Ads', 'Ins', 'CostIns', 'Roas %', 'R'].forEach((col, colIndex) => {
                    const th = document.createElement('th');
                    th.className = 'data-cell';

                    if (colIndex === 3) th.classList.add('sum-column');
                    if (colIndex === 4) th.classList.add('roas-column');

                    th.classList.add('sortable');

                    const metricName = col.toLowerCase().replace(' %', '').replace('costins', 'costins');
                    th.onclick = () => sortTable(`${dateStr}_${metricName}`); // 🔥 dùng dateStr trực tiếp
                    th.innerHTML = `${col} <i class="fas fa-sort sort-icon"></i>`;

                    subHeaderRow.appendChild(th);
                });
            });

            tableHead.appendChild(subHeaderRow);
        }

        function generateTableData(data, dates) {
            const tableBody = document.getElementById('tableBody');
            tableBody.innerHTML = '';

            // Nếu data rỗng, hiển thị thông báo
            if (!data || data.length === 0) {
                const tr = document.createElement('tr');
                const td = document.createElement('td');
                td.colSpan = 2 + 6 + dates.length *
                    6; // tổng số cột = 2 (country + sum-section) + sum-section + ngày * 6 metrics
                td.style.textAlign = 'center';
                td.textContent = 'Không có dữ liệu';
                tr.appendChild(td);
                tableBody.appendChild(tr);
                return; // thoát hàm
            }

            data.forEach((countryData, index) => {
                const row = document.createElement('tr');
                row.className = index % 2 === 0 ? 'table-light' : '';

                // Country cell
                const countryCell = document.createElement('td');
                countryCell.className = 'country-cell';
                countryCell.textContent = countryData.country;
                row.appendChild(countryCell);

                ['admob', 'ads', 'ins', 'costins', 'roas', 'r'].forEach((metric, colIndex) => {
                    const cell = document.createElement('td');
                    cell.className = 'data-cell sum-section-cell';
                    cell.textContent = countryData.sumSection[metric];
                    cell.setAttribute('data-sort-key', `sum_${metric}`);
                    row.appendChild(cell);
                });

                // Data cells for each date
                dates.forEach(dateStr => {
                    const dayData = countryData[dateStr];
                    if (!dayData) return; // tránh crash

                    ['admob', 'ads', 'ins', 'costins', 'roas', 'r'].forEach(metric => {
                        const cell = document.createElement('td');
                        cell.className = 'data-cell';
                        if (metric === 'r') cell.classList.add('r-column');
                        cell.textContent = dayData[metric] ?? 0;
                        cell.setAttribute('data-sort-key', `${dateStr}_${metric}`);
                        row.appendChild(cell);
                    });
                });

                tableBody.appendChild(row);
            });
        }

        // Sort table function
        function sortTable(column) {
            if (sortColumn === column) {
                sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
            } else {
                sortColumn = column;
                sortDirection = 'asc';
            }

            if (column.startsWith('sum_')) {
                const metric = column.replace('sum_', '');
                currentData.data.sort((a, b) => {
                    const aVal = parseFloat(a.sumSection[metric]);
                    const bVal = parseFloat(b.sumSection[metric]);

                    if (sortDirection === 'asc') {
                        return aVal - bVal;
                    } else {
                        return bVal - aVal;
                    }
                });
            } else {
                const [dateStr, metric] = column.split('_');
                currentData.data.sort((a, b) => {
                    const aVal = parseFloat(a[dateStr][metric]);
                    const bVal = parseFloat(b[dateStr][metric]);

                    if (sortDirection === 'asc') {
                        return aVal - bVal;
                    } else {
                        return bVal - aVal;
                    }
                });
            }

            // Update sort icons
            document.querySelectorAll('.sort-icon').forEach(icon => {
                icon.className = 'fas fa-sort sort-icon';
            });

            const activeIcon = document.querySelector(`[onclick="sortTable('${column}')"] .sort-icon`);
            if (activeIcon) {
                activeIcon.className = `fas fa-sort-${sortDirection === 'asc' ? 'up' : 'down'} sort-icon active`;
            }

            generateTableData(currentData.data, currentData.dates);
        }

        // Update table based on selections
        function updateTable() {
            const selectedApp = $('#appSelect').val();

            if (!startDate || !endDate) {
                alert('Please select both start and end dates');
                return;
            }

            if (new Date(startDate) > new Date(endDate)) {
                alert('Start date must be before end date');
                return;
            }

            $.ajax({
                url: '{{ route('admob.google.sampleCountryReport') }}',
                method: 'GET',
                data: {
                    start_date: startDate,
                    end_date: endDate,
                    app_id: selectedApp
                },
                dataType: 'json',
                success: function(json) {
                    console.log(json);

                    currentData = json; // { data: [...], dates: [...] }
                    // convert chuỗi date sang Date object để render header
                    const dates = currentData.dates;

                    generateTableHeader(dates);
                    generateTableData(currentData.data, dates);

                    // Reset sort
                    sortColumn = null;
                    sortDirection = 'asc';
                },
                error: function(xhr, status, error) {
                    console.error("Error fetching data:", error);
                    alert("Không load được dữ liệu!");
                }
            });
        }

        // Initialize table when page loads
        document.addEventListener('DOMContentLoaded', function() {
            updateTable();

            // Add smooth scrolling for mobile
            const tableContainer = document.querySelector('.table-responsive');
            let isScrolling = false;

            tableContainer.addEventListener('scroll', function() {
                if (!isScrolling) {
                    window.requestAnimationFrame(function() {
                        isScrolling = false;
                    });
                    isScrolling = true;
                }
            });
        });
    </script>
@endpush
<style scoped>
    .bg-red {
        background: red;
    }

    .loader {
        margin: 0 0 2em;
        height: 100px;
        width: 20%;
        text-align: center;
        padding: 1em;
        margin: 0 auto 1em;
        vertical-align: top;
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    svg path,
    svg rect {
        fill: #FF6700;
    }

    #loadingOverlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.8);
        display: none;
        /* Ẩn mặc định */
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }

    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-header {
        background: #3B82F6;
        color: white;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .table-subheader {
        background-color: #3B82F6;
        color: white;
        font-size: 0.875rem;
    }

    .table>:not(caption)>*>* {
        background-color: transparent !important;
    }

    .country-cell {
        text-align: start;
        vertical-align: middle;
        background-color: #e3f2fd;
        font-weight: 500;
        min-width: 150px;
        position: sticky;
        left: 0;
        z-index: 5;
    }

    .data-cell {
        text-align: center;
        min-width: 60px;
        font-size: 0.875rem;
    }

    .sum-column {
        background-color: #fff3cd;
        font-weight: bold;
    }

    .roas-column {
        background-color: #f8d7da;
    }


    .date-header {
        background-color: #d4edda;
        font-weight: bold;
        text-align: center;
    }

    /* Added styles for the new SUM section */
    .sum-section-header {
        background-color: #fd7e14;
        color: white;
        font-weight: bold;
    }

    .sum-section-cell {
        background-color: #fff3cd;
        font-weight: bold;
        border-right: 3px solid #fd7e14;
    }

    /* Added sortable column styles */
    .sortable {
        cursor: pointer;
        user-select: none;
        position: relative;
    }

    .sortable:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .sort-icon {
        margin-left: 5px;
        opacity: 0.5;
    }

    .sort-icon.active {
        opacity: 1;
    }

    /* Added control panel styles */
    .control-panel {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
        padding: 20px;
    }

    .table> :not(caption)>*>*.r-column {
        background-color: #fff176 !important;
    }

    @media (max-width: 768px) {
        .table {
            font-size: 0.75rem;
        }

        .country-cell {
            min-width: 120px;
        }

        .data-cell {
            min-width: 50px;
        }

        .control-panel {
            padding: 15px;
        }
    }

    .table-responsive {
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
</style>