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

{% block title %}Campagnes d'entretien{% endblock %}

{% block page_header %}{% endblock %}

{% block content %}
    {% set status_map = {
        draft: {label: 'Brouillon', tone: 'muted'},
        scheduled: {label: 'Planifiée', tone: 'info'},
        launched: {label: 'Lancée', tone: 'warning'},
        in_progress: {label: 'En cours', tone: 'warning'},
        closed: {label: 'Clôturée', tone: 'success'},
        cancelled: {label: 'Annulée', tone: 'danger'}
    } %}

    <div class="data-page interview-campaign-page">
        <div class="data-page__header">
            <div>
                <nav class="data-breadcrumb" 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-black-75">Campagnes</span>
                </nav>
                <h1>Campagnes d'entretien</h1>
                <p>Planifiez, lancez et suivez les campagnes d'entretien de vos équipes.</p>
            </div>
            <div class="data-page__actions">
                <button class="data-button data-button--primary" type="button" data-bs-toggle="modal" data-bs-target="#interviewCampaignCreateModal">
                    <i class="ti ti-plus" aria-hidden="true"></i>Créer une campagne
                </button>
            </div>
        </div>

        <div class="metric-grid metric-grid--4">
            <article class="metric-card">
                <span class="metric-card__icon metric-card__icon--blue"><i class="ti ti-speakerphone" aria-hidden="true"></i></span>
                <span class="metric-card__label">Total</span>
                <strong class="metric-card__value">{{ campaign_stats.total|default(campaigns|length) }}</strong>
                <span class="metric-card__caption">campagnes créées</span>
                <span class="metric-card__trend">Pilotage RH</span>
            </article>
            <article class="metric-card">
                <span class="metric-card__icon metric-card__icon--muted"><i class="ti ti-edit" aria-hidden="true"></i></span>
                <span class="metric-card__label">Brouillons</span>
                <strong class="metric-card__value">{{ campaign_stats.draft|default(0) }}</strong>
                <span class="metric-card__caption">campagnes à préparer</span>
                <span class="metric-card__trend">À compléter</span>
            </article>
            <article class="metric-card">
                <span class="metric-card__icon metric-card__icon--amber"><i class="ti ti-player-play" aria-hidden="true"></i></span>
                <span class="metric-card__label">Actives</span>
                <strong class="metric-card__value metric-card__value--warning">{{ campaign_stats.active|default(0) }}</strong>
                <span class="metric-card__caption">planifiées ou en cours</span>
                <span class="metric-card__trend metric-card__trend--warning">Suivi en cours</span>
            </article>
            <article class="metric-card">
                <span class="metric-card__icon metric-card__icon--green"><i class="ti ti-circle-check" aria-hidden="true"></i></span>
                <span class="metric-card__label">Clôturées</span>
                <strong class="metric-card__value metric-card__value--success">{{ campaign_stats.closed|default(0) }}</strong>
                <span class="metric-card__caption">campagnes terminées</span>
                <span class="metric-card__trend">Historique</span>
            </article>
        </div>

        <section class="data-card" data-controller="data-table">
            <form class="data-toolbar" method="get">
                <div class="data-search">
                    <i class="ti ti-search" aria-hidden="true"></i>
                    <input type="search" name="q" value="{{ filters.q|default('') }}" placeholder="Rechercher une campagne...">
                </div>

                <div class="data-toolbar__controls">
                    <select name="status" aria-label="Statut">
                        <option value="">Tous les statuts</option>
                        {% for value, label in {draft: 'Brouillon', scheduled: 'Planifiée', launched: 'Lancée', in_progress: 'En cours', closed: 'Clôturée', cancelled: 'Annulée'} %}
                            <option value="{{ value }}" {{ filters.status|default('') == value ? 'selected' : '' }}>{{ label }}</option>
                        {% endfor %}
                    </select>
                    <button class="data-icon-button" type="submit" title="Filtrer">
                        <i class="ti ti-adjustments-horizontal" aria-hidden="true"></i>
                    </button>
                    {% if filters|filter(value => value is not empty)|length %}
                        <a class="data-icon-button" href="{{ path('interview_campaign_index') }}" title="Réinitialiser">
                            <i class="ti ti-rotate-clockwise" aria-hidden="true"></i>
                        </a>
                    {% endif %}
                    <div class="data-view-toggle" aria-label="Mode d'affichage">
                        <button class="is-active" type="button" data-data-table-target="tableButton" data-action="data-table#showTable" title="Table">
                            <i class="ti ti-list" aria-hidden="true"></i>
                        </button>
                        <button type="button" data-data-table-target="gridButton" data-action="data-table#showGrid" title="Grille">
                            <i class="ti ti-grid-dots" aria-hidden="true"></i>
                        </button>
                    </div>
                </div>
            </form>

            <div class="data-table-wrap" data-data-table-target="tableView">
                <table class="data-table interview-campaign-table">
                    <thead>
                        <tr>
                            <th class="data-table__select"><input type="checkbox" data-data-table-target="checkAll" data-action="data-table#toggleAll" aria-label="Tout sélectionner"></th>
                            <th>Campagne</th>
                            <th>Type et modèle</th>
                            <th>Période</th>
                            <th>Statut</th>
                            <th>Création</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for campaign in campaigns %}
                            {% set status = status_map[campaign.status]|default({label: campaign.status|replace({'_': ' '})|capitalize, tone: 'muted'}) %}
                            <tr class="data-row {{ campaign.status == 'cancelled' ? 'is-muted' : '' }}">
                                <td class="data-table__select"><input type="checkbox" data-data-table-target="rowCheckbox" data-action="data-table#toggleRow" aria-label="Sélectionner {{ campaign.nom }}"></td>
                                <td>
                                    <div class="data-entity">
                                        <span class="data-avatar data-avatar--initials"><i class="ti ti-speakerphone" aria-hidden="true"></i></span>
                                        <div>
                                            <a class="data-entity__title" href="{{ path('interview_campaign_show', {id: campaign.id}) }}">{{ campaign.nom }}</a>
                                            <span class="data-entity__meta">{{ campaign.description ? campaign.description|slice(0, 70) ~ (campaign.description|length > 70 ? '…' : '') : 'Aucune description' }}</span>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="data-main-text">{{ campaign.type.nom }}</div>
                                    <div class="data-sub-text">{{ campaign.template ? campaign.template.nom : 'Aucun modèle associé' }}</div>
                                </td>
                                <td>
                                    <div class="data-main-text">{{ campaign.startDate ? campaign.startDate|date('d/m/Y') : 'À définir' }}</div>
                                    <div class="data-sub-text">{{ campaign.endDate ? 'au ' ~ campaign.endDate|date('d/m/Y') : 'Date de fin non définie' }}</div>
                                </td>
                                <td><span class="data-badge data-badge--{{ status.tone }}"><i></i>{{ status.label }}</span></td>
                                <td>
                                    <div class="data-main-text">{{ campaign.createdAt|date('d/m/Y') }}</div>
                                    <div class="data-sub-text">{{ campaign.createdAt|date('H:i') }}</div>
                                </td>
                                <td class="text-end">
                                    <div class="data-row-actions">
                                        <a href="{{ path('interview_campaign_show', {id: campaign.id}) }}" data-turbo-frame="frame_modal" title="Voir"><i class="ti ti-eye" aria-hidden="true"></i></a>
                                        <a href="{{ path('interview_campaign_edit', {id: campaign.id}) }}" data-turbo-frame="frame_modal" title="Modifier"><i class="ti ti-edit" aria-hidden="true"></i></a>
                                    </div>
                                </td>
                            </tr>
                        {% else %}
                            <tr>
                                <td colspan="7">
                                    <div class="data-empty">
                                        <i class="ti ti-speakerphone-off" aria-hidden="true"></i>
                                        <strong>Aucune campagne trouvée</strong>
                                        <span>Ajustez les filtres ou créez une nouvelle campagne d'entretien.</span>
                                        <button class="data-button data-button--primary" type="button" data-bs-toggle="modal" data-bs-target="#interviewCampaignCreateModal">Créer une campagne</button>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <div class="data-grid-view" data-data-table-target="gridView" hidden>
                {% for campaign in campaigns %}
                    {% set status = status_map[campaign.status]|default({label: campaign.status|replace({'_': ' '})|capitalize, tone: 'muted'}) %}
                    <article class="data-grid-card {{ campaign.status == 'cancelled' ? 'is-muted' : '' }}">
                        <div class="data-grid-card__header">
                            <span class="data-avatar data-avatar--initials"><i class="ti ti-speakerphone" aria-hidden="true"></i></span>
                            <span class="data-badge data-badge--{{ status.tone }}"><i></i>{{ status.label }}</span>
                        </div>
                        <a class="data-grid-card__title" href="{{ path('interview_campaign_show', {id: campaign.id}) }}">{{ campaign.nom }}</a>
                        <p>{{ campaign.description ?: 'Aucune description' }}</p>
                        <dl>
                            <div><dt>Type</dt><dd>{{ campaign.type.nom }}</dd></div>
                            <div><dt>Modèle</dt><dd>{{ campaign.template ? campaign.template.nom : '—' }}</dd></div>
                            <div><dt>Période</dt><dd>{{ campaign.startDate ? campaign.startDate|date('d/m/Y') : 'À définir' }}{% if campaign.endDate %} – {{ campaign.endDate|date('d/m/Y') }}{% endif %}</dd></div>
                        </dl>
                        <div class="data-grid-card__actions">
                            <div class="data-row-actions">
                                <a href="{{ path('interview_campaign_show', {id: campaign.id}) }}" data-turbo-frame="frame_modal" title="Voir"><i class="ti ti-eye" aria-hidden="true"></i></a>
                                <a href="{{ path('interview_campaign_edit', {id: campaign.id}) }}" data-turbo-frame="frame_modal" title="Modifier"><i class="ti ti-edit" aria-hidden="true"></i></a>
                            </div>
                        </div>
                    </article>
                {% else %}
                    <div class="data-empty">
                        <i class="ti ti-speakerphone-off" aria-hidden="true"></i>
                        <strong>Aucune campagne trouvée</strong>
                        <span>Ajustez les filtres ou créez une nouvelle campagne d'entretien.</span>
                    </div>
                {% endfor %}
            </div>
        </section>
    </div>

    <div class="modal fade interview-campaign-create-modal" id="interviewCampaignCreateModal" tabindex="-1" aria-labelledby="interviewCampaignCreateModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <form class="modal-content" method="post" action="{{ path('interview_campaign_new') }}" data-controller="interview-campaign">
                <div class="modal-header">
                    <div>
                        <span class="interview-modal-kicker">Entretiens RH</span>
                        <h2 class="modal-title" id="interviewCampaignCreateModalLabel">Créer une campagne</h2>
                        <p>Définissez la campagne et sélectionnez les salariés concernés.</p>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="_token" value="{{ csrf_token('interview_campaign_create') }}">
                    <div class="interview-campaign-form-grid">
                        <label class="interview-campaign-field interview-campaign-field--wide">
                            <span>Nom de la campagne <strong>*</strong></span>
                            <input type="text" name="nom" placeholder="Ex. Entretiens annuels 2026" required autofocus>
                        </label>
                        <label class="interview-campaign-field">
                            <span>Type d'entretien <strong>*</strong></span>
                            <select name="type" required data-interview-campaign-target="type" data-action="interview-campaign#filterTemplates">
                                <option value="">Sélectionner un type</option>
                                {% for type in types %}<option value="{{ type.id }}">{{ type.nom }}</option>{% endfor %}
                            </select>
                        </label>
                        <label class="interview-campaign-field">
                            <span>Modèle d'entretien</span>
                            <select name="template" data-interview-campaign-target="template">
                                <option value="">Aucun modèle</option>
                                {% for template in templates %}<option value="{{ template.id }}" data-type="{{ template.type.id }}">{{ template.nom }}</option>{% endfor %}
                            </select>
                        </label>
                        <fieldset class="interview-campaign-employees interview-campaign-field--wide">
                            <legend>Salariés concernés <strong>*</strong></legend>
                            <div class="interview-campaign-employees__toolbar">
                                <label><i class="ti ti-search" aria-hidden="true"></i><input type="search" placeholder="Rechercher un salarié…" data-interview-campaign-target="employeeSearch" data-action="input->interview-campaign#filterEmployees"></label>
                                <button type="button" data-action="interview-campaign#toggleAllEmployees">Tout sélectionner</button>
                                <span data-interview-campaign-target="selectedCount">0 sélectionné</span>
                            </div>
                            <div class="interview-campaign-employees__list">
                                {% for salarie in salaries %}
                                    <label data-interview-campaign-target="employee" data-search="{{ (salarie ~ ' ' ~ salarie.matricule ~ ' ' ~ salarie.emailProfessionnel)|lower|e('html_attr') }}">
                                        <input type="checkbox" name="employees[]" value="{{ salarie.id }}" data-action="interview-campaign#updateEmployeeCount">
                                        <span><strong>{{ salarie }}</strong><small>{{ salarie.employeeService ? salarie.employeeService.nom : (salarie.service ?: 'Sans service') }}{% if salarie.matricule %} · {{ salarie.matricule }}{% endif %}</small></span>
                                    </label>
                                {% else %}
                                    <p>Aucun salarié actif disponible.</p>
                                {% endfor %}
                            </div>
                            <small>Un entretien non planifié sera créé pour chaque salarié sélectionné.</small>
                        </fieldset>
                        <label class="interview-campaign-field">
                            <span>Date de début</span>
                            <input type="date" name="startDate">
                        </label>
                        <label class="interview-campaign-field">
                            <span>Date de fin</span>
                            <input type="date" name="endDate">
                        </label>
                        <label class="interview-campaign-field interview-campaign-field--wide">
                            <span>Description</span>
                            <textarea name="description" rows="4" placeholder="Précisez l'objectif et le périmètre de cette campagne..."></textarea>
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="data-button data-button--secondary" type="button" data-bs-dismiss="modal">Annuler</button>
                    <button class="data-button data-button--primary" type="submit"><i class="ti ti-check" aria-hidden="true"></i>Créer la campagne</button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}