@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-credit-card bg-blue"></i>
                        <div class="d-inline">
                            <h5>Penagihan Kredit per User</h5>
                            <span>Menampilkan daftar penagihan berdasarkan user dan filter</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">Penagihan per User</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3>Daftar Penagihan per User</h3>
                    </div>
                    <div class="card-body">
                        <!-- Filter Section -->
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="kode_kantor"><i class="ik ik-grid"></i> Kode Kantor</label>
                                    <select name="kode_kantor" id="kode_kantor" class="form-control">
                                        <option value="all">-- Semua Kantor --</option>
                                        @forelse($kodeKantor as $kantor)
                                            <option value="{{ $kantor }}">{{ $kantor }}</option>
                                        @empty
                                            <option value="" disabled>Tidak ada data kantor</option>
                                        @endforelse
                                    </select>
                                    <small class="text-muted">Pilih "Semua Kantor" untuk menampilkan semua data</small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <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-4">
                                <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 Data -->
                        <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 Indicator -->
                        <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 Section -->
                        <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 User:</strong> <span id="totalUser">0</span> user 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>Nama User</th>
                                            <th class="text-center" width="150">Jumlah Tagihan</th>
                                            <th class="text-center" width="100">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableBody">
                                        <tr>
                                            <td colspan="4" 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 filter di atas dan klik "Tampilkan Data"</small>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Detail Penagihan -->
<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
                </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 Peta -->
<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-danger {
        background-color: #dc3545;
        color: white;
    }
    
    .table td {
        vertical-align: middle;
        padding: 10px;
    }
    
    .location-card {
        background: #f8f9fa;
        border-left: 4px solid #0d6efd;
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 15px;
    }
    
    .foto-thumbnail {
        max-width: 80px;
        max-height: 60px;
        cursor: pointer;
        border-radius: 4px;
        transition: transform 0.2s;
    }
    
    .foto-thumbnail:hover {
        transform: scale(1.05);
    }
    
    .detail-card {
        margin-bottom: 20px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        overflow: hidden;
    }
    
    .detail-card-header {
        background: #f8f9fa;
        padding: 12px 15px;
        border-bottom: 1px solid #e0e0e0;
        font-weight: bold;
    }
    
    .detail-card-body {
        padding: 15px;
    }

    
        #modalDetail .modal-body {
    max-height: 70vh;
    overflow-y: auto;
}
    
    @media (max-width: 768px) {
        .table td, .table th {
            font-size: 12px;
            padding: 8px;
        }   
    }

