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

{% block styles %}
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

<style>

/* override base wrapper width */
.content-wrapper{
    max-width: 100% !important;
    margin: 0 !important;
    padding: 20px !important;
}

/* page layout */
.restitution-card{
    background:white;
    border-radius:12px;
    padding:25px;
    box-shadow:0 4px 14px rgba(0,0,0,0.08);
}

/* header */
.restitution-header{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:25px;
}

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

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

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

/* filter section */
.section-box{
    background:#f9fafb;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:15px;
    margin-bottom:20px;
}

/* table */
.table-container{
    width:100%;
}

.table{
    width:100%;
}

.table th{
    background:#f1f5f9;
    font-weight:600;
}

.table td, .table th{
    padding:10px;
    text-align:center;
}

/* badges */
.badge{
    padding:5px 8px;
    border-radius:8px;
    font-size:12px;
}

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

</style>
{% endblock %}

{% block body %}

<div class="restitution-card">

{% for label, messages in app.flashes %}
    {% for message in messages %}
        <div class="alert alert-{{ label }}">{{ message }}</div>
    {% endfor %}
{% endfor %}

<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>

<div class="section-box">

<form method="get" class="row g-3 align-items-end">

<div class="col-md-3">
<label class="form-label">Date début</label>
<input type="date" name="dateDebut" value="{{ dateDebut }}" class="form-control">
</div>

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

<div class="col-md-2">
<button type="submit" class="btn btn-primary w-100">
<i class="bi bi-search"></i> Filtrer
</button>
</div>

</form>

</div>

<div class="table-container">

<table class="table table-hover" id="movementsTable">

<thead>
<tr>
<th>ID</th>
<th>Type</th>
<th>N°</th>
<th>Montant</th>
<th>Responsable / Société</th>
<th>Date Échéance</th>
<th>Description</th>
<th>Date</th>
<th>Statut</th>
<th>Action</th>
</tr>
</thead>

<tbody>

{% for mov in movements %}

<tr>

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

<td>
{% if mov.type == 'operation' %}
    {% if mov.SOUStype == 'PRE' %}
        <span class="badge bg-warning">Opération PRE</span>
    {% elseif mov.SOUStype == 'JUSTIFICATION' %}
        <span class="badge bg-danger">Dépense Direct</span>
    {% else %}
        <span class="badge bg-warning">Opération</span>
    {% endif %}
{% elseif mov.type == 'transaction' %}
    {% if mov.SOUStype == 'PRE' %}
        <span class="badge bg-info">Transaction PRE</span>
    {% else %}
        <span class="badge bg-primary">Transaction</span>
    {% endif %}
{% elseif mov.type == 'alimentation' %}
    <span class="badge bg-success">Alimentation</span>
{% endif %}
</td>

<td>{{ mov.numeroseq ?? '-' }}</td>

<td><strong>{{ mov.montant }} DT</strong></td>

<td>
{% if mov.agent is defined and mov.agent %}
    {{ mov.agent.nom }} {{ mov.agent.prenom }}
{% elseif mov.societe is defined %}
    {{ mov.societe.Bsociete.nom }}
{% else %}
-
{% endif %}
</td>

<td>
{% if mov.dateEcheance %}
{{ mov.dateEcheance|date('d/m/Y') }}
{% else %}
-
{% endif %}
</td>

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

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

<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">Corrigé</span>

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

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

</td>

<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 %}

{% block scripts %}

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script>

$(document).ready(function(){

$('#movementsTable').DataTable({
pageLength:10,
language:{
search:"🔎 Recherche :",
lengthMenu:"Afficher _MENU_ lignes",
info:"Affichage _START_ à _END_ sur _TOTAL_",
paginate:{next:"Suivant",previous:"Précédent"}
}
});

});

</script>

{% endblock %}