{{-- Shared household profile section cards — used by both the parent's self-service "Ma famille"
     page and the nounou's employer page. Expects $household, $children, $imported, $formId,
     $formAction, $defaultChildLastName, $childrenShareLastName, $initialChildrenRows,
     $childrenStoreAction, and the $childUpdateUrl/$childDeleteUrl closures (each fn($child): string). --}}
<fieldset class="household-readonly-fieldset" @disabled($household->linkedParentUser && auth()->user()->isNounou())>
<div class="parent-sections-group" x-data="{
    hasCoparent: @js((bool) old('has_coparent', filled($household->coparent_first_name) || ($imported['family_situation'] ?? null) === 'couple')),
    coparentSameAddress: @js((bool) old('coparent_same_address', $household->coparent_street_address === null || $household->coparent_street_address === $household->street_address)),
    primaryRelationship: @js(old('primary_relationship', $household->primary_relationship ?: ($household->primary_civility === 'm' ? 'father' : 'mother'))),
    coparentRelationship: @js(old('coparent_relationship', $household->coparent_relationship ?: ($household->coparent_civility === 'm' ? 'father' : 'mother'))),
}">
    <form id="{{ $formId }}" method="post" action="{{ $formAction }}">
        @csrf
        @if ($household->exists)
            @method('patch')
        @endif

        <section id="sec-parent-employeur" class="profile-section-card employer-step-card--overflow-visible" x-data="{ open: true }">
            <button type="button" class="profile-section-toggle" x-on:click="open = !open" :aria-expanded="open.toString()">
                <div class="profile-section-heading-title">
                    <strong>Parent employeur</strong>
                </div>
                <i class="ph-duotone ph-caret-down profile-section-caret" aria-hidden="true"></i>
            </button>

            <div class="profile-section-body" x-show="open" x-cloak>
                <input type="hidden" name="primary_civility" :value="primaryRelationship === 'mother' ? 'mme' : 'm'">

                <div class="profile-field-grid profile-field-grid--3">
                    <label class="profile-field" for="primary_relationship"><span>Lien avec l'enfant<span class="profile-required">*</span></span><select id="primary_relationship" name="primary_relationship" x-model="primaryRelationship" required><option value="mother">Mère</option><option value="father">Père</option><option value="guardian">Tuteur</option><option value="other">Autre</option></select>@error('primary_relationship')<small>{{ $message }}</small>@enderror</label>
                    <label class="profile-field" for="primary_birth_name"><span>Nom<span class="profile-required">*</span></span><input id="primary_birth_name" name="primary_birth_name" class="profile-uppercase-input" value="{{ old('primary_birth_name', $household->primary_birth_name ?: $household->primary_last_name) }}" placeholder=" " required>@error('primary_birth_name')<small>{{ $message }}</small>@enderror</label>
                    <label class="profile-field" for="primary_first_name"><span>Prénom<span class="profile-required">*</span></span><input id="primary_first_name" name="primary_first_name" value="{{ old('primary_first_name', $household->primary_first_name) }}" placeholder=" " required>@error('primary_first_name')<small>{{ $message }}</small>@enderror</label>
                </div>
                <label class="profile-field" for="primary_relationship_other" x-show="primaryRelationship === 'other'" x-cloak><span>Précision du lien<span class="profile-required">*</span></span><input id="primary_relationship_other" name="primary_relationship_other" value="{{ old('primary_relationship_other', $household->primary_relationship_other) }}" x-bind:required="primaryRelationship === 'other'">@error('primary_relationship_other')<small>{{ $message }}</small>@enderror</label>

                <div class="profile-field-grid">
                    <label class="profile-field" for="primary_phone"><span>Téléphone<span class="profile-required">*</span></span><input id="primary_phone" name="primary_phone" type="tel" value="{{ old('primary_phone', $household->primary_phone) }}" placeholder=" " required>@error('primary_phone')<small>{{ $message }}</small>@enderror</label>
                    <label class="profile-field" for="primary_email"><span>Adresse e-mail<span class="profile-required">*</span></span><input id="primary_email" name="primary_email" type="email" value="{{ old('primary_email', $household->primary_email) }}" placeholder=" " required>@error('primary_email')<small>{{ $message }}</small>@enderror</label>
                </div>

                <div class="profile-field-grid">
                    <div class="profile-field profile-address-field" x-data="addressAutocomplete()">
                        <label for="street_address">
                            <span>Adresse<span class="profile-required">*</span></span>
                            <input id="street_address" name="street_address" value="{{ old('street_address', $household->street_address ?: ($imported['street_address'] ?? '')) }}" x-ref="street" x-on:input.debounce.350ms="search($event.target.value)" x-on:focus="open = suggestions.length > 0" x-on:keydown.escape="open = false" placeholder=" " required>
                        </label>
                        <div class="profile-address-suggestions" x-show="open" x-on:click.outside="open = false" x-cloak>
                            <template x-for="suggestion in suggestions" :key="suggestion.id">
                                <button type="button" x-on:click="select(suggestion)">
                                    <strong x-text="suggestion.label"></strong>
                                    <span x-text="suggestion.context"></span>
                                </button>
                            </template>
                        </div>
                        @error('street_address')<small>{{ $message }}</small>@enderror
                    </div>
                    <label class="profile-field" for="address_line2"><span>Complément d'adresse</span><input id="address_line2" name="address_line2" value="{{ old('address_line2', $household->address_line2) }}" placeholder=" ">@error('address_line2')<small>{{ $message }}</small>@enderror</label>
                </div>

                <div class="profile-field-grid">
                    <label class="profile-field" for="postal_code"><span>Code postal<span class="profile-required">*</span></span><input id="postal_code" name="postal_code" value="{{ old('postal_code', $household->postal_code ?: ($imported['postal_code'] ?? '')) }}" placeholder=" " required>@error('postal_code')<small>{{ $message }}</small>@enderror</label>
                    <label class="profile-field" for="city"><span>Ville<span class="profile-required">*</span></span><input id="city" name="city" value="{{ old('city', $household->city ?: ($imported['city'] ?? '')) }}" placeholder=" " required>@error('city')<small>{{ $message }}</small>@enderror</label>
                </div>
            </div>
        </section>
    </form>

    <section id="sec-coparent" class="profile-section-card employer-step-card--overflow-visible" x-data="{ open: true }">
        <button type="button" class="profile-section-toggle" x-on:click="open = !open" :aria-expanded="open.toString()">
            <div class="profile-section-heading-title">
                <strong>Coparent</strong>
            </div>
            <i class="ph-duotone ph-caret-down profile-section-caret" aria-hidden="true"></i>
        </button>

        <div class="profile-section-body" x-show="open" x-cloak>
            <div class="parent-toggle-row">
                <label class="employer-toggle employer-coparent-toggle">
                    <input type="checkbox" name="has_coparent" value="1" form="{{ $formId }}" x-model="hasCoparent">
                    <span class="employer-toggle-switch" aria-hidden="true"></span>
                    <span x-text="hasCoparent ? 'Retirer le coparent' : 'Ajouter un coparent'">Ajouter un coparent</span>
                </label>

                <label class="employer-toggle employer-coparent-toggle" x-show="hasCoparent" x-cloak>
                    <input type="checkbox" name="coparent_same_address" value="1" form="{{ $formId }}" x-model="coparentSameAddress">
                    <span class="employer-toggle-switch" aria-hidden="true"></span>
                    <span>Même adresse que moi</span>
                </label>
            </div>

            <div class="profile-section-body" x-show="hasCoparent" x-cloak>
                <input type="hidden" name="coparent_civility" form="{{ $formId }}" :value="coparentRelationship === 'mother' ? 'mme' : 'm'">

                <div class="profile-field-grid profile-field-grid--3">
                    <label class="profile-field" for="coparent_relationship"><span>Lien avec l'enfant</span><select id="coparent_relationship" name="coparent_relationship" form="{{ $formId }}" x-model="coparentRelationship"><option value="mother">Mère</option><option value="father">Père</option><option value="guardian">Tuteur</option><option value="other">Autre</option></select>@error('coparent_relationship')<small>{{ $message }}</small>@enderror</label>
                    <label class="profile-field" for="coparent_birth_name"><span>Nom</span><input id="coparent_birth_name" name="coparent_birth_name" form="{{ $formId }}" class="profile-uppercase-input" value="{{ old('coparent_birth_name', $household->coparent_birth_name ?: $household->coparent_last_name ?: ($imported['coparent_birth_name'] ?? '')) }}" placeholder=" ">@error('coparent_birth_name')<small>{{ $message }}</small>@enderror</label>
                    <label class="profile-field" for="coparent_first_name"><span>Prénom</span><input id="coparent_first_name" name="coparent_first_name" form="{{ $formId }}" value="{{ old('coparent_first_name', $household->coparent_first_name ?: ($imported['coparent_first_name'] ?? '')) }}" placeholder=" ">@error('coparent_first_name')<small>{{ $message }}</small>@enderror</label>
                </div>
                <label class="profile-field" for="coparent_relationship_other" x-show="coparentRelationship === 'other'" x-cloak><span>Précision du lien</span><input id="coparent_relationship_other" name="coparent_relationship_other" form="{{ $formId }}" value="{{ old('coparent_relationship_other', $household->coparent_relationship_other) }}">@error('coparent_relationship_other')<small>{{ $message }}</small>@enderror</label>

                <div class="profile-field-grid">
                    <label class="profile-field" for="coparent_phone"><span>Téléphone</span><input id="coparent_phone" name="coparent_phone" form="{{ $formId }}" type="tel" value="{{ old('coparent_phone', $household->coparent_phone) }}" placeholder=" ">@error('coparent_phone')<small>{{ $message }}</small>@enderror</label>
                </div>

                <div class="profile-field-grid" x-show="!coparentSameAddress" x-cloak>
                    <div class="profile-field profile-address-field" x-data="addressAutocomplete({ postalCodeField: 'coparent_postal_code', cityField: 'coparent_city' })">
                        <label for="coparent_street_address">
                            <span>Adresse</span>
                            <input id="coparent_street_address" name="coparent_street_address" form="{{ $formId }}" value="{{ old('coparent_street_address', $household->coparent_street_address ?: ($imported['coparent_street_address'] ?? '')) }}" x-ref="street" x-on:input.debounce.350ms="search($event.target.value)" x-on:focus="open = suggestions.length > 0" x-on:keydown.escape="open = false" placeholder=" ">
                        </label>
                        <div class="profile-address-suggestions" x-show="open" x-on:click.outside="open = false" x-cloak>
                            <template x-for="suggestion in suggestions" :key="suggestion.id">
                                <button type="button" x-on:click="select(suggestion)">
                                    <strong x-text="suggestion.label"></strong>
                                    <span x-text="suggestion.context"></span>
                                </button>
                            </template>
                        </div>
                        @error('coparent_street_address')<small>{{ $message }}</small>@enderror
                    </div>
                    <label class="profile-field" for="coparent_address_line2"><span>Complément d'adresse</span><input id="coparent_address_line2" name="coparent_address_line2" form="{{ $formId }}" value="{{ old('coparent_address_line2', $household->coparent_address_line2) }}" placeholder=" ">@error('coparent_address_line2')<small>{{ $message }}</small>@enderror</label>
                </div>

                <div class="profile-field-grid" x-show="!coparentSameAddress" x-cloak>
                    <label class="profile-field" for="coparent_postal_code"><span>Code postal</span><input id="coparent_postal_code" name="coparent_postal_code" form="{{ $formId }}" value="{{ old('coparent_postal_code', $household->coparent_postal_code ?: ($imported['coparent_postal_code'] ?? '')) }}" placeholder=" ">@error('coparent_postal_code')<small>{{ $message }}</small>@enderror</label>
                    <label class="profile-field" for="coparent_city"><span>Ville</span><input id="coparent_city" name="coparent_city" form="{{ $formId }}" value="{{ old('coparent_city', $household->coparent_city ?: ($imported['coparent_city'] ?? '')) }}" placeholder=" ">@error('coparent_city')<small>{{ $message }}</small>@enderror</label>
                </div>
            </div>
        </div>
    </section>
