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

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

{% block admin_content %}
<div class="page-container">
    <div class="flex items-center justify-between mb-8">
        <h1 class="text-2xl font-bold heading-page">Tarification</h1>
        <form method="post" action="{{ path('app_admin_tarification_purge') }}" class="inline" data-confirm="Purger TOUS les tarifs ? Les produits Stripe seront desactives et les tarifs supprimes de la base et de Meilisearch. Cette action est irreversible.">
            <button type="submit" class="px-4 py-2 bg-red-600 text-white font-bold uppercase text-[10px] tracking-widest hover:bg-red-700 transition-all">Purger tout</button>
        </form>
    </div>

    {% 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-6">
        {% for price in prices %}
            <div class="glass overflow-hidden">
                <div class="glass-dark px-4 py-3 flex items-center justify-between" >
                    <div class="flex items-center gap-3">
                        <span class="text-white font-bold text-sm">{{ price.title }}</span>
                        <span class="px-2 py-0.5 bg-white/10 text-white/60 text-[9px] font-bold uppercase">{{ price.type }}</span>
                    </div>
                    <div class="flex items-center gap-3">
                        <span class="text-white/80 text-sm font-bold">{{ price.priceHt }} &#8364; HT</span>
                        {% if price.monthPrice != '0.00' %}
                            <span class="text-[#fabf04] text-sm font-bold">+ {{ price.monthPrice }} &#8364;/mois</span>
                        {% endif %}
                        {% if price.stripeId %}
                            <span class="px-2 py-0.5 bg-green-500/30 text-green-300 text-[9px] font-bold uppercase">Stripe OK</span>
                        {% else %}
                            <span class="px-2 py-0.5 bg-red-500/30 text-red-300 text-[9px] font-bold uppercase">Non sync</span>
                        {% endif %}
                        {% if price.monthPrice != '0.00' %}
                            {% if price.stripeAbonnementId %}
                                <span class="px-2 py-0.5 bg-green-500/30 text-green-300 text-[9px] font-bold uppercase">Abo OK</span>
                            {% else %}
                                <span class="px-2 py-0.5 bg-red-500/30 text-red-300 text-[9px] font-bold uppercase">Abo non sync</span>
                            {% endif %}
                        {% endif %}
                    </div>
                </div>
                <form method="post" action="{{ path('app_admin_tarification_edit', {id: price.id}) }}" class="p-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                        <div>
                            <label for="title-{{ price.id }}" class="block text-xs font-bold uppercase tracking-wider mb-1 text-gray-600">Titre</label>
                            <input type="text" id="title-{{ price.id }}" name="title" value="{{ price.title }}" required class="input-glass w-full px-3 py-2 text-sm font-medium">
                        </div>
                        <div>
                            <label for="priceHt-{{ price.id }}" class="block text-xs font-bold uppercase tracking-wider mb-1 text-gray-600">Prix unique HT (&#8364;)</label>
                            <input type="text" id="priceHt-{{ price.id }}" name="priceHt" value="{{ price.priceHt }}" required class="input-glass w-full px-3 py-2 text-sm font-medium">
                        </div>
                        <div>
                            <label for="monthPrice-{{ price.id }}" class="block text-xs font-bold uppercase tracking-wider mb-1 text-gray-600">Prix mensuel HT (&#8364;)</label>
                            <input type="text" id="monthPrice-{{ price.id }}" name="monthPrice" value="{{ price.monthPrice }}" required class="input-glass w-full px-3 py-2 text-sm font-medium">
                        </div>
                        <div>
                            <label for="period-{{ price.id }}" class="block text-xs font-bold uppercase tracking-wider mb-1 text-gray-600">Periode (mois)</label>
                            <select id="period-{{ price.id }}" name="period" class="input-glass w-full px-3 py-2 text-sm font-medium">
                                {% for p in [1, 2, 3, 6, 12] %}
                                    <option value="{{ p }}" {{ price.period == p ? 'selected' }}>{{ p }} mois</option>
                                {% endfor %}
                            </select>
                        </div>
                        <input type="hidden" name="stripeId" value="{{ price.stripeId }}">
                        <input type="hidden" name="stripeAbonnementId" value="{{ price.stripeAbonnementId }}">
                        <div class="md:col-span-2 lg:col-span-3">
                            <label for="description-{{ price.id }}" class="block text-xs font-bold uppercase tracking-wider mb-1 text-gray-600">Description</label>
                            <textarea id="description-{{ price.id }}" name="description" rows="2" class="input-glass w-full px-3 py-2 text-sm font-medium">{{ price.description }}</textarea>
                        </div>
                    </div>
                    <div class="mt-4 flex justify-end">
                        <button type="submit" class="btn-gold px-4 py-2 text-xs font-bold uppercase tracking-wider text-gray-900">Enregistrer</button>
                    </div>
                </form>
            </div>
        {% endfor %}
    </div>
</div>
{% endblock %}
