@extends('layouts.public')

@section('title', 'e-Bansos | Cek Data Keluarga')

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

    <div class="row justify-content-center">
        <div class="col-lg-7 text-center">

            <h2 class="fw-bold mb-3">
                Sistem Informasi Bantuan Sosial
            </h2>

            <p class="text-muted mb-4">
                Cek status data keluarga penerima bantuan sosial
                menggunakan <strong>Nomor Kartu Keluarga</strong>
            </p>

            {{-- ALERT --}}
            @if(session('error'))
            <div class="alert alert-danger">
                <i class="bi bi-exclamation-circle"></i>
                {{ session('error') }}
            </div>
            @endif

            <div class="card shadow-sm border-0">
                <div class="card-body p-4">

                    <form method="POST" action="{{ route('public.cek-kk') }}">
                        @csrf

                        <div class="mb-3 text-start">
                            <label class="form-label fw-semibold">
                                Nomor Kartu Keluarga (KK)
                            </label>
                            <input type="text"
                                name="nomor_kk"
                                class="form-control form-control-lg
                                @error('nomor_kk') is-invalid @enderror"
                                placeholder="Masukkan 16 digit Nomor KK"
                                maxlength="16"
                                required>
                            @error('nomor_kk')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>

                        <button class="btn btn-primary btn-lg w-100">
                            <i class="bi bi-search"></i>
                            Cari Data Keluarga
                        </button>
                    </form>

                </div>
            </div>

            <p class="text-muted small mt-4">
                Data ditampilkan sesuai dengan basis data DTSEN / e-Bansos Kabupaten.
            </p>

        </div>
    </div>

</div>
@endsection