{% extends "base.html" %}
{% block titulo %}{{ titulo }}{% endblock %}
{% block encabezado %}{{ 'Editar ' ~ titulo if editar else 'Crear ' ~ titulo }}{% endblock %}
{% block contenido %}

<form method="post" id="formdoc">
  <div class="entre" style="margin-bottom:16px">
    <span class="muted">Complete los datos y agregue ítems. El PDF se genera al guardar.</span>
    <span class="badge-doc {{ 'editando' if editar }}">
      {{ ('Editando ' ~ titulo if editar else titulo) }} N° {{ '%03d'|format(numero if editar else proximo) }}
    </span>
  </div>

  <div class="tarjeta" style="margin-bottom:16px">
    <div class="tarjeta__titulo">1. Datos del {{ etiqueta_tercero }}</div>
    <div class="tarjeta__cuerpo">
      <div class="form-grid">
        <div class="campo">
          <label>RUT del {{ etiqueta_tercero }}{{ '' if tipo=='oc' else ' *' }}</label>
          <div class="rut-box">
            <input name="rut" id="rut" data-rut value="{{ doc.get('rut','') }}">
            <span>-</span>
            <input name="dv" id="dv" data-dv value="{{ doc.get('dv','') }}">
          </div>
          <div class="info-tercero" id="infoTercero" style="display:none"></div>
        </div>

        {% if tipo == 'oc' %}
        <div class="campo"><label>Nombre / Razón social</label>
          <input name="nombre" id="nombre" value="{{ doc.get('nombre','') }}" placeholder="Proveedor"></div>
        {% else %}
        <input type="hidden" name="nombre" id="nombre" value="{{ doc.get('nombre','') }}">
        <div class="campo"><label>Trabajo a realizar / Vehículo</label>
          <input name="referencia" value="{{ doc.get('referencia','') }}"></div>
        {% endif %}

        <div class="campo">
          <label>{{ 'Condición de pago' if tipo=='oc' else ('Plazo' if tipo=='ot' else 'Validez') }}</label>
          {% set fijas = validez_opciones[:-1] %}
          {% set actual = doc.get('validez','') %}
          {% set defecto = 'Al Contado' if tipo=='oc' else '7 días' %}
          {% set es_custom = actual and actual not in fijas %}
          <select id="validezSel">
            {% for v in fijas %}<option {{ 'selected' if (actual == v) or (not actual and v == defecto) }}>{{ v }}</option>{% endfor %}
            <option value="Personalizado..." {{ 'selected' if es_custom }}>Personalizado...</option>
          </select>
          <input type="text" id="validezTxt" name="validez" placeholder="Ej: 45 días" autocomplete="off"
                 value="{{ actual if es_custom else (actual or defecto) }}"
                 style="margin-top:8px;{{ '' if es_custom else 'display:none' }}">
        </div>
      </div>
    </div>
  </div>

  <div class="tarjeta" style="margin-bottom:16px">
    <div class="tarjeta__titulo">2. Ítems</div>
    <div class="tarjeta__cuerpo">
      <div class="item-add">
        <div class="campo" style="margin:0">
          <label>Descripción / buscar en catálogo</label>
          <input id="itDesc" list="catalogo" placeholder="Escriba para buscar o teclee libre…">
        </div>
        <div class="campo" style="margin:0">
          <label>{{ 'Costo prov. ($)' if tipo=='oc' else 'Precio final ($)' }}</label>
          <input id="itPrecio" inputmode="numeric" placeholder="0">
        </div>
        <div class="campo" style="margin:0">
          <label>Cant.</label>
          <div class="cant">
            <button type="button" id="cantMenos" tabindex="-1">−</button>
            <input id="itCant" inputmode="numeric" value="1">
            <button type="button" id="cantMas" tabindex="-1">+</button>
          </div>
        </div>
        <button type="button" class="btn btn--primario" id="btnAdd">Añadir ítem</button>
      </div>
      <datalist id="catalogo">
        {% for c in catalogo %}<option value="{{ c.desc }}" data-precio="{{ c.precio|int }}">[{{ c.codigo }}] ${{ fmt(c.precio) }}</option>{% endfor %}
      </datalist>

      <div style="overflow-x:auto;margin-top:14px">
      <table class="tabla tabla--items" id="tablaItems">
        <thead><tr><th>Detalle</th><th class="der" style="width:140px">P. unit. (c/IVA)</th>
          <th class="der" style="width:80px">Cant.</th><th class="der" style="width:140px">Subtotal</th>
          <th style="width:110px"></th></tr></thead>
        <tbody></tbody>
      </table>
      </div>
    </div>
  </div>

  <div class="tarjeta" style="margin-bottom:16px">
    <div class="tarjeta__titulo">3. Observaciones</div>
    <div class="tarjeta__cuerpo">
      <textarea name="observaciones" class="observaciones" rows="8"
                placeholder="Términos, condiciones de pago, garantía, notas para el cliente…">{{ doc.get('observaciones','') }}</textarea>
    </div>
  </div>

  <div class="tarjeta">
    <div class="tarjeta__cuerpo entre">
      <div class="acciones" style="margin:0">
        <button class="btn btn--primario" id="btnGuardar">Guardar y generar PDF</button>
        <a class="btn btn--fantasma" href="{{ url_for('documentos.historial', tipo=tipo) }}">Cancelar</a>
      </div>
      <div class="totales">
        <span>Neto: <b id="tNeto">$0</b></span>
        <span>IVA ({{ iva }}%): <b id="tIva">$0</b></span>
        <span class="grande">TOTAL: <span id="tTotal">$0</span></span>
      </div>
    </div>
  </div>

  <input type="hidden" name="items_json" id="items_json">
