<!DOCTYPE html>
<html lang="es">
<head>
  <script>/*pos_theme_early*/(function(){var t=localStorage.getItem("pos_theme")||"industrial";document.documentElement.setAttribute("data-theme",t);})()</script>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Cotizaciones — Nexus Autoparts POS</title>
  <link rel="stylesheet" href="/pos/static/css/chat.css" />
  <link rel="stylesheet" href="/pos/static/css/tokens.css" />
  <link rel="stylesheet" href="/pos/static/css/common.css" />
  <link rel="stylesheet" href="/pos/static/css/pos-ui.css?v=33" />
  <link rel="stylesheet" href="/pos/static/css/sidebar.css" />
  <link rel="stylesheet" href="/pos/static/css/pos-glass.css" />
  <link rel="stylesheet" href="/pos/static/css/quotations.css"></head>
<body>
  <script src="/pos/static/js/pos-utils.js?v=33" defer></script>
  <script src="/pos/static/js/i18n.js" defer></script>
  <script src="/pos/static/js/app-init.js" defer></script>
  <script src="/pos/static/js/splash-loader.js?v=33" defer></script>
  <script src="/pos/static/js/sidebar.js" defer></script>

  <div class="page">
    <h1 class="page-title">Cotizaciones</h1>
    <div id="quoteList">Cargando...</div>
  </div>

  <div class="modal-overlay" id="quoteModal">
    <div class="modal-content">
      <button class="modal-close" onclick="document.getElementById('quoteModal').classList.remove('open')">&times;</button>
      <div id="quoteDetail">Cargando...</div>
    </div>
  </div>

  <script>
  (function() {
    var token = localStorage.getItem('pos_token');
    if (!token) { window.location.href = '/pos/login'; return; }
    var API = '/pos/api';

    function headers() { return { 'Authorization': 'Bearer ' + token, 'Content-Type': 'application/json' }; }
    function esc(s) { var d = document.createElement('div'); d.textContent = s || ''; return d.innerHTML; }
    function fmt(n) { return (n || 0).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); }

    function loadQuotes() {
      fetch(API + '/quotations?per_page=50', { headers: headers() })
        .then(function(r) { return r.json(); })
        .then(function(d) {
          var quotes = d.data || [];
          if (!quotes.length) {
            document.getElementById('quoteList').innerHTML = '<div class="empty"><h3>Sin cotizaciones</h3><p>Las cotizaciones creadas desde el POS (F4) o desde WhatsApp aparecen aqui.</p></div>';
            return;
          }
          var html = '<table class="quote-table"><thead><tr>';
          html += '<th>#</th><th>Origen</th><th>Cliente</th><th>Total</th><th>Estado</th><th>Fecha</th><th></th>';
          html += '</tr></thead><tbody>';
          quotes.forEach(function(q) {
            var srcBadge = q.source === 'whatsapp'
              ? '<span class="badge badge--wa">📱 WA</span>'
              : '<span class="badge badge--pos">🖥️ POS</span>';
            var statusBadge = '<span class="badge badge--' + q.status + '">' + q.status + '</span>';
            var client = q.customer_name || (q.wa_phone ? '📱 ' + q.wa_phone : 'Sin cliente');
            var dateStr = q.created_at ? new Date(q.created_at).toLocaleDateString('es-MX') : '';
            html += '<tr>';
            html += '<td onclick="openQuote(' + q.id + ')" style="cursor:pointer;"><strong>#' + q.id + '</strong></td>';
            html += '<td onclick="openQuote(' + q.id + ')" style="cursor:pointer;">' + srcBadge + '</td>';
            html += '<td onclick="openQuote(' + q.id + ')" style="cursor:pointer;">' + esc(client) + '</td>';
            html += '<td onclick="openQuote(' + q.id + ')" style="cursor:pointer;font-family:var(--font-mono);font-weight:700;">$' + fmt(q.total) + '</td>';
            html += '<td onclick="openQuote(' + q.id + ')" style="cursor:pointer;">' + statusBadge + '</td>';
            html += '<td onclick="openQuote(' + q.id + ')" style="cursor:pointer;color:var(--color-text-muted);">' + dateStr + '</td>';
            html += '<td><button onclick="deleteQuote(' + q.id + ', event)" style="background:var(--color-bg-overlay);border:1.5px solid var(--color-border);color:var(--color-text-muted);cursor:pointer;font-size:13px;padding:6px 10px;border-radius:var(--radius-md);display:inline-flex;align-items:center;gap:4px;transition:var(--transition-fast);" onmouseover="this.style.color=\'var(--color-error)\';this.style.borderColor=\'var(--color-error)\';this.style.background=\'rgba(248,81,73,0.08)\'" onmouseout="this.style.color=\'var(--color-text-muted)\';this.style.borderColor=\'var(--color-border)\';this.style.background=\'var(--color-bg-overlay)\'">';
            html += '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>';
            html += 'Eliminar</button></td>';
            html += '</tr>';
          });
          html += '</tbody></table>';
          document.getElementById('quoteList').innerHTML = html;
        })
        .catch(function() {
          document.getElementById('quoteList').innerHTML = '<div class="empty">Error cargando cotizaciones</div>';
        });
    }

    window.openQuote = function(id) {
      var modal = document.getElementById('quoteModal');
      modal.classList.add('open');
      document.getElementById('quoteDetail').innerHTML = 'Cargando...';

      fetch(API + '/quotations/' + id, { headers: headers() })
        .then(function(r) { return r.json(); })
        .then(function(q) {
          if (q.error) { document.getElementById('quoteDetail').innerHTML = 'Error: ' + esc(q.error); return; }
          var src = (q.notes || '').startsWith('WA:') ? 'WhatsApp' : 'POS';
          var waPhone = src === 'WhatsApp' ? q.notes.replace('WA:', '') : null;
          var html = '<h3 style="font-family:var(--font-heading);margin-bottom:var(--space-4);">Cotización #' + q.id + '</h3>';
          html += '<div style="display:flex;gap:var(--space-6);margin-bottom:var(--space-4);font-size:var(--text-body-sm);">';
          html += '<div><span style="color:var(--color-text-muted);">Origen:</span> ' + src + '</div>';
          if (waPhone) html += '<div><span style="color:var(--color-text-muted);">WhatsApp:</span> +' + esc(waPhone) + '</div>';
          if (q.customer_name) html += '<div><span style="color:var(--color-text-muted);">Cliente:</span> ' + esc(q.customer_name) + '</div>';
          html += '<div><span style="color:var(--color-text-muted);">Estado:</span> <span class="badge badge--' + q.status + '">' + q.status + '</span></div>';
          html += '<div><span style="color:var(--color-text-muted);">Vigencia:</span> ' + (q.valid_until || '—') + '</div>';
          html += '</div>';

          html += '<table class="detail-table"><thead><tr><th>#Parte</th><th>Nombre</th><th>Cant</th><th>Precio</th><th>Subtotal</th></tr></thead><tbody>';
          (q.items || []).forEach(function(it) {
            html += '<tr>';
            html += '<td style="font-family:var(--font-mono);">' + esc(it.part_number) + '</td>';
            html += '<td>' + esc(it.name) + '</td>';
            html += '<td>' + it.quantity + '</td>';
            html += '<td>$' + fmt(it.unit_price) + '</td>';
            html += '<td style="font-weight:700;">$' + fmt(it.subtotal) + '</td>';
            html += '</tr>';
          });
          html += '</tbody></table>';

          html += '<div style="text-align:right;margin-top:var(--space-4);font-size:var(--text-body);">';
          html += '<div>Subtotal: $' + fmt(q.subtotal) + '</div>';
          html += '<div>IVA: $' + fmt(q.tax_total) + '</div>';
          html += '<div style="font-size:var(--text-h5);font-weight:700;color:var(--color-text-accent);">Total: $' + fmt(q.total) + '</div>';
          html += '</div>';

          html += '<div style="margin-top:var(--space-5);">';
          // Primary actions
          if (q.status === 'active') {
            html += '<div style="display:flex;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-3);">';
            html += '<button class="btn btn--primary" onclick="convertQuote(' + q.id + ')" style="padding:10px 20px;font-size:var(--text-body);display:inline-flex;align-items:center;gap:8px;">';
            html += '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>';
            html += 'Convertir a Venta</button>';
            html += '<button class="btn btn--secondary" onclick="editQuote(' + q.id + ')" style="padding:10px 20px;font-size:var(--text-body);display:inline-flex;align-items:center;gap:8px;">';
            html += '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>';
            html += 'Editar</button>';
            html += '<button class="btn btn--ghost" onclick="shareQuote(' + q.id + ')" style="padding:10px 20px;font-size:var(--text-body);display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--color-border);">';
            html += '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>';
            html += 'Compartir</button>';
            html += '</div>';
          }
          // Secondary actions
          html += '<div style="display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:flex-end;">';
          html += '<button class="btn btn--ghost" onclick="window.print()" style="padding:8px 16px;font-size:var(--text-body-sm);display:inline-flex;align-items:center;gap:6px;">';
          html += '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>';
          html += 'Imprimir</button>';
          html += '<button class="btn btn--ghost" onclick="exportVisibleTableCSV(\'cotizacion_' + q.id + '\')" style="padding:8px 16px;font-size:var(--text-body-sm);display:inline-flex;align-items:center;gap:6px;">';
          html += '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>';
          html += 'Exportar CSV</button>';
          html += '<button class="btn btn--ghost" onclick="deleteQuote(' + q.id + ')" style="padding:8px 16px;font-size:var(--text-body-sm);display:inline-flex;align-items:center;gap:6px;color:var(--color-error);">';
          html += '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>';
          html += 'Eliminar</button>';
          html += '</div>';
          html += '</div>';

          document.getElementById('quoteDetail').innerHTML = html;
        });
    };

    window.deleteQuote = function(id, event) {
      if (event) event.stopPropagation();
      if (!confirm('¿Eliminar cotización #' + id + '? Esta acción no se puede deshacer.')) return;
      fetch(API + '/quotations/' + id, { method: 'DELETE', headers: headers() })
        .then(function(r) { return r.json(); })
        .then(function(d) {
          if (d.ok) {
            document.getElementById('quoteModal').classList.remove('open');
            loadQuotes();
            if (typeof showToast === 'function') showToast('Cotización #' + id + ' eliminada', 'ok');
          } else {
            alert('Error: ' + (d.error || 'desconocido'));
          }
        })
        .catch(function(err) { alert('Error de red al eliminar: ' + err.message); });
    };

    window.editQuote = function(id) {
      try {
        fetch(API + '/quotations/' + id, { headers: headers() })
          .then(function(r) { return r.json(); })
          .then(function(q) {
            if (!q.items) { alert('Error cargando cotización'); return; }
            var cartItems = q.items.map(function(it) {
              return {
                inventory_id: it.inventory_id,
                part_number: it.part_number,
                name: it.name,
                quantity: it.quantity,
                unit_price: it.unit_price,
                discount_pct: it.discount_pct,
                tax_rate: it.tax_rate
              };
            });
            localStorage.setItem('pos_edit_quote_id', id);
            localStorage.setItem('pos_edit_quote_customer_id', q.customer_id || '');
            localStorage.setItem('pos_edit_quote_notes', q.notes || '');
            localStorage.setItem('pos_cart', JSON.stringify(cartItems));
            window.location.href = '/pos/sale';
          })
          .catch(function(err) { alert('Error al cargar para editar: ' + err.message); });
      } catch (e) { alert('Excepcion en editQuote: ' + e.message); }
    };

    window.convertQuote = function(id) {
      try {
        fetch(API + '/quotations/' + id, { headers: headers() })
          .then(function(r) { return r.json(); })
          .then(function(q) {
            if (!q.items) { alert('Error cargando cotización'); return; }
            var cartItems = q.items.map(function(it) {
              return {
                inventory_id: it.inventory_id,
                part_number: it.part_number,
                name: it.name,
                quantity: it.quantity,
                unit_price: it.unit_price,
                discount_pct: it.discount_pct,
                tax_rate: it.tax_rate
              };
            });
            localStorage.setItem('pos_convert_quote_id', id);
            localStorage.setItem('pos_cart', JSON.stringify(cartItems));
            window.location.href = '/pos/sale';
          })
          .catch(function(err) { alert('Error al cargar para convertir: ' + err.message); });
      } catch (e) { alert('Excepcion en convertQuote: ' + e.message); }
    };

    window.shareQuote = function(id) {
      try {
        fetch(API + '/quotations/' + id + '/share', { method: 'POST', headers: headers() })
          .then(function(r) { return r.json(); })
          .then(function(d) {
            if (d.url) {
              if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(d.url).then(function() {
                  alert('Link copiado al portapapeles:\n' + d.url);
                }).catch(function() {
                  prompt('Copia este link:', d.url);
                });
              } else {
                prompt('Copia este link:', d.url);
              }
            } else {
              alert('Error del servidor: ' + (d.error || 'desconocido'));
            }
          })
          .catch(function(err) { alert('Error de red al compartir: ' + err.message); });
      } catch (e) { alert('Excepcion en shareQuote: ' + e.message); }
    };

    // Close modal on outside click
    document.getElementById('quoteModal').addEventListener('click', function(e) {
      if (e.target === this) this.classList.remove('open');
    });

    loadQuotes();
  })();
  </script>
  <script src="/pos/static/js/chat.js" defer></script>
</body>
</html>
