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

{% block title %}Dashborad{% endblock %}

{% block body %}
    <div class="grid grid-cols-12 gap-6">


    <!-- BEGIN: General Report -->
    <div class="col-span-12 mt-8">
        <div class="intro-y flex items-center h-10">
            <h2 class="text-lg font-medium truncate mr-5">
                {{ block ('title') }}
            </h2>
        </div>
        <div class="grid grid-cols-12 gap-6 mt-5">
            <div class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y">
                <div class="report-box zoom-in">
                    <div class="box p-5">
                        <div class="flex">
                            <i data-feather="shopping-cart" class="report-box__icon text-theme-10"></i>
                            <div class="ml-auto">
                                <div class="report-box__indicator bg-theme-10 tooltip cursor-pointer" title="Total commande"></div>
                            </div>
                        </div>
                        <div class="text-3xl font-bold leading-8 mt-6">{{ orders | length }}</div>
                        <div class="text-base text-gray-600 mt-1">Commandes</div>
                    </div>
                </div>
            </div>
            <div class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y">
                <div class="report-box zoom-in">
                    <div class="box p-5">
                        <div class="flex">
                            <i data-feather="user" class="report-box__icon text-theme-6"></i>
                            <div class="ml-auto">
                                <div class="report-box__indicator bg-theme-6 tooltip cursor-pointer" title="Total client"></div>
                            </div>
                        </div>
                        <div class="text-3xl font-bold leading-8 mt-6">{{ customers | length }}</div>
                        <div class="text-base text-gray-600 mt-1">Clients</div>
                    </div>
                </div>
            </div>
            <div class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y">
                <div class="report-box zoom-in">
                    <div class="box p-5">
                        <div class="flex">
                            <i data-feather="monitor" class="report-box__icon text-theme-12"></i>
                            <div class="ml-auto">
                                <div class="report-box__indicator bg-theme-12 tooltip cursor-pointer" title="Total produit"></div>
                            </div>
                        </div>
                        <div class="text-3xl font-bold leading-8 mt-6">{{ products | length }}</div>
                        <div class="text-base text-gray-600 mt-1">Produits</div>
                    </div>
                </div>
            </div>
            <div class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y">
                <div class="report-box zoom-in">
                    <div class="box p-5">
                        <div class="flex">
                            <i data-feather="tool" class="report-box__icon text-theme-9"></i>
                            <div class="ml-auto">
                                <div class="report-box__indicator bg-theme-9 tooltip cursor-pointer" title="Total section"> </div>
                            </div>
                        </div>
                        <div class="text-3xl font-bold leading-8 mt-6">{{ sections | length }}</div>
                        <div class="text-base text-gray-600 mt-1">Sections</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END: General Report -->

    <!-- BEGIN: Official Store -->
    <div class="col-span-12 xl:col-span-8 mt-6">
        <div class="intro-y block sm:flex items-center h-10">
            <h2 class="text-lg font-medium truncate mr-5">
                Official Store
            </h2>
            <div class="sm:ml-auto mt-3 sm:mt-0 relative text-gray-700">
                <i data-feather="map-pin" class="w-4 h-4 z-10 absolute my-auto inset-y-0 ml-3 left-0"></i>
                <input type="text" class="input w-full sm:w-40 box pl-10" placeholder="Filter by city">
            </div>
        </div>
        <div class="intro-y box p-5 mt-12 sm:mt-5">
            <div>250 Official stores in 21 countries, click the marker to see location details.</div>
            <div class="report-maps mt-5 bg-gray-200 rounded-md" data-center="-6.2425342, 106.8626478" data-sources="/dist/json/location.json"></div>
        </div>
    </div>
    <!-- END: Official Store -->
    <!-- BEGIN: Weekly Best Sellers -->
    <div class="col-span-12 xl:col-span-4 mt-6">
        <div class="intro-y flex items-center h-10">
            <h2 class="text-lg font-medium truncate mr-5">
                Nos clients
            </h2>
        </div>
        <div class="mt-5">
            {% for customer in customers |slice(0, 4) %}
            <div class="intro-y">
                <div class="box px-4 py-4 mb-3 flex items-center zoom-in">
                    <div class="w-10 h-10 flex-none image-fit rounded-md overflow-hidden">
                        <img alt="customer" src="{{ asset('assets/images/profile-14.jpg') }}">
                    </div>
                    <div class="ml-4 mr-auto">
                        <div class="font-medium">{{customer.name}}</div>
                        <div class="text-gray-600 text-xs"></div>
                    </div>
                    <div class="py-1 px-2 rounded-full text-xs bg-theme-9 text-white cursor-pointer font-medium">{{ customer.orders | filter (o => o.finish == false)  | length }}</div>
                </div>
            </div>
            {% endfor %}

            <a href="" class="intro-y w-full block text-center rounded-md py-4 border border-dotted border-theme-15 text-theme-16">View More</a>
        </div>
    </div>
    <!-- END: Weekly Best Sellers -->
    </div>
{% endblock %}