</form>

<script>
const TIPO = "{{ tipo }}";
const IVA = {{ iva }};
const API_CLIENTE = "{{ url_for('clientes.api_buscar', rut='__RUT__') }}";
const URL_NUEVO_CLIENTE = "{{ url_for('clientes.form') }}";
let items = {{ items|tojson }};
let editIdx = null;

const $ = s => document.querySelector(s);
const money = n => "$" + Math.round(n).toLocaleString("es-CL").replace(/,/g,".");

function render(){
  const tb = $("#tablaItems tbody");
  tb.innerHTML = "";
  items.forEach((it, i) => {
    const tr = document.createElement("tr");
    if (i === editIdx) tr.style.background = "#FEF3C7";
    tr.innerHTML = `<td>${it.desc}</td>
      <td class="der">${money(it.precio)}</td>
      <td class="der">${it.cant}</td>
      <td class="der"><b>${money(it.subtotal)}</b></td>
      <td class="der">
        <button type="button" class="btn btn--fantasma mini" data-edit="${i}">Editar</button>
        <button type="button" class="btn btn--peligro mini" data-del="${i}">X</button>
      </td>`;
    tb.appendChild(tr);
  });
  if (!items.length) tb.innerHTML = '<tr><td colspan="5" class="muted">Sin ítems.</td></tr>';
  const total = items.reduce((s,x) => s + x.subtotal, 0);
  const neto = total / (1 + IVA/100);
  $("#tNeto").textContent = money(neto);
  $("#tIva").textContent = money(total - neto);
  $("#tTotal").textContent = money(total);
}

function limpiarEntrada(){ $("#itDesc").value=""; $("#itPrecio").value=""; $("#itCant").value="1"; editIdx=null; $("#btnAdd").textContent="Añadir ítem"; $("#itDesc").focus(); }

$("#btnAdd").addEventListener("click", () => {
  const desc = $("#itDesc").value.trim();
  const precio = parseInt(($("#itPrecio").value || "").replace(/\D/g,""), 10);
  const cant = parseInt($("#itCant").value, 10) || 1;
  if (!desc || !precio || cant < 1) { alert("Complete descripción, precio y cantidad."); return; }
  const it = { desc, precio, cant, subtotal: precio * cant };
  if (editIdx !== null) items[editIdx] = it; else items.push(it);
  limpiarEntrada(); render();
});

