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

@section('content')
<a href="{{ url('admin/pinjaman') }}" class="btn btn-secondary mb-3"><i class="bi bi-arrow-left"></i> Kembali</a>

<div class="card shadow border-0">
    <div class="card-body">
        @if($hasPembayaran)
            <div class="alert alert-warning mb-4">
                <i class="bi bi-exclamation-triangle"></i> Pinjaman ini sudah memiliki riwayat pembayaran. Data tidak dapat diubah.
            </div>
        @endif
        <form method="POST" action="{{ url('admin/pinjaman/'.$pinjaman->id) }}" id="formPinjaman">
            @csrf @method('PUT')
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label">Tanggal <span class="text-danger">*</span></label>
                    <input type="date" name="tanggal" id="tanggal" class="form-control @error('tanggal') is-invalid @enderror" value="{{ old('tanggal', $pinjaman->tanggal->format('Y-m-d')) }}" {{ $hasPembayaran ? 'readonly' : '' }} required>
                    @error('tanggal')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-4">
                    <label class="form-label">No. Pinjaman</label>
                    <input type="text" class="form-control bg-light" value="{{ $pinjaman->no_pinjaman }}" disabled>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Anggota</label>
                    <input type="text" class="form-control bg-light" value="{{ $pinjaman->anggota->no_anggota }} - {{ $pinjaman->anggota->nama }}" disabled>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Keterangan <span class="text-danger">*</span></label>
                    <select name="keterangan" class="form-select @error('keterangan') is-invalid @enderror" {{ $hasPembayaran ? 'disabled' : '' }} required>
                        <option value="menunggu_konfirmasi" {{ old('keterangan', $pinjaman->keterangan) == 'menunggu_konfirmasi' ? 'selected' : '' }}>Menunggu Konfirmasi</option>
                        <option value="disetujui" {{ old('keterangan', $pinjaman->keterangan) == 'disetujui' ? 'selected' : '' }}>Disetujui</option>
                        <option value="ditolak" {{ old('keterangan', $pinjaman->keterangan) == 'ditolak' ? 'selected' : '' }}>Ditolak</option>
                    </select>
                    @error('keterangan')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-4">
                    <label class="form-label">Nominal Pinjaman <span class="text-danger">*</span></label>
                    <div class="input-group">
                        <span class="input-group-text">Rp</span>
                        <input type="text" name="nominal" id="nominal" class="form-control input-nominal @error('nominal') is-invalid @enderror" value="{{ old('nominal', number_format($pinjaman->nominal, 0, ',', '.')) }}" {{ $hasPembayaran ? 'readonly' : '' }} inputmode="numeric" required>
                    </div>
                    @error('nominal')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-4">
                    <label class="form-label">Bunga (%) <span class="text-danger">*</span></label>
                    <input type="number" name="bunga" id="bunga" class="form-control @error('bunga') is-invalid @enderror" value="{{ old('bunga', $pinjaman->bunga ?? 1) }}" step="0.01" {{ $hasPembayaran ? 'readonly' : '' }} required>
                    @error('bunga')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-4">
                    <label class="form-label">Jangka Waktu (Bulan) <span class="text-danger">*</span></label>
                    <input type="number" name="jangka_waktu" id="jangka_waktu" class="form-control @error('jangka_waktu') is-invalid @enderror" value="{{ old('jangka_waktu', $pinjaman->jangka_waktu) }}" min="1" {{ $hasPembayaran ? 'readonly' : '' }} required>
                    @error('jangka_waktu')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-6">
                    <label class="form-label">Tanggal Selesai</label>
                    <input type="date" id="tanggal_selesai" class="form-control bg-light" disabled>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Total Pinjaman + Bunga</label>
                    <input type="text" id="totalPinjamanDisplay" class="form-control bg-light" value="Rp 0" disabled>
                </div>
            </div>

            <div class="mt-4" id="simulasiContainer" style="display:none">
                <hr>
                <h5 class="fw-bold"><i class="bi bi-calculator"></i> Simulasi Angsuran</h5>
                <div class="table-responsive">
                    <table class="table table-bordered table-sm" id="tabelSimulasi">
                        <thead class="table-light">
                            <tr>
                                <th class="text-center">Angsuran ke</th>
                                <th>Tanggal Jatuh Tempo</th>
                                <th class="text-end">Jumlah Angsuran</th>
                                <th class="text-end">Sisa Bayar</th>
                            </tr>
                        </thead>
                        <tbody id="simulasiBody"></tbody>
                        <tfoot class="table-light">
                            <tr>
                                <th colspan="2" class="text-end">Total</th>
                                <th class="text-end" id="totalAngsuran">Rp 0</th>
                                <th></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>

            @if(!$hasPembayaran)
            <button type="submit" class="btn btn-success mt-3">Update</button>
            @endif
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function () {
        function renderSimulasi() {
            const tgl = $('#tanggal').val();
            const bln = parseInt($('#jangka_waktu').val()) || 0;
            const nominal = parseFloat($('#nominal').val().replace(/\./g, '')) || 0;
            const bunga = parseFloat($('#bunga').val()) || 0;

            if (!tgl || bln < 1 || nominal < 1) {
                $('#simulasiContainer').hide();
                return;
            }

            const totalPinjaman = nominal + (nominal * bunga / 100);
            const angsuranPerBulan = totalPinjaman / bln;
            let rows = '';
            let totalAngsuran = 0;

            for (let i = 1; i <= bln; i++) {
                const d = new Date(tgl);
                d.setMonth(d.getMonth() + i);
                const y = d.getFullYear();
                const m = String(d.getMonth() + 1).padStart(2, '0');
                const day = String(d.getDate()).padStart(2, '0');
                const jatuhTempo = day + '/' + m + '/' + y;

                const angsuran = angsuranPerBulan;
                const sisaBayar = Math.max(totalPinjaman - (angsuran * i), 0);
                totalAngsuran += angsuran;

                rows += '<tr>' +
                    '<td class="text-center fw-semibold">' + i + '</td>' +
                    '<td>' + jatuhTempo + '</td>' +
                    '<td class="text-end">Rp ' + Math.round(angsuran).toLocaleString('id-ID') + '</td>' +
                    '<td class="text-end">Rp ' + Math.round(sisaBayar).toLocaleString('id-ID') + '</td>' +
                    '</tr>';
            }

            $('#simulasiBody').html(rows);
            $('#totalAngsuran').text('Rp ' + Math.round(totalAngsuran).toLocaleString('id-ID'));
            $('#simulasiContainer').show();
        }

        function hitungSelesai() {
            const tgl = $('#tanggal').val();
            const bln = parseInt($('#jangka_waktu').val()) || 0;
            const nominal = parseFloat($('#nominal').val().replace(/\./g, '')) || 0;
            const bunga = parseFloat($('#bunga').val()) || 0;

            if (tgl && bln > 0) {
                const d = new Date(tgl);
                d.setMonth(d.getMonth() + bln);
                const y = d.getFullYear();
                const m = String(d.getMonth() + 1).padStart(2, '0');
                const day = String(d.getDate()).padStart(2, '0');
                $('#tanggal_selesai').val(y + '-' + m + '-' + day);
            } else {
                $('#tanggal_selesai').val('');
            }

            const total = nominal + (nominal * bunga / 100);
            $('#totalPinjamanDisplay').val('Rp ' + total.toLocaleString('id-ID'));

            renderSimulasi();
        }

        @if(!$hasPembayaran)
        $('#tanggal, #jangka_waktu, #nominal, #bunga').on('change keyup', hitungSelesai);
        @endif
        hitungSelesai();
    });
</script>
@endpush