{% extends "base.html" %}
{% block title %}Preventivo {{ p.numero }}{% endblock %}
{% block page_title %}Preventivo {{ p.numero }}{% endblock %}
{% block topbar_actions %}
<a href="{{ url_for('dashboard') }}" class="btn btn-secondary">← Dashboard</a>
<a href="{{ url_for('preventivo_modifica', pid=p.id) }}" class="btn btn-ghost">✏️ Modifica</a>
<a href="{{ url_for('preventivo_pdf', pid=p.id) }}" class="btn btn-secondary" target="_blank">📄 PDF</a>
{% endblock %}

{% block content %}
<div style="display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start">

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

    <!-- Header preventivo -->
    <div class="card">
      <div class="card-body">
        <div style="display:flex;justify-content:space-between;align-items:flex-start">
          <div>
            <div style="display:flex;align-items:center;gap:10px;margin-bottom:4px">
              <h2 style="font-size:20px;font-weight:700">{{ p.numero }}</h2>
              <span class="badge badge-{{ p.stato }}">{{ p.stato }}</span>
            </div>
            {% if p.titolo %}<div style="font-size:14px;color:#64748B">{{ p.titolo }}</div>{% endif %}
            <div style="font-size:12px;color:#94A3B8;margin-top:4px">
              Creato il {{ p.data_creazione[:10] }}
              &nbsp;·&nbsp; Validità: {{ p.validita_giorni }} giorni
            </div>
          </div>
          <div style="text-align:right">
            <div style="font-size:28px;font-weight:700;color:#1E293B">€ {{ "%.2f"|format(p.totale) }}</div>
            <div style="font-size:12px;color:#94A3B8">IVA {{ p.iva_percentuale|int }}% inclusa</div>
            {% if p.acconto_importo %}
            <div style="font-size:13px;color:#16A34A;margin-top:4px">✓ Acconto: € {{ "%.2f"|format(p.acconto_importo) }}</div>
            <div style="font-size:13px;font-weight:600;color:#DC2626">Saldo: € {{ "%.2f"|format(p.saldo_residuo) }}</div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>

    <!-- Cliente -->
    <div class="card">
      <div class="card-header"><h3>Cliente</h3></div>
      <div class="card-body" style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
        <div>
          <div style="font-size:11px;font-weight:600;color:#94A3B8;text-transform:uppercase;margin-bottom:3px">Nome</div>
          <div style="font-size:14px;font-weight:500">{{ p.cliente_nome or '—' }}</div>
        </div>
        {% if p.cliente_email %}
        <div>
          <div style="font-size:11px;font-weight:600;color:#94A3B8;text-transform:uppercase;margin-bottom:3px">Email</div>
          <div style="font-size:14px">{{ p.cliente_email }}</div>
        </div>
        {% endif %}
        {% if p.cliente_telefono %}
        <div>
          <div style="font-size:11px;font-weight:600;color:#94A3B8;text-transform:uppercase;margin-bottom:3px">Telefono</div>
          <div style="font-size:14px">{{ p.cliente_telefono }}</div>
        </div>
        {% endif %}
        {% if p.cliente_indirizzo %}
        <div>
          <div style="font-size:11px;font-weight:600;color:#94A3B8;text-transform:uppercase;margin-bottom:3px">Indirizzo</div>
          <div style="font-size:14px">{{ p.cliente_indirizzo }}</div>
        </div>
        {% endif %}
        {% if p.cliente_piva %}
        <div>
          <div style="font-size:11px;font-weight:600;color:#94A3B8;text-transform:uppercase;margin-bottom:3px">P.IVA</div>
          <div style="font-size:14px">{{ p.cliente_piva }}</div>
        </div>
        {% endif %}
      </div>
    </div>

    <!-- Voci -->
    <div class="card">
      <div class="card-header"><h3>Voci</h3></div>
      <table class="table">
        <thead>
          <tr>
            <th>Descrizione</th>
            <th style="text-align:center">Qtà</th>
            <th style="text-align:right">Prezzo unit.</th>
            {% if p.voci|selectattr('sconto_riga')|list %}<th style="text-align:center">Sc.%</th>{% endif %}
            <th style="text-align:right">Totale</th>
          </tr>
        </thead>
        <tbody>
          {% for v in p.voci %}
          {% set riga_tot = v.quantita * v.prezzo_unitario * (1 - (v.sconto_riga or 0)/100) %}
          <tr>
            <td>{{ v.descrizione }}</td>
            <td style="text-align:center">{{ v.quantita|int if v.quantita == v.quantita|int else v.quantita }}</td>
            <td style="text-align:right">€ {{ "%.2f"|format(v.prezzo_unitario) }}</td>
            {% if p.voci|selectattr('sconto_riga')|list %}
            <td style="text-align:center;color:#DC2626">{% if v.sconto_riga %}{{ v.sconto_riga|int }}%{% else %}—{% endif %}</td>
            {% endif %}
            <td style="text-align:right;font-weight:600">€ {{ "%.2f"|format(riga_tot) }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      <div style="padding:12px 16px;display:flex;justify-content:flex-end">
        <div class="totals-box" style="width:280px">
          <div class="row"><span>Subtotale</span><span>€ {{ "%.2f"|format(p.subtotale) }}</span></div>
          {% if p.sconto_percentuale %}
          <div class="row" style="color:#DC2626"><span>Sconto glob. ({{ p.sconto_percentuale|int }}%)</span><span>- € {{ "%.2f"|format(p.sconto_importo) }}</span></div>
          {% endif %}
          <div class="row"><span>IVA ({{ p.iva_percentuale|int }}%)</span><span>€ {{ "%.2f"|format(p.iva_importo) }}</span></div>
          <div class="row total"><span>TOTALE</span><span>€ {{ "%.2f"|format(p.totale) }}</span></div>
          {% if p.acconto_importo %}
          <div class="row" style="color:#16A34A"><span>Acconto ricevuto</span><span>- € {{ "%.2f"|format(p.acconto_importo) }}</span></div>
          <div class="row" style="font-weight:700;color:#DC2626"><span>Saldo residuo</span><span>€ {{ "%.2f"|format(p.saldo_residuo) }}</span></div>
          {% endif %}
        </div>
      </div>
    </div>

    {% if p.note %}
    <div class="card">
      <div class="card-header"><h3>Note (visibili al cliente)</h3></div>
      <div class="card-body" style="font-size:13px;color:#475569;white-space:pre-wrap">{{ p.note }}</div>
    </div>
    {% endif %}

    {% if p.note_interne %}
    <div class="card" style="border:1px dashed #FCD34D">
      <div class="card-header" style="background:#FFFBEB">
        <h3 style="color:#92400E">🔒 Note interne <span style="font-size:11px;font-weight:400">(non visibili nel PDF)</span></h3>
      </div>
      <div class="card-body" style="font-size:13px;color:#78350F;white-space:pre-wrap">{{ p.note_interne }}</div>
    </div>
    {% endif %}

    {% if p.stato == 'firmato' %}
    <div style="background:#F0FDF4;border:1px solid #BBF7D0;border-radius:10px;padding:14px 18px;display:flex;align-items:center;gap:12px">
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#16A34A" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="9,12 11,14 15,10"/></svg>
      <div>
        <div style="font-weight:600;color:#15803D">Preventivo accettato</div>
        <div style="font-size:12px;color:#4ADE80">{{ p.data_firma[:16] if p.data_firma else '' }}</div>
      </div>
    </div>
    {% endif %}

    <!-- Storico stati -->
    <div class="card">
      <div class="card-header">
        <h3>📋 Storico</h3>
        <button class="btn btn-sm btn-secondary" onclick="toggleStorico(this)">Mostra</button>
      </div>
      <div id="storico-wrap" style="display:none;padding:0 16px 12px">
        <div id="storico-list" style="font-size:13px"></div>
      </div>
    </div>

    <!-- Anteprima PDF inline -->
    <div class="card">
      <div class="card-header">
        <h3>👁️ Anteprima PDF</h3>
        <button class="btn btn-sm btn-secondary" onclick="togglePreview(this)">Mostra</button>
      </div>
      <div id="pdf-preview-wrap" style="display:none">
        <iframe id="pdf-frame" src="" style="width:100%;height:500px;border:none;border-radius:0 0 10px 10px"></iframe>
      </div>
    </div>
  </div>

  <!-- Pannello azioni -->
  <div style="display:flex;flex-direction:column;gap:12px;position:sticky;top:72px">

    <!-- Invio rapido -->
    <div class="card">
      <div class="card-header"><h3>📤 Invio rapido</h3></div>
      <div class="card-body" style="display:flex;flex-direction:column;gap:8px">
        <button class="btn btn-success" style="width:100%;justify-content:center" onclick="inviaWhatsApp({{ p.id }})">
          <svg viewBox="0 0 24 24" fill="currentColor" style="width:15px;height:15px"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.126.555 4.122 1.526 5.854L.057 23.57a.75.75 0 0 0 .918.919l5.82-1.49A11.945 11.945 0 0 0 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.75a9.727 9.727 0 0 1-4.983-1.37l-.356-.213-3.697.947.984-3.598-.233-.37A9.718 9.718 0 0 1 2.25 12C2.25 6.615 6.615 2.25 12 2.25S21.75 6.615 21.75 12 17.385 21.75 12 21.75z"/></svg>
          Invia su WhatsApp
        </button>
        <button class="btn btn-primary" style="width:100%;justify-content:center" onclick="showEmailModal({{ p.id }}, '{{ p.cliente_email or '' }}')">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:15px;height:15px"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
          Invia Email + PDF
        </button>
        <a href="{{ url_for('preventivo_pdf', pid=p.id) }}" class="btn btn-secondary" style="width:100%;justify-content:center" target="_blank">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:15px;height:15px"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7,10 12,15 17,10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
          Scarica PDF
        </a>
      </div>
    </div>

    <!-- Firma / Accettazione -->
    {% if p.stato != 'firmato' %}
    <div class="card">
      <div class="card-header"><h3>✅ Accettazione</h3></div>
      <div class="card-body">
        <p style="font-size:12px;color:#64748B;margin-bottom:12px">Il cliente ha accettato il preventivo?</p>
        <form method="POST" action="{{ url_for('preventivo_firma', pid=p.id) }}" onsubmit="return confirm('Segnare come ACCETTATO?')">
          <button type="submit" class="btn btn-success" style="width:100%;justify-content:center">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px"><polyline points="20,6 9,17 4,12"/></svg>
            Segna come Accettato
          </button>
        </form>
      </div>
    </div>
    {% endif %}

    <!-- Stato manuale con nota -->
    <div class="card">
      <div class="card-header"><h3>Cambia stato</h3></div>
      <div class="card-body">
        <form method="POST" action="{{ url_for('preventivo_stato', pid=p.id) }}">
          <select name="stato" class="form-control" style="margin-bottom:8px">
            {% for s in ['bozza','inviato','firmato','rifiutato'] %}
            <option value="{{ s }}" {% if p.stato == s %}selected{% endif %}>{{ s|capitalize }}</option>
            {% endfor %}
          </select>
          <input type="text" name="nota_stato" class="form-control" placeholder="Nota (opzionale)" style="margin-bottom:8px;font-size:12px">
          <button type="submit" class="btn btn-secondary" style="width:100%;justify-content:center">Aggiorna stato</button>
        </form>
      </div>
    </div>

    <!-- Altre azioni -->
    <div class="card">
      <div class="card-header"><h3>Azioni</h3></div>
      <div class="card-body" style="display:flex;flex-direction:column;gap:8px">
        <a href="{{ url_for('preventivo_duplica', pid=p.id) }}" class="btn btn-secondary" style="width:100%;justify-content:center">📋 Duplica</a>
        <form method="POST" action="{{ url_for('preventivo_elimina', pid=p.id) }}" onsubmit="return confirm('Eliminare definitivamente il preventivo {{ p.numero }}?')">
          <button type="submit" class="btn btn-danger" style="width:100%;justify-content:center">🗑️ Elimina</button>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Modal Email -->
<div class="modal-overlay" id="modal-email">
  <div class="modal">
    <h3>📧 Invia Email</h3>
    <p>Il PDF del preventivo verrà allegato automaticamente.</p>
    <div class="form-group">
      <label>Indirizzo email destinatario</label>
      <input type="email" class="form-control" id="email-dest" placeholder="cliente@esempio.it" value="{{ p.cliente_email or '' }}">
    </div>
    <div class="modal-actions">
      <button class="btn btn-secondary" onclick="closeModal()">Annulla</button>
      <button class="btn btn-primary" onclick="sendEmail({{ p.id }})">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:13px;height:13px"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22,2 15,22 11,13 2,9"/></svg>
        Invia ora
      </button>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function togglePreview(btn){
  const wrap=document.getElementById('pdf-preview-wrap');
  const frame=document.getElementById('pdf-frame');
  if(wrap.style.display==='none'){
    wrap.style.display='block';
    if(!frame.src||frame.src===window.location.href)
      frame.src='{{ url_for("preventivo_pdf", pid=p.id) }}?inline=1';
    btn.textContent='Nascondi';
  } else {
    wrap.style.display='none';
    btn.textContent='Mostra';
  }
}

function toggleStorico(btn){
  const wrap=document.getElementById('storico-wrap');
  if(wrap.style.display==='none'){
    wrap.style.display='block';
    btn.textContent='Nascondi';
    if(!document.getElementById('storico-list').innerHTML){
      fetch('/preventivo/{{ p.id }}/storico').then(r=>r.json()).then(rows=>{
        const statoBadge={bozza:'#64748B',inviato:'#2563EB',firmato:'#16A34A',rifiutato:'#DC2626'};
        const el=document.getElementById('storico-list');
        if(!rows.length){el.innerHTML='<div style="color:#94A3B8;padding:8px 0">Nessun evento registrato</div>';return;}
        el.innerHTML=rows.map(r=>`
          <div style="display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid #F1F5F9">
            <span style="display:inline-block;background:${statoBadge[r.stato]||'#64748B'};color:#fff;border-radius:4px;padding:2px 7px;font-size:11px;font-weight:600;flex-shrink:0">${r.stato}</span>
            <div style="flex:1">
              ${r.nota?`<div style="color:#475569">${r.nota}</div>`:''}
              <div style="font-size:11px;color:#94A3B8">${r.created_at}</div>
            </div>
          </div>`).join('');
      });
    }
  } else {
    wrap.style.display='none';
    btn.textContent='Mostra';
  }
}

function inviaWhatsApp(pid){
  fetch(`/preventivo/${pid}/whatsapp`).then(r=>r.json()).then(d=>{
    if(d.error){toast(d.error,'error');return;}
    window.open(d.url,'_blank');
    toast(d.pdf_path?'PDF salvato sul Desktop! Allegalo su WhatsApp.':'WhatsApp aperto!','success');
  });
}

function showEmailModal(pid,email){
  document.getElementById('email-dest').value=email||'';
  document.getElementById('modal-email').classList.add('open');
  setTimeout(()=>document.getElementById('email-dest').focus(),100);
}
function closeModal(){ document.getElementById('modal-email').classList.remove('open'); }
function sendEmail(pid){
  const email=document.getElementById('email-dest').value.trim();
  if(!email){toast('Inserisci un indirizzo email','error');return;}
  const btn=document.querySelector('#modal-email .btn-primary');
  btn.textContent='Invio in corso…';btn.disabled=true;
  fetch(`/preventivo/${pid}/email`,{
    method:'POST',headers:{'Content-Type':'application/json'},
    body:JSON.stringify({email})
  }).then(r=>r.json()).then(d=>{
    if(d.error){toast(d.error,'error');btn.textContent='Invia ora';btn.disabled=false;return;}
    toast(`Email inviata a ${d.dest}!`,'success');
    closeModal();
    setTimeout(()=>location.reload(),1500);
  }).catch(()=>{toast('Errore di rete','error');btn.textContent='Invia ora';btn.disabled=false;});
}
document.getElementById('modal-email').addEventListener('click',function(e){if(e.target===this)closeModal();});
</script>
{% endblock %}