<?php
require_once __DIR__ . '/../config/app.php';
if (!is_logged_in()) {
  header('Location: ' . asset('views/login.php'));
  exit;
}
$page_title = 'VD_ - Inscripciones';
require __DIR__ . '/../partials/header.php';
?>

<link rel="stylesheet" href="../css/views/inscripcion.css">

<div class="container mt-4">

  <div class="card">
    <div class="card-body">

      <div class="alert alert-info mb-4" role="alert">
        <h5 class="alert-heading mb-1">Barrick Academy - Supervisores: completa los datos a continuación para registrar tus fechas de cursada</h5>
      </div>

      <form id="form-inscripcion" action="#" method="post" class="needs-validation" novalidate>
        <input type="hidden" id="id" name="id">

        <div class="row g-4 mb-4"> <!-- Datos del usuario -->

          <div class="col-12 col-md-4"> <!-- nombre -->
            <label for="nombre" class="form-label">Nombre</label>
            <input type="text" class="form-control bg-light" id="nombre" name="nombre" readonly>
          </div> <!-- nombre -->

          <div class="col-12 col-md-4"> <!-- departamento -->
            <label for="departamento" class="form-label">Departamento</label>
            <input type="text" class="form-control bg-light" id="departamento" name="departamento" readonly>
          </div> <!-- departamento -->

          <div class="col-12 col-md-4"> <!-- comida -->
            <label for="comida" class="form-label">Preferencia alimentaria</label>
            <select class="form-select" id="comida" name="comida" required>
              <option value="">Seleccione su preferencia…</option>
              <option value="N">Ninguna</option>
              <option value="C">Celiaco</option>
              <option value="V">Vegetariano</option>
              <option value="G">Vegano</option>
              <option value="O">Otro</option>
            </select>
            <div class="invalid-feedback">Por favor seleccione su preferencia.</div>
          </div> <!-- comida -->

        </div><!-- Datos del usuario -->

        <div class="accordion" id="accordionCursos"> <!-- Accordion: Bridging Program + Bloques -->

          <div class="accordion-item"> <!-- Bridging Program -->

            <h2 class="accordion-header" id="headingBP">
              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseBP" aria-expanded="true" aria-controls="collapseBP">
                Inscripción al Bridging Program
              </button>
            </h2>

            <div id="collapseBP" class="accordion-collapse collapse show" aria-labelledby="headingBP" data-bs-parent="#accordionCursos">
              <div class="accordion-body"> <!-- accordion-body -->
                <div class="row g-4"> <!-- row -->

                  <div class="col-12">
                    <div class="fw-semibold mb-1">Bridging Program: selecciona fecha y lugar</div><span id="bp_span"></span>
                  </div>

                  <div class="col-12 col-lg-6"> <!-- fecha_bp -->
                    <label for="fecha_bp" class="form-label">Fecha</label>
                    <select class="form-select validar" id="fecha_bp" name="fecha_bp" required></select>
                    <div class="invalid-feedback">Por favor seleccione una fecha.</div>
                  </div> <!-- fecha_bp -->

                  <div class="col-12 col-lg-6"> <!-- lugar_bp -->
                    <label for="lugar_bp" class="form-label">Lugar</label>
                    <select class="form-select validar" id="lugar_bp" name="lugar_bp" required>
                      <option value="">Seleccione un lugar…</option>
                      <option value="V">Capacitación Villagra</option>
                      <option value="A">Aguas Blancas</option>
                    </select>
                    <div class="invalid-feedback">Por favor seleccione un lugar.</div>
                  </div> <!-- lugar_bp -->

                  <div class="col-12 col-lg-4"> <!-- alojamiento_bp -->
                    <label for="alojamiento_bp" class="form-label">Alojamiento</label>
                    <select class="form-select" id="alojamiento_bp" name="alojamiento_bp" required>
                      <option value="N" selected>No</option>
                      <option value="S">Si</option>
                    </select>
                    <div class="invalid-feedback">Por favor seleccione si necesita alojamiento.</div>
                  </div> <!-- alojamiento_bp -->

                  <div class="col-12 col-lg-8" id="wrap_alojamiento_bp">
                    <div class="row g-4">

                      <div class="col-12 col-lg-6"> <!-- alojamiento_inicio_bp -->
                        <label for="alojamiento_inicio_bp" class="form-label">Fecha inicio</label>
                        <input type="date" class="form-control bg-light" id="alojamiento_inicio_bp" name="alojamiento_inicio_bp">
                        <div class="invalid-feedback">Por favor seleccione la fecha.</div>
                      </div> <!-- alojamiento_inicio_bp -->

                      <div class="col-12 col-lg-6"> <!-- alojamiento_fin_bp -->
                        <label for="alojamiento_fin_bp" class="form-label">Fecha fin</label>
                        <input type="date" class="form-control bg-light" id="alojamiento_fin_bp" name="alojamiento_fin_bp">
                        <div class="invalid-feedback">Por favor seleccione la fecha.</div>
                      </div> <!-- alojamiento_fin_bp -->

                    </div>
                  </div>

                </div> <!-- row -->
              </div> <!-- accordion-body -->
            </div>
          </div> <!-- Bridging Program -->

          <div class="accordion-item"> <!-- Bloque 1 -->

            <h2 class="accordion-header" id="headingB1">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseB1" aria-expanded="false" aria-controls="collapseB1">
                Inscripción al Bloque 1
              </button>
            </h2>

            <div id="collapseB1" class="accordion-collapse collapse"
              aria-labelledby="headingB1" data-bs-parent="#accordionCursos">
              <div class="accordion-body">
                <div class="row g-4"> <!-- row -->

                  <div class="col-12 col-xl-6"> <!-- Día 1 -->
                    <div class="row g-4">
                      <div class="col-12">
                        <div class="fw-semibold mb-1">Día 1: selecciona fecha y lugar</div><span id="b1_1_span">&nbsp;</span>
                      </div>

                      <div class="col-12 col-md-6"> <!-- fecha_b1_1 -->
                        <label for="fecha_b1_1" class="form-label">Fecha</label>
                        <select class="form-select validar" id="fecha_b1_1" name="fecha_b1_1" required></select>
                        <div class="invalid-feedback">Por favor seleccione una fecha.</div>
                      </div> <!-- fecha_b1_1 -->

                      <div class="col-12 col-md-6"> <!-- lugar_b1_1 -->
                        <label for="lugar_b1_1" class="form-label">Lugar</label>
                        <select class="form-select validar" id="lugar_b1_1" name="lugar_b1_1" required>
                          <option value="">Seleccione un lugar…</option>
                          <option value="V">Capacitación Villagra</option>
                          <option value="A">Aguas Blancas</option>
                        </select>
                        <div class="invalid-feedback">Por favor seleccione un lugar.</div>
                      </div> <!-- lugar_b1_1 -->

                    </div>

                  </div> <!-- Día 1 -->

                  <div class="col-12 col-xl-6"> <!-- Día 2 -->
                    <div class="row g-4">
                      <div class="col-12">
                        <div class="fw-semibold mb-1">Día 2: selecciona fecha y lugar</div><span id="b1_2_span">&nbsp;</span>
                        <div class="text-muted small"></div>
                      </div>

                      <div class="col-12 col-md-6"> <!-- fecha_b1_2 -->
                        <label for="fecha_b1_2" class="form-label">Fecha</label>
                        <select class="form-select validar" id="fecha_b1_2" name="fecha_b1_2" required></select>
                        <div class="invalid-feedback">Por favor seleccione una fecha.</div>
                      </div> <!-- fecha_b1_2 -->

                      <div class="col-12 col-md-6"> <!-- lugar_b1_2 -->
                        <label for="lugar_b1_2" class="form-label">Lugar</label>
                        <select class="form-select validar" id="lugar_b1_2" name="lugar_b1_2" required>
                          <option value="">Seleccione un lugar…</option>
                          <option value="V">Capacitación Villagra</option>
                          <option value="A">Aguas Blancas</option>
                        </select>
                        <div class="invalid-feedback">Por favor seleccione un lugar.</div>
                      </div> <!-- lugar_b1_2 -->

                    </div>
                  </div> <!-- Día 2 -->

                  <div class="col-12 col-lg-4"> <!-- alojamiento_b1 -->
                    <label for="alojamiento_b1" class="form-label">Alojamiento</label>
                    <select class="form-select" id="alojamiento_b1" name="alojamiento_b1" required>
                      <option value="N" selected>No</option>
                      <option value="S">Si</option>
                    </select>
                    <div class="invalid-feedback">Por favor seleccione si necesita alojamiento.</div>
                  </div> <!-- alojamiento_b1 -->

                  <div class="col-12 col-lg-8" id="wrap_alojamiento_b1">
                    <div class="row g-4">

                      <div class="col-12 col-lg-6"> <!-- alojamiento_inicio_b1 -->
                        <label for="alojamiento_inicio_b1" class="form-label">Fecha inicio</label>
                        <input type="date" class="form-control bg-light" id="alojamiento_inicio_b1" name="alojamiento_inicio_b1">
                        <div class="invalid-feedback">Por favor seleccione la fecha.</div>
                      </div> <!-- alojamiento_inicio_b1 -->

                      <div class="col-12 col-lg-6"> <!-- alojamiento_fin_b1 -->
                        <label for="alojamiento_fin_b1" class="form-label">Fecha fin</label>
                        <input type="date" class="form-control bg-light" id="alojamiento_fin_b1" name="alojamiento_fin_b1">
                        <div class="invalid-feedback">Por favor seleccione la fecha.</div>
                      </div> <!-- alojamiento_fin_b1 -->

                    </div>
                  </div>

                </div> <!-- row -->
              </div>
            </div>
          </div> <!-- Bloque 1 -->

          <div class="accordion-item"> <!-- Bloque 2 -->

            <h2 class="accordion-header" id="headingB2">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseB2" aria-expanded="false" aria-controls="collapseB2">
                Inscripción al Bloque 2
              </button>
            </h2>

            <div id="collapseB2" class="accordion-collapse collapse"
              aria-labelledby="headingB2" data-bs-parent="#accordionCursos">
              <div class="accordion-body">
                <div class="row g-4"> <!-- row -->

                  <div class="col-12 col-xl-6"> <!-- Día 1 -->
                    <div class="row g-4">
                      <div class="col-12">
                        <div class="fw-semibold mb-1">Día 1: selecciona fecha y lugar</div><span id="b2_1_span">&nbsp;</span>
                      </div>

                      <div class="col-12 col-md-6">
                        <label for="fecha_b2_1" class="form-label">Fecha</label>
                        <select class="form-select validar" id="fecha_b2_1" name="fecha_b2_1" required></select>
                        <div class="invalid-feedback">Por favor seleccione una fecha.</div>
                      </div>

                      <div class="col-12 col-md-6">
                        <label for="lugar_b2_1" class="form-label">Lugar</label>
                        <select class="form-select validar" id="lugar_b2_1" name="lugar_b2_1" required>
                          <option value="">Seleccione un lugar…</option>
                          <option value="V">Capacitación Villagra</option>
                          <option value="A">Aguas Blancas</option>
                        </select>
                        <div class="invalid-feedback">Por favor seleccione un lugar.</div>
                      </div>

                    </div>
                  </div> <!-- Día 1 -->

                  <div class="col-12 col-xl-6"> <!-- Día 2 -->
                    <div class="row g-4">
                      <div class="col-12">
                        <div class="fw-semibold mb-1">Día 2: selecciona fecha y lugar</div><span id="b2_2_span">&nbsp;</span>
                      </div>

                      <div class="col-12 col-md-6">
                        <label for="fecha_b2_2" class="form-label">Fecha</label>
                        <select class="form-select validar" id="fecha_b2_2" name="fecha_b2_2" required></select>
                        <div class="invalid-feedback">Por favor seleccione una fecha.</div>
                      </div>

                      <div class="col-12 col-md-6">
                        <label for="lugar_b2_2" class="form-label">Lugar</label>
                        <select class="form-select validar" id="lugar_b2_2" name="lugar_b2_2" required>
                          <option value="">Seleccione un lugar…</option>
                          <option value="V">Capacitación Villagra</option>
                          <option value="A">Aguas Blancas</option>
                        </select>
                        <div class="invalid-feedback">Por favor seleccione un lugar.</div>
                      </div>
                    </div>
                  </div> <!-- Día 2 -->

                  <div class="col-12 col-lg-4"> <!-- alojamiento_b2 -->
                    <label for="alojamiento_b2" class="form-label">Alojamiento</label>
                    <select class="form-select" id="alojamiento_b2" name="alojamiento_b2" required>
                      <option value="N" selected>No</option>
                      <option value="S">Si</option>
                    </select>
                    <div class="invalid-feedback">Por favor seleccione si necesita alojamiento.</div>
                  </div> <!-- alojamiento_b2 -->

                  <div class="col-12 col-lg-8" id="wrap_alojamiento_b2">
                    <div class="row g-4">

                      <div class="col-12 col-lg-6"> <!-- alojamiento_inicio_b2 -->
                        <label for="alojamiento_inicio_b2" class="form-label">Fecha inicio</label>
                        <input type="date" class="form-control bg-light" id="alojamiento_inicio_b2" name="alojamiento_inicio_b2">
                        <div class="invalid-feedback">Por favor seleccione la fecha.</div>
                      </div> <!-- alojamiento_inicio_b2 -->

                      <div class="col-12 col-lg-6"> <!-- alojamiento_fin_b2 -->
                        <label for="alojamiento_fin_b2" class="form-label">Fecha fin</label>
                        <input type="date" class="form-control bg-light" id="alojamiento_fin_b2" name="alojamiento_fin_b2">
                        <div class="invalid-feedback">Por favor seleccione la fecha.</div>
                      </div> <!-- alojamiento_fin_b2 -->

                    </div>
                  </div>

                </div> <!-- row -->
              </div>
            </div>

          </div> <!-- Bloque 2 -->

          <div class="accordion-item"> <!-- Bloque 3 -->

            <h2 class="accordion-header" id="headingB3">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseB3" aria-expanded="false" aria-controls="collapseB3">
                Inscripción al Bloque 3
              </button>
            </h2>

            <div id="collapseB3" class="accordion-collapse collapse"
              aria-labelledby="headingB3" data-bs-parent="#accordionCursos">
              <div class="accordion-body">
                <div class="row g-4"> <!-- row -->

                  <div class="col-12 col-xl-6"> <!-- Día 1 -->
                    <div class="row g-4">
                      <div class="col-12">
                        <div class="fw-semibold mb-1">Día 1: Seleccioná fecha y lugar</div><span id="b3_1_span">&nbsp;</span>
                      </div>

                      <div class="col-12 col-md-6">
                        <label for="fecha_b3_1" class="form-label">Fecha</label>
                        <select class="form-select validar" id="fecha_b3_1" name="fecha_b3_1" required></select>
                        <div class="invalid-feedback">Por favor seleccione una fecha.</div>
                      </div>

                      <div class="col-12 col-md-6">
                        <label for="lugar_b3_1" class="form-label">Lugar</label>
                        <select class="form-select validar" id="lugar_b3_1" name="lugar_b3_1" required>
                          <option value="">Seleccione un lugar…</option>
                          <option value="V">Capacitación Villagra</option>
                          <option value="A">Aguas Blancas</option>
                        </select>
                        <div class="invalid-feedback">Por favor seleccione un lugar.</div>
                      </div>
                    </div>
                  </div> <!-- Día 1 -->

                  <div class="col-12 col-xl-6"> <!-- Día 2 -->
                    <div class="row g-4">
                      <div class="col-12">
                        <div class="fw-semibold mb-1">Día 2: selecciona fecha y lugar</div><span id="b3_2_span">&nbsp;</span>
                      </div>

                      <div class="col-12 col-md-6">
                        <label for="fecha_b3_2" class="form-label">Fecha</label>
                        <select class="form-select validar" id="fecha_b3_2" name="fecha_b3_2" required></select>
                        <div class="invalid-feedback">Por favor seleccione una fecha.</div>
                      </div>

                      <div class="col-12 col-md-6">
                        <label for="lugar_b3_2" class="form-label">Lugar</label>
                        <select class="form-select validar" id="lugar_b3_2" name="lugar_b3_2" required>
                          <option value="">Seleccione un lugar…</option>
                          <option value="V">Capacitación Villagra</option>
                          <option value="A">Aguas Blancas</option>
                        </select>
                        <div class="invalid-feedback">Por favor seleccione un lugar.</div>
                      </div>
                    </div>
                  </div> <!-- Día 2 -->

                  <div class="col-12 col-lg-4"> <!-- alojamiento_b3 -->
                    <label for="alojamiento_b3" class="form-label">Alojamiento</label>
                    <select class="form-select" id="alojamiento_b3" name="alojamiento_b3" required>
                      <option value="N" selected>No</option>
                      <option value="S">Si</option>
                    </select>
                    <div class="invalid-feedback">Por favor seleccione si necesita alojamiento.</div>
                  </div> <!-- alojamiento_b3 -->

                  <div class="col-12 col-lg-8" id="wrap_alojamiento_b3">
                    <div class="row g-4">

                      <div class="col-12 col-lg-6"> <!-- alojamiento_inicio_b3 -->
                        <label for="alojamiento_inicio_b3" class="form-label">Fecha inicio</label>
                        <input type="date" class="form-control bg-light" id="alojamiento_inicio_b3" name="alojamiento_inicio_b3">
                        <div class="invalid-feedback">Por favor seleccione la fecha.</div>
                      </div> <!-- alojamiento_inicio_b3 -->

                      <div class="col-12 col-lg-6"> <!-- alojamiento_fin_b3 -->
                        <label for="alojamiento_fin_b3" class="form-label">Fecha fin</label>
                        <input type="date" class="form-control bg-light" id="alojamiento_fin_b3" name="alojamiento_fin_b3">
                        <div class="invalid-feedback">Por favor seleccione la fecha.</div>
                      </div> <!-- alojamiento_fin_b3 -->

                    </div>
                  </div>

                </div> <!-- row -->
              </div>
            </div>
          </div> <!-- Bloque 3 -->

        </div> <!-- Accordion: Bridging Program + Bloques -->

        <div class="row mt-4"> <!-- Botón -->
          <div class="col-12 d-grid">
            <button type="button" class="btn btn-primary" id="btn-confirmar">Confirmar</button>
          </div>
        </div> <!-- Botón -->

      </form>


    </div>
  </div>

