@php
    $isTemplateMode = $isTemplateMode ?? false;
    $isParentView = $isParentView ?? false;
    $canEditContractFrame = $canEditContractFrame ?? ! $readonly;
    $assistantFieldsRequired = $assistantFieldsRequired ?? true;
    $assistantCard = $assistantCard ?? null;
    $canChangeAssistant = $canChangeAssistant ?? false;
    $knownAssistants = $knownAssistants ?? collect();
    $manualAssistant = $record?->manual_assistant ?? [];
    $knownAssistantConditions = $knownAssistantConditions ?? [];
    $canEditCareLocation = $canEditCareLocation ?? $canEditContractFrame;
    $canEditCompensation = $canEditCompensation ?? ! $readonly;
    $canEditImageRights = $canEditImageRights ?? ! $readonly;
    $canCommitImageRights = $canCommitImageRights ?? false;
    // Une assistante maternelle qui relit un contrat à signer peut y recopier les valeurs par défaut de son profil.
    $profileSync = $canCommitImageRights ? ($profileSync ?? null) : null;
    $canEditRest = $canEditRest ?? ! $readonly;
    $canEditSchedule = $canEditSchedule ?? ! $readonly;
    $canEditScheduleNotice = $canEditScheduleNotice ?? ! $readonly;
    $canEditWeeks = $canEditWeeks ?? ! $readonly;
    $hideContractFrameForLinkedParentFlow = $hideContractFrameForLinkedParentFlow ?? true;
    // A parent picking an assistant sees her conditions (and their lock) change live, before saving.
    $lockableByAssistant = $isParentView && $canChangeAssistant;
    $lockAttr = fn (bool $canEdit): string => $lockableByAssistant
        ? 'x-bind:disabled="'.($readonly ? 'true' : 'assistantLocked').'"'
        : ($canEdit ? '' : 'disabled');
    $requiredAttr = $lockableByAssistant ? 'x-bind:required="assistantLocked"' : ($assistantFieldsRequired ? 'required' : '');
    $scheduleSectionTitle = $isTemplateMode ? 'Amplitude horaire acceptée' : 'Planning de garde';
@endphp

<div class="contract-layout">
    <div class="contract-main">

@if ($isTemplateMode)
    <section class="employer-step-card contract-child-card">
        <div class="employer-section-header">
            <span>
                <strong>Titre du modèle</strong>
            </span>
        </div>
        <div class="employer-accordion-body">
            <label class="profile-field profile-field-wide" for="template_title">
                <span>Nom du modèle<span class="profile-required">*</span></span>
                <input id="template_title" name="template_title" value="{{ old('template_title', $record?->title) }}" placeholder=" " required @disabled($readonly)>
            </label>
        </div>
    </section>
