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

{% block title %}Accueil | {{ parent() }}{% endblock %}

{% block body %}
    <div class="breadcrumb">
        <h1 class="mr-2">{{ app_name }}</h1>
        <ul>
            <li><a href="{{ path('default') }}">Accueil</a></li>
            <li>{{ app_name }}</li>
        </ul>
    </div>
    <div class="separator-breadcrumb border-top"></div>
    <div class="row">
        <!-- ICON BG-->
        <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="card card-icon-bg card-icon-bg-primary o-hidden mb-4">
                <div class="card-body text-center"><i class="i-Add-User"></i>
                    <div class="content">
                        <p class="text-muted mt-2 mb-0">Clients</p>
                        <p class="text-primary text-24 line-height-1 mb-2">{{ customers|length }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="card card-icon-bg card-icon-bg-primary o-hidden mb-4">
                <div class="card-body text-center"><i class="i-Financial"></i>
                    <div class="content">
                        <p class="text-muted mt-2 mb-0">Commande</p>
                        <p class="text-primary text-24 line-height-1 mb-2">{{ saleOrders|length }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="card card-icon-bg card-icon-bg-primary o-hidden mb-4">
                <div class="card-body text-center"><i class="i-Checkout-Basket"></i>
                    <div class="content">
                        <p class="text-muted mt-2 mb-0">Articles</p>
                        <p class="text-primary text-24 line-height-1 mb-2">{{ products|length }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="card card-icon-bg card-icon-bg-primary o-hidden mb-4">
                <div class="card-body text-center"><i class="i-Conference"></i>
                    <div class="content">
                        <p class="text-muted mt-2 mb-0">Utilisateurs</p>
                        <p class="text-primary text-24 line-height-1 mb-2">0</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 col-md-12">
            <div class="card mb-4">
                <div class="card-body">
                    <div class="card-title">Commandes </div>
                    <div>
                        <div class="table-responsive">
                            <table class="table text-center" id="user_table">
                                <thead>
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">Client</th>
                                        <th scope="col">Montant</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for sale_order in saleOrders %}
                                        <tr>
                                            <th scope="row">{{ sale_order.code }}</th>
                                            <td>{{ sale_order.customer.name }}</td>
                                            <td>{{ sale_order.total|number_format(0, ',', ' ') }}</td>
                                            <td>
                                                <a href="{{ path('sale_order_show', {'id': sale_order.id}) }}" onclick="$('.loader').addClass('is-active');" class="btn btn-success btn-sm"><i class="fa fa-eye"></i></a>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {# <div class="col-lg-4 col-sm-12">
            <div class="card mb-4">
                <div class="card-body">
                    <div class="card-title">Vente par produit</div>
                    <div id="echartPie" style="height: 300px;"></div>
                </div>
            </div>
        </div> #}
    </div>
{% endblock %}