@extends('layouts.app')

@section('content')
<div class="main-content">
    <div class="container-fluid">
        <div class="page-header">
            <div class="row align-items-end">
                <div class="col-lg-8">
                    <div class="page-header-title">
                        <i class="ik ik-user-check bg-blue"></i>
                        <div class="d-inline">
                            <h5>Penagihanku</h5>
                            <span>Daftar debitur yang telah saya tagih</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <nav class="breadcrumb-container" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ url('/') }}"><i class="ik ik-home"></i></a></li>
                            <li class="breadcrumb-item active" aria-current="page">Penagihanku</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3>Daftar Debitur yang Saya Tagih</h3>
                        @if(isset($kantor))
                            <span class="badge badge-info" style="font-size:14px; padding:8px 15px;">
                                <i class="ik ik-grid"></i> Kantor: {{ $kantor }}
                            </span>
                        @endif
                    </div>
                    <div class="card-body">
                        <!-- Filter -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="tanggal_data"><i class="ik ik-calendar"></i> Tanggal Data <span class="text-danger">*</span></label>
                                    <input type="date" name="tanggal_data" id="tanggal_data" class="form-control" required>
                                    <small class="text-muted">Format: YYYY-MM-DD (Wajib dipilih)</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <div>
                                        <button type="button" id="btnTampilkan" class="btn btn-primary btn-block">
                                            <i class="ik ik-filter"></i> Tampilkan Data
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Info Periode -->
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <div class="alert alert-info mb-0">
                                    <i class="ik ik-info"></i> 
                                    <strong>Informasi:</strong><br>
                                    📅 Periode data tersedia: 
                                    @if(isset($availableDates) && count($availableDates) > 0)
                                        {{ date('d-m-Y', strtotime(end($availableDates))) }} 
                                        s/d {{ date('d-m-Y', strtotime($availableDates[0])) }}
                                        <br>
                                        <small class="text-muted">Total {{ count($availableDates) }} periode data</small>
                                    @else
                                        <span class="text-muted">Tidak ada data</span>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- Loading -->
                        <div id="loadingData" style="display: none; text-align: center; padding: 50px;">
                            <i class="ik ik-refresh-cw" style="font-size: 40px; animation: spin 1s linear infinite; display: inline-block;"></i>
                            <br><br>Memuat data penagihan...
                        </div>

                        <!-- Data Table -->
                        <div id="dataContainer" style="display: none;">
                            <div class="alert alert-success alert-sm" id="infoTotal" style="padding: 8px 12px; background: #e8f5e9; display: none;">
                                <i class="ik ik-check-circle"></i> 
                                <strong>Total Debitur:</strong> <span id="totalDebitur">0</span> debitur dengan data penagihan
                            </div>

                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover" id="dataTable">
                                    <thead class="thead-light">
                                        <tr>
                                            <th width="50">No</th>
                                            <th class="sortable" data-sort="norekening" style="cursor:pointer;">No. Rekening <i class="ik ik-arrow-up"></i></th>
                                            <th class="sortable" data-sort="namadebitur" style="cursor:pointer;">Nama Debitur <i class="ik ik-arrow-up"></i></th>
                                            <th class="sortable text-center" data-sort="kolek" style="cursor:pointer;">Kolek <i class="ik ik-arrow-up"></i></th>
                                            <th class="sortable" data-sort="kualitas" style="cursor:pointer;">Kualitas <i class="ik ik-arrow-up"></i></th>
                                            <th class="sortable text-right" data-sort="bakidebet" style="cursor:pointer;">Baki Debet <i class="ik ik-arrow-up"></i></th>
                                            <th class="sortable text-center" data-sort="jumtagih" style="cursor:pointer;">Jml Tagihan <i class="ik ik-arrow-up"></i></th>
                                            <th class="text-center">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableBody">
                                        <tr>
                                            <td colspan="8" class="text-center text-muted" style="padding: 60px 20px;">
                                                <i class="ik ik-inbox" style="font-size: 64px; opacity: 0.3; display: block; margin-bottom: 15px;"></i>
                                                <strong>Belum ada data</strong><br>
                                                <small>Silakan pilih tanggal dan klik "Tampilkan Data"</small>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <!-- Pagination -->
                            <div class="row mt-3">
                                <div class="col-md-6">
                                    <span id="infoPagination">Menampilkan 0 dari 0 data</span>
                                </div>
                                <div class="col-md-6">
                                    <nav>
                                        <ul class="pagination justify-content-end" id="paginationControls"></ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Detail -->
