{% extends "base.html" %}
{% block title %}Aplicación de Cambio #{{ cambio.id }}{% endblock %}

{% block content %}
<div class="d-flex align-items-center mb-4">
  <a href="{{ url_for('cambios.aplicacion_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-gear text-primary"></i> Aplicación – Cambio #{{ cambio.id }}
    <span class="badge bg-primary ms-2 fs-6">Transacción 2</span>
  </h2>
</div>

<div class="row g-4">
  <!-- Datos de la solicitud (solo lectura) -->
  <div class="col-lg-5">
    <div class="card shadow-sm border-0 h-100">
      <div class="card-header bg-warning bg-opacity-15 border-0">
        <h6 class="mb-0 fw-bold text-warning">
          <i class="bi bi-lock"></i> Datos de la Solicitud (solo lectura)
        </h6>
      </div>
      <div class="card-body">
        <dl class="row small mb-0">
          <dt class="col-5 text-muted">Sistema:</dt>
          <dd class="col-7 fw-semibold">{{ cambio.sistema.nombre if cambio.sistema else '-' }}</dd>

          <dt class="col-5 text-muted">Solicitante:</dt>
          <dd class="col-7">{{ cambio.solicitante.nombre_completo if cambio.solicitante else '-' }}</dd>

          <dt class="col-5 text-muted">Correo:</dt>
          <dd class="col-7">{{ cambio.solicitante.correo if cambio.solicitante else '-' }}</dd>

          <dt class="col-5 text-muted">Núm. Incidencia:</dt>
          <dd class="col-7 fw-bold">{{ cambio.numero_incidencia }}</dd>

          <dt class="col-5 text-muted">F. Pruebas:</dt>
          <dd class="col-7">{{ cambio.fecha_pruebas | fecha_mx }}</dd>

          <dt class="col-5 text-muted">Registrado:</dt>
          <dd class="col-7">{{ cambio.creado_en | fecha_mx }}</dd>

          <dt class="col-5 text-muted">Descripción:</dt>
          <dd class="col-7">{{ cambio.descripcion_breve or '-' }}</dd>
        </dl>
      </div>
    </div>
  </div>

  <!-- Formulario de aplicación -->
  <div class="col-lg-7">
    <div class="card shadow-sm border-0">
      <div class="card-header bg-primary bg-opacity-10 border-0">
        <h6 class="mb-0 fw-bold text-primary">
          <i class="bi bi-pencil-square"></i> Datos Técnicos del Cambio
        </h6>
      </div>
      <div class="card-body p-4">
        <form method="POST" enctype="multipart/form-data" novalidate>
          {{ form.hidden_tag() }}

          <div class="mb-3">
            {{ form.descripcion_tecnica.label(class="form-label fw-semibold") }}
            {{ form.descripcion_tecnica(
                  class="form-control" + (" is-invalid" if form.descripcion_tecnica.errors else ""),
                  rows=6,
                  placeholder="Detalle técnico completo del cambio: archivos modificados, scripts ejecutados, parámetros afectados…") }}
            {% for e in form.descripcion_tecnica.errors %}
              <div class="invalid-feedback">{{ e }}</div>
            {% endfor %}
          </div>

          <div class="mb-3">
            {{ form.fecha_propuesta_produccion.label(class="form-label fw-semibold") }}
            {{ form.fecha_propuesta_produccion(
                  class="form-control" + (" is-invalid" if form.fecha_propuesta_produccion.errors else ""),
                  id="fecha_propuesta") }}
            <div class="form-text">
              No puede ser anterior a la fecha de pruebas ({{ cambio.fecha_pruebas | fecha_mx }}).
            </div>
            {% for e in form.fecha_propuesta_produccion.errors %}
              <div class="invalid-feedback">{{ e }}</div>
            {% endfor %}
          </div>

          <div class="mb-4">
            {{ form.archivo_cambio.label(class="form-label fw-semibold") }}
            {{ form.archivo_cambio(
                  class="form-control" + (" is-invalid" if form.archivo_cambio.errors else ""),
                  accept=".zip,.sql") }}
            <div class="form-text">
              <i class="bi bi-info-circle"></i>
              Opcional. Suba los objetos o scripts a aplicar en producción (máx. un archivo .zip o .sql).
            </div>
            {% for e in form.archivo_cambio.errors %}
              <div class="invalid-feedback">{{ e }}</div>
            {% endfor %}
          </div>

          <div class="d-flex gap-2">
            {{ form.submit(class="btn btn-primary px-4") }}
            <a href="{{ url_for('cambios.aplicacion_lista') }}"
               class="btn btn-outline-secondary px-4">Cancelar</a>
            <a href="{{ url_for('cambios.descargar_pdf', id=cambio.id) }}"
               class="btn btn-outline-danger ms-auto" title="Descargar PDF">
              <i class="bi bi-file-earmark-pdf"></i> PDF
            </a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Fecha mínima = fecha de pruebas del cambio
const fechaPruebas = "{{ cambio.fecha_pruebas.isoformat() }}";
document.getElementById('fecha_propuesta').setAttribute('min', fechaPruebas);
</script>
{% endblock %}