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

{% block title %}Signature EDL - #{{ mission.numReservation }}{% endblock %}

{% block body %}
    <div class="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
        
        {# HEADER #}
        <div class="flex items-center gap-4">
            <a href="{{ path('etl_contrat_view', {id: mission.id}) }}" class="w-10 h-10 bg-white rounded-xl border border-slate-100 flex items-center justify-center text-slate-400 hover:text-blue-600 transition-all shadow-sm">
                <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="M15 19l-7-7 7-7" /></svg>
            </a>
            <div>
                <h1 class="text-xl font-black text-slate-900 tracking-tight">Signature</h1>
                <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Réf: #{{ mission.numReservation }}</p>
            </div>
        </div>

        <div class="bg-blue-600 rounded-[2rem] p-8 text-white shadow-xl shadow-blue-600/20 text-center relative overflow-hidden">
            <div class="absolute top-0 right-0 -mr-8 -mt-8 w-32 h-32 bg-white/10 rounded-full blur-2xl"></div>
            <h2 class="text-2xl font-black mb-2">État des Lieux Terminé</h2>
            <p class="text-sm font-medium opacity-90">Veuillez procéder à la signature du document.</p>
        </div>

        {# ACTIONS SIGNATURE #}
        <div class="space-y-4">
            <div class="p-6 bg-white rounded-[2rem] border border-slate-100 shadow-sm">
                <h3 class="text-xs font-black text-slate-400 uppercase tracking-widest mb-4">Signatures Requises</h3>
                
                <div class="space-y-3">
                    {% if providerSigned %}
                         <div class="w-full py-4 bg-emerald-500/10 border border-emerald-500/20 text-emerald-600 rounded-2xl font-black uppercase text-sm tracking-widest flex items-center justify-center gap-3">
                            <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="M5 13l4 4L19 7" /></svg>
                            Signé (Prestataire)
                        </div>
                    {% else %}
                        <a href="{{ path('etl_sign_provider', {id: etatLieux.id}) }}" class="w-full py-4 bg-slate-900 text-white rounded-2xl font-black uppercase text-sm tracking-widest shadow-lg hover:bg-slate-800 transition-all flex items-center justify-center gap-3">
                            <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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" /></svg>
                            Signer (Prestataire)
                        </a>
                    {% endif %}

                    {% if customerSigned %}
                         <div class="w-full py-4 bg-emerald-500/10 border border-emerald-500/20 text-emerald-600 rounded-2xl font-black uppercase text-sm tracking-widest flex items-center justify-center gap-3">
                            <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="M5 13l4 4L19 7" /></svg>
                            Signé (Client)
                        </div>
                    {% else %}
                        <a href="{{ path('etl_sign_customer', {id: etatLieux.id}) }}" class="w-full py-4 bg-white border-2 border-slate-200 text-slate-900 rounded-2xl font-black uppercase text-sm tracking-widest hover:border-slate-900 hover:bg-slate-50 transition-all flex items-center justify-center gap-3">
                            <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>
                            Faire Signer (Client)
                        </a>
                    {% endif %}
                </div>
            </div>

            {% if providerSigned and customerSigned %}
                <form action="{{ path('etl_edl_close', {id: mission.id}) }}" method="post">
                    <button type="submit" class="w-full py-4 bg-blue-600 hover:bg-blue-700 text-white rounded-2xl font-black uppercase text-sm tracking-widest shadow-lg shadow-blue-600/30 transition-all active:scale-95 flex items-center justify-center gap-3">
                        <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                        Clôturer l'état des lieux
                    </button>
                </form>
            {% endif %}
        </div>

        <div class="text-center">
            <a href="{{ path('etl_contrat_view', {id: mission.id}) }}" class="text-xs font-bold text-slate-400 hover:text-blue-600 transition-colors">Retour à la mission</a>
        </div>

    </div>
{% endblock %}