e-ticket/templates/account/edit_event.html.twig

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

{% block title %}{{ event.title }} - E-Ticket{% endblock %}

{% block body %}
<div class="w-full md:w-[80%] mx-auto py-12 px-4">
    <a href="{{ path('app_account', {tab: 'events'}) }}" class="inline-flex items-center gap-2 text-sm font-black uppercase tracking-widest text-gray-500 hover:text-gray-900 transition-colors mb-8">
        <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="M15 19l-7-7 7-7"/></svg>
        Retour aux evenements
    </a>

    <h1 class="text-3xl font-black uppercase tracking-tighter italic heading-page">{{ event.title }}</h1>
    <p class="font-bold text-gray-600 italic mb-4">Gestion de l'evenement.</p>

    {% for message in app.flashes('success') %}
        <div class="flash-success"><p class="font-black text-sm">{{ message }}</p></div>
    {% endfor %}
    {% for message in app.flashes('error') %}
        <div class="flash-error"><p class="font-black text-sm">{{ message }}</p></div>
    {% endfor %}

    <div class="flex flex-wrap gap-4 mb-6">
        {% if event.online %}
            <form method="post" action="{{ path('app_account_toggle_event_online', {id: event.id}) }}">
                <button type="submit" class="px-4 py-2 border-2 border-red-800 bg-red-600 text-white font-black uppercase text-xs tracking-widest cursor-pointer hover:bg-red-800 transition-all">
                    Passer hors ligne
                </button>
            </form>
        {% elseif app.user.stripeChargesEnabled and app.user.stripePayoutsEnabled %}
            <form method="post" action="{{ path('app_account_toggle_event_online', {id: event.id}) }}">
                <button type="submit" class="px-4 py-2 border-2 border-gray-900 bg-green-500 text-white font-black uppercase text-xs tracking-widest cursor-pointer hover:bg-green-700 transition-all">
                    Mettre en ligne
                </button>
            </form>
        {% else %}
            <span class="px-4 py-2 border-2 border-gray-300 bg-gray-100 text-gray-400 font-black uppercase text-xs tracking-widest cursor-not-allowed">
                Stripe requis pour mettre en ligne
            </span>
        {% endif %}

        {% if event.secret %}
            <form method="post" action="{{ path('app_account_toggle_event_secret', {id: event.id}) }}">
                <button type="submit" class="px-4 py-2 border-2 border-gray-900 bg-[#fabf04] font-black uppercase text-xs tracking-widest cursor-pointer hover:bg-yellow-500 transition-all">
                    Rendre public
                </button>
            </form>
        {% else %}
            <form method="post" action="{{ path('app_account_toggle_event_secret', {id: event.id}) }}">
                <button type="submit" class="px-4 py-2 border-2 border-gray-900 bg-gray-200 font-black uppercase text-xs tracking-widest cursor-pointer hover:bg-gray-300 transition-all">
                    Rendre secret
                </button>
            </form>
        {% endif %}

        <div class="flex items-center gap-2 ml-auto">
            {% if event.online %}
                <span class="badge-green text-xs font-black uppercase">En ligne</span>
            {% else %}
                <span class="badge-red text-xs font-black uppercase">Hors ligne</span>
            {% endif %}
            {% if event.secret %}
                <span class="badge-yellow text-xs font-black uppercase">Secret</span>
            {% endif %}
        </div>
    </div>

    {% if event.online %}
    <div class="card-brutal-green mb-6 flex flex-wrap items-center justify-between gap-4">
        <div>
            <p class="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-1">URL publique</p>
            <p class="text-sm font-mono font-bold break-all" id="event-url">{{ absolute_url(path('app_event_detail', {orgaSlug: event.account.slug, id: event.id, eventSlug: event.slug})) }}</p>
        </div>
        <button type="button" id="copy-url-btn" class="px-4 py-2 border-2 border-gray-900 bg-white font-black uppercase text-xs tracking-widest cursor-pointer hover:bg-gray-100 transition-all">
            Copier le lien
        </button>
    </div>
    {% endif %}

    {% set current_tab = app.request.query.get('tab', 'info') %}
    <div class="flex flex-wrap overflow-x-auto mb-8">
        <a href="{{ path('app_account_edit_event', {id: event.id, tab: 'info'}) }}" class="flex-1 min-w-[100px] text-center py-3 border-3 border-gray-900 border-r-0 {{ current_tab == 'info' ? 'bg-yellow-400' : 'bg-white' }} font-black uppercase text-xs tracking-widest transition-all">Informations</a>
        <a href="{{ path('app_account_edit_event', {id: event.id, tab: 'categories'}) }}" class="flex-1 min-w-[100px] text-center py-3 border-3 border-gray-900 border-r-0 {{ current_tab == 'categories' ? 'bg-yellow-400' : 'bg-white' }} font-black uppercase text-xs tracking-widest transition-all">Categories / Billets</a>
        <a href="{{ path('app_account_edit_event', {id: event.id, tab: 'stats'}) }}" class="flex-1 min-w-[100px] text-center py-3 border-3 border-gray-900 border-r-0 {{ current_tab == 'stats' ? 'bg-yellow-400' : 'bg-white' }} font-black uppercase text-xs tracking-widest transition-all">Statistiques</a>
        <a href="{{ path('app_account_edit_event', {id: event.id, tab: 'settings'}) }}" class="flex-1 min-w-[100px] text-center py-3 border-3 border-gray-900 {{ current_tab == 'settings' ? 'bg-yellow-400' : 'bg-white' }} font-black uppercase text-xs tracking-widest transition-all">Parametres</a>
    </div>

    {% if current_tab == 'info' %}
    <div class="flex flex-col lg:flex-row gap-8">
        <div class="flex-1 min-w-0">
            <form method="post" action="{{ path('app_account_edit_event', {id: event.id}) }}" enctype="multipart/form-data" class="form-col">
                <div>
                    <label for="event_title" class="text-xs font-black uppercase tracking-widest form-label">Titre de l'evenement</label>
                    <input type="text" id="event_title" name="title" required class="form-input focus:border-indigo-600" value="{{ event.title }}">
                </div>

                <div>
                    <label for="event_description" class="text-xs font-black uppercase tracking-widest form-label">Description</label>
                    <e-ticket-editor>
                        <textarea id="event_description" name="description" rows="5" placeholder="Decrivez votre evenement...">{{ event.description }}</textarea>
                    </e-ticket-editor>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="event_start_at" class="text-xs font-black uppercase tracking-widest form-label">Date et heure de debut</label>
                        <input type="datetime-local" id="event_start_at" name="start_at" required class="form-input focus:border-indigo-600" value="{{ event.startAt|date('Y-m-d\\TH:i') }}">
                    </div>
                    <div class="form-group">
                        <label for="event_end_at" class="text-xs font-black uppercase tracking-widest form-label">Date et heure de fin</label>
                        <input type="datetime-local" id="event_end_at" name="end_at" required class="form-input focus:border-indigo-600" value="{{ event.endAt|date('Y-m-d\\TH:i') }}">
                    </div>
                </div>

                <div>
                    <label for="event_address" class="text-xs font-black uppercase tracking-widest form-label">Adresse</label>
                    <input type="text" id="event_address" name="address" required class="form-input focus:border-indigo-600" value="{{ event.address }}">
                </div>

                <div class="form-row">
                    <div class="flex-1 min-w-[120px] max-w-[200px]">
                        <label for="event_zipcode" class="text-xs font-black uppercase tracking-widest form-label">Code postal</label>
                        <input type="text" id="event_zipcode" name="zipcode" required maxlength="10" class="form-input focus:border-indigo-600" value="{{ event.zipcode }}">
                    </div>
                    <div class="flex-[2] min-w-[200px]">
                        <label for="event_city" class="text-xs font-black uppercase tracking-widest form-label">Ville</label>
                        <input type="text" id="event_city" name="city" required class="form-input focus:border-indigo-600" value="{{ event.city }}">
                    </div>
                </div>

                <div>
                    <label for="event_main_picture" class="text-xs font-black uppercase tracking-widest form-label">Changer l'affiche</label>
                    <input type="file" id="event_main_picture" name="event_main_picture" accept="image/*" class="form-file">
                </div>

                <div>
                    <button type="submit" class="btn-brutal font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-white transition-all">
                        Enregistrer les modifications
                    </button>
                </div>
            </form>
        </div>

        <div class="w-full lg:w-[350px] flex-shrink-0">
            <div class="card-brutal overflow-hidden sticky top-24">
                <div class="section-header">
                    <h2 class="text-[10px] font-black uppercase tracking-widest text-white">Affiche</h2>
                </div>
                {% if event.eventMainPictureName %}
                    <img src="{{ ('/uploads/events/' ~ event.eventMainPictureName) | imagine_filter('medium') }}" alt="{{ event.title }}" class="w-full max-h-[350px] object-contain">
                {% else %}
                    <div class="p-12 text-center bg-gray-50">
                        <div class="text-4xl mb-4 opacity-30">&#128247;</div>
                        <p class="text-gray-400 font-bold text-sm">Aucune affiche</p>
                        <p class="text-gray-300 text-xs font-bold mt-1">Ajoutez une image via le formulaire</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    {% elseif current_tab == 'categories' %}
    <div class="card-brutal overflow-hidden mb-6">
        <div class="section-header flex justify-between items-center">
            <h2 class="text-[10px] font-black uppercase tracking-widest text-white">Categories</h2>
        </div>
        <div class="p-6">
            <form method="post" action="{{ path('app_account_event_add_category', {id: event.id}) }}" class="flex flex-wrap gap-3 items-end mb-6">
                <div class="flex-1 min-w-[200px]">
                    <label for="cat_name" class="text-xs font-black uppercase tracking-widest form-label">Nouvelle categorie</label>
                    <input type="text" id="cat_name" name="name" required class="form-input focus:border-indigo-600" placeholder="Ex: PMR, VIP, Tribune...">
                </div>
                <div>
                    <label for="cat_start" class="text-xs font-black uppercase tracking-widest form-label">Debut vente</label>
                    <input type="datetime-local" id="cat_start" name="start_at" class="form-input focus:border-indigo-600" value="{{ "now"|date('Y-m-d\\TH:i') }}">
                </div>
                <div>
                    <label for="cat_end" class="text-xs font-black uppercase tracking-widest form-label">Fin vente</label>
                    <input type="datetime-local" id="cat_end" name="end_at" class="form-input focus:border-indigo-600" value="{{ event.endAt|date('Y-m-d\\TH:i') }}">
                </div>
                <button type="submit" class="btn-brutal font-black uppercase text-xs tracking-widest hover:bg-indigo-600 hover:text-white transition-all">
                    + Ajouter
                </button>
            </form>

            {% if categories|length > 0 %}
            <div id="categories-list" data-reorder-url="{{ path('app_account_event_reorder_categories', {id: event.id}) }}">
                {% for category in categories %}
                <div class="flex flex-wrap items-center gap-4 p-4 border-2 border-gray-900 mb-2 bg-white cursor-move" data-id="{{ category.id }}">
                    <span class="text-gray-400 cursor-grab">&#9776;</span>
                    <span class="font-black text-sm uppercase flex-1">{{ category.name }}</span>
                    <span class="text-xs font-bold text-gray-400">{{ category.startAt|date('d/m/Y H:i') }} — {{ category.endAt|date('d/m/Y H:i') }}</span>
                    {% if category.hidden %}
                        <span class="badge-yellow text-xs font-black uppercase">Masquee</span>
                    {% elseif category.active %}
                        <span class="badge-green text-xs font-black uppercase">Active</span>
                    {% else %}
                        <span class="badge-red text-xs font-black uppercase">Inactive</span>
                    {% endif %}
                    <a href="{{ path('app_account_event_edit_category', {id: event.id, categoryId: category.id}) }}" class="px-2 py-1 border-2 border-gray-900 bg-white text-xs font-black uppercase hover:bg-gray-100 transition-all">&#9998;</a>
                    <form method="post" action="{{ path('app_account_event_delete_category', {id: event.id, categoryId: category.id}) }}" data-confirm="Supprimer cette categorie ?" class="inline">
                        <button type="submit" class="px-2 py-1 border-2 border-red-800 bg-red-600 text-white text-xs font-black uppercase cursor-pointer hover:bg-red-800 transition-all">&#10005;</button>
                    </form>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <p class="text-gray-400 font-bold text-sm text-center py-8">Aucune categorie. Ajoutez-en une pour commencer a vendre des billets.</p>
            {% endif %}
        </div>
    </div>

    {% elseif current_tab == 'stats' %}
    <div class="card-brutal">
        <div class="p-12 text-center">
            <p class="text-gray-400 font-bold text-sm">Les statistiques seront disponibles prochainement.</p>
        </div>
    </div>

    {% elseif current_tab == 'settings' %}
    <div class="card-brutal">
        <div class="p-12 text-center">
            <p class="text-gray-400 font-bold text-sm">Les parametres avances seront disponibles prochainement.</p>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}