@extends('layouts.app')

@section('content')

<div x-data="{ step: 1 }" class="max-w-4xl mx-auto">

<form method="POST" action="{{ route('register.store') }}">
@csrf

<!-- ================= STEP 1 ================= -->
<div x-show="step === 1">
    <h3>Data Kepala Keluarga</h3>

    <input name="kepala_nik" placeholder="NIK" required>
    <input name="kepala_nama" placeholder="Nama Lengkap" required>

    <select name="kepala_jk">
        <option value="L">Laki-laki</option>
        <option value="P">Perempuan</option>
    </select>

    <input name="kepala_tempat_lahir" placeholder="Tempat Lahir">
    <input type="date" name="kepala_tanggal_lahir">
</div>

<!-- ================= STEP 2 ================= -->
<div x-show="step === 2">
    <h3>Data KSK</h3>

    <input name="nomor_ksk" placeholder="Nomor KSK" required>
    <input name="alamat" placeholder="Alamat">

    <input name="rt" placeholder="RT">
    <select name="rw_id">
        <option value="1">RW 06</option>
        <option value="2">RW 07</option>
        <option value="3">RW 08</option>
    </select>

    <input name="desa" placeholder="Desa">
    <input name="kecamatan" placeholder="Kecamatan">
    <input name="kabupaten" placeholder="Kabupaten">
    <input name="provinsi" placeholder="Provinsi">
    <input name="kode_pos" placeholder="Kode Pos">
</div>

<!-- ================= STEP 3 ================= -->
<div x-show="step === 3">
    <h3>Anggota Keluarga</h3>

    <!-- Kepala -->
    <input type="hidden" name="anggota[0][status]" value="kepala">

    <input name="anggota[0][nik]" placeholder="NIK Kepala" required>
    <input name="anggota[0][nama]" placeholder="Nama Kepala" required>

    <!-- Istri -->
    <input type="hidden" name="anggota[1][status]" value="istri">
    <input name="anggota[1][nik]" placeholder="NIK Istri">
    <input name="anggota[1][nama]" placeholder="Nama Istri">

    <!-- Anak (bisa ditambah nanti pakai JS) -->
    <input type="hidden" name="anggota[2][status]" value="anak">
    <input name="anggota[2][nik]" placeholder="NIK Anak">
    <input name="anggota[2][nama]" placeholder="Nama Anak">
</div>

<!-- ================= STEP 4 ================= -->
<div x-show="step === 4">
    <h3>Persetujuan</h3>
    <p>Peraturan Sinoman...</p>

    <label>
        <input type="checkbox" required>
        Saya setuju
    </label>
</div>

<!-- ================= STEP 5 ================= -->
<div x-show="step === 5">
    <h3>Konfirmasi</h3>
    <p>Setelah submit, Anda akan diarahkan ke halaman pembayaran.</p>
</div>

<!-- ================= NAV ================= -->
<div class="flex justify-between mt-4">
    <button type="button" @click="step--" x-show="step > 1">Kembali</button>
    <button type="button" @click="step++" x-show="step < 5">Lanjut</button>
    <button type="submit" x-show="step === 5">Submit</button>
</div>

</form>
</div>

@endsection