@props([
    'entry' => null,
    'dateLabel' => null,
    'closeAction' => 'closeSlot()',
    'isParent' => false,
    'canAdjustSchedule' => true,
])

@php
    $entryName = $entry
        ? trim(($entry['child'] ?? '').' '.($entry['child_last_name'] ?? ''))
        : null;
    $entryInitials = $entry['initials'] ?? null;
    $entryAvatarClass = 'planning-modal-avatar--'.($entry['color'] ?? 'neutral');
    $entryPlannedStart = isset($entry['planned_start']) ? str_replace(':', 'h', $entry['planned_start']) : null;
    $entryPlannedEnd = isset($entry['planned_end']) ? str_replace(':', 'h', $entry['planned_end']) : null;
@endphp

@if ($entry === null)
    <div class="planning-modal-head">
        <div class="planning-modal-head-info">
            <span class="planning-modal-avatar" :style="'background:' + openChild.palette.bg + ';color:' + openChild.palette.fg" x-text="openChild.initials"></span>
            <div>
                <h2 class="planning-modal-title" x-text="openChild.firstName + ' ' + openChild.lastName"></h2>
                <p class="planning-modal-subtitle" x-text="openDateLabel"></p>
                <p class="planning-modal-lock-hint" x-show="openIsOldPast"><i class="ph ph-lock-simple"></i>Journée passée · lecture seule</p>
                <p class="planning-modal-lock-hint" x-show="openIsRecentPast"><i class="ph ph-pencil-simple-line"></i>Journée passée · saisis les horaires effectifs</p>
            </div>
        </div>
        <button type="button" class="planning-modal-close" @click="{{ $closeAction }}" aria-label="Fermer"><i class="ph ph-x"></i></button>
    </div>

    <div class="planning-contract-banner">
        <span class="planning-contract-banner-label">Horaires au contrat</span>
        <span class="planning-contract-banner-value" x-text="openContractLabel ?? 'Hors contrat · accueil ponctuel'"></span>
    </div>

    <div>
        <p class="planning-section-label planning-section-label--spaced">Présence</p>
        <div class="planning-radio-grid">
            <button type="button" class="planning-radio-card" :class="{ 'planning-radio-card--active-green': openForm.presence === 'present' }" :disabled="openIsOldPast" @click="setPresence('present')">
                <i class="ph ph-check-circle"></i>Présent
            </button>
            <button type="button" class="planning-radio-card" :class="{ 'planning-radio-card--active-purple': openForm.presence === 'absent-just' }" :disabled="openIsOldPast" @click="setPresence('absent-just')">
                <i class="ph ph-first-aid-kit"></i>Absence justifiée
            </button>
            <button type="button" class="planning-radio-card" :class="{ 'planning-radio-card--active-pink': openForm.presence === 'absent-injust' }" :disabled="openIsOldPast" @click="setPresence('absent-injust')">
                <i class="ph ph-warning-circle"></i>Absence injustifiée
            </button>
        </div>
    </div>

    <div x-show="openForm.presence === 'present'">
        <p class="planning-section-label planning-section-label--spaced">Horaires prévus</p>
        <div class="planning-time-grid">
            <div class="planning-time-field">
                <span class="planning-time-field-label"><i class="ph ph-sign-in"></i>Arrivée</span>
                <input type="time" class="planning-time-input" :value="openForm.in" :disabled="openIsPast" @input="openForm.in = $event.target.value; commitOpen()">
            </div>
            <i class="ph ph-arrow-right planning-time-arrow"></i>
            <div class="planning-time-field">
                <span class="planning-time-field-label"><i class="ph ph-sign-out"></i>Départ</span>
                <input type="time" class="planning-time-input" :value="openForm.out" :disabled="openIsPast" @input="openForm.out = $event.target.value; commitOpen()">
            </div>
        </div>
        <template x-if="openGapBanner">
            <div class="planning-gap-banner" :class="openGapBanner.class">
                <i :class="openGapBanner.icon"></i><span x-text="openGapBanner.label"></span>
            </div>
        </template>
    </div>

    <div x-show="openForm.presence === 'present' && openIsPast">
        <p class="planning-section-label planning-section-label--spaced">Horaires effectifs &amp; frais</p>
        <div class="planning-effective-row">
            <div class="planning-time-grid">
                <div class="planning-time-field">
                    <span class="planning-time-field-label"><i class="ph ph-sign-in"></i>Arrivée</span>
                    <input type="time" class="planning-time-input" :value="openForm.actualIn" :disabled="!openIsRecentPast" @input="openForm.actualIn = $event.target.value; commitOpen()">
                </div>
                <i class="ph ph-arrow-right planning-time-arrow"></i>
                <div class="planning-time-field">
                    <span class="planning-time-field-label"><i class="ph ph-sign-out"></i>Départ</span>
                    <input type="time" class="planning-time-input" :value="openForm.actualOut" :disabled="!openIsRecentPast" @input="openForm.actualOut = $event.target.value; commitOpen()">
                </div>
            </div>
            <div class="planning-time-field planning-km-field">
                <label class="planning-time-field-label" for="slot_travel_km"><i class="ph ph-car"></i>Frais kilométriques</label>
                <span class="planning-km-input-wrap">
                    <input type="number" id="slot_travel_km" min="0" step="0.1" inputmode="decimal" class="planning-time-input planning-km-input" :value="openForm.travelKm" :disabled="!openIsRecentPast" @input="openForm.travelKm = $event.target.value; commitOpen()" placeholder="0">
                    <span class="planning-km-unit">km</span>
                </span>
            </div>
        </div>
    </div>

    <div>
        <p class="planning-section-label planning-section-label--spaced" x-text="openForm.presence === 'present' ? 'Accord avec les parents' : 'Motif de l’absence'"></p>
        <textarea
            class="planning-textarea"
            rows="3"
            :placeholder="openForm.presence === 'present' ? 'Ex. accord du 20/08 pour un départ à 19h' : 'Ex. certificat médical transmis le 24/08'"
            :value="openForm.note"
            :disabled="openIsOldPast"
            @input="openForm.note = $event.target.value; commitOpen()"
        ></textarea>
    </div>

    <div class="planning-modal-actions" x-show="!openIsOldPast">
        <button type="button" class="planning-icon-btn" @click="resetSlot()" title="Réinitialiser (revenir au contrat)"><i class="ph ph-arrow-counter-clockwise"></i></button>
        <button type="button" class="planning-icon-btn" disabled title="Prévenir les parents (bientôt disponible)"><i class="ph ph-paper-plane-tilt"></i></button>
        <button type="button" class="planning-primary-btn" @click="{{ $closeAction }}"><i class="ph ph-check"></i>Enregistrer</button>
    </div>

    <div class="planning-modal-actions" x-show="openIsOldPast">
        <button type="button" class="planning-primary-btn" @click="{{ $closeAction }}"><i class="ph ph-check"></i>Fermer</button>
    </div>
