{% extends "base.html" %}
{% block title %}Quotes{% endblock %}
{% block content %}
<div class="page-head"><div><h1>Quotes</h1><p class="muted">Create a branded PDF quote. A “New quote for approval” automation emails each new quote automatically.</p></div></div>

<form method="post" class="card" id="quote-form">
  <input type="hidden" name="action" value="create">
  <h2>New Quote</h2>
  <div class="row">
    <div class="field"><label>Customer</label><input type="text" name="customer" required placeholder="Company name"></div>
    <div class="field"><label>Contact <span class="muted" style="font-weight:400">(optional)</span></label><input type="text" name="contact" placeholder="Name, email or phone"></div>
    {% if brands|length > 1 %}<div class="field"><label>From company</label><select name="brand">{% for k, b in brands.items() %}<option value="{{ k }}">{{ b.name }}</option>{% endfor %}</select></div>{% endif %}
  </div>
  <table class="people" id="lines">
    <tr><th>Product</th><th style="width:110px">Quantity</th><th style="width:140px">Unit price</th><th style="width:120px;text-align:right">Line total</th></tr>
    {% for i in range(4) %}
    <tr><td><input type="text" name="product" list="products" placeholder="{{ 'Start typing a product' if loop.first }}"></td>
      <td><input type="number" name="qty" min="0" step="any"></td>
      <td><input type="number" name="price" min="0" step="0.01" placeholder="From price list"></td>
      <td class="line-total" style="text-align:right">-</td></tr>
    {% endfor %}
  </table>
  <p><button type="button" class="btn small" id="add-line">{{ icon("plus", 14) }} Add a Line</button></p>
  <datalist id="products">{% for p in price_list %}<option value="{{ p.product }}" data-price="{{ p.price }}">{% endfor %}</datalist>
  <div class="row">
    <div class="field"><label>Discount %</label><input type="number" name="discount" min="0" max="100" step="0.5" value="0"></div>
    <div class="field"><label>Valid for (days)</label><input type="number" name="valid_days" min="1" value="30"></div>
    <div class="field"><label>Total</label><div id="grand" style="font-size:1.4rem;font-weight:700;padding-top:4px">0.00</div></div>
  </div>
  <div class="field"><label>Notes <span class="muted" style="font-weight:400">(shown on the quote)</span></label><textarea name="notes" rows="2" placeholder="e.g. Free delivery on orders over 25,000"></textarea></div>
  <button class="btn primary big">Create Quote</button>
</form>

<div class="stats compact">
  {% for key, label in [('new','Created'),('sent','Sent'),('approved','Approved'),('won','Won'),('lost','Lost')] %}{% set p = pipeline.get(key, {'count':0,'total':0}) %}
  <div class="card stat"><span>{{ label }}</span><b>{{ p.count }}</b>{% if p.total %}<span class="small">{{ h.fmt_value(p.total|round(0)|int) }}</span>{% endif %}</div>{% endfor %}
  <div class="card stat"><span>Win rate</span><b>{{ (win_rate|string + '%') if win_rate is not none else '–' }}</b></div>
</div>
<div class="card">
  <h2>Quotes</h2>
  {% if quotes %}<ul class="list">{% for q in quotes %}
    <li><div class="when" style="width:80px">{{ q.number }}</div>
      <div class="body"><b>{{ q.customer }}</b><span class="muted">{{ loads(q['items'])|length }} line{{ 's' if loads(q['items'])|length != 1 }}{% if q.discount_pct %} · {{ '%g'|format(q.discount_pct) }}% off{% endif %} · valid until {{ q.valid_until }} · by {{ q.created_by }}</span></div>
      <b>{{ h.fmt_value(q.total) }}</b>
      <span class="pill {{ {'won':'on','lost':'off','approved':'reply','sent':''}.get(q.status, '') }}">{{ (q.status or 'new')|capitalize }}</span>
      <a class="btn small" href="{{ url_for('quote_pdf', quote_id=q.id) }}" target="_blank">PDF</a>
      {% if q.status not in ('won', 'lost') %}
      <form class="inline" method="post" action="{{ url_for('quote_outcome', quote_id=q.id) }}"><button class="btn small" name="outcome" value="won">Won</button><button class="btn small" name="outcome" value="lost">Lost</button></form>{% endif %}</li>
  {% endfor %}</ul>{% else %}<div class="empty">No quotes yet.</div>{% endif %}
</div>

<form method="post" enctype="multipart/form-data" class="card">
  <input type="hidden" name="action" value="price_list">
  <h2>Price List</h2>
  <p class="muted">Upload an Excel or CSV file with a product column and a <b>Price</b> column. Prices fill in automatically when you pick a product.
  {% if price_list %}<br>{{ price_list|length }} products loaded.{% endif %}</p>
  <div class="actions"><input type="file" name="file" accept=".xlsx,.csv" required><button class="btn">Upload Price List</button></div>
</form>
{% endblock %}
{% block scripts %}
<script>
const prices = {}; document.querySelectorAll('#products option').forEach(o => prices[o.value] = +o.dataset.price);
const fmt = n => n.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
function recalc() {
  let sub = 0;
  document.querySelectorAll('#lines tr').forEach((tr, i) => {
    if (!i) return;
    const p = tr.querySelector('[name=product]'), q = tr.querySelector('[name=qty]'), pr = tr.querySelector('[name=price]');
    if (p.value in prices && !pr.value) pr.placeholder = fmt(prices[p.value]);
    const unit = pr.value ? +pr.value : (prices[p.value] || 0), total = (+q.value || 0) * unit;
    tr.querySelector('.line-total').textContent = total ? fmt(total) : '-'; sub += total;
  });
  const disc = +document.querySelector('[name=discount]').value || 0;
  document.getElementById('grand').textContent = fmt(sub * (1 - disc / 100));
}
document.getElementById('quote-form').addEventListener('input', recalc);
document.getElementById('add-line').addEventListener('click', () => {
  const rows = document.querySelectorAll('#lines tr'), copy = rows[rows.length - 1].cloneNode(true);
  copy.querySelectorAll('input').forEach(i => i.value = ''); copy.querySelector('.line-total').textContent = '-';
  document.getElementById('lines').appendChild(copy);
});
</script>
{% endblock %}