385 lines
30 KiB
Twig
385 lines
30 KiB
Twig
{% extends 'dashboard/base.twig' %}
|
|
|
|
{% block title %}Contrat N°{{ contrat.numReservation }}{% endblock %}
|
|
|
|
{% block actions %}
|
|
<div class="flex items-center gap-3">
|
|
{# --- BOUTON FACTURATION (Nouveau) --- #}
|
|
{% if contrat.etatLieux and contrat.etatLieux.status in ['edl_return_done', 'edl_return_refused', 'edl_return_finised'] %}
|
|
<a target="_blank" href="{{ path('app_crm_contrats_view', {id: contrat.id, act: 'generateInvoice'}) }}"
|
|
class="flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 border border-blue-500 rounded-xl text-white text-[10px] font-black uppercase italic transition-all shadow-lg shadow-blue-500/20 group">
|
|
<svg class="w-4 h-4 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
Générer la Facture
|
|
</a>
|
|
{% endif %}
|
|
{% if contrat.signed %}
|
|
<a href="{{ vich_uploader_asset(contrat,'devisSignFile') }}" download
|
|
class="flex items-center gap-2 px-6 py-2.5 bg-emerald-500/10 hover:bg-emerald-500/20 border border-emerald-500/20 backdrop-blur-md rounded-xl text-emerald-400 text-[10px] font-black uppercase italic transition-all group">
|
|
<svg class="w-4 h-4 group-hover:scale-110 transition-transform" 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>
|
|
Contrat Signé PDF
|
|
</a>
|
|
<a href="{{ vich_uploader_asset(contrat,'devisAuditFile') }}" download
|
|
class="flex items-center gap-2 px-6 py-2.5 bg-white/5 hover:bg-white/10 border border-white/10 backdrop-blur-md rounded-xl text-white text-[10px] font-black uppercase italic transition-all group">
|
|
<svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2a4 4 0 00-4-4H5m11 9a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h11a2 2 0 012 2v11z" />
|
|
</svg>
|
|
Audit Signature
|
|
</a>
|
|
{% else %}
|
|
<a href="{{ vich_uploader_asset(contrat,'devisFile') }}" download
|
|
class="flex items-center gap-2 px-6 py-2.5 bg-rose-500/10 hover:bg-rose-500/20 border border-rose-500/20 backdrop-blur-md rounded-xl text-rose-500 text-[10px] font-black uppercase italic transition-all group">
|
|
<svg class="w-4 h-4 group-hover:rotate-12 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
|
|
</svg>
|
|
Télécharger Contrat PDF
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
{# Définition des états de paiement #}
|
|
{% set acompteOk = contratPaymentPay(contrat, 'accompte') %}
|
|
{% set cautionOk = contratPaymentPay(contrat, 'caution') %}
|
|
{% set soldeOk = (solde <= 0.05) %}
|
|
|
|
<div class="space-y-8 pb-20">
|
|
|
|
{# --- 1. BANDEAU DE STATUT RAPIDE --- #}
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div class="p-4 rounded-[1.5rem] bg-white/5 border border-white/10 backdrop-blur-md flex items-center justify-between">
|
|
<span class="text-[10px] font-black uppercase text-slate-300 tracking-widest">État Juridique</span>
|
|
{% if contrat.signed %}
|
|
<span class="px-3 py-1 bg-emerald-500/10 text-emerald-400 text-[9px] font-black rounded-lg border border-emerald-500/20">SIGNÉ</span>
|
|
{% else %}
|
|
<span class="px-3 py-1 bg-amber-500/10 text-amber-400 text-[9px] font-black rounded-lg border border-amber-500/20 animate-pulse">EN ATTENTE</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="p-4 rounded-[1.5rem] bg-white/5 border border-white/10 backdrop-blur-md flex items-center justify-between">
|
|
<div class="flex flex-col">
|
|
<span class="text-[10px] font-black uppercase text-slate-300 tracking-widest block">Total Contrat</span>
|
|
<span class="text-[8px] text-slate-500 italic mt-1">HT / Jour</span>
|
|
</div>
|
|
<span class="text-xs font-black text-white italic">
|
|
{{ (contrat.devis ? (contrat.devis|totalQuotoHT) : totalHT)|number_format(2, ',', ' ') }} €
|
|
</span>
|
|
</div>
|
|
<div class="p-4 rounded-[1.5rem] bg-white/5 border border-white/10 backdrop-blur-md flex items-center justify-between">
|
|
<span class="text-[10px] font-black uppercase text-slate-300 tracking-widest block">Reste à percevoir</span>
|
|
<span class="text-xs font-black {{ soldeOk ? 'text-emerald-400' : 'text-rose-500' }} italic">
|
|
{% set totalAmount = (contrat.devis ? (contrat.devis|totalQuotoHT) : totalHT) %}
|
|
{% set totalPaid = 0 %}
|
|
{% for payment in contrat.contratsPayments %}
|
|
{% if payment.type in ['accompte', 'solde', 'etl_payment'] %}
|
|
{% set totalPaid = totalPaid + payment.amount %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% set remaining = totalAmount - totalPaid %}
|
|
{{ remaining <= 0.05 ? 'SOLDÉ' : (remaining|number_format(2, ',', ' ') ~ ' €') }}
|
|
</span>
|
|
</div>
|
|
<div class="p-4 rounded-[1.5rem] bg-white/5 border border-white/10 backdrop-blur-md flex items-center justify-between">
|
|
<span class="text-[10px] font-black uppercase text-slate-300 tracking-widest">Référence</span>
|
|
<span class="text-xs font-black text-blue-400 italic">#{{ contrat.numReservation }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{# --- 2. INFOS CLIENT & ÉVÉNEMENT --- #}
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<div class="relative group">
|
|
<div class="absolute -inset-0.5 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-[2.5rem] blur opacity-50"></div>
|
|
<div class="relative h-full p-8 bg-slate-900/40 border border-white/10 backdrop-blur-xl rounded-[2.5rem]">
|
|
<div class="flex items-center gap-4 mb-8">
|
|
<div class="w-14 h-14 bg-blue-600/20 rounded-2xl flex items-center justify-center border border-blue-500/30">
|
|
<svg class="w-7 h-7 text-blue-400" 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>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-xl font-black text-white italic tracking-tighter uppercase">{{ contrat.customer.surname }} {{ contrat.customer.name }}</h2>
|
|
<p class="text-slate-500 font-bold text-[10px] uppercase tracking-widest">Locataire</p>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<div class="flex items-center gap-3 p-4 rounded-2xl bg-white/[0.02] border border-white/5 text-slate-300 text-sm italic font-bold">{{ contrat.customer.email }}</div>
|
|
<div class="flex items-center gap-3 p-4 rounded-2xl bg-white/[0.02] border border-white/5 text-slate-300 text-sm font-black">{{ contrat.customer.phone }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative group">
|
|
<div class="absolute -inset-0.5 bg-gradient-to-br from-emerald-500/20 to-teal-500/20 rounded-[2.5rem] blur opacity-50"></div>
|
|
<div class="relative h-full p-8 bg-slate-900/40 border border-white/10 backdrop-blur-xl rounded-[2.5rem]">
|
|
<div class="flex items-center gap-4 mb-8">
|
|
<div class="w-14 h-14 bg-emerald-600/20 rounded-2xl flex items-center justify-center border border-emerald-500/30">
|
|
<svg class="w-7 h-7 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /></svg>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-xl font-black text-white italic tracking-tighter uppercase">Lieu de l'événement</h2>
|
|
<p class="text-slate-500 font-bold text-[10px] uppercase tracking-widest">{{ contrat.dateAt|date('d/m/Y') }} — {{ contrat.endAt|date('d/m/Y') }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="p-5 rounded-2xl bg-white/[0.02] border border-white/5">
|
|
<p class="text-white text-base font-bold">{{ contrat.addressEvent }}</p>
|
|
<p class="text-emerald-400 font-black text-sm uppercase italic">{{ contrat.zipCodeEvent }} {{ contrat.townEvent }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# --- 3. SECTION LOGISTIQUE & ÉTAT DES LIEUX --- #}
|
|
{% if contrat.etatLieux %}
|
|
<div class="space-y-4">
|
|
<h3 class="px-2 text-sm font-black text-slate-400 uppercase tracking-[0.3em]">Logistique & État des lieux</h3>
|
|
|
|
{% if contrat.etatLieux.status == 'edl_return_refused' %}
|
|
<div class="p-6 bg-red-500/10 border border-red-500/20 rounded-[2rem] flex items-center justify-between backdrop-blur-md">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-12 h-12 bg-red-500/20 rounded-xl flex items-center justify-center border border-red-500/30">
|
|
<svg class="w-6 h-6 text-red-500 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-red-500 font-black uppercase italic text-sm tracking-tight">Signature Refusée au Retour</h4>
|
|
<p class="text-red-200/60 text-xs font-bold mt-0.5 italic">Motif : {{ contrat.etatLieux.raisonRefused|default('Non spécifié') }}</p>
|
|
</div>
|
|
</div>
|
|
<span class="px-4 py-1.5 bg-red-500 text-white text-[10px] font-black rounded-xl uppercase shadow-lg shadow-red-500/20">Litige à traiter</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{# EDL INSTALLATION #}
|
|
<div class="p-6 bg-white/[0.02] border border-white/10 rounded-[2.5rem] backdrop-blur-md">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h4 class="text-xs font-black text-white uppercase tracking-widest italic">📝 État des lieux Installation</h4>
|
|
<span class="px-3 py-1 bg-emerald-500/10 text-emerald-400 text-[9px] font-black rounded-lg border border-emerald-500/20">
|
|
{{ contrat.etatLieux.status in ['edl_validated','edl_return_done', 'edl_return_refused','edl_return_finised'] ? 'VALIDÉ' : 'EN COURS' }}
|
|
</span>
|
|
</div>
|
|
<div class="flex flex-col gap-4">
|
|
{% if contrat.etatLieux.etatLieuxSignFileName %}
|
|
<a href="{{ vich_uploader_asset(contrat.etatLieux, 'etatLieuxSignFile') }}" target="_blank" class="flex items-center justify-center gap-3 p-4 bg-emerald-500/10 hover:bg-emerald-500/20 border border-emerald-500/20 rounded-2xl text-emerald-400 text-[10px] font-black uppercase transition-all">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2.5"/></svg>
|
|
Voir le PV signé (Installation)
|
|
</a>
|
|
<a href="{{ path('app_crm_contrats_view',{id:contrat.id,act:'downloadFilePv'})}}" class="flex items-center justify-center gap-3 p-4 bg-purple-500/10 hover:bg-purple-500/20 border border-purple-500/20 rounded-2xl text-purple-400 text-[10px] font-black uppercase transition-all">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" stroke-width="2.5"/></svg>
|
|
Télécharger tout ses photos le PV
|
|
</a>
|
|
{% endif %}
|
|
<div class="grid grid-cols-2 gap-3 text-center">
|
|
<div class="p-3 bg-white/5 rounded-2xl border border-white/5">
|
|
<span class="block text-white font-black text-lg">{{ contrat.etatLieux.files|length }}</span>
|
|
<span class="text-[8px] text-slate-500 font-bold uppercase tracking-widest">Médias Photos/Vid.</span>
|
|
</div>
|
|
<div class="p-3 bg-white/5 rounded-2xl border border-white/5">
|
|
<span class="block text-white font-black text-lg">{{ contrat.etatLieux.pointControls|length }}</span>
|
|
<span class="text-[8px] text-slate-500 font-bold uppercase tracking-widest">Points d'inspection</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# EDL RETOUR #}
|
|
<div class="p-6 bg-white/[0.02] border border-white/10 rounded-[2.5rem] backdrop-blur-md">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h4 class="text-xs font-black text-white uppercase tracking-widest italic">📦 État des lieux Retour</h4>
|
|
{% if contrat.etatLieux.status in ['edl_return_done', 'edl_return_refused','edl_return_finised'] %}
|
|
<span class="px-3 py-1 bg-purple-500/10 text-purple-400 text-[9px] font-black rounded-lg border border-purple-500/20">EFFECTUÉ</span>
|
|
{% else %}
|
|
<span class="px-3 py-1 bg-white/5 text-slate-500 text-[9px] font-black rounded-lg">EN ATTENTE</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="flex flex-col gap-4">
|
|
{% if contrat.etatLieux.etatLieuxSignReturnFileName %}
|
|
<a href="{{ vich_uploader_asset(contrat.etatLieux, 'etatLieuxSignReturnFile') }}" target="_blank" class="flex items-center justify-center gap-3 p-4 bg-purple-500/10 hover:bg-purple-500/20 border border-purple-500/20 rounded-2xl text-purple-400 text-[10px] font-black uppercase transition-all">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" stroke-width="2.5"/></svg>
|
|
Voir le PV signé (Retour)
|
|
</a>
|
|
<a href="{{ path('app_crm_contrats_view',{id:contrat.id,act:'downloadFileReturnPv'})}}" class="flex items-center justify-center gap-3 p-4 bg-purple-500/10 hover:bg-purple-500/20 border border-purple-500/20 rounded-2xl text-purple-400 text-[10px] font-black uppercase transition-all">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" stroke-width="2.5"/></svg>
|
|
Télécharger tout ses photos le PV
|
|
</a>
|
|
{% elseif contrat.etatLieux.status == 'edl_return_refused' %}
|
|
<div class="p-4 bg-red-500/5 border border-red-500/20 rounded-2xl text-center">
|
|
<span class="text-[9px] font-black text-red-400 uppercase italic tracking-widest">PV non signé (Refus client)</span>
|
|
</div>
|
|
{% endif %}
|
|
<div class="grid grid-cols-2 gap-3 text-center">
|
|
<div class="p-3 bg-white/5 rounded-2xl border border-white/5">
|
|
<span class="block text-white font-black text-lg">{{ contrat.etatLieux.fileReturn|length }}</span>
|
|
<span class="text-[8px] text-slate-500 font-bold uppercase tracking-widest">Médias Retour</span>
|
|
</div>
|
|
<div class="p-3 bg-white/5 rounded-2xl border border-white/5">
|
|
<span class="block text-white font-black text-lg">{{ contrat.etatLieux.pointControlsReturn|length }}</span>
|
|
<span class="text-[8px] text-slate-500 font-bold uppercase tracking-widest">Points Vérifiés</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# --- 4. ÉTAT DES PAIEMENTS --- #}
|
|
<div class="p-8 bg-white/[0.02] border border-white/10 rounded-[2.5rem] backdrop-blur-md">
|
|
<div class="flex flex-col md:flex-row gap-8 justify-around items-start">
|
|
{# ACOMPTE #}
|
|
<div class="flex flex-col items-center gap-4 text-center w-full">
|
|
<div class="w-16 h-16 rounded-2xl flex items-center justify-center border {{ acompteOk ? 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30' : 'bg-rose-500/10 text-rose-500 border-rose-500/20' }}">
|
|
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
{% if acompteOk %}<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>{% else %}<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>{% endif %}
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<span class="block text-[9px] font-black uppercase tracking-widest {{ acompteOk ? 'text-emerald-500' : 'text-rose-500' }}">Acompte</span>
|
|
{% if not acompteOk %}
|
|
<div class="mt-3 flex flex-wrap justify-center gap-2">
|
|
{% for method in ['Carte Bancaire', 'Chèque', 'Espèces', 'Virement'] %}
|
|
<a href="{{ path('app_crm_contrats_view', {id: contrat.id, type: 'accompte', method: method}) }}" class="px-2 py-1 bg-rose-500/10 border border-rose-500/20 rounded-lg text-[8px] font-black text-rose-500 uppercase">{{ method|slice(0, 4) }}.</a>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hidden md:block w-px h-20 bg-white/5 self-center"></div>
|
|
|
|
{# CAUTION #}
|
|
<div class="flex flex-col items-center gap-4 text-center w-full">
|
|
<div class="w-16 h-16 rounded-2xl flex items-center justify-center border {{ cautionOk ? 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30' : 'bg-rose-500/20 text-rose-500 border-rose-500/30 animate-pulse' }}">
|
|
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<span class="block text-[9px] font-black uppercase tracking-widest {{ cautionOk ? 'text-emerald-500' : 'text-rose-500' }}">Caution</span>
|
|
<div class="mt-3">
|
|
{% set cautionRelase = contratPaymentPay(contrat, 'caution_free') %}
|
|
{% set cautionEncaisser = contratPaymentPay(contrat, 'caution_recup') %}
|
|
|
|
{% if cautionRelase %}
|
|
<span class="text-[9px] font-black text-emerald-500 uppercase italic">Libérée</span>
|
|
{% elseif cautionEncaisser %}
|
|
<span class="text-[9px] font-black text-amber-500 uppercase italic">Encaissée</span>
|
|
{% elseif cautionOk %}
|
|
<div class="flex gap-2">
|
|
<a href="{{ path('app_crm_contrats_view', {id: contrat.id, action: 'encaisser'}) }}" class="px-3 py-1 bg-amber-500/20 border border-amber-500/30 rounded-lg text-[9px] font-black text-amber-500 uppercase">Encaisser</a>
|
|
<a href="{{ path('app_crm_contrats_view', {id: contrat.id, action: 'liberer'}) }}" class="px-3 py-1 bg-emerald-500/20 border border-emerald-500/30 rounded-lg text-[9px] font-black text-emerald-400 uppercase">Libérer</a>
|
|
</div>
|
|
{% else %}
|
|
<div class="flex flex-wrap justify-center gap-2">
|
|
{% for method in ['Carte Bancaire', 'Chèque', 'Espèces', 'Virement'] %}
|
|
<a href="{{ path('app_crm_contrats_view', {id: contrat.id, type: 'caution', method: method}) }}" class="px-2 py-1 bg-rose-500/10 border border-rose-500/20 rounded-lg text-[8px] font-black text-rose-500 uppercase">{{ method|slice(0, 4) }}.</a>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hidden md:block w-px h-20 bg-white/5 self-center"></div>
|
|
|
|
{# SOLDE #}
|
|
<div class="flex flex-col items-center gap-4 text-center w-full">
|
|
<div class="w-16 h-16 rounded-2xl flex items-center justify-center border {{ soldeOk ? 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30' : 'bg-rose-500/10 text-rose-500 border-rose-500/20' }}">
|
|
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
{% if soldeOk %}<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>{% else %}<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/>{% endif %}
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<span class="block text-[9px] font-black uppercase tracking-widest {{ soldeOk ? 'text-emerald-500' : 'text-rose-500' }}">Solde Final</span>
|
|
{% if not soldeOk %}
|
|
<div class="mt-3 flex flex-wrap justify-center gap-2">
|
|
{% for method in ['Carte Bancaire', 'Chèque', 'Espèces', 'Virement'] %}
|
|
<a href="{{ path('app_crm_contrats_view', {id: contrat.id, type: 'solde', method: method}) }}" class="px-2 py-1 bg-rose-500/10 border border-rose-500/20 rounded-lg text-[8px] font-black text-rose-500 uppercase">{{ method|slice(0, 4) }}.</a>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# --- 5. PRODUITS ET OPTIONS --- #}
|
|
<div class="grid grid-cols-1 xl:grid-cols-2 gap-8">
|
|
<div class="space-y-4">
|
|
<h3 class="px-2 text-sm font-black text-slate-400 uppercase tracking-[0.3em]">Équipements loués</h3>
|
|
<div class="bg-white/[0.02] border border-white/10 rounded-[2rem] divide-y divide-white/5 overflow-hidden">
|
|
{% for product in contrat.contratsLines %}
|
|
<div class="p-6 hover:bg-white/[0.03] transition-colors flex justify-between items-start">
|
|
<div>
|
|
<h4 class="text-white font-bold text-base uppercase italic tracking-wide">{{ product.name }}</h4>
|
|
<p class="text-[10px] text-slate-400 font-bold uppercase mt-1">Caution : {{ product.caution }}€</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<span class="text-blue-400 font-black italic">{{ product.price1DayHt }}€</span>
|
|
<span class="block text-[8px] text-slate-500 uppercase font-black">HT / J</span>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<h3 class="px-2 text-sm font-black text-slate-400 uppercase tracking-[0.3em]">Options & Services</h3>
|
|
<div class="bg-white/[0.02] border border-white/10 rounded-[2rem] divide-y divide-white/5 overflow-hidden">
|
|
{% for opt in contrat.contratsOptions %}
|
|
<div class="p-6 hover:bg-white/[0.03] transition-colors flex justify-between items-center">
|
|
<h4 class="text-white font-bold text-sm uppercase">{{ opt.name }}</h4>
|
|
<span class="text-purple-400 font-black text-xs italic">{{ opt.price }}€ HT</span>
|
|
</div>
|
|
{% else %}
|
|
<div class="p-10 text-center text-slate-600 text-[10px] font-black uppercase tracking-widest opacity-30">Aucun supplément</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# --- 6. HISTORIQUE FINANCIER --- #}
|
|
<div class="space-y-4">
|
|
<h3 class="px-2 text-sm font-black text-slate-400 uppercase tracking-[0.3em]">Historique des transactions</h3>
|
|
<div class="bg-white/[0.02] border border-white/10 rounded-[2.5rem] overflow-hidden">
|
|
<table class="w-full text-left">
|
|
<thead>
|
|
<tr class="border-b border-white/5 bg-white/[0.03]">
|
|
<th class="px-8 py-4 text-[9px] font-black text-slate-300 uppercase tracking-widest">Date</th>
|
|
<th class="px-8 py-4 text-[9px] font-black text-slate-300 uppercase tracking-widest">Type</th>
|
|
<th class="px-8 py-4 text-[9px] font-black text-slate-300 uppercase tracking-widest">Montant</th>
|
|
<th class="px-8 py-4 text-[9px] font-black text-slate-300 uppercase tracking-widest text-right">Justificatif</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-white/5">
|
|
{% for payment in contrat.contratsPayments %}
|
|
<tr class="group hover:bg-white/[0.02] transition-colors">
|
|
<td class="px-8 py-5 text-xs text-white font-bold tracking-tight">{{ payment.paymentAt|date('d/m/Y H:i') }}</td>
|
|
<td class="px-8 py-5">
|
|
<span class="px-2 py-1 rounded-lg text-[8px] font-black uppercase italic
|
|
{% if payment.type == 'caution' %}bg-purple-500/10 text-purple-400
|
|
{% elseif payment.type == 'accompte' %}bg-blue-500/10 text-blue-400
|
|
{% else %}bg-emerald-500/10 text-emerald-400{% endif %}">
|
|
{{ payment.type|replace({'_': ' '}) }}
|
|
</span>
|
|
</td>
|
|
<td class="px-8 py-5 text-sm text-white font-black italic">{{ payment.amount|number_format(2, ',', ' ') }}€</td>
|
|
<td class="px-8 py-5 text-right">
|
|
<a href="{{ path('app_crm_contrats_view', {id: contrat.id, idPaymentPdf: payment.id}) }}" target="_blank" class="inline-flex items-center gap-2 text-[9px] font-black uppercase text-slate-400 hover:text-white transition-all">
|
|
<svg class="w-4 h-4 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" stroke-width="2"/></svg>
|
|
REÇU PDF
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr><td colspan="4" class="py-12 text-center text-slate-600 text-[10px] font-black uppercase opacity-40 italic">Aucun règlement</td></tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
{% endblock %}
|