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

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

/* Header */
.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;
}

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

/* Inputs */
label {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    display: block;
}

input[type="date"] {
    width: 100%;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid #d1d5db;
    margin-bottom: 12px;
}

input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
    outline: none;
}

/* Buttons */
.btn {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 14px;
}

.btn-primary {
    background-color: #2563eb;
    border: none;
}

.btn-danger {
    background-color: #dc2626;
    border: none;
}

/* Summary cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin-top: 10px;
}

.stat-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 18px;
}

.stat-card h4 {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 6px;
}

.stat-card p {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

/* Table */
.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;
}

/* Badges */
.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;
}
</style>

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

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

<!-- FERMETURE -->
<form method="POST" action="{{ path('fermeture_caisse') }}" class="section-box">
    <input type="hidden" name="dateDebut" value="{{ dateDebut }}">
    <input type="hidden" name="dateFin" value="{{ dateFin }}">
    <button type="submit" class="btn btn-danger w-100">
        <i class="bi bi-lock-fill me-2"></i>
        Enregistrer l'etat de la caisse
    </button>
</form>

<!-- FILTER -->
<form method="GET" action="{{ path('caisse_show', {id: caisse.id}) }}" class="section-box">
    <div class="row">
        <div class="col-md-5">
            <label>Début</label>
            <input type="date" name="dateDebut" value="{{ dateDebut }}">
        </div>
        <div class="col-md-5">
            <label>Fin</label>
            <input type="date" name="dateFin" value="{{ dateFin }}">
        </div>
        <div class="col-md-2 d-flex align-items-end">
            <button type="submit" class="btn btn-primary w-100">
                <i class="bi bi-funnel me-1"></i>
                Filtrer
            </button>
        </div>
    </div>
</form>

<!-- STATS -->
<div class="stats-grid">
    <div class="stat-card">
        <h4>Total caisse</h4>
        <p style="color:#16a34a">{{ montantTotal }} TND</p>
    </div>

    <div class="stat-card">
        <h4>Transactions non justifiées</h4>
        <p>{{ totalTransactions }} TND</p>
    </div>

    <div class="stat-card">
        <h4>Cash restant</h4>
        <p>{{ montantRestant }} TND</p>
    </div>
</div>

<!-- TABLE -->
<table class="table">
    <thead>
        <tr>
            <th>Type</th>
            <th>Débit</th>
            <th>Crédit</th>
            <th>Responsable / Société</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>
        {% for mov in movements %}
        <tr>
            {% if mov.type == 'operation' %}
                <td><span class="badge bg-warning">Opération</span></td>
                <td>-</td>
                <td>{{ mov.montant }} DT</td>
                <td>{{ mov.agent ? mov.agent.nom ~ ' ' ~ mov.agent.prenom : '-' }}</td>
            {% else %}
                <td><span class="badge bg-success">Alimentation</span></td>
                <td>{{ mov.montant }} DT</td>
                <td>-</td>
                <td>{{ mov.societe.nom }}</td>
            {% endif %}
            <td>{{ mov.dateCreation|date('d/m/Y H:i') }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

</div>
</div>
{% endblock %}