{% extends 'base.html.twig' %}
{% block title %} Tableau de bord | Opération Terrain {% endblock %}
{% block body %}

<div class="page-header">
    <h1>Tableau de bord</h1>
    <a href="{{ path('campaign_new') }}" class="btn">+ Nouvelle campagne</a>
</div>

<div class="kpi-grid">
    <div class="kpi-card">
        <div class="kpi-value">{{ totalCampaigns }}</div>
        <div class="kpi-label">Opérations au total</div>
    </div>
    <div class="kpi-card" style="cursor:pointer"
         onclick="document.getElementById('sites-couverts').style.display = document.getElementById('sites-couverts').style.display === 'none' ? 'block' : 'none'">
        <div class="kpi-value">{{ coveredSites|length }}</div>
        <div class="kpi-label">Sites couverts <span style="font-size:11px">▼</span></div>
    </div>
    <div class="kpi-card" style="cursor:pointer"
         onclick="document.getElementById('sites-oublies').style.display = document.getElementById('sites-oublies').style.display === 'none' ? 'block' : 'none'">
        <div class="kpi-value danger">{{ sitesWithoutRecent|length }}</div>
        <div class="kpi-label">Sites oubliés (+ {{ days }} j) <span style="font-size:11px">▼</span></div>
    </div>
</div>

<div id="sites-couverts" style="display:none">
{% if coveredSites is not empty %}
<div class="card">
    <h2 style="font-size:1rem;margin-bottom:12px">Sites couverts</h2>
    <table>
        <thead>
            <tr><th>Site</th><th>Ville</th><th>Département</th><th style="text-align:right">Effectif</th></tr>
        </thead>
        <tbody>
        {% for site in coveredSites %}
            <tr>
                <td><strong>{{ site.name }}</strong></td>
                <td>{{ site.city }}</td>
                <td>{{ site.department ?: '—' }}</td>
                <td style="text-align:right">{{ effectifBySite[site.id]|default('—') }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}
</div>

