{% extends 'base.html.twig' %}
{% block title %}Campagne{% endblock %}
{% block body %}
<div class="card">
    <h1>{{ campaign.operationTypes is not empty ? campaign.operationTypes|map(t => t.label)|join(' / ') : 'Campagne' }}</h1>
    <p><strong>Site :</strong> {{ campaign.site ? campaign.site.name ~ ' - ' ~ campaign.site.city : '—' }}</p>
    <p><strong>Date campagne :</strong> {{ campaign.scheduledAt ? campaign.scheduledAt|date('d/m/Y H:i') : '—' }}</p>
    <p><strong>Créée le :</strong> {{ campaign.createdAt ? campaign.createdAt|date('d/m/Y H:i') : '—' }}</p>
    <p><strong>Créée par :</strong> {{ creator ?: '—' }}</p>
    <p><strong>État :</strong> {{ campaign.statusLabel }}</p>
    <p>
        <strong>Etablissement :</strong>
        {% if campaign.perimetreType %}
            <span class="badge">{{ campaign.perimetreTypeLabel }}</span>
            {% if campaign.perimetres is not empty %}
                — {{ campaign.perimetres|map(p => p.label)|join(', ') }}
            {% endif %}
        {% else %}
            —
        {% endif %}
    </p>
    {% if campaign.completed or campaign.participants is not empty %}
    <p>
        <strong>Participants :</strong>
        {% if campaign.participants is not empty %}
            {{ campaign.participants|map(p => p.fullName)|join(', ') }}
            <span style="color:var(--muted);font-size:.85rem">({{ campaign.participants|length }})</span>
        {% else %}
            <span style="color:var(--muted)">aucun participant renseigné</span>
        {% endif %}
    </p>
    {% endif %}
    <p><strong>Tracts :</strong> {{ campaign.tracts is not empty ? campaign.tracts|map(t => t.label)|join(', ') : '—' }}</p>
    <p><strong>Remarque :</strong> {{ campaign.remarks ?: '—' }}</p>
    <div class="actions" style="margin-top:1rem">
        <a class="btn btn-outline" href="/campaign/{{ campaign.id }}/edit">Modifier</a>
        <a class="btn btn-outline" href="/campaign">Retour</a>
    </div>
</div>

{% if is_granted('ROLE_USER') and porteurs is defined %}
<div class="card">
    <h2 style="margin-bottom:16px">Demandes d'entraide</h2>

    {% if helpRequests is not empty %}
    <table style="margin-bottom:24px">
        <thead>
            <tr><th>représentant</th><th>Demande envoyée</th><th>Réponse</th><th>Statut</th></tr>
        </thead>
        <tbody>
        {% for req in helpRequests %}
            {% set colors = {
                'accepted': {bg: '#e8f5e9', color: '#2e7d32'},
                'refused':  {bg: '#fce4e4', color: '#c0392b'},
                'pending':  {bg: '#fff8e1', color: '#b45309'}
            } %}
            {% set c = colors[req.status] ?? colors.pending %}
            <tr>
                <td>{{ req.porteur.fullName }}</td>
                <td>{{ req.createdAt|date('d/m/Y') }}</td>
                <td>{{ req.respondedAt ? req.respondedAt|date('d/m/Y') : '—' }}</td>
                <td>
                    <span class="badge" style="background:{{ c.bg }};color:{{ c.color }};border:1px solid {{ c.color }}40">
                        {{ req.statusLabel }}
                    </span>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    {% endif %}

    {% if porteurs is not empty %}
    <div style="border-top:1px solid var(--border);padding-top:16px">
        <p style="font-size:.875rem;font-weight:600;margin-bottom:12px">Envoyer une demande aux représentants du site :</p>
        <form id="helpForm" style="display:flex;flex-direction:column;gap:8px">
            <input type="hidden" name="campaign_id" value="{{ campaign.id }}">
            {% set alreadySent = helpRequests|map(r => r.porteur.id) %}
            {% for porteur in porteurs %}
            <label style="display:flex;align-items:center;gap:8px;font-size:.9rem;cursor:pointer">
                <input type="checkbox" name="porteur_ids[]" value="{{ porteur.id }}"
                    {% if porteur.id in alreadySent %}disabled checked{% endif %}>
                {{ porteur.fullName }} — {{ porteur.email }}
                {% if porteur.id in alreadySent %}
                    <span style="font-size:.78rem;color:var(--muted)">(déjà sollicité)</span>
                {% endif %}
            </label>
            {% endfor %}
            <div style="margin-top:12px">
                <button type="button" id="sendHelpBtn" class="btn">Envoyer la demande</button>
                <span id="helpMsg" style="margin-left:12px;font-size:.85rem;color:var(--muted)"></span>
            </div>
        </form>
    </div>
    {% else %}
    <p style="color:var(--muted);font-size:.875rem">Aucun représentant rattaché au site de cette campagne.</p>
    {% endif %}
