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

{% block title %}Création Devis{% endblock %}
{% block title_header %}Nouveau <span class="text-blue-500">Devis</span>{% endblock %}

{% block actions %}
    <a data-turbo="false"  href="{{ path('app_crm_devis') }}" class="flex items-center px-4 py-2 text-[10px] font-black text-slate-400 hover:text-white uppercase tracking-widest transition-all group">
        <svg class="w-4 h-4 mr-2 transform group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
        </svg>
        Annuler
    </a>
{% endblock %}

{% block body %}
    <div class="w-full animate-in fade-in zoom-in-95 duration-500">

        {{ form_start(form,{attr:{'data-turbo':'false'}}) }}

        <div class="backdrop-blur-xl bg-[#1e293b]/40 border border-white/5 rounded-[3rem] p-10 shadow-2xl relative overflow-hidden w-full">

            {# Décoration de fond #}
            <div class="absolute top-0 right-0 -mr-16 -mt-16 w-96 h-96 bg-blue-600/5 rounded-full blur-3xl pointer-events-none"></div>

            {# Header #}
            <div class="relative mb-12">
                <div class="flex items-center space-x-6">
                    <div class="flex items-center justify-center w-12 h-12 rounded-2xl bg-blue-600 shadow-lg shadow-blue-600/30 text-white">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-2xl font-black text-white tracking-tight">Création d'un devis</h3>
                        <p class="text-[9px] text-slate-500 uppercase tracking-[0.3em] font-bold mt-1">Configuration des informations d'entête</p>
                    </div>
                </div>
            </div>

            <div class="relative space-y-10">
                {# SECTION ENTÊTE #}
                {% set input_class = "w-full bg-slate-900/60 border border-white/10 rounded-2xl px-5 py-4 text-sm text-white outline-none focus:border-blue-500/50 focus:bg-slate-900/90 transition-all duration-300" %}
                {% set label_class = "block text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] mb-3 ml-2" %}

                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
                    <div class="space-y-3">
                        {{ form_label(form.num, null, {'label_attr': {'class': label_class}}) }}
                        {{ form_widget(form.num, {'attr': {'class': input_class}}) }}
                    </div>

                    <div class="space-y-3">
                        {{ form_label(form.createA, null, {'label_attr': {'class': label_class}}) }}
                        {{ form_widget(form.createA, {'attr': {'class': input_class}}) }}
                    </div>

                    <div class="space-y-3" is="devis-manager">
                        {{ form_label(form.customer, null, {'label_attr': {'class': label_class}}) }}
                        {{ form_widget(form.customer, {'attr': {'class': input_class}}) }}
                    </div>

                </div>

                {# SECTION ADRESSES #}
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <div class="space-y-3">
                        <label for="billAddress" class="{{ label_class }}">Adresse de facturation</label>
                        <select id="billAddress" name="devis[bill_address]" class="{{ input_class }}">
                            {% if billAddress is defined %}
                                {% for key,shipAdd in billAddress %}
                                    <option {% if key == devis.billAddress.id%}selected{% endif%} value="{{ key }}">{{ shipAdd }}</option>
                                {% endfor %}
                            {% endif %}
                        </select>
                    </div>
                    <div class="space-y-3">
                        <label for="shipAddress" class="{{ label_class }}">Adresse de livraison</label>
                        <select id="shipAddress" name="devis[ship_address]" class="{{ input_class }}">
                            {% if shipAddress is defined %}
                                {% for key,shipAdd in shipAddress %}
                                    <option {% if key == devis.addressShip.id%}selected{% endif%} value="{{ key }}">{{ shipAdd }}</option>
                                {% endfor %}
                            {% endif %}
                        </select>
                    </div>
                </div>
                {# SECTION ADRESSES #}
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <div class="space-y-3">
                        {{ form_label(form.startAt, null, {'label_attr': {'class': label_class}}) }}
                        {{ form_widget(form.startAt, {'attr': {'class': input_class}}) }}
                    </div>
                    <div class="space-y-3">
                        {{ form_label(form.endAt, null, {'label_attr': {'class': label_class}}) }}
                        {{ form_widget(form.endAt, {'attr': {'class': input_class}}) }}
                    </div>
                </div>

                <hr class="border-white/5">

                {# SECTION REPEATER #}
                <div class="form-repeater" data-component="repeater" is="repeat-line">
                    <div class="flex items-center justify-between mb-6 px-4">
                        <h4 class="text-sm font-black text-white uppercase tracking-widest">Détail des prestations</h4>
                    </div>

                    <ol class="form-repeater__rows space-y-4" data-ref="rows">
                        {% for key,line in lines %}
                         <li class="form-repeater__row group animate-in slide-in-from-right-5 duration-300">
                            <fieldset class="backdrop-blur-md bg-white/5 border border-white/10 rounded-[2.5rem] p-8 hover:border-blue-500/30 transition-all shadow-xl">
                                {% if line.id is defined %}
                                    <input type="hidden" name="lines[{{ key }}][id]" value="{{ line.id }}">
                                {% endif %}
                                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-5 items-end">
                                    {# 1. PRODUIT #}
                                    <div class="lg:col-span-5">
                                        <label class="text-[9px] font-black text-slate-500 uppercase tracking-widest ml-1 mb-2 block">Produit / Prestation</label>
                                        <div class="relative flex items-center">
                                            <input type="text" name="lines[{{ key }}][product]" value="{{ line.product }}" required class="w-full bg-slate-950/50 border-white/5 rounded-2xl text-white focus:ring-purple-500/20 focus:border-purple-500 transition-all py-3 pl-5 pr-12 text-sm">

                                            {# BOUTON RECHERCHER #}
                                            <button is="search-productdevis" type="button" class="absolute right-2 p-2 bg-purple-500/10 hover:bg-purple-500 text-purple-400 hover:text-white rounded-xl transition-all duration-300 group/search" title="Rechercher un produit">
                                                Rechercher un produit
                                            </button>
                                        </div>
                                    </div>

                                    {# 3. PRIX HT J1 #}
                                    <div class="lg:col-span-3">
                                        <label class="{{ label_class }}">HT J1 (€)</label>
                                        <input type="number" step="0.01" name="lines[{{ key }}][price_ht]" placeholder="0.00" class="{{ input_class }} text-right font-mono" required value="{{ line.price_ht }}" />
                                    </div>

                                    {# 4. PRIX HT SUP #}
                                    <div class="lg:col-span-3">
                                        <label class="{{ label_class }}">HT Sup</label>
                                        <input type="number" step="0.01" name="lines[{{ key }}][price_sup_ht]" placeholder="0.00" class="{{ input_class }} text-right font-mono" required value="{{ line.price_sup_ht }}" />
                                    </div>

                                    {# 6. SUPPRIMER #}
                                    <div class="lg:col-span-1 flex justify-center pb-1">
                                        <button type="button" data-ref="removeButton" class="p-4 bg-red-500/10 hover:bg-red-500 text-red-500 hover:text-white rounded-2xl transition-all duration-300 shadow-lg hover:shadow-red-500/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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                            </fieldset>
                        </li>
                        {% endfor %}
                    </ol>

                    <div class="mt-6 px-4">
                        <button type="button" data-ref="addButton" class="w-full py-4 border-2 border-dashed border-white/10 hover:border-purple-500/50 bg-white/5 hover:bg-purple-500/10 rounded-3xl text-purple-400 text-[10px] font-black uppercase tracking-[0.4em] transition-all flex items-center justify-center space-x-3 group">
                            <span class="text-xl group-hover:rotate-90 transition-transform duration-300">+</span>
                            <span>Ajouter une prestation</span>
                        </button>
                    </div>
                </div>

                <div class="form-repeater" data-component="repeater2" is="repeat-line">
                    <div class="flex items-center justify-between mb-6 px-4">
                        <h4 class="text-sm font-black text-white uppercase tracking-widest">Détail des options</h4>
                    </div>
                    <ol class="form-repeater__rows space-y-4" data-ref="rows">
                        {% for key,option in options %}
                        <li class="form-repeater__row group animate-in slide-in-from-right-5 duration-300">
                            <fieldset class="backdrop-blur-md bg-white/5 border border-white/10 rounded-[2.5rem] p-8 hover:border-blue-500/30 transition-all shadow-xl">

                                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-5 items-end">
                                    {% if option.id is defined %}
                                        <input type="hidden" name="options[{{ key }}][id]" value="{{ option.id }}">
                                    {% endif %}
                                    {# 1. PRODUIT #}
                                    <div class="lg:col-span-7">
                                        <label class="text-[9px] font-black text-slate-500 uppercase tracking-widest ml-1 mb-2 block">Produit / Prestation</label>
                                        <div class="relative flex items-center">
                                            <input type="text" name="options[{{ key }}][product]" value="{{ option.product }}" required class="w-full bg-slate-950/50 border-white/5 rounded-2xl text-white focus:ring-purple-500/20 focus:border-purple-500 transition-all py-3 pl-5 pr-12 text-sm">

                                            {# BOUTON RECHERCHER #}
                                            <button is="search-optionsdevis" type="button" class="absolute right-2 p-2 bg-purple-500/10 hover:bg-purple-500 text-purple-400 hover:text-white rounded-xl transition-all duration-300 group/search" title="Rechercher un produit">
                                                Rechercher une option
                                            </button>
                                        </div>
                                    </div>
                                    <div class="lg:col-span-2">
                                        <label class="text-[9px] font-black text-slate-500 uppercase tracking-widest ml-1 mb-2 block">Détails</label>
                                        <div class="relative flex items-center">
                                            <input type="text" name="options[{{ key }}][details]" value="{{ option.details }}" class="w-full bg-slate-950/50 border-white/5 rounded-2xl text-white focus:ring-purple-500/20 focus:border-purple-500 transition-all py-3 pl-5 pr-12 text-sm">
                                        </div>
                                    </div>
                                    {# 3. PRIX HT J1 #}
                                    <div class="lg:col-span-2">
                                        <label class="{{ label_class }}">Prix Ht (€)</label>
                                        <input type="number" step="0.01"  value="{{ option.price_ht }}" name="options[{{ key }}][price_ht]" placeholder="0.00" class="{{ input_class }} text-right font-mono" required />
                                    </div>
                                    {# 6. SUPPRIMER #}
                                    <div class="lg:col-span-1 flex justify-center pb-1">
                                        <button type="button" data-ref="removeButton" class="p-4 bg-red-500/10 hover:bg-red-500 text-red-500 hover:text-white rounded-2xl transition-all duration-300 shadow-lg hover:shadow-red-500/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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                            </fieldset>
                        </li>
                        {% endfor %}
                    </ol>
                    <div class="mt-6 px-4">
                        <button type="button" data-ref="addButton" class="w-full py-4 border-2 border-dashed border-white/10 hover:border-purple-500/50 bg-white/5 hover:bg-purple-500/10 rounded-3xl text-purple-400 text-[10px] font-black uppercase tracking-[0.4em] transition-all flex items-center justify-center space-x-3 group">
                            <span class="text-xl group-hover:rotate-90 transition-transform duration-300">+</span>
                            <span>Ajouter une option</span>
                        </button>
                    </div>
                </div>
                {# VALIDATION #}
                <div class="pt-8 px-4">
                    <button type="submit" class="w-full py-6 bg-blue-600 hover:bg-blue-500 text-white text-[11px] font-black uppercase tracking-[0.5em] rounded-[2rem] shadow-2xl shadow-blue-600/30 transition-all hover:scale-[1.01] active:scale-95 flex items-center justify-center group">
                        <span>Valider et enregistrer le devis</span>
                        <svg class="w-5 h-5 ml-4 transform group-hover:translate-x-2 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7m0 0l-7 7m7-7H3"/>
                        </svg>
                    </button>
                </div>
            </div>
        </div>

        {{ form_end(form) }}
    </div>
{% endblock %}