{% extends "base.html" %}
{% block title %}Registrar Venta — {{ locales[local].nombre }}{% endblock %}
{% block page_title %}➕ Registrar Venta — {{ locales[local].icono }} {{ locales[local].nombre }}{% endblock %}

{% block content %}
<div class="card" style="max-width:700px;">
  <div class="card-header">
    <div class="card-title">Nueva Venta</div>
    <a href="{{ url_for('ventas', local=local) }}" class="btn btn-secondary btn-sm">← Volver</a>
  </div>

  <form method="POST" action="{{ url_for('nueva_venta', local=local) }}">

    <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
      <div class="form-group">
        <label>📅 Fecha *</label>
        <input type="date" name="fecha" required id="fechaInput">
      </div>
      <div class="form-group">
        <label>🕐 Turno *</label>
        <select name="turno" required>
          <option value="AM">☀️ AM (mañana)</option>
          <option value="PM">🌙 PM (tarde)</option>
        </select>
      </div>
    </div>

    <div class="form-group">
      <label>📝 Descripción / Producto *</label>
      <input type="text" name="producto" required placeholder="Ej: Perfume 100ml, Venta general, etc." autocomplete="off">
    </div>

    <div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px;">
      <div class="form-group">
        <label>📦 Cantidad</label>
        <input type="number" name="cantidad" value="1" min="1" id="cantInput">
      </div>
      <div class="form-group">
        <label>💵 Precio / Monto *</label>
        <input type="number" name="precio_unitario" required min="0" step="1" placeholder="0" id="precioInput">
      </div>
      <div class="form-group">
        <label>🏷️ Descuento ($)</label>
        <input type="number" name="descuento" value="0" min="0" step="1" id="descInput">
      </div>
    </div>

    <div class="form-group" style="background:var(--bg-tertiary); padding:16px; border-radius:8px; margin-bottom:20px;">
      <label style="color:var(--accent-gold); font-size:13px;">💰 TOTAL A REGISTRAR</label>
      <div id="totalPreview" style="font-size:32px; font-family:monospace; font-weight:700; color:var(--accent-gold); margin-top:4px;">$0</div>
    </div>

    <div class="form-group">
      <label>💳 Medio de Pago *</label>
      <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px;">
        <label class="pago-opcion">
          <input type="radio" name="forma_pago" value="efectivo" required>
          <span>💵 Efectivo</span>
        </label>
        <label class="pago-opcion">
          <input type="radio" name="forma_pago" value="debito">
          <span>💳 Tarjeta Débito</span>
        </label>
        <label class="pago-opcion">
          <input type="radio" name="forma_pago" value="credito">
          <span>💳 Tarjeta Crédito</span>
        </label>
        <label class="pago-opcion">
          <input type="radio" name="forma_pago" value="transferencia">
          <span>🏦 Transferencia</span>
        </label>
        <label class="pago-opcion">
          <input type="radio" name="forma_pago" value="otros">
          <span>🔄 Otros</span>
        </label>
      </div>
    </div>

    <div class="form-group">
      <label>👤 Vendedor</label>
      <input type="text" name="vendedor" placeholder="Nombre del vendedor (opcional)">
    </div>

    <div class="form-group">
      <label>📝 Notas</label>
      <textarea name="notas" rows="2" placeholder="Observaciones opcionales..."></textarea>
    </div>

    <div style="display:flex; gap:12px;">
      <button type="submit" class="btn btn-primary">💾 Guardar Venta</button>
      <a href="{{ url_for('ventas', local=local) }}" class="btn btn-secondary">Cancelar</a>
    </div>
  </form>
</div>

{% block extra_css %}
<style>
.pago-opcion {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 12px 16px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  transition: all 0.2s;
  font-size: 14px;
}
.pago-opcion:hover { border-color: var(--accent-gold); background: var(--bg-tertiary); }
.pago-opcion input[type="radio"] { accent-color: var(--accent-gold); width: 16px; height: 16px; }
.pago-opcion input[type="radio"]:checked + span { color: var(--accent-gold); font-weight: 600; }
.pago-opcion:has(input:checked) { border-color: var(--accent-gold); background: rgba(212,160,23,0.08); }
</style>
{% endblock %}

{% block extra_js %}
<script>
  const fechaEl = document.getElementById('fechaInput');
  fechaEl.value = new Date().toISOString().split('T')[0];

  const hora = new Date().getHours();
  if (hora >= 13) document.querySelector('select[name="turno"]').value = 'PM';

  function calcTotal() {
    const cant = parseFloat(document.getElementById('cantInput').value) || 0;
    const precio = parseFloat(document.getElementById('precioInput').value) || 0;
    const desc = parseFloat(document.getElementById('descInput').value) || 0;
    const total = cant * precio - desc;
    document.getElementById('totalPreview').textContent = '$' + total.toLocaleString('es-CL', {maximumFractionDigits: 0});
  }
  ['cantInput','precioInput','descInput'].forEach(id => document.getElementById(id).addEventListener('input', calcTotal));
  calcTotal();
</script>
{% endblock %}
{% endblock %}