<?php
require_once __DIR__ . '/../../includes/layout.php';
$version = '20260523';
$pdo = getDBConnection();
$sucursales = $pdo->query("SELECT id,nombre FROM sucursales ORDER BY nombre")->fetchAll();
renderHeader('Órdenes de Compra', 'ordenes_compra');
?>

<link rel="stylesheet" href="assets/css/bootstrap-icons.min.css">
<style>
:root {
  --surface-card: #ffffff;
  --border-color: #e2e8f0;
  --text-primary: #2F2F2F;
  --text-secondary: #64748b;
  --accent-color: #4f46e5;
  --oc-primary: #0f766e;
  --oc-primary-light: #14b8a6;
}

.oc-container { max-width: 1400px; margin: 0 auto; padding: 1.5rem; }
.oc-topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.oc-topbar h1 { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.oc-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-left: auto; }

.oc-table-wrap { background: var(--surface-card); border: 1px solid var(--border-color); border-radius: 1rem; overflow: auto; }
.oc-table-wrap table { width: 100%; border-collapse: collapse; min-width: 800px; }
.oc-table-wrap thead { position: sticky; top: 0; z-index: 2; }
.oc-table-wrap th { background: var(--surface-card); padding: 0.75rem 1rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); border-bottom: 2px solid var(--border-color); text-align: left; white-space: nowrap; }
.oc-table-wrap td { padding: 0.75rem 1rem; font-size: 0.875rem; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.oc-table-wrap tr:hover { background: rgba(0,0,0,0.02); }
.oc-table-wrap tr.clickable { cursor: pointer; }

.estado-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.75rem; border-radius: 1rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.estado-pendiente { background: #fef3c7; color: #92400e; }
.estado-aprobada { background: #dbeafe; color: #1e40af; }
.estado-enviada { background: #e0f2fe; color: #075985; }
.estado-recibida_parcial { background: #fef9c3; color: #854d0e; }
.estado-completada { background: #d1fae5; color: #065f46; }
.estado-cancelada { background: #fce4ec; color: #b71c1c; }

.filter-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 1rem; }
.filter-row select, .filter-row input { padding: 0.5rem 0.75rem; border-radius: 0.75rem; border: 1px solid var(--border-color); background: var(--surface-card); color: var(--text-primary); font-size: 0.875rem; }
.filter-row select:focus, .filter-row input:focus { outline: none; border-color: var(--accent-color); }

/* Modal */
.modal-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); align-items: center; justify-content: center; }
.modal-overlay.open { display: flex; }
.modal-content { background: var(--surface-card); border-radius: 1.5rem; width: 95%; max-width: 1000px; max-height: 90vh; overflow: auto; padding: 2rem; box-shadow: 0 25px 50px rgba(0,0,0,0.25); }

.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.modal-header h2 { font-size: 1.25rem; font-weight: 700; margin: 0; }
.modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-secondary); padding: 0.25rem; line-height: 1; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.form-group label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); }
.form-group input, .form-group select, .form-group textarea { padding: 0.6rem 0.75rem; border-radius: 0.75rem; border: 1px solid var(--border-color); background: var(--surface-card); color: var(--text-primary); font-size: 0.875rem; }
.form-group textarea { resize: vertical; min-height: 60px; }

.line-items { margin-bottom: 1.5rem; }
.line-items table { width: 100%; border-collapse: collapse; }
.line-items th { padding: 0.5rem 0.75rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--text-secondary); border-bottom: 2px solid var(--border-color); text-align: left; }
.line-items td { padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--border-color); }
.line-items input, .line-items select { width: 100%; padding: 0.4rem 0.5rem; border-radius: 0.5rem; border: 1px solid var(--border-color); background: var(--surface-card); font-size: 0.8rem; box-sizing: border-box; }
.line-items input:focus, .line-items select:focus { outline: none; border-color: var(--accent-color); }
.line-items .btn-remove { background: #fee2e2; border: none; color: #dc2626; border-radius: 0.5rem; width: 2rem; height: 2rem; cursor: pointer; font-weight: 700; display: flex; align-items: center; justify-content: center; }

.btn-oc { padding: 0.6rem 1.25rem; border-radius: 0.75rem; border: none; font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.5rem; }
.btn-oc-primary { background: linear-gradient(135deg, #0f766e, #14b8a6); color: white; }
.btn-oc-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,118,110,0.3); }
.btn-oc-secondary { background: var(--surface-card); border: 1px solid var(--border-color); color: var(--text-primary); }
.btn-oc-secondary:hover { background: #f1f5f9; }
.btn-oc-sm { padding: 0.35rem 0.75rem; font-size: 0.75rem; border-radius: 0.5rem; }

.add-product-row { display: flex; gap: 0.75rem; align-items: end; margin-top: 0.75rem; }
.add-product-row select { flex: 1; padding: 0.5rem; border-radius: 0.5rem; border: 1px solid var(--border-color); }

.empty-state { text-align: center; padding: 4rem 1rem; color: var(--text-secondary); }
.empty-state i { font-size: 4rem; opacity: 0.2; margin-bottom: 1rem; display: block; }

/* Detail view */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.detail-field label { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; }
.detail-field p { font-size: 1rem; font-weight: 600; margin: 0.25rem 0 0 0; }
.detail-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

@media (max-width: 768px) {
  .oc-container { padding: 1rem; }
  .detail-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .oc-actions { margin-left: 0; width: 100%; }
}

@keyframes modalIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal-overlay.open .modal-content { animation: modalIn 0.25s ease-out; }
</style>

<div class="oc-container">
  <div class="oc-topbar">
    <h1><i class="bi bi-file-text"></i> Órdenes de Compra</h1>
    <div class="oc-actions">
      <button class="btn-oc btn-oc-primary" onclick="abrirNuevaOC()"><i class="bi bi-plus-lg"></i> Nueva OC</button>
    </div>
  </div>

  <!-- Filters -->
  <div class="filter-row">
    <select id="filtroEstado" onchange="cargarOC()">
      <option value="">Todos los estados</option>
      <option value="pendiente">Pendiente</option>
      <option value="aprobada">Aprobada</option>
      <option value="enviada">Enviada</option>
      <option value="recibida_parcial">Recibida Parcial</option>
      <option value="completada">Completada</option>
      <option value="cancelada">Cancelada</option>
    </select>
    <select id="filtroProveedor" onchange="cargarOC()">
      <option value="">Todos los proveedores</option>
    </select>
    <select id="filtroSucursal" onchange="cargarOC()">
      <option value="0">Todas las sucursales</option>
      <?php foreach ($sucursales as $s): ?>
        <option value="<?= $s['id'] ?>"><?= htmlspecialchars($s['nombre']) ?></option>
      <?php endforeach; ?>
    </select>
    <input type="date" id="filtroDesde" onchange="cargarOC()" style="width:140px">
    <input type="date" id="filtroHasta" onchange="cargarOC()" style="width:140px">
    <button class="btn-oc btn-oc-secondary" onclick="cargarOC()"><i class="bi bi-arrow-clockwise"></i></button>
  </div>

  <!-- Table -->
  <div class="oc-table-wrap">
    <table>
      <thead><tr>
        <th># OC</th><th>Proveedor</th><th>Sucursal</th><th>Emisión</th><th>Entrega</th><th>Total</th><th>Estado</th><th>Acciones</th>
      </tr></thead>
      <tbody id="tbOC"><tr><td colspan="8" class="empty-state"><i class="bi bi-hourglass-split"></i> Cargando...</td></tr></tbody>
    </table>
  </div>
</div>

<!-- Modal Nueva/Editar OC -->
<div class="modal-overlay" id="modalOC">
  <div class="modal-content">
    <div class="modal-header">
      <h2 id="modalTitle">Nueva Orden de Compra</h2>
      <button class="modal-close" onclick="cerrarModal()">&times;</button>
    </div>
    <input type="hidden" id="editOCId" value="0">

    <div class="form-grid">
      <div class="form-group">
        <label>Proveedor</label>
        <select id="ocProveedor" onchange="cargarProductosProveedor()">
          <option value="">Seleccionar proveedor...</option>
        </select>
      </div>
      <div class="form-group">
        <label>Sucursal destino</label>
        <select id="ocSucursal">
          <?php foreach ($sucursales as $s): ?>
            <option value="<?= $s['id'] ?>"><?= htmlspecialchars($s['nombre']) ?></option>
          <?php endforeach; ?>
        </select>
      </div>
      <div class="form-group">
        <label>Fecha entrega esperada</label>
        <input type="date" id="ocFechaEntrega">
      </div>
      <div class="form-group">
        <label>Descuento (Q)</label>
        <input type="number" id="ocDescuento" step="0.01" value="0" oninput="recalcularTotales()">
      </div>
      <div class="form-group">
        <label>IVA (%)</label>
        <input type="number" id="ocImpuesto" step="0.01" value="12" oninput="recalcularTotales()">
      </div>
    </div>

    <div class="form-group" style="margin-bottom:1rem">
      <label>Notas</label>
      <textarea id="ocNotas" rows="2"></textarea>
    </div>

    <!-- Line items -->
    <div class="line-items">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem">
        <strong style="font-size:0.9rem">Productos solicitados</strong>
        <span id="ocTotales" style="font-size:0.85rem;color:var(--text-secondary)">Total: Q0.00</span>
      </div>

      <!-- Product selector -->
      <div class="add-product-row" style="flex-wrap:wrap">
        <div style="flex:2;min-width:200px;position:relative">
          <input type="text" id="addProductoBuscar" placeholder="Buscar producto por nombre o código..." style="width:100%;padding:0.5rem;border-radius:0.5rem;border:1px solid var(--border-color);background:var(--surface-card);font-size:0.8rem;box-sizing:border-box" oninput="buscarProductoProveedor()">
          <div id="addProductoResultados" style="display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface-card);border:1px solid var(--border-color);border-radius:0.5rem;max-height:200px;overflow-y:auto;z-index:10;box-shadow:0 4px 12px rgba(0,0,0,0.1)"></div>
        </div>
        <input type="hidden" id="addProductoId">
        <select id="addPresentacionSelect" style="flex:1">
          <option value="">Presentación</option>
        </select>
        <input type="number" id="addCantidad" placeholder="Cant" value="1" min="1" style="width:80px">
        <button class="btn-oc btn-oc-primary btn-oc-sm" onclick="agregarLinea()"><i class="bi bi-plus-lg"></i> Agregar</button>
      </div>

      <table style="margin-top:0.75rem">
        <thead><tr>
          <th>Código</th><th>Producto</th><th>Presentación</th><th>Cantidad</th><th>Costo Unit.</th><th>Subtotal</th><th></th>
        </tr></thead>
        <tbody id="tbLineas"></tbody>
      </table>
    </div>

    <div style="display:flex;justify-content:flex-end;gap:0.75rem;margin-top:1rem">
      <button class="btn-oc btn-oc-secondary" onclick="cerrarModal()">Cancelar</button>
      <button class="btn-oc btn-oc-primary" id="btnGuardarOC" onclick="guardarOC()"><i class="bi bi-check-lg"></i> Guardar OC</button>
    </div>
  </div>
</div>

<!-- Modal Detalle OC -->
<div class="modal-overlay" id="modalDetalle">
  <div class="modal-content" style="max-width:800px">
    <div class="modal-header">
      <h2 id="detalleTitle">Detalle OC</h2>
      <button class="modal-close" onclick="cerrarModalDetalle()">&times;</button>
    </div>
    <div id="detalleBody"></div>
  </div>
</div>

<script>
let productosCatalogo = {};
let lineas = [];
let ocActualId = 0;
let editando = false;

document.addEventListener('DOMContentLoaded', () => {
  syncSucursalSelect('filtroSucursal');
  cargarProveedores();
  cargarOC();
});

// ─── Cargar listado ───────────────────────────────────────
async function cargarOC() {
  const tbody = document.getElementById('tbOC');
  tbody.innerHTML = '<tr><td colspan="8" class="empty-state"><i class="bi bi-hourglass-split"></i> Cargando...</td></tr>';

  const params = new URLSearchParams({
    action: 'listar',
    estado: document.getElementById('filtroEstado').value,
    proveedor_id: document.getElementById('filtroProveedor').value,
    sucursal_id: document.getElementById('filtroSucursal').value,
    desde: document.getElementById('filtroDesde').value,
    hasta: document.getElementById('filtroHasta').value,
    limit: 100
  });

  try {
    const r = await fetch(`api/ordenes_compra/index.php?${params}`);
    const d = await r.json();
    if (!d.success) throw new Error(d.message);

    const rows = d.data.rows;
    if (!rows || rows.length === 0) {
      tbody.innerHTML = '<tr><td colspan="8" class="empty-state"><i class="bi bi-inbox"></i> No hay órdenes de compra</td></tr>';
      return;
    }

    let html = '';
    rows.forEach(o => {
      const estadoClass = 'estado-' + o.estado;
      const estadoLabel = o.estado.replace('_', ' ');
      html += `<tr class="clickable" onclick="verDetalle(${o.id})">
        <td><strong>${esc(o.numero_oc)}</strong></td>
        <td>${esc(o.proveedor)}</td>
        <td>${esc(o.sucursal)}</td>
        <td>${o.fecha_emision}</td>
        <td>${o.fecha_entrega_esperada || '-'}</td>
        <td style="font-weight:700">Q${parseFloat(o.total).toFixed(2)}</td>
        <td><span class="estado-badge ${estadoClass}">${esc(estadoLabel)}</span></td>
        <td style="white-space:nowrap">
          ${o.estado === 'pendiente' ? `<button class="btn-oc btn-oc-secondary btn-oc-sm" onclick="event.stopPropagation();editarOC(${o.id})"><i class="bi bi-pencil"></i></button>
          <button class="btn-oc btn-oc-sm" style="background:#dbeafe;color:#1e40af" onclick="event.stopPropagation();cambiarEstado(${o.id},'aprobada')">Aprobar</button>
          <button class="btn-oc btn-oc-sm" style="background:#fce4ec;color:#b71c1c" onclick="event.stopPropagation();cambiarEstado(${o.id},'cancelada')">Cancelar</button>` : ''}
          ${o.estado === 'aprobada' ? `<button class="btn-oc btn-oc-sm" style="background:#e0f2fe;color:#075985" onclick="event.stopPropagation();cambiarEstado(${o.id},'enviada')">Enviar</button>` : ''}
          ${o.estado === 'enviada' || o.estado === 'recibida_parcial' ? `<button class="btn-oc btn-oc-primary btn-oc-sm" onclick="event.stopPropagation();convertirCompra(${o.id})"><i class="bi bi-cart-check"></i> Convertir</button>` : ''}
        </td>
      </tr>`;
    });
    tbody.innerHTML = html;
  } catch(e) {
    tbody.innerHTML = `<tr><td colspan="8" class="empty-state"><i class="bi bi-exclamation-circle" style="color:#ef4444"></i> Error: ${esc(e.message)}</td></tr>`;
  }
}

// ─── Cargar proveedores ──────────────────────────────────
async function cargarProveedores() {
  try {
    const r = await fetch('api/ordenes_compra/index.php?action=proveedores');
    const d = await r.json();
    if (!d.success) return;
    const select = document.getElementById('filtroProveedor');
    d.data.forEach(p => {
      select.innerHTML += `<option value="${p.id}">${esc(p.nombre)}</option>`;
    });
    // Modal select
    const ms = document.getElementById('ocProveedor');
    ms.innerHTML = '<option value="">Seleccionar proveedor...</option>';
    d.data.forEach(p => {
      ms.innerHTML += `<option value="${p.id}" data-dias="${p.dias_entrega || 0}">${esc(p.nombre)}</option>`;
    });
  } catch(e) {}
}

// ─── Cargar productos del proveedor ──────────────────────
async function cargarProductosProveedor() {
  const provId = document.getElementById('ocProveedor').value;
  document.getElementById('addProductoBuscar').value = '';
  document.getElementById('addProductoId').value = '';
  document.getElementById('addPresentacionSelect').innerHTML = '<option value="">Presentación</option>';
  document.getElementById('addProductoResultados').style.display = 'none';
  if (!provId) return;

  try {
    const r = await fetch(`api/ordenes_compra/index.php?action=productos_proveedor&proveedor_id=${provId}`);
    const d = await r.json();
    if (!d.success) throw new Error(d.message);

    const entrega = d.data.proveedor?.dias_entrega || 0;
    if (entrega > 0) {
      const f = new Date();
      f.setDate(f.getDate() + entrega);
      document.getElementById('ocFechaEntrega').value = f.toISOString().split('T')[0];
    }

    productosCatalogo = {};
    const seen = {};
    (d.data.productos || []).forEach(p => {
      if (!seen[p.id]) seen[p.id] = { presentaciones: [] };
      seen[p.id].presentaciones.push({
        presentacion_id: p.presentacion_id,
        presentacion: p.presentacion,
        factor_conversion: p.factor_conversion,
        ultimo_costo: p.ultimo_costo
      });
      if (!productosCatalogo[p.id]) {
        productosCatalogo[p.id] = {
          id: p.id,
          codigo: p.codigo,
          producto: p.producto,
          laboratorio: p.laboratorio,
          ultimo_costo: p.ultimo_costo,
          stock_actual: p.stock_actual,
          presentaciones: []
        };
      }
    });
    Object.keys(seen).forEach(pid => { productosCatalogo[pid].presentaciones = seen[pid].presentaciones; });
    document.getElementById('addProductoBuscar').placeholder = `Buscar entre ${Object.keys(productosCatalogo).length} productos...`;
  } catch(e) {}
}

// ─── Buscar producto (autocomplete) ──────────────────────
let timeoutBuscarProd = null;
function buscarProductoProveedor() {
  clearTimeout(timeoutBuscarProd);
  timeoutBuscarProd = setTimeout(() => {
    const q = document.getElementById('addProductoBuscar').value.toLowerCase().trim();
    const cont = document.getElementById('addProductoResultados');
    if (q.length < 1) { cont.style.display = 'none'; return; }

    const matches = Object.values(productosCatalogo).filter(p =>
      (p.producto||'').toLowerCase().includes(q) || (p.codigo||'').toLowerCase().includes(q)
    ).slice(0, 50);

    if (matches.length === 0) {
      cont.innerHTML = '<div style="padding:0.5rem;color:var(--text-secondary);font-size:0.8rem">Sin resultados</div>';
      cont.style.display = 'block';
      return;
    }

    cont.innerHTML = matches.map(p =>
      `<div style="padding:0.5rem 0.75rem;cursor:pointer;border-bottom:1px solid var(--border-color);font-size:0.8rem" onclick="seleccionarProductoOC(${p.id})">${esc(p.codigo)} - ${esc(p.producto)}</div>`
    ).join('');
    cont.style.display = 'block';
  }, 200);
}

function seleccionarProductoOC(id) {
  const prod = productosCatalogo[id];
  if (!prod) return;
  document.getElementById('addProductoId').value = id;
  document.getElementById('addProductoBuscar').value = `[${prod.codigo}] ${prod.producto}`;
  document.getElementById('addProductoResultados').style.display = 'none';

  const presSelect = document.getElementById('addPresentacionSelect');
  presSelect.innerHTML = '<option value="">Unidad (base)</option>';
  prod.presentaciones.forEach(p => {
    presSelect.innerHTML += `<option value="${p.presentacion_id}">${esc(p.presentacion)} (x${p.factor_conversion}) - Q${parseFloat(p.ultimo_costo || 0).toFixed(4)}</option>`;
  });
}

// ─── Agregar línea ───────────────────────────────────────
function agregarLinea() {
  const prodId = document.getElementById('addProductoId').value;
  const presId = document.getElementById('addPresentacionSelect').value;
  const cant = parseInt(document.getElementById('addCantidad').value) || 1;

  if (!prodId) return alert('Seleccione un producto');
  const prod = productosCatalogo[prodId];
  if (!prod) return alert('Producto no encontrado');

  let presentacionNombre = 'Unidad';
  let factor = 1;
  let costo = prod.ultimo_costo || 0;

  if (presId) {
    const p = prod.presentaciones.find(x => String(x.presentacion_id) === presId);
    if (p) {
      presentacionNombre = p.presentacion;
      factor = p.factor_conversion || 1;
      costo = p.ultimo_costo || costo;
    }
  }

  // Check duplicate
  if (lineas.some(l => l.producto_id === prodId && String(l.presentacion_id) === String(presId))) {
    return alert('Este producto ya está agregado con esa presentación');
  }

  lineas.push({
    producto_id: prodId,
    codigo: prod.codigo,
    producto: prod.producto,
    presentacion_id: presId || '',
    presentacion: presentacionNombre,
    cantidad: cant,
    factor: factor,
    costo_unitario: costo
  });

  document.getElementById('addCantidad').value = 1;
  document.getElementById('addPresentacionSelect').value = '';
  document.getElementById('addProductoBuscar').value = '';
  document.getElementById('addProductoId').value = '';
  document.getElementById('addProductoResultados').style.display = 'none';
  renderLineas();
}

function renderLineas() {
  const tbody = document.getElementById('tbLineas');
  if (lineas.length === 0) {
    tbody.innerHTML = '<tr><td colspan="7" style="text-align:center;padding:1rem;color:var(--text-secondary)">Agregue productos a la orden</td></tr>';
    document.getElementById('ocTotales').textContent = 'Total: Q0.00';
    return;
  }

  let html = '';
  let total = 0;
  lineas.forEach((l, i) => {
    const subtotal = l.cantidad * l.costo_unitario;
    total += subtotal;
    html += `<tr>
      <td>${esc(l.codigo)}</td>
      <td>${esc(l.producto)}</td>
      <td>${esc(l.presentacion)}</td>
      <td><input type="number" value="${l.cantidad}" min="1" onchange="lineas[${i}].cantidad=parseInt(this.value)||1;renderLineas()" style="width:70px"></td>
      <td><input type="number" value="${l.costo_unitario}" step="0.0001" min="0" onchange="lineas[${i}].costo_unitario=parseFloat(this.value)||0;renderLineas()" style="width:100px"></td>
      <td style="font-weight:600">Q${subtotal.toFixed(2)}</td>
      <td><button class="btn-remove" onclick="lineas.splice(${i},1);renderLineas();">&times;</button></td>
    </tr>`;
  });
  tbody.innerHTML = html;

  const desc = parseFloat(document.getElementById('ocDescuento').value) || 0;
  const imp = parseFloat(document.getElementById('ocImpuesto').value) || 0;
  const base = total - desc;
  const iva = base * imp / 100;
  const granTotal = base + iva;
  document.getElementById('ocTotales').textContent = `Sub: Q${total.toFixed(2)} | Desc: Q${desc.toFixed(2)} | IVA: Q${iva.toFixed(2)} | Total: Q${granTotal.toFixed(2)}`;
}

function recalcularTotales() { renderLineas(); }

// ─── Cerrar resultados al hacer click fuera ──────────────
document.addEventListener('click', function(e) {
  const cont = document.getElementById('addProductoResultados');
  if (cont && !e.target.closest('#addProductoBuscar') && !e.target.closest('#addProductoResultados')) {
    cont.style.display = 'none';
  }
});

// ─── Guardar OC ──────────────────────────────────────────
async function guardarOC() {
  const proveedor_id = document.getElementById('ocProveedor').value;
  const sucursal_id = document.getElementById('ocSucursal').value;
  if (!proveedor_id) return alert('Seleccione un proveedor');
  if (!sucursal_id) return alert('Seleccione una sucursal');
  if (lineas.length === 0) return alert('Agregue al menos un producto');

  const editId = parseInt(document.getElementById('editOCId').value) || 0;
  const payload = {
    proveedor_id: parseInt(proveedor_id),
    sucursal_id: parseInt(sucursal_id),
    fecha_entrega_esperada: document.getElementById('ocFechaEntrega').value || null,
    notas: document.getElementById('ocNotas').value,
    descuento: parseFloat(document.getElementById('ocDescuento').value) || 0,
    tasa_impuesto: parseFloat(document.getElementById('ocImpuesto').value) || 0,
    detalle: lineas.map(l => ({
      producto_id: parseInt(l.producto_id),
      presentacion_id: l.presentacion_id ? parseInt(l.presentacion_id) : null,
      cantidad: l.cantidad,
      costo_unitario: l.costo_unitario
    }))
  };

  if (editId) {
    payload.id = editId;
  }

  try {
    const action = editId ? 'editar' : 'crear';
    const r = await fetch(`api/ordenes_compra/index.php?action=${action}`, {
      method: 'POST',
      headers: {'Content-Type':'application/json'},
      body: JSON.stringify(payload)
    });
    const d = await r.json();
    if (!d.success) throw new Error(d.message);
    cerrarModal();
    cargarOC();
    alert(d.message || 'OC guardada');
  } catch(e) {
    alert('Error: '+e.message);
  }
}

// ─── Abrir nueva OC ──────────────────────────────────────
function abrirNuevaOC() {
  editando = false;
  document.getElementById('editOCId').value = '0';
  document.getElementById('modalTitle').textContent = 'Nueva Orden de Compra';
  document.getElementById('ocProveedor').value = '';
  document.getElementById('ocSucursal').value = '<?= $sucursales[0]['id'] ?? 1 ?>';
  document.getElementById('ocFechaEntrega').value = '';
  document.getElementById('ocDescuento').value = '0';
  document.getElementById('ocImpuesto').value = '12';
  document.getElementById('ocNotas').value = '';
  document.getElementById('addProductoBuscar').value = '';
  document.getElementById('addProductoId').value = '';
  document.getElementById('addProductoResultados').style.display = 'none';
  document.getElementById('addPresentacionSelect').innerHTML = '<option value="">Presentación</option>';
  lineas = [];
  renderLineas();
  document.getElementById('modalOC').classList.add('open');
}

// ─── Editar OC ───────────────────────────────────────────
async function editarOC(id) {
  try {
    const r = await fetch(`api/ordenes_compra/index.php?action=ver&id=${id}`);
    const d = await r.json();
    if (!d.success) throw new Error(d.message);
    const oc = d.data;

    editando = true;
    ocActualId = id;
    document.getElementById('editOCId').value = id;
    document.getElementById('modalTitle').textContent = `Editar OC ${oc.numero_oc}`;
    document.getElementById('ocProveedor').value = oc.proveedor_id;

    // Cargar productos del proveedor
    await cargarProductosProveedor();

    document.getElementById('ocSucursal').value = oc.sucursal_id;
    document.getElementById('ocFechaEntrega').value = oc.fecha_entrega_esperada || '';
    document.getElementById('ocDescuento').value = oc.descuento;
    document.getElementById('ocImpuesto').value = oc.impuesto > 0 && oc.subtotal > 0 ? ((oc.impuesto / (oc.subtotal - oc.descuento)) * 100).toFixed(2) : '12';
    document.getElementById('ocNotas').value = oc.notas || '';

    lineas = (oc.detalle || []).map(det => ({
      producto_id: String(det.producto_id),
      codigo: det.codigo,
      producto: det.producto,
      presentacion_id: det.presentacion_id || '',
      presentacion: det.presentacion || 'Unidad',
      cantidad: parseInt(det.cantidad_solicitada),
      factor: 1,
      costo_unitario: parseFloat(det.costo_unitario_estimado)
    }));
    renderLineas();
    document.getElementById('modalOC').classList.add('open');
  } catch(e) {
    alert('Error: '+e.message);
  }
}

// ─── Cambiar estado ──────────────────────────────────────
async function cambiarEstado(id, estado) {
  const labels = { aprobada: 'aprobar', cancelada: 'cancelar', enviada: 'enviar' };
  if (!confirm(`¿Está seguro de ${labels[estado] || estado} esta OC?`)) return;

  try {
    const r = await fetch('api/ordenes_compra/index.php?action=cambiar_estado', {
      method: 'POST',
      headers: {'Content-Type':'application/json'},
      body: JSON.stringify({id, estado})
    });
    const d = await r.json();
    if (!d.success) throw new Error(d.message);
    cargarOC();
  } catch(e) {
    alert('Error: '+e.message);
  }
}

// ─── Ver detalle ─────────────────────────────────────────
async function verDetalle(id) {
  try {
    const r = await fetch(`api/ordenes_compra/index.php?action=ver&id=${id}`);
    const d = await r.json();
    if (!d.success) throw new Error(d.message);
    const oc = d.data;

    document.getElementById('detalleTitle').textContent = `OC ${oc.numero_oc}`;

    let itemsHtml = '';
    let totalItems = 0;
    (oc.detalle || []).forEach(item => {
      totalItems += parseInt(item.cantidad_solicitada) || 0;
      itemsHtml += `<tr>
        <td>${esc(item.codigo)}</td>
        <td>${esc(item.producto)}</td>
        <td>${esc(item.presentacion || 'Unidad')}</td>
        <td>${item.cantidad_solicitada}</td>
        <td>Q${parseFloat(item.costo_unitario_estimado).toFixed(4)}</td>
        <td style="font-weight:700">Q${parseFloat(item.costo_total_estimado).toFixed(2)}</td>
      </tr>`;
    });

    const estadoClass = 'estado-' + oc.estado;
    const estadoLabel = oc.estado.replace('_', ' ');

    document.getElementById('detalleBody').innerHTML = `
      <div class="detail-grid">
        <div class="detail-field"><label>Proveedor</label><p>${esc(oc.proveedor)}</p></div>
        <div class="detail-field"><label>Sucursal</label><p>${esc(oc.sucursal)}</p></div>
        <div class="detail-field"><label>Fecha emisión</label><p>${oc.fecha_emision}</p></div>
        <div class="detail-field"><label>Fecha entrega</label><p>${oc.fecha_entrega_esperada || 'No definida'}</p></div>
        <div class="detail-field"><label>Estado</label><p><span class="estado-badge ${estadoClass}">${esc(estadoLabel)}</span></p></div>
        <div class="detail-field"><label>Total productos</label><p><strong>${totalItems} uds</strong></p></div>
        <div class="detail-field"><label>Subtotal</label><p>Q${parseFloat(oc.subtotal).toFixed(2)}</p></div>
        <div class="detail-field"><label>Descuento</label><p>Q${parseFloat(oc.descuento).toFixed(2)}</p></div>
        <div class="detail-field"><label>IVA</label><p>Q${parseFloat(oc.impuesto).toFixed(2)}</p></div>
        <div class="detail-field"><label style="font-size:0.9rem;color:var(--text-primary)">TOTAL</label><p style="font-size:1.25rem;font-weight:800;color:var(--accent-color)">Q${parseFloat(oc.total).toFixed(2)}</p></div>
        ${oc.notas ? `<div class="detail-field" style="grid-column:1/-1"><label>Notas</label><p>${esc(oc.notas)}</p></div>` : ''}
      </div>
      <h3 style="font-size:1rem;margin-bottom:0.75rem">Productos (${oc.detalle?.length || 0} líneas)</h3>
      <div class="oc-table-wrap">
        <table>
          <thead><tr><th>Código</th><th>Producto</th><th>Presentación</th><th>Cant.</th><th>Costo U.</th><th>Subtotal</th></tr></thead>
          <tbody>${itemsHtml || '<tr><td colspan="6" style="text-align:center;padding:1rem">Sin productos</td></tr>'}</tbody>
        </table>
      </div>
      <div class="detail-actions" style="margin-top:1.5rem">
        ${oc.estado === 'pendiente' ? `<button class="btn-oc btn-oc-primary btn-oc-sm" onclick="cerrarModalDetalle();editarOC(${oc.id})"><i class="bi bi-pencil"></i> Editar</button>
          <button class="btn-oc btn-oc-sm" style="background:#dbeafe;color:#1e40af" onclick="cerrarModalDetalle();cambiarEstado(${oc.id},'aprobada')"><i class="bi bi-check-lg"></i> Aprobar</button>
          <button class="btn-oc btn-oc-sm" style="background:#fce4ec;color:#b71c1c" onclick="cerrarModalDetalle();cambiarEstado(${oc.id},'cancelada')"><i class="bi bi-x-lg"></i> Cancelar</button>` : ''}
        ${oc.estado === 'aprobada' ? `<button class="btn-oc btn-oc-sm" style="background:#e0f2fe;color:#075985" onclick="cerrarModalDetalle();cambiarEstado(${oc.id},'enviada')"><i class="bi bi-send"></i> Enviar</button>` : ''}
        ${oc.estado === 'enviada' || oc.estado === 'recibida_parcial' ? `<button class="btn-oc btn-oc-primary" onclick="cerrarModalDetalle();convertirCompra(${oc.id})"><i class="bi bi-cart-check"></i> Convertir en Compra</button>` : ''}
        <button class="btn-oc btn-oc-secondary" onclick="cerrarModalDetalle()">Cerrar</button>
      </div>
    `;
    document.getElementById('modalDetalle').classList.add('open');
  } catch(e) {
    alert('Error: '+e.message);
  }
}

// ─── Convertir OC en compra ──────────────────────────────
async function convertirCompra(id) {
  const labels = { enviada: 'Recibida completa', recibida_parcial: 'Recibir restante' };
  if (!confirm(`¿Convertir esta OC en una compra definitiva?\nSe creará la compra, se actualizará inventario y costo promedio.`)) return;

  try {
    const r = await fetch('api/ordenes_compra/index.php?action=convertir_compra', {
      method: 'POST',
      headers: {'Content-Type':'application/json'},
      body: JSON.stringify({id})
    });
    const d = await r.json();
    if (!d.success) throw new Error(d.message);
    alert(`Compra #${d.data.compra_id} creada exitosamente`);
    cargarOC();
  } catch(e) {
    alert('Error: '+e.message);
  }
}

// ─── Utils ───────────────────────────────────────────────
function cerrarModal() {
  document.getElementById('modalOC').classList.remove('open');
}

function cerrarModalDetalle() {
  document.getElementById('modalDetalle').classList.remove('open');
}

function esc(s) {
  if (!s) return '-';
  const d = document.createElement('div');
  d.textContent = s;
  return d.innerHTML;
}
</script>

<?php renderFooter(); ?>

