
<!--
=========================================================
* 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  onclick="abrirModal()" 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-plus-circle h-4 w-4 mr-3" ></i>
                   Agregar
                </button>
            </div>
        </div>

       
      

<h3>Lista de Usuarios</h3>
  <div id="listaUsuarios"></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>


<!-- Modal para registrar usuario -->
<div id="registroModal" class="modal" style="display:none;">
  <div class="modal-content">
    <h3 class="modal-header">Registrar Usuario</h3>
    <form id="registroForm" enctype="multipart/form-data">
      <div class="form-group">
        <label>Usuario:</label><br>
        <input type="text" name="usuario" required class="form-input"><br><br>

        <label>Contraseña:</label><br>
        <input type="password" name="contrasena" required class="form-input"><br><br>

        <label>Nombre completo:</label><br>
        <input type="text" name="nombre" required class="form-input"><br><br>

        <label>Cargo:</label><br>
        <select name="cargo" required class="form-input">
          <option value="admin">Admin</option>
          <option value="logistico">Logístico</option>
          <option value="logistico_pro">Logístico Pro</option>
          <option value="piloto">Piloto</option>
        </select><br><br>

        <label>Foto de perfil:</label><br>
        <input type="file" name="foto" accept="image/*" required class="form-input"><br><br>

        <button type="submit" class="btn-submit">Registrar Usuario</button>
        <button type="button" onclick="cerrarModalre()" class="btn-cancel">Cancelar</button>
      </div>
    </form>
  </div>
</div>

<!-- Mostrar mensaje de registro -->
<div id="mensaje"></div>

<!-- Estilos CSS -->
<style>
  /* Estilo para el botón de abrir modal */
  .btn-registrar {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .btn-registrar:hover {
    background-color: #0056b3;
  }

  /* Estilo general del modal */
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

  .modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    width: 400px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  /* Encabezado del modal */
  .modal-header {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
  }

  /* Estilo para los campos de formulario */
  .form-group label {
    font-size: 16px;
    color: #333;
  }

  .form-input {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s ease;
  }

  .form-input:focus {
    border-color: #007bff;
    outline: none;
  }

  /* Botones dentro del modal */
  .btn-submit {
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-right: 10px;
  }

  .btn-submit:hover {
    background-color: #218838;
  }

  .btn-cancel {
    background-color: #dc3545;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .btn-cancel:hover {
    background-color: #c82333;
  }

  /* Mensajes de registro */
  #mensaje {
    text-align: center;
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
  }

</style>

<script>
  // Función para abrir el modal
  function abrirModal() {
    document.getElementById('registroModal').style.display = 'flex';
  }

  // Función para cerrar el modal
  function cerrarModalre() {
    document.getElementById('registroModal').style.display = 'none';
  }

  // Manejo del formulario de registro
  document.getElementById('registroForm').addEventListener('submit', function(e) {
    e.preventDefault();
    let formData = new FormData(this);

    fetch('registrar_usuario.php', {
      method: 'POST',
      body: formData
    })
    .then(res => res.text())
    .then(data => {
      if (data.trim() === 'ok') {
        document.getElementById('mensaje').innerText = '✅ Usuario registrado.';
        this.reset();
        cargarUsuarios();
        cerrarModalre(); // Cerrar el modal después de registrar
      } else {
        document.getElementById('mensaje').innerText = '❌ Error: ' + data;
      }
    });
  });

  // Función para cargar usuarios
  function cargarUsuarios() {
    fetch('listar_usuarios_sistema.php')
      .then(res => res.text())
      .then(html => {
        document.getElementById('listaUsuarios').innerHTML = html;
      });
  }

  // Cargar usuarios al abrir la página
  cargarUsuarios();
</script>
<!-- Modal para edición -->
<div id="editarModal" class="modal" style="display:none;">
  <div class="modal-content">
    <h3>Editar Usuario</h3>
    <form id="formEditar" enctype="multipart/form-data">
      <input type="hidden" name="id">
      <input type="hidden" name="foto_actual">

      <label>Usuario:</label><br>
      <input type="text" name="usuario" required><br><br>

      <label>Nombre:</label><br>
      <input type="text" name="nombre" required><br><br>

      <label>Cargo:</label><br>
      <select name="cargo" required>
        <option value="admin">Admin</option>
        <option value="logistico">Logístico</option>
        <option value="logistico_pro">Logístico Pro</option>
        <option value="piloto">Piloto</option>
      </select><br><br>

      <label>Nueva Contraseña (opcional):</label><br>
      <input type="password" name="nueva_contrasena"><br><br>

      <label>Foto (opcional):</label><br>
      <input type="file" name="foto" accept="image/*"><br><br>

      <button type="submit">Guardar Cambios</button>
      <button type="button" onclick="cerrarModal()">Cancelar</button>
    </form>
  </div>
</div>
<style >


h3 {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

label {
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
  font-size: 14px;
  color: #555;
}

input[type="text"],
input[type="password"],
select,
input[type="file"] {
  width: 100%;
  padding: 10px;
  margin: 10px 0 20px 0;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
}

button[type="submit"],
button[type="button"] {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 10px;
}

button[type="submit"]:hover,
button[type="button"]:hover {
  background-color: #0056b3;
}

button[type="button"] {
  background-color: #dc3545;
}

button[type="button"]:hover {
  background-color: #c82333;
}

button[type="submit"]:active,
button[type="button"]:active {
  transform: scale(0.98);
  transition: transform 0.2s ease;
}

/* Estilo para cerrar el modal */
.modal-content button[type="button"] {
  background-color: #dc3545;
}

.modal-content button[type="button"]:hover {
  background-color: #c82333;
}

</style>
<script>
function editarUsuario(usuario) {
  const form = document.getElementById('formEditar');
  form.id.value = usuario.id;
  form.usuario.value = usuario.usuario;
  form.nombre.value = usuario.nombre;
  form.cargo.value = usuario.cargo;
  form.foto_actual.value = usuario.foto;
  document.getElementById('editarModal').style.display = 'block';
}

function cerrarModal() {
  document.getElementById('editarModal').style.display = 'none';
}

document.getElementById('formEditar').addEventListener('submit', function(e) {
  e.preventDefault();
  let formData = new FormData(this);

  fetch('editar_usuario.php', {
    method: 'POST',
    body: formData
  })
  .then(res => res.text())
  .then(data => {
    if (data.trim() === 'ok') {
      alert('✅ Usuario actualizado.');
      cerrarModal();
      cargarUsuarios();
    } else {
      alert('❌ Error: ' + data);
    }
  });
});
</script>
