{% extends "base.html" %}
{% block title %}Alta de Cambio{% endblock %}

{% block content %}
<div class="d-flex align-items-center mb-4">
  <a href="{{ url_for('cambios.lista') }}" class="btn btn-sm btn-outline-secondary me-3">
    <i class="bi bi-arrow-left"></i> Volver
  </a>
  <h2 class="fw-bold mb-0">
    <i class="bi bi-plus-circle text-success"></i> Alta de Cambio
    <span class="badge bg-warning text-dark ms-2 fs-6">Transacción 1</span>
  </h2>
</div>

<div class="card shadow-sm border-0" style="max-width:700px;">
  <div class="card-header bg-success bg-opacity-10 border-0">
    <p class="mb-0 text-muted small">
      <i class="bi bi-info-circle"></i>
      Registre la solicitud de cambio. El usuario solicitante se cargará automáticamente
      según el sistema seleccionado.
    </p>
  </div>
  <div class="card-body p-4">
    <form method="POST" novalidate id="formAlta">
      {{ form.hidden_tag() }}

      <div class="mb-3">
        {{ form.sistema_id.label(class="form-label fw-semibold") }}
        {{ form.sistema_id(class="form-select" + (" is-invalid" if form.sistema_id.errors else ""),
                           id="sistema_id") }}
        {% for e in form.sistema_id.errors %}<div class="invalid-feedback">{{ e }}</div>{% endfor %}
      </div>

      <div class="mb-3">
        {{ form.usuario_solicitante_id.label(class="form-label fw-semibold") }}
        {{ form.usuario_solicitante_id(
              class="form-select" + (" is-invalid" if form.usuario_solicitante_id.errors else ""),
              id="usuario_solicitante_id") }}
        {% for e in form.usuario_solicitante_id.errors %}
          <div class="invalid-feedback">{{ e }}</div>
        {% endfor %}
        <div class="form-text" id="hint_usuario">
          <i class="bi bi-arrow-up text-muted"></i> Primero seleccione un sistema.
        </div>
      </div>

      <div class="mb-3">
        {{ form.numero_incidencia.label(class="form-label fw-semibold") }}
        <i class="text-muted" style="font-size:.85em;">Poner 0 en caso de que la incidencia no este registrada</i>
        {{ form.numero_incidencia(
              class="form-control" + (" is-invalid" if form.numero_incidencia.errors else ""),
              placeholder="0") }}
        {% for e in form.numero_incidencia.errors %}<div class="invalid-feedback">{{ e }}</div>{% endfor %}
      </div>

      <div class="mb-3">
        {{ form.descripcion_breve.label(class="form-label fw-semibold") }}
        {{ form.descripcion_breve(
              class="form-control" + (" is-invalid" if form.descripcion_breve.errors else ""),
              rows=4, placeholder="Descripción clara y concisa del cambio requerido…") }}
        {% for e in form.descripcion_breve.errors %}<div class="invalid-feedback">{{ e }}</div>{% endfor %}
      </div>

      <div class="mb-3">
        <span class="form-label fw-semibold d-block">{{ form.urgente.label.text }}</span>
        <div class="d-flex gap-4">
          {% for subfield in form.urgente %}
          <div class="form-check">
            {{ subfield(class="form-check-input", id=subfield.id) }}
            <label class="form-check-label
              {% if subfield.data == '1' %}text-danger fw-semibold{% endif %}"
              for="{{ subfield.id }}">
              {% if subfield.data == '1' %}
                <i class="bi bi-exclamation-triangle-fill text-danger me-1"></i>
              {% endif %}
              {{ subfield.label.text }}
            </label>
          </div>
          {% endfor %}
        </div>
      </div>

      <div class="mb-4">
        {{ form.fecha_pruebas.label(class="form-label fw-semibold") }}
        {{ form.fecha_pruebas(
              class="form-control" + (" is-invalid" if form.fecha_pruebas.errors else ""),
              id="fecha_pruebas") }}
        <div class="form-text" id="hint_fecha">La fecha debe ser posterior a hoy.</div>
        {% for e in form.fecha_pruebas.errors %}<div class="invalid-feedback">{{ e }}</div>{% endfor %}
      </div>

      <div class="d-flex gap-2">
        {{ form.submit(class="btn btn-success px-4") }}
        <a href="{{ url_for('cambios.lista') }}" class="btn btn-outline-secondary px-4">Cancelar</a>
      </div>
    </form>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const apiUrl          = "{{ url_for('cambios.usuarios_por_sistema', sistema_id=0) }}".replace('/0', '');
