{% extends 'admin/layout.html.twig' %}
{% block title %}Demandes entrantes{% endblock %}
{% block admin_body %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 mb-1">Demandes entrantes</h1>
        <p class="text-secondary mb-0">Messages reçus depuis le site public du projet actif.</p>
    </div>
</div>

<div class="d-flex flex-wrap gap-2 mb-3" role="group" aria-label="Filtrer les demandes par statut">
    <a class="btn btn-sm {{ activeStatus == '' ? 'btn-dark' : 'btn-outline-secondary' }}" href="{{ path('admin_contact_request_index') }}">
        Toutes <span class="badge {{ activeStatus == '' ? 'text-bg-light text-dark' : 'text-bg-secondary' }} ms-1">{{ statusCounts.ALL|default(0) }}</span>
    </a>
    <a class="btn btn-sm {{ activeStatus == 'NEW' ? 'btn-warning' : 'btn-outline-secondary' }}" href="{{ path('admin_contact_request_index',{status:'NEW'}) }}">
        Nouvelles <span class="badge {{ activeStatus == 'NEW' ? 'text-bg-dark' : 'text-bg-warning text-dark' }} ms-1">{{ statusCounts.NEW|default(0) }}</span>
    </a>
    <a class="btn btn-sm {{ activeStatus == 'IN_PROGRESS' ? 'btn-primary' : 'btn-outline-secondary' }}" href="{{ path('admin_contact_request_index',{status:'IN_PROGRESS'}) }}">
        En cours <span class="badge {{ activeStatus == 'IN_PROGRESS' ? 'text-bg-light text-dark' : 'text-bg-secondary' }} ms-1">{{ statusCounts.IN_PROGRESS|default(0) }}</span>
    </a>
    <a class="btn btn-sm {{ activeStatus == 'DONE' ? 'btn-success' : 'btn-outline-secondary' }}" href="{{ path('admin_contact_request_index',{status:'DONE'}) }}">
        Traitées <span class="badge {{ activeStatus == 'DONE' ? 'text-bg-light text-dark' : 'text-bg-success' }} ms-1">{{ statusCounts.DONE|default(0) }}</span>
    </a>
    <a class="btn btn-sm {{ activeStatus == 'ARCHIVED' ? 'btn-secondary' : 'btn-outline-secondary' }}" href="{{ path('admin_contact_request_index',{status:'ARCHIVED'}) }}">
        Archivées <span class="badge {{ activeStatus == 'ARCHIVED' ? 'text-bg-light text-dark' : 'text-bg-secondary' }} ms-1">{{ statusCounts.ARCHIVED|default(0) }}</span>
    </a>
</div>

{% set canWrite = can_permission('CONTACT_REQUEST', 2) %}
{% set canDelete = can_permission('CONTACT_REQUEST', 3) %}
<form method="post" action="{{ path('admin_contact_request_bulk_action') }}" id="bulk-action-form">
    <input type="hidden" name="_token" value="{{ csrf_token('contact-request-bulk-action') }}">
    {% if activeStatus %}<input type="hidden" name="return_status" value="{{ activeStatus }}">{% endif %}

    {% if (canWrite or canDelete) and items|length > 0 %}
        <div class="d-flex flex-wrap justify-content-end align-items-center gap-2 mb-3">
            <span class="small text-secondary me-1" id="selection-count">0 sélectionnée</span>
            <select class="form-select form-select-sm" name="bulk_action" id="bulk-action-select" style="width:auto;min-width:230px">
                <option value="">Action sur la sélection…</option>
                {% if canWrite %}
                    <option value="STATUS_NEW">Passer à Nouveau</option>
                    <option value="STATUS_IN_PROGRESS">Passer à En cours</option>
                    <option value="STATUS_DONE">Passer à Traité</option>
                    <option value="STATUS_ARCHIVED">Archiver</option>
                {% endif %}
                {% if canDelete %}<option value="DELETE">Supprimer définitivement</option>{% endif %}
            </select>
            <button type="submit" class="btn btn-sm btn-dark" id="bulk-action-button" disabled>
                Appliquer
            </button>
        </div>
    {% endif %}

    <div class="card border-0 shadow-sm">
        <div class="mobile-card-list contact-request-cards p-3">{% for item in items %}<article class="card business-card"><div class="card-body"><div class="d-flex justify-content-between gap-2"><div><div class="small text-secondary">{{ item.submittedAt|date('d/m/Y H:i') }}</div><h2 class="h6 mb-1">{{ item.name }}</h2><div class="small text-secondary text-break">{{ item.email }}{% if item.structure %} · {{ item.structure }}{% endif %}</div></div><span class="badge {{ item.status=='NEW'?'text-bg-warning':(item.status=='DONE'?'text-bg-success':'text-bg-secondary') }} align-self-start">{{ {'NEW':'Nouveau','IN_PROGRESS':'En cours','DONE':'Traité','ARCHIVED':'Archivé'}[item.status]|default(item.status) }}</span></div><div class="mt-2">{{ item.subjectLabel }}</div><div class="card-actions mt-3">{% if canWrite or canDelete %}<label class="btn btn-outline-secondary touch-target"><input class="form-check-input request-checkbox me-1" type="checkbox" name="ids[]" value="{{ item.id }}">Sélectionner</label>{% endif %}<a class="btn btn-dark flex-grow-1 touch-target" href="{{ path('admin_contact_request_show',{id:item.id}) }}">Ouvrir</a></div></div></article>{% else %}{% include 'admin/ui/_empty_state.html.twig' with {empty_title:'Aucune demande reçue',empty_text:'Les messages du site public apparaîtront ici.'} only %}{% endfor %}</div>
        <div class="table-responsive desktop-table-only">
            <table class="table align-middle mb-0">
                <thead class="table-light">
                <tr>
                    {% if canWrite or canDelete %}<th style="width:44px" class="text-center"><input class="form-check-input" type="checkbox" id="select-all" aria-label="Tout sélectionner"></th>{% endif %}
                    <th>Date</th><th>Contact</th><th>Structure</th><th>Sujet</th><th>Statut</th><th></th>
                </tr>
                </thead>
                <tbody>
                {% for item in items %}
                    <tr>
                        {% if canWrite or canDelete %}<td class="text-center"><input class="form-check-input request-checkbox" type="checkbox" name="ids[]" value="{{ item.id }}" aria-label="Sélectionner la demande de {{ item.name }}"></td>{% endif %}
                        <td>{{ item.submittedAt|date('d/m/Y H:i') }}</td>
                        <td><strong>{{ item.name }}</strong><div class="small text-secondary">{{ item.email }}</div></td>
                        <td>{{ item.structure ?: '—' }}</td>
                        <td>{{ item.subjectLabel }}</td>
                        <td><span class="badge {{ item.status=='NEW'?'text-bg-warning':(item.status=='DONE'?'text-bg-success':'text-bg-secondary') }}">{{ {'NEW':'Nouveau','IN_PROGRESS':'En cours','DONE':'Traité','ARCHIVED':'Archivé'}[item.status]|default(item.status) }}</span></td>
                        <td class="text-end text-nowrap">
                            <a class="btn btn-sm btn-outline-dark" href="{{ path('admin_contact_request_show',{id:item.id}) }}">Ouvrir</a>
                            {% if canDelete %}
                                <button type="submit" class="btn btn-sm btn-outline-danger ms-1"
                                        formaction="{{ path('admin_contact_request_delete',{id:item.id}) }}"
                                        formmethod="post"
                                        name="_token" value="{{ csrf_token('contact-request-delete-'~item.id) }}"
                                        onclick="return confirm('Supprimer définitivement cette demande entrante ?');"
                                        title="Supprimer">
                                    <i class="bi bi-trash"></i>
                                </button>
                            {% endif %}
                        </td>
                    </tr>
                {% else %}
                    <tr><td colspan="{{ (canWrite or canDelete) ? 7 : 6 }}" class="text-center text-secondary py-5">Aucune demande reçue.</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</form>

{% if (canWrite or canDelete) and items|length > 0 %}
<script>
(() => {
    const all = document.getElementById('select-all');
    const mobileLayout = window.matchMedia('(max-width: 767.98px)').matches;
    document.querySelectorAll('.request-checkbox').forEach(box => {
        const inMobileCards = !!box.closest('.contact-request-cards');
        box.disabled = mobileLayout ? !inMobileCards : inMobileCards;
    });
    const boxes = Array.from(document.querySelectorAll('.request-checkbox:not(:disabled)'));
    const button = document.getElementById('bulk-action-button');
    const action = document.getElementById('bulk-action-select');
    const form = document.getElementById('bulk-action-form');
    const count = document.getElementById('selection-count');
    const refresh = () => {
        const selected = boxes.filter(box => box.checked).length;
        button.disabled = selected === 0 || !action.value;
        count.textContent = `${selected} sélectionnée${selected > 1 ? 's' : ''}`;
        all.checked = selected > 0 && selected === boxes.length;
        all.indeterminate = selected > 0 && selected < boxes.length;
    };
    all.addEventListener('change', () => { boxes.forEach(box => box.checked = all.checked); refresh(); });
    boxes.forEach(box => box.addEventListener('change', refresh));
    action.addEventListener('change', refresh);
    form.addEventListener('submit', (event) => {
        if (action.value === 'DELETE' && !confirm('Supprimer définitivement les demandes sélectionnées ?')) event.preventDefault();
    });
    refresh();
})();
</script>
{% endif %}
{% endblock %}