<?php
// modules/estudiante/mi_ficha_ppp.php
// El estudiante ve su ficha PPP, la descarga/imprime y sube la versión firmada
require_once __DIR__ . '/../../config/app.php';
require_once __DIR__ . '/../../includes/auth.php';
require_once __DIR__ . '/../../includes/functions.php';
require_once __DIR__ . '/../../includes/flash.php';
requireRol(ROL_ESTUDIANTE);

$user = currentUser();
$db   = getDB();
$pageTitle = 'Mi Ficha PPP';

// ── Obtener id_estudiante ────────────────────────────────────────────────────
$stEst = $db->prepare("SELECT id_estudiante FROM estudiantes WHERE id_usuario = :u LIMIT 1");
$stEst->execute([':u' => $user['id_usuario'] ?? $user['id'] ?? 0]);
$estRow = $stEst->fetch();
$idEst  = (int)($estRow['id_estudiante'] ?? 0);

// ── Obtener TODAS las prácticas del estudiante con datos de ficha ─────────────
$practicas = [];
if ($idEst) {
    $st = $db->prepare("
        SELECT pr.id_practica, pr.fecha_inicio, pr.fecha_fin, pr.estado,
               pr.horas_requeridas, pr.horas_cumplidas,
               pr.ficha_estado, pr.ficha_doc_est, pr.ficha_doc_final,
               pr.ficha_enviada_at,
               em.razon_social AS empresa,
               c.nombre AS carrera
        FROM   practicas pr
        JOIN   empresas em ON em.id_empresa = pr.id_empresa
        JOIN   estudiantes e ON e.id_estudiante = pr.id_estudiante
        JOIN   carreras c ON c.id_carrera = e.id_carrera
        WHERE  pr.id_estudiante = :id
        ORDER BY pr.fecha_inicio DESC
    ");
    $st->execute([':id' => $idEst]);
    $practicas = $st->fetchAll();
}

// ── Helper badge estado ficha ────────────────────────────────────────────────
function badgeFichaEst(string $estado): string {
    return match($estado) {
        'enviada'       => '<span class="badge-ficha badge-enviada">📤 Lista para descargar y firmar</span>',
        'firmada_est'   => '<span class="badge-ficha badge-firmada-est">⏳ Enviada — esperando firma de coordinador</span>',
        'firmada_final' => '<span class="badge-ficha badge-ok">✅ Firmada y completa — ¡Descárgala!</span>',
        default         => '<span class="badge-ficha badge-none">🔒 Pendiente — el coordinador aún no la habilitó</span>',
    };
}
?>
<?php $paginaActual = 'mi_ficha_ppp'; ?>
<!DOCTYPE html>
<html lang="es">
<head>
  <?php include __DIR__ . '/../../includes/head.php'; ?>
  <link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/sidebar.css">
  <link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/sidebar-estudiante.css">
  <style>
    /* ── Badges ── */
    .badge-ficha{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;
      border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap;}
    .badge-none    {background:#f3f4f6;color:#6b7280;border:1px solid #e5e7eb;}
    .badge-enviada {background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;}
    .badge-firmada-est{background:#fefce8;color:#a16207;border:1px solid #fde68a;}
    .badge-ok      {background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0;}

    /* ── Tarjeta de práctica ── */
    .ficha-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;
      padding:0;margin-bottom:20px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06);}
    .ficha-card-header{padding:14px 20px;background:#f8fafc;border-bottom:1px solid #e5e7eb;
      display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
    .ficha-card-body{padding:20px;}

    /* ── Pasos ── */
    .steps-row{display:flex;gap:0;margin-bottom:20px;border-radius:10px;overflow:hidden;
      border:1px solid #e5e7eb;}
    .step{flex:1;padding:10px 14px;text-align:center;font-size:11px;font-weight:600;
      background:#f9fafb;color:#9ca3af;border-right:1px solid #e5e7eb;position:relative;}
    .step:last-child{border-right:none;}
    .step.active{background:#eff6ff;color:#1d4ed8;}
    .step.done  {background:#f0fdf4;color:#15803d;}
    .step-num{display:block;font-size:16px;margin-bottom:2px;}

    /* ── Botones acción ── */
    .btn-descargar{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5;
      font-size:12px;padding:8px 16px;border-radius:8px;font-weight:700;
      text-decoration:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;}
    .btn-descargar:hover{background:#fca5a5;color:#7f1d1d;}
    .btn-subir{background:#dbeafe;color:#1e40af;border:1px solid #93c5fd;
      font-size:12px;padding:8px 16px;border-radius:8px;font-weight:700;
      display:inline-flex;align-items:center;gap:6px;cursor:pointer;}
    .btn-subir:hover{background:#bfdbfe;}
    .btn-final{background:#d1fae5;color:#065f46;border:1px solid #6ee7b7;
      font-size:12px;padding:8px 16px;border-radius:8px;font-weight:700;
      text-decoration:none;display:inline-flex;align-items:center;gap:6px;}
    .btn-final:hover{background:#a7f3d0;color:#065f46;}

    /* ── Upload zone ── */
    .upload-zone{border:2px dashed #93c5fd;border-radius:10px;padding:20px;
      text-align:center;background:#f8fbff;margin-top:12px;transition:.2s;}
    .upload-zone:hover{border-color:#3b82f6;background:#eff6ff;}
    .upload-zone input[type=file]{display:none;}
    .upload-label{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
      font-size:13px;font-weight:600;color:#1e40af;padding:8px 20px;
      background:#dbeafe;border-radius:8px;border:1px solid #93c5fd;}
    .upload-label:hover{background:#bfdbfe;}
    #nombreArchivo{font-size:12px;color:#6b7280;margin-top:8px;display:block;}

    /* ── Info box ── */
    .info-box{background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;
      padding:14px 16px;font-size:12px;color:#1e40af;margin-bottom:20px;}
    .info-box strong{color:#1d4ed8;}

    /* ── Estado pendiente ── */
    .estado-pendiente{text-align:center;padding:30px;color:#9ca3af;}
    .estado-pendiente i{font-size:36px;margin-bottom:10px;display:block;color:#d1d5db;}
  </style>
</head>

<body>
<?php include __DIR__ . '/../../includes/navbar.php'; ?>

<div class="app-shell">
  <?php include __DIR__ . '/../../includes/sidebar-estudiante.php'; ?>

  <main class="main-area">

    <div class="page-header d-flex justify-content-between align-items-center flex-wrap gap-2 mb-4">
      <div>
        <h4 class="mb-1">
          <i class="fa fa-file-pdf me-2" style="color:#ef4444;"></i>Mi Ficha de Prácticas PPP
        </h4>
        <p class="text-muted mb-0" style="font-size:13px;">
          Descarga tu ficha, imprímela, fírmala, escanéala y súbela aquí.
        </p>
      </div>
    </div>

    <?= flashHtml() ?>

    <!-- ── GUÍA DE PASOS ──────────────────────────────────────────────── -->
    <div class="info-box mb-4">
      <i class="fa fa-circle-info me-2"></i>
      <strong>¿Cómo firmar tu ficha?</strong>
      <strong>①</strong> Descarga el PDF →
      <strong>②</strong> Imprímelo y fírmalo a mano →
      <strong>③</strong> Escanéalo o fotografíalo →
      <strong>④</strong> Súbelo aquí en formato PDF, JPG o PNG →
      <strong>⑤</strong> El coordinador agrega la firma final ✅
    </div>

    <?php if (empty($practicas)): ?>
      <!-- Sin prácticas -->
      <div class="ficha-card">
        <div class="estado-pendiente">
          <i class="fa fa-folder-open"></i>
          <p class="mb-0">No tienes prácticas registradas aún.</p>
        </div>
      </div>

    <?php else: ?>
      <?php foreach ($practicas as $p):
        $fe     = $p['ficha_estado'] ?? 'no_enviada';
        $idPrac = $p['id_practica'];

        // Determinar paso activo
        $paso1 = in_array($fe, ['no_enviada']);
        $paso2 = in_array($fe, ['enviada']);
        $paso3 = in_array($fe, ['firmada_est']);
        $paso4 = in_array($fe, ['firmada_final']);
      ?>
      <div class="ficha-card">

        <!-- Cabecera tarjeta -->
        <div class="ficha-card-header">
          <div>
            <span style="font-size:13px;font-weight:700;color:#1e293b;">
              <i class="fa fa-building me-1" style="color:#6366f1;"></i>
              <?= htmlspecialchars($p['empresa']) ?>
            </span>
            <span style="font-size:11px;color:#9ca3af;margin-left:10px;">
              Práctica #<?= $idPrac ?> · <?= htmlspecialchars($p['carrera']) ?>
            </span>
          </div>
          <div class="d-flex align-items-center gap-2">
            <span style="font-size:11px;color:#7c3aed;font-weight:600;">
              <?= (int)$p['horas_cumplidas'] ?>/<?= (int)$p['horas_requeridas'] ?>h
            </span>
            <?= badgeFichaEst($fe) ?>
          </div>
        </div>

        <!-- Barra de progreso de pasos -->
        <div class="px-3 pt-3">
          <div class="steps-row">
            <div class="step <?= $paso1 ? 'active' : ($fe !== 'no_enviada' ? 'done' : '') ?>">
              <span class="step-num"><?= $fe === 'no_enviada' ? '🔒' : '✅' ?></span>
              Habilitada por coordinador
            </div>
            <div class="step <?= $paso2 ? 'active' : ($paso3 || $paso4 ? 'done' : '') ?>">
              <span class="step-num"><?= ($paso3 || $paso4) ? '✅' : '📥' ?></span>
              Tú la descargas y firmas
            </div>
            <div class="step <?= $paso3 ? 'active' : ($paso4 ? 'done' : '') ?>">
              <span class="step-num"><?= $paso4 ? '✅' : '📤' ?></span>
              Coordinador firma final
            </div>
            <div class="step <?= $paso4 ? 'done' : '' ?>">
              <span class="step-num"><?= $paso4 ? '✅' : '🎉' ?></span>
              Ficha completa
            </div>
          </div>
        </div>

        <!-- Cuerpo -->
        <div class="ficha-card-body">

          <?php if ($fe === 'no_enviada'): ?>
          <!-- ══ PENDIENTE: coordinador no ha habilitado ════════════════ -->
          <div class="estado-pendiente" style="padding:20px;">
            <i class="fa fa-lock"></i>
            <p class="mb-1" style="font-size:14px;font-weight:600;color:#374151;">
              Tu ficha aún no está habilitada
            </p>
            <p class="mb-0" style="font-size:12px;">
              El coordinador debe activarla primero. Cuando esté lista, podrás descargarla y firmarla aquí.
            </p>
          </div>

          <?php elseif ($fe === 'enviada'): ?>
          <!-- ══ ENVIADA: estudiante puede descargar y subir ═══════════ -->
          <div class="row g-3">
            <!-- Columna izquierda: descargar -->
            <div class="col-md-5">
              <div style="background:#fff8f8;border:1px solid #fecaca;border-radius:10px;padding:16px;">
                <p style="font-size:12px;font-weight:700;color:#991b1b;margin-bottom:10px;">
                  <i class="fa fa-step-backward me-1"></i> PASO 1 — Descarga tu ficha
                </p>
                <p style="font-size:11px;color:#6b7280;margin-bottom:12px;">
                  Haz clic para abrir el PDF con todos tus datos. Imprímelo y fírmalo en el espacio indicado.
                </p>
                <a href="<?= BASE_URL ?>/modules/coordinador/generar_ficha_ppp.php?id=<?= $idPrac ?>"
                   target="_blank" class="btn-descargar">
                  <i class="fa fa-file-pdf"></i> Descargar / Imprimir PDF
                </a>
                <p style="font-size:10px;color:#9ca3af;margin-top:8px;margin-bottom:0;">
                  📅 Habilitada el <?= $p['ficha_enviada_at'] ? date('d/m/Y H:i', strtotime($p['ficha_enviada_at'])) : '—' ?>
                </p>
              </div>
            </div>

            <!-- Columna derecha: subir firmada -->
            <div class="col-md-7">
              <div style="background:#f8fbff;border:1px solid #bfdbfe;border-radius:10px;padding:16px;">
                <p style="font-size:12px;font-weight:700;color:#1e40af;margin-bottom:10px;">
                  <i class="fa fa-upload me-1"></i> PASO 2 — Sube tu ficha firmada
                </p>
                <p style="font-size:11px;color:#6b7280;margin-bottom:8px;">
                  Una vez que la hayas firmado, escanéala o tómale foto y súbela aquí.
                  Formatos aceptados: <strong>PDF, JPG, PNG</strong>.
                </p>

                <form method="POST" action="<?= BASE_URL ?>/modules/coordinador/accion_ficha_ppp.php"
                      enctype="multipart/form-data" id="formSubir_<?= $idPrac ?>">
                  <input type="hidden" name="accion"      value="upload_est">
                  <input type="hidden" name="id_practica" value="<?= $idPrac ?>">

                  <!-- Zona de drop visual -->
                  <div class="upload-zone" id="zone_<?= $idPrac ?>"
                       onclick="document.getElementById('fileInput_<?= $idPrac ?>').click()">
                    <label class="upload-label" for="fileInput_<?= $idPrac ?>">
                      <i class="fa fa-cloud-arrow-up"></i>
                      Seleccionar archivo firmado
                    </label>
                    <input type="file" id="fileInput_<?= $idPrac ?>" name="ficha_firmada"
                           accept=".pdf,.jpg,.jpeg,.png" required
                           onchange="mostrarNombre(this, <?= $idPrac ?>)">
                    <span id="nombreArchivo_<?= $idPrac ?>">Ningún archivo seleccionado</span>
                  </div>

                  <div class="mt-2 d-flex align-items-center gap-2">
                    <button type="submit" class="btn-subir"
                            onclick="return confirm('¿Confirmas subir esta ficha firmada?')">
                      <i class="fa fa-paper-plane"></i> Enviar ficha firmada
                    </button>
                    <span style="font-size:10px;color:#9ca3af;">Máx. recomendado: 5 MB</span>
                  </div>
                </form>
              </div>
            </div>
          </div>

          <?php elseif ($fe === 'firmada_est'): ?>
          <!-- ══ FIRMADA POR ESTUDIANTE: esperando coordinador ════════ -->
          <div class="row g-3 align-items-center">
            <div class="col-md-6">
              <div style="background:#fefce8;border:1px solid #fde68a;border-radius:10px;padding:16px;">
                <p style="font-size:13px;font-weight:700;color:#a16207;margin-bottom:6px;">
                  ⏳ Tu ficha fue enviada correctamente
                </p>
                <p style="font-size:12px;color:#6b7280;margin-bottom:0;">
                  El coordinador la está revisando y agregará la firma de la autoridad.
                  Te avisaremos cuando esté lista.
                </p>
              </div>
            </div>
            <div class="col-md-6">
              <!-- Permite volver a subir si hubo error -->
              <p style="font-size:11px;color:#9ca3af;margin-bottom:6px;">
                ¿Necesitas corregir el archivo que subiste?
              </p>
              <form method="POST" action="<?= BASE_URL ?>/modules/coordinador/accion_ficha_ppp.php"
                    enctype="multipart/form-data">
                <input type="hidden" name="accion"      value="upload_est">
                <input type="hidden" name="id_practica" value="<?= $idPrac ?>">
                <div class="d-flex align-items-center gap-2 flex-wrap">
                  <input type="file" name="ficha_firmada" accept=".pdf,.jpg,.jpeg,.png"
                         class="form-control form-control-sm" style="max-width:220px;" required>
                  <button type="submit" class="btn-subir" style="font-size:11px;padding:6px 12px;"
                          onclick="return confirm('¿Reemplazar la ficha que habías subido?')">
                    <i class="fa fa-rotate"></i> Reemplazar
                  </button>
                </div>
              </form>
            </div>
          </div>

          <?php elseif ($fe === 'firmada_final'): ?>
          <!-- ══ FIRMADA FINAL: proceso completo ══════════════════════ -->
          <div style="background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:20px;">
            <div class="d-flex align-items-center gap-3 flex-wrap">
              <div style="font-size:40px;line-height:1;">🎉</div>
              <div style="flex:1;">
                <p style="font-size:14px;font-weight:700;color:#15803d;margin-bottom:4px;">
                  ¡Proceso completado! Tu ficha está firmada por ambas partes.
                </p>
                <p style="font-size:12px;color:#6b7280;margin-bottom:10px;">
                  Guarda este documento. Es el comprobante oficial de tus prácticas pre profesionales.
                </p>
                <a href="<?= BASE_URL ?>/assets/uploads/<?= htmlspecialchars($p['ficha_doc_final']) ?>"
                   target="_blank" class="btn-final" download>
                  <i class="fa fa-download"></i> Descargar Ficha Firmada Final (PDF)
                </a>
              </div>
            </div>
          </div>
          <?php endif; ?>

        </div><!-- /ficha-card-body -->
      </div><!-- /ficha-card -->

      <?php endforeach; ?>
    <?php endif; ?>

  </main>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
<script>
// Mostrar nombre del archivo seleccionado
function mostrarNombre(input, idPrac) {
    var span = document.getElementById('nombreArchivo_' + idPrac);
    if (input.files && input.files[0]) {
        var f    = input.files[0];
        var size = (f.size / 1024 / 1024).toFixed(2);
        span.innerHTML = '📎 <strong>' + f.name + '</strong> (' + size + ' MB)';
        span.style.color = '#1e40af';

        // Validar tamaño
        if (f.size > 10 * 1024 * 1024) {
            alert('⚠ El archivo es muy grande (máx. 10 MB).');
            input.value = '';
            span.innerHTML = 'Ningún archivo seleccionado';
            span.style.color = '#6b7280';
        }
    }
}

// Drag & drop visual
document.querySelectorAll('.upload-zone').forEach(function(zone) {
    zone.addEventListener('dragover', function(e) {
        e.preventDefault();
        zone.style.borderColor = '#3b82f6';
        zone.style.background  = '#dbeafe';
    });
    zone.addEventListener('dragleave', function() {
        zone.style.borderColor = '#93c5fd';
        zone.style.background  = '#f8fbff';
    });
    zone.addEventListener('drop', function(e) {
        e.preventDefault();
        zone.style.borderColor = '#93c5fd';
        zone.style.background  = '#f8fbff';
        // Asignar archivo al input correspondiente
        var input = zone.querySelector('input[type=file]');
        if (input && e.dataTransfer.files[0]) {
            input.files = e.dataTransfer.files;
            var idPrac  = input.id.replace('fileInput_', '');
            mostrarNombre(input, idPrac);
        }
    });
});
</script>
</body>
</html>