@else
    <section class="employer-step-card contract-child-card" x-data="contractChildAutocomplete({ children: @js($childOptions), selectedId: @js(old('child_record_id', $selectedChild?->id)) })">
        <div class="employer-section-header">
            <span>
                <strong>Enfant et parent employeur</strong>
            </span>
        </div>
        <div class="employer-accordion-body">
            <div class="contract-child-autocomplete" x-show="editing" x-cloak>
                <input type="hidden" id="child_record_id" name="child_record_id" x-bind:value="selected?.id || ''">
                <label class="profile-field profile-field-wide" for="child_record_search">
                    <span>Sélectionner un enfant<span class="profile-required">*</span></span>
                    <input
                        id="child_record_search"
                        type="search"
                        x-ref="searchInput"
                        x-model="query"
                        x-on:focus="openList()"
                        x-on:input="openList()"
                        x-on:keydown.escape="open = false"
                        x-on:keydown.down.prevent="moveHighlight(1)"
                        x-on:keydown.up.prevent="moveHighlight(-1)"
                        x-on:keydown.enter.prevent="selectHighlighted()"
                        placeholder=" "
                        autocomplete="off"
                        required
                    >
                </label>
                <template x-teleport="body">
                    <div class="profile-address-suggestions contract-child-suggestions" x-show="open && filteredChildren().length > 0" x-on:click.outside="if (!$refs.searchInput.contains($event.target)) open = false" x-on:wheel.prevent.stop="scrollSuggestions($event)" x-on:touchstart.stop="rememberSuggestionTouch($event)" x-on:touchmove.prevent.stop="scrollSuggestionsTouch($event)" x-bind:style="dropdownStyle" x-cloak>
                        @if ($isParentView)
                            <template x-for="child in filteredChildren()" :key="child.id">
                                <button type="button" x-on:click="select(child)" x-on:mouseenter="highlightedIndex = childOptionIndex(child)" :class="{ 'is-highlighted': highlightedIndex === childOptionIndex(child) }">
                                    <strong x-text="child.childFirstName"></strong>
                                </button>
                            </template>
                        @else
                            <template x-for="group in groupedChildren()" :key="group.key">
                                <div class="contract-child-suggestion-group">
                                    <span class="contract-child-suggestion-heading" x-text="`Famille ${group.familyLabel} (${group.parentName})`"></span>
                                    <template x-for="child in group.children" :key="child.id">
                                        <button type="button" x-on:click="select(child)" x-on:mouseenter="highlightedIndex = childOptionIndex(child)" :class="{ 'is-highlighted': highlightedIndex === childOptionIndex(child) }">
                                            <strong x-text="child.childFirstName"></strong>
                                        </button>
                                    </template>
                                </div>
                            </template>
                        @endif
                    </div>
                </template>
            </div>

            <article class="contract-selected-child" x-show="selected && !editing" x-cloak>
                <div class="contract-selected-child-card contract-child-info-card" x-bind:class="{ 'contract-selected-child-card--with-avatar': selected?.childAvatarUrl }">
                    <span class="contract-selected-child-title">
                        <span>Enfant</span>
                        @unless ($readonly || $lockChild)
                            <button type="button" class="contract-link-button contract-selected-child-action" x-on:click="startEditing()" x-show="selected && !editing" x-cloak>
                                <i class="ph-duotone ph-arrows-clockwise" aria-hidden="true"></i>Changer
                            </button>
                        @endunless
                    </span>
                    <span class="child-avatar contract-selected-child-avatar" x-show="selected?.childAvatarUrl" x-bind:class="'child-avatar--' + selected?.childGender" x-cloak aria-hidden="true">
                        <img x-bind:src="selected?.childAvatarUrl" alt="">
                    </span>
                    <strong x-text="selected?.childName"></strong>
                    <small x-text="selected?.birthDate ? `Né(e) le ${selected.birthDate}` : 'Date de naissance non renseignée'"></small>
                </div>
                <div class="contract-selected-child-card contract-child-info-card">
                    <span class="contract-selected-child-title">Santé et allergies</span>
                    <template x-for="item in (selected?.childHealth || [])" x-bind:key="item.label || item.value">
                        <small x-text="item.label ? (item.label + ' : ' + item.value) : item.value"></small>
                    </template>
                </div>
                @if ($isParentView)
                    <div class="contract-selected-child-card contract-child-info-card">
                        <span class="contract-selected-child-title">
                            <span>Parent employeur</span>
                        </span>
                        <strong x-text="selected?.parentName"></strong>
                        <small x-text="selected?.parentPhone || 'Téléphone non renseigné'"></small>
                        <small x-text="selected?.address"></small>
                    </div>
                @else
                    <a x-bind:href="selected?.parentUrl" target="_blank" rel="noopener" class="contract-selected-child-card contract-child-info-card contract-selected-child-card--link">
                        <span class="contract-selected-child-title">
                            <span>Parent employeur</span>
                            <i class="ph-duotone ph-arrow-square-out" aria-hidden="true"></i>
                        </span>
                        <strong x-text="selected?.parentName"></strong>
                        <small x-text="selected?.parentPhone || 'Téléphone non renseigné'"></small>
                        <small x-text="selected?.address"></small>
                    </a>
                @endif
            </article>
            @if ($selectedChild)
                <p class="sr-only">{{ $selectedChild->display_name }} · {{ $selectedChild->employer->display_name }}</p>
            @endif
            @error('child_record_id')<small>{{ $message }}</small>@enderror
        </div>
    </section>

    @if ($assistantCard !== null || $canChangeAssistant || $isParentView)
        <section class="employer-step-card contract-child-card contract-assistant-card"
            @if ($canChangeAssistant)
                x-data="contractAssistantPicker({
                    lookupUrl: @js(route('parent.contracts.assistant-lookup')),
                    hasAssistant: @js($assistantCard !== null),
                    knownAssistants: @js($knownAssistants->map(fn ($assistant) => ['id' => $assistant->id, 'name' => $assistant->name, 'email' => $assistant->email, 'conditions' => $knownAssistantConditions[$assistant->id] ?? null])->values()->all()),
                    mode: @js(old('assistant_mode') && old('assistant_mode') !== 'keep' ? old('assistant_mode') : 'code'),
                    open: @js(old('assistant_mode') !== null && old('assistant_mode') !== 'keep'),
                    lookupValue: @js(old('assistant_mode') === 'phone' ? old('assistant_phone', '') : old('assistant_code', '')),
                    knownAssistantId: @js(old('assistant_id', '')),
                })"
            @endif
        >
            <div class="employer-section-header">
                <span>
                    <strong>Assistante maternelle</strong>
                </span>
            </div>
            <div class="employer-accordion-body">
                <article class="contract-selected-child"@if ($canChangeAssistant) x-show="!open" x-cloak @endif>
                    @if ($assistantCard !== null)
                        <div class="contract-selected-child-card contract-selected-assistant-card">
                            <span class="contract-selected-assistant-avatar">
                                @if ($assistantCard['avatarUrl'])
                                    <img src="{{ $assistantCard['avatarUrl'] }}" alt="Photo de {{ $assistantCard['name'] }}">
                                @else
                                    <span>{{ $assistantCard['initials'] }}</span>
                                @endif
                            </span>
                            <span class="contract-selected-assistant-copy">
                                <span class="contract-selected-child-title">
                                    <span>Salariée</span>
                                    @if ($canChangeAssistant)
                                        <button type="button" class="contract-link-button contract-selected-child-action" x-on:click="toggle()">
                                            <i class="ph-duotone ph-arrows-clockwise" aria-hidden="true"></i>Changer
                                        </button>
                                    @endif
                                </span>
                                <strong>{{ $assistantCard['name'] }}</strong>
                                <small>{{ $assistantCard['phone'] ?: 'Téléphone non renseigné' }}</small>
                                <small>{{ $assistantCard['address'] ?: 'Adresse non renseignée' }}</small>
                            </span>
                        </div>
                        <div class="contract-selected-child-card">
                            <span class="contract-selected-child-title"><span>Agrément</span></span>
                            <strong>{{ $assistantCard['approvalReference'] ? 'Réf. '.$assistantCard['approvalReference'] : 'Non renseigné' }}</strong>
                            @if ($assistantCard['activityStartedOn'])
                                <small>Activité depuis le {{ $assistantCard['activityStartedOn'] }}</small>
                            @endif
                            @if ($assistantCard['approvalExpiresOn'])
                                <small>Valable jusqu'au {{ $assistantCard['approvalExpiresOn'] }}</small>
                            @endif
                        </div>
                        <div class="contract-selected-child-card">
                            <span class="contract-selected-child-title"><span>Assurances</span></span>
                            <small>Responsabilité civile : {{ $assistantCard['liabilityInsurer'] ?: 'non renseignée' }}{{ $assistantCard['liabilityPolicy'] ? ' · n° '.$assistantCard['liabilityPolicy'] : '' }}</small>
                            <small>Automobile : {{ $assistantCard['carInsurer'] ?: 'non renseignée' }}{{ $assistantCard['carPolicy'] ? ' · n° '.$assistantCard['carPolicy'] : '' }}</small>
                        </div>
                    @else
                        <div class="contract-selected-child-card">
                            <span class="contract-selected-child-title">
                                <span>Salariée</span>
                                @if ($canChangeAssistant)
                                    <button type="button" class="contract-link-button contract-selected-child-action" x-on:click="toggle()">
                                        <i class="ph-duotone ph-arrows-clockwise" aria-hidden="true"></i>Changer
                                    </button>
                                @endif
                            </span>
                            <strong>Aucune assistante maternelle</strong>
                            <small>Je renseigne moi-même les conditions de son accueil dans ce contrat, elles sont facultatives.</small>
                        </div>
                    @endif
                </article>

                @if ($isParentView && ($assistantCard === null || $canChangeAssistant))
                    <div class="contract-assistant-manual"@if ($canChangeAssistant) x-show="showManual" x-cloak @endif>
                        <p class="contract-assistant-manual-heading">Informations de mon assistante maternelle</p>
                        <p class="contract-sim-helper">Je les renseigne moi-même pour compléter mon contrat : elles sont toutes facultatives, et je peux les modifier tant que mon contrat est en brouillon.</p>
                        <div class="contract-field-grid-4">
                        <label class="profile-field" for="manual_assistant_last_name">
                            <span>Nom</span>
                            <input id="manual_assistant_last_name" name="manual_assistant[last_name]" type="text" value="{{ old('manual_assistant.last_name', $manualAssistant['last_name'] ?? '') }}" placeholder=" " @disabled(! $canChangeAssistant)>
                            @error('manual_assistant.last_name')<small>{{ $message }}</small>@enderror
                        </label>
                        <label class="profile-field" for="manual_assistant_first_name">
                            <span>Prénom</span>
                            <input id="manual_assistant_first_name" name="manual_assistant[first_name]" type="text" value="{{ old('manual_assistant.first_name', $manualAssistant['first_name'] ?? '') }}" placeholder=" " @disabled(! $canChangeAssistant)>
                            @error('manual_assistant.first_name')<small>{{ $message }}</small>@enderror
                        </label>
                        <label class="profile-field" for="manual_assistant_phone">
                            <span>Téléphone</span>
                            <input id="manual_assistant_phone" name="manual_assistant[phone]" type="tel" value="{{ old('manual_assistant.phone', $manualAssistant['phone'] ?? '') }}" placeholder=" " @disabled(! $canChangeAssistant)>
                            @error('manual_assistant.phone')<small>{{ $message }}</small>@enderror
                        </label>
                        <label class="profile-field" for="manual_assistant_email">
                            <span>E-mail</span>
                            <input id="manual_assistant_email" name="manual_assistant[email]" type="email" value="{{ old('manual_assistant.email', $manualAssistant['email'] ?? '') }}" placeholder=" " @disabled(! $canChangeAssistant)>
                            @error('manual_assistant.email')<small>{{ $message }}</small>@enderror
                        </label>
                        <label class="profile-field profile-field-wide" for="manual_assistant_street_address">
                            <span>Adresse</span>
                            <input id="manual_assistant_street_address" name="manual_assistant[street_address]" type="text" value="{{ old('manual_assistant.street_address', $manualAssistant['street_address'] ?? '') }}" placeholder=" " @disabled(! $canChangeAssistant)>
                            @error('manual_assistant.street_address')<small>{{ $message }}</small>@enderror
                        </label>
                        <label class="profile-field" for="manual_assistant_postal_code">
                            <span>Code postal</span>
                            <input id="manual_assistant_postal_code" name="manual_assistant[postal_code]" type="text" value="{{ old('manual_assistant.postal_code', $manualAssistant['postal_code'] ?? '') }}" placeholder=" " @disabled(! $canChangeAssistant)>
                            @error('manual_assistant.postal_code')<small>{{ $message }}</small>@enderror
                        </label>
                        <label class="profile-field" for="manual_assistant_city">
                            <span>Ville</span>
                            <input id="manual_assistant_city" name="manual_assistant[city]" type="text" value="{{ old('manual_assistant.city', $manualAssistant['city'] ?? '') }}" placeholder=" " @disabled(! $canChangeAssistant)>
                            @error('manual_assistant.city')<small>{{ $message }}</small>@enderror
                        </label>
                        <label class="profile-field" for="manual_assistant_social_security_number">
                            <span>Numéro de sécurité sociale</span>
                            <input id="manual_assistant_social_security_number" name="manual_assistant[social_security_number]" type="text" value="{{ old('manual_assistant.social_security_number', $manualAssistant['social_security_number'] ?? '') }}" placeholder=" " inputmode="numeric" maxlength="13" @disabled(! $canChangeAssistant)>
                            @error('manual_assistant.social_security_number')<small>{{ $message }}</small>@enderror
                        </label>
                        <label class="profile-field" for="manual_assistant_approval_reference">
                            <span>Numéro d'agrément</span>
                            <input id="manual_assistant_approval_reference" name="manual_assistant[approval_reference]" type="text" value="{{ old('manual_assistant.approval_reference', $manualAssistant['approval_reference'] ?? '') }}" placeholder=" " @disabled(! $canChangeAssistant)>
                            @error('manual_assistant.approval_reference')<small>{{ $message }}</small>@enderror
                        </label>
                        <label class="profile-field" for="manual_assistant_activity_started_on">
                            <span>Date d'obtention de l'agrément</span>
                            <input id="manual_assistant_activity_started_on" name="manual_assistant[activity_started_on]" type="date" value="{{ old('manual_assistant.activity_started_on', $manualAssistant['activity_started_on'] ?? '') }}" placeholder=" " @disabled(! $canChangeAssistant)>
                            @error('manual_assistant.activity_started_on')<small>{{ $message }}</small>@enderror
                        </label>
                        </div>
                        <p class="contract-assistant-manual-heading">Assurances</p>
                        <div class="contract-field-grid-4">
                        <label class="profile-field" for="manual_assistant_professional_liability_name">
                            <span>Assurance responsabilité civile</span>
                            <input id="manual_assistant_professional_liability_name" name="manual_assistant[professional_liability_name]" type="text" value="{{ old('manual_assistant.professional_liability_name', $manualAssistant['professional_liability_name'] ?? '') }}" placeholder=" " @disabled(! $canChangeAssistant)>
                            @error('manual_assistant.professional_liability_name')<small>{{ $message }}</small>@enderror
                        </label>
                        <label class="profile-field" for="manual_assistant_professional_liability_address">
                            <span>Adresse de l’assurance</span>
                            <input id="manual_assistant_professional_liability_address" name="manual_assistant[professional_liability_address]" type="text" value="{{ old('manual_assistant.professional_liability_address', $manualAssistant['professional_liability_address'] ?? '') }}" placeholder=" " @disabled(! $canChangeAssistant)>
                            @error('manual_assistant.professional_liability_address')<small>{{ $message }}</small>@enderror
                        </label>
                        <label class="profile-field" for="manual_assistant_professional_liability_policy_number">
                            <span>N° de contrat</span>
                            <input id="manual_assistant_professional_liability_policy_number" name="manual_assistant[professional_liability_policy_number]" type="text" value="{{ old('manual_assistant.professional_liability_policy_number', $manualAssistant['professional_liability_policy_number'] ?? '') }}" placeholder=" " @disabled(! $canChangeAssistant)>
                            @error('manual_assistant.professional_liability_policy_number')<small>{{ $message }}</small>@enderror
                        </label>
                        <label class="profile-field" for="manual_assistant_car_insurance_name">
                            <span>Assurance auto</span>
                            <input id="manual_assistant_car_insurance_name" name="manual_assistant[car_insurance_name]" type="text" value="{{ old('manual_assistant.car_insurance_name', $manualAssistant['car_insurance_name'] ?? '') }}" placeholder=" " @disabled(! $canChangeAssistant)>
                            @error('manual_assistant.car_insurance_name')<small>{{ $message }}</small>@enderror
                        </label>
                        <label class="profile-field" for="manual_assistant_car_insurance_address">
                            <span>Adresse de l’assurance</span>
                            <input id="manual_assistant_car_insurance_address" name="manual_assistant[car_insurance_address]" type="text" value="{{ old('manual_assistant.car_insurance_address', $manualAssistant['car_insurance_address'] ?? '') }}" placeholder=" " @disabled(! $canChangeAssistant)>
                            @error('manual_assistant.car_insurance_address')<small>{{ $message }}</small>@enderror
                        </label>
                        <label class="profile-field" for="manual_assistant_car_insurance_policy_number">
                            <span>N° de contrat</span>
                            <input id="manual_assistant_car_insurance_policy_number" name="manual_assistant[car_insurance_policy_number]" type="text" value="{{ old('manual_assistant.car_insurance_policy_number', $manualAssistant['car_insurance_policy_number'] ?? '') }}" placeholder=" " @disabled(! $canChangeAssistant)>
                            @error('manual_assistant.car_insurance_policy_number')<small>{{ $message }}</small>@enderror
                        </label>
                        </div>
                    </div>
                @endif

                @if ($canChangeAssistant)
                    <input type="hidden" name="assistant_mode" x-bind:value="submittedMode">

                    <div class="contract-field-grid-4 contract-parent-create-grid" x-show="open && !resolvedAssistant" x-cloak>
                        <label class="profile-field" for="assistant_mode_select">
                            <span>Nouvelle assistante maternelle</span>
                            <select id="assistant_mode_select" x-model="mode" x-on:change="changeMode()">
                                <option value="code">Avec son code assmat</option>
                                <option value="phone">Avec son numéro de téléphone</option>
                                @if ($knownAssistants->isNotEmpty())
                                    <option value="known">Une assmat avec qui j’ai déjà travaillé</option>
                                @endif
                                <option value="none">Sans assistante maternelle</option>
                            </select>
                        </label>

                        <template x-if="mode === 'code' || mode === 'phone'">
                            <label class="profile-field profile-field-unit-group contract-assistant-lookup-field" for="assistant_lookup_value">
                                <span x-text="mode === 'code' ? 'Code assmat' : 'Numéro de téléphone'"></span>
                                <div class="profile-unit-group">
                                    <input
                                        id="assistant_lookup_value"
                                        type="text"
                                        x-model="lookupValue"
                                        x-bind:maxlength="mode === 'code' ? 8 : 10"
                                        x-bind:class="mode === 'code' ? 'profile-uppercase-input' : ''"
                                        x-bind:inputmode="mode === 'code' ? 'text' : 'tel'"
                                        placeholder=" "
                                        x-on:keydown.enter.prevent="lookup()"
                                    >
                                    <button type="button" class="profile-unit-button" x-on:click="lookup()" x-bind:disabled="lookupLoading || lookupValue.trim() === ''" aria-label="Rechercher mon assistante maternelle">
                                        <i class="ph-duotone" x-bind:class="lookupLoading ? 'ph-circle-notch contract-assistant-lookup-spinner' : 'ph-magnifying-glass'" aria-hidden="true"></i>
                                    </button>
                                </div>
                            </label>
                        </template>
                        <input type="hidden" x-bind:name="mode === 'code' ? 'assistant_code' : 'assistant_phone'" x-bind:value="lookupValue" x-bind:disabled="mode !== 'code' && mode !== 'phone'">
                        @if ($knownAssistants->isNotEmpty())
                            <template x-if="mode === 'known'">
                                <label class="profile-field contract-assistant-lookup-field" for="assistant_known_id">
                                    <span>Assistante maternelle</span>
                                    <select id="assistant_known_id" name="assistant_id" x-model="knownAssistantId">
                                        <option value="" disabled>Sélectionner une assistante maternelle</option>
                                        @foreach ($knownAssistants as $knownAssistant)
                                            <option value="{{ $knownAssistant->id }}">{{ $knownAssistant->name }}</option>
                                        @endforeach
                                    </select>
                                </label>
                            </template>
                        @endif
                        <template x-if="mode === 'none'">
                            <small class="contract-sim-helper contract-assistant-lookup-field">Je renseignerai moi-même ses conditions dans ce contrat.</small>
                        </template>
                        <p class="parent-save-errors contract-assistant-lookup-error" x-show="lookupError" x-cloak x-text="lookupError"></p>
                    </div>

                    <article class="contract-selected-child" x-show="open && resolvedAssistant" x-cloak>
                        <div class="contract-selected-child-card">
                            <span class="contract-selected-child-title">
                                <span>Salariée</span>
                                <button type="button" class="contract-link-button contract-selected-child-action" x-on:click="changeMode()">
                                    <i class="ph-duotone ph-arrows-clockwise" aria-hidden="true"></i>Changer
                                </button>
                            </span>
                            <strong x-text="resolvedAssistant?.name"></strong>
                            <small x-text="resolvedAssistant?.email || 'Adresse e-mail non renseignée'"></small>
                        </div>
                    </article>

                    <div class="contract-assistant-picker-actions" x-show="open" x-cloak>
                        <button type="button" class="employers-secondary-button" x-on:click="toggle()">
                            <i class="ph-duotone ph-x" aria-hidden="true"></i>Annuler
                        </button>
                        @if ($record?->status === 'to_sign')
                            <button type="submit" class="dashboard-primary-button" x-bind:disabled="!canSave">
                                <i class="ph-duotone ph-floppy-disk" aria-hidden="true"></i>Enregistrer
                            </button>
                        @endif
                    </div>
                @endif

                @error('assistant_mode')<small>{{ $message }}</small>@enderror
                @error('assistant_code')<small>{{ $message }}</small>@enderror
                @error('assistant_phone')<small>{{ $message }}</small>@enderror
                @error('assistant_id')<small>{{ $message }}</small>@enderror
            </div>
        </section>
    @endif
