{{--
    Corps commun de la modale « détail d'un mois de garde » : en-tête, bascule
    Calendrier/Liste, calendrier du mois + récap par semaine, puis le détail du coût.

    Partagé entre le dashboard nounou (« Mes revenus ») et le dashboard parent (« Ce que je
    vais payer »). Le parent ajoute ensuite le bloc « Aides & reste à charge » après ce
    partial. Composant Alpine : `monthDetailModal()` (voir app.js) — expose `detail`, `view`.
--}}
{{-- Barre mobile plein écran : retour + titre. Masquée en desktop (voir app.css). --}}
<div class="dashboard-detail-mobilebar">
    <button type="button" @click="detail = null" aria-label="Retour"><i class="ph ph-caret-left"></i></button>
    <span>Détail du mois</span>
</div>

<div class="planning-modal-head">
    <div class="planning-modal-head-info">
        <span class="planning-modal-avatar" :class="'planning-modal-avatar--' + detail.color" x-text="detail.initials" aria-hidden="true"></span>
        <div>
            <h2 class="planning-modal-title" x-text="detail.child + ' — ' + detail.month"></h2>
            <p class="planning-modal-subtitle" x-text="detail.family + (detail.hourlyRate ? ' · ' + detail.hourlyRate : '')"></p>
        </div>
    </div>
    <button type="button" class="planning-modal-close" @click="detail = null" aria-label="Fermer"><i class="ph ph-x"></i></button>
</div>

<div>
    <div class="dashboard-detail-toggle-bar">
        <div class="dashboard-week-toggle">
            <button type="button" class="dashboard-week-toggle-button" :class="{ 'dashboard-week-toggle-button-active': view === 'calendar' }" @click="view = 'calendar'">Calendrier</button>
            <button type="button" class="dashboard-week-toggle-button" :class="{ 'dashboard-week-toggle-button-active': view === 'list' }" @click="view = 'list'">Liste</button>
        </div>
    </div>

    <div class="dashboard-detail-body">
        <div class="dashboard-detail-calendar-card">
            <p class="planning-section-label">Journées du mois</p>

            <div x-show="view === 'calendar'">
                <div class="dashboard-detail-calendar-head">
                    <span>Lun</span><span>Mar</span><span>Mer</span><span>Jeu</span><span>Ven</span><span>Sam</span><span>Dim</span>
                </div>
                <template x-for="(week, wIndex) in detail.calendarWeeks" :key="wIndex">
                    <div class="dashboard-detail-calendar-row">
                        <template x-for="(cell, cIndex) in week" :key="cIndex">
                            <div class="dashboard-detail-calendar-cell" :class="{
                                'dashboard-detail-calendar-cell--empty': !cell,
                                'dashboard-detail-calendar-cell--garde': cell && cell.hours,
                                'dashboard-detail-calendar-cell--leave': cell && cell.isLeave,
                                'dashboard-detail-calendar-cell--leave-annual': cell && cell.leaveType === 'annual',
                                'dashboard-detail-calendar-cell--leave-unpaid': cell && cell.leaveType === 'unpaid',
                                'dashboard-detail-calendar-cell--leave-sick': cell && cell.leaveType === 'sick',
                                'dashboard-detail-calendar-cell--leave-other': cell && cell.leaveType === 'other',
                            }">
                                <template x-if="cell">
                                    <div>
                                        <span class="dashboard-detail-calendar-day" x-text="cell.day"></span>
                                        <span class="dashboard-detail-calendar-hours" x-show="cell.hours" x-text="cell.hours"></span>
                                        <i class="dashboard-detail-calendar-leave-icon" :class="leaveIcon(cell.leaveType)" x-show="cell.isLeave" aria-hidden="true"></i>
                                    </div>
                                </template>
                            </div>
                        </template>
                    </div>
                </template>
            </div>

            <div x-show="view === 'list'" class="dashboard-revenue-detail-days">
                <template x-for="day in detail.daysDetail" :key="day.date">
                    <div class="dashboard-revenue-detail-day-row">
                        <span x-text="day.label + ' ' + day.date"></span>
                        <span x-text="day.hours ?? day.note ?? '—'"></span>
                        <span x-text="day.amount ?? ''"></span>
                    </div>
                </template>
            </div>
        </div>

        <div class="dashboard-detail-weeks">
            <p class="planning-section-label">Par semaine</p>
            <template x-for="week in detail.weeks" :key="week.label">
                <div class="dashboard-detail-week-row">
                    <span class="dashboard-detail-week-badge" x-text="week.label"></span>
                    <div class="dashboard-detail-week-main">
                        <span x-text="week.range"></span>
                        <span x-text="week.amount"></span>
                    </div>
                    <strong x-text="week.hours"></strong>
                </div>
            </template>
            <div class="dashboard-detail-week-total">
                <span>Total du mois</span>
                <strong x-text="detail.totalHours"></strong>
            </div>
        </div>
    </div>
</div>

