{% extends "base.html" %}
{% block title %}{% if preventivo %}Modifica{% else %}Nuovo{% endif %} Preventivo{% endblock %}
{% block page_title %}{% if preventivo %}Modifica Preventivo {{ preventivo.numero }}{% else %}Nuovo Preventivo{% endif %}{% endblock %}
{% block topbar_actions %}
<a href="{{ url_for('dashboard') }}" class="btn btn-secondary">← Indietro</a>
{% endblock %}

{% block content %}
<form method="POST" id="form-preventivo">
<div style="display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start">

  <!-- Colonna sinistra -->
  <div style="display:flex;flex-direction:column;gap:16px">

    <!-- Cliente + Template -->
    <div class="card">
      <div class="card-header"><h3>Destinatario</h3>
        <a href="{{ url_for('cliente_nuovo', next=request.url) }}" class="btn btn-sm btn-secondary">+ Nuovo cliente</a>
      </div>
      <div class="card-body">
        <div class="form-row col-2">
          <div class="form-group" style="margin:0">
            <label>Cliente</label>
            <select name="cliente_id" class="form-control" id="sel-cliente" onchange="loadCliente(this.value)">
              <option value="">— Seleziona cliente —</option>
              {% for c in clienti %}
              <option value="{{ c.id }}" {% if preventivo and preventivo.cliente_id == c.id %}selected{% endif %}>{{ c.nome }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="form-group" style="margin:0">
            <label>Template</label>
            <select name="template_id" class="form-control" id="sel-template" onchange="loadTemplate(this.value)">
              <option value="">— Seleziona template —</option>
              {% for t in templates %}
              <option value="{{ t.id }}" {% if preventivo and preventivo.template_id == t.id %}selected{% endif %}>{{ t.nome }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div id="cliente-info" style="margin-top:10px;padding:10px;background:#F8FAFC;border-radius:6px;font-size:12px;color:#64748B;display:none"></div>
      </div>
    </div>

    <!-- Titolo + Note -->
    <div class="card">
      <div class="card-header"><h3>Dettagli</h3></div>
      <div class="card-body">
        <div class="form-group">
          <label>Titolo / Oggetto (opzionale)</label>
          <input type="text" name="titolo" class="form-control" placeholder="Es: Realizzazione sito web, Ristrutturazione bagno…" value="{{ preventivo.titolo if preventivo else '' }}">
        </div>
        <div class="form-group">
          <label>Note visibili nel PDF (al cliente)</label>
          <textarea name="note" class="form-control" rows="2" placeholder="Condizioni, tempistiche, garanzie…">{{ preventivo.note if preventivo else '' }}</textarea>
        </div>
        <div class="form-group" style="margin-bottom:0">
          <label>Note interne <span style="font-size:11px;color:#94A3B8;font-weight:400">(non compaiono nel PDF)</span></label>
          <textarea name="note_interne" class="form-control" rows="2" placeholder="Appunti interni, riferimenti, margini…">{{ preventivo.note_interne if preventivo else '' }}</textarea>
        </div>
      </div>
    </div>

    <!-- Voci -->
    <div class="card">
      <div class="card-header">
        <h3>Voci del preventivo</h3>
        <div style="display:flex;gap:6px">
          <button type="button" class="btn btn-sm btn-secondary" onclick="showCatalogo()">📦 Da catalogo</button>
          <button type="button" class="btn btn-sm btn-secondary" onclick="addVoce()">+ Aggiungi voce</button>
        </div>
      </div>
      <div class="card-body" style="padding-bottom:8px">
        <table class="voci-table" id="voci-table">
          <thead>
            <tr>
              <th>Descrizione</th>
              <th class="td-qty">Qtà</th>
              <th class="td-price">Prezzo unit.</th>
              <th class="td-sc" style="width:60px;text-align:center">Sc.%</th>
              <th class="td-tot">Totale</th>
              <th class="td-del"></th>
            </tr>
          </thead>
          <tbody id="voci-body">
            {% if preventivo and preventivo.voci %}
              {% for v in preventivo.voci %}
              <tr>
                <td><input type="text" name="desc[]" value="{{ v.descrizione }}" placeholder="Descrizione" oninput="calcTotals()" autocomplete="off" class="desc-input"></td>
                <td class="td-qty"><input type="number" name="qty[]" value="{{ v.quantita }}" min="0" step="any" oninput="calcTotals()" style="text-align:center"></td>
                <td class="td-price"><input type="number" name="price[]" value="{{ v.prezzo_unitario }}" min="0" step="0.01" oninput="calcTotals()" style="text-align:right"></td>
                <td class="td-sc"><input type="number" name="sconto_riga[]" value="{{ v.sconto_riga or 0 }}" min="0" max="100" step="1" oninput="calcTotals()" style="text-align:center;width:54px" placeholder="0"></td>
                <td class="td-tot">{{ "%.2f"|format(v.quantita * v.prezzo_unitario * (1 - (v.sconto_riga or 0)/100)) }}</td>
                <td class="td-del" style="display:flex;gap:2px">
                  <button type="button" class="btn btn-sm btn-ghost btn-icon" onclick="duplicaVoce(this)" title="Duplica">⎘</button>
                  <button type="button" class="btn btn-sm btn-ghost btn-icon" onclick="removeVoce(this)" title="Rimuovi">✕</button>
                </td>
              </tr>
              {% endfor %}
            {% else %}
              <tr>
                <td><input type="text" name="desc[]" placeholder="Descrizione servizio/prodotto" oninput="calcTotals()" autocomplete="off" class="desc-input"></td>
                <td class="td-qty"><input type="number" name="qty[]" value="1" min="0" step="any" oninput="calcTotals()" style="text-align:center"></td>
                <td class="td-price"><input type="number" name="price[]" value="" min="0" step="0.01" oninput="calcTotals()" style="text-align:right" placeholder="0.00"></td>
                <td class="td-sc"><input type="number" name="sconto_riga[]" value="0" min="0" max="100" step="1" oninput="calcTotals()" style="text-align:center;width:54px" placeholder="0"></td>
                <td class="td-tot">0.00</td>
                <td class="td-del" style="display:flex;gap:2px">
                  <button type="button" class="btn btn-sm btn-ghost btn-icon" onclick="duplicaVoce(this)" title="Duplica">⎘</button>
                  <button type="button" class="btn btn-sm btn-ghost btn-icon" onclick="removeVoce(this)" title="Rimuovi">✕</button>
                </td>
              </tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>

    <!-- Autocomplete dropdown -->
    <div id="autocomplete-dropdown" style="display:none;position:fixed;z-index:500;background:#fff;border:1px solid #E2E8F0;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:260px;overflow-y:auto;width:380px"></div>
  </div>

  <!-- Colonna destra -->
  <div style="display:flex;flex-direction:column;gap:16px;position:sticky;top:72px">

    <!-- Riepilogo -->
    <div class="card">
      <div class="card-header"><h3>Riepilogo</h3></div>
      <div class="card-body">
        <div class="form-row col-2">
          <div class="form-group">
            <label>Sconto globale (%)</label>
            <input type="number" name="sconto_percentuale" class="form-control" id="inp-sconto"
                   value="{{ preventivo.sconto_percentuale if preventivo else 0 }}" min="0" max="100" step="0.5" oninput="calcTotals()">
          </div>
          <div class="form-group">
            <label>IVA (%)</label>
            <input type="number" id="inp-iva" class="form-control" value="{{ preventivo.iva_percentuale if preventivo else 22 }}" min="0" max="100" step="1" oninput="calcTotals()" readonly style="background:#F8FAFC;color:#64748B">
          </div>
        </div>
        <div class="totals-box">
          <div class="row"><span>Subtotale</span><span id="r-sub">€ 0.00</span></div>
          <div class="row" id="r-sconto-row" style="display:none;color:#DC2626"><span>Sconto glob.</span><span id="r-sconto">- € 0.00</span></div>
          <div class="row"><span>IVA</span><span id="r-iva">€ 0.00</span></div>
          <div class="row total"><span>TOTALE</span><span id="r-tot">€ 0.00</span></div>
        </div>
      </div>
    </div>

    <!-- Opzioni avanzate -->
    <div class="card">
      <div class="card-header"><h3>⚙️ Opzioni</h3></div>
      <div class="card-body" style="display:flex;flex-direction:column;gap:12px">
        <div class="form-group" style="margin:0">
          <label>Giorni di validità</label>
          <input type="number" name="validita_giorni" class="form-control" id="inp-validita"
                 value="{{ preventivo.validita_giorni if preventivo else 30 }}" min="1" max="365">
          <div style="font-size:11px;color:#94A3B8;margin-top:3px">Sovrascrive il valore del template</div>
        </div>
        <div class="form-group" style="margin:0">
          <label>Acconto ricevuto (€)</label>
          <input type="number" name="acconto_importo" class="form-control"
                 value="{{ preventivo.acconto_importo if preventivo else 0 }}" min="0" step="0.01" placeholder="0.00">
        </div>
        {% if not preventivo %}
        <div class="form-group" style="margin:0">
          <label>Numero manuale <span style="font-size:11px;color:#94A3B8;font-weight:400">(lascia vuoto per automatico)</span></label>
          <input type="text" name="numero_manuale" class="form-control" placeholder="Es: PREV-2026-0099">
        </div>
        {% endif %}
      </div>
    </div>

    <button type="submit" class="btn btn-primary btn-lg" style="width:100%;justify-content:center">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17,21 17,13 7,13"/><polyline points="7,3 7,8 15,8"/></svg>
      {% if preventivo %}Aggiorna Preventivo{% else %}Crea Preventivo{% endif %}
    </button>
  </div>
</div>
</form>

<!-- Modale catalogo prodotti -->
<div class="modal-overlay" id="modal-catalogo">
  <div class="modal" style="width:580px;max-height:80vh;display:flex;flex-direction:column">
    <h3>📦 Seleziona dal catalogo</h3>
    <input type="text" id="cat-search" class="form-control" placeholder="Cerca prodotto/servizio…" oninput="filtraCatalogo(this.value)" style="margin-bottom:12px">
    <div id="cat-list" style="flex:1;overflow-y:auto;border:1px solid #E2E8F0;border-radius:6px"></div>
    <div class="modal-actions" style="margin-top:12px">
      <button class="btn btn-secondary" onclick="document.getElementById('modal-catalogo').classList.remove('open')">Chiudi</button>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let ivaRate = {{ preventivo.iva_percentuale if preventivo and preventivo.iva_percentuale else 22 }};
let allProdotti = [];

function fmt(n){ return '€ '+n.toFixed(2); }

function calcTotals(){
  let sub=0;
  document.querySelectorAll('#voci-body tr').forEach(tr=>{
    const q=parseFloat(tr.querySelector('[name="qty[]"]')?.value)||0;
    const p=parseFloat(tr.querySelector('[name="price[]"]')?.value)||0;
    const sc=parseFloat(tr.querySelector('[name="sconto_riga[]"]')?.value)||0;
    const t=q*p*(1-sc/100); sub+=t;
    const td=tr.querySelector('.td-tot');
    if(td) td.textContent=t.toFixed(2);
  });
  const sc=Math.min(100,Math.max(0,parseFloat(document.getElementById('inp-sconto').value)||0));
  const scAmt=sub*sc/100;
  const imponibile=sub-scAmt;
  const iva=imponibile*ivaRate/100;
  const tot=imponibile+iva;
  document.getElementById('r-sub').textContent=fmt(sub);
  document.getElementById('r-iva').textContent=fmt(iva);
  document.getElementById('r-tot').textContent=fmt(tot);
  const row=document.getElementById('r-sconto-row');
  if(sc>0){row.style.display='flex';document.getElementById('r-sconto').textContent='- '+fmt(scAmt);}
  else row.style.display='none';
}

function makeVoceRow(desc='', qty=1, price='', sc=0){
  const tr=document.createElement('tr');
  tr.innerHTML=`<td><input type="text" name="desc[]" placeholder="Descrizione" oninput="calcTotals()" autocomplete="off" class="desc-input" value="${desc.replace(/"/g,'&quot;')}"></td>
    <td class="td-qty"><input type="number" name="qty[]" value="${qty}" min="0" step="any" oninput="calcTotals()" style="text-align:center"></td>
    <td class="td-price"><input type="number" name="price[]" min="0" step="0.01" oninput="calcTotals()" style="text-align:right" placeholder="0.00" value="${price}"></td>
    <td class="td-sc"><input type="number" name="sconto_riga[]" value="${sc}" min="0" max="100" step="1" oninput="calcTotals()" style="text-align:center;width:54px" placeholder="0"></td>
    <td class="td-tot">0.00</td>
    <td class="td-del" style="display:flex;gap:2px">
      <button type="button" class="btn btn-sm btn-ghost btn-icon" onclick="duplicaVoce(this)" title="Duplica">⎘</button>
      <button type="button" class="btn btn-sm btn-ghost btn-icon" onclick="removeVoce(this)">✕</button>
    </td>`;
  return tr;
}

function duplicaVoce(btn){
  const tr=btn.closest('tr');
  const desc=tr.querySelector('[name="desc[]"]').value;
  const qty=tr.querySelector('[name="qty[]"]').value;
  const price=tr.querySelector('[name="price[]"]').value;
  const sc=tr.querySelector('[name="sconto_riga[]"]').value;
  const newTr=makeVoceRow(desc, qty, price, sc);
  tr.after(newTr);
  calcTotals();
}

function addVoce(desc='', qty=1, price='', sc=0){
  const tb=document.getElementById('voci-body');
  const tr=makeVoceRow(desc, qty, price, sc);
  tb.appendChild(tr);
  calcTotals();
  if(!desc) tr.querySelector('input').focus();
}

function removeVoce(btn){
  const rows=document.querySelectorAll('#voci-body tr');
  if(rows.length>1){ btn.closest('tr').remove(); calcTotals(); }
}

function loadCliente(cid){
  if(!cid){document.getElementById('cliente-info').style.display='none';return;}
  fetch(`/api/cliente/${cid}`).then(r=>r.json()).then(c=>{
    const info=document.getElementById('cliente-info');
    info.style.display='block';
    info.innerHTML=[c.email&&`📧 ${c.email}`,c.telefono&&`📞 ${c.telefono}`,c.indirizzo&&`📍 ${c.indirizzo}`,c.piva&&`P.IVA: ${c.piva}`].filter(Boolean).join('&nbsp;&nbsp;|&nbsp;&nbsp;');
  });
}

function loadTemplate(tid){
  if(!tid) return;
  fetch(`/api/template/${tid}`).then(r=>r.json()).then(t=>{
    ivaRate=parseFloat(t.iva_percentuale||22);
    document.getElementById('inp-iva').value=ivaRate;
    const iv=document.getElementById('inp-validita');
    if(iv && !iv.dataset.touched) iv.value=t.validita_giorni||30;
    calcTotals();
  });
}

// ── Catalogo prodotti ──────────────────────────────────────────────────────
function showCatalogo(){
  fetch('/api/prodotti').then(r=>r.json()).then(ps=>{
    allProdotti=ps;
    renderCatalogo(ps);
    document.getElementById('modal-catalogo').classList.add('open');
    setTimeout(()=>document.getElementById('cat-search').focus(),100);
  });
}

function filtraCatalogo(q){
  const f=allProdotti.filter(p=>!q||p.nome.toLowerCase().includes(q.toLowerCase())||(p.descrizione||'').toLowerCase().includes(q.toLowerCase()));
  renderCatalogo(f);
}

function renderCatalogo(ps){
  const el=document.getElementById('cat-list');
  if(!ps.length){el.innerHTML='<div style="padding:16px;text-align:center;color:#94A3B8;font-size:13px">Nessun prodotto trovato</div>';return;}
  el.innerHTML=ps.map(p=>`
    <div onclick="aggiungiDaCatalogo(${p.id})" style="padding:10px 14px;cursor:pointer;border-bottom:1px solid #F1F5F9;display:flex;align-items:center;justify-content:space-between;gap:12px" onmouseover="this.style.background='#F8FAFC'" onmouseout="this.style.background=''">
      <div style="flex:1;min-width:0">
        <div style="font-weight:500;font-size:13px">${p.nome}</div>
        ${p.descrizione?`<div style="font-size:11px;color:#94A3B8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${p.descrizione}</div>`:''}
        ${p.categoria?`<span style="font-size:10px;background:#EFF6FF;color:#2563EB;padding:1px 6px;border-radius:8px">${p.categoria}</span>`:''}
      </div>
      <div style="text-align:right;flex-shrink:0">
        <div style="font-weight:600;color:#1E293B">€ ${parseFloat(p.prezzo_default).toFixed(2)}</div>
        <div style="font-size:11px;color:#94A3B8">${p.unita_misura}</div>
      </div>
    </div>`).join('');
}

function aggiungiDaCatalogo(id){
  const p=allProdotti.find(x=>x.id===id);
  if(!p) return;
  addVoce(p.descrizione||p.nome, 1, p.prezzo_default, 0);
  document.getElementById('modal-catalogo').classList.remove('open');
  toast(`"${p.nome}" aggiunto!`,'success');
}

document.getElementById('modal-catalogo').addEventListener('click',function(e){
  if(e.target===this) this.classList.remove('open');
});

// ── Autocomplete inline ────────────────────────────────────────────────────
let acTimeout=null, acActive=null;
const dropdown=document.getElementById('autocomplete-dropdown');

document.getElementById('voci-body').addEventListener('input',function(e){
  if(!e.target.classList.contains('desc-input')) return;
  clearTimeout(acTimeout);
  const val=e.target.value.trim();
  if(val.length<2){dropdown.style.display='none';return;}
  acActive=e.target;
  acTimeout=setTimeout(()=>{
    fetch(`/api/prodotti?q=${encodeURIComponent(val)}`).then(r=>r.json()).then(ps=>{
      if(!ps.length||acActive!==e.target){dropdown.style.display='none';return;}
      const rect=e.target.getBoundingClientRect();
      dropdown.style.top=(rect.bottom+window.scrollY+2)+'px';
      dropdown.style.left=(rect.left+window.scrollX)+'px';
      dropdown.style.width=Math.max(320,rect.width+200)+'px';
      dropdown.style.display='block';
      dropdown.innerHTML=ps.map(p=>`
        <div data-pid="${p.id}" style="padding:8px 12px;cursor:pointer;display:flex;justify-content:space-between;gap:10px;font-size:13px" onmouseover="this.style.background='#EFF6FF'" onmouseout="this.style.background=''">
          <span><b>${p.nome}</b>${p.descrizione?' — <span style=color:#94A3B8>'+p.descrizione.slice(0,40)+'</span>':''}</span>
          <span style="color:#2563EB;font-weight:600;flex-shrink:0">€ ${parseFloat(p.prezzo_default).toFixed(2)}</span>
        </div>`).join('');
      dropdown.querySelectorAll('[data-pid]').forEach(el=>{
        el.addEventListener('mousedown',function(ev){
          ev.preventDefault();
          const p=ps.find(x=>x.id==this.dataset.pid);
          if(!p||!acActive) return;
          acActive.value=p.descrizione||p.nome;
          const tr=acActive.closest('tr');
          if(tr) tr.querySelector('[name="price[]"]').value=p.prezzo_default;
          calcTotals();
          dropdown.style.display='none';
        });
      });
    });
  },220);
});

document.addEventListener('click',function(e){
  if(!dropdown.contains(e.target)) dropdown.style.display='none';
});

// Mark validita as touched if user changes it manually
document.getElementById('inp-validita')?.addEventListener('input', function(){
  this.dataset.touched='1';
});

calcTotals();
{% if preventivo and preventivo.cliente_id %}loadCliente({{ preventivo.cliente_id }});{% endif %}
{% if preventivo and preventivo.template_id %}loadTemplate({{ preventivo.template_id }});{% endif %}
</script>
{% endblock %}