<?php
require_once __DIR__.'/../../config/app.php';
require_once __DIR__.'/../../includes/auth.php';
require_once __DIR__.'/../../includes/functions.php';
requireRol(ROL_TUTOR_EMPRESA);

$user = currentUser(); $db = getDB(); $pageTitle = 'Bitácoras de Practicantes';

// ── Tutor empresa ─────────────────────────────────────────
$te = $db->prepare("SELECT te.id FROM tutores_empresa te WHERE te.id_usuario=:uid AND te.activo=1");
$te->execute([':uid'=>$user['id']]);
$teRows         = $te->fetchAll();
$idTutorEmpresa = (int)($teRows[0]['id'] ?? 0);

// ── Parámetros ─────────────────────────────────────────────
$idPractica = (int)($_GET['practica'] ?? 0);  // práctica seleccionada
$idBitacora = (int)($_GET['bit'] ?? 0);       // semana seleccionada

// ── Lista de practicantes con bitácoras ────────────────────
$stPract = $db->prepare("
    SELECT p.id_practica,
           CONCAT(u.apellidos,' ',u.nombres) AS estudiante,
           u.cedula, c.nombre AS carrera,
           em.razon_social AS empresa,
           p.horas_cumplidas, p.horas_requeridas, p.estado,
           (SELECT COUNT(*) FROM bitacoras b WHERE b.id_practica=p.id_practica) AS total_bit
    FROM practicas p
    JOIN estudiantes est ON est.id_estudiante=p.id_estudiante
    JOIN usuarios u      ON u.id_usuario=est.id_usuario
    JOIN carreras c      ON c.id_carrera=est.id_carrera
    JOIN empresas em     ON em.id_empresa=p.id_empresa
    WHERE p.id_tutor_empresa = :tid
      AND p.estado IN ('aprobado','en_progreso','informe_enviado','calificado','completado')
    ORDER BY p.estado, u.apellidos
");
$stPract->execute([':tid' => $idTutorEmpresa]);
$practicantes = $stPract->fetchAll();

// ── Semanas de la práctica seleccionada ────────────────────
$semanas = [];
$practicaActual = null;
if ($idPractica) {
    foreach ($practicantes as $p) {
        if ($p['id_practica'] == $idPractica) { $practicaActual = $p; break; }
    }
    if ($practicaActual) {
        $semanas = $db->query("
            SELECT id_bitacora, semana_numero, fecha_inicio_semana, fecha_fin_semana,
                   horas_semana, estado, comentario_tutor, actividades
            FROM bitacoras
            WHERE id_practica=$idPractica
            ORDER BY semana_numero ASC
        ")->fetchAll();
    }
}

// ── Semana seleccionada ─────────────────────────────────────
$semanaActual = null;
$diasActual   = [];
if ($idBitacora && $idPractica) {
    foreach ($semanas as $s) {
        if ($s['id_bitacora'] == $idBitacora) {
            $semanaActual = $s;
            $diasActual   = json_decode($s['actividades'] ?: '[]', true) ?? [];
            break;
        }
    }
}

// ── Stats del tutor empresa ────────────────────────────────
$statsSinCalif = 0;
if ($idTutorEmpresa) {
    $stStat = $db->prepare("
        SELECT COUNT(*) FROM practicas
        WHERE id_tutor_empresa = :tid
          AND nota_empresa_100 IS NULL
          AND estado IN ('en_progreso','informe_enviado','calificado')
    ");
    $stStat->execute([':tid' => $idTutorEmpresa]);
    $statsSinCalif = (int)$stStat->fetchColumn();
}

$diaSemana = ['1'=>'Lunes','2'=>'Martes','3'=>'Miércoles','4'=>'Jueves','5'=>'Viernes','6'=>'Sábado','7'=>'Domingo'];
$estadoColor = ['enviada'=>'#3b82f6','validada'=>'#16a34a','observada'=>'#f59e0b','borrador'=>'#94a3b8'];
?>
<!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-tutor-empresa.css">
<style>
/* ── Layout columnas ─────── */
.bit-shell{display:grid;grid-template-columns:260px 1fr;gap:0;height:calc(100vh - 60px);overflow:hidden}
.bit-side{border-right:1px solid #e2e8f0;overflow-y:auto;background:#fbfcfd}
.bit-main{overflow-y:auto;padding:24px}
/* ── Practicante card ────── */
.pract-item{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;border-bottom:1px solid #f1f5f9;transition:.12s;text-decoration:none;color:inherit}
.pract-item:hover{background:#f0f7ff}
.pract-item.active{background:#eff6ff;border-left:3px solid #3b82f6}
.pract-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#6366f1);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
/* ── Semana selector ─────── */
.sem-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.sem-tab{padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;text-decoration:none;border:1px solid #e2e8f0;color:#64748b;background:#fff;transition:.12s;white-space:nowrap}
.sem-tab.active{background:#3b82f6;color:#fff;border-color:#3b82f6}
.sem-tab:hover:not(.active){background:#f0f7ff;border-color:#3b82f6;color:#3b82f6}
/* ── Dia card ────────────── */
.dia-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;margin-bottom:16px;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.dia-header{display:flex;align-items:center;gap:14px;padding:14px 18px;background:#f8fafc;border-bottom:1px solid #f1f5f9}
.dia-date{font-size:14px;font-weight:700;color:#0f172a}
.dia-dow{font-size:11px;color:#64748b}
.dia-horas{background:#eff6ff;color:#3b82f6;border:1px solid #bfdbfe;font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px}
.dia-body{display:grid;grid-template-columns:1fr 1fr;gap:0}
.dia-body.with-photo{grid-template-columns:1fr 1fr 160px}
.dia-section{padding:14px 18px;border-right:1px solid #f1f5f9}
.dia-section:last-child{border-right:none}
.dia-label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:#94a3b8;font-weight:700;margin-bottom:5px}
.dia-text{font-size:13px;color:#334155;line-height:1.5}
/* ── Foto evidencia ──────── */
.foto-evidencia{width:100%;height:120px;object-fit:cover;cursor:zoom-in;transition:opacity .15s}
.foto-evidencia:hover{opacity:.85}
.foto-wrap{padding:14px;display:flex;align-items:center;justify-content:center;background:#f8fafc}
/* ── Feriado ─────────────── */
.feriado-row{background:#fffbeb;border:1px solid #fde68a}
/* ── Empty state ────────── */
.empty-state{text-align:center;padding:48px 20px;color:#94a3b8}
.empty-state i{font-size:40px;margin-bottom:14px;display:block;opacity:.4}
/* ── Semana badge ────────── */
.sem-estado{font-size:9px;padding:1px 7px;border-radius:20px;font-weight:700;margin-left:6px}
</style>
</head><body>
<?php include __DIR__.'/../../includes/navbar.php'; ?>
<div class="app-shell">
<aside class="sidebar">
  <div class="sidebar-label">Tutor Empresa</div>
  <a href="dashboard.php"><span class="icon"><i class="fa fa-gauge"></i></span> Dashboard</a>
  <div class="sidebar-group g-practicas">
    <span class="sg-label"><i class="fa fa-briefcase me-1"></i>Prácticas</span>
    <a href="mis_estudiantes.php"><span class="icon"><i class="fa fa-users"></i></span> Mis Estudiantes</a>
    <a href="bitacoras.php" class="active"><span class="icon"><i class="fa fa-book-open"></i></span> Bitácoras</a>
  </div>
  <div class="sidebar-group g-calificacion">
    <span class="sg-label"><i class="fa fa-star me-1"></i>Calificación</span>
    <a href="calificacion.php"><span class="icon"><i class="fa fa-star"></i></span> Calificar
      <?php if($statsSinCalif>0):?>
        <span class="badge rounded-pill ms-auto" style="background:#ec4899;color:#fff;font-size:10px;"><?=$statsSinCalif?></span>
      <?php endif;?>
    </a>
  </div>
  <div class="sidebar-group g-cuenta">
    <span class="sg-label"><i class="fa fa-user me-1"></i>Cuenta</span>
    <a href="<?=BASE_URL?>/auth/cambiar_password.php"><span class="icon"><i class="fa fa-lock"></i></span> Contraseña</a>
  </div>
  <div class="sidebar-sep"></div>
  <a href="<?=BASE_URL?>/auth/logout.php"><span class="icon"><i class="fa fa-right-from-bracket"></i></span> Salir</a>
</aside>

<main class="main-area" style="padding:0;overflow:hidden">
<div class="bit-shell">

  <!-- ══ COLUMNA IZQUIERDA: Lista de practicantes ══ -->
  <div class="bit-side">
    <div style="padding:14px 14px 10px;border-bottom:1px solid #e2e8f0">
      <div style="font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.5px">
        <i class="fa fa-users me-1"></i>Practicantes (<?=count($practicantes)?>)
      </div>
    </div>
    <?php if(empty($practicantes)):?>
    <div class="empty-state" style="padding:24px">
      <i class="fa fa-user-slash"></i>
      <div style="font-size:13px">Sin practicantes activos</div>
    </div>
    <?php else: foreach($practicantes as $p):
      $iniciales = implode('',array_map(fn($w)=>strtoupper($w[0]),array_filter(explode(' ',trim($p['estudiante'])),fn($w)=>strlen($w)>0)));
      $pct = $p['horas_requeridas']>0 ? min(100,round($p['horas_cumplidas']/$p['horas_requeridas']*100)) : 0;
      $isActive = ($p['id_practica']==$idPractica);
    ?>
    <a href="bitacoras.php?practica=<?=$p['id_practica']?>" class="pract-item <?=$isActive?'active':''?>">
      <div class="pract-avatar"><?=substr($iniciales,0,2)?></div>
      <div style="flex:1;min-width:0">
        <div style="font-size:12px;font-weight:600;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"><?=htmlspecialchars($p['estudiante'])?></div>
        <div style="font-size:10px;color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"><?=htmlspecialchars($p['carrera'])?></div>
        <div style="margin-top:4px;display:flex;align-items:center;gap:5px">
          <div style="flex:1;height:3px;background:#e2e8f0;border-radius:2px;overflow:hidden">
            <div style="width:<?=$pct?>%;height:3px;background:<?=$pct>=80?'#16a34a':($pct>=40?'#f59e0b':'#3b82f6')?>"></div>
          </div>
          <span style="font-size:9px;color:#94a3b8;white-space:nowrap"><?=$p['horas_cumplidas']?>/<?=$p['horas_requeridas']?>h</span>
          <span style="font-size:9px;color:#64748b;white-space:nowrap">📋 <?=$p['total_bit']?></span>
        </div>
      </div>
    </a>
    <?php endforeach; endif;?>
  </div>

  <!-- ══ COLUMNA DERECHA: Bitácoras del practicante ══ -->
  <div class="bit-main">
    <?php if(!$practicaActual):?>
    <!-- Estado inicial: sin practicante seleccionado -->
    <div class="empty-state" style="margin-top:60px">
      <i class="fa fa-book-open"></i>
      <div style="font-size:16px;font-weight:700;color:#475569;margin-bottom:8px">Bitácoras Diarias</div>
      <div style="font-size:13px;max-width:360px;margin:0 auto">
        Selecciona un practicante de la lista para ver su registro diario de actividades con fotos de evidencia.
      </div>
    </div>

    <?php else:?>
    <!-- Encabezado del practicante -->
    <div style="margin-bottom:20px">
      <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px">
        <h5 style="margin:0;font-size:17px;font-weight:700;color:#0f172a">
          <i class="fa fa-user-tie me-2" style="color:#3b82f6"></i><?=htmlspecialchars($practicaActual['estudiante'])?>
        </h5>
        <span style="font-size:10px;padding:2px 10px;border-radius:20px;background:#eff6ff;color:#3b82f6;border:1px solid #bfdbfe;font-weight:700"><?=htmlspecialchars($practicaActual['carrera'])?></span>
        <span style="font-size:10px;padding:2px 10px;border-radius:20px;background:#f8fafc;color:#64748b;border:1px solid #e2e8f0;font-weight:600"><?=htmlspecialchars($practicaActual['empresa'])?></span>
      </div>
      <div style="font-size:12px;color:#64748b">
        <i class="fa fa-clock me-1"></i><?=$practicaActual['horas_cumplidas']?>/<?=$practicaActual['horas_requeridas']?>h acumuladas
        &nbsp;·&nbsp; <i class="fa fa-book me-1"></i><?=count($semanas)?> semana(s) registrada(s)
      </div>
    </div>

    <?php if(empty($semanas)):?>
    <div class="empty-state">
      <i class="fa fa-calendar-xmark"></i>
      <div style="font-size:14px;font-weight:600;color:#475569;margin-bottom:6px">Sin bitácoras aún</div>
      <div style="font-size:13px">Este practicante todavía no ha registrado ninguna semana.</div>
    </div>

    <?php else:?>
    <!-- Tabs de semanas -->
    <div class="sem-tabs">
      <?php foreach($semanas as $s):
        $sColor = $estadoColor[$s['estado']]??'#94a3b8';
        $sIsActive = ($s['id_bitacora']==$idBitacora);
      ?>
      <a href="bitacoras.php?practica=<?=$idPractica?>&bit=<?=$s['id_bitacora']?>"
         class="sem-tab <?=$sIsActive?'active':''?>">
        Sem. <?=$s['semana_numero']?>
        <span class="sem-estado" style="background:<?=$sColor?>22;color:<?=$sColor?>;border:1px solid <?=$sColor?>44">
          <?=match($s['estado']){
            'validada'=>'✓ OK',
            'enviada'=>'⏳ Rev.',
            'observada'=>'⚠️ Obs.',
            default=>'Bor.'
          }?>
        </span>
      </a>
      <?php endforeach;?>
    </div>

    <?php if(!$semanaActual):?>
    <!-- Resumen de todas las semanas -->
    <div style="font-size:11px;color:#94a3b8;margin-bottom:16px">Selecciona una semana para ver el detalle día a día con fotos de evidencia.</div>

    <!-- Vista resumen de semanas -->
    <?php foreach($semanas as $s):
      $dias = json_decode($s['actividades'] ?? '[]', true) ?? [];

      $fotos = array_filter($dias, fn($d)=>!empty($d['foto']));
      $sColor = $estadoColor[$s['estado']]??'#94a3b8';
    ?>
    <div style="background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px 18px;margin-bottom:12px;display:flex;align-items:center;gap:16px;flex-wrap:wrap">
      <div style="flex:1;min-width:200px">
        <div style="font-weight:700;font-size:14px;color:#0f172a">Semana <?=$s['semana_numero']?></div>
        <div style="font-size:12px;color:#64748b;margin-top:2px">
          <?=date('d/m/Y',strtotime($s['fecha_inicio_semana']))?> — <?=date('d/m/Y',strtotime($s['fecha_fin_semana']))?>
        </div>
        <?php if($s['comentario_tutor']):?>
        <div style="font-size:11px;color:#f59e0b;margin-top:4px"><i class="fa fa-comment me-1"></i>Con observación del tutor académico</div>
        <?php endif;?>
      </div>
      <div style="display:flex;gap:16px;align-items:center;flex-wrap:wrap">
        <div style="text-align:center">
          <div style="font-size:20px;font-weight:800;color:#3b82f6"><?=count($dias)?></div>
          <div style="font-size:10px;color:#94a3b8">días</div>
        </div>
        <div style="text-align:center">
          <div style="font-size:20px;font-weight:800;color:#16a34a"><?=$s['horas_semana']?>h</div>
          <div style="font-size:10px;color:#94a3b8">horas</div>
        </div>
        <div style="text-align:center">
          <div style="font-size:20px;font-weight:800;color:#8b5cf6"><?=count($fotos)?></div>
          <div style="font-size:10px;color:#94a3b8"><i class="fa fa-camera" style="font-size:9px"></i> fotos</div>
        </div>
        <span style="font-size:10px;padding:3px 12px;border-radius:20px;font-weight:700;background:<?=$sColor?>15;color:<?=$sColor?>;border:1px solid <?=$sColor?>33">
          <?=ucfirst($s['estado'])?>
        </span>
      </div>
      <!-- Fotos en miniatura del resumen -->
      <?php if(!empty($fotos)):?>
      <div style="display:flex;gap:4px;flex-wrap:wrap;width:100%">
        <?php foreach(array_slice(array_values($fotos),0,6) as $fd):?>
        <img src="<?=UPLOAD_URL?>/<?=htmlspecialchars($fd['foto'])?>"
             onclick="verFoto('<?=UPLOAD_URL?>/<?=htmlspecialchars($fd['foto'])?>')"
             style="width:50px;height:50px;object-fit:cover;border-radius:8px;cursor:zoom-in;border:1px solid #e2e8f0"
             title="<?=date('d/m/Y',strtotime($fd['fecha']))?>">
        <?php endforeach;?>
        <?php if(count($fotos)>6):?>
        <a href="bitacoras.php?practica=<?=$idPractica?>&bit=<?=$s['id_bitacora']?>"
           style="width:50px;height:50px;border-radius:8px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;color:#64748b;font-size:12px;font-weight:700;text-decoration:none;border:1px solid #e2e8f0">
          +<?=count($fotos)-6?>
        </a>
        <?php endif;?>
      </div>
      <?php endif;?>
      <a href="bitacoras.php?practica=<?=$idPractica?>&bit=<?=$s['id_bitacora']?>"
         style="font-size:12px;color:#3b82f6;text-decoration:none;font-weight:600;white-space:nowrap">
        <i class="fa fa-eye me-1"></i>Ver detalle →
      </a>
    </div>
    <?php endforeach;?>

    <?php else:?>
    <!-- ══ DETALLE DE UNA SEMANA CON DÍAS Y FOTOS ══ -->
    <div style="margin-bottom:20px">
      <a href="bitacoras.php?practica=<?=$idPractica?>" style="font-size:12px;color:#64748b;text-decoration:none">
        <i class="fa fa-arrow-left me-1"></i>Volver al resumen
      </a>
      <div style="margin-top:8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap">
        <h6 style="margin:0;font-size:15px;font-weight:700;color:#0f172a">
          Semana <?=$semanaActual['semana_numero']?>
          <span style="font-size:13px;font-weight:400;color:#64748b">
            · <?=date('d/m/Y',strtotime($semanaActual['fecha_inicio_semana']))?> — <?=date('d/m/Y',strtotime($semanaActual['fecha_fin_semana']))?>
          </span>
        </h6>
        <?php $sCol=$estadoColor[$semanaActual['estado']]??'#94a3b8';?>
        <span style="font-size:10px;padding:2px 10px;border-radius:20px;font-weight:700;background:<?=$sCol?>15;color:<?=$sCol?>;border:1px solid <?=$sCol?>33">
          <?=ucfirst($semanaActual['estado'])?>
        </span>
      </div>

      <!-- Stats rápidos -->
      <div style="display:flex;gap:16px;margin-top:12px;flex-wrap:wrap">
        <?php $fotos=array_filter($diasActual,fn($d)=>!empty($d['foto']));?>
        <div style="background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:10px 18px;text-align:center;min-width:80px">
          <div style="font-size:22px;font-weight:800;color:#3b82f6"><?=count($diasActual)?></div>
          <div style="font-size:10px;color:#94a3b8;font-weight:600">Días</div>
        </div>
        <div style="background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:10px 18px;text-align:center;min-width:80px">
          <div style="font-size:22px;font-weight:800;color:#16a34a"><?=$semanaActual['horas_semana']?>h</div>
          <div style="font-size:10px;color:#94a3b8;font-weight:600">Horas</div>
        </div>
        <div style="background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:10px 18px;text-align:center;min-width:80px">
          <div style="font-size:22px;font-weight:800;color:#8b5cf6"><?=count($fotos)?></div>
          <div style="font-size:10px;color:#94a3b8;font-weight:600"><i class="fa fa-camera fa-xs"></i> Fotos</div>
        </div>
        <?php if(count($diasActual)>0):?>
        <div style="background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:10px 18px;text-align:center;min-width:80px">
          <div style="font-size:22px;font-weight:800;color:#f59e0b"><?=round($semanaActual['horas_semana']/count($diasActual),1)?>h</div>
          <div style="font-size:10px;color:#94a3b8;font-weight:600">Prom/día</div>
        </div>
        <?php endif;?>
      </div>

      <!-- Observación del tutor académico si existe -->
      <?php if($semanaActual['comentario_tutor']):?>
      <div style="margin-top:12px;background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:12px 16px;font-size:12px;color:#92400e">
        <i class="fa fa-comment me-2"></i><strong>Observación del tutor académico:</strong>
        <?=nl2br(htmlspecialchars($semanaActual['comentario_tutor']))?>
      </div>
      <?php endif;?>
    </div>

    <?php if(empty($diasActual)):?>
    <div class="empty-state">
      <i class="fa fa-calendar-days" style="font-size:32px"></i>
      <div style="font-size:14px">Sin días registrados aún en esta semana</div>
    </div>
    <?php else:?>
    <!-- Tarjetas por día -->
    <?php foreach($diasActual as $dia):
      $esFeriado = (int)($dia['horas']??0) === 0;
      $dowLabel  = $diaSemana[date('N',strtotime($dia['fecha']))]??'';
      $tieneFoto = !empty($dia['foto']);
    ?>
    <div class="dia-card <?=$esFeriado?'feriado-row':''?>">
      <!-- Header del día -->
      <div class="dia-header">
        <div style="flex:1">
          <div class="dia-date">
            <?=date('d/m/Y',strtotime($dia['fecha']))?>
            <span class="dia-dow">&nbsp;·&nbsp; <?=$dowLabel?></span>
          </div>
          <?php if($esFeriado):?>
          <span style="font-size:9px;padding:1px 8px;border-radius:4px;background:#fef3c7;color:#92400e;font-weight:700;border:1px solid #fde68a">FERIADO / ASUETO</span>
          <?php endif;?>
        </div>
        <?php if(!$esFeriado):?>
        <span class="dia-horas"><i class="fa fa-clock me-1" style="font-size:9px"></i><?=$dia['horas']?>h</span>
        <?php endif;?>
        <?php if($tieneFoto):?>
        <span style="font-size:10px;padding:2px 8px;border-radius:20px;background:#faf5ff;color:#8b5cf6;border:1px solid #ddd6fe;font-weight:600"><i class="fa fa-camera me-1"></i>Con foto</span>
        <?php endif;?>
      </div>

      <!-- Cuerpo del día -->
      <div class="dia-body <?=$tieneFoto?'with-photo':''?>">
        <!-- Actividades -->
        <div class="dia-section">
          <div class="dia-label"><i class="fa fa-list-check me-1"></i>Actividades realizadas</div>
          <div class="dia-text"><?=nl2br(htmlspecialchars($dia['descripcion']??''))?></div>
        </div>

        <!-- Logros + Dificultades apilados -->
        <div class="dia-section" style="display:flex;flex-direction:column;gap:12px">
          <div>
            <div class="dia-label" style="color:#16a34a"><i class="fa fa-star me-1"></i>Logros</div>
            <div class="dia-text" style="color:#16a34a;font-size:12px">
              <?=$dia['logros']?nl2br(htmlspecialchars($dia['logros'])):'<span style="color:#94a3b8">—</span>'?>
            </div>
          </div>
          <div>
            <div class="dia-label" style="color:#f59e0b"><i class="fa fa-triangle-exclamation me-1"></i>Dificultades</div>
            <div class="dia-text" style="color:#f59e0b;font-size:12px">
              <?=$dia['dificultades']?nl2br(htmlspecialchars($dia['dificultades'])):'<span style="color:#94a3b8">—</span>'?>
            </div>
          </div>
        </div>

        <!-- Foto de evidencia -->
        <?php if($tieneFoto):?>
        <div class="foto-wrap" style="border-left:1px solid #f1f5f9;padding:12px;display:flex;flex-direction:column;align-items:center;gap:6px">
          <div class="dia-label" style="text-align:center;margin-bottom:6px"><i class="fa fa-camera me-1"></i>Evidencia</div>
          <img src="<?=UPLOAD_URL?>/<?=htmlspecialchars($dia['foto'])?>"
               class="foto-evidencia"
               onclick="verFoto('<?=UPLOAD_URL?>/<?=htmlspecialchars($dia['foto'])?>')"
               alt="Evidencia <?=date('d/m/Y',strtotime($dia['fecha']))?>"
               style="width:130px;height:130px;object-fit:cover;border-radius:10px;border:1px solid #e2e8f0">
          <a href="<?=UPLOAD_URL?>/<?=htmlspecialchars($dia['foto'])?>" download target="_blank"
             style="font-size:10px;color:#3b82f6;text-decoration:none">
            <i class="fa fa-download me-1" style="font-size:9px"></i>Descargar
          </a>
        </div>
        <?php endif;?>
      </div>
    </div>
    <?php endforeach;?>
    <?php endif;?>
    <?php endif;?>
    <?php endif;?>
    <?php endif;?>

  </div><!-- bit-main -->
</div><!-- bit-shell -->
</main>
</div><!-- app-shell -->

<!-- Modal foto grande -->
<div class="modal fade" id="modalFoto" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content" style="background:#0a0f1a;border:1px solid #1e293b">
      <div class="modal-header" style="border-bottom:1px solid #1e293b;padding:10px 16px">
        <div style="font-size:13px;font-weight:600;color:#e2e8f0"><i class="fa fa-camera me-2" style="color:#8b5cf6"></i>Foto de evidencia</div>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body text-center" style="padding:16px">
        <img id="fotoGrande" src="" style="max-width:100%;max-height:78vh;border-radius:10px;object-fit:contain">
      </div>
      <div class="modal-footer" style="border-top:1px solid #1e293b;padding:10px 16px">
        <a id="fotoDescarga" href="#" download target="_blank" class="btn btn-sm btn-outline-secondary">
          <i class="fa fa-download me-1"></i>Descargar
        </a>
        <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</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>
function verFoto(url){
  document.getElementById('fotoGrande').src=url;
  document.getElementById('fotoDescarga').href=url;
  new bootstrap.Modal(document.getElementById('modalFoto')).show();
}
</script>
</body></html>