<?php
/** @var array $reloj */
/** @var array $filas */
/** @var array $resumen */
/** @var string|null $err */
/** @var string|null $msg */
?>
<?php include __DIR__ . '/../header.php'; ?>

<style>
  :root{
    --brand-blue:#0d6efd;
    --brand-blue-2:#0b5ed7;
    --brand-ink:#0b1220;
    --ok:#198754;
    --warn:#f59f00;
    --danger:#dc3545;
    --muted:#6c757d;
  }

  .card-pro{
    border-radius:18px;
    border:1px solid rgba(0,0,0,.06);
    background:#fff;
    box-shadow:0 8px 22px rgba(0,0,0,.04);
  }

  .chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:999px;
    font-size:.85rem;
    border:1px solid rgba(0,0,0,.08);
    background:#fff;
  }

  .soft-table{
    border-radius:16px;
    overflow:hidden;
    border:1px solid rgba(0,0,0,.06);
  }

  .soft-table thead th{
    background:#f8f9fa;
    font-size:.85rem;
    color:#6c757d;
    font-weight:900;
    letter-spacing:.2px;
    white-space:nowrap;
  }

  .row-ok-sistema{ background: rgba(25,135,84,.06); }
  .row-ok-guardado{ background: rgba(13,110,253,.06); }
  .row-pendiente{ background: rgba(255,193,7,.08); }
  .row-solo-reloj{ background: rgba(220,53,69,.04); }

  .badge-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    padding:5px 10px;
    font-size:.78rem;
    font-weight:800;
  }

  .badge-soft-ok{
    background:rgba(25,135,84,.14);
    color:var(--ok);
  }

  .badge-soft-warn{
    background:rgba(245,159,0,.16);
    color:#8a5a00;
  }

  .badge-soft-blue{
    background:rgba(13,110,253,.14);
    color:var(--brand-blue);
  }

  .badge-soft-muted{
    background:rgba(108,117,125,.14);
    color:#495057;
  }

  .search-sticky{
    position:sticky;
    top:70px;
    z-index:3;
    background:#fff;
  }

  .row-hidden{
    display:none !important;
  }

  .mini{
    font-size:.86rem;
    color:var(--muted);
  }

  .section-title{
    font-weight:900;
    letter-spacing:-.2px;
    color:var(--brand-ink);
  }
</style>

<div class="d-flex justify-content-between align-items-start flex-wrap gap-2 mb-3">
  <div>
    <h1 class="h5 mb-1">Sincronizar nómina del reloj</h1>
    <div class="text-muted small">
      Reloj: <strong><?= h($reloj['nombre'] ?? ('#' . ($reloj['id'] ?? ''))) ?></strong>
    </div>
  </div>
  <div class="d-flex gap-2 flex-wrap">
    <a class="btn btn-outline-secondary btn-sm" href="/Comercio/public/dashboard.php">
      Volver
    </a>
  </div>
</div>

<?php if (!empty($err)): ?>
  <div class="alert alert-danger"><?= h($err) ?></div>
<?php endif; ?>

<?php if (!empty($msg)): ?>
  <div class="alert alert-info"><?= h($msg) ?></div>
<?php endif; ?>

<div class="card-pro p-3 mb-3">
  <div class="d-flex flex-wrap gap-2">
    <span class="chip">Total en reloj: <b><?= (int)($resumen['total_reloj'] ?? 0) ?></b></span>
    <span class="chip">Coinciden con estudiantes: <b><?= (int)($resumen['coinciden_estudiantes'] ?? 0) ?></b></span>
    <span class="chip">Ya sincronizados: <b><?= (int)($resumen['ya_sincronizados'] ?? 0) ?></b></span>
    <span class="chip">Pendientes en nómina local: <b id="countPendientes"><?= (int)($resumen['pendientes_sincronizar'] ?? 0) ?></b></span>
    <span class="chip">Solo en reloj: <b id="countSoloReloj"><?= (int)($resumen['solo_en_reloj'] ?? 0) ?></b></span>
    <span class="chip">Sin identificador: <b><?= (int)($resumen['sin_ci'] ?? 0) ?></b></span>
  </div>

  <div class="small text-muted mt-2">
    Se compara <b>device_user_id</b> del reloj con <b>ci</b> de estudiantes.
    Podés crear estudiantes desde el reloj o cargarlos manualmente con cédula.
  </div>