@endif

<section class="employer-step-card contract-left-card">
    @if ($isParentView)
        <p class="profile-notice-callout" x-show="contractType === 'cdd'" x-cloak><span>Je privilégie le CDI pour l’accueil habituel de mon enfant, même si son entrée à l’école est déjà prévue. Je ne recours au CDD que pour un motif autorisé, par exemple le remplacement d’une assistante maternelle absente. Je prévois en principe une indemnité de précarité à la fin du CDD, égale à 10 % de la rémunération brute totale, sauf exception légale. <a href="https://www.service-public.gouv.fr/particuliers/vosdroits/F16841" target="_blank" rel="noopener noreferrer">Je consulte les règles du contrat</a>.</span></p>
    @endif
    <div class="employer-section-header">
        <span class="contract-header-inline">
            <strong>Cadre du contrat</strong>
        </span>
    </div>
    <div class="employer-accordion-body">
        <div class="contract-frame-fields-group">
        <div class="contract-field-grid-4">
            <label class="profile-field" for="contract_type">
                <span>Type de contrat<span class="profile-required">*</span></span>
                <select id="contract_type" name="contract_type" x-model="contractType" required @disabled(! $canEditContractFrame)>
                    <option value="cdi">CDI</option>
                    <option value="cdd">CDD</option>
                </select>
            </label>
            <label class="profile-field" for="care_type">
                <span>Type d’accueil<span class="profile-required">*</span></span>
                <select id="care_type" name="care_type" x-model="careType" required @disabled(! $canEditContractFrame)>
                    <template x-for="option in careTypeOptions()" :key="option.value">
                        <option x-bind:value="option.value" x-text="option.label"></option>
                    </template>
                </select>
            </label>
            <label class="profile-field" for="paid_leave_payment_method" x-show="requiresPaidLeavePaymentMethod()" x-cloak>
                <span>Versement des congés payés<span class="profile-required">*</span></span>
                <select id="paid_leave_payment_method" name="paid_leave_payment_method" x-bind:required="requiresPaidLeavePaymentMethod()" @disabled(! $canEditContractFrame)>
                    <option value="" disabled @selected(old('paid_leave_payment_method', $record?->paid_leave_payment_method) === null)>—</option>
                    <option value="june" @selected(old('paid_leave_payment_method', $record?->paid_leave_payment_method) === 'june')>En une seule fois au mois de juin</option>
                    <option value="main_leave" @selected(old('paid_leave_payment_method', $record?->paid_leave_payment_method) === 'main_leave')>En une seule fois lors de la prise principale des congés payés</option>
                    <option value="pro_rata" @selected(old('paid_leave_payment_method', $record?->paid_leave_payment_method) === 'pro_rata')>Au fur et à mesure de la prise des congés payés, au prorata du nombre de jours ouvrables de congés pris</option>
                </select>
            </label>
            <label class="profile-field profile-field-with-suffix" for="estimated_annual_days" x-show="careType === 'occasional'" x-cloak>
                <span>Jours de garde estimés par an<span class="profile-required">*</span></span>
                <div class="profile-unit-group">
                    <input id="estimated_annual_days" name="estimated_annual_days" type="number" value="{{ old('estimated_annual_days', $record?->estimated_annual_days) }}" x-model.number="estimatedAnnualDays" x-bind:min="careType === 'occasional' ? 1 : null" x-bind:max="careType === 'occasional' ? 366 : null" x-bind:required="careType === 'occasional'" @disabled(! $canEditContractFrame)>
                    <span class="profile-unit-suffix" aria-hidden="true">j/an</span>
                </div>
                @error('estimated_annual_days')<small>{{ $message }}</small>@enderror
            </label>
            <label class="profile-field" for="care_location">
                <span>Lieu d’accueil<span class="profile-required">*</span></span>
                <select id="care_location" name="care_location" x-model="careLocation" {!! $requiredAttr !!} {!! $lockAttr($canEditCareLocation) !!}>
                    <option value="home">{{ $isParentView ? "Domicile de l’assistant(e) maternel(le)" : "Mon domicile" }}</option>
                    <option value="mam">Maison d’assistants maternels (MAM)</option>
                </select>
            </label>
            <input type="hidden" name="planned_weeks_per_year" x-bind:value="activeWeeks()">
        </div>
        <div class="contract-field-grid-4">
            <label class="profile-field profile-field-unit-group" for="trial_period_duration">
                <span>Période d’essai<span class="profile-required">*</span></span>
                <div class="profile-unit-group">
                    <input id="trial_period_duration" name="trial_period_duration" type="number" min="0" max="31" value="{{ old('trial_period_duration', $record?->trial_period_duration ?? 1) }}" required @disabled(! $canEditContractFrame)>
                    <select id="trial_period_unit" name="trial_period_unit" x-model="trialPeriodUnit" required aria-label="Unité de la période d’essai" @disabled(! $canEditContractFrame)>
                        <option value="day">jours</option>
                        <option value="week">semaines</option>
                        <option value="month">mois</option>
                    </select>
                </div>
            </label>
            @unless ($isTemplateMode)
                <template x-if="{{ $hideContractFrameForLinkedParentFlow ? '!usesLinkedParentFlow()' : 'true' }}">
                    <div class="display-contents">
                        <label class="profile-field" for="started_on"><span>Début du contrat<span class="profile-required">*</span></span><input id="started_on" name="started_on" type="date" x-model="startedOn" required @disabled(! $canEditContractFrame)></label>

                        <label class="profile-field" for="ends_on" x-show="contractType === 'cdd' && !cddOpenEnded" x-cloak>
                            <span>Date de fin prévue<span class="profile-required">*</span></span>
                            <input id="ends_on" name="ends_on" type="date" value="{{ old('ends_on', $record?->ends_on?->format('Y-m-d')) }}" x-bind:required="contractType === 'cdd' && !cddOpenEnded" @disabled(! $canEditContractFrame)>
                        </label>
                        <label class="profile-field profile-field-unit-group" for="minimum_duration_value" x-show="contractType === 'cdd' && cddOpenEnded" x-cloak>
                            <span>Durée minimale du contrat<span class="profile-required">*</span></span>
                            <div class="profile-unit-group">
                                <input id="minimum_duration_value" type="number" min="1" max="60" x-model.number="minimumDurationValue" x-bind:required="cddOpenEnded" @disabled(! $canEditContractFrame)>
                                <select id="minimum_duration_unit" x-model="minimumDurationUnit" aria-label="Unité de la durée minimale" x-bind:required="cddOpenEnded" @disabled(! $canEditContractFrame)>
                                    <option value="day">jours</option>
                                    <option value="week">semaines</option>
                                    <option value="month">mois</option>
                                </select>
                            </div>
                            <input type="hidden" name="minimum_duration" x-bind:value="minimumDurationLabel()">
                        </label>
                        <label class="contract-day-toggle" for="cdd_open_ended" x-show="contractType === 'cdd' && cddReason === 'replacement'" x-cloak>
                            <input type="checkbox" id="cdd_open_ended" name="cdd_open_ended" value="1" x-model="cddOpenEnded" @disabled(! $canEditContractFrame)>
                            <span>Date de fin non connue</span>
                        </label>
                        <label class="profile-field" for="adaptation_period_started_on">
                            <span>Début adaptation</span>
                            <input id="adaptation_period_started_on" name="adaptation_period_started_on" type="date" value="{{ old('adaptation_period_started_on', $record?->adaptation_period_started_on?->format('Y-m-d')) }}" @disabled(! $canEditContractFrame)>
                        </label>
                        <label class="profile-field" for="adaptation_period_ended_on">
                            <span>Fin adaptation</span>
                            <input id="adaptation_period_ended_on" name="adaptation_period_ended_on" type="date" value="{{ old('adaptation_period_ended_on', $record?->adaptation_period_ended_on?->format('Y-m-d')) }}" @disabled(! $canEditContractFrame)>
                            @error('adaptation_period_ended_on')<small>{{ $message }}</small>@enderror
                        </label>
                    </div>
                </template>
            @endunless

            <label class="profile-field" for="cdd_reason" x-show="contractType === 'cdd'">
                <span>Motif du CDD<span class="profile-required">*</span></span>
                <select id="cdd_reason" name="cdd_reason" x-model="cddReason" @disabled(! $canEditContractFrame)>
                    <option value="replacement">Remplacement</option>
                    <option value="temporary_increase">Accroissement temporaire d’activité</option>
                    <option value="other">Autre motif</option>
                </select>
            </label>
            <label class="profile-field" for="cdd_reason_details" x-show="contractType === 'cdd'" x-cloak>
                <span>Détail du motif<span class="profile-required">*</span></span>
                <input id="cdd_reason_details" name="cdd_reason_details" value="{{ old('cdd_reason_details', $record?->cdd_reason_details) }}" placeholder=" " x-bind:required="contractType === 'cdd'" @disabled(! $canEditContractFrame)>
            </label>
        </div>
        </div>
        <div class="contract-field-grid-4">
            <label class="profile-field" for="meal_provider">
                <span>Déjeuner fourni par<span class="profile-required">*</span></span>
                <select id="meal_provider" name="meal_provider" x-model="mealProvider" required @disabled(! $canEditContractFrame)>
                    <option value="assistant">Assistant(e) maternel(le)</option>
                    <option value="parents">Les parents</option>
                </select>
            </label>
            <label class="profile-field" for="snack_provider">
                <span>Goûter fourni par<span class="profile-required">*</span></span>
                <select id="snack_provider" name="snack_provider" x-model="snackProvider" required @disabled(! $canEditContractFrame)>
                    <option value="assistant">Assistant(e) maternel(le)</option>
                    <option value="parents">Les parents</option>
                </select>
            </label>
        </div>
    </div>
