{% extends "base.html" %}
{% block title %}Registro de Turno — {{ locales[local].nombre }}{% endblock %}
{% block page_title %}📋 Registro de Turno{% endblock %}

{% block content %}
<div style="max-width:620px;">

  <!-- LOCAL SELECCIONADO — prominente -->
  <div style="background:{{ locales[local].color }}22; border:2px solid {{ locales[local].color }};
              border-radius:12px; padding:16px 20px; margin-bottom:20px;
              display:flex; align-items:center; justify-content:space-between;">
    <div style="display:flex; align-items:center; gap:14px;">
      <span style="font-size:32px;">{{ locales[local].icono }}</span>
      <div>
        <div style="font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px;">Registrando en</div>
        <div style="font-size:22px; font-weight:700; color:{{ locales[local].color }};">{{ locales[local].nombre }}</div>
      </div>
    </div>
    <a href="{{ url_for('seleccionar_local') }}" class="btn btn-secondary btn-sm">🔄 Cambiar local</a>
  </div>

  <div class="card">
    <div class="card-header">
      <div>
        <div class="card-title">Totales del Turno</div>
        <div class="card-subtitle">Ingresa el monto total por cada medio de pago</div>
      </div>
    </div>

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

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

      <!-- Totales por medio de pago -->
      <div style="background:var(--bg-secondary); border-radius:10px; padding:20px; margin-bottom:20px;">
        <p style="color:var(--text-muted); font-size:13px; margin:0 0 16px;">
          Deja en 0 los medios que no se usaron en este turno
        </p>

        <div class="form-group">
          <label style="color:var(--accent-green);">💵 Total Efectivo</label>
          <input type="number" name="efectivo" value="0" min="0" step="1" id="ef" class="monto-input">
        </div>
        <div class="form-group">
          <label style="color:#3498db;">💳 Total Tarjeta Débito</label>
          <input type="number" name="debito" value="0" min="0" step="1" id="deb" class="monto-input">
        </div>
        <div class="form-group">
          <label style="color:#9b59b6;">💳 Total Tarjeta Crédito</label>
          <input type="number" name="credito" value="0" min="0" step="1" id="cred" class="monto-input">
        </div>
        <div class="form-group">
          <label style="color:var(--accent-gold);">🏦 Total Transferencia</label>
          <input type="number" name="transferencia" value="0" min="0" step="1" id="trans" class="monto-input">
        </div>
        <div class="form-group" style="margin-bottom:0;">
          <label style="color:#7f8c8d;">🔄 Otros medios</label>
          <input type="number" name="otros" value="0" min="0" step="1" id="otros" class="monto-input">
        </div>
      </div>

      <!-- Total calculado -->
      <div style="background:var(--bg-tertiary); border:2px solid {{ locales[local].color }};
                  border-radius:10px; padding:20px; margin-bottom:20px; text-align:center;">
        <div style="color:var(--text-muted); font-size:13px; margin-bottom:4px;">TOTAL DEL TURNO</div>
        <div id="totalTurno" style="font-size:40px; font-family:monospace; font-weight:700; color:{{ locales[local].color }};">$0</div>
        <div style="font-size:12px; color:var(--text-muted); margin-top:4px;">{{ locales[local].nombre }}</div>
      </div>

      <div class="form-group">
        <label>👤 Responsable del turno</label>
        <input type="text" name="vendedor" placeholder="Nombre de quien cierra el turno">
      </div>
      <div class="form-group">
        <label>📝 Observaciones</label>
        <textarea name="notas" rows="2" placeholder="Notas opcionales..."></textarea>
      </div>

      <div style="display:flex; gap:12px;">
        <button type="submit" class="btn btn-primary" style="flex:1; padding:14px; font-size:16px;">
          ✅ Registrar Turno en {{ locales[local].nombre }}
        </button>
        <a href="{{ url_for('seleccionar_local') }}" class="btn btn-secondary">Cancelar</a>
      </div>
    </form>
  </div>
</div>

{% block extra_js %}
<script>
  // Usar FECHA LOCAL del navegador (no UTC) — evita desfase de un día en la noche
  const _hoy = new Date();
  const _yyyy = _hoy.getFullYear();
  const _mm   = String(_hoy.getMonth() + 1).padStart(2, '0');
  const _dd   = String(_hoy.getDate()).padStart(2, '0');
  document.getElementById('fechaInput').value = `${_yyyy}-${_mm}-${_dd}`;
  document.getElementById('turnoSel').value = _hoy.getHours() >= 13 ? 'PM' : 'AM';

  const ids = ['ef','deb','cred','trans','otros'];
  function calcTotal() {
    const total = ids.reduce((s, id) => s + (parseFloat(document.getElementById(id).value) || 0), 0);
    document.getElementById('totalTurno').textContent = '$' + total.toLocaleString('es-CL', {maximumFractionDigits:0});
  }
  ids.forEach(id => document.getElementById(id).addEventListener('input', calcTotal));
  document.querySelectorAll('.monto-input').forEach(el => el.addEventListener('focus', function(){ this.select(); }));
</script>
{% endblock %}
{% endblock %}