<div class="row mb-3">
    <div class="col-md-6">
        <div class="stat-card">
            <h6 class="mb-0">Total Denda Belum Lunas</h6>
            <h3 class="mb-0 text-danger">Rp <?php echo e(number_format($totalDendaBelumLunas ?? 0, 0, ',', '.')); ?></h3>
        </div>
    </div>
    <div class="col-md-3">
        <select class="form-select" id="statusFilter">
            <option value="">Semua Status</option>
            <option value="lunas">Lunas</option>
            <option value="belum">Belum Lunas</option>
        </select>
    </div>
    <div class="col-md-3">
        <a href="<?php echo e(route('petugas.denda.export', request()->query())); ?>" class="btn btn-success w-100 mb-2">
            <i class="fas fa-file-excel me-2"></i>Export Excel
        </a>
        <a href="<?php echo e(route('petugas.denda.export-pdf', request()->query())); ?>" class="btn btn-danger w-100">
            <i class="fas fa-file-pdf me-2"></i>Export PDF
        </a>
    </div>
</div>

<div class="stat-card">
    <div class="table-responsive">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Peminjam</th>
                    <th>Buku</th>
                    <th>Jatuh Tempo</th>
                    <th>Kembali</th>
                    <th>Terlambat</th>
                    <th>Denda</th>
                    <th>Status</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                <?php $__empty_1 = true; $__currentLoopData = $denda ?? []; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $d): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <?php
                    $jatuhTempo = $d->tanggal_jatuh_tempo ? \Carbon\Carbon::parse($d->tanggal_jatuh_tempo) : null;
                    $kembali = $d->tanggal_kembali ? \Carbon\Carbon::parse($d->tanggal_kembali) : now();
                    $hariTerlambat = $jatuhTempo ? max(0, $kembali->diffInDays($jatuhTempo, false) * -1) : 0;
                ?>
                <tr>
                    <td><?php echo e($d->id_peminjaman); ?></td>
                    <td><strong><?php echo e($d->user->nama ?? '-'); ?></strong></td>
                    <td><?php echo e($d->asetBuku->buku->judul ?? '-'); ?></td>
                    <td><?php echo e($jatuhTempo ? $jatuhTempo->format('d/m/Y') : '-'); ?></td>
                    <td><?php echo e($d->tanggal_kembali ? $kembali->format('d/m/Y') : '-'); ?></td>
                    <td><span class="badge bg-warning"><?php echo e($hariTerlambat); ?> hari</span></td>
                    <td class="fw-bold text-danger">Rp <?php echo e(number_format($d->denda, 0, ',', '.')); ?></td>
                    <td>
                        <?php
                            $summary = DB::table('v_summary_pembayaran_denda')
                                ->where('id_peminjaman', $d->id_peminjaman)
                                ->first();
                            $statusBayar = $summary->status_bayar ?? 'Belum Lunas';
                            $sisaDenda = $summary->sisa_denda ?? $d->denda;
                        ?>
                        
                        <?php if($statusBayar == 'Lunas'): ?>
                            <span class="badge bg-success">Lunas</span>
                        <?php elseif($statusBayar == 'Cicilan'): ?>
                            <span class="badge bg-warning">Cicilan</span>
                        <?php else: ?>
                            <span class="badge bg-danger">Belum Lunas</span>
                        <?php endif; ?>
                        
                        <?php if($sisaDenda != $d->denda && $sisaDenda > 0): ?>
                            <small class="d-block text-muted mt-1">
                                Sisa: Rp <?php echo e(number_format($sisaDenda, 0, ',', '.')); ?>

                            </small>
                        <?php endif; ?>
                    </td>
                    <td>
                        <?php if(!($d->denda_lunas ?? false)): ?>
                            <button class="btn btn-success btn-sm" onclick="showPaymentModal(<?php echo e($d->id_peminjaman); ?>)">
                                <i class="fas fa-check me-1"></i>Lunas
                            </button>
                        <?php else: ?>
                            <button class="btn btn-secondary btn-sm" disabled>
                                <i class="fas fa-check me-1"></i>Sudah Lunas
                            </button>
                        <?php endif; ?>
                    </td>
                </tr>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <tr>
                    <td colspan="9" class="text-center text-muted py-4">
                        <i class="fas fa-money-bill-wave fa-3x mb-3 d-block" style="opacity: 0.3;"></i>
                        Tidak ada data denda
                    </td>
                </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<!-- Custom Modal (Not Bootstrap) -->