</div>

<?php
require __DIR__ . '/../partials/footer.php';
?>

<?php
$userId = $_SESSION['usuario']['id'] ?? $_SESSION['id'] ?? null; // ajustá según tu estructura real
?>

<!-- <script src="../js/cargar_datos.js"></script> -->
<!-- <script src="../js/convertir_form.js"></script> -->

<script>
  const USER_ID = <?= json_encode($userId) ?>;

  // Estado: por cada curso (bp, b1_1, b1_2, etc) guardo si tiene cupo
  const cuposOkPorCurso = {}; // { "bp": true/false, "b1_1": true/false, ... }

  function setCupoEstado(curso, ok, mensaje) {
    cuposOkPorCurso[curso] = !!ok;

    const campoFecha = "fecha_" + curso;
    const campoLugar = "lugar_" + curso;

    const $fecha = $("#" + campoFecha);
    const $lugar = $("#" + campoLugar);

    const valorFecha = $fecha.val() ?? "";
    const valorLugar = $lugar.val() ?? "";

    if (valorFecha === "" || valorLugar === "") {
      $fecha[0].setCustomValidity("");
      $lugar[0].setCustomValidity("");
      return;
    }

    if (ok) {
      $fecha[0].setCustomValidity("");
      $lugar[0].setCustomValidity("");
    } else {
      const msg = mensaje || "Sin cupos disponibles para esta fecha y lugar.";
      $fecha[0].setCustomValidity(msg);
      $lugar[0].setCustomValidity(msg);
    }
  }

  function cargarFechas(campo) {
    return $.ajax({
        url: "../ajax/fechas.ajax.php",
        type: "POST",
        dataType: "json",
        data: {
          campo: campo.replace(/^fecha_/, "")
        }
      })
      .done(function(respuesta) {
        const $sel = $("#" + campo);

        $sel.empty();
        $sel.append(new Option("Seleccione una opción…", ""));

        (respuesta || []).forEach(function(item) {
          $sel.append(new Option(item.fecha, item.fecha));
        });
      });
  }

  function cargarDatosUsuario(id) {
    return $.ajax({
      url: "../ajax/usuarios.ajax.php",
      type: "POST",
      dataType: "json",
      data: {
        accion: "DATOS-CURSO",
        id: id
      }
    }).done(function(resp) {
      const data = Array.isArray(resp) ? (resp[0] || {}) : (resp || {});

      debugger;

      // Inputs readonly
      $("#nombre").val((data.nombre || "").trim());
      $("#departamento").val((data.departamento || "").trim());

      // Selects (si vienen con esos nombres)
      $("#fecha_bp").val(data.fecha_bp ?? "").trigger("change");
      $("#lugar_bp").val(data.lugar_bp ?? "").trigger("change");
      $("#alojamiento_bp").val(data.alojamiento_bp ?? "N").trigger("change");
      $("#alojamiento_inicio_bp").val(data.alojamiento_inicio_bp ?? "");
      $("#alojamiento_fin_bp").val(data.alojamiento_fin_bp ?? "");

      $("#fecha_b1_1").val(data.fecha_b1_1 ?? "").trigger("change");
      $("#lugar_b1_1").val(data.lugar_b1_1 ?? "").trigger("change");
      $("#fecha_b1_2").val(data.fecha_b1_2 ?? "").trigger("change");
      $("#lugar_b1_2").val(data.lugar_b1_2 ?? "").trigger("change");
      $("#alojamiento_b1").val(data.alojamiento_b1 ?? "N").trigger("change");
      $("#alojamiento_inicio_b1").val(data.alojamiento_inicio_b1 ?? "");
      $("#alojamiento_fin_b1").val(data.alojamiento_fin_b1 ?? "");

      $("#fecha_b2_1").val(data.fecha_b2_1 ?? "").trigger("change");
      $("#lugar_b2_1").val(data.lugar_b2_1 ?? "").trigger("change");
      $("#fecha_b2_2").val(data.fecha_b2_2 ?? "").trigger("change");
      $("#lugar_b2_2").val(data.lugar_b2_2 ?? "").trigger("change");
      $("#alojamiento_b2").val(data.alojamiento_b2 ?? "N").trigger("change");
      $("#alojamiento_inicio_b2").val(data.alojamiento_inicio_b2 ?? "");
      $("#alojamiento_fin_b2").val(data.alojamiento_fin_b2 ?? "");

      $("#fecha_b3_1").val(data.fecha_b3_1 ?? "").trigger("change");
      $("#lugar_b3_1").val(data.lugar_b3_1 ?? "").trigger("change");
      $("#fecha_b3_2").val(data.fecha_b3_2 ?? "").trigger("change");
      $("#lugar_b3_2").val(data.lugar_b3_2 ?? "").trigger("change");
      $("#alojamiento_b3").val(data.alojamiento_b3 ?? "N").trigger("change");
      $("#alojamiento_inicio_b3").val(data.alojamiento_inicio_b3 ?? "");
      $("#alojamiento_fin_b3").val(data.alojamiento_fin_b3 ?? "");

      $("#comida").val(data.comida ?? "");
      $("#id").val(data.id ?? "");
    });
  }

  function getPayloadInscripcion() {
    const payload = {
      accion: "GUARDAR-DATOS-CURSO",
      id: $("#id").val(),

      fecha_bp: $("#fecha_bp").val(),
      lugar_bp: $("#lugar_bp").val(),
      alojamiento_bp: $("#alojamiento_bp").val(),

      fecha_b1_1: $("#fecha_b1_1").val(),
      lugar_b1_1: $("#lugar_b1_1").val(),
      fecha_b1_2: $("#fecha_b1_2").val(),
      lugar_b1_2: $("#lugar_b1_2").val(),
      alojamiento_b1: $("#alojamiento_b1").val(),

      fecha_b2_1: $("#fecha_b2_1").val(),
      lugar_b2_1: $("#lugar_b2_1").val(),
      fecha_b2_2: $("#fecha_b2_2").val(),
      lugar_b2_2: $("#lugar_b2_2").val(),
      alojamiento_b2: $("#alojamiento_b2").val(),

      fecha_b3_1: $("#fecha_b3_1").val(),
      lugar_b3_1: $("#lugar_b3_1").val(),
      fecha_b3_2: $("#fecha_b3_2").val(),
      lugar_b3_2: $("#lugar_b3_2").val(),
      alojamiento_b3: $("#alojamiento_b3").val(),

      comida: $("#comida").val()
    };

    // Helper: si pide alojamiento => manda fechas; si no => manda null (para borrar en BD)
    function aplicarAlojamiento(curso) {
      const a = ($("#alojamiento_" + curso).val() ?? "N");

      if (a === "S") {
        payload["alojamiento_inicio_" + curso] = $("#alojamiento_inicio_" + curso).val() || null;
        payload["alojamiento_fin_" + curso] = $("#alojamiento_fin_" + curso).val() || null;
      } else {
        payload["alojamiento_inicio_" + curso] = null;
        payload["alojamiento_fin_" + curso] = null;
      }
    }

    ["bp", "b1", "b2", "b3"].forEach(aplicarAlojamiento);

    return payload;
  }

  function guardarInscripcion() {
    const payload = getPayloadInscripcion();

    return $.ajax({
      url: "../ajax/usuarios.ajax.php",
      type: "POST",
      dataType: "json",
      data: payload // 👈 así vuelve a poblar $_POST
    });
  }


  $(function() {

    if (!USER_ID) {
      SwalUI.error("No se pudo identificar el usuario. Cerrá sesión e ingresá nuevamente.");
      $("#btn-confirmar").prop("disabled", true);
      return;
    }

    function toggleAlojamiento(curso) {
      const val = ($("#alojamiento_" + curso).val() ?? "N");
      const mostrar = (val === "S");

      const $wrap = $("#wrap_alojamiento_" + curso);
      const $ini = $("#alojamiento_inicio_" + curso);
      const $fin = $("#alojamiento_fin_" + curso);

      // show/hide del bloque completo
      $wrap.toggleClass("d-none", !mostrar);

      if (mostrar) {
        // si pedís alojamiento, obligo fechas
        $ini.prop("required", true);
        $fin.prop("required", true);
      } else {
        // si no, limpio y saco requeridos
        $ini.prop("required", false).val("");
        $fin.prop("required", false).val("");

        // limpio errores HTML5
        if ($ini[0]) $ini[0].setCustomValidity("");
        if ($fin[0]) $fin[0].setCustomValidity("");
      }
    }


    const p1 = cargarFechas("fecha_bp");
    const p2 = cargarFechas("fecha_b1_1");
    const p3 = cargarFechas("fecha_b1_2");
    const p4 = cargarFechas("fecha_b2_1");
    const p5 = cargarFechas("fecha_b2_2");
    const p6 = cargarFechas("fecha_b3_1");
    const p7 = cargarFechas("fecha_b3_2");

    $.when(p1, p2, p3, p4, p5, p6, p7)
      .done(function() {
        cargarDatosUsuario(USER_ID);
      })
      .fail(function() {
        SwalUI.error("No se pudieron cargar las fechas disponibles. Reintentá en unos segundos.");
        $("#btn-confirmar").prop("disabled", true);
      });

    ["bp", "b1", "b2", "b3"].forEach(toggleAlojamiento);

    // Cambios en selects de alojamiento
    $(document).on("change", "#alojamiento_bp, #alojamiento_b1, #alojamiento_b2, #alojamiento_b3", function() {
      const curso = this.id.replace(/^alojamiento_/, ""); // bp, b1, b2, b3
      toggleAlojamiento(curso);
    });


    $("#btn-confirmar").on("click", function() {
      const form = document.getElementById("form-inscripcion");
      if (!form.checkValidity()) {
        form.classList.add("was-validated");
        SwalUI.warn("Completá todas las fechas y lugares antes de confirmar.");
        return;
      }
      const cursosSinCupo = Object.keys(cuposOkPorCurso).filter(c => cuposOkPorCurso[c] === false);

      if (cursosSinCupo.length > 0) {
        form.classList.add("was-validated");
        SwalUI.warn("Hay selecciones sin cupos disponibles. Cambiá la fecha/lugar antes de confirmar.");
        return;
      }
      form.classList.add("was-validated");

      const $btn = $(this);
      $btn.prop("disabled", true);

      guardarInscripcion()
        .done(function(resp) {
          if (resp && resp.respuesta === "OK") {
            SwalUI.ok("Reserva registrada. Va a recibir un correo con los detalles.");
          } else {
            SwalUI.error(SwalUI.getErrorMessage(resp));
          }
        })
        .fail(function() {
          SwalUI.error("Error de comunicación con el servidor.");
        })
        .always(function() {
          $btn.prop("disabled", false);
        });
    });

    $(document).on("change", ".validar", function() {
      procesoValidarCambiado(this);
    });

    function procesoValidarCambiado(el) {
      const $el = $(el);
      const id = $el.attr("id") || ""; // ej: "fecha_bp" o "lugar_bp"

      // 1) curso a partir del id
      const curso = id.replace(/^fecha_/, "").replace(/^lugar_/, ""); // ej: "bp"

      // 2) IDs de los campos que necesito para validar el cupo
      const campoFecha = "fecha_" + curso; // ej: "fecha_bp"
      const campoLugar = "lugar_" + curso; // ej: "lugar_bp"

      // 3) Valores actuales de ambos campos
      const valorFecha = $("#" + campoFecha).val() ?? "";
      const valorLugar = $("#" + campoLugar).val() ?? "";

      // Ejemplo
      // console.log("Cambió:", id);
      // console.log("Para validar necesito:", campoFecha, "y", campoLugar);
      // console.log("Y sus valores son:", valorFecha, "y", valorLugar);
      if (valorFecha !== "" && valorLugar !== "") {
        const payload = {
          accion: "VALIDAR-CUPO",
          id_persona: USER_ID,
          campoFecha: campoFecha,
          campoLugar: campoLugar,
          valorFecha: valorFecha,
          valorLugar: valorLugar
        };

        $.ajax({
            url: "../ajax/fechas.ajax.php",
            type: "POST",
            dataType: "json",
            data: payload
          })
          .done(function(resp) {
            const spanId = "#" + curso + "_span";

            if (!resp || resp.ok !== true) {
              $(spanId).html('<span class="text-danger">No se pudo validar cupos.</span>');
              // Si no pude validar, por seguridad lo marco inválido
              setCupoEstado(curso, false, "No se pudo validar cupos. Intente nuevamente.");
              return;
            }

            const libres = resp.libres ?? 0;
            const capacidad = resp.capacidad ?? 20;

            if (libres <= 0) {
              $(spanId).html('<span class="text-danger fw-semibold">Sin cupos disponibles.</span>');
              setCupoEstado(curso, false, "Sin cupos disponibles para esta fecha y lugar.");
            } else {
              $(spanId).html(
                '<span class="text-success fw-semibold">Cupos disponibles: ' +
                libres + ' / ' + capacidad +
                '</span>'
              );
              setCupoEstado(curso, true);
            }
          })
          .fail(function(xhr, textStatus, errorThrown) {
            const spanId = "#" + curso + "_span";
            $(spanId).html('<span class="text-danger">No se pudo validar cupos.</span>');
            setCupoEstado(curso, false, "No se pudo validar cupos. Intente nuevamente.");

            console.log("VALIDAR-CUPO FAIL", textStatus, errorThrown);
            console.log("STATUS", xhr.status);
            console.log("RESPONSE", xhr.responseText);
          });
      }
    }



  });
</script>