@extends('layouts.admin')

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

        <div class="card">
            <div class="card-body">
                <form action="{{ route('nasabah.update', $nasabah->id_nasabah) }}" method="POST"
                    enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="slip_gaji_lama" value="{{ $nasabah->slip_gaji }}">

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="nama" class="form-label">Nama</label>
                                <input type="text" name="nama" id="nama" class="form-control"
                                    value="{{ $nasabah->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" {{ $nasabah->golongan_pekerjaan == '1A' ? 'selected' : '' }}>1A
                                    </option>
                                    <option value="1B" {{ $nasabah->golongan_pekerjaan == '1B' ? 'selected' : '' }}>1B
                                    </option>
                                    <option value="1C" {{ $nasabah->golongan_pekerjaan == '1C' ? 'selected' : '' }}>1C
                                    </option>
                                    <option value="1D" {{ $nasabah->golongan_pekerjaan == '1D' ? 'selected' : '' }}>1D
                                    </option>
                                    <option value="2A" {{ $nasabah->golongan_pekerjaan == '2A' ? 'selected' : '' }}>2A
                                    </option>
                                    <option value="2B" {{ $nasabah->golongan_pekerjaan == '2B' ? 'selected' : '' }}>2B
                                    </option>
                                    <option value="2C" {{ $nasabah->golongan_pekerjaan == '2C' ? 'selected' : '' }}>2C
                                    </option>
                                    <option value="2D" {{ $nasabah->golongan_pekerjaan == '2D' ? 'selected' : '' }}>2D
                                    </option>
                                    <option value="3A" {{ $nasabah->golongan_pekerjaan == '3A' ? 'selected' : '' }}>3A
                                    </option>
                                    <option value="3B" {{ $nasabah->golongan_pekerjaan == '3B' ? 'selected' : '' }}>3B
                                    </option>
                                    <option value="3C" {{ $nasabah->golongan_pekerjaan == '3C' ? 'selected' : '' }}>3C
                                    </option>
                                    <option value="3D" {{ $nasabah->golongan_pekerjaan == '3D' ? 'selected' : '' }}>3D
                                    </option>
                                    <option value="4A" {{ $nasabah->golongan_pekerjaan == '4A' ? 'selected' : '' }}>4A
                                    </option>
                                    <option value="4B" {{ $nasabah->golongan_pekerjaan == '4B' ? 'selected' : '' }}>4B
                                    </option>
                                    <option value="4C" {{ $nasabah->golongan_pekerjaan == '4C' ? 'selected' : '' }}>4C
                                    </option>
                                    <option value="4D" {{ $nasabah->golongan_pekerjaan == '4D' ? 'selected' : '' }}>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" {{ $nasabah->status_pekerjaan == 'Tetap' ? 'selected' : '' }}>
                                        Tetap</option>
                                    <option value="PKWT" {{ $nasabah->status_pekerjaan == 'PKWT' ? 'selected' : '' }}>
                                        PKWT</option>
                                    <option value="Kontrak"
                                        {{ $nasabah->status_pekerjaan == 'Kontrak' ? 'selected' : '' }}>Kontrak</option>
                                    <option value="SW" {{ $nasabah->status_pekerjaan == 'SW' ? 'selected' : '' }}>SW
                                    </option>
                                    <option value="OS" {{ $nasabah->status_pekerjaan == 'OS' ? 'selected' : '' }}>OS
                                    </option>
                                    <option value="Musiman"
                                        {{ $nasabah->status_pekerjaan == 'Musiman' ? 'selected' : '' }}>Musiman</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="jumlah_pinjaman" class="form-label">Jumlah Pinjaman</label>
                                <input type="number" name="jumlah_pinjaman" id="jumlah_pinjaman" class="form-control"
                                    value="{{ $nasabah->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" name="history_pinjaman" id="history_pinjaman" class="form-control"
                                    value="{{ $nasabah->history_pinjaman }}">
                            </div>

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

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

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

                            <div class="mb-3">
                                <label for="bunga" class="form-label">Bunga</label>
                                <input type="number" name="bunga" id="bunga" class="form-control" step="0.01"
                                    value="{{ $nasabah->bunga }}" 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" name="setoran_per_bulan" id="setoran_per_bulan"
                                    class="form-control" value="{{ $nasabah->setoran_per_bulan }}" readonly>
                            </div>

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

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

                            <div class="mb-3">
                                <label for="alamat" class="form-label">Alamat</label>
                                <textarea name="alamat" id="alamat" class="form-control" required>{{ $nasabah->alamat }}</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="" disabled>-- Pilih Status --</option>
                                    <option value="Nasabah Baru"
                                        {{ $nasabah->status == 'Nasabah Baru' ? 'selected' : '' }}>Nasabah Baru</option>
                                    <option value="Nasabah Lama"
                                        {{ $nasabah->status == 'Nasabah Lama' ? 'selected' : '' }}>
                                        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" name="slip_gaji" id="slip_gaji" class="form-control"
                                    accept=".pdf,.jpg,.png">
                                @if ($nasabah->slip_gaji)
                                    <p><a href="{{ asset($nasabah->slip_gaji) }}" target="_blank">Lihat Slip Gaji
                                            Lama</a></p>
                                @endif
                            </div>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-warning">Update</button>
                    <a href="{{ route('nasabah.daftar') }}" class="btn btn-secondary">Batal</a>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('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 - 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