</div>

<div class="row g-3 mb-3">
  <div class="col-12 col-xl-4">
    <div class="card-pro p-3 h-100">
      <div class="section-title mb-2">Nuevo estudiante manual</div>
      <div class="mini mb-3">
        Cargá cédula, nombres y apellidos para guardar directamente en <b>estudiantes</b>.
      </div>

      <form method="post">
        <input type="hidden" name="csrf" value="<?= h(csrf_token()) ?>">
        <input type="hidden" name="action" value="crear_estudiante_manual">
        <input type="hidden" name="reloj_id" value="<?= (int)($reloj['id'] ?? 0) ?>">

        <div class="mb-2">
          <label class="form-label fw-semibold">Cédula</label>
          <input type="text" class="form-control" name="ci" placeholder="Ej: 1234567" required>
        </div>

        <div class="mb-2">
          <label class="form-label fw-semibold">Nombres</label>
          <input type="text" class="form-control" name="nombres" placeholder="Ej: Juan Carlos" required>
        </div>

        <div class="mb-3">
          <label class="form-label fw-semibold">Apellidos</label>
          <input type="text" class="form-control" name="apellidos" placeholder="Ej: Gómez Benítez">
        </div>

        <div class="d-grid">
          <button class="btn btn-primary" type="submit">
            Crear estudiante en sistema
          </button>
        </div>
      </form>
    </div>
  </div>

  <div class="col-12 col-xl-8">
    <div class="card-pro p-3 h-100">
      <div class="section-title mb-2">Acciones masivas</div>
      <div class="mini mb-3">
        Trabajá sobre la nómina descargada del reloj y decidí si querés guardarla en <b>reloj_nomina</b>, crear estudiantes o preparar el envío al reloj.
      </div>

      <div class="row g-2">
        <div class="col-12 col-md-4">
          <form method="post" id="frmSyncNomina">
            <input type="hidden" name="csrf" value="<?= h(csrf_token()) ?>">
            <input type="hidden" name="action" value="guardar_seleccionados">
            <input type="hidden" name="reloj_id" value="<?= (int)($reloj['id'] ?? 0) ?>">
            <div class="d-grid">
              <button class="btn btn-outline-primary" type="submit" id="btnSyncNomina">
                Guardar seleccionados en nómina local
              </button>
            </div>
          </form>
        </div>

        <div class="col-12 col-md-4">
          <form method="post" id="frmCrearSistema">
            <input type="hidden" name="csrf" value="<?= h(csrf_token()) ?>">
            <input type="hidden" name="action" value="crear_estudiantes_desde_reloj">
            <input type="hidden" name="reloj_id" value="<?= (int)($reloj['id'] ?? 0) ?>">
            <div class="d-grid">
              <button class="btn btn-outline-success" type="submit" id="btnCrearSistema">
                Crear seleccionados en estudiantes
              </button>
            </div>
          </form>
        </div>

        <div class="col-12 col-md-4">
          <form method="post">
            <input type="hidden" name="csrf" value="<?= h(csrf_token()) ?>">
            <input type="hidden" name="action" value="enviar_nuevo_al_reloj">
            <input type="hidden" name="reloj_id" value="<?= (int)($reloj['id'] ?? 0) ?>">
            <div class="d-grid">
              <button class="btn btn-outline-secondary" type="submit">
                Preparar envío al reloj
              </button>
            </div>
          </form>
        </div>
      </div>

      <div class="mini mt-3">
        En el siguiente paso conectaremos el botón de envío al reloj para que, al crear un nombre nuevo con cédula, también pueda subirse al dispositivo.
      </div>
    </div>
  </div>
