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

{% block title %}Mission #{{ mission.numReservation }}{% endblock %}

{% block body %}
    <div class="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">

        {# HEADER #}
        <div class="flex items-center gap-4">
            <a href="{{ path('etl_home') }}" 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">Détails Mission</h1>
                <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Réf: #{{ mission.numReservation }}</p>
            </div>
        </div>

        {# ACTION LIVRAISON #}
        {% if not mission.etatLieux or mission.etatLieux.status == 'delivery_ready' %}
            <form action="{{ path('etl_mission_start', {id: mission.id}) }}" method="post">
                <button type="submit" class="w-full py-4 bg-indigo-600 hover:bg-indigo-500 text-white rounded-2xl font-black uppercase text-sm tracking-widest shadow-lg shadow-indigo-600/30 transition-all active:scale-95 flex items-center justify-center gap-3">
                    <svg class="w-5 h-5 animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
                    Commencer la livraison
                </button>
            </form>
        {% elseif mission.etatLieux.status == 'delivery_progress' %}
            <form action="{{ path('etl_mission_finish', {id: mission.id}) }}" method="post">
                <button type="submit" class="w-full py-4 bg-amber-500 hover:bg-amber-600 text-white rounded-2xl font-black uppercase text-sm tracking-widest shadow-lg shadow-amber-500/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="M5 13l4 4L19 7" /></svg>
                    Confirmer la livraison
                </button>
            </form>
        {% elseif mission.etatLieux.status == 'delivery_done' %}
            <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 mb-6">
                <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>
                Livraison Terminée
            </div>

            {% set is_chorus = (mission.devis and 'Chorus' in mission.devis.paymentMethod) %}

            {% if not is_chorus %}
                
                {# CAUTION #}
                <div class="bg-white rounded-[2rem] p-6 border border-slate-100 shadow-sm mb-4">
                    <h3 class="text-xs font-black text-slate-400 uppercase tracking-widest mb-4">Caution</h3>
                    <div class="flex items-center justify-between">
                        <span class="text-2xl font-black text-slate-900">{{ totalCaution|number_format(2, ',', ' ') }}€</span>
                        {% if cautionPaid %}
                            <span class="px-3 py-1 bg-emerald-100 text-emerald-600 rounded-lg text-[10px] font-black uppercase">Reçue</span>
                        {% else %}
                            <form action="{{ path('etl_mission_caution', {id: mission.id}) }}" method="post">
                                <button type="submit" class="px-4 py-2 bg-slate-900 text-white rounded-xl text-[10px] font-black uppercase tracking-wide hover:bg-blue-600 transition-colors">
                                    Valider Réception
                                </button>
                            </form>
                        {% endif %}
                    </div>
                </div>

                {# SOLDE #}
                {% if solde > 0 %}
                    <div class="bg-slate-900 rounded-[2rem] p-6 text-white shadow-xl mb-4">
                        <div class="flex justify-between items-start mb-4">
                            <div>
                                <p class="text-[10px] font-black text-blue-400 uppercase tracking-widest mb-1">Reste à payer</p>
                                <p class="text-3xl font-black">{{ solde|number_format(2, ',', ' ') }}€</p>
                            </div>
                        </div>

                        {# Paiement en ligne #}
                        <form action="{{ path('elt_mission_confirme', {id: mission.id}) }}" method="post" class="mb-4">
                            <button type="submit" class="w-full py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold text-xs uppercase tracking-wider shadow-lg shadow-blue-900/50 transition-all active:scale-95 flex items-center justify-center gap-2">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
                                Paiement Carte Bancaire
                            </button>
                        </form>

                        {# Paiements Manuels #}
                        <p class="text-[9px] font-bold text-slate-500 uppercase tracking-widest mb-2 text-center">Encaissement direct</p>
                        <div class="grid grid-cols-3 gap-2">
                            {% for method in ['Chèque', 'Espèces', 'Autre'] %}
                                <form action="{{ path('etl_mission_manual_pay', {id: mission.id}) }}" method="post">
                                    <input type="hidden" name="method" value="{{ method }}">
                                    <button type="submit" class="w-full py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white rounded-xl font-bold text-[10px] uppercase tracking-wide transition-all active:scale-95 border border-slate-700">
                                        {{ method }}
                                    </button>
                                </form>
                            {% endfor %}
                        </div>
                    </div>
                {% else %}
                    <div class="bg-emerald-500/10 border border-emerald-500/20 text-emerald-500 rounded-[2rem] p-6 text-center mb-4">
                        <p class="text-xs font-black uppercase tracking-widest">Solde Réglé</p>
                    </div>
                            {% endif %}
                
                        {% elseif mission.etatLieux.status == 'edl_progress' %}
                            <a href="{{ path('etl_mission_edl', {id: mission.id}) }}" class="w-full py-4 bg-indigo-600 hover:bg-indigo-500 text-white rounded-2xl font-black uppercase text-sm tracking-widest shadow-lg shadow-indigo-600/30 transition-all active:scale-95 flex items-center justify-center gap-3 mb-6">
                                <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 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>
                                Reprendre l'état des lieux
                            </a>
                        {% endif %}
            {# ACTION EDL #}
            {% if is_chorus or solde <= 0 %}
                <form action="{{ path('etl_mission_edl_start', {id: mission.id}) }}" method="post" class="mt-6">
                    <button type="submit" class="w-full py-4 bg-indigo-600 hover:bg-indigo-500 text-white rounded-2xl font-black uppercase text-sm tracking-widest shadow-lg shadow-indigo-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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /></svg>
                        Commencer l'état des lieux
                    </button>
                </form>
            {% endif %}

        {% elseif mission.etatLieux.status == 'edl_progress' %}
            <a href="{{ path('etl_mission_edl', {id: mission.id}) }}" class="w-full py-4 bg-indigo-600 hover:bg-indigo-500 text-white rounded-2xl font-black uppercase text-sm tracking-widest shadow-lg shadow-indigo-600/30 transition-all active:scale-95 flex items-center justify-center gap-3 mb-6">
                <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 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>
                Reprendre l'état des lieux
            </a>
        {% endif %}

        {# DATES #}
        <div class="bg-blue-600 rounded-[2rem] p-6 text-white shadow-xl shadow-blue-600/20 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>
            <div class="flex justify-between items-center relative z-10">
                <div class="text-center">
                    <p class="text-[9px] font-black uppercase tracking-widest opacity-70 mb-1">Début</p>
                    <p class="text-lg font-black">{{ mission.dateAt|date('d/m') }}</p>
                    <p class="text-[10px] font-bold">{{ mission.dateAt|date('H:i') }}</p>
                </div>
                <div class="h-8 w-px bg-white/20"></div>
                <div class="text-center">
                    <p class="text-[9px] font-black uppercase tracking-widest opacity-70 mb-1">Fin</p>
                    <p class="text-lg font-black">{{ mission.endAt|date('d/m') }}</p>
                    <p class="text-[10px] font-bold">{{ mission.endAt|date('H:i') }}</p>
                </div>
            </div>
        </div>

        {# CLIENT #}
        <div class="bg-white rounded-[2rem] p-6 border border-slate-100 shadow-sm">
            <h3 class="text-xs font-black text-slate-400 uppercase tracking-widest mb-4">Client</h3>
            <div class="flex items-center justify-between">
                <div>
                    <p class="font-bold text-slate-900 text-lg">{{ mission.customer.surname }} {{ mission.customer.name }}</p>
                </div>
                <a href="tel:{{ mission.customer.phone }}" class="w-12 h-12 bg-emerald-50 text-emerald-600 rounded-full flex items-center justify-center hover:bg-emerald-600 hover:text-white transition-all shadow-lg shadow-emerald-600/20">
                    <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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>
                </a>
            </div>
        </div>

        {# ADRESSE & GPS #}
        <div class="bg-white rounded-[2rem] p-6 border border-slate-100 shadow-sm">
            <h3 class="text-xs font-black text-slate-400 uppercase tracking-widest mb-4">Lieu de l'événement</h3>

            <div class="mb-6">
                <p class="font-bold text-slate-900 text-sm leading-relaxed">
                    {{ mission.addressEvent }}<br>
                    {% if mission.address2Event %}{{ mission.address2Event }}<br>{% endif %}
                    {{ mission.zipCodeEvent }} {{ mission.townEvent }}
                </p>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <a href="https://www.google.com/maps/dir/?api=1&destination={{ (mission.addressEvent ~ ' ' ~ mission.zipCodeEvent ~ ' ' ~ mission.townEvent)|url_encode }}" target="_blank" class="flex items-center justify-center gap-2 py-3 bg-slate-50 hover:bg-blue-50 text-slate-600 hover:text-blue-600 rounded-xl border border-slate-200 transition-all text-xs font-bold uppercase tracking-wide">
                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
                    Maps
                </a>
                <a href="https://waze.com/ul?q={{ (mission.addressEvent ~ ' ' ~ mission.zipCodeEvent ~ ' ' ~ mission.townEvent)|url_encode }}&navigate=yes" target="_blank" class="flex items-center justify-center gap-2 py-3 bg-slate-50 hover:bg-indigo-50 text-slate-600 hover:text-indigo-600 rounded-xl border border-slate-200 transition-all text-xs font-bold uppercase tracking-wide">
                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path d="M12.0001 2.25C17.385 2.25 21.7501 6.61509 21.7501 12C21.7501 17.3849 17.385 21.75 12.0001 21.75C6.61522 21.75 2.25012 17.3849 2.25012 12C2.25012 6.61509 6.61522 2.25 12.0001 2.25ZM12.0001 19.5C13.435 19.5 14.6713 18.7885 15.3932 17.7083L14.7663 16.0373C14.1867 16.7118 13.1678 17.25 12.0001 17.25C9.79098 17.25 8.00012 15.4591 8.00012 13.25C8.00012 11.0409 9.79098 9.25 12.0001 9.25C14.1524 9.25 15.9082 10.9485 15.995 13.0763L16.0001 13.25L17.8751 13.25C17.8751 10.0053 15.2448 7.375 12.0001 7.375C8.75545 7.375 6.12512 10.0053 6.12512 13.25C6.12512 16.4947 8.75545 19.125 12.0001 19.125V19.5Z" /></svg>
                    Waze
                </a>
            </div>
        </div>

        {# PRODUCTS & OPTIONS #}
        <div class="bg-white rounded-[2rem] p-6 border border-slate-100 shadow-sm">
            <h3 class="text-xs font-black text-slate-400 uppercase tracking-widest mb-4">Matériel & Options</h3>

            <div class="space-y-3">
                {% for line in mission.contratsLines %}
                    {% if 'livraison' not in line.name|lower %}
                        <div class="flex items-center gap-3 p-3 bg-slate-50 rounded-xl">
                            <div class="w-8 h-8 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center shrink-0">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" /></svg>
                            </div>
                            <div>
                                <p class="text-sm font-bold text-slate-900">{{ line.name }}</p>
                                {% if line.caution > 0 %}
                                    <p class="text-[9px] text-slate-400 font-medium">Caution: {{ line.caution }}€</p>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}

                {% for option in mission.contratsOptions %}
                    {% if 'livraison' not in option.name|lower %}
                        <div class="flex items-center gap-3 p-3 bg-slate-50 rounded-xl border border-slate-100">
                            <div class="w-8 h-8 bg-purple-100 text-purple-600 rounded-lg flex items-center justify-center shrink-0">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" /></svg>
                            </div>
                            <div>
                                <p class="text-sm font-bold text-slate-900">{{ option.name }}</p>
                                {% if option.details %}
                                    <p class="text-[9px] text-slate-400 font-medium">{{ option.details }}</p>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>

        {# DETAILS / NOTES #}
        {% if mission.details or mission.notes %}
             <div class="bg-white rounded-[2rem] p-6 border border-slate-100 shadow-sm">
                <h3 class="text-xs font-black text-slate-400 uppercase tracking-widest mb-4">Notes & Détails</h3>
                {% if mission.details %}
                    <div class="mb-4">
                        <p class="text-[9px] font-bold text-slate-400 uppercase mb-1">Détails</p>
                        <p class="text-sm text-slate-700">{{ mission.details }}</p>
                    </div>
                {% endif %}
                 {% if mission.notes %}
                    <div>
                        <p class="text-[9px] font-bold text-slate-400 uppercase mb-1">Notes internes</p>
                        <p class="text-sm text-slate-700 italic">{{ mission.notes }}</p>
                    </div>
                {% endif %}
             </div>
        {% endif %}

    </div>
{% endblock %}