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

{% block title %}Contrats - Association E-Cosplay{% endblock %}

{% block admin_content %}
<div class="page-container">
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-bold heading-page">Contrats</h1>
        <button type="button" data-modal-open="modal-contrat" class="btn-gold px-4 py-2 font-bold uppercase text-[10px] tracking-wider text-gray-900">Creer un contrat</button>
    </div>

    {% for type, messages in app.flashes %}
        {% for message in messages %}
            <div class="mb-4 p-4 glass font-medium text-sm {{ type == 'success' ? 'border-green-300 text-green-800' : 'border-red-300 text-red-800' }}">{{ message }}</div>
        {% endfor %}
    {% endfor %}

    {% if contrats|length > 0 %}
        <div class="glass overflow-x-auto overflow-hidden">
            <table class="w-full text-sm">
                <thead>
                    <tr class="glass-dark text-white">
                        <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Reference</th>
                        <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Client</th>
                        <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Email</th>
                        <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Type</th>
                        <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Statut</th>
                        <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Date</th>
                        <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for c in contrats %}
                        <tr class="border-b border-white/20 hover:bg-white/50">
                            <td class="px-4 py-3 font-mono font-bold text-[10px]">{{ c.reference }}</td>
                            <td class="px-4 py-3 font-bold text-xs">{{ c.raisonSociale }}</td>
                            <td class="px-4 py-3 text-xs text-gray-500">{{ c.email }}</td>
                            <td class="px-4 py-3 text-xs">{{ c.typeLabel }}</td>
                            <td class="px-4 py-3 text-center">
                                {% if c.state == 'signed' %}
                                    <span class="px-2 py-0.5 bg-green-500/20 text-green-700 font-bold uppercase text-[10px]">Signe</span>
                                {% elseif c.state == 'send' %}
                                    <span class="px-2 py-0.5 bg-blue-500/20 text-blue-700 font-bold uppercase text-[10px]">Envoye</span>
                                {% elseif c.state == 'cancelled' %}
                                    <span class="px-2 py-0.5 bg-red-500/20 text-red-700 font-bold uppercase text-[10px]">Annule</span>
                                {% else %}
                                    <span class="px-2 py-0.5 bg-yellow-100 text-yellow-800 font-bold uppercase text-[10px]">Brouillon</span>
                                {% endif %}
                            </td>
                            <td class="px-4 py-3 text-xs text-gray-500">{{ c.createdAt|date('d/m/Y') }}</td>
                            <td class="px-4 py-3 text-center">
                                <a href="{{ path('app_admin_contrats_show', {id: c.id}) }}" class="px-3 py-1 bg-gray-900 text-white hover:bg-[#fabf04] hover:text-gray-900 font-bold uppercase text-[10px] transition-all">Voir</a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% else %}
        <div class="glass p-8 text-center text-gray-400 font-bold">Aucun contrat.</div>
    {% endif %}

    {# Modal creation #}
    <div id="modal-contrat" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50">
        <div class="glass-heavy p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
            <h2 class="text-lg font-bold uppercase mb-4">Nouveau contrat</h2>
            <form method="post" action="{{ path('app_admin_contrats_create') }}">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-4">
                    <div class="md:col-span-2">
                        <label for="ctr-raisonSociale" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Raison sociale du client *</label>
                        <input type="text" id="ctr-raisonSociale" name="raisonSociale" required class="input-glass w-full px-3 py-2 text-xs font-bold" placeholder="Ex: SARL Mon Entreprise">
                    </div>
                    <div class="md:col-span-2">
                        <label for="ctr-email" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Email du client *</label>
                        <input type="email" id="ctr-email" name="email" required class="input-glass w-full px-3 py-2 text-xs font-bold" placeholder="client@exemple.fr">
                    </div>
                    <div class="md:col-span-2">
                        <label for="ctr-type" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Type de contrat *</label>
                        <select id="ctr-type" name="type" required class="input-glass w-full px-3 py-2 text-xs font-bold">
                            <option value="">— Selectionner —</option>
                            <option value="migration_siteconseil">Contrat de Service - Migration SARL SITECONSEIL</option>
                        </select>
                    </div>
                </div>

                {# Services #}
                <div class="mb-4">
                    <label class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-2">Services inclus dans le contrat</label>
                    <div id="services-container" class="space-y-2">
                        <div class="flex gap-2 items-center">
                            <select name="service_key[]" class="input-glass flex-1 px-3 py-2 text-xs font-bold">
                                <option value="">— Selectionner un service —</option>
                                <option value="esite_vitrine">E-Site Vitrine (100 EUR/mois)</option>
                                <option value="esite_ecommerce">E-Site E-Commerce (150 EUR/mois)</option>
                                <option value="esite_hors_cms">Site hors CMS Esy-Web (100 EUR/mois)</option>
                                <option value="email_3go">E-Mail 3 Go (1 EUR/mois)</option>
                                <option value="email_50go">E-Mail 50 Go (5 EUR/mois)</option>
                                <option value="ndd_gestion">Nom de domaine - Gestion (30 EUR/an)</option>
                                <option value="ndd_renouvellement">Nom de domaine - Renouvellement (20 EUR/an)</option>
                                <option value="eprotect">E-Protect Pro (60 EUR/trimestre)</option>
                                <option value="ecalendar">E-Calendar (30 EUR/mois)</option>
                                <option value="echat">E-Chat (15 EUR/mois)</option>
                                <option value="emailer">E-Mailer (30 EUR/mois)</option>
                            </select>
                            <input type="number" name="service_qty[]" value="1" min="1" class="input-glass w-16 px-2 py-2 text-xs font-bold text-center">
                            <button type="button" class="remove-service px-2 py-1 bg-red-500/20 text-red-700 font-bold text-xs hidden">X</button>
                        </div>
                    </div>
                    <button type="button" id="add-service-btn" class="mt-2 px-3 py-1 glass text-xs font-bold uppercase tracking-wider hover:bg-gray-900 hover:text-white transition-all">+ Ajouter un service</button>
                </div>

                <div class="flex justify-end gap-2">
                    <button type="button" data-modal-close="modal-contrat" class="px-4 py-2 glass font-bold uppercase text-[10px] tracking-widest">Annuler</button>
                    <button type="submit" class="btn-gold px-4 py-2 font-bold uppercase text-[10px] tracking-wider text-gray-900">Creer</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script nonce="{{ csp_nonce('script') }}">
(function() {
    var container = document.getElementById('services-container');
    var addBtn = document.getElementById('add-service-btn');
    if (!container || !addBtn) return;

    var optionsHtml = container.querySelector('select').innerHTML;

    function updateRemove() {
        var rows = container.querySelectorAll('.flex');
        rows.forEach(function(r) {
            var btn = r.querySelector('.remove-service');
            if (btn) btn.classList.toggle('hidden', rows.length <= 1);
        });
    }

    addBtn.addEventListener('click', function() {
        var div = document.createElement('div');
        div.className = 'flex gap-2 items-center';
        div.innerHTML = '<select name="service_key[]" class="input-glass flex-1 px-3 py-2 text-xs font-bold">' + optionsHtml + '</select>'
            + '<input type="number" name="service_qty[]" value="1" min="1" class="input-glass w-16 px-2 py-2 text-xs font-bold text-center">'
            + '<button type="button" class="remove-service px-2 py-1 bg-red-500/20 text-red-700 font-bold text-xs">X</button>';
        container.appendChild(div);
        div.querySelector('.remove-service').addEventListener('click', function() { div.remove(); updateRemove(); });
        updateRemove();
    });

    container.addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-service')) { e.target.parentElement.remove(); updateRemove(); }
    });
})();
</script>
{% endblock %}
