@extends('layouts.anggota')
@section('title', 'Data Pinjaman Saya')
@section('subtitle', 'Riwayat lengkap dan rincian angsuran pinjaman milik Anda')

@section('content')
<!-- Summary Cards -->
<div class="row g-3 mb-4">
    <div class="col-md-4">
        <div class="card border-0 shadow-sm bg-primary text-white h-100">
            <div class="card-body">
                <div class="small opacity-75">Total Pinjaman Disetujui</div>
                <h4 class="fw-bold mb-0">Rp {{ number_format($totalNominalPinjaman, 0, ',', '.') }}</h4>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card border-0 shadow-sm bg-success text-white h-100">
            <div class="card-body">
                <div class="small opacity-75">Total Angsuran Terbayar</div>
                <h4 class="fw-bold mb-0">Rp {{ number_format($totalTerbayar, 0, ',', '.') }}</h4>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card border-0 shadow-sm bg-dark text-white h-100">
            <div class="card-body">
                <div class="small opacity-75">Jumlah Pinjaman Dimiliki</div>
                <h4 class="fw-bold mb-0">{{ $pinjaman->count() }} Pengajuan</h4>
            </div>
        </div>
    </div>
</div>

<div class="d-flex justify-content-between align-items-center mb-3">
    <a href="{{ url('anggota/pinjaman/create') }}" class="btn btn-success">
        <i class="bi bi-plus-lg"></i> Ajukan Pinjaman Baru
    </a>
</div>

<div class="card shadow border-0">
    <div class="card-header bg-white fw-bold d-flex justify-content-between align-items-center">
        <span><i class="bi bi-cash-stack me-1"></i> Daftar Transaksi Pinjaman</span>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover align-middle datatable" id="pinjamanTable" style="width: 100%;">
                <thead class="table-light">
                    <tr>
                        <th style="width: 5%;">No</th>
                        <th>Pinjaman</th>
                        <th>Nominal</th>
                        <th class="text-end">Angsuran</th>
                        <th class="text-center">Terbayar</th>
                        <th>Keterangan</th>
                        <th class="text-center">Status</th>
                        <th class="text-center">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 ? $p->tanggal->format('d/m/Y') : '-' }}</small><br>
                                <span class="fw-semibold">{{ $p->no_pinjaman }}</span>
                            </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>
                                <span class="small badge bg-warning text-dark">{{ $p->jangka_waktu }} bln</span><br>
                                <span class="small badge bg-danger">Selesai: {{ $p->tanggal_selesai ? $p->tanggal_selesai->format('d/m/Y') : '-' }}</span>
                            </td>
                            @php $s = $stats[$p->id] ?? ['paid' => 0, 'total' => 0, 'angsuran_per_bulan' => 0]; @endphp
                            <td class="text-end fw-semibold">Rp {{ number_format($s['angsuran_per_bulan'], 0, ',', '.') }}</td>
                            <td class="text-center fw-bold">{{ $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 class="text-center">
                                @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 class="text-center">
                                <div class="d-grid gap-1">
                                    <button type="button" class="btn btn-info btn-sm text-truncate text-white" 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('anggota/pinjaman/'.$p->id.'/cetak') }}" target="_blank" class="btn btn-outline-primary btn-sm text-truncate" title="Cetak Kwitansi Pinjaman PDF">
                                        <i class="bi bi-file-earmark-pdf-fill"></i> Kwitansi
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal Detail Angsuran -->
<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>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        if (!$.fn.DataTable.isDataTable('#pinjamanTable')) {
            $('#pinjamanTable').DataTable({
                ordering: false,
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/id.json'
                }
            });
        }
    });

    $('#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("anggota/pinjaman") }}/' + id + '/details', function (data) {
            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';

            let rows = '';
            $.each(data.details, function (i, d) {
                let statusHtml = d.status_pembayaran === 'lunas' 
                    ? '<span class="badge bg-success">Lunas</span>' 
                    : '<span class="badge bg-warning text-dark">Belum Lunas</span>';

                let aksiHtml = '<span class="text-muted small">-</span>';
                if (d.status_pembayaran === 'lunas' && d.pembayaran_id) {
                    aksiHtml = '<a href="{{ url("anggota/pembayaran") }}/' + d.pembayaran_id + '/cetak" target="_blank" class="btn btn-sm btn-outline-primary" title="Cetak Kwitansi Pembayaran PDF"><i class="bi bi-file-earmark-pdf-fill"></i> Kwitansi</a>';
                }

                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">' + statusHtml + '</td>' +
                    '<td class="text-center">' + aksiHtml + '</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>' +
                    '</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 align-middle">' +
                '<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>');
        });
    });
</script>
@endpush