@extends('layouts.application-wizard')

@section('step-content')
@php $d = $application->section_data_pemohon ?? []; @endphp

<form id="step-form-2" method="POST"
      action="{{ route('applications.step.save', ['id' => $application->id, 'step' => 2]) }}">
    @csrf

    <div class="row g-3" x-data="{ status_kawin: '{{ old('status_kawin', $d['status_kawin'] ?? '') }}' }">

        <div class="col-12">
            <h6 class="fw-semibold text-muted mb-0" style="font-size:.8rem;letter-spacing:.05em;">IDENTITAS PEMOHON</h6>
            <hr class="mt-1 mb-3">
        </div>

        <div class="col-12 col-md-8">
            <label class="form-label required">Nama Lengkap (sesuai KTP)</label>
            <input type="text" name="nama" class="form-control @error('nama') is-invalid @enderror"
                value="{{ old('nama', $d['nama'] ?? '') }}" required>
            @error('nama')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-12 col-md-4">
            <label class="form-label required">Jenis Kelamin</label>
            <select name="jenis_kelamin" class="form-select @error('jenis_kelamin') is-invalid @enderror" required>
                <option value="">-- Pilih --</option>
                <option value="L" @selected(old('jenis_kelamin', $d['jenis_kelamin'] ?? '') === 'L')>Laki-laki</option>
                <option value="P" @selected(old('jenis_kelamin', $d['jenis_kelamin'] ?? '') === 'P')>Perempuan</option>
            </select>
            @error('jenis_kelamin')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-12 col-md-6">
            <label class="form-label required">NIK / No. KTP</label>
            <input type="text" name="nik" maxlength="16" pattern="\d{16}"
                class="form-control @error('nik') is-invalid @enderror"
                value="{{ old('nik', $d['nik'] ?? '') }}" required>
            @error('nik')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-12 col-md-6">
            <label class="form-label required">No. Kartu Keluarga</label>
            <input type="text" name="no_kk" maxlength="16" pattern="\d{16}"
                class="form-control @error('no_kk') is-invalid @enderror"
                value="{{ old('no_kk', $d['no_kk'] ?? '') }}" required>
            @error('no_kk')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-12 col-md-6">
            <label class="form-label required">Tempat Lahir</label>
            <input type="text" name="tempat_lahir" class="form-control @error('tempat_lahir') is-invalid @enderror"
                value="{{ old('tempat_lahir', $d['tempat_lahir'] ?? '') }}" required>
            @error('tempat_lahir')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-12 col-md-6">
            <label class="form-label required">Tanggal Lahir</label>
            <input type="date" name="tanggal_lahir" class="form-control @error('tanggal_lahir') is-invalid @enderror"
                value="{{ old('tanggal_lahir', $d['tanggal_lahir'] ?? '') }}" required>
            @error('tanggal_lahir')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-12 col-md-6">
            <label class="form-label required">Pendidikan Terakhir</label>
            <select name="pendidikan" class="form-select @error('pendidikan') is-invalid @enderror" required>
                <option value="">-- Pilih --</option>
                @foreach(['SD','SMP','SMA/SMK','D3','S1','S2','S3','Tidak Sekolah'] as $edu)
                    <option value="{{ $edu }}" @selected(old('pendidikan', $d['pendidikan'] ?? '') === $edu)>{{ $edu }}</option>
                @endforeach
            </select>
            @error('pendidikan')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-12 col-md-6">
            <label class="form-label required">Nama Ibu Kandung</label>
            <input type="text" name="nama_ibu_kandung" class="form-control @error('nama_ibu_kandung') is-invalid @enderror"
                value="{{ old('nama_ibu_kandung', $d['nama_ibu_kandung'] ?? '') }}" required>
            @error('nama_ibu_kandung')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-12 col-md-4">
            <label class="form-label required">Nama Kelompok</label>
            <input type="text" name="nama_kelompok" class="form-control @error('nama_kelompok') is-invalid @enderror"
                value="{{ old('nama_kelompok', $d['nama_kelompok'] ?? '') }}">
            @error('nama_kelompok')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-12 col-md-4">
            <label class="form-label required">Status Perkawinan</label>
            <select name="status_kawin" x-model="status_kawin"
                class="form-select @error('status_kawin') is-invalid @enderror" required>
                <option value="">-- Pilih --</option>
                <option value="belum_kawin" @selected(old('status_kawin', $d['status_kawin'] ?? '') === 'belum_kawin')>Belum Kawin</option>
                <option value="kawin" @selected(old('status_kawin', $d['status_kawin'] ?? '') === 'kawin')>Kawin</option>
                <option value="cerai_hidup" @selected(old('status_kawin', $d['status_kawin'] ?? '') === 'cerai_hidup')>Cerai Hidup</option>
                <option value="cerai_mati" @selected(old('status_kawin', $d['status_kawin'] ?? '') === 'cerai_mati')>Cerai Mati</option>
            </select>
            @error('status_kawin')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-12 col-md-4">
            <label class="form-label required">Jumlah Tanggungan</label>
            <div class="input-group">
                <input type="number" name="jumlah_tanggungan" min="0"
                    class="form-control @error('jumlah_tanggungan') is-invalid @enderror"
                    value="{{ old('jumlah_tanggungan', $d['jumlah_tanggungan'] ?? 0) }}" required>
                <span class="input-group-text">orang</span>
                @error('jumlah_tanggungan')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>

        {{-- Data Pasangan (conditional) --}}
        <div class="col-12" x-show="status_kawin === 'kawin'" x-cloak>
            <h6 class="fw-semibold text-muted mb-0 mt-2" style="font-size:.8rem;letter-spacing:.05em;">DATA PASANGAN</h6>
            <hr class="mt-1 mb-3">
            <div class="row g-3">
                <div class="col-12 col-md-6">
                    <label class="form-label required">Nama Pasangan</label>
                    <input type="text" name="nama_pasangan" class="form-control @error('nama_pasangan') is-invalid @enderror"
                        value="{{ old('nama_pasangan', $d['nama_pasangan'] ?? '') }}">
                    @error('nama_pasangan')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-12 col-md-6">
                    <label class="form-label required">NIK Pasangan</label>
                    <input type="text" name="nik_pasangan" maxlength="16"
                        class="form-control @error('nik_pasangan') is-invalid @enderror"
                        value="{{ old('nik_pasangan', $d['nik_pasangan'] ?? '') }}">
                    @error('nik_pasangan')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-12 col-md-6">
                    <label class="form-label required">Tanggal Lahir Pasangan</label>
                    <input type="date" name="tanggal_lahir_pasangan" class="form-control @error('tanggal_lahir_pasangan') is-invalid @enderror"
                        value="{{ old('tanggal_lahir_pasangan', $d['tanggal_lahir_pasangan'] ?? '') }}">
                    @error('tanggal_lahir_pasangan')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
        </div>

    </div>
</form>
@endsection

@section('step-footer')
<div class="d-flex justify-content-between">
    <a href="{{ route('applications.step', ['id' => $application->id, 'step' => 1]) }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i>Kembali
    </a>
    <button type="submit" form="step-form-2" class="btn btn-primary px-4">
        Lanjut <i class="bi bi-arrow-right ms-1"></i>
    </button>
</div>
@endsection