</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>
$(document).ready(function() {
    let currentKodeKantor = 'all';
    let currentTanggalData = '';
    
    // Set tanggal minimum dan maksimum dari data yang tersedia
    const availableDates = @json($availableDates);
    if (availableDates && availableDates.length > 0) {
        const minDate = availableDates[availableDates.length - 1];
        const maxDate = availableDates[0];
        $('#tanggal_data').attr('min', minDate);
        $('#tanggal_data').attr('max', maxDate);
        $('#tanggal_data').val(maxDate);
    }
    
    // Helper functions
    function showLoading() {
        $('#loadingData').show();
        $('#dataContainer').hide();
    }
    
    function hideLoading() {
        $('#loadingData').hide();
    }
    
    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 formatFileSize(bytes) {
        if (!bytes) return '-';
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(1024));
        return (bytes / Math.pow(1024, i)).toFixed(2) + ' ' + sizes[i];
    }
    
    function escapeHtml(text) {
        if (!text) return '-';
        const div = document.createElement('div');
        div.appendChild(document.createTextNode(text));
        return div.innerHTML;
    }
    
    // Pagination variables untuk modal detail
    let currentDetailData = [];
    let currentPage = 1;
    const itemsPerPage = 10;
    
    function renderLocationInfo(lokasi) {
        let html = `
            <div class="location-card">
                <div class="row">
                    <div class="col-md-7">
                        <p><strong><i class="ik ik-map"></i> Alamat Lengkap:</strong></p>
                        <p class="text-muted">${escapeHtml(lokasi.lokasi_text || 'Tidak tersedia')}</p>
                        <p><strong><i class="ik ik-clock"></i> Waktu Upload:</strong></p>
                        <p>${lokasi.waktu_upload || '-'}</p>
                        <p><strong><i class="ik ik-crosshair"></i> Koordinat:</strong></p>
                        <p>
                            Lat: ${lokasi.latitude || '-'} | Lng: ${lokasi.longitude || '-'}
                            ${lokasi.latitude && lokasi.longitude ? `
                                <button class="btn btn-sm btn-outline-success ml-2" onclick="showMapOnModal(${lokasi.latitude}, ${lokasi.longitude}, '${escapeHtml(lokasi.lokasi_text || '')}')">
                                    <i class="ik ik-map"></i> Lihat Peta
                                </button>
                            ` : ''}
                        </p>
                        <p><strong><i class="ik ik-folder"></i> Info File:</strong></p>
                        <p><small>File: ${lokasi.filename || '-'}<br>Size: ${formatFileSize(lokasi.file_size)} | Type: ${lokasi.mime_type || '-'}</small></p>
                    </div>
                    <div class="col-md-5 text-center">
                        <p><strong><i class="ik ik-image"></i> Foto Lokasi:</strong></p>
                        ${lokasi.foto_url ? `
                            <img src="${lokasi.foto_url}" 
                                 class="img-fluid rounded shadow-sm" 
                                 style="max-height: 200px; width: auto; cursor: pointer;" 
                                 onclick="showFotoModal('${lokasi.foto_url}', '${lokasi.filename}')" 
                                 alt="Foto penagihan">
                            <p class="mt-2">
                                <button class="btn btn-sm btn-primary" onclick="showFotoModal('${lokasi.foto_url}', '${lokasi.filename}')">
                                    <i class="ik ik-maximize"></i> Perbesar
                                </button>
                            </p>
                        ` : '<p class="text-muted"><i class="ik ik-folder"></i> Tidak ada foto</p>'}
                    </div>
                </div>
            </div>
        `;
        return html;
    }
    
    function renderDetailPage(page) {
    const start = (page - 1) * itemsPerPage;
    const end = start + itemsPerPage;
    const pageData = currentDetailData.slice(start, end);
    
    let itemsHtml = '';
    pageData.forEach((item, idx) => {
        const globalIndex = start + idx + 1;
        const lokasi = item.lokasi_detail;
        const nominalTagih = item.nominal_tagih || 0;
        
        itemsHtml += `
            <div class="detail-card">
                <div class="detail-card-header">
                    <i class="ik ik-file-text"></i> Penagihan #${globalIndex}
                    <span class="float-right">
                        <small class="text-muted"><i class="ik ik-user"></i> Petugas: ${escapeHtml(item.namauser || '-')} &nbsp;|&nbsp;
                        <i class="ik ik-clock"></i> ${item.waktutagih || '-'}</small>
                    </span>
                </div>
                <div class="detail-card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-sm table-bordered">
                                <tr><th width="35%">No. Rekening</th><td>${escapeHtml(item.norekening || '-')}</td></tr>
                                <tr><th>Tanggal Data</th><td>${item.tgldata || '-'}</td></tr>
                                <tr><th>Nama Debitur</th><td><strong>${escapeHtml(item.namadebitur || '-')}</strong></td></tr>
                                <tr><th>Datetime Entry</th><td>${item.datetime_entry || '-'}</td></tr>
                                <tr><th>Nominal Tagih</th><td class="text-danger font-weight-bold">${formatRupiah(nominalTagih)}</td></tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-sm table-bordered">
                                <tr><th width="35%">Kol Saat Tagih</th><td>${item.kol_saat_tagih || '-'}</td></tr>
                                <tr><th>Sanksi Debitur</th><td>${escapeHtml(item.sanksi_debitur || '-')}</td></tr>
                                <tr><th>Tgl Janji Bayar</th><td>${item.tgl_janji || '-'}</td></tr>
                                <tr><th>Waktu Tagih</th><td>${item.waktutagih || '-'}</td></tr>
                                <tr><th>Keterangan</th><td><small>${escapeHtml(item.keterangan_tagih || '-')}</small></td></tr>
                            </table>
                        </div>
                    </div>
                    <div class="mt-3">
                        <h6 class="text-primary"><i class="ik ik-map-pin"></i> Lokasi Penagihan</h6>
                        ${lokasi ? renderLocationInfo(lokasi) : '<div class="alert alert-secondary">Tidak ada data lokasi</div>'}
                    </div>
                </div>
            </div>
        `;
    });
    
    $('#detailItemsContainer').html(itemsHtml);
}
    
    function renderPaginationControls(currentPage, totalPages) {
        if (totalPages <= 1) {
            $('#detailPaginationTop, #detailPaginationBottom').html('');
            return;
        }
        const prevDisabled = currentPage === 1 ? 'disabled' : '';
        const nextDisabled = currentPage === totalPages ? 'disabled' : '';
        const paginationHtml = `
            <div>
                <button class="btn btn-sm btn-outline-primary" onclick="changeDetailPage(${currentPage - 1})" ${prevDisabled}>
                    <i class="ik ik-chevron-left"></i> Sebelumnya
                </button>
                <span class="mx-3">Halaman ${currentPage} dari ${totalPages}</span>
                <button class="btn btn-sm btn-outline-primary" onclick="changeDetailPage(${currentPage + 1})" ${nextDisabled}>
                    Selanjutnya <i class="ik ik-chevron-right"></i>
                </button>
            </div>
            <div>
                <span class="text-muted">Total ${currentDetailData.length} data</span>
            </div>
        `;
        $('#detailPaginationTop').html(paginationHtml);
        $('#detailPaginationBottom').html(paginationHtml);
    }
    
    window.changeDetailPage = function(page) {
        const totalPages = Math.ceil(currentDetailData.length / itemsPerPage);
        if (page < 1 || page > totalPages) return;
        currentPage = page;
        renderDetailPage(currentPage);
        renderPaginationControls(currentPage, totalPages);
        $('#modalDetail .modal-body').animate({ scrollTop: 0 }, 200);
    };
    
    function renderDetailModal(data, namauser) {
        currentDetailData = data;
        currentPage = 1;
        const totalPages = Math.ceil(data.length / itemsPerPage);
        let html = `
            <div class="alert alert-info">
                <i class="ik ik-user"></i> <strong>User:</strong> ${escapeHtml(namauser)}
                <br>
                <i class="ik ik-calendar"></i> <strong>Total Data:</strong> ${data.length} record penagihan
                <br>
                <i class="ik ik-layers"></i> <strong>Tampil:</strong> ${itemsPerPage} data per halaman
            </div>
            <div id="detailPaginationTop" class="d-flex justify-content-between align-items-center mb-3"></div>
            <div id="detailItemsContainer"></div>
            <div id="detailPaginationBottom" class="d-flex justify-content-between align-items-center mt-3"></div>
        `;
        $('#detailContent').html(html);
        renderDetailPage(currentPage);
        renderPaginationControls(currentPage, totalPages);
    }
    
    window.showFotoModal = function(fotoUrl, filename) {
        $('#fotoModalBody').html(`
            <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>
        `);
        $('#modalFoto').modal('show');
    };
    
    window.showMapOnModal = function(lat, lng, address) {
        $('#modalMap').modal('show');
        setTimeout(function() {
            if (typeof L !== 'undefined') {
                if (window.currentMap) window.currentMap.remove();
                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();
                $('#mapAddress').html(`<strong><i class="ik ik-map-pin"></i> Alamat:</strong> ${address}`);
            } else {
                $('#mapAddress').html(`<strong>Alamat:</strong> ${address}<br><small class="text-danger">Peta tidak dapat dimuat, silakan refresh halaman</small>`);
            }
        }, 500);
    };
    
    // Render tabel rekapitulasi user
    function renderTable(data) {
        let html = '';
        data.forEach((item, index) => {
            html += `
                <tr>
                    <td class="text-center">${index + 1}</td>
                    <td><strong>${escapeHtml(item.namauser)}</strong></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-namauser="${escapeHtml(item.namauser)}" data-toggle="tooltip" title="Lihat Detail Penagihan">
                            <i class="ik ik-eye"></i> Detail
                        </button>
                    </td>
                </tr>
            `;
        });
        $('#tableBody').html(html);
        $('[data-toggle="tooltip"]').tooltip();
    }
    
    // Load data rekapitulasi
    function loadData() {
        showLoading();
        $.ajax({
            url: '{{ route("penagihan.getData") }}',
            method: 'POST',
            data: {
                kode_kantor: currentKodeKantor,
                tanggal_data: currentTanggalData,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                hideLoading();
                if (response.success) {
                    if (response.data && response.data.length > 0) {
                        renderTable(response.data);
                        $('#dataContainer').show();
                        $('#infoTotal').show();
                        $('#totalUser').text(response.data.length);
                    } else {
                        $('#tableBody').html(`
                            <tr><td colspan="4" 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 filter yang dipilih</small>
                            </td></tr>
                        `);
                        $('#dataContainer').show();
                        $('#infoTotal').hide();
                    }
                } else {
                    showToast(response.message || 'Gagal memuat data', 'error');
                }
            },
            error: function(xhr) {
                hideLoading();
                let errorMsg = 'Terjadi kesalahan pada server';
                if (xhr.responseJSON && xhr.responseJSON.message) errorMsg = xhr.responseJSON.message;
                showToast(errorMsg, 'error');
                console.error(xhr);
            }
        });
    }
    
    // Event tombol Tampilkan
    $('#btnTampilkan').on('click', function() {
        const kodeKantor = $('#kode_kantor').val();
        const tanggalData = $('#tanggal_data').val();
        if (!tanggalData) {
            showToast('Harap pilih Tanggal Data terlebih dahulu!', 'error');
            $('#tanggal_data').focus();
            return;
        }
        const tanggalFormatted = tanggalData.replace(/-/g, '');
        currentKodeKantor = kodeKantor === 'all' ? null : kodeKantor;
        currentTanggalData = tanggalFormatted;
        loadData();
    });
    
    // Event tombol detail (delegasi)
    $(document).on('click', '.btn-detail', function() {
        const namauser = $(this).data('namauser');
        $('#modalDetail').modal('show');
        $('#detailLoading').show();
        $('#detailContent').hide();
        
        $.ajax({
            url: '{{ route("penagihan.getDetail") }}',
            method: 'POST',
            data: {
                namauser: namauser,
                kode_kantor: currentKodeKantor,
                tanggal_data: currentTanggalData,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                $('#detailLoading').hide();
                if (response.success && response.data && response.data.length > 0) {
                    renderDetailModal(response.data, namauser);
                    $('#detailContent').show();
                } else {
                    $('#detailContent').html(`
                        <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 user <strong>${escapeHtml(namauser)}</strong>
                        </div>
                    `);
                    $('#detailContent').show();
                }
            },
            error: function(xhr) {
                $('#detailLoading').hide();
                $('#detailContent').html(`
                    <div class="alert alert-danger">
                        <i class="ik ik-alert-triangle"></i> Gagal memuat detail penagihan.<br>
                        <small>Silakan coba lagi.</small>
                    </div>
                `);
                $('#detailContent').show();
            }
        });
    });
    
    // Reset modal detail saat ditutup
    $('#modalDetail').on('hidden.bs.modal', function() {
        $('#detailContent').html('');
    });
    
    $('#modalMap').on('hidden.bs.modal', function() {
        if (window.currentMap) {
            window.currentMap.remove();
            window.currentMap = null;
        }
    });
});
</script>
@endpush