{% extends 'admin/layout.html.twig' %}
{% block title %}Simulateur tarifaire — WTL{% endblock %}
{% block admin_body %}
{% include 'admin/ui/_page_header.html.twig' with {
    page_eyebrow:'Commercial',
    page_title:'Simulateur tarifaire',
    page_subtitle:'Commencez par la formule. Dépliez ensuite uniquement les frais utiles à cette proposition.',
    page_actions: prospection ? [{label:'Retour au dossier',href:path('admin_prospection_show',{id:prospection.id}),icon:'bi-arrow-left'}] : []
} %}
{% if prospection %}<div class="alert alert-light border d-flex gap-3 align-items-start"><i class="bi bi-bullseye fs-4" aria-hidden="true"></i><div><strong>Simulation pour {{ prospection.venueEntity ? prospection.venueEntity.name : prospection.venue }}</strong><div class="small text-secondary">Le bouton final reportera le total et les frais de déplacement dans cette prospection. Rien n'est enregistré avant validation du formulaire de prospection.</div></div></div>{% endif %}
<div class="row g-4 simulator-layout">
<div class="col-xl-7">
  <div class="sim-section card table-card mb-3">
<div class="card-body p-4">
<h2 class="h5 mb-3">
<span class="sim-step">A</span> Formule et cible</h2>
<div class="row g-3">
<div class="col-md-7">
<label class="form-label">Formule</label>
<select class="form-select" id="tariff">
{% for t in tariffs %}
<option value="{{ t.code }}" data-floor="{{ t.floorPrice }}" data-target="{{ t.targetPrice }}" data-comfort="{{ t.comfortPrice }}">{{ t.code }} — {{ t.venueFormula }}
</option>
{% endfor %}
</select>
</div>
<div class="col-md-5">
<label class="form-label">Niveau tarifaire</label>
<select class="form-select" id="level">
<option value="floor">Plancher</option>
<option value="target" selected>Cible</option>
<option value="comfort">Confort</option>
</select>
</div>
</div>
</div>
</div>
<details class="advanced-options simulator-advanced mt-3" open>
<summary><span>Frais et options de la prestation<small>Trajet, accueil, techniciens, options et remise</small></span></summary>
<div class="advanced-options-body pt-3">
  <div class="sim-section card table-card mb-3">
<div class="card-body p-4">
<h2 class="h5 mb-3">
<span class="sim-step">B</span> Trajet et stationnement</h2>
<div class="row g-3">
<div class="col-md-4">
<label class="form-label">Distance aller simple (km)</label>
<input class="form-control sim-input" type="number" min="0" step="1" id="distance" value="0">
</div>
<div class="col-md-4">
<label class="form-label">Péages estimés (€)</label>
<input class="form-control sim-input" type="number" min="0" step="0.01" id="tolls" value="0">
</div>
<div class="col-md-4">
<label class="form-label">Stationnement (€)</label>
<input class="form-control sim-input" type="number" min="0" step="0.01" id="parking" value="0">
</div>
</div>
</div>
</div>
  <div class="sim-section card table-card mb-3">
<div class="card-body p-4">
<h2 class="h5 mb-3">
<span class="sim-step">C</span> Repas et nuit artiste / accompagnateur</h2>
<div class="row g-3">
<div class="col-md-6">
<label class="form-label">Repas non fournis</label>
<input class="form-control sim-input" type="number" min="0" step="1" id="artistMeals" value="0">
</div>
<div class="col-md-6">
<label class="form-label">Nuits</label>
<input class="form-control sim-input" type="number" min="0" step="1" id="artistNights" value="0">
</div>
</div>
</div>
</div>
  <div class="sim-section card table-card mb-3">
<div class="card-body p-4">
<h2 class="h5 mb-3">
<span class="sim-step">D</span> Techniciens supplémentaires</h2>
<div class="row g-3">
<div class="col-md-4">
<label class="form-label">Nombre de techniciens</label>
<input class="form-control sim-input" type="number" min="0" step="1" id="techs" value="0">
</div>
<div class="col-md-4">
<label class="form-label">Repas techniciens</label>
<input class="form-control sim-input" type="number" min="0" step="1" id="techMeals" value="0" disabled>
</div>
<div class="col-md-4">
<label class="form-label">Nuits techniciens</label>
<input class="form-control sim-input" type="number" min="0" step="1" id="techNights" value="0" disabled>
</div>
</div>
<div class="form-text mt-2">Sans technicien supplémentaire, les repas et nuits techniciens sont automatiquement ignorés.</div>
</div>
</div>
  <div class="sim-section card table-card mb-3">
<div class="card-body p-4">
<h2 class="h5 mb-3">
<span class="sim-step">E</span> Options</h2>
<div class="row g-3">
<div class="col-md-6">
<label class="form-label">Vidéo (€)</label>
<input class="form-control sim-input" type="number" min="0" step="0.01" id="video" value="0">
</div>
<div class="col-md-6">
<label class="form-label">Lumière (€)</label>
<input class="form-control sim-input" type="number" min="0" step="0.01" id="light" value="0">
</div>
</div>
</div>
</div>
  <div class="sim-section card table-card mb-3">
