@include('inc.headersemilleros')


<style>
   .folder {
      display: inline-block;
      margin: 10px;
      padding: 20px;
      text-align: center;
      cursor: pointer;
      color: #FFF;
      background-color: #13a979;
      border-radius: 10px;
      width: 120px;
      height: 120px;
      overflow: hidden;
      /* Asegura que el contenido no desborde */
   }

   .folder-icon {
      font-size: 40px;
   }

   .folder-name {
      margin-top: 10px;
      font-size: 16px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      display: block;
   }

   .folder-name[title]:hover::after {
      content: attr(title);
      position: absolute;
      background-color: #000;
      color: #fff;
      padding: 5px;
      border-radius: 5px;
      white-space: nowrap;
      left: 50%;
      transform: translateX(-50%);
   }

   #files {
      margin-top: 20px;
   }

   table {
      width: 100%;
      border-collapse: collapse;
   }

   table,
   th,
   td {
      border: 1px solid #ddd;
   }

   th,
   td {
      padding: 8px;
      text-align: left;
   }

   th {
      background-color: #f2f2f2;
   }
</style>

<div class="card-datatable" style="width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px;">
   <h2>Carpetas de evidencias Grupo de Investigación</h2>
   <div id="categories"></div>

   <table id="files">
      <thead>
         <tr>
            <th>Nombre Evidencia</th>
            <th>Descargar Evidencia</th>
         </tr>
      </thead>
      <tbody id="files-body">
         <!-- Archivos de la categoría seleccionada serán mostrados aquí -->
      </tbody>
   </table>
</div>

<script>
   var c = 0; // Contador para iterar sobre los datos

   fetch(`https://repositorio.investigacionctgi.com/public/api`)
      .then(response => response.json())
      .then(data => {
         const categories = {}; // Objeto para almacenar categorías y sus archivos

         data.forEach(item => {
            const categoryName = data[c].Categ_Nombre;
            if (!categories[categoryName]) {
               categories[categoryName] = []; // Crear array para la categoría si no existe
            }
            categories[categoryName].push(data[c]); // Agregar item a la categoría correspondiente
            c++; // Incrementar el contador
         });

         const categoriesDiv = document.getElementById('categories');
         const filesBody = document.getElementById('files-body');
         c = 0; // Reiniciar el contador para el siguiente uso

         Object.keys(categories).forEach(categoryName => {
            const folderDiv = document.createElement('div');
            folderDiv.className = 'folder';

            const folderIcon = document.createElement('div');
            folderIcon.className = 'folder-icon';
            folderIcon.innerHTML = '📁'; // Emoji de carpeta

            const folderName = document.createElement('div');
            folderName.className = 'folder-name';
            folderName.textContent = categoryName;
            folderName.title = categoryName; // Agregar el título para mostrar en el tooltip

            folderDiv.appendChild(folderIcon);
            folderDiv.appendChild(folderName);

            folderDiv.onclick = () => {
               filesBody.innerHTML = ''; // Limpiar la vista de archivos
               c = 0; // Reiniciar el contador para iterar sobre los archivos de la categoría seleccionada

               categories[categoryName].forEach(item => {
                  const row = document.createElement('tr');

                  // Crear la celda para el nombre del archivo
                  const nombreCell = document.createElement('td');
                  nombreCell.textContent = categories[categoryName][c].Evi_Nombre;
                  row.appendChild(nombreCell);

                  // Crear la celda para el archivo
                  const archivoCell = document.createElement('td');
                  const archivoLink = document.createElement('a');

                  const fileUrl = `https://repositorio.investigacionctgi.com/public/evidencia/${categories[categoryName][c].id}`;
                  archivoLink.href = fileUrl;
                  archivoLink.textContent = `Descargar ${categories[categoryName][c].Evi_Archivo}`;
                  archivoLink.download = `${categories[categoryName][c].Evi_Archivo}`;
                  archivoCell.appendChild(archivoLink);
                  row.appendChild(archivoCell);

                  filesBody.appendChild(row);
                  c++;
               });
            };

            categoriesDiv.appendChild(folderDiv);
            c = 0;
         });
      })
      .catch(error => console.error('Error:', error));
</script>

@include('inc.footersemilleros')