</section>

<section class="employer-step-card employer-step-card--overflow-visible contract-left-card">
    <div class="employer-section-header">
        <span>
            <strong>Rémunération et indemnisation</strong>
        </span>
        @if ($profileSync)
            <button type="button" class="employers-secondary-button btn--sm" x-on:click="syncFromProfile(@js($profileSync['remuneration']))"><i class="ph-duotone ph-arrows-clockwise" aria-hidden="true"></i>Synchroniser mes honoraires</button>
        @endif
    </div>
    <div class="employer-accordion-body">
        @if ($isParentView)
            <p class="profile-notice-callout"><span>Je retrouve ici les tarifs par défaut de mon assistante maternelle. Si nous avons convenu d’autres tarifs, je lui demande de les modifier pour que mon contrat reflète notre accord.</span></p>
        @endif
        <div class="contract-field-grid-4">
            <label class="profile-field profile-field-unit-group" for="hourly_rate_net">
                <span class="profile-label-with-info">
                    <span>Taux horaire net<span class="profile-required">*</span></span>
                    <x-legal-min-info id="hourly_rate_net" text="Minimum légal : {{ number_format((float) $legalMinimums['hourly_rate_net'], 2, ',', ' ') }} €/h" />
                </span>
                <div class="profile-unit-group">
                    <input id="hourly_rate_net" name="hourly_rate_net" type="number" step="0.01" min="{{ $legalMinimums['hourly_rate_net'] }}" x-model="hourlyRate" x-on:blur="formatMoney('hourlyRate')" {!! $requiredAttr !!} {!! $lockAttr($canEditCompensation) !!}>
                    <span class="profile-unit-suffix" aria-hidden="true">€/h</span>
                </div>
            </label>
            <label class="profile-field profile-field-unit-group disabled-field" for="hourly_rate_gross">
                <span>Taux horaire brut</span>
                <div class="profile-unit-group">
                    <input id="hourly_rate_gross" type="number" step="0.01" x-bind:value="grossHourlyRate()" disabled>
                    <span class="profile-unit-suffix" aria-hidden="true">€/h</span>
                </div>
            </label>
            <label class="profile-field profile-field-unit-group" for="complementary_hours_majoration_rate">
                <span class="profile-label-with-info">
                    <span>Majoration h. complémentaires<span class="profile-required">*</span></span>
                    <x-legal-min-info id="complementary_hours_majoration_rate" text="Les heures complémentaires sont les heures effectuées au-delà de l’horaire habituel prévu au contrat, dans la limite du plafond légal hebdomadaire. Minimum légal : {{ $legalMinimums['majoration_rate'] }} %" />
                </span>
                <div class="profile-unit-group">
                    <input id="complementary_hours_majoration_rate" name="complementary_hours_majoration_rate" type="number" min="{{ $legalMinimums['majoration_rate'] }}" max="100" value="{{ old('complementary_hours_majoration_rate', $record?->complementary_hours_majoration_rate ?? $contractDefaults['complementary_hours_majoration_rate']) }}" {!! $requiredAttr !!} {!! $lockAttr($canEditCompensation) !!}>
                    <span class="profile-unit-suffix" aria-hidden="true">%</span>
                </div>
            </label>
            <label class="profile-field profile-field-unit-group" for="overtime_majoration_rate">
                <span class="profile-label-with-info">
                    <span>Majoration h. majorées<span class="profile-required">*</span></span>
                    <x-legal-min-info id="overtime_majoration_rate" text="Les heures majorées sont les heures effectuées au-delà du plafond légal hebdomadaire ({{ $legalMinimums['max_weekly_hours'] }} h/semaine). Minimum légal : {{ $legalMinimums['majoration_rate'] }} %" />
                </span>
                <div class="profile-unit-group">
                    <input id="overtime_majoration_rate" name="overtime_majoration_rate" type="number" min="{{ $legalMinimums['majoration_rate'] }}" max="100" x-model.number="overtimeMajorationRate" {!! $requiredAttr !!} {!! $lockAttr($canEditCompensation) !!}>
                    <span class="profile-unit-suffix" aria-hidden="true">%</span>
                </div>
            </label>
            <label class="profile-field profile-field-unit-group" for="maintenance_indemnity">
                <span class="profile-label-with-info">
                    <span>Entretien / jour<span class="profile-required">*</span></span>
                    <x-legal-min-info id="maintenance_indemnity" text="Minimum légal : {{ number_format((float) $legalMinimums['maintenance_indemnity'], 2, ',', ' ') }} €" />
                </span>
                <div class="profile-unit-group">
                    <input id="maintenance_indemnity" name="maintenance_indemnity" type="number" step="0.01" min="{{ $legalMinimums['maintenance_indemnity'] }}" x-model="maintenance" x-on:blur="formatMoney('maintenance')" {!! $requiredAttr !!} {!! $lockAttr($canEditCompensation) !!}>
                    <span class="profile-unit-suffix" aria-hidden="true">€</span>
                </div>
            </label>
            <label class="profile-field profile-field-unit-group" for="travel_expense_per_km">
                <span>Indemnité kilométrique</span>
                <div class="profile-unit-group">
                    <input id="travel_expense_per_km" name="travel_expense_per_km" type="number" step="0.01" min="0" value="{{ old('travel_expense_per_km', $record?->travel_expense_per_km ?? $contractDefaults['travel_expense_per_km']) }}" {!! $lockAttr($canEditCompensation) !!}>
                    <span class="profile-unit-suffix" aria-hidden="true">€/km</span>
                </div>
            </label>

            <label class="profile-field profile-field-unit-group" for="meal_indemnity">
                <span>Montant déjeuner<span class="profile-required">*</span></span>
                <div class="profile-unit-group">
                    <input id="meal_indemnity" name="meal_indemnity" type="number" step="0.01" min="0" x-model="meal" x-on:blur="formatMoney('meal')" {!! $requiredAttr !!} {!! $lockAttr($canEditCompensation) !!}>
                    <span class="profile-unit-suffix" aria-hidden="true">€</span>
                </div>
            </label>
            <label class="profile-field profile-field-unit-group" for="snack_indemnity">
                <span>Montant goûter<span class="profile-required">*</span></span>
                <div class="profile-unit-group">
                    <input id="snack_indemnity" name="snack_indemnity" type="number" step="0.01" min="0" x-model="snack" x-on:blur="formatMoney('snack')" required {!! $lockAttr($canEditCompensation) !!}>
                    <span class="profile-unit-suffix" aria-hidden="true">€</span>
                </div>
            </label>
            <label class="profile-field" for="salary_payment_day">
                <span>Jour de versement du salaire</span>
                <select id="salary_payment_day" name="salary_payment_day" {!! $lockAttr($canEditCompensation) !!}>
                    <option value="">—</option>
                    @foreach ($salaryPaymentDayOptions as $key => $label)
                        <option value="{{ $key }}" @selected(old('salary_payment_day', $record?->salary_payment_day ?? $contractDefaults['salary_payment_day']) == $key)>{{ $label }}</option>
                    @endforeach
                </select>
            </label>
        </div>
    </div>