<div class="card-body p-4">
<h2 class="h5 mb-3">
<span class="sim-step">F</span> Autres frais</h2>
<label class="form-label">Montant (€)</label>
<input class="form-control sim-input" type="number" min="0" step="0.01" id="other" value="0">
</div>
</div>
  <div class="sim-section card table-card">
<div class="card-body p-4">
<h2 class="h5 mb-3">
<span class="sim-step">G</span> Remise commerciale</h2>
<label class="form-label">Montant de la remise (€)</label>
<input class="form-control sim-input" type="number" min="0" step="0.01" id="discount" value="0">
</div>
</div>
</div>
</details>
</div>
<div class="col-xl-5">
<div class="card table-card position-sticky simulator-result" style="top:1.5rem">
<div class="card-body p-4">
<h2 class="h5 mb-3">Récapitulatif</h2>
<div class="d-flex justify-content-between py-2 border-bottom">
<span>Tarif artistique</span>
<strong id="r-artistic">0 €</strong>
</div>
<div class="d-flex justify-content-between py-2 border-bottom">
<span>Déplacement kilométrique</span>
<strong id="r-travel">0 €</strong>
</div>
<div class="d-flex justify-content-between py-2 border-bottom">
<span>Péages & stationnement</span>
<strong id="r-road">0 €</strong>
</div>
<div class="d-flex justify-content-between py-2 border-bottom">
<span>Accueil & techniciens</span>
<strong id="r-hospitality">0 €</strong>
</div>
<div class="d-flex justify-content-between py-2 border-bottom">
<span>Options & autres frais</span>
<strong id="r-options">0 €</strong>
</div>
<div class="d-flex justify-content-between py-2">
<span>Remise</span>
<strong id="r-discount">0 €</strong>
</div>
<div class="mt-4 p-3 rounded bg-dark text-white">
<div class="small text-white-50">TOTAL HT</div>
<div class="sim-total" id="r-total">0 €</div>
</div>
<a href="#" id="report-link" class="btn btn-dark w-100 mt-3 touch-target">
<i class="bi bi-arrow-right-circle me-1">
</i>{{ prospection ? 'Reporter dans cette prospection' : 'Créer une prospection avec ce tarif' }}</a>
</div>
</div>
</div>
</div>
<script id="fee-data" type="application/json">{{ feeMap|json_encode|raw }}
</script>
{% endblock %}
{% block javascripts %}{{ parent() }}
<script>
(()=>{const fees=JSON.parse(document.querySelector('#fee-data').textContent||'{}'),q=id=>document.querySelector('#'+id),num=id=>parseFloat(q(id)?.value||0),eur=v=>new Intl.NumberFormat('fr-FR',{style:'currency',currency:'EUR'}).format(v);
const reportBase={{ (prospection ? path('admin_prospection_edit',{id:prospection.id}) : path('admin_prospection_new'))|json_encode|raw }};
function calc(){const techs=Math.max(0,num('techs'));const hasTech=techs>0;q('techMeals').disabled=!hasTech;q('techNights').disabled=!hasTech;if(!hasTech){q('techMeals').value=0;q('techNights').value=0;}const o=q('tariff').selectedOptions[0],level=q('level').value,art=parseFloat(o?.dataset[level]||0);const travel=num('distance')*2*(fees.KM||0);const road=num('tolls')+num('parking');const hospitality=num('artistMeals')*(fees.REPAS||0)+num('artistNights')*(fees.HOTEL||0)+techs*(fees.TECH||0)+(hasTech?num('techMeals')*(fees.REPAS_TECH||0):0)+(hasTech?num('techNights')*(fees.HOTEL_TECH||0):0);const options=num('video')+num('light')+num('other');const discount=num('discount');const total=Math.max(0,art+travel+road+hospitality+options-discount);q('r-artistic').textContent=eur(art);q('r-travel').textContent=eur(travel);q('r-road').textContent=eur(road);q('r-hospitality').textContent=eur(hospitality);q('r-options').textContent=eur(options);q('r-discount').textContent='− '+eur(discount);q('r-total').textContent=eur(total);const params=new URLSearchParams({proposedFee:total.toFixed(2),travelFee:(travel+road).toFixed(2)});{% if prospection %}params.set('from_simulator','1');{% endif %}q('report-link').href=reportBase+'?'+params.toString();}
document.querySelectorAll('input,select').forEach(e=>{e.addEventListener('input',calc);e.addEventListener('change',calc)});if(window.matchMedia('(max-width: 767.98px)').matches)document.querySelector('.simulator-advanced')?.removeAttribute('open');calc()})();
</script>
{% endblock %}