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

{% block body %}

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

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

    <div class="col-md-3">
        <select name="personnel" class="form-select"  id="personelSelect">
            <option value="">-- Choisir un personnel --</option>
            {% for personnel in personnels %}
                <option value="{{ personnel.id }}"
                    {% if selectedPersonnel and selectedPersonnel.id == personnel.id %}selected{% endif %}>
                    {{ personnel.nom }} {{ personnel.prenom }}
                </option>
            {% endfor %}
        </select>
    </div>

    <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">Filtrer</button>
    </div>

</form>

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

{% if selectedPersonnel %}

<h5>
    Personnel : {{ selectedPersonnel.nom }} {{ selectedPersonnel.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>
            <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 %}
                </td>

                <td class="text-danger">
                    {% if m.credit > 0 %}
                        {{ m.credit|number_format(3,'.',' ') }} DT
                    {% 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 () {
    $('#personelSelect').select2({
        placeholder: "Rechercher un agent...",
        width: '100%'
    });
});
</script>
{% endblock %}