@extends('layouts.application-wizard')

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

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

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

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

        <div class="col-12">
            <label class="form-label required">Alamat Lengkap</label>
            <textarea name="alamat" rows="2" class="form-control @error('alamat') is-invalid @enderror" required>{{ old('alamat', $d['alamat'] ?? '') }}</textarea>
            @error('alamat')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

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

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

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

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

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

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

        <div class="col-12 col-md-4">
            <label class="form-label">Telepon / Fax</label>
            <input type="text" name="telepon" class="form-control"
                value="{{ old('telepon', $d['telepon'] ?? '') }}">
        </div>

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

        <div class="col-12 col-md-6">
            <label class="form-label required">Status Tempat Tinggal</label>
            <select name="status_tempat_tinggal" class="form-select @error('status_tempat_tinggal') is-invalid @enderror" required>
                <option value="">-- Pilih --</option>
                @foreach(['Milik Sendiri','Kontrak/Sewa','Milik Keluarga','Dinas','Lainnya'] as $opt)
                    <option value="{{ $opt }}" @selected(old('status_tempat_tinggal', $d['status_tempat_tinggal'] ?? '') === $opt)>{{ $opt }}</option>
                @endforeach
            </select>
            @error('status_tempat_tinggal')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

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

        {{-- Alamat KTP berbeda --}}
        <div class="col-12">
            <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" name="alamat_ktp_berbeda" id="alamatKtpBerbeda"
                    x-model="berbeda" value="1"
                    @if(old('alamat_ktp_berbeda', $d['alamat_ktp_berbeda'] ?? false)) checked @endif>
                <label class="form-check-label" for="alamatKtpBerbeda">
                    Alamat sesuai KTP berbeda dengan alamat tinggal saat ini
                </label>
            </div>
        </div>

        <div class="col-12" x-show="berbeda" x-cloak>
            <div class="card bg-light border-0 p-3">
                <h6 class="fw-semibold text-muted mb-2" style="font-size:.8rem;letter-spacing:.05em;">ALAMAT SESUAI KTP</h6>
                <div class="row g-2">
                    <div class="col-12">
                        <textarea name="alamat_ktp" rows="2" class="form-control"
                            placeholder="Alamat lengkap sesuai KTP">{{ old('alamat_ktp', $d['alamat_ktp'] ?? '') }}</textarea>
                    </div>
                    <div class="col-4 col-md-2">
                        <input type="text" name="rt_ktp" maxlength="5" class="form-control"
                            placeholder="RT" value="{{ old('rt_ktp', $d['rt_ktp'] ?? '') }}">
                    </div>
                    <div class="col-4 col-md-2">
                        <input type="text" name="rw_ktp" maxlength="5" class="form-control"
                            placeholder="RW" value="{{ old('rw_ktp', $d['rw_ktp'] ?? '') }}">
                    </div>
                    <div class="col-12 col-md-4">
                        <input type="text" name="kelurahan_ktp" class="form-control"
                            placeholder="Kelurahan/Desa" value="{{ old('kelurahan_ktp', $d['kelurahan_ktp'] ?? '') }}">
                    </div>
                    <div class="col-12 col-md-4">
                        <input type="text" name="kecamatan_ktp" class="form-control"
                            placeholder="Kecamatan" value="{{ old('kecamatan_ktp', $d['kecamatan_ktp'] ?? '') }}">
                    </div>
                </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' => 2]) }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i>Kembali
    </a>
    <button type="submit" form="step-form-3" class="btn btn-primary px-4">
        Lanjut <i class="bi bi-arrow-right ms-1"></i>
    </button>
</div>
@endsection