{% extends 'base.html' %}
{% block title %}Nouveau calcul{% endblock %}

{% block content %}
<div class="page-header">
  <h1><i class="bi bi-plus-circle me-2" style="color:#ff6b35"></i>Nouveau calcul de prix</h1>
</div>

<div class="row g-4">
  <div class="col-lg-7">

    <!-- Import 3mf -->
    <div class="card mb-3 border border-warning border-opacity-50">
      <div class="card-header py-3">
        <i class="bi bi-file-earmark-zip text-warning me-2"></i>Import Bambu Studio (.3mf)
        <span class="badge bg-warning text-dark ms-1">Optionnel</span>
      </div>
      <div class="card-body">
        <div class="d-flex align-items-center gap-3">
          <input type="file" id="file3mf" accept=".3mf" class="form-control" style="max-width:320px">
          <button type="button" class="btn btn-outline-warning" onclick="parse3mf()">
            <i class="bi bi-magic me-1"></i>Extraire
          </button>
          <span id="parseStatus" class="text-muted small"></span>
        </div>
        <div class="form-text mt-1">Votre fichier .3mf depuis Bambu Studio pour remplir poids et duree automatiquement.</div>
      </div>
    </div>

    <form method="POST" id="jobForm">

      <!-- Donnees impression -->
      <div class="card mb-3">
        <div class="card-header py-3">Donnees impression</div>
        <div class="card-body">
          <div class="row g-3 mb-3">
            <div class="col-md-8">
              <label class="form-label fw-semibold">Nom de la commande</label>
              <input type="text" name="name" id="jobName" class="form-control" required
                     placeholder="ex: Marqueurs competition salle X">
            </div>
            <div class="col-md-4">
              <label class="form-label fw-semibold">Fichier source</label>
              <input type="text" name="source_file" id="sourceFile" class="form-control"
                     placeholder="nom_fichier.3mf">
            </div>
          </div>
          <div class="row g-3 mb-3">
            <div class="col-md-6">
              <label class="form-label fw-semibold">Client</label>
              <select name="client_id" id="clientSelect" class="form-select">
                <option value="">Sans client</option>
                {% for c in clients %}
                <option value="{{ c.id }}" data-dm="{{ c.design_multiplier }}">{{ c.name }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Matiere (filament)</label>
              <select name="material_id" id="materialSelect" class="form-select">
                <option value="">Prix global (parametres)</option>
                {% for m in materials %}
                <option value="{{ m.id }}" data-price="{{ m.price_per_kg }}"
                        data-stock="{{ m.stock_g }}" data-threshold="{{ m.low_stock_threshold_g }}"
                        data-name="{{ m.name }} ({{ m.type }})">
                  {{ m.name }} ({{ m.type }}) — {{ m.price_per_kg }} €/kg
                  {% if m.stock_g <= 0 %}[RUPTURE]{% elif m.stock_g <= m.low_stock_threshold_g %}[stock bas]{% endif %}
                </option>
                {% endfor %}
              </select>
              <div id="stockInfo" class="form-text"></div>
            </div>
          </div>
          <div class="row g-3 mb-3">
            <div class="col-md-4">
              <label class="form-label fw-semibold">Poids plateau (g)</label>
              <input type="number" name="weight_g" id="weight_g" class="form-control"
                     step="0.01" min="0.1" required placeholder="423.97">
              <div class="form-text">Poids total du plateau Bambu (toutes pièces)</div>
            </div>
            <div class="col-md-4">
              <label class="form-label fw-semibold">Heures</label>
              <input type="number" name="hours" id="hours" class="form-control" min="0" value="0">
            </div>
            <div class="col-md-4">
              <label class="form-label fw-semibold">Minutes</label>
              <input type="number" name="minutes" id="minutes" class="form-control" min="0" max="59" value="0">
              <div class="form-text">Temps total Bambu</div>
            </div>
          </div>
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label fw-semibold">Pièces par plateau</label>
              <input type="number" name="pieces_per_plate" id="pieces_per_plate" class="form-control"
                     min="1" step="1" value="1">
              <div class="form-text">Combien de pièces tiennent sur un plateau.</div>
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Quantité commandée</label>
              <input type="number" name="order_qty" id="order_qty" class="form-control"
                     min="1" step="1" value="1">
              <div class="form-text">Nombre total de pièces à produire.</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Profils -->
      <div class="card mb-3">
        <div class="card-header py-3">
          <i class="bi bi-bookmark-star me-2"></i>Profils
          <a href="{{ url_for('profiles') }}" class="btn btn-sm btn-outline-secondary ms-2 py-0" target="_blank">
            <i class="bi bi-pencil-square"></i> Gerer
          </a>
        </div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label fw-semibold small">
                <i class="bi bi-cpu me-1 text-muted"></i>Profil machine
              </label>
              <select name="machine_profile_id" id="machineProfileSelect" class="form-select form-select-sm">
                <option value="">— Parametres globaux —</option>
                {% for p in machine_profiles %}
                <option value="{{ p.id }}">{{ p.name }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold small">
                <i class="bi bi-hand-index me-1 text-muted"></i>Profil manutention
              </label>
              <select name="handling_profile_id" id="handlingProfileSelect" class="form-select form-select-sm">
                <option value="">— Parametres globaux —</option>
                {% for p in handling_profiles %}
                <option value="{{ p.id }}">{{ p.name }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold small">
                <i class="bi bi-box me-1 text-muted"></i>Profil matiere
              </label>
              <select name="material_profile_id" id="materialProfileSelect" class="form-select form-select-sm">
                <option value="">— Parametres globaux —</option>
                {% for p in material_profiles %}
                <option value="{{ p.id }}" data-margin="{{ p.material_margin_pct }}">
                  {{ p.name }} ({{ p.material_margin_pct }}%)
                </option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold small">
                <i class="bi bi-tags me-1 text-muted"></i>Profil tarif client
              </label>
              <select name="pricing_profile_id" id="pricingProfileSelect" class="form-select form-select-sm">
                <option value="">— Manuel —</option>
                {% for p in pricing_profiles %}
                <option value="{{ p.id }}"
                        data-dm="{{ p.design_multiplier }}"
                        data-margin="{{ p.gross_margin_pct }}">
                  {{ p.name }}
                </option>
                {% endfor %}
              </select>
            </div>
          </div>
        </div>
      </div>

      <!-- Parametres tarifaires -->
      <div class="card mb-3">
        <div class="card-header py-3">Parametres tarifaires</div>
        <div class="card-body">
          <div class="mb-4">
            <label class="form-label fw-semibold">
              Coefficient design <span class="badge bg-secondary ms-1" id="dmLabel">x1.80</span>
            </label>
            <div class="d-flex gap-2 mb-2" id="dmButtons">
              <button type="button" id="btnDM080" class="btn btn-sm btn-outline-success" onclick="setDM(0.80)">
                <i class="bi bi-check2 me-1 d-none" id="checkDM080"></i>STL fourni (x0.80)
              </button>
              <button type="button" id="btnDM180" class="btn btn-sm btn-outline-primary" onclick="setDM(1.80)">
                <i class="bi bi-check2 me-1 d-none" id="checkDM180"></i>Creation complete (x1.80)
              </button>
            </div>
            <input type="number" name="design_multiplier" id="design_multiplier"
                   class="form-control form-control-sm" step="0.05" min="0" value="1.80">
          </div>
          <div class="mb-4">
            <label class="form-label fw-semibold d-flex justify-content-between">
              Marge brute <span id="marginDisplay" class="fw-bold" style="color:#ff6b35">27.5 %</span>
            </label>
            <div class="d-flex gap-2 mb-2" id="marginButtons">
              <button type="button" class="btn btn-sm btn-outline-secondary" onclick="setMargin(20)">20%</button>
              <button type="button" class="btn btn-sm btn-outline-secondary" onclick="setMargin(25)">25%</button>
              <button type="button" class="btn btn-sm btn-outline-secondary" onclick="setMargin(30)">30%</button>
              <button type="button" class="btn btn-sm btn-outline-secondary" onclick="setMargin(35)">35%</button>
            </div>
            <input type="range" name="gross_margin_pct" id="gross_margin_pct" class="form-range"
                   min="0" max="100" step="0.5" value="27.5">
            <div class="d-flex justify-content-between" style="font-size:.75rem;color:#6b7280">
              <span>0%</span><span>100%</span>
            </div>
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">Remise client (%)</label>
            <input type="number" name="discount_pct" id="discount_pct" class="form-control"
                   min="0" max="100" step="0.5" value="0">
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">Notes internes</label>
            <textarea name="notes" class="form-control" rows="2"></textarea>
          </div>
        </div>
      </div>

      <button type="submit" class="btn w-100 py-2 fw-bold" style="background:#ff6b35;color:#fff">
        <i class="bi bi-save me-2"></i>Enregistrer la commande
      </button>
    </form>
  </div>

  <!-- Recap temps reel -->
  <div class="col-lg-5">
    <div class="card sticky-top" style="top:1.5rem">
      <div class="card-header py-3">
        <i class="bi bi-receipt me-2"></i>Recapitulatif temps reel
      </div>
      <div class="card-body" id="breakdown">
        <div class="text-center text-muted py-4">
          <i class="bi bi-calculator fs-2"></i>
          <p class="mt-2 small">Remplissez le poids et la duree pour voir le calcul.</p>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// ── 3MF parser ────────────────────────────────────────────────────────────────
function parse3mf() {
  const file = document.getElementById('file3mf').files[0];
  if (!file) { alert('Selectionnez un fichier .3mf'); return; }
  const status = document.getElementById('parseStatus');
  status.textContent = 'Analyse...';
  const fd = new FormData();
  fd.append('file', file);
  fetch('/api/parse-3mf', {method:'POST', body:fd})
    .then(r => r.json())
    .then(d => {
      let filled = [];
      if (d.weight_g)      { document.getElementById('weight_g').value = d.weight_g; filled.push('poids'); }
      if (d.hours != null) { document.getElementById('hours').value = d.hours;   filled.push('heures'); }
      if (d.minutes != null){ document.getElementById('minutes').value = d.minutes; }
      if (d.filename) {
        document.getElementById('sourceFile').value = d.filename;
        if (!document.getElementById('jobName').value)
          document.getElementById('jobName').value = d.filename;
      }
      status.textContent = filled.length ? 'Extrait: ' + filled.join(', ') : 'Donnees non trouvees';
      status.style.color  = filled.length ? '#22c55e' : '#f59e0b';
      recalc();
    })
    .catch(() => { status.textContent = 'Erreur de lecture'; status.style.color = '#ef4444'; });
}

// ── Coefficient design ────────────────────────────────────────────────────────
function setDM(val) {
  document.getElementById('design_multiplier').value = val;
  updateDMLabel(val);
  recalc();
}

function updateDMLabel(val) {
  val = parseFloat(val);
  document.getElementById('dmLabel').textContent = 'x' + val.toFixed(2);
  // Etat actif des boutons
  const is080 = Math.abs(val - 0.80) < 0.001;
  const is180 = Math.abs(val - 1.80) < 0.001;
  document.getElementById('btnDM080').className = 'btn btn-sm ' + (is080 ? 'btn-success' : 'btn-outline-success');
  document.getElementById('btnDM180').className = 'btn btn-sm ' + (is180 ? 'btn-primary' : 'btn-outline-primary');
}

document.getElementById('design_multiplier').addEventListener('input', function() {
  updateDMLabel(this.value);
  recalc();
});

// ── Marge ─────────────────────────────────────────────────────────────────────
function setMargin(val) {
  document.getElementById('gross_margin_pct').value = val;
  updateMarginDisplay(val);
  recalc();
}

function updateMarginDisplay(val) {
  val = parseFloat(val);
  document.getElementById('marginDisplay').textContent = val.toFixed(1) + ' %';
  [20, 25, 30, 35].forEach(function(v) {
    const btn = document.querySelector('#marginButtons button[onclick="setMargin(' + v + ')"]');
    if (btn) btn.className = 'btn btn-sm ' + (Math.abs(val - v) < 0.01 ? 'btn-secondary' : 'btn-outline-secondary');
  });
}

const marginSlider = document.getElementById('gross_margin_pct');
marginSlider.addEventListener('input',  function() { updateMarginDisplay(this.value); recalc(); });
marginSlider.addEventListener('change', function() { updateMarginDisplay(this.value); recalc(); });

// ── Profil tarif client ───────────────────────────────────────────────────────
document.getElementById('pricingProfileSelect').addEventListener('change', function() {
  const opt = this.options[this.selectedIndex];
  if (opt.value) {
    const dm     = parseFloat(opt.dataset.dm);
    const margin = parseFloat(opt.dataset.margin);
    if (!isNaN(dm)) {
      document.getElementById('design_multiplier').value = dm;
      updateDMLabel(dm);
    }
    if (!isNaN(margin)) {
      marginSlider.value = margin;
      updateMarginDisplay(margin);
    }
    recalc();
  }
});

// ── Client : auto-remplir profils par défaut ─────────────────────────────────
document.getElementById('clientSelect').addEventListener('change', function() {
  const clientId = this.value;
  if (!clientId) return;
  fetch('/api/client/' + clientId + '/defaults')
    .then(r => r.json())
    .then(d => {
      if (d.machine_profile_id  != null) document.getElementById('machineProfileSelect').value  = d.machine_profile_id;
      if (d.handling_profile_id != null) document.getElementById('handlingProfileSelect').value = d.handling_profile_id;
      if (d.material_profile_id != null) document.getElementById('materialProfileSelect').value = d.material_profile_id;
      if (d.pricing_profile_id  != null) {
        const sel = document.getElementById('pricingProfileSelect');
        sel.value = d.pricing_profile_id;
        // Appliquer DM + marge du profil tarif sélectionné
        const opt = sel.options[sel.selectedIndex];
        if (opt && opt.value) {
          const dm     = parseFloat(opt.dataset.dm);
          const margin = parseFloat(opt.dataset.margin);
          if (!isNaN(dm))     { document.getElementById('design_multiplier').value = dm; updateDMLabel(dm); }
          if (!isNaN(margin)) { marginSlider.value = margin; updateMarginDisplay(margin); }
        }
      }
      recalc();
    });
});

// ── Matiere : afficher stock ──────────────────────────────────────────────────
document.getElementById('materialSelect').addEventListener('change', function() {
  const opt       = this.options[this.selectedIndex];
  const stock     = parseFloat(opt.dataset.stock) || 0;
  const threshold = parseFloat(opt.dataset.threshold) || 200;
  const info      = document.getElementById('stockInfo');
  if (!opt.value) { info.textContent = ''; }
  else if (stock <= 0) info.innerHTML = '<span class="text-danger">RUPTURE DE STOCK</span>';
  else if (stock <= threshold) info.innerHTML = '<span class="text-warning">Stock bas : ' + stock.toFixed(0) + ' g</span>';
  else info.innerHTML = '<span class="text-success">Stock : ' + stock.toFixed(0) + ' g</span>';
  recalc();
});

// ── Autres champs → recalc ────────────────────────────────────────────────────
['weight_g','hours','minutes','discount_pct','pieces_per_plate','order_qty'].forEach(id => {
  const el = document.getElementById(id);
  if (el) el.addEventListener('input', recalc);
});
['machineProfileSelect','handlingProfileSelect','materialProfileSelect'].forEach(id => {
  const el = document.getElementById(id);
  if (el) el.addEventListener('change', recalc);
});

// ── Calcul API ────────────────────────────────────────────────────────────────
function recalc() {
  const w = parseFloat(document.getElementById('weight_g').value) || 0;
  const h = parseInt(document.getElementById('hours').value)   || 0;
  const m = parseInt(document.getElementById('minutes').value)  || 0;
  if (w <= 0 && h === 0 && m === 0) return;
  if (w <= 0) return;

  const body = {
    weight_g:          w,
    hours:             h,
    minutes:           m,
    design_multiplier: parseFloat(document.getElementById('design_multiplier').value) || 1.80,
    gross_margin_pct:  parseFloat(document.getElementById('gross_margin_pct').value ?? 27.5),
    discount_pct:      parseFloat(document.getElementById('discount_pct').value) || 0,
    material_id:          document.getElementById('materialSelect').value     || null,
    machine_profile_id:   document.getElementById('machineProfileSelect').value  || null,
    handling_profile_id:  document.getElementById('handlingProfileSelect').value || null,
    material_profile_id:  document.getElementById('materialProfileSelect').value || null,
    pieces_per_plate:     parseInt(document.getElementById('pieces_per_plate').value) || 1,
    order_qty:            parseInt(document.getElementById('order_qty').value) || 1,
  };

  fetch('/api/calculate', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(body)
  })
    .then(r => r.json())
    .then(d => renderBreakdown(d, body))
    .catch(() => {});
}

// ── Rendu du recap ────────────────────────────────────────────────────────────
function fmt(n)  { return parseFloat(n).toFixed(4) + ' €'; }
function fmt2(n) { return parseFloat(n).toFixed(2) + ' €'; }

function renderBreakdown(d, body) {
  const dm  = parseFloat(body.design_multiplier).toFixed(2);
  const mgn = parseFloat(body.gross_margin_pct).toFixed(1);
  const qty = body.order_qty || 1;
  const ppp = body.pieces_per_plate || 1;
  const multi = qty > 1;

  // Nom du materiau
  const matSel  = document.getElementById('materialSelect');
  const matOpt  = matSel.options[matSel.selectedIndex];
  const matName = matOpt.value ? (matOpt.dataset.name || matOpt.text.split('—')[0].trim()) : 'global';

  // TVA
  const tvaLabel = d._tva_pct > 0 ? `TVA (${d._tva_pct}%)` : `TVA — franchise en base`;
  const tvaClass = d._tva_pct > 0 ? '' : 'text-muted fst-italic';

  // Helper : génère une ligne avec 1 ou 2 colonnes de valeurs
  // cls : classes CSS supplémentaires sur le div
  function row(label, pieceVal, extraCls = '', isFmt4 = false) {
    const fmtFn = isFmt4 ? fmt : fmt2;
    const p = fmtFn(pieceVal);
    const o = multi ? `<span class="text-end" style="min-width:80px">${fmt2(pieceVal * qty)}</span>` : '';
    return `<div class="breakdown-row${extraCls ? ' '+extraCls : ''}">
      <span class="flex-fill">${label}</span>
      <span class="text-end" style="min-width:80px">${p}</span>
      ${o}
    </div>`;
  }
  function rowFiscal(label, pieceVal, extraCls = '') {
    const p = fmt2(pieceVal);
    const o = multi ? `<span class="text-end" style="min-width:80px">${fmt2(pieceVal * qty)}</span>` : '';
    return `<div class="breakdown-row${extraCls ? ' '+extraCls : ''}">
      <span class="flex-fill">${label}</span>
      <span class="text-end" style="min-width:80px">${p}</span>
      ${o}
    </div>`;
  }

  // Alerte plateau incomplet
  const nbPlateaux = Math.ceil(qty / ppp);
  const lastPlate  = qty % ppp;
  let plateauAlert = '';
  if (lastPlate !== 0) {
    plateauAlert = `<div class="alert alert-warning py-2 mb-2 small">
      <i class="bi bi-exclamation-triangle me-1"></i>
      Dernier plateau incomplet : <strong>${lastPlate}/${ppp} pièces</strong> —
      vous pourriez imprimer <strong>${nbPlateaux * ppp}</strong> pièces pour le même coût fixe.
    </div>`;
  }

  // En-tête colonnes (multi uniquement)
  const colHeader = multi
    ? `<div class="d-flex justify-content-end gap-0 small text-muted mb-1 border-bottom pb-1">
        <span style="min-width:80px;text-align:right">/ pièce</span>
        <span style="min-width:80px;text-align:right">/ commande ×${qty}</span>
      </div>` : '';

  // VFL / autres taxes
  const vflRow   = d._vfl_pct > 0   ? rowFiscal(`<span class="breakdown-muted ps-2">VFL impot (${d._vfl_pct}%)</span>`, d.vfl_amount) : '';
  const otherRow = d._other_taxes_pct > 0 ? rowFiscal(`<span class="breakdown-muted ps-2">Autres taxes / CFE (${d._other_taxes_pct}%)</span>`, d.other_taxes_amount) : '';

  // Remise (sur prix TTC/pièce)
  let disRow = '';
  if (body.discount_pct > 0) {
    const remisePiece = d.prix_ttc * body.discount_pct / 100;
    const o = multi ? `<span class="text-end text-danger" style="min-width:80px">-${fmt2(remisePiece * qty)}</span>` : '';
    disRow = `<div class="breakdown-row text-danger">
      <span class="flex-fill">Remise (${body.discount_pct}%)</span>
      <span class="text-end" style="min-width:80px">-${fmt2(remisePiece)}</span>${o}
    </div>`;
  }

  // Capacité
  const cap      = d.capacity || {};
  const totalMin = d.total_print_min || 0;
  const capBlock = `
    <div class="breakdown-row section-header mt-1"><span>Capacite de production</span></div>
    <div class="breakdown-row"><span class="breakdown-muted ps-2">Nb plateaux necessaires</span><span><strong>${nbPlateaux}</strong> plateau${nbPlateaux>1?'x':''}</span></div>
    <div class="breakdown-row"><span class="breakdown-muted ps-2">Duree totale (impression + cooldown)</span><span>${Math.floor(totalMin/60)}h${String(Math.round(totalMin%60)).padStart(2,'0')}min</span></div>
    <div class="breakdown-row"><span class="breakdown-muted ps-2">Pieces / jour (${cap.effective_printers||5} machines)</span><span>${cap.pieces_per_day||'—'}</span></div>
    <div class="breakdown-row"><span class="breakdown-muted ps-2">Pieces / semaine</span><span>${cap.pieces_per_week||'—'}</span></div>
    <div class="breakdown-row"><span class="breakdown-muted ps-2">Pieces / mois (30j)</span><span>${cap.pieces_per_month||'—'}</span></div>`;

  // Prix finaux
  const pricePiece = d.final_price;
  const priceOrder = pricePiece * qty;
  const finalLabel = multi
    ? `<div class="d-flex justify-content-between align-items-center mt-2 pt-2" style="border-top:2px solid #dee2e6">
        <span class="fw-bold">PRIX FINAL TTC</span>
        <div class="d-flex gap-2">
          <span class="final-price" style="font-size:1.4rem">${fmt2(pricePiece)}</span>
          <span class="final-price" style="font-size:1.4rem;opacity:.7">× ${qty} = ${fmt2(priceOrder)}</span>
        </div>
      </div>`
    : `<div class="breakdown-row total"><span>PRIX FINAL TTC</span><span class="final-price">${fmt2(pricePiece)}</span></div>`;

  document.getElementById('breakdown').innerHTML = plateauAlert + colHeader + `
    <div class="breakdown-row section-header"><span>Cout fixe</span></div>
    ${row(`<span class="breakdown-muted ps-2">Matiere <small class="text-secondary">${matName}</small></span>`, d.material_cost, '', true)}
    ${row(`<span class="breakdown-muted ps-2">Marge matiere (${d._material_margin_pct}%)</span>`, d.material_margin, '', true)}
    ${row(`<span class="breakdown-muted ps-2">Usure — imprimante</span>`, d.printer_wear, '', true)}
    ${row(`<span class="breakdown-muted ps-2">Usure — buse</span>`, d.nozzle_wear, '', true)}
    ${row(`<span class="breakdown-muted ps-2">Usure — plateau</span>`, d.plate_wear, '', true)}
    ${row(`<span class="breakdown-muted ps-2">Electricite <small class="text-secondary">${parseFloat(d.kwh_used).toFixed(3)} kWh × ${d._elec_price} €</small></span>`, d.electricity_cost, '', true)}
    ${row(`<span class="fw-semibold">Total cout fixe</span>`, d.cout_fixe, 'subtotal')}

    <div class="breakdown-row section-header"><span>Partie variable</span></div>
    ${row(`<span class="breakdown-muted ps-2">Manutention <small class="text-secondary">${d._handling_minutes} min × ${d._handling_rate} €/h</small></span>`, d.handling_cost, '', true)}
    ${row(`<span class="breakdown-muted ps-2">Design (x${dm})</span>`, d.design_cost, '', true)}
    ${row(`<span class="breakdown-muted ps-2">Marge brute (${mgn}%)</span>`, d.margin_amount)}
    ${row(`<span class="fw-semibold">Total marge <small class="text-muted fw-normal">(${d.marge_pct_on_ht}% du HT)</small></span>`, d.total_marge, 'subtotal')}

    <div class="breakdown-row section-header"><span>Fiscal</span></div>
    ${rowFiscal(`<span class="breakdown-muted ps-2">Cotisations BIC vente (${d._cot_pct}%)</span>`, d.cotisations_amount)}
    ${vflRow}${otherRow}
    <div class="breakdown-row" style="border-top:none">
      <span class="fw-bold">Prix HT</span>
      <span class="final-price" style="font-size:1.3rem;text-align:right;min-width:80px">${fmt2(d.prix_ht_net)}</span>
      ${multi ? `<span class="final-price" style="font-size:1.3rem;text-align:right;min-width:80px;opacity:.75">${fmt2(d.prix_ht_net * qty)}</span>` : ''}
    </div>
    <div class="breakdown-row ${tvaClass}">
      <span class="ps-2">${tvaLabel}</span>
      <span class="text-end" style="min-width:80px">${d._tva_pct > 0 ? fmt2(d.tva_amount) : ''}</span>
      ${multi && d._tva_pct > 0 ? `<span class="text-end" style="min-width:80px">${fmt2(d.tva_amount * qty)}</span>` : (multi ? '<span style="min-width:80px"></span>' : '')}
    </div>
    ${disRow}
    ${finalLabel}
  ` + capBlock;
}

// Init
updateDMLabel(1.80);
updateMarginDisplay(27.5);
</script>
{% endblock %}