{% extends 'layout/app.html.twig' %}

{% block title %}Dossiers{% endblock %}
{% block page_title %}{{ is_granted('BATCH_MANAGE') ? 'Dossiers' : 'Mes dossiers' }}{% endblock %}

{% block page_actions %}
    <a href="{{ path('app_dossier_export', filter.toQuery) }}" class="btn btn-secondary">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg>
        Export Excel
    </a>
    <a href="{{ path('app_dossier_new') }}" class="btn btn-accent">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
        Nouveau dossier
    </a>
{% endblock %}

{% block content %}
    <form method="get" class="card mb-4 grid gap-3 p-4 md:grid-cols-2 xl:grid-cols-[2fr_1fr_1fr_1fr_auto]">
        <input type="search" name="q" value="{{ filter.search }}" placeholder="Référence, nom, passeport, téléphone…" class="form-input">
        <select name="statut" class="form-input">
            <option value="">Tous les statuts</option>
            {% for status in statuses %}
                <option value="{{ status.value }}" {{ filter.status == status ? 'selected' }}>{{ status.shortLabel }}</option>
            {% endfor %}
        </select>
        <select name="ambassade" class="form-input">
            <option value="">Toutes les ambassades</option>
            {% for embassy in embassies %}
                <option value="{{ embassy.id }}" {{ filter.embassy and filter.embassy.id == embassy.id ? 'selected' }}>{{ embassy.name }}</option>
            {% endfor %}
        </select>
        {% if agents is not empty %}
            <select name="agent" class="form-input">
                <option value="">Tous les agents</option>
                {% for agent in agents %}
                    <option value="{{ agent.id }}" {{ filter.agent and filter.agent.id == agent.id ? 'selected' }}>{{ agent.fullName }}</option>
                {% endfor %}
            </select>
        {% endif %}
        <div class="flex flex-wrap items-center gap-4 md:col-span-2 xl:col-span-1">
            <label class="inline-flex items-center gap-2 text-sm text-slate-600"><input type="checkbox" name="en_cours" value="1" {{ filter.openOnly ? 'checked' }} class="rounded border-slate-300"> En cours</label>
            <label class="inline-flex items-center gap-2 text-sm text-slate-600"><input type="checkbox" name="impayes" value="1" {{ filter.unpaidOnly ? 'checked' }} class="rounded border-slate-300"> Impayés</label>
            <button type="submit" class="btn btn-primary">Filtrer</button>
        </div>
    </form>

    <div class="card overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-200 text-sm">
                <thead class="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">
                    <tr>
                        <th class="px-4 py-3">Dossier</th>
                        <th class="px-4 py-3">Client</th>
                        <th class="px-4 py-3">Ambassade</th>
                        <th class="px-4 py-3">Statut</th>
                        <th class="px-4 py-3">Agent</th>
                        <th class="px-4 py-3 text-right">Solde</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    {% for dossier in dossiers %}
                        <tr class="cursor-pointer hover:bg-slate-50" onclick="Turbo.visit('{{ path('app_dossier_show', {id: dossier.id}) }}')">
                            <td class="px-4 py-3">
                                <a href="{{ path('app_dossier_show', {id: dossier.id}) }}" class="font-semibold text-brand-700 hover:text-brand-900">{{ dossier.reference }}</a>
                                <p class="text-xs text-slate-500">{{ dossier.visaType.label }} · {{ dossier.createdAt|date('d/m/Y') }}</p>
                            </td>
                            <td class="px-4 py-3">
                                <p class="font-medium text-slate-900">{{ dossier.client.fullName }}</p>
                                <p class="font-mono text-xs text-slate-500">{{ dossier.client.passportNumber }}</p>
                            </td>
                            <td class="px-4 py-3 text-slate-600">{{ dossier.embassy.name }}</td>
                            <td class="px-4 py-3">{{ include('dossier/_status.html.twig') }}</td>
                            <td class="px-4 py-3 text-slate-600">{{ dossier.assignedAgent ? dossier.assignedAgent.fullName : '—' }}</td>
                            <td class="px-4 py-3 text-right whitespace-nowrap">
                                {% if dossier.feeAmount == 0 %}
                                    <span class="text-slate-400">—</span>
                                {% elseif dossier.balance > 0 %}
                                    <span class="font-medium text-red-600">{{ dossier.balance|fcfa }}</span>
                                {% else %}
                                    <span class="badge bg-emerald-100 text-emerald-800">Soldé</span>
                                {% endif %}
                            </td>
                        </tr>
                    {% else %}
                        <tr><td colspan="6" class="px-4 py-10 text-center text-slate-500">Aucun dossier trouvé.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% if dossiers.pageCount > 1 %}
            <div class="border-t border-slate-100 px-4 py-3">{{ knp_pagination_render(dossiers) }}</div>
        {% endif %}
    </div>
    <p class="mt-3 text-xs text-slate-500">{{ dossiers.totalItemCount }} dossier{{ dossiers.totalItemCount > 1 ? 's' }}</p>
{% endblock %}