const selectSistema   = document.getElementById('sistema_id');
const selectUsuario   = document.getElementById('usuario_solicitante_id');
const hintUsuario     = document.getElementById('hint_usuario');
const inputFecha      = document.getElementById('fecha_pruebas');
const hintFecha       = document.getElementById('hint_fecha');

// Fecha local (evita desfase UTC que bloquearía el día actual en México)
function fechaLocal(offsetDias = 0) {
  const d = new Date();
  d.setDate(d.getDate() + offsetDias);
  return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
}
const hoy    = fechaLocal(0);
const manana = fechaLocal(1);

// ── Combo en cascada ──────────────────────────────────────────────
// usuarioARestaurar: id previo (cuando el form re-renderiza por error)
function cargarUsuarios(sistemaId, usuarioARestaurar) {
  selectUsuario.innerHTML = '<option value="">Cargando…</option>';
  selectUsuario.disabled  = true;

  if (!sistemaId || sistemaId === '0') {
    selectUsuario.innerHTML = '<option value="">-- Seleccionar sistema primero --</option>';
    hintUsuario.innerHTML   = '<i class="bi bi-arrow-up text-muted"></i> Primero seleccione un sistema.';
    return;
  }

  fetch(`${apiUrl}/${sistemaId}`)
    .then(r => r.json())
    .then(data => {
      selectUsuario.innerHTML = '<option value="">-- Seleccionar usuario --</option>';
      if (data.length === 0) {
        selectUsuario.innerHTML = '<option value="">Sin usuarios asignados a este sistema</option>';
        hintUsuario.innerHTML   = '<i class="bi bi-exclamation-triangle text-warning"></i> Asigne usuarios al sistema primero.';
      } else {
        data.forEach(u => {
          const opt      = document.createElement('option');
          opt.value      = u.id;
          opt.textContent = u.nombre;
          if (usuarioARestaurar && u.id == usuarioARestaurar) opt.selected = true;
          selectUsuario.appendChild(opt);
        });
        hintUsuario.innerHTML = `<i class="bi bi-check-circle text-success"></i> ${data.length} usuario(s) disponible(s).`;
      }
      selectUsuario.disabled = false;
    })
    .catch(() => {
      selectUsuario.innerHTML = '<option value="">Error al cargar usuarios</option>';
      selectUsuario.disabled  = false;
    });
}

selectSistema.addEventListener('change', () => cargarUsuarios(selectSistema.value, null));

// ── Urgencia y fecha mínima ───────────────────────────────────────
function actualizarFechaMin() {
  const urgente = document.querySelector('input[name="urgente"]:checked')?.value === '1';
  if (urgente) {
    inputFecha.setAttribute('min', hoy);
    hintFecha.innerHTML = '<i class="bi bi-info-circle text-primary me-1"></i>'
                        + 'Cambio urgente: puede seleccionar la fecha de hoy.';
  } else {
    inputFecha.setAttribute('min', manana);
    if (inputFecha.value && inputFecha.value <= hoy) inputFecha.value = '';
    hintFecha.innerHTML = '<i class="bi bi-calendar text-muted me-1"></i>'
                        + 'La fecha debe ser posterior a hoy.';
  }
}

document.querySelectorAll('input[name="urgente"]').forEach(r =>
  r.addEventListener('change', actualizarFechaMin)
);
actualizarFechaMin();

// ── Restaurar estado tras error de validación ─────────────────────
const usuarioPrevio = {{ form.usuario_solicitante_id.data | tojson }};
if (selectSistema.value && selectSistema.value !== '0') {
  cargarUsuarios(selectSistema.value, usuarioPrevio);
}
</script>
{% endblock %}