<div class="modal fade" id="modalDetail" tabindex="-1" role="dialog" aria-labelledby="modalDetailLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title" id="modalDetailLabel">
                    <i class="ik ik-file-text"></i> Detail Penagihan Debitur
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="detailLoading" style="text-align: center; padding: 50px;">
                    <i class="ik ik-refresh-cw" style="font-size: 40px; animation: spin 1s linear infinite; display: inline-block;"></i>
                    <br><br>Memuat detail penagihan...
                </div>
                <div id="detailContent" style="display: none;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    <i class="ik ik-x"></i> Tutup
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Foto -->
<div class="modal fade" id="modalFoto" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white">
                <h5 class="modal-title"><i class="ik ik-image"></i> Foto Lokasi Penagihan</h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body text-center" id="fotoModalBody"></div>
        </div>
    </div>
</div>

<!-- Modal Map -->
<div class="modal fade" id="modalMap" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title"><i class="ik ik-map-pin"></i> Lokasi Penagihan</h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="map" style="height: 400px;"></div>
                <p class="mt-2" id="mapAddress"></p>
            </div>
        </div>
    </div>
</div>

<style>
    @keyframes spin { 
        0% { transform: rotate(0deg); } 
        100% { transform: rotate(360deg); } 
    }
    .badge { padding: 5px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; }
    .badge-success { background-color: #28a745; color: white; }
    .badge-warning { background-color: #ffc107; color: #212529; }
    .badge-danger { background-color: #dc3545; color: white; }
    .badge-dark { background-color: #343a40; color: white; }
    .badge-secondary { background-color: #6c757d; color: white; }
    .badge-info { background-color: #17a2b8; color: white; }
    .table td { vertical-align: middle; padding: 10px; }
    .text-right { text-align: right; }
    .text-center { text-align: center; }
    .user-badge { background: #0d6efd; color: white; padding: 4px 12px; border-radius: 20px; font-size: 12px; display: inline-block; }
    .sortable i { margin-left: 5px; }
    .sortable.active-asc i { transform: rotate(180deg); }
    .sortable.active-desc i { transform: rotate(0deg); }
</style>
@endsection






@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<script>
(function() {
    'use strict';

    // ========== STATE ==========
    let currentTanggalData = '';
    let currentInfoDebitur = null;
    let currentPage      = 1;
    let currentSort      = 'namadebitur';
    let currentDirection = 'asc';
    let perPage          = 10;
    let isLoading        = false;

    // ========== DOM REFS ==========
    const $tanggalInput = document.getElementById('tanggal_data');
    const $btnTampilkan = document.getElementById('btnTampilkan');
    const $loadingDiv   = document.getElementById('loadingData');
    const $dataContainer = document.getElementById('dataContainer');
    const $tableBody    = document.getElementById('tableBody');
    const $infoTotal    = document.getElementById('infoTotal');
    const $totalDebitur = document.getElementById('totalDebitur');
    const $paginationControls = document.getElementById('paginationControls');
    const $infoPagination = document.getElementById('infoPagination');

    // ========== HELPERS ==========
    function showLoading() {
        if ($loadingDiv) $loadingDiv.style.display = 'block';
        if ($dataContainer) $dataContainer.style.display = 'none';
    }

    function hideLoading() {
        if ($loadingDiv) $loadingDiv.style.display = 'none';
        // juga sembunyikan global overlay jika ada
        const globalOverlay = document.getElementById('globalLoadingOverlay');
        if (globalOverlay) globalOverlay.style.display = 'none';
    }

    function showToast(message, type = 'success') {
        Swal.fire({
            icon: type,
            title: type === 'success' ? 'Berhasil' : (type === 'error' ? 'Error' : 'Informasi'),
            text: message,
            timer: 3000,
            showConfirmButton: false,
            toast: true,
            position: 'top-end'
        });
    }

    function formatRupiah(value) {
        if (!value || value == 0) return 'Rp 0';
        return 'Rp ' + new Intl.NumberFormat('id-ID').format(value);
    }

    function formatNumber(value) {
        if (!value || value == 0) return '0';
        return new Intl.NumberFormat('id-ID').format(value);
    }

    function escapeHtml(text) {
        if (!text) return '-';
        const div = document.createElement('div');
        div.appendChild(document.createTextNode(text));
        return div.innerHTML;
    }

    // ========== RENDER TABLE ==========
    function renderTable(data) {
        let html = '';
        data.forEach((item, index) => {
            let rowNumber = (currentPage - 1) * perPage + index + 1;
            let badgeClass = 'badge-secondary';
            switch(parseInt(item.kolek)) {
                case 1: badgeClass = 'badge-success'; break;
                case 2: badgeClass = 'badge-warning'; break;
                case 3: badgeClass = 'badge-danger'; break;
                case 4: badgeClass = 'badge-danger'; break;
                case 5: badgeClass = 'badge-dark'; break;
            }
            html += `
                <tr>
                    <td class="text-center">${rowNumber}</td>
                    <td><strong>${escapeHtml(item.norekening)}</strong></td>
                    <td><strong>${escapeHtml(item.namadebitur)}</strong></td>
                    <td class="text-center"><span class="badge ${badgeClass}">${item.kolek || '-'}</span></td>
                    <td>${escapeHtml(item.kualitas || '-')}</td>
                    <td class="text-right">${formatRupiah(item.bakidebet)}</td>
                    <td class="text-center">
                        <span class="badge badge-danger" style="font-size: 14px; padding: 8px 15px; border-radius: 20px;">
                            <i class="ik ik-file-text"></i> ${formatNumber(item.jumtagih)} Tagihan
                        </span>
                    </td>
                    <td class="text-center">
                        <button type="button" 
                                class="btn btn-sm btn-info btn-detail" 
                                data-norekening="${escapeHtml(item.norekening)}"
                                data-namadebitur="${escapeHtml(item.namadebitur)}"
                                data-kantor="${escapeHtml(item.kantor)}"
                                data-bakidebet="${item.bakidebet}"
                                data-kualitas="${escapeHtml(item.kualitas)}"
                                data-kolek="${item.kolek}"
                                data-toggle="tooltip" 
                                title="Lihat Detail Penagihan">
                            <i class="ik ik-eye"></i> Detail
                        </button>
                    </td>
                </tr>
            `;
        });
        if ($tableBody) $tableBody.innerHTML = html;
        // Initialize tooltips with jQuery if available
        if (typeof $ !== 'undefined' && $.fn.tooltip) {
            $('[data-toggle="tooltip"]').tooltip();
        }
    }

    // ========== PAGINATION ==========
    function updatePagination(pagination) {
        let html = '';
        let current = pagination.currentPage;
        let last = pagination.lastPage;

        if (last <= 1) {
            if ($paginationControls) $paginationControls.innerHTML = '';
            return;
        }

        if (current > 1) {
            html += `<li class="page-item"><a class="page-link" href="#" data-page="${current-1}">«</a></li>`;
        }
        let startPage = Math.max(1, current - 2);
        let endPage = Math.min(last, current + 2);
        if (startPage > 1) {
            html += `<li class="page-item"><a class="page-link" href="#" data-page="1">1</a></li>`;
            if (startPage > 2) html += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
        }
        for (let i = startPage; i <= endPage; i++) {
            let active = (i === current) ? 'active' : '';
            html += `<li class="page-item ${active}"><a class="page-link" href="#" data-page="${i}">${i}</a></li>`;
        }
        if (endPage < last) {
            if (endPage < last - 1) html += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
            html += `<li class="page-item"><a class="page-link" href="#" data-page="${last}">${last}</a></li>`;
        }
        if (current < last) {
            html += `<li class="page-item"><a class="page-link" href="#" data-page="${current+1}">»</a></li>`;
        }
        if ($paginationControls) $paginationControls.innerHTML = html;
    }

    function updateInfoPagination(pagination) {
        if (!$infoPagination) return;
        if (pagination.total === 0) {
            $infoPagination.textContent = 'Tidak ada data';
            return;
        }
        let start = (pagination.currentPage - 1) * pagination.perPage + 1;
        let end = Math.min(pagination.currentPage * pagination.perPage, pagination.total);
        $infoPagination.textContent = `Menampilkan ${start}-${end} dari ${pagination.total} data`;
    }

    // ========== LOAD DATA ==========
    function loadData() {
        if (isLoading) return;
        isLoading = true;
        showLoading();

        // FALLBACK: Pastikan loading hilang setelah 4 detik (jika ada error)
        const fallbackTimer = setTimeout(function() {
            if (isLoading) {
                hideLoading();
                isLoading = false;
                console.warn('Loading fallback triggered due to timeout.');
                // Tampilkan pesan error di tabel
                if ($tableBody) {
                    $tableBody.innerHTML = `
                        <tr>
                            <td colspan="8" class="text-center text-danger" style="padding: 50px;">
                                <i class="ik ik-alert-triangle" style="font-size: 48px; opacity: 0.3;"></i><br>
                                <strong>Waktu muat habis</strong><br>
                                <small>Silakan coba lagi</small>
                            </td>
                        </tr>
                    `;
                }
                if ($dataContainer) $dataContainer.style.display = 'block';
                if ($infoTotal) $infoTotal.style.display = 'none';
                if ($paginationControls) $paginationControls.innerHTML = '';
                if ($infoPagination) $infoPagination.textContent = '';
            }
        }, 4000);

        const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '{{ csrf_token() }}';

        fetch('{{ route("penagihansaya.getData") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': token,
                'Accept': 'application/json'
            },
            body: JSON.stringify({
                tanggal_data: currentTanggalData,
                sort: currentSort,
                direction: currentDirection,
                page: currentPage,
                perPage: perPage
            })
        })
        .then(response => response.json())
        .then(response => {
            clearTimeout(fallbackTimer);
            hideLoading();
            if (response.success) {
                if (response.data && response.data.length > 0) {
                    renderTable(response.data);
                    if ($dataContainer) $dataContainer.style.display = 'block';
                    if ($infoTotal) $infoTotal.style.display = 'block';
                    if ($totalDebitur) $totalDebitur.textContent = response.pagination.total;
                    updatePagination(response.pagination);
                    updateInfoPagination(response.pagination);
                } else {
                    if ($tableBody) {
                        $tableBody.innerHTML = `
                            <tr>
                                <td colspan="8" class="text-center text-warning" style="padding: 50px;">
                                    <i class="ik ik-alert-circle" style="font-size: 48px; opacity: 0.3;"></i><br>
                                    <strong>Tidak ada data penagihan</strong><br>
                                    <small>Untuk tanggal yang dipilih</small>
                                </td>
                            </tr>
                        `;
                    }
                    if ($dataContainer) $dataContainer.style.display = 'block';
                    if ($infoTotal) $infoTotal.style.display = 'none';
                    if ($paginationControls) $paginationControls.innerHTML = '';
                    if ($infoPagination) $infoPagination.textContent = 'Menampilkan 0 dari 0 data';
                }
            } else {
                if ($tableBody) {
                    $tableBody.innerHTML = `
                        <tr>
                            <td colspan="8" class="text-center text-warning" style="padding: 50px;">
                                <i class="ik ik-alert-circle" style="font-size: 48px; opacity: 0.3;"></i><br>
                                <strong>${response.message || 'Data tidak tersedia'}</strong>
                            </td>
                        </tr>
                    `;
                }
                if ($dataContainer) $dataContainer.style.display = 'block';
                if ($infoTotal) $infoTotal.style.display = 'none';
                if ($paginationControls) $paginationControls.innerHTML = '';
                if ($infoPagination) $infoPagination.textContent = '';
            }
            isLoading = false;
        })
        .catch(error => {
            clearTimeout(fallbackTimer);
            hideLoading();
            let errorMsg = 'Terjadi kesalahan pada server';
            if (error.message) errorMsg = error.message;
            showToast(errorMsg, 'error');
            console.error(error);
            if ($tableBody) {
                $tableBody.innerHTML = `
                    <tr>
                        <td colspan="8" class="text-center text-danger" style="padding: 50px;">
                            <i class="ik ik-alert-triangle" style="font-size: 48px; opacity: 0.3;"></i><br>
                            <strong>Gagal memuat data</strong><br>
                            <small>${errorMsg}</small>
                        </td>
                    </tr>
                `;
            }
            if ($dataContainer) $dataContainer.style.display = 'block';
            if ($infoTotal) $infoTotal.style.display = 'none';
            if ($paginationControls) $paginationControls.innerHTML = '';
            if ($infoPagination) $infoPagination.textContent = '';
            isLoading = false;
        });
    }

    // ========== SET DEFAULT TANGGAL ==========
    const availableDates = @json($availableDates);
    if (availableDates && availableDates.length > 0) {
        const maxDate = availableDates[0];
        if ($tanggalInput) {
            $tanggalInput.setAttribute('min', availableDates[availableDates.length - 1]);
            $tanggalInput.setAttribute('max', maxDate);
            $tanggalInput.value = maxDate;
        }
    }

    // ========== EVENT HANDLERS ==========
    // Tombol Tampilkan
    if ($btnTampilkan) {
        $btnTampilkan.addEventListener('click', function() {
            const tanggalData = $tanggalInput ? $tanggalInput.value : '';
            if (!tanggalData) {
                showToast('Harap pilih Tanggal Data terlebih dahulu!', 'error');
                if ($tanggalInput) $tanggalInput.focus();
                return;
            }
            currentTanggalData = tanggalData.replace(/-/g, '');
            currentPage = 1;
            loadData();
        });
    }

    // Pagination (event delegation)
    document.addEventListener('click', function(e) {
        const target = e.target.closest('.page-link');
        if (!target) return;
        e.preventDefault();
        const page = parseInt(target.dataset.page);
        if (page && page !== currentPage && !isLoading) {
            currentPage = page;
            loadData();
        }
    });

    // Sorting
    document.addEventListener('click', function(e) {
        const target = e.target.closest('.sortable');
        if (!target || isLoading) return;
        const sort = target.dataset.sort;
        if (currentSort === sort) {
            currentDirection = (currentDirection === 'asc') ? 'desc' : 'asc';
        } else {
            currentSort = sort;
            currentDirection = 'asc';
        }
        // Update icon
        document.querySelectorAll('.sortable i').forEach(icon => {
            icon.className = 'ik ik-arrow-up';
        });
        const icon = target.querySelector('i');
        if (icon) {
            icon.className = currentDirection === 'asc' ? 'ik ik-arrow-up' : 'ik ik-arrow-down';
        }
        currentPage = 1;
        loadData();
    });

    // ========== DETAIL ==========
    document.addEventListener('click', function(e) {
        const target = e.target.closest('.btn-detail');
        if (!target) return;
        const norekening = target.dataset.norekening;
        const namadebitur = target.dataset.namadebitur;
        const kantor = target.dataset.kantor;
        const bakidebet = target.dataset.bakidebet;
        const kualitas = target.dataset.kualitas;
        const kolek = target.dataset.kolek;

        if (!norekening) {
            showToast('Data rekening tidak ditemukan!', 'error');
            return;
        }

        currentInfoDebitur = { namadebitur, norekening, kantor, bakidebet, kualitas, kolek };

        const modal = document.getElementById('modalDetail');
        const detailLoading = document.getElementById('detailLoading');
        const detailContent = document.getElementById('detailContent');

        if (modal) {
            if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
                const bsModal = new bootstrap.Modal(modal);
                bsModal.show();
            } else {
                modal.style.display = 'block';
                modal.classList.add('show');
            }
        }
        if (detailLoading) detailLoading.style.display = 'block';
        if (detailContent) detailContent.style.display = 'none';

        const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '{{ csrf_token() }}';

        fetch('{{ route("penagihansaya.getDetail") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': token,
                'Accept': 'application/json'
            },
            body: JSON.stringify({
                norekening: norekening,
                tanggal_data: currentTanggalData
            })
        })
        .then(response => response.json())
        .then(response => {
            if (detailLoading) detailLoading.style.display = 'none';
            if (response.success) {
                renderDetailModal(response.data, response.info_debitur);
                if (detailContent) detailContent.style.display = 'block';
            } else {
                if (detailContent) {
                    detailContent.innerHTML = `
                        <div class="alert alert-warning text-center">
                            <i class="ik ik-alert-circle" style="font-size: 48px; opacity: 0.3;"></i><br>
                            Tidak ada detail penagihan untuk debitur <strong>${escapeHtml(namadebitur)}</strong>
                        </div>
                    `;
                    detailContent.style.display = 'block';
                }
            }
        })
        .catch(error => {
            if (detailLoading) detailLoading.style.display = 'none';
            if (detailContent) {
                detailContent.innerHTML = `
                    <div class="alert alert-danger">
                        <i class="ik ik-alert-triangle"></i> Gagal memuat detail penagihan.<br>
                        <small>Silakan coba lagi.</small>
                    </div>
                `;
                detailContent.style.display = 'block';
            }
        });
    });

    function renderDetailModal(data, infoDebitur) {
        const debitur = infoDebitur || currentInfoDebitur;
        let badgeClass = 'badge-secondary';
        if (debitur && debitur.kolek) {
            switch(parseInt(debitur.kolek)) {
                case 1: badgeClass = 'badge-success'; break;
                case 2: badgeClass = 'badge-warning'; break;
                case 3: badgeClass = 'badge-danger'; break;
                case 4: badgeClass = 'badge-danger'; break;
                case 5: badgeClass = 'badge-dark'; break;
            }
        }
        let html = `
            <div class="alert alert-info">
                <div class="row">
                    <div class="col-md-6">
                        <i class="ik ik-user"></i> <strong>Nama Debitur:</strong> ${escapeHtml(debitur?.namadebitur || '-')}<br>
                        <i class="ik ik-credit-card"></i> <strong>No. Rekening:</strong> ${escapeHtml(debitur?.norekening || '-')}
                    </div>
                    <div class="col-md-6">
                        <i class="ik ik-grid"></i> <strong>Kantor:</strong> ${escapeHtml(debitur?.kantor || '-')}<br>
                        <i class="ik ik-dollar-sign"></i> <strong>Baki Debet:</strong> ${formatRupiah(debitur?.bakidebet)}<br>
                        <i class="ik ik-bar-chart"></i> <strong>Kolek/Kualitas:</strong> 
                        <span class="badge ${badgeClass}">${debitur?.kolek || '-'}</span> / ${escapeHtml(debitur?.kualitas || '-')}
                    </div>
                </div>
                <hr class="my-2">
                <div><i class="ik ik-file-text"></i> <strong>Total Data Penagihan:</strong> ${data.length} record</div>
            </div>
            <div class="table-responsive">
                <table class="table table-bordered table-striped">
                    <thead class="thead-light">
                        <tr>
                            <th>No</th>
                            <th>User Penagih</th>
                            <th>Waktu Entry</th>
                            <th>Waktu Tagih</th>
                            <th>Nominal Tagih</th>
                            <th>Kol Saat Tagih</th>
                            <th>Sanksi</th>
                            <th>Tgl Janji</th>
                            <th>Keterangan</th>
                            <th>Lokasi</th>
                        </tr>
                    </thead>
                    <tbody>
        `;
        data.forEach((item, index) => {
            const lokasi = item.lokasi_detail;
            html += `
                <tr>
                    <td class="text-center">${index + 1}</td>
                    <td><span class="user-badge"><i class="ik ik-user-check"></i> ${escapeHtml(item.namauser || '-')}</span></td>
                    <td><small>${item.datetime_entry || '-'}</small></td>
                    <td><small>${item.waktutagih || '-'}</small></td>
                    <td class="text-danger font-weight-bold">${formatRupiah(item.nominal_tagih)}</td>
                    <td class="text-center">${item.kol_saat_tagih || '-'}</td>
                    <td>${escapeHtml(item.sanksi_debitur || '-')}</td>
                    <td>${item.tgl_janji || '-'}</td>
                    <td><small>${escapeHtml(item.keterangan_tagih || '-')}</small></td>
                    <td class="text-center">
            `;
            if (lokasi) {
                html += `
                    <button class="btn btn-sm btn-outline-info" onclick="showLocationDetail(${index})" data-toggle="tooltip" title="Lihat Lokasi">
                        <i class="ik ik-map-pin"></i> Lihat
                    </button>
                    <div id="locationDetail_${index}" style="display:none;">
                        <div class="mt-2">
                            ${lokasi.latitude && lokasi.longitude ? `
                                <button class="btn btn-sm btn-success" onclick="showMapOnModal(${lokasi.latitude}, ${lokasi.longitude}, '${escapeHtml(lokasi.lokasi_text || '')}')">
                                    <i class="ik ik-map"></i> Peta
                                </button>
                            ` : ''}
                            ${lokasi.foto_url ? `
                                <button class="btn btn-sm btn-primary" onclick="showFotoModal('${lokasi.foto_url}', '${escapeHtml(lokasi.filename)}')">
                                    <i class="ik ik-image"></i> Foto
                                </button>
                            ` : ''}
                            <div class="mt-1"><small class="text-muted">Alamat: ${escapeHtml(lokasi.lokasi_text || '-')}</small></div>
                        </div>
                    </div>
                `;
            } else {
                html += '<span class="text-muted">-</span>';
            }
            html += `</td></tr>`;
        });
        html += `</tbody></table></div>`;
        const detailContent = document.getElementById('detailContent');
        if (detailContent) detailContent.innerHTML = html;

        if (typeof $ !== 'undefined' && $.fn.tooltip) {
            $('[data-toggle="tooltip"]').tooltip();
        }
    }

    // ========== GLOBAL FUNCTIONS ==========
    window.showLocationDetail = function(index) {
        const detailDiv = document.getElementById(`locationDetail_${index}`);
        if (detailDiv) {
            detailDiv.style.display = detailDiv.style.display === 'none' ? 'block' : 'none';
        }
    };

    window.showFotoModal = function(fotoUrl, filename) {
        const fotoModalBody = document.getElementById('fotoModalBody');
        if (fotoModalBody) {
            fotoModalBody.innerHTML = `
                <img src="${fotoUrl}" class="img-fluid" alt="${filename}" style="max-height: 70vh;">
                <p class="mt-2 text-muted">${filename || 'Foto penagihan'}</p>
                <button class="btn btn-secondary mt-2" data-dismiss="modal"><i class="ik ik-x"></i> Tutup</button>
            `;
        }
        const modal = document.getElementById('modalFoto');
        if (modal) {
            if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
                const bsModal = new bootstrap.Modal(modal);
                bsModal.show();
            } else {
                modal.style.display = 'block';
                modal.classList.add('show');
            }
        }
    };

    window.showMapOnModal = function(lat, lng, address) {
        const modal = document.getElementById('modalMap');
        if (modal) {
            if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
                const bsModal = new bootstrap.Modal(modal);
                bsModal.show();
            } else {
                modal.style.display = 'block';
                modal.classList.add('show');
            }
        }
        setTimeout(function() {
            if (typeof L !== 'undefined') {
                if (window.currentMap) window.currentMap.remove();
                const mapContainer = document.getElementById('map');
                if (mapContainer && mapContainer.offsetWidth > 0) {
                    window.currentMap = L.map('map').setView([lat, lng], 15);
                    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                        attribution: '© OpenStreetMap contributors'
                    }).addTo(window.currentMap);
                    L.marker([lat, lng]).addTo(window.currentMap).bindPopup(address).openPopup();
                    const mapAddress = document.getElementById('mapAddress');
                    if (mapAddress) mapAddress.innerHTML = `<strong><i class="ik ik-map-pin"></i> Alamat:</strong> ${address}`;
                } else {
                    const mapAddress = document.getElementById('mapAddress');
                    if (mapAddress) mapAddress.innerHTML = `<strong>Alamat:</strong> ${address}<br><small class="text-danger">Container peta tidak siap, silakan coba lagi</small>`;
                }
            } else {
                const mapAddress = document.getElementById('mapAddress');
                if (mapAddress) mapAddress.innerHTML = `<strong>Alamat:</strong> ${address}<br><small class="text-danger">Peta tidak dapat dimuat, refresh halaman</small>`;
            }
        }, 500);
    };

    // ========== GLOBAL ERROR HANDLER ==========
    window.onerror = function(msg, url, line, col, error) {
        hideLoading();
        isLoading = false;
        console.warn('Global error caught:', msg, url, line, col);
        return false; // prevent default handler
    };

    // ========== CLEANUP ==========
    document.addEventListener('hidden.bs.modal', function(e) {
        if (e.target.id === 'modalDetail') {
            const detailContent = document.getElementById('detailContent');
            if (detailContent) detailContent.innerHTML = '';
            currentInfoDebitur = null;
        }
        if (e.target.id === 'modalMap') {
            if (window.currentMap) {
                window.currentMap.remove();
                window.currentMap = null;
            }
        }
    });

    // ========== AUTO LOAD ==========
    if ($tanggalInput && $tanggalInput.value) {
        setTimeout(function() {
            if ($btnTampilkan) $btnTampilkan.click();
        }, 300);
    }
})();
</script>
@endpush