</div>

@unless ($household->linkedParentUser && auth()->user()->isNounou())
    <section id="sec-pajemploi" class="profile-section-card" x-data="{ open: true }">
        <button type="button" class="profile-section-toggle" x-on:click="open = !open" :aria-expanded="open.toString()">
            <div class="profile-section-heading-title">
                <strong>Calcul Pajemploi</strong>
            </div>
            <i class="ph-duotone ph-caret-down profile-section-caret" aria-hidden="true"></i>
        </button>

        <div class="profile-section-body" x-show="open" x-cloak>
            <div class="profile-field-grid profile-field-grid--3">
                <label class="profile-field" for="primary_pajemploi_number"><span>Numéro Pajemploi</span><input id="primary_pajemploi_number" name="primary_pajemploi_number" form="{{ $formId }}" value="{{ old('primary_pajemploi_number', $household->primary_pajemploi_number) }}" placeholder=" ">@error('primary_pajemploi_number')<small>{{ $message }}</small>@enderror</label>
                <label class="profile-field profile-field-with-suffix" for="annual_household_resources">
                    <span class="profile-label-with-info">
                        <span>Revenu fiscal de référence</span>
                        <x-legal-min-info id="annual_household_resources" text="Utilisé pour calculer les aides (CMG). Il correspond au revenu fiscal de référence du foyer, visible sur l'avis d'imposition." />
                    </span>
                    <div class="profile-unit-group">
                        <input id="annual_household_resources" name="annual_household_resources" form="{{ $formId }}" type="number" step="1" min="0" value="{{ old('annual_household_resources', $household->annual_household_resources ?? ($imported['annual_household_resources'] ?? '')) }}" placeholder=" ">
                        <span class="profile-unit-suffix" aria-hidden="true">€/an</span>
                    </div>
                    @error('annual_household_resources')<small>{{ $message }}</small>@enderror
                </label>
                <label class="profile-field" for="family_situation">
                    <span class="profile-label-with-info">
                        <span>Situation familiale<span class="profile-required">*</span></span>
                        <x-legal-min-info id="family_situation" text="Utilisé pour calculer le plafond du crédit d'impôt garde d'enfant, réduit de moitié pour une personne seule." />
                    </span>
                    <select id="family_situation" name="family_situation" form="{{ $formId }}" required>
                        <option value="" disabled @selected(old('family_situation', $household->family_situation ?: ($imported['family_situation'] ?? null)) === null)>—</option>
                        <option value="single" @selected(old('family_situation', $household->family_situation ?: ($imported['family_situation'] ?? null)) === 'single')>Seul(e)</option>
                        <option value="couple" @selected(old('family_situation', $household->family_situation ?: ($imported['family_situation'] ?? null)) === 'couple')>En couple</option>
                    </select>
                    @error('family_situation')<small>{{ $message }}</small>@enderror
                </label>
            </div>
        </div>
    </section>
