<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input Data KK & Mustahik - Sistem Zakat</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <style>
        .card { border-radius: 16px; border: none; box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
        .form-label { font-weight: 600; color: #475569; }
        .btn-success { background-color: #10b981; border-color: #10b981; }
        .btn-success:hover { background-color: #059669; border-color: #059669; }
    </style>
</head>
<body class="bg-light">

<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-md-9">
            <div class="mb-4 d-flex justify-content-between align-items-center">
                <a href="{{ url('/rt/dashboard') }}" class="btn btn-secondary btn-sm rounded-pill px-3">
                    <i class="bi bi-arrow-left"></i> Kembali ke Dashboard
                </a>
                <span class="badge bg-success py-2 px-3 rounded-pill">RT / RW Panel</span>
            </div>

            <div class="card bg-white p-4">
                <div class="card-header bg-success text-white py-3 rounded-top-4 border-0">
                    <h5 class="m-0 fw-bold"><i class="bi bi-person-plus-fill me-2"></i> Input Data Pengajuan Mustahik</h5>
                    <p class="m-0 small opacity-75">Ajukan warga yang membutuhkan bantuan zakat untuk diverifikasi oleh Amil</p>
                </div>
                <div class="card-body p-4">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="bi bi-check-circle-fill me-2"></i> <strong>Berhasil!</strong> {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    @if($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="bi bi-exclamation-triangle-fill me-2"></i> <strong>Perbaiki kesalahan berikut:</strong>
                            <ul class="mb-0 mt-1">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    <form action="{{ url('/rt/input-mustahik') }}" method="POST">
                        @csrf

                        <!-- SECTION 1: DATA KEPALA KELUARGA -->
                        <h6 class="text-success fw-bold border-bottom pb-2 mb-3"><i class="bi bi-card-list me-1"></i> 1. Informasi Kartu Keluarga (KK)</h6>
                        
                        <div class="mb-4">
                            <label class="form-label">Pilih Kepala Keluarga / KK Warga <span class="text-danger">*</span></label>
                            <select name="nik_kepala_kk" id="nik_kepala_kk" class="form-select" required>
                                <option value="">-- Pilih KK Terdaftar --</option>
                                @foreach($dataKK as $kk)
                                    <option value="{{ $kk->nik_kepala_kk }}" {{ old('nik_kepala_kk') == $kk->nik_kepala_kk ? 'selected' : '' }}>
                                        {{ $kk->nama_kepala_kk }} — NIK: {{ $kk->nik_kepala_kk }} (Tanggungan: {{ $kk->jumlah_tanggungan }})
                                    </option>
                                @endforeach
                            </select>
                            @if($dataKK->isEmpty())
                                <small class="text-warning"><i class="bi bi-exclamation-circle me-1"></i>Belum ada data KK terdaftar di masjid Anda. Minta Admin Masjid mendaftarkan data warga terlebih dahulu.</small>
                            @endif
                        </div>

                        <!-- SECTION 2: DATA DETAIL MUSTAHIK -->
                        <h6 class="text-success fw-bold border-bottom pb-2 mb-3"><i class="bi bi-person-fill-check me-1"></i> 2. Informasi Detail Mustahik</h6>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Nama Lengkap Mustahik <span class="text-danger">*</span></label>
                                <input type="text" name="nama_mustahik" class="form-control" placeholder="Nama lengkap warga yang diajukan" value="{{ old('nama_mustahik') }}" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Hubungan dengan Kepala Keluarga <span class="text-danger">*</span></label>
                                <select name="status_hubungan" class="form-select" required>
                                    <option value="">-- Pilih Hubungan --</option>
                                    <option value="Kepala Keluarga" {{ old('status_hubungan') == 'Kepala Keluarga' ? 'selected' : '' }}>Kepala Keluarga</option>
                                    <option value="Istri" {{ old('status_hubungan') == 'Istri' ? 'selected' : '' }}>Istri</option>
                                    <option value="Anak" {{ old('status_hubungan') == 'Anak' ? 'selected' : '' }}>Anak</option>
                                    <option value="Lainnya" {{ old('status_hubungan') == 'Lainnya' ? 'selected' : '' }}>Lainnya</option>
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Tanggal Lahir <span class="text-danger">*</span></label>
                                <input type="date" name="tgl_lahir" class="form-control" value="{{ old('tgl_lahir') }}" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">No. Telepon / HP <span class="text-danger">*</span></label>
                                <input type="text" name="no_hp" class="form-control" placeholder="Contoh: 0812345678" value="{{ old('no_hp') }}" required>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Pekerjaan <span class="text-danger">*</span></label>
                                <input type="text" name="pekerjaan" class="form-control" placeholder="Pekerjaan saat ini" value="{{ old('pekerjaan') }}" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Pendapatan Bulanan (Rp) <span class="text-danger">*</span></label>
                                <input type="text" name="pendapatan_bulanan" id="pendapatan_bulanan_survey" class="form-control" placeholder="Rp. 0" value="{{ old('pendapatan_bulanan') }}" required>
                            </div>
                        </div>

                        <!-- SECTION 3: KRITERIA KELAYAKAN & ASNAF -->
                        <h6 class="text-success fw-bold border-bottom pb-2 mb-3"><i class="bi bi-clipboard2-pulse me-1"></i> 3. Kriteria Kondisi Kelayakan Warga</h6>

                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Status Kepemilikan Rumah <span class="text-danger">*</span></label>
                                <select name="status_kepemilikan_rumah" class="form-select" required>
                                    <option value="">-- Pilih --</option>
                                    <option value="Milik Sendiri" {{ old('status_kepemilikan_rumah') == 'Milik Sendiri' ? 'selected' : '' }}>Milik Sendiri</option>
                                    <option value="Sewa" {{ old('status_kepemilikan_rumah') == 'Sewa' ? 'selected' : '' }}>Sewa</option>
                                    <option value="Menumpang" {{ old('status_kepemilikan_rumah') == 'Menumpang' ? 'selected' : '' }}>Menumpang</option>
                                    <option value="Lainnya" {{ old('status_kepemilikan_rumah') == 'Lainnya' ? 'selected' : '' }}>Lainnya</option>
                                </select>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Kondisi Warga <span class="text-danger">*</span></label>
                                <select name="status_kondisi_warga" class="form-select" required>
                                    <option value="">-- Pilih --</option>
                                    <option value="Tidak Mampu" {{ old('status_kondisi_warga') == 'Tidak Mampu' || old('status_kondisi_warga') == '' ? 'selected' : '' }}>Tidak Mampu</option>
                                    <option value="Mampu" {{ old('status_kondisi_warga') == 'Mampu' ? 'selected' : '' }}>Mampu (Tidak Layak Zakat)</option>
                                </select>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Kategori Asnaf <span class="text-danger">*</span></label>
                                <select name="kategori_asnaf" class="form-select" required>
                                    <option value="">-- Pilih --</option>
                                    <option value="Fakir" {{ old('kategori_asnaf') == 'Fakir' ? 'selected' : '' }}>Fakir (Sangat Butuh)</option>
                                    <option value="Miskin" {{ old('kategori_asnaf') == 'Miskin' ? 'selected' : '' }}>Miskin (Kekurangan)</option>
                                    <option value="Gharim" {{ old('kategori_asnaf') == 'Gharim' ? 'selected' : '' }}>Gharim (Terlilit Utang)</option>
                                    <option value="Ibnu Sabil" {{ old('kategori_asnaf') == 'Ibnu Sabil' ? 'selected' : '' }}>Ibnu Sabil (Musafir)</option>
                                </select>
                            </div>
                        </div>

                        <div class="d-grid mt-4">
                            <button type="submit" class="btn btn-success btn-lg fw-bold py-2 rounded-3 shadow-sm" {{ $dataKK->isEmpty() ? 'disabled' : '' }}>
                                <i class="bi bi-send-fill me-1"></i> Kirim Pengajuan ke Amil Zakat
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    var rupiah = document.getElementById('pendapatan_bulanan_survey');
    if (rupiah) {
        rupiah.addEventListener('keyup', function(e){
            rupiah.value = formatRupiah(this.value, 'Rp. ');
        });
    }

    function formatRupiah(angka, prefix){
        var number_string = angka.replace(/[^,\d]/g, '').toString(),
        split           = number_string.split(','),
        sisa            = split[0].length % 3,
        rupiah          = split[0].substr(0, sisa),
        ribuan          = split[0].substr(sisa).match(/\d{3}/gi);

        if(ribuan){
            separator = sisa ? '.' : '';
            rupiah += separator + ribuan.join('.');
        }

        rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
        return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : '');
    }
});
</script>
</body>
</html>