@extends('layouts.app')
@section('title', 'Data Pinjaman')

@section('content')
<a href="{{ url('admin/pinjaman/create') }}" class="btn btn-success mb-3"><i class="bi bi-plus-lg"></i> Tambah Pinjaman</a>

<div class="card shadow border-0">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover data-table">
                <thead class="table-light">
                    <tr>
                        <th>No</th>
                        <th>Pinjaman</th>
                        <th>Nominal</th>
                        <th>Angsuran</th>
                        <th>Terbayar</th>
                        <th>Keterangan</th>
                        <th>Status</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($pinjaman as $key => $p)
                    <tr>
                        <td>{{ $key + 1 }}</td>
                        <td class="text-truncate">
                            <small class="text-muted">{{ $p->tanggal->format('d/m/Y') }}</small><br>
                            <span class="fw-semibold">{{ $p->no_pinjaman }}</span><br>
                            <small class="text-dark fw-semibold">{{ $p->anggota->nama }}</small>
                        </td>
                        <td class="text-truncate">
                            <span class="fw-semibold">Rp {{ number_format($p->nominal, 0, ',', '.') }}</span><br>
                            <span class="small badge bg-warning text-dark">Bunga: {{ $p->bunga }}%</span><br>
                            <span class="small badge bg-warning text-dark">{{ $p->jangka_waktu }} bln</span><br>
                            <span class="small badge bg-danger">Selesai : {{ $p->tanggal_selesai->format('d/m/Y') }}</span>
                        </td>
                        @php $s = $stats[$p->id] ?? ['paid' => 0, 'total' => 0, 'unpaid' => 0, 'last_paid_ke' => null, 'angsuran_per_bulan' => 0]; @endphp
                        <td class="text-end">Rp {{ number_format($s['angsuran_per_bulan'], 0, ',', '.') }}</td>
                        <td class="text-center">{{ $s['paid'] }} / {{ $s['total'] }}</td>
                        <td>
                            @php
                                $ketLabel = [
                                    'menunggu_konfirmasi' => 'Menunggu Konfirmasi',
                                    'disetujui' => 'Disetujui',
                                    'ditolak' => 'Ditolak',
                                ][$p->keterangan ?? 'menunggu_konfirmasi'] ?? 'Menunggu Konfirmasi';
                                $ketClass = [
                                    'menunggu_konfirmasi' => 'bg-secondary',
                                    'disetujui' => 'bg-primary',
                                    'ditolak' => 'bg-danger',
                                ][$p->keterangan ?? 'menunggu_konfirmasi'] ?? 'bg-secondary';
                            @endphp
                            <span class="badge {{ $ketClass }}">{{ $ketLabel }}</span>
                        </td>
                        <td>
                            @if($p->status == 'lunas')
                                <span class="badge bg-success">Lunas</span>
                            @else
                                <span class="badge bg-warning text-dark">Belum Lunas</span>
                            @endif
                        </td>
                        <td>
                           <div class="d-grid gap-1">

                                <button type="button" class="btn btn-info btn-sm text-truncate" data-bs-toggle="modal" data-bs-target="#detailModal" data-id="{{ $p->id }}" title="Detail Angsuran"><i class="bi bi-list-ul"></i> Angsuran</button>

                                <a href="{{ url('admin/pinjaman/'.$p->id.'/cetak') }}" target="_blank" class="btn btn-outline-primary btn-sm" title="Cetak Kwitansi Pinjaman"> <i class="bi bi-file-earmark-pdf"></i> Kwitansi</a>

                                @php $hasBayar = in_array($p->id, $pinjamanWithBayar ?? []); @endphp

                                <a href="{{ url('admin/pinjaman/'.$p->id.'/edit') }}" class="btn btn-warning btn-sm text-truncate" title="Edit Pinjaman"><i class="bi bi-pencil"></i> Edit</a>

                                @if($hasBayar)
                                    <button type="button" class="btn btn-danger btn-sm disabled text-truncate" tabindex="-1" data-bs-toggle="tooltip" title="Pinjaman tidak bisa dihapus karena sudah memiliki riwayat pembayaran.">
                                        <i class="bi bi-trash"></i> Hapus
                                    </button>
                                @else
                                    <form method="POST" action="{{ url('admin/pinjaman/'.$p->id) }}" onsubmit="return confirm('Hapus pinjaman {{ $p->no_pinjaman }}?')" class="d-grid">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger btn-sm text-truncate" title="Hapus Pinjaman">
                                            <i class="bi bi-trash"></i> Hapus
                                        </button>
                                    </form>
                                @endif

                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="detailModal" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Detail Angsuran Pinjaman</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="detailModalBody">
                <div class="text-center py-4">
                    <div class="spinner-border text-primary" role="status"></div>
                    <p class="mt-2 text-muted">Memuat data...</p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="bayarModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" id="formBayar">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Konfirmasi Pembayaran</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info" id="infoBayar">
                        <p class="mb-1"><strong>Angsuran ke-</strong><span id="bayarAngsuranKe"></span></p>
                        <p class="mb-1"><strong>Jatuh Tempo:</strong> <span id="bayarJatuhTempo"></span></p>
                        <p class="mb-0"><strong>Jumlah Angsuran:</strong> <span id="bayarJumlahAngsuran"></span></p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Tanggal Bayar <span class="text-danger">*</span></label>
                        <input type="date" name="tanggal_bayar" id="tanggalBayar" class="form-control" value="{{ date('Y-m-d') }}" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Denda</label>
                        <input type="text" id="bayarDenda" class="form-control bg-light" value="Rp 0" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Total Dibayar</label>
                        <input type="text" id="bayarTotal" class="form-control bg-light fw-bold" value="Rp 0" readonly>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success"><i class="bi bi-check-lg"></i> Konfirmasi Bayar</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    let dendaPersen = 0.5;

    $('#detailModal').on('show.bs.modal', function (event) {
        const btn = event.relatedTarget;
        const id = btn.getAttribute('data-id');
        const body = $('#detailModalBody');

        body.html('<div class="text-center py-4"><div class="spinner-border text-primary" role="status"></div><p class="mt-2 text-muted">Memuat data...</p></div>');

        $.get('{{ url("admin/pinjaman") }}/' + id + '/details', function (data) {
            dendaPersen = data.denda_persen;
            const ketLabels = {
                menunggu_konfirmasi: 'Menunggu Konfirmasi',
                disetujui: 'Disetujui',
                ditolak: 'Ditolak'
            };
            const ketClasses = {
                menunggu_konfirmasi: 'warning text-dark',
                disetujui: 'success',
                ditolak: 'danger'
            };
            const ketIcons = {
                menunggu_konfirmasi: 'bi-hourglass-split',
                disetujui: 'bi-check-circle',
                ditolak: 'bi-x-circle'
            };
            const ketLabel = ketLabels[data.keterangan] || 'Menunggu Konfirmasi';
            const ketClass = ketClasses[data.keterangan] || 'warning text-dark';
            const ketIcon = ketIcons[data.keterangan] || 'bi-hourglass-split';
            const statusNote = data.can_bayar
                ? 'Pinjaman sudah disetujui. Pembayaran angsuran dapat diinput.'
                : 'Pembayaran belum bisa diinput sebelum keterangan pinjaman disetujui.';
            let rows = '';
            $.each(data.details, function (i, d) {
                let aksi = '';

                if (data.can_bayar && d.id === data.first_unpaid_id) {
                    aksi += '<button type="button" class="btn btn-success btn-sm" ' +
                        'data-bs-toggle="modal" data-bs-target="#bayarModal" ' +
                        'data-pinjaman-id="' + data.pinjaman_id + '" ' +
                        'data-detail-id="' + d.id + '" ' +
                        'data-angsuran-ke="' + d.angsuran_ke + '" ' +
                        'data-jatuh-tempo="' + d.tanggal_jatuh_tempo + '" ' +
                        'data-jatuh-tempo-raw="' + d.tanggal_jatuh_tempo_raw + '" ' +
                        'data-jumlah="' + d.jumlah_angsuran_raw + '" ' +
                        'data-tanggal-pinjaman-raw="' + data.tanggal_pinjaman_raw + '">' +
                        '<i class="bi bi-cash"></i> Bayar</button>';
                } else if (!data.can_bayar && d.id === data.first_unpaid_id) {
                    aksi += '<span class="badge bg-secondary">Menunggu persetujuan</span>';
                }

                if (d.id === data.last_paid_id) {
                    aksi += '<form method="POST" action="{{ url("admin/pinjaman") }}/' + data.pinjaman_id + '/batalkan/' + d.id + '" class="d-inline" onsubmit="return confirm(\'Batalkan pembayaran angsuran ke-' + d.angsuran_ke + '?\')">@csrf<button type="submit" class="btn btn-danger btn-sm"><i class="bi bi-x-circle"></i> Batalkan</button></form>';
                }

                rows += '<tr>' +
                    '<td class="text-center fw-semibold">' + d.angsuran_ke + '</td>' +
                    '<td>' + d.tanggal_jatuh_tempo + '</td>' +
                    '<td class="text-end">' + d.jumlah_angsuran + '</td>' +
                    '<td class="text-end">' + d.sisa_bayar + '</td>' +
                    '<td class="text-center">' + d.tanggal_bayar + '</td>' +
                    '<td class="text-end">' + d.denda + '</td>' +
                    '<td class="text-end">' + d.jumlah_dibayar + '</td>' +
                    '<td class="text-center">' + (d.status_pembayaran === 'lunas' ? '<span class="badge bg-success">Lunas</span>' : '<span class="badge bg-warning text-dark">Belum Lunas</span>') + '</td>' +
                    '<td class="text-center">' + aksi + '</td>' +
                    '</tr>';
            });

            body.html(
                '<div class="alert alert-' + ketClass + ' border-0 shadow-sm mb-3">' +
                    '<div class="d-flex align-items-start gap-3">' +
                        '<i class="bi ' + ketIcon + ' fs-3"></i>' +
                        '<div>' +
                            '<div class="small text-uppercase fw-semibold mb-1">Keterangan Pinjaman</div>' +
                            '<div class="fs-5 fw-bold">' + ketLabel + '</div>' +
                            '<div class="small mt-1">' + statusNote + '</div>' +
                        '</div>' +
                    '</div>' +
                '</div>' +
                '<div class="row g-3 mb-3">' +
                    '<div class="col-md-6 col-lg-3"><div class="border rounded p-3 h-100 bg-light"><div class="small text-muted">No. Pinjaman</div><div class="fw-bold">' + data.no_pinjaman + '</div></div></div>' +
                    '<div class="col-md-6 col-lg-3"><div class="border rounded p-3 h-100 bg-light"><div class="small text-muted">Anggota</div><div class="fw-bold">' + data.anggota + '</div></div></div>' +
                    '<div class="col-md-6 col-lg-3"><div class="border rounded p-3 h-100 bg-light"><div class="small text-muted">Nominal Dipinjam</div><div class="fw-bold">' + data.nominal + '</div></div></div>' +
                    '<div class="col-md-6 col-lg-3"><div class="border rounded p-3 h-100 bg-light"><div class="small text-muted">Total Pinjaman</div><div class="fw-bold">' + data.total_pinjaman + '</div></div></div>' +
                    '<div class="col-md-6 col-lg-3"><div class="border rounded p-3 h-100"><div class="small text-muted">Bunga</div><div class="fw-semibold">' + data.jumlah_bunga + ' (' + data.bunga + ')</div></div></div>' +
                    '<div class="col-md-6 col-lg-3"><div class="border rounded p-3 h-100"><div class="small text-muted">Denda per Hari</div><div class="fw-semibold">' + data.denda_per_hari + ' (' + data.denda_persen + '%)</div></div></div>' +
                '</div>' +
                '<div class="table-responsive">' +
                '<table class="table table-bordered table-sm">' +
                '<thead class="table-light"><tr><th class="text-center">Angsuran ke</th><th>Jatuh Tempo</th><th class="text-end">Jumlah</th><th class="text-end">Sisa Bayar</th><th class="text-center">Tgl Dibayar</th><th class="text-end">Denda</th><th class="text-end">Jml Dibayar</th><th class="text-center">Status</th><th class="text-center">Aksi</th></tr></thead>' +
                '<tbody>' + rows + '</tbody></table></div>'
            );
        }).fail(function () {
            body.html('<div class="alert alert-danger mb-0">Gagal memuat detail pinjaman.</div>');
        });
    });

    $('#bayarModal').on('show.bs.modal', function (event) {
        const btn = event.relatedTarget;
        const pinjamanId = btn.getAttribute('data-pinjaman-id');
        const detailId = btn.getAttribute('data-detail-id');
        const angsuranKe = btn.getAttribute('data-angsuran-ke');
        const jatuhTempo = btn.getAttribute('data-jatuh-tempo');
        const jatuhTempoRaw = btn.getAttribute('data-jatuh-tempo-raw');
        const jumlah = parseFloat(btn.getAttribute('data-jumlah'));
        const tglPinjamanRaw = btn.getAttribute('data-tanggal-pinjaman-raw');

        const today = '{{ date("Y-m-d") }}';
        const defaultBayar = today < tglPinjamanRaw ? tglPinjamanRaw : today;

        $('#formBayar').attr('action', '{{ url("admin/pinjaman") }}/' + pinjamanId + '/bayar/' + detailId);
        $('#bayarAngsuranKe').text(angsuranKe);
        $('#bayarJatuhTempo').text(jatuhTempo);
        $('#bayarJumlahAngsuran').text('Rp ' + jumlah.toLocaleString('id-ID'));
        $('#tanggalBayar').attr('min', tglPinjamanRaw).val(defaultBayar);
        $('#bayarModal').data('jatuh-tempo-raw', jatuhTempoRaw).data('jumlah', jumlah);

        hitungDenda(jatuhTempoRaw, jumlah);
    });

    function hitungDenda(jatuhTempoRaw, jumlah) {
        const tglBayar = $('#tanggalBayar').val();
        if (!tglBayar || !jatuhTempoRaw || !jumlah) {
            $('#bayarDenda').val('Rp 0');
            $('#bayarTotal').val('Rp ' + jumlah.toLocaleString('id-ID'));
            return;
        }

        const bayar = new Date(tglBayar);
        const tempo = new Date(jatuhTempoRaw);
        const selisih = Math.floor((bayar - tempo) / (1000 * 60 * 60 * 24));
        const hariTerlambat = Math.max(0, selisih);
        const denda = jumlah * (dendaPersen / 100) * hariTerlambat;
        const total = jumlah + denda;

        $('#bayarDenda').val('Rp ' + Math.round(denda).toLocaleString('id-ID'));
        $('#bayarTotal').val('Rp ' + Math.round(total).toLocaleString('id-ID'));
    }

    $('#tanggalBayar').on('change', function () {
        const modal = $('#bayarModal');
        const jatuhTempoRaw = modal.data('jatuh-tempo-raw');
        const jumlah = modal.data('jumlah');
        if (jatuhTempoRaw && jumlah) {
            hitungDenda(jatuhTempoRaw, jumlah);
        }
    });
</script>
@endpush
@endsection