@endunless

<section id="sec-enfants" class="profile-section-card employer-step-card--overflow-visible" x-data="{
    open: true,
    showAddChildForm: @js($children->isEmpty()),
    sameLastNameForChildren: @js($childrenShareLastName),
    syncChildLastName(value) {
        if (! this.sameLastNameForChildren) {
            return;
        }
        document.querySelectorAll('#sec-enfants .parent-child-last-name').forEach((input) => {
            if (input.value !== value) {
                input.value = value;
                input.dispatchEvent(new Event('input'));
            }
        });
    },
}">
    <button type="button" class="profile-section-toggle" x-on:click="open = !open" :aria-expanded="open.toString()">
        <div class="profile-section-heading-title">
            <strong>Enfants</strong>
        </div>
        <i class="ph-duotone ph-caret-down profile-section-caret" aria-hidden="true"></i>
    </button>

    <div class="profile-section-body" x-show="open" x-cloak>
        <label class="employer-toggle employer-coparent-toggle">
            <input type="checkbox" x-model="sameLastNameForChildren" x-on:change="syncChildLastName(document.querySelector('#sec-enfants .parent-child-last-name')?.value || '')">
            <span class="employer-toggle-switch" aria-hidden="true"></span>
            <span>Même nom de famille pour les enfants</span>
        </label>

        <div class="employer-child-list">
            @foreach ($children as $child)
                <form method="post" action="{{ ($childUpdateUrl)($child) }}" class="employer-child-edit-row parent-child-inline-form">
                    @csrf
                    @method('patch')
                    @include('employers.partials.child-fields', [
                        'idPrefix' => "child_{$child->id}_",
                        'firstName' => $child->first_name,
                        'lastName' => $child->last_name,
                        'birthDate' => optional($child->birth_date)->format('Y-m-d'),
                        'gender' => $child->gender,
                        'hasAeeh' => $child->has_aeeh,
                        'nameRequired' => false,
                    ])
                    <button type="button" class="employers-ghost-button employer-child-remove" x-on:click="deleteChild('{{ ($childDeleteUrl)($child) }}', $event)" aria-label="Retirer {{ $child->first_name ?: 'cet enfant' }}">
                        <i class="ph-duotone ph-trash" aria-hidden="true"></i>
                    </button>
                </form>
            @endforeach
        </div>

        <button type="button" class="employers-secondary-button employer-add-child-toggle" x-show="! showAddChildForm" x-on:click="showAddChildForm = true">
            <i class="ph-duotone ph-plus-circle" aria-hidden="true"></i>Ajouter un enfant
        </button>

        <form id="add_children_form" method="post" action="{{ $childrenStoreAction ?? '#' }}" class="employer-children-list parent-children-add-list" x-show="showAddChildForm" x-cloak x-data="{
            childrenRows: @js($initialChildrenRows),
            nextChildRow: @js($initialChildrenRows->count()),
            addChild() {
                const previousChild = this.childrenRows[this.childrenRows.length - 1] ?? {};
                this.childrenRows.push({
                    id: this.nextChildRow++,
                    firstName: '',
                    lastName: previousChild.lastName ?? @js($defaultChildLastName),
                    birthDate: '',
                    gender: '',
                    hasAeeh: false,
                });
            },
        }">
            @csrf
            <template x-for="(child, index) in childrenRows" :key="child.id">
                <div class="employer-child-row">
                    @include('employers.partials.child-fields', [
                        'mode' => 'dynamic',
                        'idExpr' => '`new_children_${child.id}`',
                        'nameExpr' => '`children[${index}]`',
                        'xModel' => 'child',
                        'nameRequired' => false,
                    ])
                    <button type="button" class="employers-ghost-button employer-child-remove" x-bind:style="childrenRows.length > 1 ? '' : 'visibility:hidden'" x-on:click="childrenRows = childrenRows.filter((item) => item.id !== child.id)" aria-label="Supprimer cet enfant">
                        <i class="ph-duotone ph-trash" aria-hidden="true"></i>
                    </button>
                </div>
            </template>

            @error('children')<small class="employer-error">{{ $message }}</small>@enderror
            @foreach ($errors->get('children.*.birth_date') as $messages)
                @foreach ($messages as $message)
                    <small class="employer-error">{{ $message }}</small>
                @endforeach
            @endforeach

            <div class="profile-actions">
                <button type="button" class="employers-secondary-button" x-on:click="addChild()"><i class="ph-duotone ph-plus-circle" aria-hidden="true"></i>Ajouter un autre enfant</button>
            </div>
        </form>
    </div>
