272 lines
19 KiB
Twig
272 lines
19 KiB
Twig
{% 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-300 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-300 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>
|
|
|
|
<div class="flex items-center space-x-4 bg-slate-900/40 p-4 rounded-2xl border border-white/5">
|
|
<div class="flex items-center h-5">
|
|
{{ form_widget(form.isNotAddCaution, {'attr': {'class': 'w-5 h-5 rounded border-white/10 bg-slate-800 text-blue-600 focus:ring-blue-500 focus:ring-offset-slate-900'}}) }}
|
|
</div>
|
|
<div class="ml-3 text-sm">
|
|
{{ form_label(form.isNotAddCaution, null, {'label_attr': {'class': 'font-medium text-white'}}) }}
|
|
<p class="text-xs text-slate-400">Cochez cette case pour ne pas inclure la caution dans ce devis.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="border-white/5">
|
|
|
|
{# --- BLOC 04.5 : LIVRAISON & PAIEMENT --- #}
|
|
<div class="mt-8 backdrop-blur-xl bg-slate-900/40 border border-white/5 rounded-[2.5rem] p-8 shadow-2xl">
|
|
<h3 class="text-sm font-black text-indigo-500 uppercase tracking-widest mb-8 flex items-center justify-center">
|
|
<span class="w-6 h-6 bg-indigo-600/20 rounded-lg flex items-center justify-center mr-3 text-[10px]">05</span>
|
|
Logistique & Paiement
|
|
</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
|
<div>
|
|
<label class="block text-[10px] font-black text-slate-300 uppercase tracking-[0.2em] mb-3 ml-2">Mode de paiement</label>
|
|
<select name="devis[paymentMethod]" 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-indigo-500/50 focus:bg-slate-900/90 transition-all duration-300">
|
|
<option value="">Sélectionner...</option>
|
|
{% for type in ['Paiement Via Chorus', 'Paiement En ligne', 'Paiement Après événement', 'Autre mode de paiement'] %}
|
|
<option value="{{ type }}" {% if devis.paymentMethod == type %}selected{% endif %}>{{ type }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-[10px] font-black text-slate-300 uppercase tracking-[0.2em] mb-3 ml-2">Prestataire (Livraison)</label>
|
|
<select name="devis[prestataire]" 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-indigo-500/50 focus:bg-slate-900/90 transition-all duration-300">
|
|
<option value="">-- Aucun prestataire assigné --</option>
|
|
{% for p in prestataires %}
|
|
<option value="{{ p.id }}" {% if devis.prestataire and devis.prestataire.id == p.id %}selected{% endif %}>
|
|
{{ p.surname }} {{ p.name }} ({{ p.email }})
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# 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-300 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-300 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-300 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 %}
|