{{--
    Modales des documents de fin de contrat (certificat de travail, reçu pour solde de tout compte, attestation
    employeur). Elles s'ouvrent depuis le menu « Télécharger » du contrat par l'événement open-termination-document.
    Variables : $contract, $isParentView, $documentsAssistantName, $documentsTotalCents, $employerName, $employerEmail.
--}}
<div x-data="terminationDocuments({
        certificatTravailUrl: @js(route(($isParentView ?? false) ? 'parent.contracts.end.documents.certificat-travail' : 'contracts.end.documents.certificat-travail', $contract)),
        soldeToutCompteUrl: @js(route(($isParentView ?? false) ? 'parent.contracts.end.documents.solde-tout-compte' : 'contracts.end.documents.solde-tout-compte', $contract)),
        contractEndDate: @js(optional($activeTermination->contract_end_date)->toDateString()),
        startedOnLabel: @js(optional($contract->started_on)->translatedFormat('d/m/Y')),
        assistantName: @js($documentsAssistantName),
        employerName: @js($employerName ?? null),
        employerEmail: @js($employerEmail ?? null),
        totalCents: @js($documentsTotalCents),
    })" x-on:open-termination-document.window="openModal($event.detail)">
    <div class="termination-modal-overlay" x-show="modal === 'certif'" x-cloak x-on:keydown.escape.window="closeModal()">
        <div class="termination-modal">
            <div class="termination-modal-head">
                <span class="termination-modal-icon"><i class="ph ph-certificate" aria-hidden="true"></i></span>
                <span>
                    <strong>Certificat de travail</strong>
                    <small>Validez la date de fin effective avant de générer le PDF.</small>
                </span>
                <button type="button" class="termination-modal-close" x-on:click="closeModal()"><i class="ph ph-x" aria-hidden="true"></i></button>
            </div>
            <label class="termination-date-card">
                <span class="termination-date-card-label">Date de fin effective du contrat</span>
                <input type="date" x-model="certifEndDate">
            </label>
            <p class="termination-note" x-show="certifDeltaDays !== 0">
                Calculée : <span x-text="formatDate(contractEndDate)"></span> · écart de <span x-text="Math.abs(certifDeltaDays)"></span> jour(s) <span x-text="certifDeltaDays > 0 ? 'plus tard' : 'plus tôt'"></span>.
            </p>
            <div class="termination-note-box">
                <i class="ph ph-info" aria-hidden="true"></i>
                <div class="termination-recap">
                    <div><span>Salariée</span><strong x-text="assistantName"></strong></div>
                    <div><span>Emploi occupé</span><strong>Assistant(e) maternel(le)</strong></div>
                    <div><span>Entrée</span><strong x-text="startedOnLabel"></strong></div>
                    <div><span>Sortie</span><strong x-text="formatDate(certifEndDate)"></strong></div>
                </div>
            </div>
            <div class="termination-modal-actions">
                <button type="button" class="termination-cta-secondary" x-on:click="closeModal()">Annuler</button>
                <a class="termination-cta-primary" :href="certifDownloadUrl()" target="_blank" rel="noopener" x-on:click="closeModal()">
                    <i class="ph ph-file-arrow-down" aria-hidden="true"></i>Générer le PDF
                </a>
            </div>
        </div>
    </div>

    <div class="termination-modal-overlay" x-show="modal === 'solde'" x-cloak x-on:keydown.escape.window="closeModal()">
        <div class="termination-modal">
            <div class="termination-modal-head">
                <span class="termination-modal-icon"><i class="ph ph-receipt" aria-hidden="true"></i></span>
                <span>
                    <strong>Reçu pour solde de tout compte</strong>
                    <small>Validez le montant net versé et sa transcription en lettres.</small>
                </span>
                <button type="button" class="termination-modal-close" x-on:click="closeModal()"><i class="ph ph-x" aria-hidden="true"></i></button>
            </div>
            <label class="termination-date-card">
                <span class="termination-date-card-label">Montant net versé</span>
                <input type="text" inputmode="decimal" x-model="soldeNetAmount">
            </label>
            <p class="termination-note" x-show="soldeDeltaEuros !== 0">
                Écart de <span x-text="Math.abs(soldeDeltaEuros).toFixed(2)"></span> € avec le montant calculé.
            </p>
            <label class="termination-date-card">
                <span class="termination-date-card-label termination-date-card-label--row">
                    Montant en lettres
                    <button type="button" class="termination-toggle-link" x-on:click="fillWordsAuto()"><i class="ph ph-magic-wand" aria-hidden="true"></i>Remplir automatiquement</button>
                </span>
                <textarea rows="2" x-model="soldeWords"></textarea>
            </label>
            <div class="termination-warn">
                <span x-text="assistantName"></span> dispose de 6 mois pour contester ce reçu après l'avoir signé. Remettez-le en deux exemplaires, chacun daté et signé.
            </div>
            <div class="termination-modal-actions">
                <button type="button" class="termination-cta-secondary" x-on:click="closeModal()">Annuler</button>
                <a class="termination-cta-primary" :href="soldeDownloadUrl()" target="_blank" rel="noopener" x-on:click="closeModal()">
                    <i class="ph ph-file-arrow-down" aria-hidden="true"></i>Générer le PDF
                </a>
            </div>
        </div>
    </div>

    <div class="termination-modal-overlay" x-show="modal === 'attestation'" x-cloak x-on:keydown.escape.window="closeModal()">
        <div class="termination-modal">
            <div class="termination-modal-head">
                <span class="termination-modal-icon"><i class="ph ph-briefcase" aria-hidden="true"></i></span>
                <span>
                    <strong>Attestation employeur France Travail</strong>
                    <small>Nécessaire pour l'allocation chômage.</small>
                </span>
                <button type="button" class="termination-modal-close" x-on:click="closeModal()"><i class="ph ph-x" aria-hidden="true"></i></button>
            </div>
            @if ($isParentView ?? false)
                <div class="termination-attestation">
                    <p><i class="ph-duotone ph-info" aria-hidden="true"></i> naneasy ne peut pas générer l'<strong>Attestation employeur France Travail</strong> à votre place. Seul le particulier employeur peut la remplir, directement depuis :</p>
                    <ul>
                        <li><a href="https://www.pajemploi.urssaf.fr" target="_blank" rel="noopener"><i class="ph ph-link" aria-hidden="true"></i>Pajemploi</a>une fois la dernière déclaration faite, l'outil de fin de contrat propose de générer les documents automatiquement.</li>
                        <li><a href="https://www.francetravail.fr" target="_blank" rel="noopener"><i class="ph ph-link" aria-hidden="true"></i>France Travail</a>vous pouvez compléter en ligne puis la remettre à {{ $contract->assistant()?->first_name ?? "votre salarié(e)" }}. Votre identifiant Pajemploi vous sera demandé.</li>
                    </ul>
                    <p class="termination-attestation-hint">Je pense à garder un exemplaire de chaque document remis.</p>
                </div>
            @else
                <div class="termination-attestation">
                    <p><i class="ph-duotone ph-info" aria-hidden="true"></i> L'attestation employeur (nécessaire pour l'allocation chômage) est à demander à mon employeur : je ne peux pas la générer moi-même, seul·e le/la particulier·ère employeur·se le peut, via Pajemploi ou France Travail.</p>
                    <div class="termination-attestation-actions">
                        <button type="button" class="employers-secondary-button" x-on:click="copyAttestationMessage()">
                            <i class="ph-duotone ph-copy" aria-hidden="true"></i>
                            <span x-text="attestationMessageCopied ? 'Message copié !' : 'Copier un message pour mon employeur'"></span>
                        </button>
                        <a class="employers-secondary-button" :href="attestationMailtoUrl">
                            <i class="ph-duotone ph-envelope-simple" aria-hidden="true"></i>Envoyer par email
                        </a>
                    </div>
                    <p class="termination-attestation-hint">Le message inclut le lien vers Pajemploi et explique la démarche à mon employeur.</p>
                </div>
            @endif

            <div class="termination-modal-actions">
                <button type="button" class="termination-cta-secondary" x-on:click="closeModal()">Fermer</button>
            </div>
        </div>
    </div>
</div>