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

{% block title %}Numerotation - Administration - Association E-Cosplay{% endblock %}

{% block admin_content %}
<div class="page-container">
    <h1 class="text-2xl font-bold heading-page mb-8">Numerotation des commandes</h1>

    {% for type, messages in app.flashes %}
        {% for message in messages %}
            <div class="mb-6 p-4 glass font-medium text-sm" style="border-color: {{ type == 'success' ? 'rgba(34,197,94,0.3)' : 'rgba(220,38,38,0.3)' }}; color: {{ type == 'success' ? '#166534' : '#991b1b' }};">
                {{ message }}
            </div>
        {% endfor %}
    {% endfor %}

    <div class="flex flex-col gap-8">

        <section>
            <h2 class="text-xl font-bold uppercase mb-4">Prochain numero</h2>
            <div class="glass p-6">
                <div class="flex items-center gap-4 mb-6">
                    <div>
                        <p class="text-xs font-bold uppercase tracking-wider text-gray-500 mb-1">Prochain numero genere</p>
                        <p class="text-3xl font-bold text-[#fabf04]">{{ nextNumber }}</p>
                    </div>
                </div>

                <div class="border-t border-white/20 pt-6">
                    <h3 class="text-sm font-bold uppercase tracking-wider mb-3">Modifier le prochain numero</h3>
                    <p class="text-xs text-gray-500 mb-4">Utilisez cette fonction si des factures ont ete creees en dehors du CRM et que vous devez ajuster la numerotation pour eviter les doublons.</p>
                    <form method="post" action="{{ path('app_admin_order_number_update') }}" class="flex flex-col sm:flex-row items-start sm:items-end gap-3">
                        <div class="flex-1 w-full sm:w-auto">
                            <label for="next_number" class="block text-xs font-bold uppercase tracking-wider mb-2 text-gray-600">Prochain numero souhaite</label>
                            <input type="text" id="next_number" name="next_number" required
                                   value="{{ nextNumber }}"
                                   pattern="\d{2}/\d{4}-\d{5}"
                                   placeholder="MM/YYYY-XXXXX"
                                   class="input-glass w-full sm:w-64 px-4 py-3 text-sm font-medium font-mono">
                        </div>
                        <button type="submit" class="btn-gold px-6 py-3 text-sm font-bold uppercase tracking-wider text-gray-900">
                            Mettre a jour
                        </button>
                    </form>
                    <p class="text-[10px] text-gray-400 mt-2">Format : MM/YYYY-XXXXX (ex: 04/2026-00042)</p>
                </div>
            </div>
        </section>

        <section>
            <h2 class="text-xl font-bold uppercase mb-4">Derniers numeros generes</h2>
            <div class="glass overflow-hidden">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="glass-dark" >
                            <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-wider text-white/80">Numero</th>
                            <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-wider text-white/80">Date de creation</th>
                            <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-wider text-white/80">Statut</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for order in lastOrders %}
                            <tr class="border-b border-white/10 hover:bg-white/30 transition-colors">
                                <td class="px-4 py-3 font-mono font-bold">{{ order.numOrder }}</td>
                                <td class="px-4 py-3 text-gray-500">{{ order.createdAt|date('d/m/Y H:i:s') }}</td>
                                <td class="px-4 py-3 text-center">
                                    {% if order.used %}
                                        <span class="px-2 py-0.5 bg-green-500/20 text-green-700 font-bold uppercase text-[10px]">Utilise</span>
                                    {% else %}
                                        <span class="px-2 py-0.5 bg-gray-500/20 text-gray-600 font-bold uppercase text-[10px]">Reserve</span>
                                    {% endif %}
                                </td>
                            </tr>
                        {% else %}
                            <tr>
                                <td colspan="3" class="px-4 py-8 text-center text-gray-400 font-bold">Aucun numero genere.</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </section>

    </div>
</div>
{% endblock %}