<div class="dashboard-detail-cost">
    <p class="dashboard-detail-cost-title">
        Détail du coût
        <span class="profile-info-tooltip profile-info-tooltip--wide">
            <button type="button" aria-describedby="detail-cost-hours-tip"><i class="ph-duotone ph-info" aria-hidden="true"></i></button>
            <span id="detail-cost-hours-tip" role="tooltip">Heures complémentaires : effectuées au-delà du volume hebdomadaire prévu au contrat, dans la limite du plafond légal ; payées au tarif horaire majoré du taux complémentaire. Heures supplémentaires : au-delà du plafond légal hebdomadaire ; payées au tarif majoré du taux supplémentaire.</span>
        </span>
    </p>

    {{-- 1. Heures effectuées --}}
    <div class="dashboard-detail-cost-group">
        <p class="dashboard-detail-cost-subhead">Heures effectuées</p>
        <div class="dashboard-detail-cost-row" x-show="detail.cost.normal.minutes > 0">
            <span>Heures normales</span>
            <small x-text="detail.cost.normal.hours + ' × ' + detail.cost.normal.rate"></small>
            <strong x-text="detail.cost.normal.amount"></strong>
        </div>
        <div class="dashboard-detail-cost-row" x-show="detail.cost.complementary.minutes > 0">
            <span>Heures complémentaires</span>
            <small x-text="detail.cost.complementary.hours + ' × ' + detail.cost.complementary.rate"></small>
            <strong x-text="detail.cost.complementary.amount"></strong>
        </div>
        <div class="dashboard-detail-cost-row" x-show="detail.cost.overtime.minutes > 0">
            <span>Heures supplémentaires</span>
            <small x-text="detail.cost.overtime.hours + ' × ' + detail.cost.overtime.rate"></small>
            <strong x-text="detail.cost.overtime.amount"></strong>
        </div>
        <div class="dashboard-detail-cost-row dashboard-detail-cost-row--subtotal">
            <span>Total des heures</span>
            <small x-text="detail.cost.totalHoursLabel"></small>
            <strong x-text="detail.cost.totalHoursAmount"></strong>
        </div>
    </div>

    <div class="dashboard-detail-cost-group" x-show="detail.cpCompensation || detail.absences.unpaid || detail.absences.sick || detail.absences.other">
        <p class="dashboard-detail-cost-subhead">Absences</p>
        <div class="dashboard-detail-cost-row" x-show="detail.cpCompensation">
            <span>Congés payés</span>
            <small x-text="detail.cpDaysPaid ? (detail.cpDaysPaid > 1 ? detail.cpDaysPaid + ' jrs' : 'jr') : ''"></small>
            <strong x-text="'+ ' + detail.cpCompensation"></strong>
        </div>
        <div class="dashboard-detail-cost-row dashboard-detail-cost-row--muted" x-show="detail.absences.unpaid">
            <span>Congés sans solde</span>
            <small x-text="detail.absences.unpaid + (detail.absences.unpaid > 1 ? ' jrs' : ' jr')"></small>
        </div>
        <div class="dashboard-detail-cost-row dashboard-detail-cost-row--muted" x-show="detail.absences.sick">
            <span>Maladie</span>
            <small x-text="detail.absences.sick + (detail.absences.sick > 1 ? ' jrs' : ' jr')"></small>
        </div>
        <div class="dashboard-detail-cost-row dashboard-detail-cost-row--muted" x-show="detail.absences.other">
            <span>Autre absence</span>
            <small x-text="detail.absences.other + (detail.absences.other > 1 ? ' jrs' : ' jr')"></small>
        </div>
        <div class="dashboard-detail-cost-row dashboard-detail-cost-row--subtotal">
            <span>Total des absences</span>
            <small x-text=""></small>
            <strong x-text="detail.cpCompensation"></strong>
        </div>
    </div>

    {{-- 3. Indemnités --}}
    <div class="dashboard-detail-cost-group" x-show="detail.indemnities.maintenance || detail.indemnities.meal || detail.indemnities.snack || detail.indemnities.travel">
        <p class="dashboard-detail-cost-subhead">Indemnités</p>
        <template x-if="detail.indemnities.maintenance">
            <div class="dashboard-detail-cost-row">
                <span>Entretien</span>
                <small x-text="detail.indemnities.maintenance.days + ' j × ' + detail.indemnities.maintenance.unit"></small>
                <strong x-text="detail.indemnities.maintenance.total"></strong>
            </div>
        </template>
        <template x-if="detail.indemnities.meal">
            <div class="dashboard-detail-cost-row">
                <span>Déjeuners</span>
                <small x-text="detail.indemnities.meal.days + ' j × ' + detail.indemnities.meal.unit"></small>
                <strong x-text="detail.indemnities.meal.total"></strong>
            </div>
        </template>
        <template x-if="detail.indemnities.snack">
            <div class="dashboard-detail-cost-row">
                <span>Goûters</span>
                <small x-text="detail.indemnities.snack.days + ' j × ' + detail.indemnities.snack.unit"></small>
                <strong x-text="detail.indemnities.snack.total"></strong>
            </div>
        </template>
        <template x-if="detail.indemnities.travel">
            <div class="dashboard-detail-cost-row">
                <span>Indemnités kilométriques</span>
                <small x-text="detail.indemnities.travel.km + ' × ' + detail.indemnities.travel.unit"></small>
                <strong x-text="detail.indemnities.travel.total"></strong>
            </div>
        </template>
        <div class="dashboard-detail-cost-row dashboard-detail-cost-row--subtotal">
            <span>Total des indemnités</span>
            <span></span>
            <strong x-text="detail.cost.indemnitiesTotal"></strong>
        </div>
    </div>

    <div class="dashboard-detail-net">
        <span>Net à payer</span>
        <strong x-text="detail.cost.netToPay"></strong>
    </div>
</div>