</section>

<section class="employer-step-card contract-left-card">
    <div class="employer-section-header">
        <span>
            <strong>Périodes de repos</strong>
        </span>
        @if ($profileSync)
            <button type="button" class="employers-secondary-button btn--sm" x-on:click="syncFromProfile(@js($profileSync['rest']))"><i class="ph-duotone ph-arrows-clockwise" aria-hidden="true"></i>Synchroniser mes périodes de repos</button>
        @endif
    </div>
    <div class="employer-accordion-body">
        @if ($isParentView)
            <p class="profile-notice-callout"><span>Je retrouve ici les périodes de repos prévues par défaut par mon assistante maternelle. Si nous convenons d’autres modalités, je lui demande de les mettre à jour dans mon contrat.</span></p>
        @endif
        <div class="contract-rest-columns">
            <div class="contract-field-grid-4">
                <label class="profile-field" for="weekly_rest_day">
                    <span>Jour de repos hebdomadaire<span class="profile-required">*</span></span>
                    <select id="weekly_rest_day" name="weekly_rest_day" x-model="weeklyRestDay" {!! $requiredAttr !!} {!! $lockAttr($canEditRest) !!}>
                        @foreach ($dayLabels as $key => $label)
                            <option value="{{ $key }}" @selected(old('weekly_rest_day', $record?->weekly_rest_day ?? 'sunday') === $key)>{{ $label }}</option>
                        @endforeach
                    </select>
                </label>
                <label class="profile-field" for="weekly_rest_work_compensation">
                    <span>Majoration si travaillé<span class="profile-required">*</span></span>
                    <select id="weekly_rest_work_compensation" name="weekly_rest_work_compensation" x-model="weeklyRestCompensation" {!! $requiredAttr !!} {!! $lockAttr($canEditRest) !!}>
                        <option value="paid_25" @selected(old('weekly_rest_work_compensation', $record?->weekly_rest_work_compensation ?? 'paid_25') === 'paid_25')>Rémunéré au taux horaire dû, majoré à hauteur de 25%</option>
                        <option value="recovered_25" @selected(old('weekly_rest_work_compensation', $record?->weekly_rest_work_compensation) === 'recovered_25')>Récupéré par un repos équivalent à la durée de travail, majoré de 25%</option>
                    </select>
                </label>
                <label class="profile-field profile-field-unit-group" for="unpaid_leave_weeks">
                    <span>Nb semaines congés sans solde<span class="profile-required">*</span></span>
                    <div class="profile-unit-group">
                        <input id="unpaid_leave_weeks" name="unpaid_leave_weeks" type="number" min="0" max="47" value="{{ old('unpaid_leave_weeks', $record?->unpaid_leave_weeks ?? 0) }}" x-model.number="unpaidWeeks" {!! $requiredAttr !!} {!! $lockAttr($canEditRest) !!}>
                        <span class="profile-unit-suffix" aria-hidden="true">sem.</span>
                    </div>
                </label>
            </div>

            <fieldset class="contract-holidays-fieldset">
                <legend class="contract-fieldset-legend">
                    <span>Jours fériés travaillés</span>
                    <small class="contract-fieldset-counter" x-text="selectedHolidaysLabel()"></small>
                </legend>
                <div class="contract-holidays-grid">
                    @foreach ($publicHolidayLabels as $key => $holiday)
                        <label
                            class="contract-holiday-toggle"
                            @if (in_array($key, ['good_friday', 'december_26'], true)) x-show="isAlsaceMoselle()" x-cloak @endif
                            @if ($key === 'abolition') x-show="isDrom()" x-cloak @endif
                        >
                            <input type="checkbox" name="worked_public_holidays[]" value="{{ $key }}" @checked(in_array($key, old('worked_public_holidays', $record?->worked_public_holidays ?? []), true)) class="sr-only" @disabled(! $canEditContractFrame)>
                            <i class="ph-duotone ph-{{ $holiday['icon'] }}" aria-hidden="true"></i>
                            <span>{{ $holiday['label'] }}</span>
                        </label>
                    @endforeach
                </div>
            </fieldset>
        </div>
    </div>
