{% extends '@EasyAdmin/page/content.html.twig' %}
{% import 'admin/order/_icons.html.twig' as icons %}

{% block main %}
    <style>
        .grid-content {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
            @media (max-width: 768px) {
                grid-template-columns: 1fr;
                max-width: 95vw;
            }
            gap: 20px;
            .suivi-commande {
                max-width: 550px;
                @media (max-width: 768px) {
                    max-width: 100%;
                    padding: 0 !important;
                }
            }

        }
    </style>
    <div class="px-4 py-5 pt-0">
        <h1>Tableau de bord</h1>
        <div class="row row-cols-6 gap-4 px-3">
            {% set statusStyle = {
                'NEW':                  { color: '#3b82f6', icon: 'new'   },
                'PENDING_TEXT':         { color: '#58d19c', icon: 'text'  },
                'PENDING_CREATION':     { color: '#6c757d', icon: 'clock'   },
                'BAT1':                 { color: '#f59e0b', icon: 'doc'   },
                'BAT2':                 { color: '#f59e0b', icon: 'doc'   },
                'BAT3':                 { color: '#f59e0b', icon: 'doc'   },
                'BAT4':                 { color: '#f59e0b', icon: 'doc'   },
                'BAT5':                 { color: '#f59e0b', icon: 'doc'   },
                'PENDING_CORRECTIONS':    { color: '#6c757d',   icon: 'eye'  },
                'VALIDATED':            { color: '#00b129', icon: 'doc' },
                'PENDING':              { color: '#6c757d', icon: 'clock' },
                'MANUFACTURING':    { color: '#6c757d',   icon: 'gear'  },
                'PENDING_DELIVERY':     { color: '#8b5cf6', icon: 'truck' },
                'DELIVERED':            { color: '#00b129', icon: 'check' },
                'CANCELLED':            { color: '#b3261e', icon: 'x'     },
            } %}
            {% for status in statuses %}
                {% set current = statusStyle[status.name] ?? { color: '#6c757d', icon: 'gear' } %}
                {% set count = statusCounts[status.value] ?? 0 %}
                {% if count > 0 %}
                    {% if status.value is same as "new_order" or status.value is same as 'pending_text' or status.value is same as 'pending_corrections' or status.value is same as 'pending_creation'%}
                    <div class="card p-0" style="border-radius: 12px; border: 3px solid #eff3f5; ">
                        <div class="p-3 pb-0" style="font-size: 40px; font-weight: bold;">
                            {{ statusCounts[status.value] ?? 0 }}
                        </div>
                        <div class="card-body p-3">
                            <div style="display: flex; align-items: center; gap: 10px;">
                                  <span style="width: 24px; height: 24px; padding:5px;display: inline-flex; border-radius: 50%; align-items: center; background-color: {{ current.color }};justify-content: center;">
                                {{ icons.icon(current.icon) }}
                            </span>
                                <h5 class="card-title">{{ status.label }}</h5>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                {% endif %}
            {% endfor %}
        </div>
    </div>
    <div class="grid-content">
        <div class=" max-w-7xl px-4 sm:py-24 lg:pt-0 sm:px-6 lg:px-8 suivi-commande">
            <div  class="relative isolate overflow-hidden bg-gray-900 pt-8 shadow-2xl rounded-4 sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0" style="padding: 10px; border-radius: 20px; ">
                <svg viewBox="0 0 1024 1024" aria-hidden="true"
                     class="absolute top-1/2 left-1/2 -z-10 size-256 -translate-y-1/2 mask-[radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0">
                    <circle r="512" cx="512" cy="512" fill="url(#759c1415-0410-454c-8f7c-9a820de03641)"
                            fill-opacity="0.7"/>
                    <defs>
                        <radialGradient id="759c1415-0410-454c-8f7c-9a820de03641">
                            <stop stop-color="#7775D6"/>
                            <stop offset="1" stop-color="#E935C1"/>
                        </radialGradient>
                    </defs>
                </svg>
                <div class="mx-auto max-w-md text-center lg:mx-0 lg:flex-auto lg:text-left" style="padding: 16px;">
                    <h2 class="text-3xl font-semibold tracking-tight text-balance text-sm-start text-white sm:text-4xl" >Retrouvez vos commandes</h2>
                    <p class="mt-6 text-lg/8 text-pretty text-gray-300 text-sm-start">Veuillez renseigner votre numéro de commande
                        ci-dessous afin de retrouver votre suivi</p>

                    <form name="search_order" method="post" action="{{ path('admin') }}" class="mt-5" data-turbo="true">
                        <label for="order-number" aria-label="Numero de commande"
                               class="block mb-2 font-medium text-white text-sm-start" style="display: block;">
                            Numero de commande
                        </label>
                        <input
                            id="order-number"
                            name="order-number"
                            type="text"
                            value=""
                            required
                            autofocus
                            class="w-full bg-body rounded-3 border border-gray-300 px-4 py-2 focus:border-indigo-500 focus:ring-4 focus:ring-indigo-100 outline-none transition"
                        >
                        <input
                            type="hidden"
                            name="_csrf_token"
                            value="{{ csrf_token('authenticate') }}"
                        >
                        <div class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
                            <button type="submit"
                                    class="w-full cursor-pointer rounded-3 bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-xs hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">
                                Rechercher
                            </button>
                        </div>
                    </form>

                    <div id="search-order-result"></div>
                </div>
            </div>
        </div>
        <div style="display: flex; flex-direction: column; gap: 10px;">
            <a href="{{ path('admin_order_index') }}"  class="rounded-3" style=" width: 250px; padding: 10px 22px; background-color: #101828; color: white; text-align: center;">Voir toutes les commandes</a>
            <a href="/documents/catalogue.pdf" target="_blank" class="rounded-3" style=" width: 250px; padding: 10px 22px; background-color: #101828; color: white; text-align: center;">Catalogue</a>
        </div>
    </div>
{% endblock %}