@else
    <div class="planning-modal-head">
        <div class="planning-modal-head-info">
            <span class="planning-modal-avatar {{ $entryAvatarClass }}">{{ $entryInitials }}</span>
            <div>
                <h2 class="planning-modal-title">{{ $entryName !== '' ? $entryName : $entry['child'] }}</h2>
                <p class="planning-modal-subtitle">{{ $dateLabel }}</p>
                @if ($isParent && $canAdjustSchedule)
                    <p class="planning-modal-lock-hint"><i class="ph ph-info"></i>Je peux déclarer une arrivée plus tardive ou un départ plus tôt que prévu.</p>
                @elseif ($isParent)
                    <p class="planning-modal-lock-hint"><i class="ph ph-lock-simple"></i>Le délai de prévenance ne me permet plus de modifier les horaires, mais je peux toujours signaler une absence.</p>
                @endif
            </div>
        </div>
        <button type="button" class="planning-modal-close" x-on:click="{{ $closeAction }}" aria-label="Fermer"><i class="ph ph-x"></i></button>
    </div>

    <div class="planning-contract-banner">
        <span class="planning-contract-banner-label">Horaires au contrat</span>
        <span class="planning-contract-banner-value">{{ $entryPlannedStart }} → {{ $entryPlannedEnd }}</span>
    </div>

    <form method="post" action="{{ $entry['update_url'] }}" class="planning-modal-form" x-data="{ presence: '{{ $canAdjustSchedule ? 'present' : 'absent-just' }}' }">
        @csrf
        <input type="hidden" name="action" x-bind:value="presence">

        <div>
            <p class="planning-section-label planning-section-label--spaced">Présence</p>
            <div class="planning-radio-grid">
                <button type="button" class="planning-radio-card" x-bind:class="{ 'planning-radio-card--active-green': presence === 'present' }" @disabled(! $canAdjustSchedule) @if ($canAdjustSchedule) x-on:click="presence = 'present'" @endif title="{{ $canAdjustSchedule ? '' : 'Délai de prévenance non respecté' }}">
                    <i class="ph ph-check-circle"></i>Présent
                </button>
                <button type="button" class="planning-radio-card" x-bind:class="{ 'planning-radio-card--active-purple': presence === 'absent-just' }" x-on:click="presence = 'absent-just'">
                    <i class="ph ph-first-aid-kit"></i>Absence justifiée
                </button>
                <button type="button" class="planning-radio-card" x-bind:class="{ 'planning-radio-card--active-pink': presence === 'absent-injust' }" x-on:click="presence = 'absent-injust'">
                    <i class="ph ph-warning-circle"></i>Absence injustifiée
                </button>
            </div>
        </div>

        <div x-show="presence === 'present'">
            <p class="planning-section-label planning-section-label--spaced">Horaires prévus @unless ($isParent)&amp; frais @endunless</p>
            <div class="planning-effective-row">
                <div class="planning-time-grid">
                    <div class="planning-time-field">
                        <span class="planning-time-field-label"><i class="ph ph-sign-in"></i>Arrivée</span>
                        <input type="time" name="actual_start_time" class="planning-time-input" value="{{ $entry['start'] }}" @if ($isParent) min="{{ $entry['planned_start'] }}" @endif x-bind:required="presence === 'present'">
                    </div>
                    <i class="ph ph-arrow-right planning-time-arrow"></i>
                    <div class="planning-time-field">
                        <span class="planning-time-field-label"><i class="ph ph-sign-out"></i>Départ</span>
                        <input type="time" name="actual_end_time" class="planning-time-input" value="{{ $entry['end'] }}" @if ($isParent) max="{{ $entry['planned_end'] }}" @endif x-bind:required="presence === 'present'">
                    </div>
                </div>
                @unless ($isParent)
                    <div class="planning-time-field planning-km-field">
                        <label class="planning-time-field-label" for="slot_travel_km_form"><i class="ph ph-car"></i>Frais kilométriques</label>
                        <span class="planning-km-input-wrap">
                            <input type="number" id="slot_travel_km_form" name="travel_km" min="0" step="0.1" inputmode="decimal" class="planning-time-input planning-km-input" placeholder="0">
                            <span class="planning-km-unit">km</span>
                        </span>
                    </div>
                @endunless
            </div>
        </div>

        <div>
            <p class="planning-section-label planning-section-label--spaced" x-text="presence === 'present' ? '{{ $isParent ? 'Accord avec mon assistante maternelle' : 'Accord avec les parents' }}' : 'Motif de l’absence'"></p>
            <textarea name="note" class="planning-textarea" rows="3" x-bind:placeholder="presence === 'present' ? 'Ex. accord du 20/08 pour un départ à 19h' : 'Ex. certificat médical transmis hors plateforme'" x-bind:required="presence !== 'present'"></textarea>
        </div>

        <div class="planning-modal-actions">
            <button type="button" class="planning-icon-btn" x-on:click="{{ $closeAction }}" title="Réinitialiser (revenir au contrat)"><i class="ph ph-arrow-counter-clockwise"></i></button>
            <button type="button" class="planning-icon-btn" disabled title="Prévenir les parents (bientôt disponible)"><i class="ph ph-paper-plane-tilt"></i></button>
            <button type="submit" class="planning-primary-btn" x-bind:class="{ 'planning-primary-btn-danger': presence !== 'present' }">
                <i class="ph ph-check"></i><span x-text="presence === 'present' ? 'Enregistrer' : 'Signaler l’absence'"></span>
            </button>
        </div>
    </form>
@endif