@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="col-lg-12 col-md-12 main-content">
            <!-- Header -->


            <!-- Filters -->
            <div class="row py-3 border-bottom">
                <div class="col-12">
                    {{-- <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Group By:</label>
                            <div class="d-flex flex-wrap gap-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="month">
                                    <label class="form-check-label" for="month">Month</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="date">
                                    <label class="form-check-label" for="date">Date</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="app" checked>
                                    <label class="form-check-label" for="app">APP</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="placement">
                                    <label class="form-check-label" for="placement">Placement</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="adunit">
                                    <label class="form-check-label" for="adunit">AD Unit</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="region">
                                    <label class="form-check-label" for="region">Region</label>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-6">
                                    <label class="form-label">Timezone</label>
                                    <select class="form-select">
                                        <option>- Timezone -</option>
                                        <option>UTC</option>
                                        <option>GMT+7</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Date Range</label>
                                    <input type="text" class="form-control" id="daterange"
                                        value="2025-09-03 - 2025-09-25">
                                </div>
                            </div>
                        </div>
                    </div> --}}

                    <!-- Additional Filters -->
                    <div class="row g-3 mt-2">
                        <div class="col-md-2">
                            <select class="form-select">
                                <option>- Traffic Type -</option>
                                <option>Organic</option>
                                <option>Paid</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select class="form-select">
                                <option>- All Platforms -</option>
                                <option>Android</option>
                                <option>iOS</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select class="form-select">
                                <option>- All AD Format -</option>
                                <option>Banner</option>
                                <option>Interstitial</option>
                                <option>Rewarded</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select id="app-select" class="form-control" name="apps[]" multiple="multiple">
                                @foreach ($apps as $app)
                                    <option value="{{ $app->id }}">{{ $app->app_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select class="form-select" id="adunit-select" name="adunit">
                                <option value="">- Đơn vị quảng cáo -</option>
                                @foreach ($adunits as $item)
                                    <option value="{{ $item }}">{{ $item }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="row g-3 mt-2">
                        <div class="col-md-2">
                            <select class="form-select">
                                <option>- Bidding type -</option>
                                <option>RTB</option>
                                <option>Waterfall</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select class="form-select" id="admob_name" name="admob_name">
                                <option value="">- Admob Name -</option>
                                @foreach ($admobs as $item)
                                    <option value="{{ $item->id }}">{{ $item->admob_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">
                            <button type="button" class="btn btn-primary btn-user" data-bs-toggle="modal"
                                data-bs-target="#selectGoogleAdsModal">
                                &#43; Lấy dữ liệu Google Ads
                            </button>
                        </div> --}}
                        <div class="col-md-2">
                            <button type="button" class="btn btn-primary btn-user" data-bs-toggle="modal"
                                data-bs-target="#selectGoogleModal">&#43; Lấy dữ liệu admob</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Data Table -->
            <div class="row">
                <div class="col-12 col-lg-10  p-0 config-col-lg-10">
                    <div id="table-container">
                        <!-- Table sẽ load qua AJAX -->
                        <div class="text-center py-4">Đang tải dữ liệu...</div>
                    </div>
                    <!-- Added pagination controls -->
                </div>
                <div class="col-12 col-lg-2 col-md-3  p-0 config-col-lg-3">
                    <div class="sidebar-section">
                        <h6 class="mb-3">Hiển thị cột</h6>
                        <div class="form-check column-toggle mb-2">
                            <input class="form-check-input" type="checkbox" id="col-app" data-column="app_name" checked>
                            <label class="form-check-label" for="col-app">Ứng dụng</label>
                        </div>
                        <div class="form-check column-toggle mb-2">
                            <input class="form-check-input" type="checkbox" id="col-date" data-column="date">
                            <label class="form-check-label" for="col-date">Ngày</label>
                        </div>
                        <div class="form-check column-toggle mb-2">
                            <input class="form-check-input" type="checkbox" id="col-unit" data-column="unit" checked>
                            <label class="form-check-label" for="col-unit">Đơn vị quảng cáo</label>
                        </div>
                        <div class="form-check column-toggle mb-2">
                            <input class="form-check-input" type="checkbox" id="col-revenue" data-column="revenue" checked>
                            <label class="form-check-label" for="col-revenue">Thu nhập</label>
                        </div>
                        <div class="form-check column-toggle mb-2">
                            <input class="form-check-input" type="checkbox" id="col-ecpm" data-column="ecpm"checked>
                            <label class="form-check-label" for="col-ecpm">eCPM quản lý</label>
                        </div>
                        <div class="form-check column-toggle mb-2">
                            <input class="form-check-input" type="checkbox" id="col-requests" data-column="requests"
                                checked>
                            <label class="form-check-label" for="col-requests">Yêu cầu</label>
                        </div>
                        <div class="form-check column-toggle mb-2">
                            <input class="form-check-input" type="checkbox" id="col-fillrate" data-column="fillrate"
                                checked>
                            <label class="form-check-label" for="col-fillrate">Tỷ lệ có khớp</label>
                        </div>
                        <div class="form-check column-toggle mb-2">
                            <input class="form-check-input" type="checkbox" id="col-impressions"
                                data-column="impressions" checked>
                            <label class="form-check-label" for="col-impressions">Số lần hiển thị</label>
                        </div>
                        <div class="form-check column-toggle mb-2">
                            <input class="form-check-input" type="checkbox" id="col-showrate" data-column="showrate"
                                checked>
                            <label class="form-check-label" for="col-showrate">Tỷ lệ hiển thị</label>
                        </div>
                        <div class="form-check column-toggle mb-2">
                            <input class="form-check-input" type="checkbox" id="col-clicks" data-column="clicks"
                                checked>
                            <label class="form-check-label" for="col-clicks">Số lượt nhấp chuột</label>
                        </div>
                        <div class="form-check column-toggle mb-2">
                            <input class="form-check-input" type="checkbox" id="col-ctr" data-column="ctr" checked>
                            <label class="form-check-label" for="col-ctr">CTR</label>
                        </div>
                        {{-- <div class="form-check column-toggle mb-2">
                            <input class="form-check-input" type="checkbox" id="col-cpc" data-column="cpc" checked>
                            <label class="form-check-label" for="col-cpc">Số lượt nhấp</label>
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>

        {{-- <div class="modal fade" id="selectGoogleAdsModal" tabindex="-1" aria-labelledby="selectGoogleAdsModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="selectGoogleAdsModalLabel">
                            <i class="bi bi-google"></i> Chọn tài khoản Google Ads
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="selectGoogleAdsForm">
                            <div class="mb-4">
                                <label for="googleAdsAccountSelect" class="form-label">
                                    <i class="bi bi-person-circle"></i> Tài khoản Google Ads
                                </label>
                                <select class="form-select" id="googleAdsAccountSelect" required>
                                    <option value="">Chọn tài khoản</option>
                                    @foreach ($google as $account)
                                        <option value="{{ $account->id }}"
                                            data-client_id="{{ $account->google_client_id }}"
                                            data-client_secret="{{ $account->google_client_secret }}"
                                            data-redirect_uri="{{ $account->google_redirect_uri }}"
                                            data-mcc_id="{{ $account->google_ads_mcc_id }}"
                                            data-developer_token="{{ $account->google_ads_developer_token }}"
                                            data-account_email="{{ $account->account_email }}">
                                            {{ $account->google_ads_name }}
                                            @if (!empty($account->account_email))
                                                - {{ $account->account_email }}
                                            @endif
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </form>
                        <div id="googleAdsResponse" class="mt-2"></div>
                    </div>
                    <div class="modal-footer">

                        <button type="button" class="btn btn-primary" id="getGoogleAdsBtn" disabled>
                            <i class="bi bi-download"></i> Lấy dữ liệu
                        </button>
                        <button type="button" class="btn btn-primary" id="btnGoogleAdsLogin" 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> --}}
        {{-- 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>

@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/jquery@3.6.0/dist/jquery.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>
        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.adunit') }}",
                        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: startDate,
                            endDate: endDate,
                        },
                        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;
                        }
                    });
                });
            }
        });

        // Function to toggle column visibility
        function toggleColumn(columnKey, isVisible) {
            const elements = document.querySelectorAll(`table [data-column="${columnKey}"]`);
            elements.forEach((element) => {
                if (isVisible) {
                    element.style.display = (element.tagName === "TH" || element.tagName === "TD") ?
                        "table-cell" :
                        "";
                } else {
                    element.style.display = "none";
                }
            });
        }

        function reapplyColumnVisibility() {
            document.querySelectorAll('.column-toggle input[type="checkbox"]').forEach(checkbox => {
                const columnId = checkbox.getAttribute('data-column');
                const saved = localStorage.getItem("col_" + columnId);
                if (saved !== null) {
                    toggleColumn(columnId, saved === "true");
                }
            });
        }
        $(document).ready(function() {
            // gọi ajax tới chính route này nhưng dạng ?ajax=1
            $.ajax({
                url: "{{ route('admob_adunit.index') }}",
                type: "GET",
                data: {
                    ajax: true
                },
                success: function(res) {
                    $('#table-container').html(res);
                    applyColumnToggle();
                },
                error: function() {
                    $('#table-container').html('<div class="text-danger">Lỗi tải dữ liệu</div>');
                }
            });
            $('#app-select').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: [',', ' ']
            });
        });


        function loadTable(page = 1) {
            let selectedApps = $('#app-select').val();
            let selectedAdunit = $('#adunit-select').val();
            let selectedAdmobName = $('#admob_name').val();

            $.ajax({
                url: "{{ route('admob_adunit.index') }}",
                type: 'GET',
                data: {
                    startDate: filterStartDate,
                    endDate: filterEndDate,
                    page: page,
                    apps: selectedApps,
                    adunit: selectedAdunit,
                    admob_id: selectedAdmobName,
                },
                success: function(res) {
                    $('#table-container').html(res);
                    applyColumnToggle();
                }
            });
        }
        // Initialize date range picker
        $('#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 filterStartDate = moment().startOf('month').format('YYYY-MM-DD');
        let filterEndDate = moment().format('YYYY-MM-DD');

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

            loadTable(1); // load trang 1 với filter mới
        });
        // 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
        $('#daterangeReport').on('apply.daterangepicker', function(ev, picker) {
            startDate = picker.startDate.format('YYYY-MM-DD');
            endDate = picker.endDate.format('YYYY-MM-DD');


        });
        // Khi chọn app
        $('#app-select').on('change', function() {
            loadTable(1); // load trang 1 với filter app mới
        });
        $('#admob_name').on('change', function() {
            loadTable(1); // load trang 1 với filter app mới
        });
        $('#adunit-select').on('change', function() {
            loadTable(1); // load lại bảng khi filter thay đổi
        });
        // Click pagination
        $(document).on('click', '#table-container .pagination a', function(e) {
            e.preventDefault();
            let page = $(this).attr('href').split('page=')[1]; // lấy số trang
            loadTable(page);
        });

        function applyColumnToggle() {
            document.querySelectorAll('.column-toggle input[type="checkbox"]').forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    const columnId = this.getAttribute('data-column');
                    toggleColumn(columnId, this.checked);
                    localStorage.setItem("col_" + columnId, this.checked);
                });

                // Load trạng thái từ localStorage
                const saved = localStorage.getItem("col_" + checkbox.getAttribute('data-column'));
                if (saved !== null) {
                    checkbox.checked = saved === "true";
                    toggleColumn(checkbox.getAttribute('data-column'), checkbox.checked);
                }
            });

            // Thêm event click sort nếu muốn
            document.querySelectorAll('th[data-column]').forEach(header => {
                header.style.cursor = 'pointer';
                header.addEventListener('click', function() {
                    const column = this.dataset.column;
                    sortTableByColumn(column, this);
                });
            });
        }
        // Hàm thực hiện sắp xếp
        function sortTableByColumn(column, headerElement) {
            const table = document.querySelector('.table');
            const tbody = table.querySelector('tbody');
            const rows = Array.from(tbody.querySelectorAll('tr'));
            const direction = headerElement.dataset.sortDirection === 'asc' ? 'desc' : 'asc';
            headerElement.dataset.sortDirection = direction;

            // Sắp xếp
            rows.sort((a, b) => {
                const aText = a.querySelector(`[data-column="${column}"]`)?.textContent.trim() || '';
                const bText = b.querySelector(`[data-column="${column}"]`)?.textContent.trim() || '';

                const aNum = parseFloat(aText.replace(/[^0-9.-]+/g, ''));
                const bNum = parseFloat(bText.replace(/[^0-9.-]+/g, ''));

                if (!isNaN(aNum) && !isNaN(bNum)) {
                    return direction === 'asc' ? aNum - bNum : bNum - aNum;
                }
                return direction === 'asc' ?
                    aText.localeCompare(bText) :
                    bText.localeCompare(aText);
            });

            // Cập nhật lại thứ tự
            rows.forEach(row => tbody.appendChild(row));

            // Reset icon sắp xếp
            document.querySelectorAll('th[data-column] i')?.forEach(i => i.classList.remove('fa-sort-up', 'fa-sort-down'));
            let icon = headerElement.querySelector('i');
            if (!icon) {
                icon = document.createElement('i');
                icon.className = 'fas fa-sort ms-1';
                headerElement.appendChild(icon);
            }
            icon.className = direction === 'asc' ? 'fas fa-sort-up ms-1' : 'fas fa-sort-down ms-1';
        }
        document.addEventListener("DOMContentLoaded", () => {
            applyColumnToggle();
        });
    </script>
