@extends('template.desktop.app')

@push('styles')
<script src="https://cdn.tailwindcss.com"></script>

<style>
    .btn-primary { background-color: #fd0d0dff !important; border-color: #fd0d0dff !important; }
    
    .table-responsive-scroll {
        border-radius: 12px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.02);
        border: 1px solid #edf2f7;
        max-height: 75vh;
        overflow-y: auto;
        position: relative;
    }

    .table {
        margin-bottom: 0;
        font-size: 0.875rem;
        white-space: nowrap;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    .table thead th {
        background: #f8fafc;
        color: #64748b;
        font-weight: 600;
        font-size: 0.75rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        border-bottom: 2px solid #e2e8f0;
        padding: 1rem 1.5rem;
        position: sticky; 
        top: 0;
        z-index: 10;
    }

    .table tbody td {
        padding: 1rem 1.5rem;
        vertical-align: middle;
        border-bottom: 1px solid #f1f5f9;
        color: #334155;
    }

    .table tbody tr:hover { background-color: #f8fafc; }

    .money { font-weight: 600; color: #059669; font-family: 'Consolas', monospace; }
    .cpc { font-weight: 600; color: #2563eb; font-family: 'Consolas', monospace; }
    
    .media-badge {
        font-size: 0.75rem; padding: 0.35em 0.8em; border-radius: 6px;
        font-weight: 500; background-color: #f1f5f9; color: #475569; border: 1px solid #e2e8f0;
    }

    .dropdown-menu-calendar {
        position: absolute; top: 100%; right: 0; z-index: 1050;
        background: white; border: 1px solid rgba(0,0,0,0.1);
        border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        margin-top: 0.5rem; width: 650px;
    }
</style>
@endpush

@section('content')
<div class="container-fluid py-4">
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show shadow-sm border-0 mb-4" role="alert" style="background-color: #d1e7dd; color: #0f5132; border-radius: 12px;">
            <div class="d-flex align-items-center">
                <i class="ti tabler-check fs-4 me-2"></i>
                <div>{{ session('success') }}</div>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="row">
        <div class="col-12">
            <div class="card mb-4 border-0 shadow-sm" style="border-radius: 12px;">
                <div class="card-header bg-white border-bottom py-3">
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                        
                        <div class="d-flex align-items-center flex-grow-1" style="max-width: 300px;">
                            <div class="input-group input-group-merge shadow-none border  rounded-pill overflow-hidden">
                                <span class="input-group-text border-0 bg-transparent ps-3 text-muted">
                                    <i class="ti tabler-search"></i>
                                </span>
                                <input type="text" id="searchInput" class="form-control border-0 bg-transparent shadow-none" 
                                    placeholder="Cari Akun Iklan..." 
                                    value="{{ request('search') }}"
                                    style="font-size: 0.875rem;">
                            </div>
                        </div>
                        
                        <div class="d-flex gap-2 relative">
                            <div class="relative">
                                <button type="button" id="dateFilterBtn" class="btn btn-white border px-3 text-secondary d-flex align-items-center bg-white">
                                    <i class="ti tabler-calendar me-2"></i>
                                    <span id="dateFilterLabel" class="small fw-bold">Filter Tanggal</span>
                                </button>
                                
                                <div id="dateFilterDropdown" class="hidden dropdown-menu-calendar p-0">
                                    <div class="flex">
                                        <div class="w-48 bg-gray-50 border-r border-gray-100 p-2 space-y-1">
                                            <button type="button" onclick="applyDatePreset('today')" class="date-preset w-full text-left px-3 py-2 text-sm rounded-md hover:bg-white hover:shadow-sm transition-all">Hari Ini</button>
                                            <button type="button" onclick="applyDatePreset('yesterday')" class="date-preset w-full text-left px-3 py-2 text-sm rounded-md hover:bg-white hover:shadow-sm transition-all">Kemarin</button>
                                            <button type="button" onclick="applyDatePreset('last7')" class="date-preset w-full text-left px-3 py-2 text-sm rounded-md hover:bg-white hover:shadow-sm transition-all">7 Hari Terakhir</button>
                                            <button type="button" onclick="applyDatePreset('last30')" class="date-preset w-full text-left px-3 py-2 text-sm rounded-md hover:bg-white hover:shadow-sm transition-all">30 Hari Terakhir</button>
                                            <button type="button" onclick="applyDatePreset('this_month')" class="date-preset w-full text-left px-3 py-2 text-sm rounded-md hover:bg-white hover:shadow-sm transition-all">Bulan Ini</button>
                                            <button type="button" onclick="applyDatePreset('last_month')" class="date-preset w-full text-left px-3 py-2 text-sm rounded-md hover:bg-white hover:shadow-sm transition-all">Bulan Lalu</button>
                                            <hr class="my-2 border-gray-200">
                                            <button type="button" onclick="clearDateFilter()" class="w-full text-left px-3 py-2 text-sm text-red-600 rounded-md hover:bg-red-50 transition-all">Hapus Filter</button>
                                        </div>
                                        <div class="flex-1 p-4">
                                            <div class="flex items-center justify-between mb-4 border-b border-gray-100 pb-3">
                                                <div class="flex gap-2">
                                                    <div class="bg-gray-50 px-3 py-1.5 rounded text-xs font-medium text-gray-500 border border-gray-100">
                                                        <span id="customStartDate">-</span>
                                                    </div>
                                                    <span class="text-gray-300 self-center">-</span>
                                                    <div class="bg-gray-50 px-3 py-1.5 rounded text-xs font-medium text-gray-500 border border-gray-100">
                                                        <span id="customEndDate">-</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div id="customCalendar" class="mb-4"></div>
                                            <div class="flex justify-end pt-3 border-t border-gray-100">
                                                <button type="button" id="applyCustomDateBtn" onclick="applyCustomDate()" disabled class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-xs font-semibold rounded shadow-sm disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                                                    Terapkan
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="dropdown d-inline-block">
                                <button class="btn btn-white border btn-sm px-3 fw-bold shadow-sm dropdown-toggle" type="button" id="updateDataDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="ti tabler-refresh me-1"></i> Update Data
                                </button>
                                <ul class="dropdown-menu shadow border-0" aria-labelledby="updateDataDropdown" style="border-radius: 8px;">
                                    <li><h6 class="dropdown-header text-uppercase small fw-bold">Pilih Periode Update</h6></li>
                                    
                                    <li><a class="dropdown-item py-2" href="#" onclick="triggerManualSync('today')">
                                        <i class="ti tabler-calendar-event me-2 text-muted"></i> Update Hari Ini
                                    </a></li>
                                    
                                    <li><a class="dropdown-item py-2" href="#" onclick="triggerManualSync('yesterday')">
                                        <i class="ti tabler-history me-2 text-muted"></i> Update Kemarin
                                    </a></li>

                                    <li><a class="dropdown-item py-2" href="#" onclick="triggerManualSync('today_yesterday')">
                                        <i class="ti tabler-calendar-plus me-2 text-muted"></i> Update Hari Ini & Kemarin
                                    </a></li>
                                    
                                    <li><a class="dropdown-item py-2" href="#" onclick="triggerManualSync('this_month')">
                                        <i class="ti tabler-calendar me-2 text-muted"></i> Update Bulan Ini
                                    </a></li>
                                    
                                    <li><hr class="dropdown-divider"></li>
                                    
                                    <li><a class="dropdown-item py-2 text-primary fw-medium" href="#" data-bs-toggle="modal" data-bs-target="#manualSyncDateModal">
                                        <i class="ti tabler-calendar-time me-2"></i> Update Rentang Tanggal...
                                    </a></li>
                                </ul>
                            </div>
                            <div>
                                <button type="button" class="btn btn-white border btn-sm px-3 fw-bold shadow-sm me-2" data-bs-toggle="modal" data-bs-target="#manageAccountsModal">
                                    <i class="ti tabler-settings me-1"></i> Kelola Akun
                                </button>
                            </div>
                            <div>
                                <button type="button" class="btn btn-primary btn-sm px-3 fw-bold shadow-sm" data-bs-toggle="modal" data-bs-target="#createSpendingModal">
                                    <i class="ti tabler-plus me-1"></i> Tambah Data
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body px-0 pt-0 pb-0">
                    <div class="table-responsive-scroll p-0 mx-3 mt-3 mb-3">
                        <table class="table table-hover mb-0">
                            <thead>
                                <tr>
                                    <th class="ps-4">Tanggal</th>
                                    <th>Media</th>
                                    <th>Produk</th>
                                    <th>Akun Iklan</th>
                                    <th class="text-end">Spent</th>
                                    <th class="text-center">Result</th>
                                    <th class="text-end pe-4">CPC</th>
                                    <th class="text-center pe-4">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($data as $item)
                                <tr>
                                    <td class="ps-4 fw-medium">{{ \Carbon\Carbon::parse($item->tanggal)->format('d M Y') }}</td>
                                    <td><span class="media-badge">{{ $item->media }}</span></td>
                                    <td class="fw-semibold">{{ $item->produk }}</td>
                                    <td class="text-muted">{{ $item->akun_iklan }}</td>
                                    <td class="text-end money">Rp {{ number_format($item->spent, 0, ',', '.') }}</td>
                                    <td class="text-center fw-bold text-dark">{{ $item->result }}</td>
                                    <td class="text-end cpc pe-4">Rp {{ number_format($item->cpc, 0, ',', '.') }}</td>
                                    <td class="text-center pe-4">
                                        <button type="button" class="btn btn-sm btn-icon btn-light text-danger shadow-sm border" 
                                                onclick="confirmDelete({{ $item->id }})" 
                                                title="Hapus Data">
                                            <i class="ti tabler-trash"></i>
                                        </button>
                                        <form id="delete-form-{{ $item->id }}" 
                                            action="{{ route('spending_advertiser.destroy', $item->id) }}" 
                                            method="POST" 
                                            class="d-none">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="7" class="text-center py-5 text-muted">
                                        <div class="d-flex flex-column align-items-center">
                                            <div class="bg-light rounded-circle p-3 mb-2">
                                                <i class="ti tabler-database-off fs-1 text-secondary"></i>
                                            </div>
                                            <span class="fw-medium">Belum ada data spending</span>
                                        </div>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@include('spending_advertising.partials.modal-create')
@include('spending_advertising.partials.modal-account')
@include('spending_advertising.partials.modal-sync-date')

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function triggerManualSync(type) {
        let startDate, endDate;
        const today = new Date();
        const formatDate = (date) => date.toISOString().split('T')[0];

        if (type === 'today') {
            startDate = formatDate(today);
            endDate = formatDate(today);
        } else if (type === 'yesterday') {
            const y = new Date(today); y.setDate(today.getDate() - 1);
            startDate = formatDate(y);
            endDate = formatDate(y);
        } else if (type === 'today_yesterday') {
            const y = new Date(today); y.setDate(today.getDate() - 1);
            startDate = formatDate(y);
            endDate = formatDate(today);
        } else if (type === 'this_month') {
            const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
            startDate = formatDate(firstDay);
            endDate = formatDate(today);
        } else if (type === 'custom') {
            startDate = document.getElementById('syncStartDate').value;
            endDate = document.getElementById('syncEndDate').value;
            
            if (!startDate || !endDate) {
                Swal.fire('Error', 'Harap pilih tanggal awal dan akhir.', 'warning');
                return;
            }
            const modalEl = document.getElementById('manualSyncDateModal');
            const modal = bootstrap.Modal.getInstance(modalEl);
            if (modal) modal.hide();
        }

        Swal.fire({
            title: 'Sedang Mengupdate Data...',
            html: 'Mohon tunggu, sistem sedang menarik data dari Meta API.',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        fetch("{{ route('spending_advertiser.sync') }}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({ start_date: startDate, end_date: endDate })
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil!',
                    text: data.message,
                    timer: 2000,
                    showConfirmButton: false
                }).then(() => {
                    location.reload();
                });
            } else {
                Swal.fire('Gagal', data.message || 'Terjadi kesalahan.', 'error');
            }
        })
        .catch(error => {
            console.error(error);
            Swal.fire('Error', 'Terjadi kesalahan server / koneksi.', 'error');
        });
    }

    
    function confirmDelete(id) {
            Swal.fire({
                title: 'Hapus Data?',
                text: "Data yang dihapus tidak dapat dikembalikan!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, Hapus!',
                cancelButtonText: 'Batal',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('delete-form-' + id).submit();
                }
            });
    }
</script>
<script>
    document.addEventListener("DOMContentLoaded", () => {
        const searchInput = document.getElementById('searchInput');
        let timeout = null;

        searchInput.addEventListener('input', function() {
            clearTimeout(timeout);
            timeout = setTimeout(() => {
                const searchValue = this.value;
                const url = new URL(window.location.href);
                if (searchValue) {
                    url.searchParams.set('search', searchValue);
                } else {
                    url.searchParams.delete('search');
                }
                url.searchParams.delete('page'); 
                window.location.href = url.toString();
            }, 600);
        });

        let startDate = null;
        let endDate = null;
        let customStart = null;
        let customEnd = null;
        
        let currentLeftMonth = new Date().getMonth();
        let currentLeftYear = new Date().getFullYear();
        let currentRightMonth = new Date().getMonth() + 1;
        let currentRightYear = new Date().getFullYear();

        const dateBtn = document.getElementById('dateFilterBtn');
        const dateLabel = document.getElementById('dateFilterLabel');
        const dateDropdown = document.getElementById('dateFilterDropdown');
        
        const customStartDateEl = document.getElementById('customStartDate');
        const customEndDateEl = document.getElementById('customEndDate');
        const applyCustomDateBtn = document.getElementById('applyCustomDateBtn');

        dateBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            dateDropdown.classList.toggle('hidden');
            if (!dateDropdown.classList.contains('hidden')) {
                currentLeftMonth = new Date().getMonth();
                currentLeftYear = new Date().getFullYear();
                currentRightMonth = currentLeftMonth + 1;
                currentRightYear = currentLeftYear;
                if (currentRightMonth > 11) { currentRightMonth = 0; currentRightYear++; }
                initializeDualCalendar();
            }
        });
        
        dateDropdown.addEventListener('click', (e) => { e.stopPropagation(); });

        document.addEventListener('click', (e) => {
            if (!dateBtn.contains(e.target) && !dateDropdown.contains(e.target)) {
                dateDropdown.classList.add('hidden');
            }
        });

        const formatDateApi = (date) => {
            const offset = date.getTimezoneOffset();
            date = new Date(date.getTime() - (offset * 60 * 1000));
            return date.toISOString().split('T')[0];
        };
        
        const formatDateDisplay = (date) => {
            return date.toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' });
        };

        function updateDateFilterIndicator(activePreset = null) {
            document.querySelectorAll('.date-preset').forEach(btn => {
                btn.classList.remove('bg-red-50', 'text-red-700', 'border-red-200', 'active');
                btn.classList.add('text-gray-700', 'border-transparent');
            });
            if (activePreset) {
                const activeButtons = document.querySelectorAll(`[onclick="applyDatePreset('${activePreset}')"]`);
                activeButtons.forEach(btn => {
                    btn.classList.add('bg-red-50', 'text-red-700', 'border-red-200', 'active');
                    btn.classList.remove('text-gray-700', 'border-transparent');
                });
            }
        }

        function initializeDualCalendar() {
            const calendarContainer = document.getElementById('customCalendar');
            if (!calendarContainer) return;
            calendarContainer.innerHTML = '';
            
            const calendarHTML = `
                <div class="flex gap-4">
                    <div class="flex-1">
                        <div class="mb-3">
                            <div class="flex items-center justify-between mb-2">
                                <button type="button" onclick="navigateMonth('left', -1)" class="p-1 hover:bg-gray-100 rounded"><i class='ti tabler-chevron-left text-gray-600'></i></button>
                                <div class="text-[13px] font-semibold text-gray-700">${new Date(currentLeftYear, currentLeftMonth).toLocaleDateString('id-ID', { month: 'long', year: 'numeric' })}</div>
                                <div class="w-6"></div>
                            </div>
                            <div class="grid grid-cols-7 gap-1 text-center">
                                ${['M', 'S', 'S', 'R', 'K', 'J', 'S'].map(day => `<div class="text-[11px] text-gray-500 py-1">${day}</div>`).join('')}
                                ${generateCalendarDays(currentLeftYear, currentLeftMonth, 'left')}
                            </div>
                        </div>
                    </div>
                    <div class="flex-1">
                        <div class="mb-3">
                            <div class="flex items-center justify-between mb-2">
                                <div class="w-6"></div>
                                <div class="text-[13px] font-semibold text-gray-700">${new Date(currentRightYear, currentRightMonth).toLocaleDateString('id-ID', { month: 'long', year: 'numeric' })}</div>
                                <button type="button" onclick="navigateMonth('right', 1)" class="p-1 hover:bg-gray-100 rounded"><i class='ti tabler-chevron-right text-gray-600'></i></button>
                            </div>
                            <div class="grid grid-cols-7 gap-1 text-center">
                                ${['M', 'S', 'S', 'R', 'K', 'J', 'S'].map(day => `<div class="text-[11px] text-gray-500 py-1">${day}</div>`).join('')}
                                ${generateCalendarDays(currentRightYear, currentRightMonth, 'right')}
                            </div>
                        </div>
                    </div>
                </div>`;
            calendarContainer.innerHTML = calendarHTML;
        }

        function generateCalendarDays(year, month, calendarSide) {
            const firstDay = new Date(year, month, 1);
            const lastDay = new Date(year, month + 1, 0);
            const startingDay = firstDay.getDay();
            const daysInMonth = lastDay.getDate();
            let daysHTML = '';
            for (let i = 0; i < startingDay; i++) daysHTML += `<div class="h-7"></div>`;
            for (let day = 1; day <= daysInMonth; day++) {
                const date = new Date(year, month, day);
                const isSelected = isDateInRange(date);
                const isToday = isTodayDate(date);
                const isInRange = isDateInSelectedRange(date);
                daysHTML += `<button type="button" onclick="selectCustomDate('${date.toISOString()}')" class="h-7 w-7 text-[11px] rounded-full transition-all ${isSelected ? 'bg-red-600 text-white' : isInRange ? 'bg-red-100 text-red-700' : isToday ? 'bg-red-50 text-red-600' : 'hover:bg-gray-100 text-gray-700'} ${isToday ? 'font-semibold' : ''}">${day}</button>`;
            }
            return daysHTML;
        }

        function isTodayDate(date) { return date.toDateString() === new Date().toDateString(); }
        function isDateInRange(date) {
            if (!customStart && !customEnd) return false;
            const dateStr = date.toISOString().split('T')[0];
            const startStr = customStart ? customStart.toISOString().split('T')[0] : null;
            const endStr = customEnd ? customEnd.toISOString().split('T')[0] : null;
            if (customStart && !customEnd) return dateStr === startStr;
            if (customStart && customEnd) return dateStr === startStr || dateStr === endStr;
            return false;
        }
        function isDateInSelectedRange(date) {
            if (!customStart || !customEnd) return false;
            const dateStr = date.toISOString().split('T')[0];
            const startStr = customStart.toISOString().split('T')[0];
            const endStr = customEnd.toISOString().split('T')[0];
            return dateStr > startStr && dateStr < endStr;
        }

        window.selectCustomDate = (dateString) => {
            const date = new Date(dateString);
            if (!customStart || (customStart && customEnd)) {
                customStart = date; customEnd = null;
            } else if (customStart && !customEnd) {
                if (date < customStart) { customEnd = new Date(customStart); customStart = date; } 
                else { customEnd = date; }
                setTimeout(() => { applyCustomDate(); }, 300);
            }
            updateCustomDateDisplay(); updateApplyButton(); initializeDualCalendar();
        }

        window.navigateMonth = (side, direction) => {
            if (side === 'left') {
                currentLeftMonth += direction;
                if (currentLeftMonth < 0) { currentLeftMonth = 11; currentLeftYear--; } else if (currentLeftMonth > 11) { currentLeftMonth = 0; currentLeftYear++; }
                currentRightMonth = currentLeftMonth + 1; currentRightYear = currentLeftYear;
                if (currentRightMonth > 11) { currentRightMonth = 0; currentRightYear++; }
            } else {
                currentRightMonth += direction;
                if (currentRightMonth < 0) { currentRightMonth = 11; currentRightYear--; } else if (currentRightMonth > 11) { currentRightMonth = 0; currentRightYear++; }
                currentLeftMonth = currentRightMonth - 1; currentLeftYear = currentRightYear;
                if (currentLeftMonth < 0) { currentLeftMonth = 11; currentLeftYear--; }
            }
            initializeDualCalendar();
        }

        function updateCustomDateDisplay() {
            if (customStartDateEl) customStartDateEl.textContent = customStart ? formatDateDisplay(customStart) : '-';
            if (customEndDateEl) customEndDateEl.textContent = customEnd ? formatDateDisplay(customEnd) : '-';
        }
        function updateApplyButton() { if (applyCustomDateBtn) applyCustomDateBtn.disabled = !customStart || !customEnd; }


        window.applyCustomDate = () => {
            if (!customStart || !customEnd) return;
            const sDate = formatDateApi(customStart);
            const eDate = formatDateApi(customEnd);
            
            const url = new URL(window.location.href);
            url.searchParams.set('start_date', sDate);
            url.searchParams.set('end_date', eDate);
            url.searchParams.delete('page');
            window.location.href = url.toString();
        }

        window.applyDatePreset = (preset) => {
            const today = new Date();
            let start = new Date(); let end = new Date();
            customStart = null; customEnd = null;
            
            switch (preset) {
                case 'today': break; 
                case 'yesterday': start.setDate(today.getDate() - 1); end.setDate(today.getDate() - 1); break;
                case 'last7': start.setDate(today.getDate() - 6); break;
                case 'last30': start.setDate(today.getDate() - 29); break;
                case 'this_month': start = new Date(today.getFullYear(), today.getMonth(), 1); break;
                case 'last_month': start = new Date(today.getFullYear(), today.getMonth() - 1, 1); end = new Date(today.getFullYear(), today.getMonth(), 0); break;
            }

            const sDate = formatDateApi(start);
            const eDate = formatDateApi(end);
            
            const url = new URL(window.location.href);
            url.searchParams.set('start_date', sDate);
            url.searchParams.set('end_date', eDate);
            url.searchParams.delete('page');
            window.location.href = url.toString();
        };

        window.clearDateFilter = () => {
            window.location.href = "{{ route('spending_advertiser.index') }}";
        };

        const toggles = document.querySelectorAll('.account-toggle');

        toggles.forEach(toggle => {
            toggle.addEventListener('change', function() {
                const accountId = this.getAttribute('data-id');
                const isActive = this.checked ? 1 : 0;
                
                // Disable sementara biar gak spam klik
                this.disabled = true;

                fetch("{{ route('ads.account.toggleAccountStatus') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify({
                        id: accountId,
                        is_active: isActive
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if(data.status === 'success') {
                        // Opsional: Tampilkan notifikasi toast kecil jika perlu
                        console.log('Status updated: ' + data.new_status);
                    } else {
                        alert('Gagal mengupdate status.');
                        this.checked = !isActive; // Kembalikan posisi toggle
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Terjadi kesalahan sistem.');
                    this.checked = !isActive; // Kembalikan posisi toggle
                })
                .finally(() => {
                    this.disabled = false;
                });
            });
        });
    });
</script>
@endpush