@extends('layouts.app')
@section('title', 'Pembayaran/Tagihan')

@section('content')
<div class="card shadow border-0 mb-3">
    <div class="card-body">
        <form method="GET" action="{{ url('admin/pembayaran-tagihan') }}" class="row g-3 align-items-end">
            <div class="col-md-8">
                <label class="form-label">No. Pinjaman</label>
                <input type="text" name="no_pinjaman" class="form-control" value="{{ $noPinjaman }}" placeholder="Contoh: PJN-20260605-0001" required>
            </div>
            <div class="col-md-4">
                <button type="submit" class="btn btn-primary w-100">
                    <i class="bi bi-search"></i> Cari Pinjaman
                </button>
            </div>
        </form>
    </div>
</div>

@if($notFound)
    <div class="alert alert-danger border-0 shadow-sm">
        <i class="bi bi-exclamation-circle"></i> Pinjaman tidak ditemukan.
    </div>
@endif

@if($pinjaman && $detailData)
    @php
        $ketLabel = [
            'menunggu_konfirmasi' => 'Menunggu Konfirmasi',
            'disetujui' => 'Disetujui',
            'ditolak' => 'Ditolak',
        ][$pinjaman->keterangan] ?? 'Menunggu Konfirmasi';
        $ketAlert = [
            'menunggu_konfirmasi' => 'warning text-dark',
            'disetujui' => 'success',
            'ditolak' => 'danger',
        ][$pinjaman->keterangan] ?? 'warning text-dark';
        $ketIcon = [
            'menunggu_konfirmasi' => 'bi-hourglass-split',
            'disetujui' => 'bi-check-circle',
            'ditolak' => 'bi-x-circle',
        ][$pinjaman->keterangan] ?? 'bi-hourglass-split';
    @endphp

    <div class="alert alert-{{ $ketAlert }} border-0 shadow-sm">
        <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">
                    @if($detailData['can_bayar'])
                        Pinjaman sudah disetujui. Pembayaran angsuran dapat diinput.
                    @else
                        Pembayaran belum bisa diinput sebelum keterangan pinjaman disetujui.
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-md-6 col-lg-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="small text-muted">No. Pinjaman</div>
                    <div class="fw-bold">{{ $pinjaman->no_pinjaman }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="small text-muted">Anggota</div>
                    <div class="fw-bold">{{ $pinjaman->anggota->nama }}</div>
                    <small class="text-muted">{{ $pinjaman->anggota->no_anggota }}</small>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="small text-muted">Nominal Dipinjam</div>
                    <div class="fw-bold">Rp {{ number_format($pinjaman->nominal, 0, ',', '.') }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="small text-muted">Total Pinjaman</div>
                    <div class="fw-bold">Rp {{ number_format($detailData['total_pinjaman'], 0, ',', '.') }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="small text-muted">Tanggal Pinjaman</div>
                    <div class="fw-semibold">{{ $pinjaman->tanggal->format('d/m/Y') }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="small text-muted">Bunga</div>
                    <div class="fw-semibold">Rp {{ number_format($detailData['jumlah_bunga'], 0, ',', '.') }} ({{ $pinjaman->bunga }}%)</div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="small text-muted">Denda per Hari</div>
                    <div class="fw-semibold">Rp {{ number_format($detailData['denda_per_hari'], 0, ',', '.') }} ({{ $detailData['denda_persen'] }}%)</div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="small text-muted">Status Pinjaman</div>
                    @if($pinjaman->status === 'lunas')
                        <span class="badge bg-success">Lunas</span>
                    @else
                        <span class="badge bg-warning text-dark">Belum Lunas</span>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow border-0">
        <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
            <h6 class="fw-bold mb-0">Detail Angsuran</h6>
            <span class="text-muted small">{{ $pinjaman->jangka_waktu }} bulan</span>
        </div>
        <div class="card-body">
            <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>
                        @foreach($detailData['details'] as $row)
                            @php $detail = $row['model']; @endphp
                            <tr>
                                <td class="text-center fw-semibold">{{ $detail->angsuran_ke }}</td>
                                <td>{{ $detail->tanggal_jatuh_tempo->format('d/m/Y') }}</td>
                                <td class="text-end">Rp {{ number_format($detail->jumlah_angsuran, 0, ',', '.') }}</td>
                                <td class="text-end">Rp {{ number_format($row['sisa_bayar'], 0, ',', '.') }}</td>
                                <td class="text-center">{{ $row['tanggal_bayar'] }}</td>
                                <td class="text-end">Rp {{ number_format($row['denda'], 0, ',', '.') }}</td>
                                <td class="text-end">Rp {{ number_format($row['jumlah_dibayar'], 0, ',', '.') }}</td>
                                <td class="text-center">
                                    @if($detail->status_pembayaran === '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">
                                    @if($detail->status_pembayaran === 'lunas' && $detail->pembayaran->first())
                                        <a href="{{ url('admin/pembayaran/'.$detail->pembayaran->first()->id.'/cetak') }}" target="_blank" class="btn btn-outline-secondary btn-sm" title="Cetak Kwitansi"><i class="bi bi-printer"></i> Kwitansi</a>
                                    @endif

                                    @if($detailData['can_bayar'] && $detail->id === $detailData['first_unpaid_id'])
                                        <button type="button" class="btn btn-success btn-sm"
                                            data-bs-toggle="modal"
                                            data-bs-target="#bayarModal"
                                            data-pinjaman-id="{{ $pinjaman->id }}"
                                            data-detail-id="{{ $detail->id }}"
                                            data-angsuran-ke="{{ $detail->angsuran_ke }}"
                                            data-jatuh-tempo="{{ $detail->tanggal_jatuh_tempo->format('d/m/Y') }}"
                                            data-jatuh-tempo-raw="{{ $detail->tanggal_jatuh_tempo->format('Y-m-d') }}"
                                            data-jumlah="{{ (float) $detail->jumlah_angsuran }}"
                                            data-tanggal-pinjaman-raw="{{ $pinjaman->tanggal->format('Y-m-d') }}">
                                            <i class="bi bi-cash"></i> Bayar
                                        </button>
                                    @elseif(!$detailData['can_bayar'] && $detail->id === $detailData['first_unpaid_id'])
                                        <span class="badge bg-secondary">Menunggu persetujuan</span>
                                    @endif

                                    @if($detail->id === $detailData['last_paid_id'])
                                        <form method="POST" action="{{ url('admin/pinjaman/'.$pinjaman->id.'/batalkan/'.$detail->id) }}" class="d-inline" onsubmit="return confirm('Batalkan pembayaran angsuran ke-{{ $detail->angsuran_ke }}?')">
                                            @csrf
                                            <button type="submit" class="btn btn-danger btn-sm">
                                                <i class="bi bi-x-circle"></i> Batalkan
                                            </button>
                                        </form>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </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>
@endif
@endsection

@push('scripts')
@if($pinjaman && $detailData)
<script>
    let dendaPersen = {{ (float) $detailData['denda_persen'] }};

    $('#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>
@endif
@endpush