<div id="sites-oublies" style="display:none">
<div class="card">
    <div style="display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:12px;flex-wrap:wrap;gap:12px">
        <h2 style="font-size:1rem;margin:0">Sites oubliés — sans opération depuis {{ days }} jours{% if effectifMin > 0 %} · effectif ≥ {{ effectifMin }}{% endif %}</h2>
        <form method="get" style="display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap">
            {% for k, v in filters %}<input type="hidden" name="{{ k }}" value="{{ v }}">{% endfor %}
            <div>
                <label style="display:block;font-size:12px;color:var(--muted)">Jours</label>
                <input type="number" name="days" value="{{ days }}" min="1" max="365"
                       style="width:80px;padding:6px 8px;font-size:13px">
            </div>
            <div>
                <label style="display:block;font-size:12px;color:var(--muted)">Effectif min</label>
                <input type="number" name="effectif_min" value="{{ effectifMin ?: '' }}" min="0" step="10" placeholder="0"
                       style="width:90px;padding:6px 8px;font-size:13px">
            </div>
            <button class="btn btn-sm" type="submit">OK</button>
        </form>
    </div>
    {% if sitesWithoutRecent is not empty %}
    <table>
        <thead>
            <tr><th>Site</th><th>Ville</th><th>Département</th><th style="text-align:right">Effectif</th></tr>
        </thead>
        <tbody>
        {% for site in sitesWithoutRecent %}
            <tr>
                <td><strong>{{ site.name }}</strong></td>
                <td>{{ site.city }}</td>
                <td>{{ site.department ?: '—' }}</td>
                <td style="text-align:right">{{ effectifBySite[site.id]|default('—') }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p style="color:var(--muted);font-size:.875rem;margin:0">Aucun site oublié au-delà de {{ days }} jours{% if effectifMin > 0 %} avec un effectif ≥ {{ effectifMin }}{% endif %}.</p>
    {% endif %}
</div>
</div>

<div class="card">
    <h2 style="font-size:1rem;margin-bottom:16px">
        Opérations
        {% if filters.date_from or filters.date_to %}
            <span style="font-size:.8rem;font-weight:400;color:var(--muted);margin-left:8px">
                {% if filters.date_from %}du {{ filters.date_from|date('d/m/Y') }}{% endif %}
                {% if filters.date_to %} au {{ filters.date_to|date('d/m/Y') }}{% endif %}
            </span>
        {% endif %}
    </h2>
    <form method="get" style="margin-bottom:16px">
        <div class="row">
            <div>
                <label>Du</label>
                <input type="date" name="date_from" value="{{ filters.date_from ?? '' }}">
            </div>
            <div>
                <label>Au</label>
                <input type="date" name="date_to" value="{{ filters.date_to ?? '' }}">
            </div>
            <div>
                <label>Site</label>
                <select name="site">
                    <option value="">Tous</option>
                    {% for site in sites %}
                        <option value="{{ site.id }}" data-dept="{{ site.department }}"
                                {% if filters.site == site.id|striptags %}selected{% endif %}>
                            {{ site.name }} - {{ site.city }}
                        </option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label>Département</label>
                <select name="dept">
                    <option value="">Tous</option>
                    {% for dept in departments %}
                        <option value="{{ dept }}" {% if filters.dept == dept %}selected{% endif %}>{{ dept }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label>Type d'opération</label>
                <select name="type">
                    <option value="">Tous</option>
                    {% for type in operationTypes %}
                        <option value="{{ type.id }}" {% if filters.type == type.id|striptags %}selected{% endif %}>
                            {{ type.label }}
                        </option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label>État</label>
                <select name="status">
                    <option value="">Tous</option>
                    {% for label, value in statusChoices %}
                        <option value="{{ value }}" {% if filters.status == value %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label>Statut tract</label>
                <select name="tract_status">
                    <option value="">Tous</option>
                    {% for label, value in tractStatusChoices %}
                        <option value="{{ value }}" {% if filters.tract_status == value %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <div class="actions" style="margin-top:12px">
            <button class="btn" type="submit">Filtrer</button>
            <a class="btn btn-outline" href="/">Réinitialiser</a>
        </div>
    </form>

    <table>
        <thead>
            <tr>
                <th>Site</th>
                <th>Département</th>
                <th style="text-align:right">Effectif</th>
                <th>Date</th>
                <th>Heure</th>
                <th>Etablissement</th>
                <th>Type d'opération</th>
                <th>Tract</th>
                <th>Créée par</th>
                <th>État</th>
            </tr>
        </thead>
        <tbody>
        {% for campaign in latestCampaigns %}
            <tr>
                <td>{{ campaign.site ? campaign.site.name ~ ' - ' ~ campaign.site.city : '—' }}</td>
                <td>{{ campaign.site and campaign.site.department ? campaign.site.department : '—' }}</td>
                <td style="text-align:right;white-space:nowrap">{{ campaign.site ? effectifBySite[campaign.site.id]|default('—') : '—' }}</td>
                <td>{{ campaign.scheduledAt ? campaign.scheduledAt|date('d/m/Y') : '—' }}</td>
                <td>{{ campaign.scheduledAt ? campaign.scheduledAt|date('H:i') : '—' }}</td>
                <td>
                    {% if campaign.perimetreType %}
                        <span class="badge" style="font-size:.7rem">{{ campaign.perimetreTypeLabel }}</span>
                        {% if campaign.perimetres is not empty %}
                            <br><small style="color:var(--muted)">{{ campaign.perimetres|map(p => p.label)|join(', ') }}</small>
                        {% endif %}
                    {% else %}—{% endif %}
                </td>
                <td>{{ campaign.operationTypes is not empty ? campaign.operationTypes|map(t => t.label)|join(', ') : '—' }}</td>
                <td>
                    {% if campaign.tracts is not empty %}
                        {% set statusColors = {'a_tracter': '#2e7d32', 'en_attente': '#b45309', 'perime': '#c0392b'} %}
                        {% for tract in campaign.tracts %}
                            {% set color = statusColors[tract.status] ?? '#5a6a85' %}
                            <div style="margin-bottom:2px">
                                <span style="font-size:12px">{{ tract.label }}</span>
                                <span class="badge" style="background:{{ color }}20;color:{{ color }};border:1px solid {{ color }}40;font-size:11px;margin-left:4px">
                                    {{ tract.statusLabel }}
                                </span>
                            </div>
                        {% endfor %}
                    {% else %}
                        —
                    {% endif %}
                </td>
                <td>{{ creators[campaign.id]|default('—') }}</td>
                <td><span class="badge">{{ campaign.statusLabel }}</span></td>
            </tr>
        {% else %}
            <tr><td colspan="10" style="text-align:center;padding:24px;color:var(--muted)">Aucune opération.</td></tr>
        {% endfor %}
        </tbody>
    </table>
</div>

{% endblock %}