@php



    $showTaxCredit = $showTaxCredit ?? true;
    $panelId = $panelId ?? 'cmg_detail_panel';
    $detailOpenExpr = $detailOpenExpr ?? 'showCmgDetail';
    $toggleDetailExpr = $toggleDetailExpr ?? 'toggleCmgDetail()';
    $moneyFn = $moneyFn ?? 'money';
    $formattedPercentFn = $formattedPercentFn ?? 'formattedPercent';
    $estimatedCmgExpr = $estimatedCmgExpr ?? "(cmg.loading ? 'Calcul en cours…' : money(displayAmount(cmg.estimatedCmg)) + ' ' + periodSuffix())";
    $cmgDetailExpr = $cmgDetailExpr ?? 'cmg.detail';
    $effortRatePercentExpr = $effortRatePercentExpr ?? 'cmgEffortRatePercent()';
    $formulaComputedExpr = $formulaComputedExpr ?? 'cmgFormulaComputed()';
    $taxCreditExpr = $taxCreditExpr ?? "money(displayAmount(monthlyTaxCredit())) + ' ' + periodSuffix()";
    $taxCreditAnnualExpr = $taxCreditAnnualExpr ?? "'soit − ' + money(cmg.taxCreditAnnual) + ' /an'";
    $cmgPercentExpr = $cmgPercentExpr ?? 'cmgPercent()';
    $taxCreditPercentExpr = $taxCreditPercentExpr ?? 'taxCreditPercent()';
    $remainderPercentExpr = $remainderPercentExpr ?? 'remainderPercent()';
    $realCostExpr = $realCostExpr ?? "(cmg.loading ? 'Calcul en cours…' : money(displayAmount(cmg.realCostAfterTaxCredit)))";
    $periodSuffixExpr = $periodSuffixExpr ?? 'periodSuffix()';
@endphp

<p class="profile-notice-callout" x-show="cmg.error" x-cloak><span>Je ne peux pas estimer mes aides pour le moment. Le coût affiché reste celui avant aides ; je pourrai réessayer dans quelques instants.</span></p>

