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

{% block body %}
<div class="card mb-4">
    <div align="right">
        <a href="{{ path('depo_add_article', {id: deposant_id}) }}" class="btn btn-success">
            Ajouter Articles
        </a>
    </div>
    <div class="card-header pb-0">
        <center><h4>Tableau de Bord de <span style="font-size: 1.5em; font-weight: bold;">{{ deposant.nom }}</span></h4></center>
    </div>
    <div class="card-body px-0 pt-0 pb-2">
    <!-- Compte Section -->
            <section class="account-banner py-4">
                <div class="container">
                    <div class="row justify-content-center mb-4">
                        <div class="col-12 col-md-6">
                            <div class="text-center">
            
                                <h4 class="fw-bold"> Montant à encaisser :<span style="font-size: 1.5em; font-weight: bold;"> {{ bannerData.solde }} DT</span></h4>
                            </div>
                        </div>
                    </div>
                    <div class="row g-3">
                        <!-- DEPOT -->
                        <div class="col-6 col-md-3">
                            <div class="card shadow-sm border-0 h-100">
                                <div class="card-body text-center">
                                    <i class="bi bi-server text-primary fs-1"></i>
                                    <h5 class="fw-bold mt-2">DÉPÔT</h5>
                                    <p class="text-primary mb-0">Article Déposés : {{ bannerData.depot }}</p>
                                    <p class="text-primary mb-0">Stock actuel : {{ bannerData.enstock }}</p>
                                </div>
                            </div>
                        </div>
                        <!-- VENDU -->
                        <div class="col-6 col-md-3">
                            <div class="card shadow-sm border-0 h-100">
                                <div class="card-body text-center">
                                    <i class="bi bi-cart text-primary fs-1"></i>
                                    <h5 class="fw-bold mt-2">VENDU</h5>
                                    <p class="text-primary mb-1">Articles : {{ bannerData.nbrevendu }}</p>
                                    <p class="text-primary mb-0">Total : {{ bannerData.vendu }} DT</p>
                                </div>
                            </div>
                        </div>
                        <!-- PAYE -->
                        <div class="col-6 col-md-3">
                            <div class="card shadow-sm border-0 h-100">
                                <div class="card-body text-center">
                                    <i class="bi bi-currency-dollar text-primary fs-1"></i>
                                    <h5 class="fw-bold mt-2">PAYÉ</h5>
                                    <p class="text-primary mb-1">Articles : {{ bannerData.nbrepaye }}</p>
                                    <p class="text-primary mb-0">Total : {{ bannerData.paye }} DT</p>
                                </div>
                            </div>
                        </div>
                        <!-- RETOUR -->
                        <div class="col-6 col-md-3">
                            <div class="card shadow-sm border-0 h-100">
                                <div class="card-body text-center">
                                    <i class="bi bi-arrow-repeat text-primary fs-1"></i>
                                    <h5 class="fw-bold mt-2">RETOUR</h5>
                                    <p class="text-primary mb-0">Articles Retournés : {{ bannerData.retour }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        <div class="table-responsive">
    <table id="articlesTable" class="table table-striped table-bordered nowrap" style="width:100%">
                <thead>
                    <tr>
                        <th>Code</th>
                        <th>Libelle</th>
                        <th>Status</th>
                        <th>Prix de vente</th>
                        <th><center>Actions</center></th>
                    </tr>
                </thead>
                <tbody>
                    {% for article in articles %}
                    <tr>
                        <td>{{ article.codeArticle }}</td>
                        <td>{{ article.libelle }}</td>
                        <td>{{ article.status }}</td>
                        <td>{{ article.prixDeVente }}</td>
                  <td class="text-center">
                        <div class="d-flex flex-column flex-md-row justify-content-center">
                            {% if article.status == 'en stock' %}
                                <a href="{{ path('admin_print_article', { id: article.id }) }}" class="btn btn-secondary btn-sm m-1" target="_blank">Imprimer</a>
                                <a href="{{ path('depo_mark_article_sold', {deposant_id: deposant_id, id: article.id}) }}" class="btn btn-success btn-sm m-1">Vendre</a>
                                <a href="{{ path('depo_admin_return_article', {deposant_id: deposant_id, id: article.id}) }}" class="btn btn-danger btn-sm m-1">Retourner</a>
                            {% elseif article.status == 'vendu' %}
                                <a href="{{ path('depo_mark_article_paid', {deposant_id: deposant_id, id: article.id}) }}" class="btn btn-info btn-sm m-1">Marquer comme payé</a>
                            {% endif %}
                        </div>
                    </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="5"><center>Aucun article trouvé</center></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
  $('#articlesTable').DataTable({
    "responsive": true,
    "paging": true,
    "ordering": true,
    "info": true,
    "searching": true,
    "pageLength": 100,
    "lengthMenu": [[50, 100, 200, -1], [50, 100, 200, "Tous"]],
    "language": {
        "url": "//cdn.datatables.net/plug-ins/1.13.6/i18n/fr-FR.json"
    }
});
</script>
{% endblock %}