<div class="card mb-4 shadow-sm" wire:ignore.self>
    <div class="card-body">

        {{-- HEADER --}}
        <h4 class="fw-bold mb-3 d-flex justify-content-between align-items-center">
            Further Information
        </h4>
        <div class="row g-4">
            <div class="col-md-12 radio-lg">
                {{-- Added wire:model and changed keys to integers for reliable Livewire state --}}
                <x-ui.radio
                        label="Did you apply to the Advance Payment Scheme?"
                        name="aps"
                        wire:model="aps"
                        :options="[1 => 'Yes', 0 => 'No']"
                />
            </div>
            <div class="col-md-12 radio-lg">
                <x-ui.radio
                        label="If Yes, do you give permission to confirm that you were resident in a relevant care setting as a child in Scotland?"
                        name="confirm_aps"
                        wire:model="confirm_aps"
                        :options="[1 => 'Yes', 0 => 'No']"
                />
            </div>
            <div class="col-12 col-md-6">
                {{-- Added wire:model bindings so data reaches Livewire --}}
                <x-ui.input name="name_in_care"
                            wire:model="name_in_care"
                            placeholder="Enter here..."
                            label="When you were in care, were you known by a different name by the one you now use?"/>
            </div>
            <div class="col-12 col-md-6">
                <x-ui.input name="legal_name_change"
                            wire:model="legal_name_change"
                            placeholder="Enter here..."
                            label="Have you legally changed your name at any time? (eg by deed poll or marriage)"/>
            </div>
            <div class="col-12">
                {{-- Fixed Double ?? in label and added wire:model --}}
                <x-ui.select
                        label="How would you like to provide your supporting documents which shows your name change?"
                        name="supporting_documents"
                        wire:model="supporting_documents"
                        :options="[
                     'NA' => 'Not Applicable',
                     'Help' => 'I need help finding a supporting document (a case worker will contact you)',
                     'Yes' => 'I have provided a supporting document with this form'
                ]"/>
            </div>
        </div>

        {{-- CARE BACKGROUND (Section 7a) --}}
        <hr class="my-4">
        <h5 class="fw-bold mb-3">Care Background</h5>
        <div class="row g-3">
            <div class="col-12 col-md-6">
                <x-ui.input name="name_before_care"
                            wire:model="name_before_care"
                            label="Name Before Care"
                            placeholder="Enter here..."/>
            </div>
            <div class="col-12 col-md-6">
                <x-ui.input name="mothers_name"
                            wire:model="mothers_name"
                            label="Mother's Name"
                            placeholder="Enter here..."/>
            </div>
            <div class="col-12 col-md-6">
                <x-ui.input name="fathers_name"
                            wire:model="fathers_name"
                            label="Father's Name"
                            placeholder="Enter here..."/>
            </div>
            <div class="col-12 col-md-6">
                <x-ui.input name="gp_surgery"
                            wire:model="gp_surgery"
                            label="GP Surgery"
                            placeholder="Enter here..."/>
            </div>

            {{-- Address Prior to Care --}}
            <div class="col-12">
                <label class="form-label fw-semibold mb-1">Address Prior to Care</label>
            </div>
            <div class="col-12 col-md-6">
                <x-ui.input name="address_prior_line_1"
                            wire:model="address_prior_line_1"
                            placeholder="Address line 1"/>
            </div>
            <div class="col-12 col-md-6">
                <x-ui.input name="address_prior_line_2"
                            wire:model="address_prior_line_2"
                            placeholder="Address line 2"/>
            </div>
            <div class="col-12 col-md-6">
                <x-ui.input name="address_prior_line_3"
                            wire:model="address_prior_line_3"
                            placeholder="Address line 3"/>
            </div>
            <div class="col-12 col-md-6">
                <x-ui.input name="address_prior_postcode"
                            wire:model="address_prior_postcode"
                            placeholder="Postcode"/>
            </div>

            {{-- Hospitals (multiple boxes) --}}
            <div class="col-12">
                <label class="form-label fw-semibold d-flex justify-content-between align-items-center">
                    Hospitals
                    <button type="button" class="btn btn-sm btn-outline-primary" wire:click="addHospital">
                        <i class="mdi mdi-plus"></i> Add hospital
                    </button>
                </label>

                @forelse($hospitals as $i => $hospital)
                    <div class="input-group mb-2" wire:key="hospital-{{ $i }}">
                        <input type="text" class="form-control" placeholder="Hospital name"
                               wire:model.live="hospitals.{{ $i }}">
                        <button type="button" class="btn btn-outline-danger" wire:click="removeHospital({{ $i }})">
                            <i class="mdi mdi-trash-can"></i>
                        </button>
                    </div>
                @empty
                    <p class="text-muted small mb-0">No hospitals added yet. Use "Add hospital" to record one or more.</p>
                @endforelse
            </div>
        </div>
    </div>
    @can('claims.edit')
    <div class="card-footer text-end bg-light">
        <button
                wire:click="save"
                class="btn btn-success"
        >
            Save
        </button>
    </div>
    @endcan
</div>