@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' : '' }}">

        <!-- Page Heading -->
        {{-- <h1 class="h3 mb-2 text-gray-800">Danh mục app</h1> --}}
        <!-- DataTales Example -->
        <div class="card  mb-4">
            <div
                class="card-header py-3 d-flex justify-content-between align-items-start flex-column flex-md-row align-items-md-center ">
                <h6 class="m-0 font-weight-bold text-primary ">Danh sách Admob reports</h6>
                <div class="d-flex gap-1 mt-1">
                    @if(Auth::user()->role_id == 1)
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#importModal">
                        <i class="fas fa-file-import"></i> Import
                    </button>
                    <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>
                    <a class="btn btn-primary btn-user" href="{{ route('admob_reports.show.form') }}">&#43; Thêm mới</a>
                    @endif
                </div>
            </div>

            <div class="col-12 mt-2 mb-2">
                <div class="control-panel">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <select class="form-select" id="admobSelect" name="admobSelect">
                                @foreach ($admobs as $index => $admob)
                                    <option value="{{ $admob->id }}" {{ $index === 0 ? 'selected' : '' }}>
                                        {{ $admob->admob_name }}
                                    </option>
                                @endforeach
                            </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">
                            <input type="text" class="form-control" id="daterangeReport" name="daterangeReport">
                        </div>
                        <div class="col-md-3 d-flex gap-2 align-items-baseline main-flex-wrap" >
                            <p style="white-space: nowrap;">Google admob report cập nhật:</p>
                            <input type="datetime-local" class="form-control" id="google-admob-sync" >
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-12  p-0 ">
                <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>
        <!-- Modal chọn tài khoản Google -->
        <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-4">
                                <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>
                        </form>
                        <div>
                            <input type="text" class="form-control" id="daterange" name="daterange">
                        </div>
                        <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 class="modal fade" id="importModal" tabindex="-1" aria-labelledby="importModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="importModalLabel">
                            <i class="bi bi-cloud-upload"></i> Import Dữ Liệu
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="importForm">
                            <!-- App Selection -->
                            <div class="mb-4">
                                <label for="appSelect" class="form-label">
                                    <i class="bi bi-app"></i> Chọn Admob
                                </label>
                                <select class="form-select" id="appSelect" required>
                                    <option value="">Chọn Admob</option>
                                    @foreach ($admobs as $admob)
                                        <option value="{{ $admob->id }}">{{ $admob->admob_name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- File Upload -->
                            <div class="mb-4">
                                <label class="form-label">
                                    <i class="bi bi-file-earmark-arrow-up"></i> Tải Lên File
                                </label>
                                <div class="file-upload-area" id="fileUploadArea">
                                    <i class="bi bi-cloud-upload fs-1 text-muted"></i>
                                    <h6 class="mt-3">Kéo thả file vào đây hoặc click để chọn</h6>
                                    <p class="text-muted small">Hỗ trợ: .xls, (Tối đa 10MB)</p>
                                    <input type="file" class="d-none" id="fileInput" accept=".xls">
                                </div>

                                <!-- File Info Display -->
                                <div class="file-info" id="fileInfo">
                                    <div class="alert alert-success d-flex align-items-center">
                                        <i class="bi bi-check-circle-fill me-2"></i>
                                        <div>
                                            <strong>File đã chọn:</strong>
                                            <span id="fileName"></span>
                                            <br>
                                            <small class="text-muted">
                                                Kích thước: <span id="fileSize"></span>
                                            </small>
                                        </div>
                                        <button type="button" class="btn btn-sm btn-outline-danger ms-auto"
                                            id="removeFile">
                                            <i class="fa fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Import Options -->
                            {{-- <div class="mb-3">
                                <label class="form-label">Tùy Chọn Import</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="skipDuplicates" checked>
                                    <label class="form-check-label" for="skipDuplicates">
                                        Bỏ qua dữ liệu trùng lặp
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="validateData" checked>
                                    <label class="form-check-label" for="validateData">
                                        Kiểm tra tính hợp lệ của dữ liệu
                                    </label>
                                </div>
                            </div> --}}
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            <i class="bi bi-x-circle"></i> Hủy
                        </button>
                        <button type="button" class="btn btn-primary" id="importBtn" disabled>
                            <i class="bi bi-upload"></i> Bắt Đầu Import
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
<style scoped>
    @media (max-width: 768px) {
        table.table {
            font-size: 14px;
            overflow-x: auto;
            display: block;
        }
    }

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

    .file-upload-area {
        border: 2px dashed #dee2e6;
        border-radius: 8px;
        padding: 2rem;
        text-align: center;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .file-upload-area:hover {
        border-color: #0d6efd;
        background-color: #f8f9fa;
    }

    .file-upload-area.dragover {
        border-color: #0d6efd;
        background-color: #e7f3ff;
    }

    .file-info {
        display: none;
        margin-top: 1rem;
    }

    .file-info.show {
        display: block;
    }

    .dataTables_filter {
        float: right;
    }

    @media (max-width:768px) {
        .dataTables_filter {
            float: left;
        }
        .main-flex-wrap{
            flex-wrap: wrap;
        }
    }

    td.dt-control {
        background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;
        cursor: pointer;
    }

    tr.shown td.dt-control {
        background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center;
    }
</style>
@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>
        $('#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');
            loadTable(1);
        });
        $('#admobSelect').on('change', function() {
            loadTable(1); // load trang 1 với filter app mới
        });
        $('#app-select').on('change', function() {
            loadTable(1); // load trang 1 với filter app mới
        });
        $(document).ready(function() {
            // gọi ajax tới chính route này nhưng dạng ?ajax=1
            $.ajax({
                url: "{{ route('admob_reports.index') }}",
                type: "GET",
                data: {
                    ajax: true,
                    admob_id: $('#admobSelect').val(),
                    startDate: startDateReport,
                    endDate: endDateReport,
                    apps: $('#app-select').val(),
                },
                success: function(res) {
                    $('#table-container').html(res);
                },
                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 admobSelect = $('#admobSelect').val();

            $.ajax({
                url: "{{ route('admob_reports.index') }}",
                type: 'GET',
                data: {
                    ajax: true,   
                    admob_id: $('#admobSelect').val(),
                    startDate: startDateReport,
                    endDate: endDateReport,
                    apps: $('#app-select').val(),
                    page: page,
                },
                success: function(res) {
                    
                    $('#table-container').html(res);
                }
            });
        }
        $(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);
        });
        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.report') }}",
                        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) {
                                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;
                        }
                    });
                });
            }
        });
    </script>
