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

{% block title %}Entretiens RH{% endblock %}
{% block page_header %}{% endblock %}

{% block content %}
{% set finalized_statuses = ['completed', 'signed', 'archived'] %}
{% set progress_statuses = ['employee_prepared', 'manager_preparation', 'ready', 'in_progress', 'pending_manager_validation'] %}

<div class="data-page interview-page interview-dashboard" data-controller="interview-dashboard">
    <div class="ops-dashboard__header">
        <div class="ops-dashboard__title">
            <nav class="mb-2" aria-label="Fil d'Ariane">
                <span class="text-black">Entretiens RH</span>
                <i class="ti ti-chevron-right" aria-hidden="true"></i>
                <span class="text-muted">Tableau de bord</span>
            </nav>
            <h1>Tableau de bord entretiens</h1>
        </div>
        <div class="data-page__actions">
            <a class="data-button data-button--secondary" href="{{ path('interview_template_index') }}"><i class="ti ti-settings"></i>Gérer les modèles</a>
            <a class="data-button data-button--secondary" href="{{ path('interview_new') }}"><i class="ti ti-plus"></i>Créer un entretien</a>
            <a class="data-button data-button--primary" href="{{ path('interview_new', {mode: 'schedule'}) }}"><i class="ti ti-calendar-event"></i>Planifier un entretien</a>
        </div>    
    </div>
    
    <section class="metric-grid metric-grid--4 interview-dashboard__metrics" aria-label="Indicateurs entretiens">
        <article class="metric-card interview-metric interview-metric--blue">
            <span class="metric-card__label">Entretiens à venir</span>
            <span class="metric-card__icon metric-card__icon--blue"><i class="ti ti-calendar-up"></i></span>
            <strong class="metric-card__value">{{ kpis.upcoming }}</strong>
            <span class="metric-card__trend"><i class="ti ti-arrow-up"></i> Suivi planning</span>
        </article>
        <article class="metric-card interview-metric interview-metric--red">
            <span class="metric-card__label">Entretiens en retard</span>
            <span class="metric-card__icon metric-card__icon--red"><i class="ti ti-clock-exclamation"></i></span>
            <strong class="metric-card__value metric-card__value--danger">{{ kpis.overdue }}</strong>
            <span class="metric-card__trend metric-card__trend--danger"><i class="ti ti-alert-triangle"></i> Action requise</span>
        </article>
        <article class="metric-card interview-metric interview-metric--orange">
            <span class="metric-card__label">Entretiens en cours</span>
            <span class="metric-card__icon metric-card__icon--amber"><i class="ti ti-hourglass"></i></span>
            <strong class="metric-card__value metric-card__value--warning">{{ kpis.in_progress }}</strong>
            <span class="metric-card__trend metric-card__trend--warning">En attente finalisation</span>
        </article>
        <article class="metric-card interview-metric interview-metric--green">
            <span class="metric-card__label">Entretiens finalisés</span>
            <span class="metric-card__icon metric-card__icon--green"><i class="ti ti-circle-check"></i></span>
            <strong class="metric-card__value metric-card__value--success">{{ kpis.finalized }}</strong>
            <span class="metric-card__trend"><i class="ti ti-check"></i> Objectif atteint</span>
        </article>
        <article class="metric-card interview-metric interview-metric--purple">
            <span class="metric-card__label">Entretiens professionnels à planifier</span>
            <span class="metric-card__icon metric-card__icon--purple"><i class="ti ti-briefcase"></i></span>
            <strong class="metric-card__value metric-card__value--purple">{{ kpis.professional_to_schedule }}</strong>
            <span class="metric-card__trend interview-text-purple">Échéance réglementaire</span>
        </article>
        <article class="metric-card interview-metric interview-metric--indigo">
            <span class="metric-card__label">Entretiens annuels à planifier</span>
            <span class="metric-card__icon interview-icon--indigo"><i class="ti ti-star"></i></span>
            <strong class="metric-card__value interview-text-indigo">{{ kpis.performance_to_schedule }}</strong>
            <span class="metric-card__trend interview-text-indigo">Cycle annuel</span>
        </article>
        <article class="metric-card interview-metric">
            <span class="metric-card__label">Questionnaires PDF générés</span>
            <span class="metric-card__icon metric-card__icon--muted"><i class="ti ti-file-check"></i></span>
            <strong class="metric-card__value">{{ kpis.questionnaires }}</strong>
            <span class="metric-card__caption">Préparation salarié</span>
        </article>
        <article class="metric-card interview-metric">
            <span class="metric-card__label">Comptes rendus générés</span>
            <span class="metric-card__icon metric-card__icon--muted"><i class="ti ti-file-description"></i></span>
            <strong class="metric-card__value">{{ kpis.reports }}</strong>
            <span class="metric-card__caption">Archivage</span>
        </article>
    </section>

    <section class="data-card interview-dashboard__panel">
        <header class="interview-dashboard__panel-header">
            <h2><i class="ti ti-alert-triangle text-danger"></i>Alertes entretiens</h2>
        </header>
        <div class="interview-alert-list">
            {% for alert in alerts %}
                <article class="interview-alert-row">
                    <span class="interview-alert-row__dot" aria-hidden="true"></span>
                    <div>
                        <strong>{{ alert.title }}</strong>
                        <small>{{ alert.subtitle }}</small>
                    </div>
                    <a href="{{ path('interview_edit', {id: alert.interview.id}) }}">Planifier</a>
                </article>
            {% else %}
                <div class="data-empty-panel"><i class="ti ti-circle-check"></i>Aucune alerte active sur les entretiens.</div>
            {% endfor %}
        </div>
    </section>

    <section class="data-card interview-dashboard__filters">
        <form method="get" class="interview-filter-grid">
            <label class="data-filter-field"><span>Type d’entretien</span><select name="type"><option value="">Tous les types</option>{% for type in types %}<option value="{{ type.id }}" {{ filters.type == type.id ? 'selected' : '' }}>{{ type.nom }}</option>{% endfor %}</select></label>
            <label class="data-filter-field"><span>Statut</span><select name="status"><option value="">Tous les statuts</option>{% for value, label in status_labels %}<option value="{{ value }}" {{ filters.status == value ? 'selected' : '' }}>{{ label }}</option>{% endfor %}</select></label>
            <label class="data-filter-field"><span>Service</span><select name="service"><option value="">Tous les services</option>{% for service in services %}<option value="{{ service }}" {{ filters.service == service ? 'selected' : '' }}>{{ service }}</option>{% endfor %}</select></label>
            <label class="data-filter-field"><span>Manager</span><select name="manager"><option value="">Tous les managers</option>{% for manager in managers %}<option value="{{ manager.id }}" {{ filters.manager == manager.id ? 'selected' : '' }}>{{ manager }}</option>{% endfor %}</select></label>
            <label class="data-filter-field"><span>Période</span><input type="date" name="scheduledDate" value="{{ filters.scheduledDate }}"></label>
            <label class="data-filter-field"><span>Recherche salarié</span><input type="search" name="search" value="{{ filters.search }}" placeholder="Nom du salarié..."></label>
            <div class="interview-filter-checks">
                <label><input type="checkbox" name="overdue" value="1" {{ filters.overdue == '1' ? 'checked' : '' }}>En retard uniquement</label>
                <label><input type="checkbox" name="pdfGenerated" value="1" {{ filters.pdfGenerated == '1' ? 'checked' : '' }}>Compte rendu généré</label>
                <label><input type="checkbox" name="signatureMissing" value="1" {{ filters.signatureMissing == '1' ? 'checked' : '' }}>Signature manquante</label>
                {% if app.request.query.count > 0 %}<a class="data-link data-link--muted" href="{{ path('interview_index') }}">Réinitialiser</a>{% endif %}
                <button class="data-button data-button--primary" type="submit">Filtrer</button>
            </div>
        </form>
    </section>

    <section class="data-card interview-dashboard__list">
        <div class="data-toolbar">
            <div class="data-toolbar__title"><h2>Liste des entretiens</h2><span class="interview-result-count">{{ interviews|length }}</span></div>
            <div class="data-view-toggle" aria-label="Mode d’affichage">
                <button type="button" title="Grille" data-interview-dashboard-target="gridButton" data-action="interview-dashboard#showGrid"><i class="ti ti-layout-grid"></i></button>
                <button type="button" class="is-active" title="Liste" data-interview-dashboard-target="listButton" data-action="interview-dashboard#showList"><i class="ti ti-layout-list"></i></button>
            </div>
        </div>

        <div class="data-table-wrap" data-interview-dashboard-target="list">
            <table class="data-table interview-dashboard__table">
                <thead><tr><th>Salarié</th><th>Service</th><th>Type</th><th>Date prévue</th><th>Statut</th><th>PDF</th><th>Signatures</th><th class="data-table__actions">Actions</th></tr></thead>
                <tbody>
                {% for interview in interviews %}
                    {% set employee = interview.salarie %}
                    {% set photo_path = 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 initials = ((employee.prenom|default('')|first) ~ (employee.nom|default('')|first))|upper ?: 'S' %}
                    {% set service = employee.employeeService ? employee.employeeService.nom : (employee.service ?: 'Non renseigné') %}
                    {% set is_professional = interview.type.category == 'professional' or interview.type.isLegalFollowUp %}
                    {% set has_report = interview.reportPdfPath or interview.reportHtml %}
                    {% set status_tone = interview.status in finalized_statuses ? 'success' : (interview.status in progress_statuses ? 'warning' : (interview.status == 'cancelled' ? 'danger' : 'muted')) %}
                    <tr class="data-row">
                        <td><div class="data-entity"><span class="data-avatar {{ avatar_src ? '' : 'data-avatar--initials' }}">{% if avatar_src %}<img src="{{ avatar_src }}" alt="{{ employee }}">{% else %}{{ initials }}{% endif %}</span><div><strong>{{ employee }}</strong><small>{{ employee.employeeJob ? employee.employeeJob.nom : (employee.poste ?: 'Fonction non renseignée') }}</small></div></div></td>
                        <td>{{ service }}</td>
                        <td><span class="interview-type-pill interview-type-pill--{{ is_professional ? 'professional' : 'performance' }}">{{ interview.type.nom }}</span></td>
                        <td>{{ interview.scheduledAt ? interview.scheduledAt|date('d/m/Y') : '—' }}</td>
                        <td><span class="interview-status-pill interview-status-pill--{{ status_tone }}">{{ status_labels[interview.status]|default(interview.status|replace({'_': ' '})|capitalize) }}</span></td>
                        <td><span class="interview-table-icon {{ has_report ? 'is-active' : '' }}" title="Compte rendu"><i class="ti ti-file-description"></i></span></td>
                        <td><span class="interview-table-icon {{ interview.employeeValidatedAt ? 'is-active' : '' }}" title="Validation salarié"><i class="ti ti-user-check"></i></span><span class="interview-table-icon {{ interview.managerValidatedAt ? 'is-active' : '' }}" title="Validation manager"><i class="ti ti-users"></i></span></td>
                        <td class="data-table__actions"><div class="data-row-actions"><a href="{{ path('interview_show', {id: interview.id}) }}" title="Ouvrir"><i class="ti ti-eye"></i></a>{% if not interview.scheduledAt %}<a href="{{ path('interview_edit', {id: interview.id}) }}" title="Planifier"><i class="ti ti-calendar-event"></i></a>{% endif %}{% if has_report %}<a class="interview-download-link" href="{{ path('interview_download_report', {id: interview.id}) }}" title="Télécharger le compte rendu"><i class="ti ti-download"></i></a>{% endif %}</div></td>
                    </tr>
                {% else %}
                    <tr><td colspan="8"><div class="data-empty-panel">Aucun entretien trouvé pour les filtres sélectionnés.</div></td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

        <div class="interview-card-grid" data-interview-dashboard-target="grid" hidden>
            {% for interview in interviews %}
                <article class="data-grid-card interview-list-card">
                    <div class="data-grid-card__header"><div><strong>{{ interview.salarie }}</strong><small>{{ interview.type.nom }}</small></div><span class="interview-status-pill">{{ status_labels[interview.status]|default(interview.status) }}</span></div>
                    <p><i class="ti ti-calendar"></i>{{ interview.scheduledAt ? interview.scheduledAt|date('d/m/Y à H:i') : 'Date non planifiée' }}</p>
                    <a class="data-button data-button--secondary" href="{{ path(interview.scheduledAt ? 'interview_show' : 'interview_edit', {id: interview.id}) }}">{{ interview.scheduledAt ? 'Ouvrir l’entretien' : 'Planifier l’entretien' }}</a>
                </article>
            {% else %}<div class="data-empty-panel">Aucun entretien trouvé.</div>{% endfor %}
        </div>
    </section>

    <section class="data-card interview-dashboard__panel">
        <header class="interview-dashboard__panel-header"><h2><i class="ti ti-clipboard-check text-primary"></i>Rappels de conformité</h2></header>
        <div class="interview-reminder-grid">
            <article class="interview-reminder interview-reminder--blue"><strong>Entretiens professionnels à réaliser dans l’année</strong><span>{{ reminders.professional_due_this_year }}</span></article>
            <article class="interview-reminder interview-reminder--orange"><strong>Entretiens « 8 ans » à anticiper</strong><span>{{ reminders.eight_year_due_this_year }}</span></article>
            <article class="interview-reminder interview-reminder--purple"><strong>Entretiens de performance du cycle en cours</strong><span>{{ reminders.performance_due_this_year }}</span></article>
        </div>
    </section>
</div>
{% endblock %}