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

{% block title %}Estimer les frais de livraison | Ludik Event{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
          integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
          crossorigin=""/>
{% endblock %}

{% block body %}
    <div class="min-h-screen bg-white font-sans antialiased py-20 px-4">
        <div class="max-w-3xl mx-auto">
            <h1 class="text-4xl md:text-5xl font-black text-slate-900 uppercase italic tracking-tighter mb-8 text-center">
                Estimer <span class="text-[#f39e36]">la livraison</span>
            </h1>

            <div class="bg-slate-50 p-8 rounded-[2.5rem] border border-slate-100 shadow-xl">
                <p class="text-center text-slate-500 font-medium mb-8">
                    Renseignez l'adresse de votre événement pour obtenir une estimation des frais de livraison.
                </p>

                {{ form_start(form, {'attr': {'class': 'space-y-6', 'data-turbo': 'false'}}) }}

                <div>
                    {{ form_label(form.address, 'Adresse complète', {'label_attr': {'class': 'text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1 mb-2 block'}}) }}
                    {{ form_widget(form.address, {'attr': {'class': 'w-full bg-white border border-slate-200 rounded-2xl px-5 py-4 text-slate-900 outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all', 'placeholder': 'Ex: 10 rue de la Paix'}}) }}
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        {{ form_label(form.zipCode, 'Code Postal', {'label_attr': {'class': 'text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1 mb-2 block'}}) }}
                        {{ form_widget(form.zipCode, {'attr': {'class': 'w-full bg-white border border-slate-200 rounded-2xl px-5 py-4 text-slate-900 outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all', 'placeholder': '02000'}}) }}
                    </div>
                    <div>
                        {{ form_label(form.city, 'Ville', {'label_attr': {'class': 'text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1 mb-2 block'}}) }}
                        {{ form_widget(form.city, {'attr': {'class': 'w-full bg-white border border-slate-200 rounded-2xl px-5 py-4 text-slate-900 outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all', 'placeholder': 'Laon'}}) }}
                    </div>
                </div>

                <div class="pt-4">
                    <button type="submit" class="w-full py-5 bg-slate-900 text-white rounded-2xl font-black uppercase tracking-[0.2em] hover:bg-[#f39e36] transition-all shadow-lg active:scale-95">
                        Calculer
                    </button>
                </div>

                {{ form_end(form) }}

                {% if estimation is defined and estimation is not null %}
                    <div class="mt-10 bg-blue-50 border border-blue-100 rounded-2xl overflow-hidden animate-in fade-in slide-in-from-bottom-4">
                        <div class="p-6 border-b border-blue-100/50">
                            <span class="text-[10px] font-black text-blue-400 uppercase tracking-widest block mb-2">Résultat de l'estimation</span>
                            {% if details.isFree %}
                                <div class="flex items-center gap-3">
                                    <span class="text-3xl font-black text-emerald-500 italic">Offert !</span>
                                    <span class="px-3 py-1 bg-emerald-100 text-emerald-600 rounded-full text-[10px] font-bold uppercase tracking-wide">Zone gratuite</span>
                                </div>
                                <p class="text-xs text-slate-500 mt-2">Votre événement se trouve à moins de 10km de nos locaux.</p>
                            {% else %}
                                <p class="text-3xl font-black text-slate-900 italic">
                                    {{ estimation|format_currency('EUR') }}
                                </p>
                            {% endif %}
                        </div>

                        {% if details is defined %}
                        <div class="bg-white/50 p-6 space-y-3">
                            <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4">Détails du calcul</p>

                            <div class="flex justify-between text-xs">
                                <span class="text-slate-500">Distance réelle (Aller)</span>
                                <span class="font-bold text-slate-700">{{ details.distance|number_format(1, ',', ' ') }} km</span>
                            </div>

                            <div class="flex justify-between text-xs">
                                <span class="text-slate-500">Franchise kilométrique</span>
                                <span class="font-bold text-emerald-500">- 10.0 km (Offerts)</span>
                            </div>

                            <div class="border-t border-slate-200/60 my-2"></div>

                            <div class="flex justify-between text-xs">
                                <span class="text-slate-500">Distance facturée</span>
                                <span class="font-bold text-slate-700">{{ details.chargedDistance|number_format(1, ',', ' ') }} km</span>
                            </div>

                            <div class="flex justify-between text-xs">
                                <span class="text-slate-500">Nombre de trajets</span>
                                <span class="font-bold text-slate-700">{{ details.trips }} (2 A/R)</span>
                            </div>

                            <div class="flex justify-between text-xs">
                                <span class="text-slate-500">Tarif kilométrique</span>
                                <span class="font-bold text-slate-700">{{ details.rate }} € / km</span>
                            </div>

                            {% if not details.isFree %}
                            <div class="bg-blue-100/50 p-3 rounded-xl mt-4 text-center">
                                <code class="text-[10px] text-blue-600 font-mono">
                                    ({{ details.distance|number_format(1) }} - 10) x {{ details.trips }} x {{ details.rate }}€ = {{ estimation|number_format(2) }}€
                                </code>
                            </div>
                            {% endif %}
                        </div>
                        {% endif %}

                        {% if geometry is defined and geometry is not null %}
                            <leaflet-map class="h-96 w-full block rounded-xl mt-6 z-0 border-t border-blue-100"
                                         data-geometry="{{ geometry|json_encode|e('html_attr') }}">
                            </leaflet-map>
                        {% endif %}

                        <div class="p-4 bg-blue-100/30 text-center">
                            <p class="text-[10px] text-slate-500 italic">
                                Cette estimation est donnée à titre indicatif et sera confirmée lors de la validation de votre devis.
                            </p>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {% if geometry is defined and geometry is not null %}
        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
                integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
                crossorigin=""
                nonce="{{ csp_nonce('script') }}"></script>
    {% endif %}
{% endblock %}