@endpush
@push('scripts')
    <script>
        function formatCurrency(amount) {
            return new Intl.NumberFormat('vi-VN').format(amount);
        }

        function format(d) {

            let reports = [];
            if (d.app[1]) {
                try {
                    reports = JSON.parse(d.app[1]);
                } catch (e) {
                    console.error("JSON parse error:", e);
                    reports = [];
                }
            }
            let min = $('#min-date').val();
            let max = $('#max-date').val();
            let searchValue = $('.dataTables_filter input').val()?.toLowerCase();
            let filteredReports = reports.filter(r => {
                let rowDate = r.report_date.split('T')[0];
                let passDate = (!min || rowDate >= min) && (!max || rowDate <= max);
                let passSearch = !searchValue || (
                    r.app?.app_name &&
                    r.app.app_name.toLowerCase().includes(searchValue)
                );
                return passDate && passSearch;
            });
            if (filteredReports.length === 0) {
                return `<div class="text-center text-muted">Không có dữ liệu trong khoảng ngày</div>`;
            }

            let rows = filteredReports.map(r => {

                return `
                    <tr>
                        <td>${r.app ? r.app.app_name : ''}</td>
                        <td class="text-right">
                            ${(() => {
                                // Lấy phần ngày "YYYY-MM-DD" từ report_date
                                const [year, month, day] = r.report_date.split(' ')[0].split('-');
                                // Trả về định dạng DD/MM/YYYY
                                return `${day}/${month}/${year}`;
                            })()}
                        </td>

                        <td class="text-right">${r.estimated_ecpm}</td>
                        <td class="text-right">${r.observed_ecpm}</td>
                        <td class="text-right">${formatCurrency(r.requests)}</td>
                        <td class="text-right">${r.match_rate} %</td>
                        <td class="text-right">${formatCurrency(r.matched_requests)}</td>
                        <td class="text-right">${r.show_rate} %</td>
                        <td class="text-right">${formatCurrency(r.impressions)}</td>
                        <td class="text-right">
                            ${parseFlexibleNumber(r.ctr) }%
                        </td>
                        <td class="text-right">${formatCurrency(r.clicks)}</td>
                        <td>
                            <div class="d-flex justify-content-center gap-1">
                                <a href="/admin/admob_reports/edit/${r.id}" class="btn btn-warning"
                                    style="width: 40px;height: 30px;">
                                    <i class="fa fa-edit"></i>
                                </a>
                                <button class="btn btn-danger btn-delete" data-id="${r.id}">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </div>    
                        </td>
                    </tr>
                `;
            }).join("");

            return `
                <table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;" width="100%">
                    <thead>
                        <tr>
                            <th>App</th>
                            <th>Date</th>
                            <th>estimated_earnings</th>
                            <th>observed_ecpm</th>
                            <th>requests</th>
                            <th>match_rate</th>
                            <th>matched_requests</th>
                            <th>show_rate</th>
                            <th>impressions</th>
                            <th>ctr</th>
                            <th>clicks</th>
                            <th>Hành động</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${rows}
                    </tbody>
                </table>
            `;
        }
        // parse linh hoạt nhiều định dạng số
        function parseFlexibleNumber(val) {
            if (val === null || val === undefined) return NaN;
            if (typeof val === 'number') return val;

            let s = String(val).trim();

            // bỏ dấu % và khoảng trắng
            s = s.replace('%', '').trim();

            // nếu có cả '.' và ',' -> quyết định đâu là decimal theo vị trí cuối cùng
            if (s.indexOf('.') > -1 && s.indexOf(',') > -1) {
                const lastDot = s.lastIndexOf('.');
                const lastComma = s.lastIndexOf(',');
                if (lastComma > lastDot) {
                    // comma là decimal separator: remove dots (thousands), thay comma -> dot
                    s = s.replace(/\./g, '').replace(/,/g, '.');
                } else {
                    // dot là decimal: remove commas
                    s = s.replace(/,/g, '');
                }
            } else if (s.indexOf(',') > -1) {
                // chỉ có comma: heuristic
                const parts = s.split(',');
                const lastPart = parts[parts.length - 1];
                if (parts.length > 2 || lastPart.length === 3) {
                    // nhiều comma hoặc phần sau 3 chữ số => comma là thousands separator
                    s = s.replace(/,/g, '');
                } else {
                    // coi comma là decimal separator
                    s = s.replace(/,/g, '.');
                }
            } else {
                // chỉ có dot hoặc không có: giữ nguyên (dot = decimal)
            }

            const n = parseFloat(s);
            return isNaN(n) ? NaN : n;
        }

        // format percent với 2 chữ số, tự nhận fraction (0..1) => *100
        function formatPercent(raw) {
            const n = parseFlexibleNumber(raw);
            if (isNaN(n)) return '-';

            // nếu giá trị nhìn như fraction (0 < n <= 1) => chuyển sang %
            let value = n;
            if (Math.abs(value) > 0 && Math.abs(value) <= 1) {
                value = value * 100;
            }

            // làm tròn chuẩn tới 2 chữ số thập phân
            const rounded = Math.round(value * 100) / 100;
            return rounded.toFixed(2) + '%';
        }


        $(document).ready(function() {
            var table = $('#dataTable').DataTable({
                columnDefs: [{
                        targets: 0, // cột đầu tiên để làm nút mở rộng
                        className: 'dt-control',
                        orderable: false,
                        data: null,
                        defaultContent: ''
                    },
                    {
                        targets: 1,
                        visible: false
                    }
                ],
                order: [
                    [1, 'asc']
                ]
            });

            // Bắt sự kiện click mũi tên
            $('#dataTable tbody').on('click', 'td.dt-control', function() {
                var tr = $(this).closest('tr');
                var row = table.row(tr);

                if (row.child.isShown()) {
                    row.child.hide();
                    tr.removeClass('shown');
                } else {
                    let rowData = row.data();
                    row.child(format({
                        app: rowData
                    })).show();
                    tr.addClass('shown');
                }
            });

            $.fn.dataTable.ext.search.push(function(settings, data) {
                let min = $('#min-date').val();
                let max = $('#max-date').val();
                let searchValue = $('.dataTables_filter input').val()?.toLowerCase();
                let jsonStr = data[1];
                if (!jsonStr) return false;

                let reports;
                try {
                    reports = JSON.parse(jsonStr);
                } catch (e) {
                    return false;
                }

                // Lọc dữ liệu
                return reports.some(r => {
                    if (!r.report_date) return false;
                    let rowDate = r.report_date.split('T')[0]; // yyyy-mm-dd

                    // check khoảng ngày
                    let inDateRange = (!min || rowDate >= min) &&
                        (!max || rowDate <= max);

                    // check search app_name
                    let inSearch = !searchValue ||
                        (r.app?.app_name &&
                            r.app.app_name.toLowerCase().includes(searchValue));

                    return inDateRange && inSearch;
                });
            });

            $('#min-date, #max-date').on('change', function() {
                table.draw();
                table.rows().every(function() {
                    if (this.child.isShown()) {
                        this.child(format({
                            app: this.data()
                        })).show();
                    }
                });
            });

            $('.dataTables_filter input').on('input', function() {
                table.search(this.value).draw();
                table.rows().every(function() {
                    if (this.child.isShown()) {
                        this.child(format({
                            app: this.data()
                        })).show();
                    }
                });
            });



        });
    </script>

    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $(document).on('click', '.btn-delete', function(e) {
                e.preventDefault();
                var id = $(this).data('id');

                Swal.fire({
                    title: 'Bạn có chắc muốn xóa?',
                    text: "Thao tác này sẽ không thể hoàn tác!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Có',
                    cancelButtonText: 'Hủy'
                }).then((result) => {
                    if (result.isConfirmed) {
                        let url = '{{ route('admob_reports.delete', ':id') }}'.replace(':id', id);
                        $.ajax({
                            url: url,
                            type: 'DELETE',
                            success: function(response) {
                                Swal.fire('Đã xóa!', response.message, 'success').then(
                                    () => {
                                        location.reload();
                                    });
                            }
                        });

                    }
                })
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const fileUploadArea = document.getElementById('fileUploadArea');
            const fileInput = document.getElementById('fileInput');
            const fileInfo = document.getElementById('fileInfo');
            const fileName = document.getElementById('fileName');
            const fileSize = document.getElementById('fileSize');
            const removeFileBtn = document.getElementById('removeFile');
            const appSelect = document.getElementById('appSelect');
            const importBtn = document.getElementById('importBtn');

            let selectedFile = null;

            // Click to select file
            fileUploadArea.addEventListener('click', () => {
                fileInput.click();
            });

            // File input change
            fileInput.addEventListener('change', handleFileSelect);

            // Drag and drop events
            fileUploadArea.addEventListener('dragover', (e) => {
                e.preventDefault();
                fileUploadArea.classList.add('dragover');
            });

            fileUploadArea.addEventListener('dragleave', () => {
                fileUploadArea.classList.remove('dragover');
            });

            fileUploadArea.addEventListener('drop', (e) => {
                e.preventDefault();
                fileUploadArea.classList.remove('dragover');
                const files = e.dataTransfer.files;
                if (files.length > 0) {
                    handleFile(files[0]);
                }
            });

            // Remove file
            removeFileBtn.addEventListener('click', () => {
                selectedFile = null;
                fileInput.value = '';
                fileInfo.classList.remove('show');
                checkFormValidity();
            });

            // App select change
            appSelect.addEventListener('change', checkFormValidity);

            function handleFileSelect(e) {
                const file = e.target.files[0];
                if (file) {
                    handleFile(file);
                }
            }

            function handleFile(file) {
                // Validate file type
                const allowedTypes = ['.xls'];
                const fileExtension = '.' + file.name.split('.').pop().toLowerCase();

                if (!allowedTypes.includes(fileExtension)) {
                    alert('Loại file không được hỗ trợ. Vui lòng chọn file .xls');
                    return;
                }

                // Validate file size (10MB)
                if (file.size > 10 * 1024 * 1024) {
                    alert('File quá lớn. Vui lòng chọn file nhỏ hơn 10MB');
                    return;
                }

                selectedFile = file;
                fileName.textContent = file.name;
                fileSize.textContent = formatFileSize(file.size);
                fileInfo.classList.add('show');
                checkFormValidity();
            }

            function formatFileSize(bytes) {
                if (bytes === 0) return '0 Bytes';
                const k = 1024;
                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
                const i = Math.floor(Math.log(bytes) / Math.log(k));
                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
            }

            function checkFormValidity() {
                const isValid = appSelect.value && selectedFile;
                importBtn.disabled = !isValid;
            }

            // Import button click
            importBtn.addEventListener('click', function() {
                if (!selectedFile || !appSelect.value) {
                    alert('Vui lòng chọn ứng dụng và file để import');
                    return;
                }

                // Simulate import process
                importBtn.innerHTML =
                    '<span class="spinner-border spinner-border-sm me-2"></span>Đang Import...';
                importBtn.disabled = true;
                let formData = new FormData();
                formData.append('file', selectedFile); // gửi file excel
                formData.append('app_id', appSelect.value); // gửi id ứng dụng

                $.ajax({
                    url: "{{ route('admob_reports.import') }}",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    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();
                                });
                        } else {
                            res.errors.forEach((error, index) => {
                                setTimeout(() => {
                                    Swal.fire({
                                        toast: true,
                                        position: 'top-end',
                                        icon: 'error',
                                        title: error,
                                        showConfirmButton: false,
                                        timer: 3000,
                                        timerProgressBar: true,
                                    });
                                }, index * 1000); // delay 1s mỗi lỗi để không đè nhau
                            });
                        }
                    },
                    error: function(xhr) {
                        $('#result').text("Có lỗi xảy ra: " + xhr.responseJSON
                            .message).css("color", "red");
                    },
                    complete: function() {
                        // Reset nút
                        importBtn.innerHTML = '<i class="bi bi-upload"></i> Bắt Đầu Import';
                        importBtn.disabled = false;
                    }
                });


                // Reset form
                selectedFile = null;
                fileInput.value = '';
                appSelect.value = '';
                fileInfo.classList.remove('show');
                // Close modal
                const modal = bootstrap.Modal.getInstance(document.getElementById(
                    'importModal'));
                modal.hide();

            });
        });
    </script>
@endpush