ludikevent_crm/templates/dashboard/formules.twig

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

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

{% block actions %}
    <div class="flex items-center space-x-3">
        {# Bouton Nouvelle Formule avec animation au survol #}
        <a data-turbo="false" href="{{ path('app_crm_formules_add', {type: 'pack'}) }}"
           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 hover:-translate-y-0.5 active:translate-y-0">
            <svg class="w-4 h-4 transform group-hover:rotate-90 transition-transform duration-300" 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 Formule</span>
        </a>
    </div>
{% 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" is="sortable-reorder">
                <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] w-16 text-center">
                        <svg class="w-4 h-4 mx-auto text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg>
                    </th>
                    <th class="px-6 py-5 text-[10px] font-black text-slate-300 uppercase tracking-[0.2em]">Visuel</th>
                    <th class="px-6 py-5 text-[10px] font-black text-slate-300 uppercase tracking-[0.2em]">Désignation</th>
                    <th class="px-6 py-5 text-[10px] font-black text-slate-300 uppercase tracking-[0.2em]">Type</th>
                    <th class="px-6 py-5 text-[10px] font-black text-slate-300 uppercase tracking-[0.2em]">Statut</th>
                    <th class="px-6 py-5 text-[10px] font-black text-slate-300 uppercase tracking-[0.2em] text-center">Tarif</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" url="{{ path('app_crm_formules') }}">
                {% for formule in formules %}
                    <tr class="group hover:bg-white/[0.02] transition-colors" data-id="{{ formule.id }}">
                        {# MOVE ICON #}
                        <td class="px-6 py-4 text-center">
                            <div class="cursor-move text-slate-600 group-hover:text-blue-500 transition-colors p-2 rounded-xl hover:bg-blue-500/10 inline-flex">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9h8M8 15h8" />
                                </svg>
                            </div>
                        </td>

                        {# VISUEL #}
                        <td class="px-6 py-4">
                            <div class="h-14 w-14 rounded-2xl overflow-hidden border border-white/10 bg-slate-900 flex-shrink-0 shadow-inner group-hover:border-blue-500/30 transition-all">
                                {% if formule.imageName %}
                                    <img src="{{ vich_uploader_asset(formule, 'imageFile') }}" class="h-full w-full object-cover">
                                {% else %}
                                    <div class="h-full w-full flex items-center justify-center bg-slate-800 text-slate-600">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
                                    </div>
                                {% endif %}
                            </div>
                        </td>

                        {# NOM & REF #}
                        <td class="px-6 py-4">
                            <div class="flex flex-col">
                                <span class="text-sm font-bold text-white group-hover:text-blue-400 transition-colors capitalize tracking-tight">
                                    {{ formule.name }}
                                </span>
                            </div>
                        </td>

                        {# TYPE #}
                        <td class="px-6 py-4">
                            <span class="text-[10px] font-black uppercase tracking-tighter {{ formule.type == 'pack' ? 'text-blue-400' : 'text-purple-400' }}">
                                {{ formule.type }}
                            </span>
                        </td>

                        {# STATUT #}
                        <td class="px-6 py-4">
                            {% if formule.isPublish %}
                                <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-[9px] font-black uppercase tracking-widest italic">
                                    <span class="w-1.5 h-1.5 bg-emerald-400 rounded-full animate-pulse"></span>
                                    En ligne
                                </span>
                            {% else %}
                                <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-slate-500/10 border border-white/5text-slate-300 text-[9px] font-black uppercase tracking-widest italic">
                                    Brouillon
                                </span>
                            {% endif %}
                        </td>

                        {# TARIF #}
                        <td class="px-6 py-4">
                            <div class="flex items-center justify-center space-x-2">
                                {# 1 JOUR #}
                                <div class="flex flex-col items-center px-3 py-1.5 rounded-xl bg-white/5 border border-white/5 group-hover:border-blue-500/20 transition-all">
                                    <span class="text-[8px] font-black text-slate-300 uppercase tracking-tighter">1J</span>
                                    <span class="text-xs font-black text-white italic">{{ formule.price1j|default('0') }}€</span>
                                </div>

                                {# 2 JOURS #}
                                <div class="flex flex-col items-center px-3 py-1.5 rounded-xl bg-white/5 border border-white/5 group-hover:border-blue-500/20 transition-all">
                                    <span class="text-[8px] font-black text-slate-300 uppercase tracking-tighter">2J</span>
                                    <span class="text-xs font-black text-blue-400 italic">{{ formule.price2j|default('0') }}€</span>
                                </div>

                                {# 5 JOURS #}
                                <div class="flex flex-col items-center px-3 py-1.5 rounded-xl bg-emerald-500/5 border border-emerald-500/10 group-hover:border-emerald-500/30 transition-all">
                                    <span class="text-[8px] font-black text-emerald-500/50 uppercase tracking-tighter">5J</span>
                                    <span class="text-xs font-black text-emerald-400 italic">{{ formule.price5j|default('0') }}€</span>
                                </div>
                            </div>
                        </td>

                        {# ACTIONS #}
                        <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_formules_view', {id: formule.id}) }}" class="p-2.5 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>

                                <a data-turbo="false" href="{{ path('app_crm_formules_delete', {id: formule.id}) }}?_token={{ csrf_token('delete' ~ formule.id) }}"
                                   data-turbo-method="post"
                                   data-turbo-confirm="Supprimer la formule '{{ formule.name }}' ?"
                                   class="p-2.5 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>
                                </a>
                            </div>
                        </td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="7" class="py-32 text-center">
                            <div class="flex flex-col items-center justify-center space-y-4">
                                <div class="w-16 h-16 bg-white/5 rounded-full flex items-center justify-center border border-white/10">
                                    <svg class="w-8 h-8 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" /></svg>
                                </div>
                                <p class="text-slate-500 italic uppercase tracking-[0.3em] text-[10px] font-black">Aucune formule dans le catalogue</p>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {# PAGINATION #}
    {% if formules.getTotalItemCount is defined and formules.getTotalItemCount > formules.getItemNumberPerPage %}
        <div class="mt-8 flex justify-center custom-pagination">
            {{ knp_pagination_render(formules) }}
        </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 %}