</div>

<div class="card-pro p-3 mb-3 search-sticky">
  <div class="row g-2 align-items-end">
    <div class="col-12 col-lg-8">
      <label class="form-label fw-semibold">Búsqueda por coincidencia</label>
      <input
        type="text"
        id="liveSearchNomina"
        class="form-control"
        placeholder="Buscar por cédula, nombre del reloj, nombre del estudiante, empleado no, estado..."
      >
      <div class="mini mt-1">
        Filtra en vivo por coincidencias parciales.
      </div>
    </div>

    <div class="col-12 col-lg-4 d-flex gap-2">
      <button type="button" class="btn btn-outline-secondary w-100" id="btnLimpiarBusquedaNomina">
        Limpiar búsqueda
      </button>
    </div>
  </div>
</div>

<div class="card-pro p-3">
  <?php if (empty($filas)): ?>
    <div class="text-muted">No se encontró nómina en el reloj.</div>
  <?php else: ?>
    <div class="d-flex justify-content-between align-items-center mb-2 flex-wrap gap-2">
      <div class="section-title">Comparación reloj ↔ sistema</div>
      <label class="small">
        <input type="checkbox" id="chkAllVisible" class="form-check-input me-1">
        Seleccionar visibles pendientes
      </label>
    </div>

    <div class="soft-table table-responsive" style="max-height:75vh;">
      <table class="table table-sm align-middle mb-0">
        <thead class="sticky-top">
          <tr>
            <th style="width:42px;"></th>
            <th>Device User ID</th>
            <th>Nombre reloj</th>
            <th>Empleado No</th>
            <th>Coincidencia en estudiantes</th>
            <th>Estado nómina local</th>
            <th>Crear en sistema</th>
          </tr>
        </thead>
        <tbody id="tbodyNominaCompare">
          <?php foreach ($filas as $f): ?>
            <?php
              $rowClass = '';
              if (!empty($f['ya_sincronizado'])) {
                $rowClass = 'row-ok-guardado';
              } elseif (!empty($f['sincronizable'])) {
                $rowClass = 'row-pendiente';
              } elseif (!empty($f['existe_en_sistema'])) {
                $rowClass = 'row-ok-sistema';
              } else {
                $rowClass = 'row-solo-reloj';
              }
            ?>
            <tr
              class="<?= h($rowClass) ?> row-buscable-nomina"
              data-search="<?= h($f['search_index'] ?? '') ?>"
              data-solo-reloj="<?= !empty($f['puede_crear_estudiante']) ? '1' : '0' ?>"
              data-pendiente="<?= !empty($f['sincronizable']) ? '1' : '0' ?>"
            >
              <td class="text-center">
                <?php if (!empty($f['sincronizable'])): ?>
                  <input
                    type="checkbox"
                    class="form-check-input chkPendiente chkSyncNomina"
                    name="sincronizar[]"
                    form="frmSyncNomina"
                    value="<?= h($f['device_user_id']) ?>"
                    checked
                  >
                <?php endif; ?>
              </td>

              <td class="fw-semibold"><?= h($f['device_user_id'] ?: '-') ?></td>
              <td><?= h($f['nombre'] ?: '-') ?></td>
              <td><?= h($f['empleado_no'] ?: '-') ?></td>

              <td>
                <?php if (!empty($f['existe_en_sistema'])): ?>
                  <div class="badge-pill badge-soft-ok">Sí coincide</div>
                  <div class="small text-muted mt-1">
                    <?= h(trim(($f['estudiante']['apellidos'] ?? '') . ' ' . ($f['estudiante']['nombres'] ?? ''))) ?>
                    <br>
                    CI: <?= h($f['estudiante']['ci'] ?? '-') ?>
                  </div>
                <?php else: ?>
                  <div class="badge-pill badge-soft-warn">Solo en reloj</div>
                  <div class="small text-muted mt-1">
                    No existe aún en <b>estudiantes</b>.
                  </div>
                <?php endif; ?>
              </td>

              <td>
                <?php if (!empty($f['ya_sincronizado'])): ?>
                  <div class="badge-pill badge-soft-blue">Ya sincronizado</div>
                  <div class="small text-muted mt-1">
                    ID local: <?= h($f['guardado_nomina']['id'] ?? '-') ?>
                    <br>
                    Actualizado: <?= h($f['guardado_nomina']['actualizado_en'] ?? '-') ?>
                  </div>
                <?php elseif (!empty($f['sincronizable'])): ?>
                  <div class="badge-pill badge-soft-warn">Pendiente</div>
                  <div class="small text-muted mt-1">
                    Todavía no está en <b>reloj_nomina</b>.
                  </div>
                <?php else: ?>
                  <div class="badge-pill badge-soft-muted">Sin acción</div>
                <?php endif; ?>
              </td>

              <td>
                <?php if (!empty($f['puede_crear_estudiante'])): ?>
                  <label class="small d-flex align-items-center gap-2">
                    <input
                      type="checkbox"
                      class="form-check-input chkCrearSistema"
                      name="crear_en_sistema[]"
                      form="frmCrearSistema"
                      value="<?= h($f['device_user_id']) ?>"
                    >
                    Crear en estudiantes
                  </label>
                <?php else: ?>
                  <span class="mini">Ya existe</span>
                <?php endif; ?>
              </td>
            </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
    </div>

    <div class="mini mt-3">
      Sugerencia: primero guardá los pendientes en <b>reloj_nomina</b>, luego creá en <b>estudiantes</b> los que aparecen como <b>Solo en reloj</b>.
    </div>

    <script>
      (function () {
        const search = document.getElementById('liveSearchNomina');
        const btnLimpiar = document.getElementById('btnLimpiarBusquedaNomina');
        const chkAllVisible = document.getElementById('chkAllVisible');

        function normalize(str) {
          return (str || '')
            .toString()
            .toLowerCase()
            .normalize('NFD')
            .replace(/[\u0300-\u036f]/g, '')
            .trim();
        }

        function updateCounters() {
          const rows = Array.from(document.querySelectorAll('.row-buscable-nomina:not(.row-hidden)'));
          const pendientes = rows.filter(r => r.dataset.pendiente === '1').length;
          const soloReloj = rows.filter(r => r.dataset.solo-reloj === '1').length;

          const countPendientes = document.getElementById('countPendientes');
          const countSoloReloj = document.getElementById('countSoloReloj');

          if (countPendientes) countPendientes.textContent = String(pendientes);
          if (countSoloReloj) countSoloReloj.textContent = String(soloReloj);
        }

        function filterRows() {
          const q = normalize(search ? search.value : '');
          const rows = Array.from(document.querySelectorAll('.row-buscable-nomina'));

          rows.forEach(row => {
            const text = normalize(row.getAttribute('data-search') || '');
            const visible = q === '' || text.includes(q);
            row.classList.toggle('row-hidden', !visible);
          });

          if (chkAllVisible) {
            chkAllVisible.checked = false;
          }

          updateCounters();
        }

        if (search) {
          search.addEventListener('input', filterRows);
        }

        if (btnLimpiar) {
          btnLimpiar.addEventListener('click', function () {
            if (search) {
              search.value = '';
              filterRows();
              search.focus();
            }
          });
        }

        if (chkAllVisible) {
          chkAllVisible.addEventListener('change', function () {
            const visiblesSync = Array.from(document.querySelectorAll('.row-buscable-nomina:not(.row-hidden) .chkSyncNomina'));
            const visiblesCrear = Array.from(document.querySelectorAll('.row-buscable-nomina:not(.row-hidden) .chkCrearSistema'));

            visiblesSync.forEach(ch => ch.checked = chkAllVisible.checked);
            visiblesCrear.forEach(ch => ch.checked = chkAllVisible.checked);
          });
        }

        filterRows();
      })();
    </script>
  <?php endif; ?>
</div>

<?php include __DIR__ . '/../footer.php'; ?>