{% extends "base.html" %}
{% block title %}Reportes PDF{% endblock %}

{% block content %}
<div class="d-flex align-items-center mb-4">
  <h2 class="fw-bold mb-0">
    <i class="bi bi-file-earmark-pdf text-danger"></i> Reportes PDF
  </h2>
</div>

<div class="row g-4">

  <!-- Reporte Individual -->
  <div class="col-lg-5">
    <div class="card shadow-sm border-0 h-100">
      <div class="card-header bg-danger bg-opacity-10 border-0">
        <h5 class="mb-0 fw-bold text-danger">
          <i class="bi bi-file-earmark-person"></i> Reporte Individual de Cambio
        </h5>
      </div>
      <div class="card-body">
        <p class="text-muted small">
          Genera la ficha completa de un cambio específico en formato PDF.
          Incluye datos de las 3 transacciones y el estatus actual.
        </p>
        <p class="small">
          También puede descargar el PDF directamente desde:
        </p>
        <ul class="small text-muted">
          <li>El listado general de cambios</li>
          <li>La pantalla de Aplicación de Cambio</li>
          <li>La pantalla de Liberación a Producción</li>
        </ul>

        <hr>
        <p class="fw-semibold small mb-2">Descargar por número de cambio:</p>
        <form action="" method="GET" id="formIndividual" class="d-flex gap-2">
          <input type="number" class="form-control form-control-sm" id="idCambio"
                 placeholder="ID del cambio" min="1" required>
          <button type="submit" class="btn btn-danger btn-sm px-3">
            <i class="bi bi-download"></i> PDF
          </button>
        </form>
      </div>
    </div>
  </div>

  <!-- Reporte de Listado con Filtros -->
  <div class="col-lg-7">
    <div class="card shadow-sm border-0">
      <div class="card-header bg-primary bg-opacity-10 border-0">
        <h5 class="mb-0 fw-bold text-primary">
          <i class="bi bi-table"></i> Reporte de Listado con Filtros
        </h5>
      </div>
      <div class="card-body p-4">
        <p class="text-muted small mb-3">
          Genera un PDF con el listado completo de cambios aplicando los filtros deseados.
          {% if current_user.es_promotor %}
          <span class="badge bg-info text-dark">Solo verás tus propias solicitudes</span>
          {% endif %}
        </p>

        <form method="POST" action="{{ url_for('reportes.listado_pdf') }}" novalidate>
          {{ form.hidden_tag() }}

          <div class="row g-3">
            <div class="col-md-6">
              {{ form.fecha_desde.label(class="form-label fw-semibold small") }}
              {{ form.fecha_desde(class="form-control form-control-sm") }}
            </div>
            <div class="col-md-6">
              {{ form.fecha_hasta.label(class="form-label fw-semibold small") }}
              {{ form.fecha_hasta(class="form-control form-control-sm") }}
            </div>

            <div class="col-md-6">
              {{ form.sistema_id.label(class="form-label fw-semibold small") }}
              {{ form.sistema_id(class="form-select form-select-sm") }}
            </div>
            <div class="col-md-6">
              {{ form.estatus.label(class="form-label fw-semibold small") }}
              {{ form.estatus(class="form-select form-select-sm") }}
            </div>

            {% if not current_user.es_promotor %}
            <div class="col-12">
              {{ form.usuario_solicitante.label(class="form-label fw-semibold small") }}
              {{ form.usuario_solicitante(class="form-select form-select-sm") }}
            </div>
            {% endif %}
          </div>

          <div class="mt-4">
            <button type="submit" class="btn btn-primary px-4">
              <i class="bi bi-file-earmark-arrow-down"></i> Generar y Descargar PDF
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

</div>

<!-- Acceso rápido al listado de cambios -->
<div class="card shadow-sm border-0 mt-4">
  <div class="card-body py-3">
    <div class="d-flex align-items-center justify-content-between">
      <span class="fw-semibold">
        <i class="bi bi-list-ul text-primary"></i>
        También puede descargar el PDF de cualquier cambio desde el listado general:
      </span>
      <a href="{{ url_for('cambios.lista') }}" class="btn btn-outline-primary btn-sm">
        <i class="bi bi-arrow-right"></i> Ver listado de cambios
      </a>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Formulario de reporte individual: construir URL dinámicamente
document.getElementById('formIndividual').addEventListener('submit', function(e) {
  e.preventDefault();
  const id = document.getElementById('idCambio').value;
  if (id && parseInt(id) > 0) {
    window.location.href = `/reportes/cambio/${id}/pdf`;
  }
});
</script>
{% endblock %}