</div>

<script>
(function () {
    const campaignName  = {{ campaign.displayName|json_encode|raw }};
    const campaignSite  = {{ (campaign.site ? campaign.site.name ~ ' — ' ~ campaign.site.city : '')|json_encode|raw }};
    const campaignDate  = {{ (campaign.scheduledAt ? campaign.scheduledAt|date('d/m/Y') : '')|json_encode|raw }};
    const campaignTime  = {{ (campaign.scheduledAt ? campaign.scheduledAt|date('H:i') : '')|json_encode|raw }};
    const campaignTypes = {{ (campaign.operationTypes is not empty ? campaign.operationTypes|map(t => t.label)|join(', ') : '')|json_encode|raw }};
    const etabEffectifs = {{ etabEffectifs|json_encode|raw }};
    const sddEmails     = {{ sddEmails|json_encode|raw }};
    const dscoEmails    = {{ dscoEmails|json_encode|raw }};
    const senderName    = {{ app.user ? app.user.displayName|json_encode|raw : 'null' }};

    document.getElementById('sendHelpBtn')?.addEventListener('click', function () {
        const form    = document.getElementById('helpForm');
        const data    = new FormData(form);
        const ids     = data.getAll('porteur_ids[]');
        const payload = new URLSearchParams();
        payload.append('campaign_id', data.get('campaign_id'));
        ids.forEach(id => payload.append('porteur_ids[]', id));

        fetch('{{ path('help_request_send') }}', {method: 'POST', body: payload})
            .then(r => r.json())
            .then(res => {
                const msg = document.getElementById('helpMsg');
                if (res.sent > 0) {
                    msg.style.color = '#2e7d32';
                    msg.textContent = res.sent + ' demande(s) envoyée(s) : ' + res.names.join(', ') + '.';

                    if (res.emails && res.emails.length > 0) {
                        const subject = 'Demande d\'entraide – ' + campaignName;
                        const dateStr = campaignDate + (campaignTime ? ' à ' + campaignTime : '');
                        let body = 'Bonjour,\n\n'
                            + 'Nous avons besoin de votre entraide pour une campagne de tractage.\n\n'
                            + 'Rappel de la campagne :\n'
                            + (campaignSite  ? '- Site : ' + campaignSite + '\n' : '')
                            + (dateStr       ? '- Date : ' + dateStr + '\n' : '')
                            + (campaignTypes ? '- Type : ' + campaignTypes + '\n' : '');
                        if (etabEffectifs.length) {
                            body += '- Effectif par établissement :\n'
                                  + etabEffectifs.map(e => '    • ' + e.label + ' : ' + e.effectif).join('\n') + '\n';
                        }
                        body += '\nMerci de nous indiquer si vous pouvez participer.'
                            + (senderName ? '\n\nCordialement,\n' + senderName : '');
                        // Destinataires : représentants sollicités + SDD du site + DSCO des établissements (en copie).
                        const to = res.emails.concat(sddEmails, dscoEmails)
                            .filter((v, i, a) => v && a.indexOf(v) === i);
                        window.location.href = 'mailto:' + to.join(',')
                            + '?subject=' + encodeURIComponent(subject)
                            + '&body=' + encodeURIComponent(body);
                    }

                    setTimeout(() => location.reload(), 1500);
                } else {
                    msg.style.color = 'var(--muted)';
                    msg.textContent = 'Aucune nouvelle demande à envoyer.';
                }
            });
    });
})();
</script>
{% endif %}

{% endblock %}