<style>
.timeline {
    position: relative;
}
.timeline::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 0;
    bottom: 0;
    width: 2px;
  
    
    /* línea punteada */
    border-left: 2px dashed #ced4da;
}
</style>
<div class="timeline position-relative ps-4">

<?php foreach ($gestiones as $k => $g): ?>

    <?php
        switch ($g['tipo']) {
            case 'derivacion_inicial':
                $color  = 'primary';
                $icon   = 'fa-flag-checkered';
                $titulo = 'Derivación inicial';
                break;

            case 'derivacion':
                $color  = 'warning';
                $icon   = 'fa-share-nodes';
                $titulo = 'Derivación';
                break;

            case 'gestion':
                $color  = 'primary';
                $icon   = 'fa-clipboard-check';
                $titulo = 'Gestión';
                break;

            default:
                $color  = 'secondary';
                $icon   = 'fa-circle-info';
                $titulo = 'Gestión';
        }
    ?>

    <div class="card mb-4 border-start border-4 border-<?= $k==0 ? get_estado($g['estado_respuesta'])["color"] : 'gray' ?>">
        <div class="card-body">

            <!-- Cabecera -->
            <div class="d-flex justify-content-between align-items-center mb-2">
                <h6 class="mb-0 text-<?= $color ?>">
                    <i class="fa-solid <?= $icon ?> me-2"></i>
                    <?= $titulo ?>
                </h6>
                <small class="text-muted">
                    <i class="fa-regular fa-clock me-1"></i>
                    <?= date('d/m/Y H:i', strtotime($g['fecha_creacion'])) ?>
                </small>
            </div>

            <!-- Creador -->
            <?php 
                if ($g["tipo"]=='gestion') {
                  ?>
                    <p class="mb-1">
                        <i class="fa-solid fa-user-pen me-1 text-secondary"></i>
                        <strong>Estado de la solicitud:</strong>
                        <span class="badge <?= get_estado($g['estado_respuesta'])["class"]?>"><?= get_estado($g['estado_respuesta'])["titulo"]?></span>
                    </p>
                  <?php
                }
            ?>
            


            <!-- Creador -->
            <p class="mb-1">
                <i class="fa-solid fa-user-pen me-1 text-secondary"></i>
                <strong>Creado por:</strong>
                <?= esc($g['creador_nombre']) ?>
                <small class="text-muted">(<?= esc($g['creador_email']) ?>)</small>
            </p>

            <?php if ($g["tipo"]=='derivacion' || $g["tipo"]=='derivacion_inicial') {
               ?>
                <!-- Asignado -->
                <p class="mb-1">
                    <i class="fa-solid fa-user-check me-1 text-secondary"></i>
                    <strong>Asignado a:</strong>
                    <?= esc($g['asignado_nombre']) ?>
                    <small class="text-muted">(<?= esc($g['asignado_email']) ?>)</small>
                </p>
               <?php
            } ?>
        

            <!-- Comentarios -->
            <div class="mt-3">
                <strong>
                    <i class="fa-regular fa-comment-dots me-1"></i>
                    Comentarios:
                </strong>
                <div class="p-2 bg-light rounded">
                    <?= nl2br(esc($g['comentarios'])) ?>
                </div>
            </div>

            <?php
                $archivos = [];
                if (!empty($g['archivos'])) {
                    $archivos = json_decode($g['archivos'], true);
                }
            ?>

            <?php if (!empty($archivos)): ?>
                <div class="mt-3">
                    <strong>
                        <i class="fa-solid fa-paperclip me-1"></i>
                        Archivos adjuntos:
                    </strong>

                    <ul class="list-group list-group-flush mt-2">
                        <?php foreach ($archivos as $file): ?>

                            <?php
                                // Icono según extensión
                                switch ($file['extension']) {
                                    case 'pdf':
                                        $icon = 'fa-file-pdf text-danger';
                                        break;
                                    case 'doc':
                                    case 'docx':
                                        $icon = 'fa-file-word text-primary';
                                        break;
                                    case 'xls':
                                    case 'xlsx':
                                        $icon = 'fa-file-excel text-success';
                                        break;
                                    case 'jpg':
                                    case 'jpeg':
                                    case 'png':
                                        $icon = 'fa-file-image text-info';
                                        break;
                                    default:
                                        $icon = 'fa-file text-secondary';
                                }

                                $url = base_url('uploads/' . $file['nombre_guardado']);
                            ?>

                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <div>
                                    <i class="fa-regular <?= $icon ?> me-2"></i>
                                    <?= esc($file['nombre_original']) ?>
                                    <small class="text-muted ms-2">
                                        (<?= strtoupper($file['extension']) ?> · <?= round($file['size']/1024, 1) ?> KB)
                                    </small>
                                </div>

                                <a href="<?= $url ?>" target="_blank" class="btn btn-sm btn-outline-secondary">
                                    <i class="fa-solid fa-download"></i>
                                </a>
                            </li>

                        <?php endforeach; ?>
                    </ul>
                </div>
            <?php endif; ?>

        </div>
    </div>

<?php endforeach; ?>

</div>
<?php 
    if ($gestiones==null) {
        ?>
        <div class="alert alert-info">
            <i class="fa-solid fa-info-circle me-2"></i>
            No hay gestiones registradas para esta solicitud.
        </div>
        <?php
    }
?>