@endpush
<style scoped>
    .sidebar {
        background-color: #f8f9fa;
        border-right: 1px solid #dee2e6;
        overflow-y: auto;
    }

    .main-content {}

    .table-container {
        overflow-x: auto;
    }

    .app-icon {
        width: 32px;
        height: 32px;
        border-radius: 6px;
    }

    .metric-positive {
        color: #28a745;
    }

    .config-col-lg-10 {
        width: 83.33333333% !important;
    }

    .config-col-lg-3 {
        width: 16.66666667% !important;

    }

    .metric-negative {
        color: #dc3545;
    }

    .column-toggle {
        font-size: 0.9rem;
    }

    .sidebar-section {
        border-bottom: 1px solid #dee2e6;
        padding: 1rem;
    }

    .sidebar-section:last-child {
        border-bottom: none;
    }

    .table th {
        background-color: #495057 !important;
        color: white !important;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .table td {
        font-size: 0.85rem;
        vertical-align: middle;
    }

    .total-row {
        background-color: #f8f9fa !important;
        font-weight: bold;
    }

    /* Căn phải cho các cột số */
    table td[data-column="revenue"],
    table td[data-column="ecpm"],
    table td[data-column="requests"],
    table td[data-column="impressions"],
    table td[data-column="clicks"],
    table td[data-column="cpc"],
    table td[data-column="fillrate"],
    table td[data-column="showrate"],
    table td[data-column="ctr"] {
        text-align: right;
    }

    /* Căn trái cho các cột chữ */
    table td[data-column="app_name"],
    table td[data-column="unit"] {
        text-align: left;
    }


    table th[data-column="app_name"],
    table th[data-column="unit"] {
        text-align: left;
    }

    @media (max-width: 768px) {
        .sidebar {
            height: auto;
            position: relative;
        }

        .main-content {
            height: auto;
        }

        .sidebar-section {
            margin-top: 1rem;
            /* tạo khoảng cách với table */
        }

        table.table {
            font-size: 14px;
            /* thu nhỏ chữ cho dễ nhìn */
            overflow-x: auto;
            display: block;
        }

        .config-col-lg-10 {
            width: 100% !important;
        }

        .config-col-lg-3 {
            display: none;
            width: 100% !important;
        }
    }

    @media (max-width: 820px) {
        .config-col-lg-3 {
            display: none;
            width: 100% !important;
        }
    }

    @media (max-width: 820px) {
        table.table {
            font-size: 14px;
            overflow-x: auto;
            display: block;
        }
    }
</style>