{{-- Step 01: ඉල්ලුම්කරුගේ විස්තර --}}
<div class="form-section {{ $currentStep === 0 ? 'active' : '' }}" id="sec0" data-step="0">

    <x-form.section-header number="01" title="ඉල්ලුම්කරුගේ විස්තර" />

    <div class="grid-3" style="margin-bottom:18px; align-items:start;">

        {{-- Column 1: මගේ --}}
        <x-form.card title="මවගේ විස්තර">
            <div style="display:flex;flex-direction:column;gap:13px">
                <x-form.field label="නම" name="my_name" placeholder="සම්පූර්ණ නම" :required="true" />
                <x-form.field label="ජා.හැ. අංකය" name="my_nic" placeholder="000000000V" :required="true" />
                <x-form.field label="රැකියාව" name="my_job" placeholder="රැකියා නාමය" />
                <x-form.field label="දූරකථන අංකය" name="my_phone" type="tel" placeholder="07X XXX XXXX" :required="true" />
                <x-form.field label="මාසික ආදායම" name="my_income" placeholder="රු. 00,000" />
            </div>
        </x-form.card>

        {{-- Column 2: බිරිඳ/සැමියාගේ --}}
        <x-form.card title="පියාගේ විස්තර">
            <div style="display:flex;flex-direction:column;gap:13px">
                <x-form.field label="නම" name="spouse_name" placeholder="සම්පූර්ණ නම" />
                <x-form.field label="ජා.හැ. අංකය" name="spouse_nic" placeholder="000000000V" />
                <x-form.field label="රැකියාව" name="spouse_job" placeholder="රැකියා නාමය" />
                <x-form.field label="දූරකථන අංකය" name="spouse_phone" type="tel" placeholder="07X XXX XXXX" />
                <x-form.field label="මාසික ආදායම" name="spouse_income" placeholder="රු. 00,000" />
            </div>
        </x-form.card>

        {{-- Column 3: භාරකරුගේ --}}
        <x-form.card>
            <div class="card-title">
                භාරකරුගේ විස්තර<br>
                <span style="font-size:10px;font-weight:400;color:var(--text-light)">
                    (මව / පිය / සොහොයුරා / සොහොයුරිය)
                </span>
            </div>
            <div style="display:flex;flex-direction:column;gap:13px">
                <x-form.field label="නම" name="guardian_name" placeholder="සම්පූර්ණ නම" />
                <x-form.field label="ජා.හැ.අංකය" name="guardian_nic" placeholder="000000000V" />
                <x-form.field label="රැකියාව" name="guardian_job" placeholder="රැකියා නාමය" />
                <x-form.field label="දූරකථන අංකය" name="guardian_phone" type="tel" placeholder="07X XXX XXXX" />
                <x-form.field label="මාසික ආදායම" name="guardian_income" placeholder="රු. 00,000" />
            </div>
        </x-form.card>

    </div>
    <div class="grid-1" style="margin-bottom:18px; align-items:start;">

        {{-- Q02: Address row --}}
        <x-form.card>
            <input type="hidden" id="addr_colombo" name="addr_colombo" value="{{ old('addr_colombo') }}">

            <div class="card-title">
                ලිපිනය
            </div>
            <div class="grid-3" style="margin-bottom:16px">
                <x-form.field label="අංකය" name="addr_number" placeholder="ගෙ / කාමර අංකය" />
                <x-form.field label="වීදිය" name="addr_street" placeholder="වීදිය / මාර්ගය" />
                <x-form.field label="නගරය" name="addr_city" placeholder="නගරය" :required="true" />
            </div>

            <div class="grid-2">
                <div class="field">
                    <label>මෙම ලිපිනය පදිංචි කාල සීමාව<span class="req" aria-hidden="true">*</span></label>
                    <div class="radio-group @error('residence_type') is-invalid @enderror">
                        <label class="radio-option">
                            <input type="radio" name="residence_type" value="permanent"
                                {{ old('residence_type') === 'permanent' ? 'checked' : '' }}>
                            <span class="radio-dot"></span> ස්ථිර
                        </label>
                        <label class="radio-option">
                            <input type="radio" name="residence_type" value="temporary"
                                {{ old('residence_type') === 'temporary' ? 'checked' : '' }}>
                            <span class="radio-dot"></span> තාවකාලික
                        </label>
                    </div>
                    @error('residence_type')
                        <span class="field-error">{{ $message }}</span>
                    @enderror
                </div>
                <div class="field"></div>
            </div>
        </x-form.card>

    </div>
</div>