@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 google ads report</h6>
                <div class="gap-2 d-flex 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="#selectGoogleAdsModal">
                        &#43; Lấy dữ liệu Google Ads
                    </button>
                    <a class="btn btn-primary btn-user" href="{{ route('google.ads.report.show.form') }}">&#43; Thêm mới</a>
                    @endif
                </div>
            </div>

            <div class="col-12 mt-2 mb-2">
                <div style="max-height:200px; overflow-y:auto;">
                    @foreach ($result as $item)
                        <div class="alert alert-danger mt-1 py-0" role="alert">
                            Campaign {{ $item->campaign_name }} đang không thuộc app nào trong hệ thống
                        </div>
                    @endforeach
                </div>
                <div class="control-panel">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <select class="form-select" id="adsSelect" name="adsSelect">
                                @foreach ($google as $index => $g)
                                    <option value="{{ $g->id }}" {{ $index === 0 ? 'selected' : '' }}>
                                        {{ $g->google_ads_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> --}}
                            <input type="text" class="form-control" id="campaign-name" name="campaign-name" placeholder="Tên campaign">
                        </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 ads report cập nhật:</p>
                            <input type="datetime-local" class="form-control" id="google-ads-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 Ads -->
        <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-2">
                                <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>
                            <div>
                                <input type="text" class="form-control" id="daterange" name="daterange">
                            </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>
        <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 Google ads
                                </label>
                                <select class="form-select" id="appSelect" required>
                                    <option value="">Chọn Google ads</option>
                                    @foreach ($google as $item)
                                        <option value="{{ $item->id }}">{{ $item->google_ads_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;
        }
    }

    .dataTables_filter {
        float: right;
    }

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

    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: 'DD/MM/YYYY' //'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 startDateReport = moment().startOf('month').format('YYYY-MM-DD');
        let endDateReport = moment().format('YYYY-MM-DD');
        let startDate = moment().startOf('month').format('YYYY-MM-DD');
        let endDate = moment().format('YYYY-MM-DD');
        $('#daterangeReport').on('apply.daterangepicker', function(ev, picker) {
            startDateReport = picker.startDate.format('YYYY-MM-DD');
            endDateReport = picker.endDate.format('YYYY-MM-DD');
            loadTable(1);
        });
        // 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');
        });

    
       


        $('#daterangeReport').on('apply.daterangepicker', function(ev, picker) {
            startDateReport = picker.startDate.format('YYYY-MM-DD');
            endDateReport = picker.endDate.format('YYYY-MM-DD');
            loadTable(1);
        });
        $('#adsSelect').on('change', function() {
            loadTable(1); // load trang 1 với filter app mới
        });
        $('#campaign-name').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('google.ads.report.index') }}",
                type: "GET",
                data: {
                    ajax: true,
                    admob_id: $('#adsSelect').val(),
                    startDate: startDateReport,
                    endDate: endDateReport,
                    campaign_name: $('#campaign-name').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>');
                }
            });

           
        });

        function loadTable(page = 1) {
            let admobSelect = $('#admobSelect').val();

            $.ajax({
                url: "{{ route('google.ads.report.index') }}",
                type: 'GET',
                data: {
                    admob_id: $('#admobSelect').val(),
                    startDate: startDateReport,
                    endDate: endDateReport,
                    campaign_name: $('#campaign-name').val(),
                    page: page,
                    google_ads_id: $('#adsSelect').val(),
                },
                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 googleAdsAccountSelect = document.getElementById('googleAdsAccountSelect');
            const getGoogleAdsBtn = document.getElementById('getGoogleAdsBtn');
            const btnGoogleAdsLogin = document.getElementById('btnGoogleAdsLogin');
            const googleAdsResponse = document.getElementById('googleAdsResponse');

            if (googleAdsAccountSelect) {
                googleAdsAccountSelect.addEventListener('change', function() {
                    getGoogleAdsBtn.disabled = !googleAdsAccountSelect.value;
                    btnGoogleAdsLogin.disabled = !googleAdsAccountSelect.value;
                });
            }
            // đăng nhập lại
            if (btnGoogleAdsLogin) {
                btnGoogleAdsLogin.addEventListener('click', function() {
                    if (!googleAdsAccountSelect.value) return;
                    getGoogleAdsBtn.disabled = true;
                    googleAdsResponse.innerHTML = '';

                    // Lấy thông tin từ option được chọn
                    const selectedOption = googleAdsAccountSelect.options[googleAdsAccountSelect
                        .selectedIndex];
                    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 mcc_id = selectedOption.getAttribute('data-mcc_id');
                    const developer_token = selectedOption.getAttribute('data-developer_token');
                    const account_email = selectedOption.getAttribute('data-account_email');

                    // Gửi AJAX lấy dữ liệu Google Ads
                    $.ajax({
                        url: "{{ route('google.ads.auth') }}",
                        type: "GET",
                        data: {
                            token_id: googleAdsAccountSelect.value,
                            client_id: client_id,
                            client_secret: client_secret,
                            redirect_uri: redirect_uri,
                            mcc_id: mcc_id,
                            developer_token: developer_token,
                            account_email: account_email,
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(res) {
                            console.log(res);
                            // console.log(123);
                            
                            if (res.success) {
                                Swal.fire('Thành công', res.message, 'success').then(
                                    () => {
                                        location.reload();
                                    });
                            }
                            if (res) {
                                window.location.href = res
                                    ; // Chuyển hướng sang Google OAuth
                            }
                        },
                        error: function(xhr) {
                            googleAdsResponse.innerHTML = '<div class="alert alert-danger">' + (
                                xhr.responseJSON?.message || 'Có lỗi xảy ra!') + '</div>';
                        },
                        complete: function() {
                            getGoogleAdsBtn.innerHTML =
                                '<i class="bi bi-download"></i> Lấy dữ liệu';
                            getGoogleAdsBtn.disabled = false;
                        }
                    });
                });
            }

            if (getGoogleAdsBtn) {
                getGoogleAdsBtn.addEventListener('click', function() {
                    if (!googleAdsAccountSelect.value) return;
                    getGoogleAdsBtn.innerHTML =
                        '<span class="spinner-border spinner-border-sm me-2"></span>Đang lấy dữ liệu...';
                    getGoogleAdsBtn.disabled = true;
                    googleAdsResponse.innerHTML = '';

                    // Lấy thông tin từ option được chọn
                    const selectedOption = googleAdsAccountSelect.options[googleAdsAccountSelect
                        .selectedIndex];
                    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 mcc_id = selectedOption.getAttribute('data-mcc_id');
                    const developer_token = selectedOption.getAttribute('data-developer_token');
                    const account_email = selectedOption.getAttribute('data-account_email');
                    console.log(startDate);
                    console.log(endDate);
                    // Gửi AJAX lấy dữ liệu Google Ads
                    $.ajax({
                        url: "{{ route('google.ads.report') }}",
                        type: "GET",
                        data: {
                            token_id: googleAdsAccountSelect.value,
                            client_id: client_id,
                            client_secret: client_secret,
                            redirect_uri: redirect_uri,
                            mcc_id: mcc_id,
                            developer_token: developer_token,
                            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) {
                            console.log(xhr.status, xhr.responseText);
                            googleAdsResponse.innerHTML = '<div class="alert alert-danger">' + (
                                xhr.responseJSON?.message || 'Có lỗi xảy ra!') + '</div>';
                        },
                        complete: function() {
                            getGoogleAdsBtn.innerHTML =
                                '<i class="bi bi-download"></i> Lấy dữ liệu';
                            getGoogleAdsBtn.disabled = false;
                        }
                    });
                });
            }
        });
    </script>
@endpush
@push('scripts')
    <script>
        function formatNumber(num) {
            return new Intl.NumberFormat('vi-VN').format(num);
        }

        function toDate(val) {
            if (!val) return null;

            // yyyy-mm-dd
            if (/^\d{4}-\d{2}-\d{2}$/.test(val)) {
                return new Date(val + "T00:00:00");
            }

            // dd/mm/yyyy
            if (/^\d{2}\/\d{2}\/\d{4}$/.test(val)) {
                let [day, month, year] = val.split('/');
                return new Date(`${year}-${month}-${day}T00:00:00`);
            }

            return new Date(val);
        }

        function format(d) {

            let reports = [];
            if (d[1]) {
                try {
                    reports = JSON.parse(d[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.campaign_name && r.campaign_name.toLowerCase().includes(searchValue)) ||
                    (r.account_name && r.account_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.account_name}</td>
                <td>${r.campaign_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 >${r.currency_code}</td>
                <td class="text-right">${r.cost}</td>
                <td class="text-right">${r.conversions}</td>
                <td class="text-right">${r.cost_per_conversion}</td>
                <td class="text-right">${r.conv_value_per_cost}</td>
                <td class="text-right">${formatNumber(r.cost_vnd)}</td>
                <td>
                    <div class="d-flex justify-content-center gap-1">
                        <a href="/admin/google-ads-report/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("");


            // if (!rows) {
            //     return `<div class="text-center text-muted">Không có dữ liệu trong khoảng ngày</div>`;
            // }
            return `
                <table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;" width="100%">
                        <thead>
                            <tr>
                                <th>Account name </th>
                                <th>Campaign </th>
                                <th>Date</th>
                                <th>Currency code</th>
                                <th>Cost</th>
                                <th>Conversions </th>
                                <th>Cost/conv</th>
                                <th>All conv. value/cost</th>
                                <th>Cost(VND)</th>
                                <th>Hành động</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${rows}
                        </tbody>
                </table>
            `;

        }


        $(document).ready(function() {
            // initial load of AJAX table
            $.ajax({
                url: "{{ route('google.ads.report.index') }}",
                type: 'GET',
                data: {
                    ajax: true,
                    google_ads_id: $('#google-ads-select').val(),
                    startDate: startDateReport,
                    endDate: endDateReport,
                    apps: $('#google-ads-select').val(),
                },
                success: function(res) {
                    $('#table-container').html(res);
                },
                error: function() {
                    console.error('Lỗi tải bảng google ads');
                }
            });

            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();
                    // giả sử reports nằm trong rowData.reports
                    row.child(format(rowData)).show();
                    tr.addClass('shown');
                }
            });



            $.fn.dataTable.ext.search.push(function(settings, data) {
                let min = $('#min-date').val(); // yyyy-mm-dd
                let max = $('#max-date').val(); // yyyy-mm-dd
                let searchValue = $('.dataTables_filter input').val()?.toLowerCase();
                let jsonStr = data[1]; // JSON từ cột 1 (ẩn)
                if (!jsonStr) return false;

                let reports;
                try {
                    reports = JSON.parse(jsonStr);
                } catch (e) {
                    return false;
                }
                return reports.some(r => {
                    if (!r.report_date) return false;

                    let rowDate = (r.report_date.split(' ')[0] || '').trim();
                    let inDateRange =
                        (!min || rowDate >= min) &&
                        (!max || rowDate <= max);

                    let inSearch = !searchValue || (
                        (r.campaign_name && r.campaign_name.toLowerCase().includes(
                            searchValue)) ||
                        (r.account_name && r.account_name.toLowerCase().includes(searchValue))
                    );

                    return inDateRange && inSearch;
                });

            });


            // redraw khi chọn ngày
            $('#min-date, #max-date').on('change', function() {
                table.draw();
                table.rows().every(function() {
                    if (this.child.isShown()) {
                        this.child(format(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(this.data())).show();
                    }
                });
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            // // Ẩn cột "Day" (index = 0)
            // let table = $('#dataTable').DataTable({
            //     columnDefs: [{
            //             targets: 0,
            //             visible: false
            //         } // ẩn cột 0
            //     ]
            // });

            // // Custom filter theo khoảng ngày
            // $.fn.dataTable.ext.search.push(function(settings, data) {
            //     let min = $('#min-date').val();
            //     let max = $('#max-date').val();

            //     let dateStr = data[0]; // vẫn lấy cột 0 (dù đã ẩn)

            //     if (!dateStr) return false;

            //     // chỉ lấy YYYY-MM-DD để so sánh
            //     let onlyDate = dateStr.split(' ')[0];
            //     let rowDate = new Date(onlyDate);

            //     if (min && rowDate < new Date(min)) return false;
            //     if (max && rowDate > new Date(max)) return false;

            //     return true;
            // });


            // table.draw();

            // // Redraw khi thay đổi input
            // $('#min-date, #max-date').on('change', function() {
            //     table.draw();
            // });
            $(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('google.ads.report.delete', ':id') }}'.replace(':id',
                            id);
                        $.ajax({
                            url: url,
                            type: 'DELETE',
                            success: function(response) {
                                Swal.fire('Đã xóa!', response.message, 'success').then(
                                    () => {
                                        location.reload();
                                    });
                            }
                        });

                        // loadTable function to fetch partial via AJAX
                        function loadTable(page = 1) {
                            $.ajax({
                                url: "{{ route('google.ads.report.index') }}",
                                type: 'GET',
                                data: {
                                    ajax: true,
                                    google_ads_id: $('#google-ads-select').val(),
                                    startDate: startDateReport,
                                    endDate: endDateReport,
                                    apps: $('#google-ads-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];
                            loadTable(page);
                        });

                    }
                })
            });
        });

        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', '.xlsx', '.csv', '.json'];
                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, .csv hoặc .json');
                    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('google_ads_id', appSelect.value); // gửi id ứng dụng

                $.ajax({
                    url: "{{ route('google.ads.report.import') }}",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(res) {
                        if (res.status === '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