{% extends 'base.html.twig' %}

{% block body %}

<h3>📄 Relevé détaillé par Agent</h3>

<form method="get" class="row g-2 mb-4">

    <!-- AGENT FILTER -->
    <div class="col-md-3">
        <select name="agent" class="form-select" id="agentSelect">
            <option value="">-- Choisir un agent --</option>
            {% for agent in agents %}
                <option value="{{ agent.id }}"
                    {% if selectedAgent and selectedAgent.id == agent.id %}selected{% endif %}>
                    {{ agent.nom }} {{ agent.prenom }}
                </option>
            {% endfor %}
        </select>
    </div>

    <!-- DATE FILTERS -->
    <div class="col-md-2">
        <input type="date" name="debut" value="{{ dateDebut }}" class="form-control">
    </div>

    <div class="col-md-2">
        <input type="date" name="fin" value="{{ dateFin }}" class="form-control">
    </div>

    <div class="col-md-2">
        <button class="btn btn-primary w-100">Filtrer</button>
    </div>

</form>

{% if selectedAgent %}
<a href="{{ path('caisse_releve_agent', {
    agent: selectedAgent.id,
    debut: dateDebut,
    fin: dateFin,
    export: 'pdf'
}) }}" class="btn btn-danger mb-3">
    Export PDF
</a>

<h5>Agent : {{ selectedAgent.nom }} {{ selectedAgent.prenom }}</h5>

<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Date</th>
            <th>Débit (Transaction)</th>
            <th>Crédit (Opération)</th>
            <th>Solde</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table-info">
            <td>{{ dateDebut ? dateDebut|date('d/m/Y') : '-' }} Initial</td>
            <td>{{ debitInitial }} DT</td>
            <td>{{ creditInitial }} DT</td>
            <td>{{ soldeInitial }} DT</td>
        </tr> 
        {% for m in mouvements %}
            <tr>
                <td>{{ m.date|date('d/m/Y H:i') }}</td>
                <td class="text-success">
                    {% if m.debit > 0 %}{{ m.debit|number_format(3,'.',' ') }} DT{% endif %}
                    {% if m.exce is defined and m.exce > 0 %}
                        <br><small class="text-warning">Excédentaire: {{ m.exce|number_format(3,'.',' ') }}</small>
                    {% endif %}
                </td>
                <td class="text-danger">
                    {% if m.credit > 0 %}{{ m.credit|number_format(3,'.',' ') }} DT{% endif %}
                    {% if m.cashe is defined and m.cashe > 0 %}
                        <br><small class="text-warning">Cash: {{ m.cashe|number_format(3,'.',' ') }}</small>
                    {% endif %}
                </td>
                <td class="{% if m.solde < 0 %}text-danger{% else %}text-success{% endif %} fw-bold">
                    {{ m.solde|number_format(3,'.',' ') }} DT
                </td>
            </tr>
        {% else %}
            <tr>
                <td colspan="4" class="text-center">Aucun mouvement trouvé</td>
            </tr>
        {% endfor %}
    </tbody>
</table>
{% endif %}

<!-- Select2 for agent search -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
$(document).ready(function () {
    $('#agentSelect').select2({
        placeholder: "Rechercher un agent...",
        width: '100%'
    });
});
</script>

{% endblock %}