$("#itPrecio").addEventListener("keydown", e => { if (e.key === "Enter") { e.preventDefault(); $("#btnAdd").click(); } });
$("#itCant").addEventListener("keydown", e => { if (e.key === "Enter") { e.preventDefault(); $("#btnAdd").click(); } });

// flechas de cantidad
function modCant(delta){
  let v = parseInt($("#itCant").value, 10) || 1;
  v = Math.max(1, v + delta);
  $("#itCant").value = v;
}
$("#cantMenos").addEventListener("click", () => modCant(-1));
$("#cantMas").addEventListener("click", () => modCant(1));
$("#itCant").addEventListener("input", () => { $("#itCant").value = ($("#itCant").value || "").replace(/\D/g,""); });

// autocompletar precio al elegir del catálogo
$("#itDesc").addEventListener("input", () => {
  const opt = [...document.querySelectorAll("#catalogo option")].find(o => o.value === $("#itDesc").value);
  if (opt && opt.dataset.precio) $("#itPrecio").value = opt.dataset.precio;
});

$("#tablaItems").addEventListener("click", e => {
  const d = e.target.dataset;
  if (d.del !== undefined) { items.splice(+d.del, 1); if (editIdx === +d.del) limpiarEntrada(); render(); }
  if (d.edit !== undefined) {
    const it = items[+d.edit];
    $("#itDesc").value = it.desc; $("#itPrecio").value = it.precio; $("#itCant").value = it.cant;
    editIdx = +d.edit; $("#btnAdd").textContent = "Actualizar ítem"; render();
  }
});

// búsqueda del tercero por RUT
async function buscarTercero(){
  const rut = ($("#rut").value || "").replace(/\D/g,"");
  const box = $("#infoTercero");
  if (rut.length < 7) { box.style.display = "none"; return; }
  try {
    const r = await fetch(API_CLIENTE.replace("__RUT__", rut));
    const j = await r.json();
    box.style.display = "block";
    if (j.encontrado) {
      box.className = "info-tercero";
      $("#dv").value = j.dv || "";
      if (TIPO === "oc" && !$("#nombre").value.trim()) $("#nombre").value = j.nombre;
      if (TIPO !== "oc") $("#nombre").value = j.nombre;
      box.innerHTML = `<b>${j.nombre}</b><br>${j.direccion || ""}`;
    } else {
      box.className = "info-tercero no";
      const dv = ($("#dv").value || "").toUpperCase();
      const volver = location.pathname + "?rut=" + rut + "&dv=" + encodeURIComponent(dv);
      const url = URL_NUEVO_CLIENTE + "?rut=" + rut + "&dv=" + encodeURIComponent(dv) + "&volver=" + encodeURIComponent(volver);
      box.innerHTML = (TIPO === "oc" ? "Proveedor" : "Cliente") +
        ' no registrado. <a href="' + url + '">Registrarlo ahora</a> (el RUT ya va copiado; al guardar vuelve aquí).';
    }
  } catch(e){ box.style.display = "none"; }
}
$("#rut").addEventListener("blur", buscarTercero);
$("#rut").addEventListener("change", buscarTercero);

// plazo / validez: select fijo + "Personalizado..." con campo de texto
function onValidez(){
  const sel = $("#validezSel"), txt = $("#validezTxt");
  if (sel.value === "Personalizado..."){
    txt.style.display = "";
    if (txt.dataset.libre !== "1"){ txt.value = ""; txt.dataset.libre = "1"; }
    txt.focus();
  } else {
    txt.style.display = "none";
    txt.value = sel.value;
    txt.dataset.libre = "0";
  }
}
$("#validezSel").addEventListener("change", onValidez);
if ($("#validezSel").value === "Personalizado...") $("#validezTxt").dataset.libre = "1";

$("#formdoc").addEventListener("submit", () => { $("#items_json").value = JSON.stringify(items); });

render();
if (($("#rut").value || "").replace(/\D/g,"").length >= 7) buscarTercero();
</script>
{% endblock %}