</section>

<section class="employer-step-card contract-planning-card">
    @if ($isParentView)
        <p class="profile-notice-callout"><span>Je renseigne mes souhaits de garde en tant que parent employeur. Je pourrai les faire évoluer avec mon assistante maternelle si nos besoins changent, dans le respect de notre accord.</span></p>
    @endif
    <div class="profile-schedule-summary-row">
        <div class="profile-section-heading-title">
            @if ($isTemplateMode)
                <strong>{{ $scheduleSectionTitle }}</strong>
            @else
                <strong x-text="usesLinkedParentFlow() ? 'Amplitude horaire acceptée' : @js($scheduleSectionTitle)">{{ $scheduleSectionTitle }}</strong>
            @endif
        </div>
        <div class="profile-schedule-summary-actions">
            <span class="profile-schedule-summary-pill" x-text="weeklyDays() + ' jour' + (weeklyDays() > 1 ? 's' : '') + ' · ' + formattedWeeklyHours() + ' / sem.'"></span>
            <span class="profile-schedule-summary-pill profile-schedule-summary-pill--warning" x-show="hasOvertimeHours()" x-cloak x-text="formattedOvertimeWeeklyHours() + ' majorées'" x-bind:title="'Les heures effectuées au-delà de {{ $legalMinimums['max_weekly_hours'] }} h/semaine sont majorées de ' + overtimeMajorationRate + ' %.'"></span>
        </div>
    </div>

    <div class="profile-schedule-grid">
        @foreach ($scheduleDayLabels as $key => $label)
            <div class="contract-schedule-day" x-bind:class="{ 'contract-schedule-day--rest': isRestDay('{{ $key }}') && schedule.{{ $key }}.enabled, 'contract-schedule-day--locked': ! isScheduleDayAllowed('{{ $key }}') }">
                <div class="profile-schedule-day-head">
                    <label class="profile-schedule-day-toggle">
                        <input type="hidden" name="weekly_schedule[{{ $key }}][enabled]" value="0">
                        <input type="checkbox" name="weekly_schedule[{{ $key }}][enabled]" value="1" x-model="schedule.{{ $key }}.enabled" x-bind:disabled="{{ $canEditSchedule ? 'false' : 'true' }} || ! isScheduleDayAllowed('{{ $key }}')">
                        <span class="contract-schedule-day-check"><i class="ph ph-check" aria-hidden="true"></i></span>
                        <span class="profile-schedule-day-name">{{ substr($label, 0, 3) }}.</span>
                    </label>
                    @if ($canEditSchedule)
                        <button type="button" class="contract-schedule-day-copy" x-show="schedule.{{ $key }}.enabled" x-cloak x-on:click="applyDayToChecked('{{ $key }}')" x-bind:disabled="! schedule.{{ $key }}.start || ! schedule.{{ $key }}.end" title="Appliquer ces horaires aux jours cochés">
                            <i class="ph-duotone ph-copy" aria-hidden="true"></i>
                        </button>
                    @endif
                </div>
                <p class="contract-schedule-day-rest-badge" x-show="isRestDay('{{ $key }}') && schedule.{{ $key }}.enabled" x-cloak x-text="'Repos hebdo.'" title="Ce jour est le jour de repos hebdomadaire : les heures travaillées y sont majorées."></p>
                <template x-if="schedule.{{ $key }}.enabled">
                    <div class="display-contents">
                        <input type="time" name="weekly_schedule[{{ $key }}][start]" x-model="schedule.{{ $key }}.start" x-bind:min="templateDayStart('{{ $key }}')" x-bind:max="templateDayEnd('{{ $key }}')" x-bind:disabled="{{ $canEditSchedule ? 'false' : 'true' }} || ! isScheduleDayAllowed('{{ $key }}')" aria-label="Début {{ $label }}">
                        <input type="time" name="weekly_schedule[{{ $key }}][end]" x-model="schedule.{{ $key }}.end" x-bind:min="templateDayStart('{{ $key }}')" x-bind:max="templateDayEnd('{{ $key }}')" x-bind:disabled="{{ $canEditSchedule ? 'false' : 'true' }} || ! isScheduleDayAllowed('{{ $key }}')" aria-label="Fin {{ $label }}">
                        <span class="profile-schedule-day-duration" x-text="dailyDurationLabel('{{ $key }}')"></span>
                    </div>
                </template>
                <template x-if="!schedule.{{ $key }}.enabled">
                    <span class="profile-schedule-day-duration">Non travaillé</span>
                </template>
            </div>
        @endforeach
    </div>

    <label class="contract-schedule-notice-row" for="schedule_notice_weeks">
        <span class="contract-schedule-notice-copy">
            <span>Délai de prévenance en cas de changement de planning</span>
            <small class="contract-schedule-notice-helper" x-show="careType === 'occasional'" x-cloak>Pour une garde occasionnelle, le délai minimum est de 8 semaines calendaires.</small>
        </span>
        <span class="profile-unit-group">
            <input id="schedule_notice_weeks" name="schedule_notice_weeks" type="number" x-bind:min="careType === 'occasional' ? 8 : 0" max="52" x-bind:required="careType === 'occasional'" value="{{ old('schedule_notice_weeks', $record?->schedule_notice_weeks ?? $contractDefaults['schedule_notice_weeks']) }}" {!! $lockAttr($canEditScheduleNotice) !!}>
            <span class="profile-unit-suffix" aria-hidden="true">sem.</span>
        </span>
    </label>
