@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-calendar bg-blue"></i>
                        <div class="d-inline">
                            <h5>Janji Tagih Debitur</h5>
                            <span>Daftar debitur yang memiliki janji tagih pada Tanggal hari ini : <strong>{{ date('d-m-Y') }}</strong></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">Janji Tagih</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3>Daftar Janji Tagih per Debitur</h3>
                        <!-- @if($latestDate)
                            <small class="text-muted">Periode data: {{ date('d-m-Y', strtotime($latestDate)) }}</small>
                        @endif -->
                    </div>
                    <div class="card-body">
                        <!-- 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>
                                    📅 Menampilkan data janji tagih untuk tanggal data terbaru: 
                                    @if($latestDate)
                                        <strong>{{ date('d-m-Y', strtotime($latestDate)) }}</strong>
                                        &nbsp;|&nbsp; Hari ini: <strong>{{ date('d-m-Y') }}</strong>
                                    @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 janji tagih...
                        </div>

                        <!-- Data Table Section -->
                        <div id="dataContainer">
                            <div class="alert alert-success alert-sm" id="infoTotal" style="padding: 8px 12px; background: #e8f5e9; @if(count($initialData) == 0) display: none; @endif">
                                <i class="ik ik-check-circle"></i> 
                                <strong>Total Debitur:</strong> <span id="totalDebitur">{{ count($initialData) }}</span> debitur dengan janji tagih
                            </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>No. Rekening</th>
                                            <th>Nama Debitur</th>
                                            <th class="text-center">Kolek</th>
                                            <th>Kualitas</th>
                                            <th class="text-right">Baki Debet</th>
                                            <th class="text-center">Jml Janji</th>
                                            <th class="text-center">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableBody">
                                        @if(count($initialData) > 0)
                                            @foreach($initialData as $index => $item)
                                                @php
                                                    $badgeClass = 'badge-secondary';
                                                    switch(intval($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;
                                                    }
                                                @endphp
                                                <tr>
                                                    <td class="text-center">{{ $loop->iteration }}</td>
                                                    <td><strong>{{ $item->norekening }}</strong></td>
                                                    <td><strong>{{ $item->namadebitur }}</strong></td>
                                                    <td class="text-center"><span class="badge {{ $badgeClass }}">{{ $item->kolek ?? '-' }}</span></td>
                                                    <td>{{ $item->kualitas ?? '-' }}</td>
                                                    <td class="text-right">{{ 'Rp ' . number_format($item->bakidebet, 0, ',', '.') }}</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> {{ $item->jumtagih }} Janji
                                                        </span>
                                                    </td>
                                                    <td class="text-center">
                                                        <button type="button" 
                                                                class="btn btn-sm btn-info btn-detail" 
                                                                data-norekening="{{ $item->norekening }}"
                                                                data-namadebitur="{{ $item->namadebitur }}"
                                                                data-kantor="{{ $item->kantor }}"
                                                                data-bakidebet="{{ $item->bakidebet }}"
                                                                data-kualitas="{{ $item->kualitas }}"
                                                                data-kolek="{{ $item->kolek }}"
                                                                data-toggle="tooltip" 
                                                                title="Lihat Detail Janji Tagih">
                                                            <i class="ik ik-eye"></i> Detail
                                                        </button>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @else
                                            <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>Tidak ada data janji tagih</strong><br>
                                                    <small>Untuk periode data terbaru dan kantor Anda</small>
                                                </td>
                                            </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Detail Janji Tagih -->
<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 Janji Tagih 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 janji tagih...
                </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 Janji Tagih
                </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 Janji Tagih
                </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;
    }
    
    @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 currentTanggalData = '{{ $latestDate }}';
    let currentInfoDebitur = null;

    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'
        });
    }

    // Jika ada tombol refresh (opsional), bisa digunakan untuk reload data via AJAX
    // Namun karena data awal sudah ada, kita tidak perlu tombol refresh.

    // Detail Handler
    $(document).on('click', '.btn-detail', function() {
        const namadebitur = $(this).data('namadebitur');
        const norekening = $(this).data('norekening');
        const kantor = $(this).data('kantor');
        const bakidebet = $(this).data('bakidebet');
        const kualitas = $(this).data('kualitas');
        const kolek = $(this).data('kolek');

        if (!norekening) {
            showToast('Data rekening tidak ditemukan!', 'error');
            return;
        }
        
        currentInfoDebitur = {
            namadebitur: namadebitur,
            norekening: norekening,
            kantor: kantor,
            bakidebet: bakidebet,
            kualitas: kualitas,
            kolek: kolek
        };
        
        $('#modalDetail').modal('show');
        $('#detailLoading').show();
        $('#detailContent').hide();
        
        $.ajax({
            url: '{{ route("janjitagih.getDetail") }}',
            method: 'POST',
            data: {
                norekening: norekening,
                tanggal_data: currentTanggalData,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                $('#detailLoading').hide();
                
                if (response.success) {
                    renderDetailModal(response.data, response.info_debitur);
                    $('#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 janji tagih untuk debitur <strong>${escapeHtml(namadebitur)}</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 janji tagih.<br>
                        <small>Silakan coba lagi.</small>
                    </div>
                `);
                $('#detailContent').show();
            }
        });
    });

    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 Janji Tagih:</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>
        `;
        
        $('#detailContent').html(html);
        $('[data-toggle="tooltip"]').tooltip();
    }

    window.showLocationDetail = function(index) {
        const detailDiv = $(`#locationDetail_${index}`);
        if (detailDiv.is(':visible')) {
            detailDiv.hide();
        } else {
            detailDiv.show();
        }
    };

    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 janji tagih'}</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();
                }
                
                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();
                    $('#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">Container peta tidak siap, silakan coba lagi</small>`);
                }
            } else {
                $('#mapAddress').html(`<strong>Alamat:</strong> ${address}<br><small class="text-danger">Peta tidak dapat dimuat, silakan refresh halaman</small>`);
            }
        }, 500);
    };

    function formatRupiah(value) {
        if (!value || value == 0) return 'Rp 0';
        return 'Rp ' + 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;
    }

    $('#modalDetail').on('hidden.bs.modal', function() {
        $('#detailContent').html('');
        currentInfoDebitur = null;
    });

    $('#modalMap').on('hidden.bs.modal', function() {
        if (window.currentMap) {
            window.currentMap.remove();
            window.currentMap = null;
        }
    });
});
</script>
@endpush