<div class="contract-sim-section">
    <small class="contract-sim-section-title contract-sim-section-title--green">Aides estimées</small>
    <div class="contract-sim-line contract-sim-line--inline contract-sim-line--deduction">
        <span class="contract-sim-line-label-toggle">
            <span>CMG Pajemploi</span>
            <button type="button" class="contract-cmg-detail-toggle" x-on:click="{{ $toggleDetailExpr }}" x-bind:class="{ 'is-open': {{ $detailOpenExpr }} }" x-bind:aria-expanded="{{ $detailOpenExpr }}" aria-controls="{{ $panelId }}" aria-label="Afficher le détail du calcul de la CMG">
                <i class="ph-duotone ph-caret-right" aria-hidden="true"></i>
            </button>
        </span>
        <span class="contract-sim-leader" aria-hidden="true"></span>
        <strong x-text="'− ' + {{ $estimatedCmgExpr }}"></strong>
    </div>
    <div class="contract-cmg-detail-panel" id="{{ $panelId }}" x-show="{{ $detailOpenExpr }}" x-cloak>
        <template x-if="{{ $cmgDetailExpr }}">
            <div class="contract-cmg-detail-lines">
                <div class="contract-cmg-detail-row">
                    <span>Coût mensuel de la garde</span>
                    <span class="contract-sim-leader" aria-hidden="true"></span>
                    <strong x-text="{{ $moneyFn }}({{ $cmgDetailExpr }}.eligible_cost)"></strong>
                </div>
                <div class="contract-cmg-detail-row">
                    <span>Coût horaire de référence</span>
                    <span class="contract-sim-leader" aria-hidden="true"></span>
                    <strong x-text="{{ $moneyFn }}({{ $cmgDetailExpr }}.reference_hourly_cost) + '/h'"></strong>
                </div>
                <div class="contract-cmg-detail-row">
                    <span>Revenu mensuel de la famille</span>
                    <span class="contract-sim-leader" aria-hidden="true"></span>
                    <strong x-text="{{ $moneyFn }}({{ $cmgDetailExpr }}.resources_used)"></strong>
                </div>
                <div class="contract-cmg-detail-row">
                    <span>Taux d’effort applicable</span>
                    <span class="contract-sim-leader" aria-hidden="true"></span>
                    <strong x-text="{{ $effortRatePercentExpr }} + ' %'"></strong>
                </div>

                <p class="contract-cmg-detail-formula">CMG = coût mensuel de la garde × (1 − (revenu mensuel de la famille × taux d’effort applicable ÷ coût horaire de référence))</p>
                <p class="contract-cmg-detail-formula contract-cmg-detail-formula--filled" x-text="{{ $formulaComputedExpr }}"></p>

                <div class="contract-cmg-detail-divider" role="separator"></div>

                <span class="contract-cmg-detail-subtitle">Seuils et plafonds</span>
                <div class="contract-cmg-detail-row">
                    <span>Coût horaire de garde net</span>
                    <span class="contract-sim-leader" aria-hidden="true"></span>
                    <strong x-text="{{ $moneyFn }}({{ $cmgDetailExpr }}.minimum_hourly_cost) + ' / ' + {{ $moneyFn }}({{ $cmgDetailExpr }}.maximum_hourly_cost)"></strong>
                </div>
                <div class="contract-cmg-detail-row">
                    <span>Revenus mensuels</span>
                    <span class="contract-sim-leader" aria-hidden="true"></span>
                    <strong x-text="{{ $moneyFn }}({{ $cmgDetailExpr }}.minimum_monthly_resources) + ' / ' + {{ $moneyFn }}({{ $cmgDetailExpr }}.maximum_monthly_resources)"></strong>
                </div>
            </div>
        </template>
        <template x-if="!{{ $cmgDetailExpr }}">
            <p class="contract-cmg-detail-empty">Le détail du calcul s’affichera une fois toutes les informations disponibles.</p>
        </template>
    </div>
    @if ($showTaxCredit)
        <div class="contract-sim-line contract-sim-line--inline contract-sim-line--deduction">
            <span>Crédit d’impôt 50&nbsp;%</span>
            <span class="contract-sim-leader" aria-hidden="true"></span>
            <strong x-text="'− ' + {{ $taxCreditExpr }}"></strong>
            <small class="contract-sim-line-annual" x-text="{{ $taxCreditAnnualExpr }}"></small>
        </div>
    @endif
    <div class="contract-sim-bar" role="img" aria-label="{{ $showTaxCredit ? 'Répartition entre CMG, crédit d’impôt et reste à charge' : 'Répartition entre CMG et reste à charge' }}">
        <span class="contract-sim-bar-cmg" x-bind:style="'width: ' + {{ $cmgPercentExpr }} + '%'"></span>
        @if ($showTaxCredit)
            <span class="contract-sim-bar-credit" x-bind:style="'width: ' + {{ $taxCreditPercentExpr }} + '%'"></span>
        @endif
        <span class="contract-sim-bar-remainder" x-bind:style="'width: ' + {{ $remainderPercentExpr }} + '%'"></span>
    </div>
    <div class="contract-sim-legend">
        <small><i class="contract-sim-legend-cmg"></i><span x-text="'CMG ' + {{ $formattedPercentFn }}({{ $cmgPercentExpr }}) + '%'"></span></small>
        @if ($showTaxCredit)
            <small><i class="contract-sim-legend-credit"></i><span x-text="'Crédit d’impôt ' + {{ $formattedPercentFn }}({{ $taxCreditPercentExpr }}) + '%'"></span></small>
        @endif
        <small><i class="contract-sim-legend-remainder"></i><span x-text="'Reste ' + {{ $formattedPercentFn }}({{ $remainderPercentExpr }}) + '%'"></span></small>
    </div>
</div>

<div class="contract-sim-cost-real">
    <span class="contract-sim-cost-real-label">Estimation du coût après aides</span>
    <div class="contract-sim-cost-real-row">
        <div>
            <strong x-text="{{ $realCostExpr }}"></strong>
            <small x-text="{{ $periodSuffixExpr }}"></small>
        </div>
    </div>
</div>