@extends('layouts.admin')

@section('content')
    <div class="content-wrapper pb-0 min-vh-100">
        <div class="page-header flex-wrap">
            <h3 class="mb-0">Tambah Nasabah</h3>
        </div>

        <div class="card">
            <div class="card-body">
                <form action="{{ route('nasabah.simpan') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="nama" class="form-label">Nama</label>
                                <input type="text" class="form-control" id="nama" name="nama" required>
                            </div>

                            <div class="mb-3">
                                <label for="golongan_pekerjaan" class="form-label">Golongan Pekerjaan</label>
                                <select class="form-control" id="golongan_pekerjaan" name="golongan_pekerjaan" required>
                                    <option value="" disabled selected>-- Pilih Golongan --</option>
                                    <option value="1A">1A</option>
                                    <option value="1B">1B</option>
                                    <option value="1C">1C</option>
                                    <option value="1D">1D</option>
                                    <option value="2A">2A</option>
                                    <option value="2B">2B</option>
                                    <option value="2C">2C</option>
                                    <option value="2D">2D</option>
                                    <option value="3A">3A</option>
                                    <option value="3B">3B</option>
                                    <option value="3C">3C</option>
                                    <option value="3D">3D</option>
                                    <option value="4A">4A</option>
                                    <option value="4B">4B</option>
                                    <option value="4C">4C</option>
                                    <option value="4D">4D</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="status_pekerjaan" class="form-label">Status Pekerjaan</label>
                                <select class="form-control" id="status_pekerjaan" name="status_pekerjaan" required>
                                    <option value="" disabled selected>-- Pilih Status --</option>
                                    <option value="Tetap">Tetap</option>
                                    <option value="PKWT">PKWT</option>
                                    <option value="Kontrak">Kontrak</option>
                                    <option value="SW">SW</option>
                                    <option value="OS">OS</option>
                                    <option value="Musiman">Musiman</option>
                                </select>
                            </div>


                            <div class="mb-3">
                                <label for="jumlah_pinjaman" class="form-label">Jumlah Pinjaman</label>
                                <input type="number" class="form-control" id="jumlah_pinjaman" name="jumlah_pinjaman"
                                    required>
                            </div>

                            <div class="mb-3" id="history_pinjaman_group">
                                <label for="history_pinjaman" class="form-label">History Pinjaman</label>
                                <input type="text" class="form-control" id="history_pinjaman" name="history_pinjaman">
                            </div>


                            <div class="mb-3">
                                <label for="tabungan_simpanan_wajib" class="form-label">Tabungan Wajib</label>
                                <input type="number" class="form-control" id="tabungan_simpanan_wajib"
                                    name="tabungan_simpanan_wajib" required>
                            </div>

                            <div class="mb-3">
                                <label for="jumlah_setoran" class="form-label">Jumlah Setoran</label>
                                <input type="number" class="form-control" id="jumlah_setoran" name="jumlah_setoran"
                                    required>
                            </div>

                            <div class="mb-3">
                                <label for="jangka_waktu" class="form-label">Jangka Waktu (Bulan)</label>
                                <input type="number" class="form-control" id="jangka_waktu" name="jangka_waktu" required>
                            </div>

                            <div class="mb-3">
                                <label for="bunga" class="form-label">Bunga</label>
                                <input type="number" class="form-control" id="bunga" name="bunga" step="0.01"
                                    required>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="setoran_per_bulan" class="form-label">Setoran/Bulan</label>
                                <input type="number" class="form-control" id="setoran_per_bulan"
                                    name="setoran_per_bulan" readonly>
                            </div>

                            <div class="mb-3">
                                <label for="setoran_dan_bunga" class="form-label">Setoran + Bunga</label>
                                <input type="number" class="form-control" id="setoran_dan_bunga"
                                    name="setoran_dan_bunga" readonly>
                            </div>

                            <div class="mb-3">
                                <label for="sisa_pinjaman" class="form-label">Sisa Pinjaman</label>
                                <input type="number" class="form-control" id="sisa_pinjaman" name="sisa_pinjaman"
                                    required>
                            </div>


                            <div class="mb-3">
                                <label for="alamat" class="form-label">Alamat</label>
                                <textarea class="form-control" id="alamat" name="alamat" required></textarea>
                            </div>

                            <div class="mb-3">
                                <label for="status" class="form-label">Status</label>
                                <select name="status" id="status" class="form-control" required>
                                    <option value="" selected disabled>-- Pilih Status --</option>
                                    <option value="Nasabah Baru">Nasabah Baru</option>
                                    <option value="Nasabah Lama">Nasabah Lama
                                    </option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="slip_gaji" class="form-label">Slip Gaji (PDF, JPG, PNG)</label>
                                <input type="file" class="form-control" id="slip_gaji" name="slip_gaji"
                                    accept=".pdf,.jpg,.png">
                            </div>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-success">Simpan</button>
                    <a href="{{ route('nasabah.daftar') }}" class="btn btn-secondary">Batal</a>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        function toggleHistoryField() {
            const status = document.getElementById('status').value;
            const historyGroup = document.getElementById('history_pinjaman_group');

            if (status === "Nasabah Baru") {
                historyGroup.style.display = 'none';
                document.getElementById('history_pinjaman').value = '';
            } else if (status === "Nasabah Lama") {
                historyGroup.style.display = 'block';
            }
        }

        // Jalankan saat status berubah
        document.getElementById('status').addEventListener('change', toggleHistoryField);

        // Jalankan saat halaman pertama kali dimuat
        window.addEventListener('DOMContentLoaded', toggleHistoryField);
    </script>

    <script>
        function calculate() {
            const pinjaman = parseFloat(document.getElementById('jumlah_pinjaman').value) || 0;
            const jangkaWaktu = parseFloat(document.getElementById('jangka_waktu').value) || 1;
            const jumlahSetoran = parseFloat(document.getElementById('jumlah_setoran').value) || 0;

            // Bunga otomatis: 15.000 per juta pinjaman
            const pinjamanJuta = Math.floor(pinjaman / 1000000);
            const bunga = 15000 * pinjamanJuta;

            // Setoran/bulan
            const setoranPerBulan = pinjaman / jangkaWaktu;
            const setoranDanBunga = setoranPerBulan + bunga;

            // Total kewajiban
            const totalKewajiban = (bunga * jangkaWaktu) + pinjaman;

            // Sisa pinjaman = total kewajiban - jumlah setoran (uang yang sudah dibayar)
            const sisaPinjaman = totalKewajiban - (setoranDanBunga * jumlahSetoran);

            // Tampilkan hasil
            document.getElementById('bunga').value = Math.round(bunga);
            document.getElementById('setoran_per_bulan').value = Math.round(setoranPerBulan);
            document.getElementById('setoran_dan_bunga').value = Math.round(setoranDanBunga);
            document.getElementById('sisa_pinjaman').value = Math.round(sisaPinjaman);
        }

        document.querySelectorAll('#jumlah_pinjaman, #jangka_waktu, #jumlah_setoran')
            .forEach(input => input.addEventListener('input', calculate));

        window.addEventListener('DOMContentLoaded', calculate);
    </script>
@endsection