</section>

<section class="employer-step-card contract-weeks-card" x-show="careType === 'incomplete_year'" x-cloak>
    <div class="employer-section-header">
        <span>
            <strong>Semaines travaillées</strong>
        </span>
        <span class="contract-header-pill" x-text="specificWeeks.length + ' / 52 semaines'"></span>
    </div>
    <div class="employer-accordion-body">
        @if ($canEditWeeks)
            <div class="contract-weeks-presets">
                <button type="button" class="employers-secondary-button" x-on:click="selectAllWeeks()">Tout sélectionner</button>
                <button type="button" class="employers-secondary-button" x-on:click="deselectAllWeeks()">Tout désélectionner</button>
                <button type="button" class="employers-secondary-button" x-on:click="selectWeeksParity('odd')">Semaines impaires</button>
                <button type="button" class="employers-secondary-button" x-on:click="selectWeeksParity('even')">Semaines paires</button>
            </div>
        @endif
        <div class="contract-weeks-months">
            @foreach ($weekMonthGroups as $monthLabel => $weeks)
                <div>
                    <button type="button" class="contract-weeks-month-label" x-on:click="toggleMonthWeeks(@js($weeks))" title="Sélectionner/désélectionner {{ $monthLabel }}" @disabled(! $canEditWeeks)>{{ $monthLabel }}</button>
                    <div class="contract-weeks-grid">
                        @foreach ($weeks as $week)
                            <label class="contract-week-toggle">
                                <input type="checkbox" name="specific_weeks[]" value="{{ $week }}" x-model.number="specificWeeks" class="sr-only" @disabled(! $canEditWeeks)>
                                <span>s{{ $week }}</span>
                            </label>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>
        @error('specific_weeks')<small>{{ $message }}</small>@enderror
    </div>
