{# CRM tab – stats + filters + table #}

{# ── KPI cards ─────────────────────────────────────────────────── #}
<div class="row g-3 mb-4" id="demand-kpi-row">
    <div class="col-6 col-md-3">
        <div class="kpi-card p-3 text-center">
            <div class="fs-4 fw-bold text-primary" id="kpi-total">{{ stats.total | default('—') }}</div>
            <div class="text-muted small">{{ translations.kpi_total | default('Total') }}</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="kpi-card p-3 text-center">
            <div class="fs-4 fw-bold text-info" id="kpi-new">{{ stats.nouvelle | default('—') }}</div>
            <div class="text-muted small">{{ translations.status_nouvelle | default('Nouvelles') }}</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="kpi-card p-3 text-center">
            <div class="fs-4 fw-bold text-warning" id="kpi-in-progress">{{ stats.en_cours | default('—') }}</div>
            <div class="text-muted small">{{ translations.status_en_cours | default('En cours') }}</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="kpi-card p-3 text-center">
            <div class="fs-4 fw-bold text-success" id="kpi-published">{{ stats.publiee | default('—') }}</div>
            <div class="text-muted small">{{ translations.status_publiee | default('Publiées') }}</div>
        </div>
    </div>
</div>

{# ── Filters ───────────────────────────────────────────────────── #}
<div class="card shadow-sm mb-3">
    <div class="card-body py-2">
        <div class="d-flex gap-2 flex-wrap align-items-center">
            <span class="text-muted small me-1">{{ translations.filter_status | default('Statut') }}:</span>
            <button class="status-chip active" data-status="">{{ translations.filter_all | default('Tous') }}</button>
            {% set statusColors = {
                'NOUVELLE':  'text-primary',
                'EN_COURS':  'text-warning',
                'EN_REVIEW': 'text-purple',
                'APPROUVEE': 'text-success',
                'PUBLIEE':   'text-info',
                'REFUSEE':   'text-danger'
            } %}
            {% for s in statuses %}
                <button class="status-chip" data-status="{{ s }}">
                    {{ translations['status_' ~ s | lower] | default(s) }}
                </button>
            {% endfor %}

            <div class="ms-auto">
                <input type="search" class="form-control form-control-sm" id="demandSearch"
                       placeholder="{{ translations.search_placeholder | default('Rechercher…') }}"
                       style="min-width:220px;">
            </div>
        </div>
    </div>
</div>

{# ── Table ─────────────────────────────────────────────────────── #}
<div class="card shadow-sm">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0 align-middle" id="demandsTable">
                <thead class="table-light">
                    <tr>
                        <th>{{ translations.col_ref | default('Réf.') }}</th>
                        <th>{{ translations.col_date | default('Date') }}</th>
                        <th>{{ translations.col_requester | default('Demandeur') }}</th>
                        <th>{{ translations.col_shop | default('Shop') }}</th>
                        <th>{{ translations.col_subject | default('Sujet') }}</th>
                        <th>{{ translations.col_type | default('Type') }}</th>
                        <th>{{ translations.col_status | default('Statut') }}</th>
                        <th>{{ translations.col_priority | default('Priorité') }}</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id="demandsTableBody">
                    {% if demands is not empty %}
                        {% for d in demands %}
                        <tr>
                            <td class="fw-semibold font-monospace small">{{ d.getRef() }}</td>
                            <td class="text-muted small">{{ d.getCreatedAt() | date('d/m/Y') }}</td>
                            <td>{{ d.getRequesterName() ?? d.getShopName() ?? '—' }}</td>
                            <td class="text-muted small">{{ d.getShopName() ?? d.getShopId() }}</td>
                            <td>{{ d.getDisplaySubject() | length > 40 ? d.getDisplaySubject() | slice(0, 40) ~ '…' : d.getDisplaySubject() }}</td>
                            <td><span class="badge bg-light text-dark">{{ translations['type_' ~ d.getType() | lower] | default(d.getTypeLabel()) }}</span></td>
                            <td>{% include 'demands/partials/_status_badge.twig' with {status: d.getStatus()} %}</td>
                            <td>
                                {% if d.getPriority() %}
                                    <span class="badge bg-{{ d.getPriority() == 'CRITICAL' ? 'danger' : (d.getPriority() == 'HIGH' ? 'warning text-dark' : (d.getPriority() == 'MEDIUM' ? 'info' : 'secondary')) }}">
                                        {{ d.getPriority() | lower | capitalize }}
                                    </span>
                                {% endif %}
                            </td>
                            <td>
                                <a href="{{ root }}/demands/{{ d.getId() }}" class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-eye"></i>
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="9" class="text-center text-muted py-5">
                                <i class="bi bi-inbox fs-2 d-block mb-2"></i>
                                {{ translations.no_demands | default('Aucune demande trouvée.') }}
                            </td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
</div>