</section>

<section id="sec-garde" class="profile-section-card" x-data="{ open: true }">
    <button type="button" class="profile-section-toggle" x-on:click="open = !open" :aria-expanded="open.toString()">
        <div class="profile-section-heading-title">
            <strong>Informations de garde</strong>
        </div>
        <i class="ph-duotone ph-caret-down profile-section-caret" aria-hidden="true"></i>
    </button>

    <div class="profile-section-body" x-show="open" x-cloak>
        <div class="profile-field-grid">
            <label class="profile-field profile-field-wide" for="authorized_pickup_people"><span>Personnes autorisées à récupérer les enfants</span><textarea id="authorized_pickup_people" name="authorized_pickup_people" form="{{ $formId }}" rows="3" placeholder=" ">{{ old('authorized_pickup_people', $household->authorized_pickup_people) }}</textarea>@error('authorized_pickup_people')<small>{{ $message }}</small>@enderror</label>
            <label class="profile-field profile-field-wide" for="emergency_contacts"><span>Contacts d'urgence</span><textarea id="emergency_contacts" name="emergency_contacts" form="{{ $formId }}" rows="3" placeholder=" ">{{ old('emergency_contacts', $household->emergency_contacts) }}</textarea>@error('emergency_contacts')<small>{{ $message }}</small>@enderror</label>
            <label class="profile-field profile-field-wide" for="school_transport_details"><span>Modalités de conduite à l'école (si concerné)</span><textarea id="school_transport_details" name="school_transport_details" form="{{ $formId }}" rows="3" placeholder=" ">{{ old('school_transport_details', $household->school_transport_details) }}</textarea>@error('school_transport_details')<small>{{ $message }}</small>@enderror</label>
            <label class="profile-field profile-field-wide" for="delegation_details"><span>Délégation de garde</span><textarea id="delegation_details" name="delegation_details" form="{{ $formId }}" rows="3" placeholder=" ">{{ old('delegation_details', $household->delegation_details) }}</textarea>@error('delegation_details')<small>{{ $message }}</small>@enderror</label>
        </div>
    </div>
</section>
</fieldset>