@extends('layouts.app')
@section('title', 'Tambah 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">
        <form method="POST" action="{{ url('admin/pinjaman') }}" id="formPinjaman">
            @csrf
            <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', date('Y-m-d')) }}" 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="Otomatis" disabled>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Anggota <span class="text-danger">*</span></label>
                    <select name="anggota_id" id="anggota_id" class="form-select @error('anggota_id') is-invalid @enderror" required>
                        <option value="">-- Pilih Anggota --</option>
                        @foreach($anggota as $a)
                            <option value="{{ $a->id }}" {{ old('anggota_id') == $a->id ? 'selected' : '' }}>{{ $a->no_anggota }} - {{ $a->nama }}</option>
                        @endforeach
                    </select>
                    @error('anggota_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </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" required>
                        <option value="menunggu_konfirmasi" {{ old('keterangan', 'menunggu_konfirmasi') == 'menunggu_konfirmasi' ? 'selected' : '' }}>Menunggu Konfirmasi</option>
                        <option value="disetujui" {{ old('keterangan') == 'disetujui' ? 'selected' : '' }}>Disetujui</option>
                        <option value="ditolak" {{ old('keterangan') == 'ditolak' ? 'selected' : '' }}>Ditolak</option>
                    </select>
                    @error('keterangan')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-12">
                    <div class="alert alert-info py-2 mb-0" id="infoSimpananPokok">
                        <i class="bi bi-info-circle"></i> Total Simpanan Pokok: <strong><span id="totalPokok">Rp 0</span></strong>
                    </div>
                </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') }}" placeholder="0" 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', $settings['bunga_default'] ?? 1) }}" placeholder="{{ $settings['bunga_default'] ?? 1 }}" step="0.01" 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', 12) }}" placeholder="12" min="1" 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>

            <button type="submit" class="btn btn-success mt-3">Simpan</button>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function () {
        function hitungSelesai() {
            const tgl = $('#tanggal').val();
            const bln = parseInt($('#jangka_waktu').val()) || 0;
            let 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'));

            const totalPokok = parseFloat($('#totalPokok').data('raw') || 0);
            const nominalInput = $('#nominal');
            if (nominal > totalPokok) {
                nominalInput.addClass('is-invalid');
                if (!$('#nominalWarning').length) {
                    nominalInput.after('<div id="nominalWarning" class="invalid-feedback d-block">Nominal melebihi total simpanan pokok!</div>');
                }
            } else {
                nominalInput.removeClass('is-invalid');
                $('#nominalWarning').remove();
            }

            renderSimulasi();
        }

        $('#anggota_id').change(function () {
            const id = $(this).val();
            if (id) {
                $.get('{{ url("admin/pinjaman/get-simpanan-pokok") }}/' + id, function (data) {
                    $('#totalPokok').text(data.formatted).data('raw', data.total);
                    hitungSelesai();
                });
            } else {
                $('#totalPokok').text('Rp 0').data('raw', 0);
                hitungSelesai();
            }
        });

        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();
        }

        $('#tanggal, #jangka_waktu, #nominal, #bunga').on('change keyup', hitungSelesai);

        if ($('#anggota_id').val()) {
            $('#anggota_id').trigger('change');
        }
    });
</script>
@endpush