{% extends '@App/app.html.twig' %}

{% block title %}{{ contract.reference }}{% endblock %}

{% block page_header %}{% endblock %}

{% block content %}
    {% set view = contract_view %}
    {% set employee = contract.salarie %}
    {% set employee_name = employee ? employee|trim : 'Salarié non renseigné' %}
    {% set employee_initials = employee ? ((employee.prenom|default('')|first) ~ (employee.nom|default('')|first))|upper : 'S' %}
    {% set photo_path = employee and employee.photo ? employee.photo|trim : null %}
    {% set avatar_src = photo_path ? (photo_path starts with 'http://' or photo_path starts with 'https://' ? photo_path : asset(photo_path starts with '/' ? photo_path|slice(1) : photo_path)) : null %}
    {% set gross = contract.remunerationBrute %}
    {% set salary_label = gross ? gross|number_format(0, ',', ' ') ~ ' € / mois' : 'Non renseigné' %}
    {% set net_label = view.netMonthly ? '~' ~ view.netMonthly|number_format(0, ',', ' ') ~ ' €' : 'Non renseigné' %}
    {% set start_label = contract.dateDebut ? contract.dateDebut|date('d M Y') : 'Non renseignée' %}
    {% set end_label = contract.dateFin ? contract.dateFin|date('d M Y') : '—' %}
    {% set trial_label = contract.dateFinPeriodeEssai ? 'Jusqu’au ' ~ contract.dateFinPeriodeEssai|date('d M Y') : 'Non renseignée' %}
    {% set contract_title = 'Contrat de travail — ' ~ view.typeLabel %}

    <div class="record-profile record-profile--contract">
        <div class="record-profile__topbar">
            <nav class="data-breadcrumb" aria-label="Fil d'Ariane">
                <a href="{{ path('contract_index') }}">Contrats</a>
                <i class="ti ti-chevron-right" aria-hidden="true"></i>
                <span class="text-black-50">{{ view.typeLabel }} — {{ employee_name }}</span>
            </nav>
        </div>

        <header class="record-page-head">
            <div class="record-page-head__title">
                <a class="record-icon-button" href="{{ path('contract_index') }}" aria-label="Retour aux contrats">
                    <i class="ti ti-arrow-left" aria-hidden="true"></i>
                </a>
                <div>
                    <h1>{{ contract_title }}</h1>
                    <p>Créé le {{ contract.generatedAt ? contract.generatedAt|date('d M Y') : start_label }} · Réf. {{ contract.reference }}</p>
                </div>
            </div>

            <div class="record-profile__actions">
                {% if contract.pdfPath and is_granted('CONTRACT_DOWNLOAD', contract) %}
                    <a class="record-action" href="{{ path('contract_download', {id: contract.id}) }}">
                        <i class="ti ti-download" aria-hidden="true"></i>Télécharger
                    </a>
                {% else %}
                    <form method="post" action="{{ path('contract_generate_pdf', {id: contract.id}) }}">
                        <input type="hidden" name="_token" value="{{ csrf_token('contract_generate_pdf_' ~ contract.id) }}">
                        <button class="record-action" type="submit">
                            <i class="ti ti-file-export" aria-hidden="true"></i>Générer
                        </button>
                    </form>
                {% endif %}
                {% if is_granted('CONTRACT_EDIT', contract) %}
                    <a class="record-action record-action--warning" href="{{ path('contract_edit', {id: contract.id}) }}">
                        <i class="ti ti-pencil" aria-hidden="true"></i>Modifier
                    </a>
                {% endif %}
                {% if isSignatureEnabled and contract.pdfPath and is_granted('CONTRACT_SEND_SIGNATURE', contract) %}
                    <form method="post" action="{{ path('contract_send_signature', {id: contract.id}) }}">
                        <input type="hidden" name="_token" value="{{ csrf_token('contract_send_signature_' ~ contract.id) }}">
                        <button class="record-action record-action--primary" type="submit">
                            <i class="ti ti-send" aria-hidden="true"></i>Envoyer
                        </button>
                    </form>
                {% endif %}
            </div>
        </header>

        <section class="record-contract-strip">
            <div class="record-contract-strip__employee">
                <div class="record-avatar record-avatar--sm">
                    {% if avatar_src %}
                        <img src="{{ avatar_src }}" alt="{{ employee_name }}">
                    {% else %}
                        <span>{{ employee_initials ?: 'S' }}</span>
                    {% endif %}
                </div>
                <div><span>Salarié</span><strong>{{ employee_name }}</strong></div>
            </div>
            <div><span>Type</span><strong>{{ view.typeLabel }}</strong></div>
            <div><span>Poste</span><strong>{{ contract.intitulePoste ?: 'Non renseigné' }}</strong></div>
            <div><span>Date de début</span><strong>{{ start_label }}</strong></div>
            <div><span>Salaire brut</span><strong>{{ salary_label }}</strong></div>
            <span class="record-badge record-badge--{{ view.statusTone }}">
                <i class="ti ti-circle-filled" aria-hidden="true"></i>{{ view.statusLabel }}
            </span>
        </section>

        <div class="record-profile__tabs" data-controller="tabs" data-tabs-active-value="summary">
            <div class="record-tabs record-tabs--line" role="tablist" aria-label="Dossier contrat">
                <button type="button" class="record-tabs__item is-active" data-tabs-target="tab" data-tabs-id="summary" data-action="tabs#select" role="tab" aria-selected="true">Récapitulatif</button>
                <button type="button" class="record-tabs__item" data-tabs-target="tab" data-tabs-id="documents" data-action="tabs#select" role="tab" aria-selected="false">Documents</button>
                <button type="button" class="record-tabs__item" data-tabs-target="tab" data-tabs-id="history" data-action="tabs#select" role="tab" aria-selected="false">Historique</button>
                <button type="button" class="record-tabs__item" data-tabs-target="tab" data-tabs-id="amendments" data-action="tabs#select" role="tab" aria-selected="false">Avenants</button>
            </div>

            <section class="record-tab-panel is-active" data-tabs-target="panel" data-tabs-id="summary">
                <div class="record-layout record-layout--sidebar">
                    <div class="record-stack">
                        <article class="record-card">
                            <div class="record-card__header">
                                <h2 class="record-card__subtitle"><i class="ti ti-file-description" aria-hidden="true"></i>Informations générales</h2>
                            </div>
                            <div class="record-data-grid record-data-grid--2 record-data-grid--lines">
                                <div><span>Salarié</span><strong>{{ employee_name }}</strong></div>
                                <div><span>Type de contrat</span><strong>{{ view.typeLabel }} — {{ contract.typeContrat|upper == 'CDI' ? 'Contrat à Durée Indéterminée' : contract.typeContrat|upper }}</strong></div>
                                <div><span>Poste occupé</span><strong>{{ contract.intitulePoste ?: 'Non renseigné' }}</strong></div>
                                <div><span>Département</span><strong>{{ contract.service ?: 'Non renseigné' }}</strong></div>
                                <div><span>Établissement</span><strong>{{ contract.etablissement ? contract.etablissement.nom : 'Non renseigné' }}</strong></div>
                                <div><span>Catégorie</span><strong>{{ contract.categorie ?: 'Non renseignée' }}</strong></div>
                                <div><span>Date de début</span><strong>{{ start_label }}</strong></div>
                                <div><span>Date de fin</span><strong>{{ end_label }}</strong></div>
                                <div><span>Période d’essai</span><strong>{{ trial_label }}</strong></div>
                                <div><span>Durée hebdomadaire</span><strong>{{ contract.tempsTravailHebdomadaire ? contract.tempsTravailHebdomadaire ~ ' heures / semaine' : 'Non renseignée' }}</strong></div>
                                <div><span>Convention collective</span><strong>{{ contract.conventionCollective ?: 'Non renseignée' }}</strong></div>
                                <div><span>Classification</span><strong>{{ contract.classification ?: 'Non renseignée' }}</strong></div>
                            </div>
                        </article>

                        <article class="record-card">
                            <div class="record-card__header">
                                <h2 class="record-card__subtitle"><i class="ti ti-currency-euro" aria-hidden="true"></i>Rémunération</h2>
                            </div>
                            <div class="record-data-grid record-data-grid--2 record-data-grid--lines">
                                <div><span>Salaire brut mensuel</span><strong>{{ gross ? gross|number_format(2, ',', ' ') ~ ' €' : 'Non renseigné' }}</strong></div>
                                <div><span>Salaire net estimé</span><strong>{{ net_label }}</strong></div>
                                <div><span>Mode de paiement</span><strong>Virement bancaire</strong></div>
                                <div><span>Fréquence</span><strong>{{ contract.remunerationPeriodicite ?: 'Mensuelle — fin de mois' }}</strong></div>
                                <div><span>Devise</span><strong>{{ contract.devise ?: 'EUR' }}</strong></div>
                                <div><span>Coefficient</span><strong>{{ contract.coefficient ?: 'Non renseigné' }}</strong></div>
                            </div>
                            <div class="record-chip-row mt-3">
                                <span class="record-chip record-chip--purple">Mutuelle</span>
                                <span class="record-chip record-chip--info">Transport 50%</span>
                                <span class="record-chip record-chip--success">Télétravail partiel</span>
                            </div>
                        </article>

                        <article class="record-card">
                            <div class="record-card__header">
                                <h2 class="record-card__subtitle"><i class="ti ti-paperclip" aria-hidden="true"></i>Documents joints</h2>
                                <span class="record-badge">{{ view.documentStats.total }} fichier{{ view.documentStats.total > 1 ? 's' : '' }}</span>
                            </div>
                            <div class="record-document-list">
                                {% for doc in documents %}
                                    <div class="record-document-row">
                                        <i class="record-file-icon {{ doc.mimeType and 'pdf' in doc.mimeType ? 'record-file-icon--pdf' : 'record-file-icon--doc' }} ti {{ doc.mimeType and 'pdf' in doc.mimeType ? 'ti-file-type-pdf' : 'ti-file' }}" aria-hidden="true"></i>
                                        <div>
                                            <strong>{{ doc.nom }}</strong>
                                            <span>{{ doc.type|capitalize }} · {{ doc.fileSize ? (doc.fileSize / 1024)|round ~ ' Ko' : 'Taille non renseignée' }} · Ajouté le {{ doc.createdAt|date('d M Y') }}</span>
                                        </div>
                                        <span class="record-badge {{ doc.locked ? 'record-badge--success' : 'record-badge--warning' }}">{{ doc.locked ? 'Validé' : 'En attente' }}</span>
                                    </div>
                                {% else %}
                                    <p class="record-empty">Aucun document joint au contrat.</p>
                                {% endfor %}
                            </div>
                        </article>
                    </div>

                    <aside class="record-stack">
                        <article class="record-card">
                            <h2 class="record-card__subtitle">Statut du contrat</h2>
                            <div class="record-list">
                                <div><span>État actuel</span><strong><span class="record-badge record-badge--{{ view.statusTone }}">{{ view.statusLabel }}</span></strong></div>
                                <div><span>Signature salarié</span><strong><span class="record-badge {{ contract.signedAt ? 'record-badge--success' : 'record-badge--warning' }}">{{ contract.signedAt ? 'Signé' : 'En attente' }}</span></strong></div>
                                <div><span>Signature employeur</span><strong><span class="record-badge {{ contract.signedAt ? 'record-badge--success' : 'record-badge--warning' }}">{{ contract.signedAt ? 'Signé' : 'En attente' }}</span></strong></div>
                            </div>
                            <div class="record-progress mt-3">
                                <div><span>Complétude du dossier</span><strong>{{ view.completion }}%</strong></div>
                                <span><i style="width: {{ view.completion }}%"></i></span>
                            </div>
                        </article>

                        <article class="record-card">
                            <h2 class="record-card__subtitle">Intervenants</h2>
                            <div class="record-team-list">
                                <div>
                                    <div class="record-avatar record-avatar--sm">{% if avatar_src %}<img src="{{ avatar_src }}" alt="{{ employee_name }}">{% else %}<span>{{ employee_initials ?: 'S' }}</span>{% endif %}</div>
                                    <div><strong>{{ employee_name }}</strong><span>Salarié · {{ contract.intitulePoste ?: 'Contrat' }}</span></div>
                                </div>
                                {% if contract.createdBy %}
                                    <div>
                                        <div class="record-avatar record-avatar--sm"><span>{{ ((contract.createdBy.prenom|first) ~ (contract.createdBy.nom|first))|upper }}</span></div>
                                        <div><strong>{{ contract.createdBy.prenom }} {{ contract.createdBy.nom }}</strong><span>Créateur du dossier</span></div>
                                    </div>
                                {% endif %}
                                {% if contract.updatedBy and contract.updatedBy != contract.createdBy %}
                                    <div>
                                        <div class="record-avatar record-avatar--sm"><span>{{ ((contract.updatedBy.prenom|first) ~ (contract.updatedBy.nom|first))|upper }}</span></div>
                                        <div><strong>{{ contract.updatedBy.prenom }} {{ contract.updatedBy.nom }}</strong><span>Dernière modification</span></div>
                                    </div>
                                {% endif %}
                            </div>
                        </article>

                        <article class="record-card">
                            <h2 class="record-card__subtitle">Checklist</h2>
                            <ul class="record-check-list">
                                <li class="{{ view.checklist.general ? 'is-done' : '' }}">Informations générales</li>
                                <li class="{{ view.checklist.remuneration ? 'is-done' : '' }}">Rémunération définie</li>
                                <li class="{{ view.checklist.document ? 'is-done' : '' }}">Document principal joint</li>
                                <li class="{{ view.checklist.signature ? 'is-done' : '' }}">Signature finalisée</li>
                            </ul>
                        </article>
                    </aside>
                </div>
            </section>

            <section class="record-tab-panel" data-tabs-target="panel" data-tabs-id="documents" hidden>
                <div class="record-layout record-layout--sidebar">
                    <div class="record-stack">
                        <div class="record-toolbar">
                            <div class="record-search"><i class="ti ti-search" aria-hidden="true"></i><input type="search" placeholder="Rechercher un document..." aria-label="Rechercher un document"></div>
                            <select class="form-select"><option>Tous les types</option></select>
                            <select class="form-select"><option>Tous les statuts</option></select>
                        </div>

                        <article class="record-card">
                            <div class="record-card__header">
                                <h2 class="record-card__subtitle"><i class="ti ti-file-description" aria-hidden="true"></i>Contrat de travail</h2>
                                {% if contract.pdfPath and is_granted('CONTRACT_DOWNLOAD', contract) %}
                                    <a href="{{ path('contract_download', {id: contract.id}) }}">Tout télécharger</a>
                                {% endif %}
                            </div>
                            <div class="record-document-list">
                                {% for doc in documents %}
                                    {% if doc.type == 'contrat' %}
                                        <div class="record-document-row">
                                            <i class="record-file-icon record-file-icon--pdf ti ti-file-type-pdf" aria-hidden="true"></i>
                                            <div><strong>{{ doc.nom }}</strong><span>PDF · {{ doc.fileSize ? (doc.fileSize / 1024)|round ~ ' Ko' : 'Taille non renseignée' }} · Ajouté le {{ doc.createdAt|date('d M Y') }}</span></div>
                                            <span class="record-badge {{ doc.locked ? 'record-badge--success' : 'record-badge--warning' }}">{{ doc.locked ? 'Signé' : 'En attente' }}</span>
                                        </div>
                                    {% endif %}
                                {% else %}
                                    <p class="record-empty">Aucun contrat généré ou importé.</p>
                                {% endfor %}
                            </div>
                        </article>

                        <article class="record-card">
                            <div class="record-card__header">
                                <h2 class="record-card__subtitle"><i class="ti ti-id" aria-hidden="true"></i>Pièces d'identité</h2>
                            </div>
                            <div class="record-document-list">
                                {% for doc in documents %}
                                    {% if doc.type != 'contrat' %}
                                        <div class="record-document-row">
                                            <i class="record-file-icon record-file-icon--doc ti ti-file" aria-hidden="true"></i>
                                            <div><strong>{{ doc.nom }}</strong><span>{{ doc.type|capitalize }} · Ajouté le {{ doc.createdAt|date('d M Y') }}</span></div>
                                            <span class="record-badge {{ doc.locked ? 'record-badge--success' : 'record-badge--warning' }}">{{ doc.locked ? 'Validé' : 'En attente' }}</span>
                                        </div>
                                    {% endif %}
                                {% else %}
                                    <p class="record-empty">Aucune pièce annexe.</p>
                                {% endfor %}
                            </div>
                        </article>

                        <article class="record-card record-empty-state">
                            <i class="ti ti-folder" aria-hidden="true"></i>
                            <strong>Autres documents</strong>
                            <span>Ajoutez des justificatifs, attestations ou tout autre fichier lié à ce contrat.</span>
                            <button class="record-dashed-action" type="button"><i class="ti ti-plus" aria-hidden="true"></i>Ajouter un document</button>
                        </article>
                    </div>

                    <aside class="record-stack">
                        <article class="record-card record-empty-state">
                            <i class="ti ti-file-question" aria-hidden="true"></i>
                            <strong>Aucun document sélectionné</strong>
                            <span>Cliquez sur un document pour voir ses détails.</span>
                        </article>
                        <article class="record-card">
                            <h2 class="record-card__subtitle">Résumé</h2>
                            <div class="record-list">
                                <div><span>Signés / validés</span><strong>{{ view.documentStats.signed }}</strong></div>
                                <div><span>En attente</span><strong>{{ view.documentStats.pending }}</strong></div>
                                <div><span>Total</span><strong>{{ view.documentStats.total }}</strong></div>
                            </div>
                            <div class="record-progress mt-3">
                                <div><span>Complétude</span><strong>{{ view.documentStats.completion }}%</strong></div>
                                <span><i style="width: {{ view.documentStats.completion }}%"></i></span>
                            </div>
                        </article>
                    </aside>
                </div>
            </section>

            <section class="record-tab-panel" data-tabs-target="panel" data-tabs-id="history" hidden>
                <div class="record-stack record-stack--narrow">
                    <div class="record-toolbar">
                        <div class="record-search"><i class="ti ti-search" aria-hidden="true"></i><input type="search" placeholder="Rechercher dans l'historique..." aria-label="Rechercher dans l'historique"></div>
                        <select class="form-select"><option>Tous les types</option></select>
                        <select class="form-select"><option>Toute la période</option></select>
                    </div>
                    <article class="record-card">
                        <h2 class="record-card__subtitle"><i class="ti ti-history" aria-hidden="true"></i>Historique</h2>
                        <div class="record-timeline">
                            {% for item in history %}
                                <div class="record-timeline__item">
                                    <i class="ti {{ item.action starts with 'signature' ? 'ti-signature' : (item.action starts with 'contract.document' ? 'ti-paperclip' : 'ti-pencil') }}" aria-hidden="true"></i>
                                    <div>
                                        <strong>{{ item.message }}</strong>
                                        <span>{{ item.action|replace({'_': ' ', '.': ' '})|capitalize }}</span>
                                    </div>
                                    <time>{{ item.createdAt|date('d M Y · H:i') }}</time>
                                </div>
                            {% else %}
                                <p class="record-empty">Aucun événement enregistré pour ce contrat.</p>
                            {% endfor %}
                        </div>
                    </article>
                </div>
            </section>

            <section class="record-tab-panel" data-tabs-target="panel" data-tabs-id="amendments" hidden>
                <div class="record-layout record-layout--sidebar">
                    <div class="record-stack">
                        <div class="record-toolbar">
                            <div class="record-search"><i class="ti ti-search" aria-hidden="true"></i><input type="search" placeholder="Rechercher un avenant..." aria-label="Rechercher un avenant"></div>
                            <select class="form-select"><option>Tous les statuts</option></select>
                            {% if is_granted('CONTRACT_AMENDMENT_CREATE', contract) %}
                                <a class="record-action record-action--primary" href="{{ path('contract_amendment_new', {id: contract.id}) }}">
                                    <i class="ti ti-plus" aria-hidden="true"></i>Nouvel avenant
                                </a>
                            {% endif %}
                        </div>

                        {% for amendment in amendments %}
                            <article class="record-card record-amendment {{ amendment.signed ? 'record-amendment--signed' : 'record-amendment--pending' }}">
                                <div class="record-card__header">
                                    <div class="record-amendment__title">
                                        <i class="ti {{ amendment.signed ? 'ti-check' : 'ti-clock' }}" aria-hidden="true"></i>
                                        <div>
                                            <h2>Avenant n°{{ loop.index }} — {{ amendment.typeAvenant|replace({'_': ' '})|capitalize }}</h2>
                                            <span>Réf. {{ amendment.reference }} · {{ amendment.signedAt ? 'Signé le ' ~ amendment.signedAt|date('d M Y') : 'Créé le ' ~ amendment.createdAt|date('d M Y') }}</span>
                                        </div>
                                    </div>
                                    <span class="record-badge {{ amendment.signed ? 'record-badge--success' : 'record-badge--warning' }}">{{ amendment.signed ? 'Signé' : 'En attente' }}</span>
                                </div>
                                <p>{{ amendment.motif ?: 'Aucun motif renseigné pour cet avenant.' }}</p>
                                <div class="record-chip-row">
                                    <span><i class="ti ti-calendar" aria-hidden="true"></i>Effet : {{ amendment.dateEffet ? amendment.dateEffet|date('d M Y') : 'Non renseigné' }}</span>
                                    {% if amendment.signedAt %}
                                        <span><i class="ti ti-signature" aria-hidden="true"></i>Signature finalisée</span>
                                    {% else %}
                                        <span class="text-warning"><i class="ti ti-alert-triangle" aria-hidden="true"></i>En attente de signature</span>
                                    {% endif %}
                                </div>
                                <div class="record-row-actions">
                                    {% if is_granted('CONTRACT_AMENDMENT_EDIT', contract) %}
                                        <a class="record-action" href="{{ path('contract_amendment_edit', {id: amendment.id}) }}">
                                            <i class="ti ti-pencil" aria-hidden="true"></i>Modifier
                                        </a>
                                    {% endif %}
                                </div>
                            </article>
                        {% else %}
                            <article class="record-card record-empty-state">
                                <i class="ti ti-file-plus" aria-hidden="true"></i>
                                <strong>Aucun avenant</strong>
                                <span>Les modifications contractuelles apparaîtront ici.</span>
                            </article>
                        {% endfor %}
                    </div>

                    <aside class="record-stack">
                        <article class="record-card">
                            <h2 class="record-card__subtitle">Résumé</h2>
                            <div class="record-list">
                                <div><span>Signés</span><strong>{{ view.amendmentStats.signed }}</strong></div>
                                <div><span>En attente</span><strong>{{ view.amendmentStats.pending }}</strong></div>
                                <div><span>Total avenants</span><strong>{{ view.amendmentStats.total }}</strong></div>
                            </div>
                            <div class="record-progress mt-3">
                                <div><span>Taux de signature</span><strong>{{ view.amendmentStats.completion }}%</strong></div>
                                <span><i style="width: {{ view.amendmentStats.completion }}%"></i></span>
                            </div>
                        </article>
                        <article class="record-card record-empty-state">
                            <i class="ti ti-file-pencil" aria-hidden="true"></i>
                            <strong>Aucun avenant sélectionné</strong>
                            <span>Cliquez sur un avenant pour voir ses détails.</span>
                        </article>
                    </aside>
                </div>
            </section>
        </div>
    </div>
{% endblock %}