@extends('layouts.app')

@section('title','Penyaluran Bansos Desa')

@section('content')
<div class="container-fluid">

    <h4 class="fw-bold mb-3">Penyaluran Bansos Desa</h4>

    <div class="card shadow-sm">
        <div class="card-body">

            <label class="fw-bold">Nomor Kartu Keluarga</label>
            <input id="nomor_kk" class="form-control mb-3"
                maxlength="16"
                placeholder="16 digit Nomor KK"
                oninput="this.value=this.value.replace(/[^0-9]/g,'')">

            <button class="btn btn-primary" onclick="cekKk()">Cek KK</button>

            <div id="hasil" class="mt-4"></div>

        </div>
    </div>
</div>

<meta name="csrf-token" content="{{ csrf_token() }}">

<script>
    function cekKk() {
        fetch("{{ route('desa.penyaluran.cek-kk') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": document.querySelector('meta[name=csrf-token]').content
                },
                body: JSON.stringify({
                    nomor_kk: nomor_kk.value
                })
            })
            .then(r => r.json())
            .then(res => {
                if (!res.status) {
                    alert(res.message);
                    return;
                }
                let html = '<ul class="list-group">';
                res.anggota.forEach(a => {
                    html += `
<li class="list-group-item d-flex justify-content-between">
<div>
<strong>${a.nama}</strong><br>
<small>${a.hubungan_keluarga}</small>
</div>
<a class="btn btn-success btn-sm"
href="{{ route('desa.penyaluran.validasi') }}?nik=${a.nik}&nama=${a.nama}&nomor_kk=${res.kk.nomor_kk}">
Pilih
</a>
</li>`;
                });
                html += '</ul>';
                hasil.innerHTML = html;
            });
    }
</script>
@endsection