{% 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>Liste des Articles de {{ deposant.nom}}</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 : {{ bannerData.solde }}</h
                            </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>
                                </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 }}</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 p-0">
            <table id="articlesTable" class="table align-items-center mb-0">
                <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>
                            <center>
                                {% if article.status == 'en stock' %}
                                <a href="{{ path('depo_mark_article_sold', {deposant_id: deposant_id, id: article.id}) }}" class="btn btn-secondary btn-sm">Vendre</a> |
                                <a href="{{ path('depo_admin_return_article', {deposant_id: deposant_id, id: article.id}) }}" class="btn btn-danger btn-sm">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">Marquer comme payé</a>
                                {% endif %}
                            </center>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="5"><center>Aucun article trouvé</center></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        $('#articlesTable').DataTable({
            "paging": true,
            "ordering": true,
            "info": true,
            "searching": true,
            "language": {
                "url": "//cdn.datatables.net/plug-ins/1.13.6/i18n/fr-FR.json"
            }
        });
    });
</script>
{% endblock %}