{% extends 'base.html' %}
{% block title %}{% if profile %}Modifier{% else %}Nouveau{% endif %} profil tarif{% endblock %}

{% block content %}
<div class="page-header">
  <a href="{{ url_for('profiles') }}#pricing" class="text-muted text-decoration-none small">
    <i class="bi bi-arrow-left"></i> Templates
  </a>
  <h1 class="mt-1">
    <i class="bi bi-tags me-2" style="color:#ff6b35"></i>
    {% if profile %}Modifier{% else %}Nouveau{% endif %} profil tarif client
  </h1>
</div>

<div class="row">
  <div class="col-lg-5">
    <form method="POST">
      <div class="card mb-3">
        <div class="card-header py-3">Parametres</div>
        <div class="card-body">
          <div class="mb-3">
            <label class="form-label fw-semibold">Nom du profil</label>
            <input type="text" name="name" class="form-control" required
                   value="{{ profile.name if profile else '' }}"
                   placeholder="ex: Client STL, Client standard, Client VIP...">
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">Coefficient design</label>
            <div class="d-flex gap-2 mb-2">
              <button type="button" class="btn btn-sm btn-outline-success" onclick="setDM(0.80)">STL fourni (x0.80)</button>
              <button type="button" class="btn btn-sm btn-outline-primary" onclick="setDM(1.80)">Creation complete (x1.80)</button>
            </div>
            <input type="number" name="design_multiplier" id="design_multiplier" class="form-control" step="0.05" min="0" required
                   value="{{ profile.design_multiplier if profile else 1.80 }}">
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold d-flex justify-content-between">
              Marge brute <span id="marginDisplay" class="fw-bold" style="color:#ff6b35">
                {{ profile.gross_margin_pct if profile else 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="{{ profile.gross_margin_pct if profile else 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">Notes</label>
            <textarea name="notes" class="form-control" rows="2">{{ profile.notes if profile else '' }}</textarea>
          </div>
        </div>
      </div>
      <div class="d-flex gap-2">
        <button type="submit" class="btn px-4 fw-bold" style="background:#ff6b35;color:#fff">
          <i class="bi bi-save me-1"></i>Enregistrer
        </button>
        <a href="{{ url_for('profiles') }}#pricing" class="btn btn-outline-secondary">Annuler</a>
      </div>
    </form>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function setDM(val) {
  document.getElementById('design_multiplier').value = val;
}

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

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 slider = document.getElementById('gross_margin_pct');
slider.addEventListener('input', function() { updateMarginDisplay(this.value); });
slider.addEventListener('change', function() { updateMarginDisplay(this.value); });

// Init
updateMarginDisplay(slider.value);
</script>
{% endblock %}