<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>File Upload and Management</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <style>
    #loadingOverlay {
      z-index: 1050; /* Asegúrate de que el overlay esté por encima de otros elementos */
    }


   /* Estilo para el botón flotante */
   .floating-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1050; /* Asegúrate de que el botón esté por encima de otros elementos */
  }
  .floating-btn .btn {
    width: 60px; /* Ancho del botón */
    height: 60px; /* Altura del botón */
    border-radius: 50%; /* Hace que el botón sea circular */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .preview-item {
    position: relative;
    width: 150px;
    height: 150px;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .preview-item img,
  .preview-item iframe {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
  }

  .remove-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
  }
  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
</head>
<body>
  <div class="container mt-5">
    <h2>Registro de Datos</h2>
    <table id="fileTable" class="table table-striped table-bordered" style="width:100%">
      <thead>
        <tr>
          <th>ID</th>
          <th>Proveedor</th>
          <th>N° de Factura</th>
          <th>N° de Provisión</th>
          <th>Usuario Solicitante</th>
          <th>Usuario de Respuesta</th>
          <th>Año</th>
          <th>Mes</th>
          <th>Día</th>
          <th>Fecha</th>          
          <th>Banco</th>
          <th>Cuenta</th>
          <th>Cantidad de Respuestas</th>
          <th>Estado</th>
          <th>Acciones</th>
        </tr>
      </thead>
      <thead>
        <tr>
          <th><input type="text" class="form-control form-control-sm" placeholder="Buscar ID"></th>
          <th><input type="text" class="form-control form-control-sm" placeholder="Buscar Proveedor"></th>
          <th><input type="text" class="form-control form-control-sm" placeholder="Buscar N° de factura"></th>
          <th><input type="text" class="form-control form-control-sm" placeholder="Buscar N° de Provision"></th>
          <th><input type="text" class="form-control form-control-sm" placeholder="Buscar Usuario Solicitante"></th>
          <th><input type="text" class="form-control form-control-sm" placeholder="Buscar Usuario Respuesta"></th>
          <th><input type="text" class="form-control form-control-sm" placeholder="Buscar Año"></th>
          <th><input type="text" class="form-control form-control-sm" placeholder="Buscar Mes"></th>
          <th><input type="text" class="form-control form-control-sm" placeholder="Buscar Día"></th>
          <th><input type="date" class="form-control form-control-sm" placeholder="Buscar Fecha"></th>          
          <th><input type="text" class="form-control form-control-sm" placeholder="Buscar Banco"></th>
          <th><input type="text" class="form-control form-control-sm" placeholder="Buscar Cuenta"></th>
          <th><input type="text" class="form-control form-control-sm" placeholder="Buscar Respuestas"></th>
          <th><input type="text" class="form-control form-control-sm" placeholder="Buscar Estado"></th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <!-- Aquí se agregarán las filas dinámicamente -->
      </tbody>
    </table>
  </div>

  <!-- Botón flotante -->
  <div class="floating-btn">
    <button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#uploadModal">
      <span class="fs-4">➕</span>
    </button>
  </div>
<!-- Spinner y overlay de carga -->
    <div id="loadingOverlay" class="d-none position-fixed top-0 start-0 w-100 h-100 bg-light bg-opacity-75 d-flex align-items-center justify-content-center">
            <div class="spinner-border text-primary" role="status">
              <span class="visually-hidden">Cargando...</span>
            </div>
    </div>
  <!-- Modal solicitud -->
<div class="modal fade" id="uploadModal" tabindex="-1" aria-labelledby="uploadModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="uploadModalLabel">Agregar Nuevo Registro</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">

        <form id="uploadForm">
          <div class="row">
            <div class="col-md-4 mb-4">
              <label for="provider" class="form-label">Proveedor</label>
              <input type="text" class="form-control" id="provider" name="provider" required>
            </div>
            <div class="col-md-4 mb-4">
              <label for="bank" class="form-label">N° de factura</label>
              <input type="text" class="form-control" id="ninvoice" name="ninvoice" required>
            </div>
            <div class="col-md-4 mb-4">
              <label for="bank" class="form-label">N° de provisión</label>
              <input type="text" class="form-control" id="nprov" name="nprov" required>
            </div>
          </div>
          <div class="mb-3">
            <label for="files" class="form-label">Subir Archivos</label>
            <input type="file" class="form-control" id="files" name="files[]" multiple required>
          </div>
          <div class="preview-container" id="previewContainer">
            <!-- Las previsualizaciones se agregarán aquí dinámicamente -->
          </div>
          <button type="submit" class="btn btn-primary">Guardar</button>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal respuesta -->
<div class="modal fade" id="uploadModalRespuesta" tabindex="-1" aria-labelledby="uploadModalLabelRespuesta" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="uploadModalLabelRespuesta">Responder Registro</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">

        <form id="uploadFormResp">
          <div class="row">
            <div class="col-md-4 mb-4">
              <label for="date" class="form-label">Fecha</label>
              <input type="date" class="form-control" id="date" name="date" required>
            </div>
            <div class="col-md-4 mb-4">
              <label for="bank" class="form-label">Banco</label>
              <select class="form-control" id="bank" name="bank" required onchange="updateAccountOptions()">
                <option value="">Seleccione un banco</option>
                <option value="BBVA">BBVA</option>
                <option value="INTERBANK">INTERBANK</option>
                <option value="BCP">BCP</option>
              </select>
            </div>
            <div class="col-md-4 mb-4">
              <label for="account" class="form-label">Cuenta</label>
              <select class="form-control" id="account" name="account" required>
                <option value="">Seleccione una cuenta</option>
              </select>
            </div>
          </div>
          <div class="mb-3">
            <label for="files" class="form-label">Subir Archivos</label>
            <input type="file" class="form-control" id="filesAgregarResp" name="filesAgregarResp[]" multiple required>
          </div>
          <div class="preview-container" id="previewContainerRespuesta">
            <!-- Las previsualizaciones se agregarán aquí dinámicamente -->
          </div>
          <button type="submit" class="btn btn-primary">Guardar</button>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

  <!-- Modal Para Agregar-->
  <div class="modal fade" id="uploadModalAgregar" tabindex="-1" aria-labelledby="uploadModalLabelAgregar" aria-hidden="true">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="uploadModalLabelAgregar">Agregar al registro existente</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="uploadFormAgregar">
            <div class="mb-3">
              <label for="files" class="form-label">Subir Archivos</label>
              <input type="file" class="form-control" id="filesAgregar" name="filesAgregar[]" multiple required>
            </div>
            <div class="preview-container" id="previewContainerAgregar">
              <!-- Las previsualizaciones se agregarán aquí dinámicamente -->
            </div>
            <button type="submit" class="btn btn-primary">Guardar</button>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        </div>
      </div>
    </div>
  </div>



  <!-- Scripts necesarios -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <!--<script src="js/dataTable.js"></script>
  <script src= "js/uploads.js"></script>-->
  <script>
    const urlParams = new URLSearchParams(window.location.search);

    // Obtiene el valor del parámetro 'user'
    const user = urlParams.get('user');

    const userPattern = /^[\w]+.[\w]+$/;

    // Verifica si el parámetro 'user' cumple con el formato requerido
    if (!user || !userPattern.test(user)) {
        // Redirige a la página de error siguiendo la estructura 'text.text'
        window.location.href = 'http://localhost/error.html';
    }

    // Imprime el valor del parámetro 'user' en la consola
    console.log('Usuario:', user);
    document.addEventListener('DOMContentLoaded', function() {
    // Función para cargar datos desde el backend
    function cargarDatos() {
      fetch('backend/get_datos.php') // Cambia el nombre del archivo PHP según corresponda
        .then(response => response.json())
        .then(data => {
          console.log('Datos cargados:', data);
          if (data.data) {
            mostrarDatosEnTabla(data.data);
          } else {
            console.error('No se encontraron datos en la respuesta.');
          }
        })
        .catch(error => {
          console.error('Error al cargar datos:', error);
        });
    }

    // Función para mostrar los datos en la tabla
    function mostrarDatosEnTabla(datos) {
      const tbody = document.querySelector('#fileTable tbody');
      tbody.innerHTML = ''; // Limpiar contenido existente

      datos.forEach(dato => {
        const estadoBadge = obtenerBadgeEstado(dato.estado);

        const tr = document.createElement('tr');
        tr.innerHTML = `
          <td>${dato.id}</td>
          <td>${dato.proveedor}</td>
          <td>${dato.ninvoice || ''}</td>
          <td>${dato.nprov || ''}</td>
          <td>${dato.usuario_solicitante || ''}</td>
          <td>${dato.usuario_respuesta || ''}</td>
          <td>${dato.año || ''}</td>
          <td>${dato.mes || ''}</td>
          <td>${dato.dia || ''}</td>
          <td>${dato.fecha || ''}</td>
          <td>${dato.banco || ''}</td>
          <td>${dato.cuenta || ''}</td>
          <td>${dato.cantidad}</td>
          <td><span class="badge ${estadoBadge}">${dato.estado || ''}</span></td>
           <td>
          <div class="btn-group">
            <button type="button" class="btn btn-info btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
              Acciones
            </button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item edit-btn" href="#" data-id="${dato.id}" data-accion="responder" data-url="${dato.archivo_url}">Responder</a></li>
              <li><a class="dropdown-item view-btn" href="#" data-id="${dato.id}" data-accion="eliminar">Eliminar</a></li>
              <li><a class="dropdown-item pdf-btn" href="#" data-id="${dato.id}" data-accion="generar-pdf" data-url="${dato.archivo_url}">Ver PDF</a></li>
              <li><a class="dropdown-item add-btn" href="#" data-id="${dato.id}" data-accion="agregar" data-url="${dato.archivo_url}">Agregar</a></li>
            </ul>
          </div>
        `;
        tbody.appendChild(tr);
      });

      // Agregar manejadores de eventos para los botones
      document.querySelectorAll('.dropdown-item').forEach(item => {
        item.addEventListener('click', function(event) {
          event.preventDefault();
          const id = this.getAttribute('data-id');
          const accion = this.getAttribute('data-accion');
          const url = this.getAttribute('data-url');

          //console.log("Se entro al guardado, este es el id", id, "este es la url: ", url, " y esta es la accion: ", accion);
          manejarAccion(id, accion, url, event);
        });
      });
    }

    // Función para manejar las acciones
    function manejarAccion(id, accion, url,event) {
      console.log("Se entro a la funcion: ", id, accion, url);
      if (accion === 'generar-pdf' && url) {
        window.open(url, '_blank'); // Abre la URL en una nueva pestaña
      } 

      if (accion === 'eliminar' && id) {
        fetch(`backend/delete_datos.php?id=${id}&users=${user}`, {
            method: 'POST',
            body: null
        })
        .then(response => {
            // Mostrar la respuesta del servidor en la consola antes de convertirla a JSON
            console.log('Respuesta del servidor:', response);
            return response.json();
        })
        .then(data => {
            console.log('Éxito:', data);
            if (data) {
              document.getElementById('loadingOverlay').classList.add('d-none');
                Swal.fire({
                    title: 'Se elimino el registro',
                    text: data.message,
                    icon: 'success',
                    confirmButtonText: 'Aceptar'
                  }).then(() => {
                // Cerrar el modal
               const modal = new bootstrap.Modal(document.getElementById('uploadModal'));
               modal.hide();
                window.location.reload();
            });
            }
        })
        .catch(error => {
            console.error('Error:', error);
            document.getElementById('loadingOverlay').classList.add('d-none');
            Swal.fire({
                title: 'Error',
                text: 'Ocurrió un problema al eliminar',
                icon: 'error',
                confirmButtonText: 'Aceptar'
            });
        });
      }

      if (accion === 'agregar' && id && url) {

          console.log("Registros desde la condicional: ", id);
          console.log("Registros desde la condicional: ", url);
          event.preventDefault();

          // Mostrar el modal
          const modal = new bootstrap.Modal(document.getElementById('uploadModalAgregar'));
          modal.show();

          // Agregar manejador para el formulario del modal
          document.getElementById('uploadFormAgregar').addEventListener('submit', function(e) {
              e.preventDefault(); // Evita que el formulario se envíe de la manera tradicional

              // Mostrar el overlay de carga
              document.getElementById('loadingOverlay').classList.remove('d-none');

              // Crear un objeto FormData a partir del formulario
              const formData = new FormData(this);

              // Agregar el ID y la URL a los datos del formulario
              formData.append('id', id);
              formData.append('urls', url);
              formData.append('users', user);

              // Log de los archivos y datos que se van a enviar
              console.log('Datos del formulario:', [...formData.entries()]);

              // Enviar la solicitud al backend
              //.then(response => response.json())
              fetch('backend/upgrade_registros.php', {
                  method: 'POST',
                  body: formData
              })
              .then(data => {
                  console.log('Éxito:', data);
                  if (data) {
                      document.getElementById('loadingOverlay').classList.add('d-none');
                      Swal.fire({
                          title: 'Se agregaron los archivos correctamente',
                          text: data.message,
                          icon: 'success',
                          confirmButtonText: 'Aceptar'
                      }).then(() => {
                          const modalInstance = bootstrap.Modal.getInstance(document.getElementById('uploadModalAgregar'));
                          modalInstance.hide();
                          window.location.reload();
                      });
                  }
              })
              .catch(error => {
                  console.error('Error:', error);
                  document.getElementById('loadingOverlay').classList.add('d-none');
                  Swal.fire({
                      title: 'Error',
                      text: 'Ocurrió un problema al subir los archivos.',
                      icon: 'error',
                      confirmButtonText: 'Aceptar'
                  });
              });
          });
      }


      if (accion === 'responder' && id && url) {

        //console.log("Registros desde la condicional: ", id);
        //console.log("Registros desde la condicional: ", url);

          // Evitar el comportamiento por defecto
          event.preventDefault();
          
          // Mostrar el modal
          const modal = new bootstrap.Modal(document.getElementById('uploadModalRespuesta'));
          modal.show();

          document.getElementById('uploadFormResp').addEventListener('submit', function(e) {
              e.preventDefault(); // Evita que el formulario se envíe de la manera tradicional

              // Mostrar el overlay de carga
              document.getElementById('loadingOverlay').classList.remove('d-none');

              // Crear un objeto FormData a partir del formulario
              const formData = new FormData(this);

              // Agregar el ID y la URL a los datos del formulario
              formData.append('id', id);
              formData.append('urls', url);
              formData.append('users', user);

              // Log de los archivos y datos que se van a enviar
              console.log('Datos del formulario responder:', [...formData.entries()]);

              // Enviar la solicitud al backend
              fetch('backend/resp_registros.php', {
                  method: 'POST',
                  body: formData
              })
              .then(response => response.json())
              .then(data => {
                  console.log('Éxito:', data);
                  if (data) {
                      document.getElementById('loadingOverlay').classList.add('d-none');
                      Swal.fire({
                          title: 'Se agregaron los archivos correctamente',
                          text: data.message,
                          icon: 'success',
                          confirmButtonText: 'Aceptar'
                      }).then(() => {
                          const modal = bootstrap.Modal.getInstance(document.getElementById('uploadModalRespuesta'));
                          modal.hide();
                          window.location.reload();
                      });
                  }
              })
              .catch(error => {
                  console.error('Error:', error);
                  document.getElementById('loadingOverlay').classList.add('d-none');
                  Swal.fire({
                      title: 'Error',
                      text: 'Ocurrió un problema al subir los archivos.',
                      icon: 'error',
                      confirmButtonText: 'Aceptar'
                  });
              });
          });
      }



    }

    // Función para obtener la clase del badge según el estado
    function obtenerBadgeEstado(estado) {
      switch (estado) {
        case 'Solicitado':
          return 'bg-warning text-dark'; // Amarillo
        case 'Respondido':
          return 'bg-success'; // Verde
        case 'Actualizado':
          return 'bg-primary'; // Azul
        case 'Eliminado':
          return 'bg-danger'; // Rojo
        default:
          return 'bg-secondary'; // Gris para estados desconocidos
      }
    }

    // Cargar datos al cargar la página
    cargarDatos();
  });
</script>


  <script>
    const urlParams = new URLSearchParams(window.location.search);

    // Obtiene el valor del parámetro 'user'
    const user = urlParams.get('user');

    // Imprime el valor del parámetro 'user' en la consola
    console.log('Usuario:', user);

    document.getElementById('uploadForm').addEventListener('submit', function(event) {
        event.preventDefault();
        
        document.getElementById('loadingOverlay').classList.remove('d-none');

        const formData = new FormData(this);

        // Mostrar contenido de FormData en consola
        console.log('Contenido de FormData:');
        formData.append('user_create', user);
        for (const [key, value] of formData.entries()) {
            if (value instanceof File) {
                // Imprimir detalles del objeto File
                console.log(`${key}:`);
                console.dir(value); // Esto muestra el objeto File completo en la consola
                console.log(`  Nombre del archivo: ${value.name}`);
                console.log(`  Tamaño del archivo: ${value.size} bytes`);
                console.log(`  Tipo del archivo: ${value.type}`);
            } else {
                console.log(`${key}: ${value}`);
            }
        }
        

        fetch('backend/uploads.php', {
            method: 'POST',
            body: formData
        })
        .then(response => {
            // Mostrar la respuesta del servidor en la consola antes de convertirla a JSON
            console.log('Respuesta del servidor:', response);
            return response.json();
        })
        .then(data => {
            console.log('Éxito:', data);
            if (data.message) {
              document.getElementById('loadingOverlay').classList.add('d-none');
                Swal.fire({
                    title: 'Éxito',
                    text: data.message,
                    icon: 'success',
                    confirmButtonText: 'Aceptar'
                  }).then(() => {
                // Cerrar el modal
                const modal = new bootstrap.Modal(document.getElementById('uploadModal'));
                modal.hide();
                window.location.reload();
            });
            }
        })
        .catch(error => {
            console.error('Error:', error);
            document.getElementById('loadingOverlay').classList.add('d-none');
            Swal.fire({
                title: 'Error',
                text: 'Ocurrió un problema al subir los archivos.',
                icon: 'error',
                confirmButtonText: 'Aceptar'
            });
        });
    });

  </script>

  <script>
    // Filtrar datos
    document.querySelectorAll('#fileTable thead input').forEach((input, index) => {
      input.addEventListener('input', () => {
        const column = input.dataset.column;
        const value = input.value.toLowerCase();
        document.querySelectorAll('#fileTable tbody tr').forEach(row => {
          const cellText = Array.from(row.children).map((cell, i) => {
            if (i === 4) { // La celda "Fecha" ocupa dos columnas
              return row.children[i].textContent.toLowerCase() + row.children[i + 1].textContent.toLowerCase();
            }
            return cell.textContent.toLowerCase();
          });
          const isMatch = cellText.some(cell => cell.includes(value));
          row.style.display = isMatch ? '' : 'none';
        });
      });
    });
  </script>
  <script>
  function updateAccountOptions() {
    var bank = document.getElementById('bank').value;
    var account = document.getElementById('account');
    var options = [];

    if (bank === 'BBVA') {
      options = ['BBVA SOLES', 'BBVA DOLARES', 'BBVA SOLES AUXILIAR', 'BBVA DOLARES AUXILIAR'];
    } else if (bank === 'INTERBANK') {
      options = ['INTERBANK SOLES', 'INTERBANK DOLARES'];
    } else if (bank === 'BCP') {
      options = ['BCP SOLES', 'BCP DOLARES'];
    }

    // Limpiar las opciones anteriores
    account.innerHTML = '<option value="">Seleccione una cuenta</option>';

    // Añadir las nuevas opciones
    options.forEach(function(option) {
      var opt = document.createElement('option');
      opt.value = option;
      opt.textContent = option;
      account.appendChild(opt);
    });
  }
</script>
</body>
</html>
