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

{% block body %}
<style>
.restitution-wrapper {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: 'Inter', sans-serif;
    color: #1f2937;
}

.restitution-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 32px;
    box-shadow: 0 12px 35px rgba(0,0,0,0.1);
}

.restitution-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 30px;
}

.restitution-header i {
    font-size: 34px;
    color: #2563eb;
}

.restitution-header h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
}

.subtitle {
    font-size: 14px;
    color: #6b7280;
}

.section-box {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 22px;
}

.table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 24px;
}

.table th {
    background: #f3f4f6;
    font-size: 14px;
    font-weight: 600;
    padding: 12px;
    border: 1px solid #e5e7eb;
}

.table td {
    padding: 12px;
    border: 1px solid #e5e7eb;
    font-size: 14px;
}

.badge {
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
}

.bg-warning { background-color: #facc15; color: #000; }
.bg-success { background-color: #16a34a; color: #fff; }
.bg-info { background-color: #0284c7; color: #fff; }
.bg-danger { background-color: #dc2626; color: #fff; }
.bg-secondary { background-color: #6b7280; color: #fff; }

.btn-sm {
    padding: 6px 10px;
    font-size: 12px;
}
</style>

<div class="restitution-wrapper">
<div class="restitution-card">

{% for label, messages in app.flashes %}
    {% for message in messages %}
        <div class="alert alert-{{ label }}">
            {{ message }}
        </div>
    {% endfor %}
{% endfor %}
<!-- HEADER -->
<div class="restitution-header">
    <i class="bi bi-journal-text"></i>
    <div>
        <h2>Mouvements de la caisse</h2>
        <div class="subtitle">
            Caisse : {{ caisse.nom }}
        </div>
    </div>
</div>

<!-- ================= FILTER DATE ================= -->
<div class="section-box">
    <form method="get" style="display:flex; gap:15px; align-items:end; flex-wrap:wrap;">

        <div>
            <label style="font-size:13px; color:#6b7280;">Date début</label><br>
            <input type="date"
                   name="dateDebut"
                   value="{{ dateDebut }}"
                   style="padding:6px 10px; border:1px solid #e5e7eb; border-radius:8px;">
        </div>

        <div>
            <label style="font-size:13px; color:#6b7280;">Date fin</label><br>
            <input type="date"
                   name="dateFin"
                   value="{{ dateFin }}"
                   style="padding:6px 10px; border:1px solid #e5e7eb; border-radius:8px;">
        </div>

        <div>
            <button type="submit"
                    style="background:#2563eb; color:white; padding:8px 16px; border:none; border-radius:8px; cursor:pointer;">
                Filtrer
            </button>
        </div>

   

    </form>
</div>
<!-- ================================================= -->

<!-- TABLE -->
<table class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Type</th>
            <th>Montant</th>
            <th>Responsable / Société</th>
            <th>Date</th>
            <th>Statut</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        {% for mov in movements %}
        <tr>

            <td>{{ mov.id }}</td>

            {% if mov.type == 'operation' %}
                <td><span class="badge bg-warning">Opération</span></td>
                <td>{{ mov.montant }} DT</td>
                <td>{{ mov.agent ? mov.agent.nom ~ ' ' ~ mov.agent.prenom : '-' }}</td>

            {% elseif mov.type == 'transaction' %}
                <td><span class="badge bg-info">Transaction</span></td>
                <td>{{ mov.montant }} DT</td>
                <td>{{ mov.agent ? mov.agent.nom ~ ' ' ~ mov.agent.prenom : '-' }}</td>

            {% elseif mov.type == 'alimentation' %}
                <td><span class="badge bg-success">Alimentation</span></td>
                <td>{{ mov.montant }} DT</td>
                <td>{{ mov.societe is defined ? mov.societe.Bsociete.nom : '-' }}</td>
            {% endif %}

            <td>{{ mov.dateCreation|date('d/m/Y H:i') }}</td>

            <!-- STATUT -->
      <!-- STATUT -->
<td>
    {% if mov.estCorrection is defined and mov.estCorrection %}
        <span class="badge bg-danger">Correction</span>
        

    {% elseif mov.operations is defined and mov.operations|length > 0 %}
        <span class="badge bg-warning text-dark">Corrigé</span>

        <div style="font-size:12px;color:#6b7280;">
            Corrigé par :
            {% for id in mov.operations %}
                #{{ id }}{% if not loop.last %}, {% endif %}
            {% endfor %}
        </div>

    {% else %}
        <span class="badge bg-secondary">Normal</span>
    {% endif %}
</td>

<!-- ACTION -->
<td>
    {% if (mov.estCorrection is defined and mov.estCorrection) 
        or (mov.operations is defined and mov.operations|length > 0) %}

        <button class="btn btn-secondary btn-sm" disabled>
            Indisponible
        </button>

    {% else %}

        {% if mov.type != "transaction" %}
            <a href="{{ path('caisse_correction', { type: mov.type, id: mov.id }) }}"
               class="btn btn-warning btn-sm">
                Corriger
            </a>
        {% endif %}

    {% endif %}
</td>

        </tr>
        {% endfor %}
    </tbody>
</table>

</div>
</div>

{% endblock %}