<div id="customPaymentModal" class="custom-modal">
    <div class="custom-modal-overlay"></div>
    <div class="custom-modal-content">
        <form id="paymentForm" method="POST" action="">
            <?php echo csrf_field(); ?>
            <div class="custom-modal-header">
                <h5><i class="fas fa-money-check-alt me-2"></i>Input Pembayaran Denda</h5>
                <button type="button" class="custom-close-btn" onclick="closePaymentModal()">&times;</button>
            </div>
            <div class="custom-modal-body">
                <div class="mb-3 text-start">
                    <label class="form-label fw-bold">Denda Total:</label>
                    <input type="text" class="form-control" id="dendaTotal" readonly>
                </div>
                <div class="mb-3 text-start">
                    <label class="form-label fw-bold">Sisa Denda:</label>
                    <input type="text" class="form-control bg-warning bg-opacity-10" id="sisaDenda" readonly>
                </div>
                <div class="mb-3 text-start">
                    <label class="form-label fw-bold">Nominal Bayar: <span class="text-danger">*</span></label>
                    <input type="number" name="nominal_bayar" class="form-control" 
                           id="nominalBayar" placeholder="Masukkan nominal" required min="1">
                    <small class="text-muted">Bisa bayar sebagian (cicilan)</small>
                </div>
                <div class="mb-3 text-start">
                    <label class="form-label">Keterangan:</label>
                    <textarea name="keterangan" class="form-control" rows="2" 
                              placeholder="Opsional, misal: Cicilan 1"></textarea>
                </div>
            </div>
            <div class="custom-modal-footer">
                <button type="button" class="btn btn-secondary px-4" onclick="closePaymentModal()">
                    <i class="fas fa-times me-2"></i>Batal
                </button>
                <button type="submit" class="btn btn-success px-4">
                    <i class="fas fa-check me-2"></i>Simpan Pembayaran
                </button>
            </div>
        </form>
    </div>
</div>

<?php $__env->startPush('styles'); ?>
<style>
/* Custom Modal Styles */
.custom-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    align-items: center;
    justify-content: center;
}

.custom-modal.show {
    display: flex !important;
}

.custom-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.custom-modal-content {
    position: relative;
    background: white;
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    z-index: 2;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.custom-modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 1.5rem;
    border-radius: 20px 20px 0 0;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-modal-header h5 {
    margin: 0;
    font-weight: 600;
}

.custom-close-btn {
    background: transparent;
    border: none;
    color: white;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.custom-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.custom-modal-body {
    padding: 2rem;
    text-align: center;
}

.payment-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse 2s infinite;
}

.payment-icon i {
    font-size: 2.5rem;
    color: white;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7); }
    50% { box-shadow: 0 0 0 15px rgba(102, 126, 234, 0); }
    100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0); }
}

.custom-modal-footer {
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    border-top: 1px solid #e9ecef;
}

.btn {
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

body.modal-open {
    overflow: hidden;
}
</style>
<?php $__env->stopPush(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
let selectedPaymentData = null;

function showPaymentModal(id) {
    // Detect path
    const isPetugas = window.location.pathname.includes('/petugas/');
    const apiUrl = isPetugas ? `/petugas/denda/${id}/info` : `/laporan-denda/${id}/info`;
    
    // Fetch data
    fetch(apiUrl)
        .then(res => res.json())
        .then(data => {
            selectedPaymentData = data;
            
            // Populate form
            document.getElementById('dendaTotal').value = 'Rp ' + data.denda_total.toLocaleString('id-ID');
            document.getElementById('sisaDenda').value = 'Rp ' + data.sisa_denda.toLocaleString('id-ID');
            document.getElementById('nominalBayar').value = data.sisa_denda;
            document.getElementById('nominalBayar').max = data.sisa_denda;
            
            // Set form action
            const form = document.getElementById('paymentForm');
            form.action = isPetugas ? `/petugas/denda/${id}/bayar` : `/laporan-denda/${id}/bayar`;
            
            // Show modal
            document.getElementById('customPaymentModal').classList.add('show');
            document.body.classList.add('modal-open');
        })
        .catch(err => {
            console.error(err);
            alert('Gagal mengambil data denda!');
        });
}

function closePaymentModal() {
    document.getElementById('customPaymentModal').classList.remove('show');
    document.body.classList.remove('modal-open');
    selectedPaymentData = null;
    document.getElementById('paymentForm').reset();
}

// Close modal on overlay click
document.addEventListener('DOMContentLoaded', function() {
    const overlay = document.querySelector('.custom-modal-overlay');
    if(overlay) {
        overlay.addEventListener('click', closePaymentModal);
    }
    
    document.addEventListener('keydown', function(e) {
        if(e.key === 'Escape') closePaymentModal();
    });
});
</script>
<?php $__env->stopPush(); ?><?php /**PATH C:\Users\hizkia\Desktop\TUBES_MSBD\Perpustakaan-SMAN-1-Pangururan\resources\views/petugas/partials/laporan_denda.blade.php ENDPATH**/ ?>