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

{% block title %}Contrat {{ contrat.reference }} - Association E-Cosplay{% endblock %}

{% block body %}
<div class="min-h-screen" style="background: linear-gradient(135deg, #f5f5f0 0%, #e8e8e0 100%);">

    {# Header #}
    <div class="glass-dark text-white py-8">
        <div class="max-w-4xl mx-auto px-6">
            <div class="flex items-center gap-4">
                <img src="/logo.jpg" alt="E-Cosplay" class="h-14 w-auto">
                <div>
                    <h1 class="text-2xl font-bold uppercase tracking-widest">Contrat de Service</h1>
                    <p class="text-sm text-white/60">{{ contrat.reference }} - {{ contrat.typeLabel }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="max-w-4xl mx-auto px-6 py-10">

        {# Statut #}
        {% if contrat.state == 'signed' %}
            <div class="glass-heavy p-6 mb-8 flex items-center gap-4" style="border-left: 4px solid #16a34a;">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-green-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <div>
                    <p class="text-lg font-bold text-green-700">Contrat signe</p>
                    <p class="text-sm text-gray-500">Ce contrat a ete signe le {{ contrat.signedAt ? contrat.signedAt|date('d/m/Y H:i') : '' }}.</p>
                </div>
            </div>
        {% elseif contrat.state == 'cancelled' %}
            <div class="glass-heavy p-6 mb-8 flex items-center gap-4" style="border-left: 4px solid #dc2626;">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-red-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <div>
                    <p class="text-lg font-bold text-red-700">Contrat annule</p>
                    <p class="text-sm text-gray-500">Ce contrat a ete annule.</p>
                </div>
            </div>
        {% endif %}

        {# Informations du contrat #}
        <div class="glass-heavy p-8 mb-8">
            <h2 class="text-xl font-bold uppercase tracking-wider mb-4">Informations</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="glass p-5">
                    <h3 class="text-sm font-bold uppercase tracking-wider mb-3" style="color: #fabf04;">Association E-Cosplay</h3>
                    <div class="space-y-1 text-xs text-gray-600">
                        <p>Association loi 1901 - RNA W022006988</p>
                        <p>42 rue de Saint-Quentin, 02800 Beautor</p>
                        <p>SIRET : 943 121 517 00011</p>
                        <p>President : <strong>Shoko Cosplay - Serreau Jovann</strong></p>
                        <p>Email : <a href="mailto:client@e-cosplay.fr" style="color: #fabf04;">client@e-cosplay.fr</a></p>
                        <p>Tel : 07 66 95 70 06</p>
                    </div>
                </div>
                <div class="glass p-5">
                    <h3 class="text-sm font-bold uppercase tracking-wider mb-3">Client</h3>
                    <div class="space-y-1 text-xs text-gray-600">
                        <p><strong>{{ contrat.raisonSociale }}</strong></p>
                        <p>{{ contrat.email }}</p>
                    </div>
                </div>
            </div>
        </div>

        {# Services #}
        {% if contrat.services|length > 0 %}
            <div class="glass-heavy p-8 mb-8">
                <h2 class="text-xl font-bold uppercase tracking-wider mb-4">Services inclus</h2>
                <div class="glass overflow-hidden">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="glass-dark text-white">
                                <th class="px-4 py-2 text-left font-bold uppercase text-[10px] tracking-widest">Service</th>
                                <th class="px-4 py-2 text-center font-bold uppercase text-[10px] tracking-widest">Quantite</th>
                                <th class="px-4 py-2 text-right font-bold uppercase text-[10px] tracking-widest">Prix HT</th>
                                <th class="px-4 py-2 text-right font-bold uppercase text-[10px] tracking-widest">Sous-total</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% set catalogLabels = {
                                'esite_vitrine': 'E-Site Vitrine',
                                'esite_ecommerce': 'E-Site E-Commerce',
                                'esite_hors_cms': 'Site hors CMS Esy-Web',
                                'email_3go': 'E-Mail 3 Go',
                                'email_50go': 'E-Mail 50 Go',
                                'ndd_gestion': 'Nom de domaine - Gestion',
                                'ndd_renouvellement': 'Nom de domaine - Renouvellement',
                                'eprotect': 'E-Protect Pro',
                                'ecalendar': 'E-Calendar',
                                'echat': 'E-Chat',
                                'emailer': 'E-Mailer'
                            } %}
                            {% for s in contrat.services %}
                                <tr class="border-b border-white/20 {{ loop.index is odd ? 'bg-white/30' : '' }}">
                                    <td class="px-4 py-2 font-bold text-xs">{{ catalogLabels[s.service] ?? s.service }}</td>
                                    <td class="px-4 py-2 text-center text-xs">{{ s.quantity }}</td>
                                    <td class="px-4 py-2 text-right text-xs font-mono">{{ s.priceHt|number_format(2, ',', ' ') }} &euro;</td>
                                    <td class="px-4 py-2 text-right text-xs font-mono font-bold">{{ (s.priceHt * s.quantity)|number_format(2, ',', ' ') }} &euro;</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                        <tfoot>
                            <tr class="glass-dark text-white">
                                <td colspan="3" class="px-4 py-2 text-right font-bold uppercase text-[10px] tracking-widest">Total HT / mois</td>
                                <td class="px-4 py-2 text-right font-mono font-bold">{{ contrat.totalHt|number_format(2, ',', ' ') }} &euro;</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        {% endif %}

        {# Conditions importantes #}
        <div class="glass-heavy p-8 mb-8">
            <h2 class="text-xl font-bold uppercase tracking-wider mb-4">Conditions importantes</h2>
            <div class="space-y-3">
                <div class="glass p-4" style="border-left: 3px solid #fabf04;">
                    <p class="text-xs font-bold mb-1">Paiement</p>
                    <p class="text-xs text-gray-500">Le premier paiement devra etre effectue par carte bancaire ou prelevement SEPA. Les virements ne sont pas acceptes pour le premier paiement.</p>
                </div>
                <div class="glass p-4" style="border-left: 3px solid #dc2626;">
                    <p class="text-xs font-bold mb-1">Impayes</p>
                    <p class="text-xs text-gray-500">En cas de non-paiement, les services seront automatiquement suspendus. Aucun renouvellement sans paiement prealable.</p>
                </div>
                <div class="glass p-4" style="border-left: 3px solid #ea580c;">
                    <p class="text-xs font-bold mb-1">Avertissements</p>
                    <p class="text-xs text-gray-500">En cas de manquement, un systeme d'avertissement s'applique. Au 3eme avertissement, la resiliation est definitive.</p>
                </div>
            </div>
        </div>

        {# Liens utiles #}
        <div class="glass-heavy p-8 mb-8">
            <h2 class="text-xl font-bold uppercase tracking-wider mb-4">Documents et liens utiles</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <a href="{{ path('app_move_from_siteconseil') }}" target="_blank" class="glass p-4 text-center hover:bg-white/80 transition-all">
                    <p class="text-sm font-bold mb-1">Page migration</p>
                    <p class="text-xs text-gray-500">Toutes les informations sur la migration</p>
                </a>
                <a href="{{ path('app_legal_tarif') }}" target="_blank" class="glass p-4 text-center hover:bg-white/80 transition-all">
                    <p class="text-sm font-bold mb-1">Grille tarifaire</p>
                    <p class="text-xs text-gray-500">Tarifs en vigueur</p>
                </a>
                <a href="{{ path('app_legal_cgv') }}" target="_blank" class="glass p-4 text-center hover:bg-white/80 transition-all">
                    <p class="text-sm font-bold mb-1">CGV</p>
                    <p class="text-xs text-gray-500">Conditions generales de vente</p>
                </a>
            </div>
        </div>

        {# Bouton signer #}
        {% if contrat.state == 'send' and contrat.submissionId %}
            <div class="glass-heavy p-8 text-center mb-8">
                <p class="text-sm text-gray-600 mb-4">En signant ce contrat, vous acceptez les conditions ci-dessus, les CGV et la grille tarifaire de l'Association E-Cosplay.</p>
                <a href="{{ path('app_contrat_sign', {id: contrat.id}) }}"
                   class="inline-block px-8 py-4 text-white font-bold uppercase text-sm tracking-wider hover:opacity-90 transition-all" style="background: #fabf04; color: #111;">
                    Signer le contrat
                </a>
            </div>
        {% endif %}

        {# Contact #}
        <div class="glass-heavy p-8 text-center">
            <p class="text-sm text-gray-600 mb-2">Une question sur ce contrat ?</p>
            <p class="text-sm">
                <a href="mailto:client@e-cosplay.fr" class="font-bold text-lg" style="color: #fabf04;">client@e-cosplay.fr</a>
            </p>
            <p class="text-xs text-gray-400 mt-2">Tel : 07 66 95 70 06</p>
        </div>
    </div>
</div>
{% endblock %}
