<!--
=========================================================
* Soft UI Dashboard 3 - v1.1.0
=========================================================

* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard
* Copyright 2024 Creative Tim (https://www.creative-tim.com)
* Licensed under MIT (https://www.creative-tim.com/license)
* Coded by Creative Tim

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-->
<?php
session_start();
if (!isset($_SESSION['usuario'])) {
    header("Location: login.php");
    exit();
}

$usuario = $_SESSION['usuario'];
$nombre = $usuario['nombre'];
$cargo = $usuario['cargo'];
$foto = $usuario['foto'];
?>

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>nn</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.0.4/tailwind.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">

<!-- partial:index.partial.html -->
<div class="relative bg-gray-100 min-h-screen flex" id="app">
 <?php include 'menu.php' ?>

<div class="w-full" style="margin-left: 50px;">
     <?php include 'user.php' ?>
    <div class="px-16 bg-header flex items-center">
      <div class="filter-menu h-12 px-4 py-3 rounded-full bg-gray-200 w-1/2 flex justify-between items-center">
        <span class="text-white text-xs">Mostrar solo: </span>
        <div class="options flex items-center py-2">
          <button class="text-xs font-thin p-1 border-2 text-white rounded-full w-24 hover:bg-white hover:text-black mr-4">Todos</button>
           <button class="text-xs flex items-center justify-between opacity-50 font-thin py-1 border-2 text-white rounded-full w-26 hover:bg-white hover:text-black mr-4 px-2">
             Confirmados
             <img class="pl-1 h-4 w-4" src="https://image.flaticon.com/icons/svg/443/443138.svg"/>
          </button>
           <button class="text-xs flex items-center justify-between opacity-50 font-thin py-1 border-2 text-white rounded-full w-26 hover:bg-white hover:text-black mr-4 px-4">
             Pendientes
             <img class="pl-1 h-4 w-4" src="https://image.flaticon.com/icons/svg/189/189106.svg"/>
          </button>
            <button class="text-xs flex items-center justify-between opacity-50 font-thin py-1 border-2 text-white rounded-full w-26 hover:bg-white hover:text-black px-2">
             Cancelados
             <img class="pl-1 h-3 w-3" src="https://image.flaticon.com/icons/svg/579/579006.svg"/>
          </button>
        </div>
      </div>
       <?php if ($cargo === 'logistico'): ?>
    <div class="ml-4 filter-menu h-12 p-btn rounded-full bg-gray-200 w-48 flex justify-between items-center">
  <div class="bg-green-500 hover:bg-green-400 cursor-pointer flex justify-center items-center rounded-full w-full text-white">
    <label for="archivo_excel" class="flex justify-center items-center rounded-full w-full text-white px-4 py-2 transition duration-300">
        <i class="fas fa-file-excel h-4 w-4 mr-3"></i> <!-- Ícono de Excel de Font Awesome -->
        <span class="font-hairline">Cargar Excel</span>
    </label>
    <input type="file" id="archivo_excel" name="archivo_excel" class="hidden" required />
  </div>
</div>
<?php else: ?>
 <!-- Ícono de bloqueo si no es 'logistico' -->
    <div class="ml-4 filter-menu h-12 p-btn rounded-full bg-gray-200 w-48 flex justify-between items-center">
        <i class="fas fa-lock h-5 w-5 text-red-500 mr-2"></i>
        <span>No tienes permisos</span>
    </div>
<?php endif; ?>

<div class="ml-4 filter-menu h-12 p-btn rounded-full bg-gray-200 w-48 flex justify-between items-center">
  <!-- Nombre del archivo seleccionado -->
  <div id="fileName" class="flex justify-center items-center rounded-full w-full text-white px-4 py-2 transition duration-300 hidden">
    <i class="fas fa-file-excel h-5 w-5 text-green-500 mr-2"></i>
    <span id="selectedFileName">No se ha seleccionado ningún archivo</span>
  </div>
</div>

<div class="ml-4 filter-menu h-12 p-btn rounded-full bg-gray-200 w-48 flex justify-between items-center">
  <!-- Botón Procesar, inicialmente oculto -->
  <button id="processButton" class="flex justify-center items-center rounded-full w-full text-white px-4 py-2 transition duration-300 hidden">
      Procesar
  </button>
  
  <!-- Indicador de carga -->
  <div id="loadingIndicator" class="hidden flex justify-center items-center mt-4">
      <div class="spinner-border animate-spin inline-block w-8 h-8 border-4 border-solid border-gray-200 border-t-blue-500 rounded-full" role="status">
          <span class="sr-only">Cargando...</span>
      </div>
  </div>
</div>

    </div>
    <div class="bg-header flex  px-16 pt-4 items-baseline">
    <h4 class="text-xl font-bold text-white w-1/2">Hoy</h4>  
      <p class="w-48 italic text-sm opacity-75 text-white font-hairline text-right">Reunión en 19 minutos</p>
    </div>
  <header class="h-16  bg-header w-full  rounded-bl-full">
</header>
    <app-klatsch v-bind:klatsch="today"></app-klatsch> 
<div class="flex px-8 items-center today-card bg-white shadow-lg ml-16 h-28 rounded-custom border-l-8 border-blue-500">
  <div class="flex justify-between items-center w-full gap-8">
    
    <!-- Confirmados -->
    <div class="flex flex-col items-center text-center">
      <div class="h-12 w-12 rounded-full flex items-center justify-center bg-green-500 text-white hover:bg-green-600 transition duration-300 shadow-lg">
        <i class="fas fa-check text-lg"></i>
      </div>
      <div class="mt-2">
        <span class="text-2xl font-semibold text-gray-900" id="seriales_usados">5</span>
        <span class="text-sm text-gray-500 block">Liquidados</span>
      </div>
    </div>

    <!-- Pendientes -->
    <div class="flex flex-col items-center text-center">
      <div class="h-12 w-12 rounded-full flex items-center justify-center bg-yellow-500 text-white hover:bg-yellow-600 transition duration-300 shadow-lg">
        <i class="fas fa-clock text-lg"></i>
      </div>
      <div class="mt-2">
        <span class="text-2xl font-semibold text-gray-900" id="seriales_no_usados">3</span>
        <span class="text-sm text-gray-500 block">Pendiente</span>
      </div>
    </div>

  </div>
</div>


    <div class="px-16 pt-8 content">
      <div class="h-2 border-gray-200 border-t-2 w-2/3"></div>
  
  </div>
      <div class="klatsch-grid">
    <app-klatsch v-for="kl in upcoming" v-bind:klatsch="kl"></app-klatsch>
       <!-- Sección de Tabla -->
  
    </div>
<div class="mx-4 py-3 px-8 bg-white shadow-lg ml-16 rounded-lg" style="border-left: 8px solid #572073;">
    <div class="w-full"> <div class="font-extrabold text-xl text-gray-900 mb-4">Lista de Seriados</div>
        <div class="flex justify-between items-center mb-4">

            <!-- Buscador -->
            <div class="flex items-center">
                <input type="text" placeholder="Buscar..." id="searchSerie" class="px-4 py-2 border border-gray-300 rounded-lg text-sm w-64 focus:outline-none focus:ring-2 focus:ring-indigo-500">
            </div>
            
            <!-- Botones Exportar con íconos -->
            <div class="flex items-center">
                <!-- Botón Exportar Excel -->
                <a href="exportar_excel_seriado.php"  class="flex items-center bg-green-500 text-white py-2 px-6 rounded-lg hover:bg-green-700 focus:outline-none mr-2">
                    <!-- Ícono de Excel -->
                    <i class="fas fa-file-excel h-4 w-4 mr-3"></i>
                    Exportar Excel
                </a>
                <!-- Botón Nuevo: Exportar PDF -->
                <button class="flex items-center bg-blue-500 text-white py-2 px-6 rounded-lg hover:bg-blue-700 focus:outline-none">
                    <!-- Ícono de PDF -->
                    <i class="fas fa-file-pdf h-4 w-4 mr-3"></i>
                    Exportar PDF
                </button>
            </div>
        </div>

       
      


 <div id="lista_seriados" class="overflow-x-auto">
            <!-- Aquí se carga la tabla -->
        </div>

    </div>
</div>


  </div>

</div> 

    </div>
</body>
</html>


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Subir Excel y Listar Seriales</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  
<!-- SweetAlert2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">

<!-- SweetAlert2 JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>

    <script>
        $(document).ready(function () {
  // Función para cargar la lista de registros
    function cargarLista() {
        // Obtener el valor de búsqueda
        var search = $("#searchSerie").val();

        // Cargar la lista de registros con el valor de búsqueda
        $("#lista_seriados").load("listar_seriados.php?search=" + search, function() {
            // Aquí podrías agregar cualquier acción extra cuando se termine de cargar la lista, si lo necesitas
        });
    }

    // Ejecutar la función cargarLista cuando el campo de búsqueda cambie
    $("#searchSerie").on("input", function () {
        cargarLista();
    });

    // Cargar la lista al inicio
    cargarLista();
   actualizarContadores();
    // Mostrar el nombre del archivo seleccionado y el botón de procesar
    $("#archivo_excel").on("change", function () {
        var fileName = this.files[0].name;
        $("#selectedFileName").text(fileName);
        $("#fileName").removeClass("hidden");  // Muestra el nombre del archivo
        $("#processButton").removeClass("hidden");  // Muestra el botón de procesar
    });

    // Procesar el archivo cuando se hace clic en el botón
    $("#processButton").on("click", function () {
        // Mostrar el indicador de carga
        $("#loadingIndicator").removeClass("hidden");

        var formData = new FormData();
        formData.append("archivo_excel", $("#archivo_excel")[0].files[0]);

        // Realizar la solicitud AJAX para procesar el archivo
        $.ajax({
            url: "procesar_seriados.php",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function (response) {
                var data = JSON.parse(response);  // Parsear la respuesta JSON

                if (data.status === 'success') {
                    // Mostrar alerta de éxito
                    Swal.fire({
                        icon: 'success',
                        title: '¡Éxito!',
                        text: 'Se insertaron ' + data.inserted + ' registros. ' + data.duplicates + ' registros fueron duplicados.',
                        background: '#d4edda', // Color de fondo verde
                        confirmButtonColor: '#28a745' // Color del botón de confirmación
                    });
                    cargarLista(); // Recargar la lista de datos
                } else {
                    // Mostrar alerta de error
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: data.message,
                        background: '#f8d7da', // Color de fondo rojo
                        confirmButtonColor: '#dc3545' // Color del botón de confirmación
                    });
                }
            },
            error: function () {
                // Mostrar alerta de error si falla la solicitud AJAX
                Swal.fire({
                    icon: 'error',
                    title: 'Error de Conexión',
                    text: 'Hubo un error al procesar la solicitud.',
                    background: '#f8d7da', // Color de fondo rojo
                    confirmButtonColor: '#dc3545' // Color del botón de confirmación
                });
            },
            complete: function () {
                // Ocultar el indicador de carga cuando termine el proceso
                $("#loadingIndicator").addClass("hidden");
            }
        });
    });

    // Función para cambiar el estado de una serie
    function cambiarEstado(id) {
        $.post("actualizar_estado.php", { id: id }, function (respuesta) {
            mostrarAlerta(respuesta, 'bg-blue-500');
            cargarLista();  // Recargar la lista después de cambiar el estado
        });
    }

    // Función para mostrar alertas en la interfaz
    function mostrarAlerta(mensaje, color) {
        let alerta = $('<div class="fixed top-5 right-5 px-4 py-2 text-white rounded shadow-lg ' + color + '">' + mensaje + '</div>');
        $('body').append(alerta);
        setTimeout(() => alerta.fadeOut(500, () => alerta.remove()), 3000);
    }

    // Función para actualizar los contadores de series
    function actualizarContadores() {
        $.getJSON("contadores_series.php", function (data) {
            $("#seriales_usados").text(data.usados + " ");
            $("#seriales_no_usados").text(data.no_usados + " ");
        }).fail(function () {
            mostrarAlerta("Error al cargar contadores", "bg-red-500");
        });
    }

});

    </script>