{% extends 'dashboard/base.twig' %}

{% block title %}Gestion des Promotions{% endblock %}
{% block title_header %}Gestion des <span class="text-blue-500">Promotions</span>{% endblock %}

{% block actions %}
    <a data-turbo="false" href="{{ path('app_crm_promotion_add') }}" class="flex items-center space-x-2 px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white text-[10px] font-black uppercase tracking-[0.2em] rounded-xl transition-all shadow-lg shadow-blue-600/20 group">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4" />
        </svg>
        <span>Nouvelle Promotion</span>
    </a>
{% endblock %}

{% block body %}
    <div class="backdrop-blur-xl bg-[#1e293b]/40 border border-white/5 rounded-[2.5rem] overflow-hidden shadow-2xl animate-in fade-in duration-700">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                <tr class="border-b border-white/5 bg-black/20">
                    <th class="px-6 py-5 text-[10px] font-black text-slate-300 uppercase tracking-[0.2em]">Nom</th>
                    <th class="px-6 py-5 text-[10px] font-black text-slate-300 uppercase tracking-[0.2em]">Pourcentage</th>
                    <th class="px-6 py-5 text-[10px] font-black text-slate-300 uppercase tracking-[0.2em]">Période</th>
                    <th class="px-6 py-5 text-[10px] font-black text-slate-300 uppercase tracking-[0.2em] text-right">Actions</th>
                </tr>
                </thead>
                <tbody class="divide-y divide-white/5">
                {% for promotion in promotions %}
                    <tr class="group hover:bg-white/[0.02] transition-colors">
                        <td class="px-6 py-4">
                            <span class="text-sm font-bold text-white group-hover:text-blue-400 transition-colors capitalize">{{ promotion.name }}</span>
                        </td>
                        <td class="px-6 py-4">
                            <span class="px-3 py-1 bg-purple-500/10 border border-purple-500/20 text-purple-400 rounded-lg text-[10px] font-black uppercase tracking-widest">-{{ promotion.percentage }}%</span>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex flex-col text-xs text-slate-400">
                                <span>Du {{ promotion.dateStart|date('d/m/Y H:i') }}</span>
                                <span>Au {{ promotion.dateEnd|date('d/m/Y H:i') }}</span>
                            </div>
                        </td>
                        <td class="px-6 py-4 text-right">
                            <div class="flex items-center justify-end space-x-2">
                                <a data-turbo="false" href="{{ path('app_crm_promotion_edit', {id: promotion.id}) }}" class="p-2 bg-blue-600/10 hover:bg-blue-600 text-blue-500 hover:text-white rounded-xl transition-all border border-blue-500/20 shadow-lg shadow-blue-600/5">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
                                </a>
                                <form method="post" action="{{ path('app_crm_promotion_delete', {id: promotion.id}) }}" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cette promotion ?');" class="inline-block">
                                    <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ promotion.id) }}">
                                    <button type="submit" class="p-2 bg-rose-500/10 hover:bg-rose-500 text-rose-500 hover:text-white rounded-xl transition-all border border-rose-500/20 shadow-lg shadow-rose-500/5">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                {% else %}
                    <tr><td colspan="4" class="py-24 text-center italic text-slate-300 text-[10px] font-black uppercase tracking-[0.2em]">Aucune promotion</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {# PAGINATION #}
    {% if promotions.getTotalItemCount is defined and promotions.getTotalItemCount > promotions.getItemNumberPerPage %}
        <div class="mt-8 flex justify-center custom-pagination">{{ knp_pagination_render(promotions) }}</div>
    {% endif %}

    <style>
        .custom-pagination nav ul { @apply flex space-x-2; }
        .custom-pagination nav ul li span,
        .custom-pagination nav ul li a {
            @apply px-4 py-2 rounded-xl bg-[#1e293b]/40 backdrop-blur-md border border-white/5 text-slate-400 text-xs font-bold transition-all;
        }
        .custom-pagination nav ul li.active span {
            @apply bg-blue-600 border-blue-500 text-white shadow-lg shadow-blue-600/20;
        }
        .custom-pagination nav ul li a:hover {
            @apply bg-white/10 text-white border-white/20;
        }
    </style>
{% endblock %}