</section>

<section class="employer-step-card contract-left-card">
    <div class="employer-section-header">
        <span><strong>Conditions particulières</strong></span>
    </div>
    <div class="employer-accordion-body">
        @unless ($isTemplateMode)
            <section id="contract-image-rights" class="contract-image-rights" aria-labelledby="contract-image-rights-title">
                <h3 id="contract-image-rights-title"><i class="ph-duotone ph-camera" aria-hidden="true"></i> Droit à l'image et déplacements</h3>
                @if ($canEditImageRights)
                    <input type="hidden" name="image_rights_section" value="1">
                @endif
                <p class="contract-sim-helper">{{ $isParentView ? "Je choisis ce que j'autorise." : "Le parent choisit ce qu'il autorise." }} Un document reprenant ces choix et les engagements du parent et de l'assistant(e) maternel(le) est ensuite téléchargeable par les deux.</p>
                <x-toggle-switch name="photo_alone_authorized" value="1" :checked="(bool) old('photo_alone_authorized', $record?->photo_alone_authorized)" :disabled="! $canEditImageRights" label="J'autorise la prise de photographies de mon enfant seul(e)" />
                <x-toggle-switch name="photo_group_authorized" value="1" :checked="(bool) old('photo_group_authorized', $record?->photo_group_authorized)" :disabled="! $canEditImageRights" label="J'autorise la prise de photographies de mon enfant en groupe, avec d'autres enfants accueillis" />
                <x-toggle-switch name="car_transport_authorized" value="1" :checked="(bool) old('car_transport_authorized', $record?->car_transport_authorized)" :disabled="! $canEditImageRights" label="J'autorise l'assistante maternelle à déplacer mon enfant en voiture" />
                @if ($record !== null)
                    @if ($canCommitImageRights)
                        <x-toggle-switch name="image_rights_committed" value="1" form="contract_accept_form" x-model="imageRightsCommitted" label="Je m'engage à respecter les volontés du parent (obligatoire pour accepter le contrat)" />
                    @else
                        <x-toggle-switch name="image_rights_committed_display" :checked="$record->assistant_image_rights_committed_at !== null" disabled label="L'assistant(e) maternel(le) s'engage à respecter les volontés du parent" />
                    @endif
                @endif
            </section>
        @endunless
        <label class="profile-field" for="special_conditions">
            <span>Mes précisions complémentaires (facultatif)</span>
            <textarea id="special_conditions" name="special_conditions" rows="5" placeholder="Je précise ici les dispositions convenues pour mon contrat…" @disabled(! $canEditContractFrame)>{{ old('special_conditions', $record?->special_conditions) }}</textarea>
            @error('special_conditions')<small>{{ $message }}</small>@enderror
        </label>
        @include('contracts._required-documents')
        @if ($record?->isAmendment())
            <label class="profile-field" for="amendment_notes">
                <span>Autres modifications de l'avenant (saisie libre, facultatif)</span>
                <textarea id="amendment_notes" name="amendment_notes" rows="4" maxlength="1500" placeholder="Je précise ici toute autre modification convenue…" @disabled($readonly)>{{ old('amendment_notes', $record->amendment_notes) }}</textarea>
                <small>Ce texte est repris tel quel sur l'avenant, à la suite de la liste des modifications.</small>
                @error('amendment_notes')<small>{{ $message }}</small>@enderror
            </label>
        @endif
    </div>
</section>

    </div>

    <aside class="contract-sidebar">
<section class="employer-step-card contract-simulation-card contract-simulation-card--sidebar">
    <div class="employer-section-header">
        <span>
            <strong>Simulation</strong>
            <small x-text="simulationSummaryLine()"></small>
        </span>
    </div>
    <div class="employer-accordion-body">
        <div class="contract-sim-section">
            <small class="contract-sim-section-title contract-sim-section-title--purple">Rémunération</small>
            <div class="contract-sim-line">
                <span>Heures normales</span>
                <span class="contract-sim-leader" aria-hidden="true"></span>
                <strong x-text="money(displayAmount(monthlyNormalPay())) + ' ' + periodSuffix()"></strong>
                <small x-text="normalHourlyBreakdown()"></small>
            </div>
            <div class="contract-sim-line" x-show="hasOvertimeHours()" x-cloak>
                <span x-text="'Heures majorées +' + overtimeMajorationRate + '%'"></span>
                <span class="contract-sim-leader" aria-hidden="true"></span>
                <strong x-text="money(displayAmount(monthlyOvertimePay())) + ' ' + periodSuffix()"></strong>
                <small x-text="overtimeHourlyBreakdown()"></small>
            </div>
            <div class="contract-sim-line" x-show="hasRestDayWorked() && weeklyRestCompensation === 'paid_25'" x-cloak>
                <span x-text="'Jour de repos majoré +' + restDayMajorationRate() + '%'"></span>
                <span class="contract-sim-leader" aria-hidden="true"></span>
                <strong x-text="'+ ' + money(displayAmount(monthlyRestDayBonus())) + ' ' + periodSuffix()"></strong>
                <small x-text="restDayBonusBreakdown()"></small>
            </div>
        </div>

        <div class="contract-sim-section" x-show="hasMeals() || Number(maintenance) > 0" x-cloak>
            <small class="contract-sim-section-title contract-sim-section-title--purple">Indemnités</small>
            <div class="contract-sim-line contract-sim-line--inline">
                <span>Entretien</span>
                <small x-text="indemnitiesBreakdown()"></small>
                <span class="contract-sim-leader" aria-hidden="true"></span>
                <strong x-text="money(displayAmount(monthlyIndemnities())) + ' ' + periodSuffix()"></strong>
            </div>
            <div class="contract-sim-line contract-sim-line--inline" x-show="mealProvider === 'assistant'" x-cloak>
                <span>Déjeuner</span>
                <small x-text="formattedMonthlyDays() + ' j × ' + money(Number(meal || 0))"></small>
                <span class="contract-sim-leader" aria-hidden="true"></span>
                <strong x-text="money(displayAmount(monthlyMealOnly())) + ' ' + periodSuffix()"></strong>
            </div>
            <div class="contract-sim-line contract-sim-line--inline" x-show="snackProvider === 'assistant'" x-cloak>
                <span>Goûter</span>
                <small x-text="formattedMonthlyDays() + ' j × ' + money(Number(snack || 0))"></small>
                <span class="contract-sim-leader" aria-hidden="true"></span>
                <strong x-text="money(displayAmount(monthlySnackOnly())) + ' ' + periodSuffix()"></strong>
            </div>
        </div>

        <div class="contract-sim-total">
            <span>Salaire net estimé</span>
            <strong x-text="money(displayAmount(totalToPay())) + ' ' + periodSuffix()"></strong>
        </div>

        @if ($isParentView)
            @include('contracts._cmg-aids')
        @endif
    </div>
</section>

    </aside>
</div>