<?php
include("conexion.php");
session_start();

// Obtener datos del usuario actual
$id_usuario = $_SESSION['id_usuario'];
$usuario = $conexion->query("SELECT * FROM usuarios_sistema WHERE id_usuario = $id_usuario")->fetch_assoc();
$rol_actual = $usuario['rol'];
$id_empresa_usuario = $usuario['id_empresa'];

$bodegas_disponibles = [];

if ($rol_actual === 'admin_general') {
    $empresas = $conexion->query("SELECT * FROM empresas");
    $bodegas_disponibles = $conexion->query("SELECT * FROM bodegas");
} elseif ($rol_actual === 'admin_empresa') {
    $bodegas_disponibles = $conexion->query("SELECT * FROM bodegas WHERE id_empresa = $id_empresa_usuario");
}
?>

 <!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">
     
<!-- EMPRESAS -->
<div class="card filter-menu h-12 px-4 py-3 rounded-full bg-gray-200 w-1/2 flex justify-between items-center mt-4">
    
</div>

<!-- BODEGAS -->
<div class="card filter-menu h-12 px-4 py-3 rounded-full bg-gray-200 w-1/2 flex justify-between items-center mt-4">
    <div class="options flex items-center py-2" id="bodegas"></div>
</div>

 


    </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>


    <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 Usuarios</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 que activa el modal -->
    <button id="openModalButton" class="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700">
        Registrar Usuario
    </button>

            </div>
        </div>



<table class="w-full table-auto border-collapse">
    <thead>
        <tr class="bg-blue-600 text-white">
            <th class="px-4 py-2">ID</th>
            <th class="px-4 py-2">Nombre de Usuario</th>
            <th class="px-4 py-2">Nombre Completo</th>
            <th class="px-4 py-2">Correo</th>
            <th class="px-4 py-2">Rol</th>
            <th class="px-4 py-2">Acciones</th> <!-- Columna para el botón de Editar -->
        </tr>
    </thead>
    <tbody id="tablaUsuarios">
        <!-- Los usuarios se cargarán aquí -->
    </tbody>
</table>


    </div>
</div>


  </div>

</div> 

    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


    <!-- Modal -->
    <div id="modal" class="hidden fixed inset-0 flex items-center justify-center z-50">
        <div class="modal-backdrop" id="modalBackdrop"></div>
        
        <div class="bg-white shadow-lg rounded-lg p-8 max-w-2xl mx-auto relative">
            <!-- Botón para cerrar el modal -->
            <button id="closeModalButton" class="absolute top-2 right-2 text-gray-500 hover:text-gray-700">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>

            <!-- Mostrar rol actual -->
            <div class="bg-blue-100 border border-blue-300 text-blue-800 px-4 py-3 rounded mb-6 flex items-center">
                <svg class="h-5 w-5 mr-2 text-blue-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M12 20c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8z"/>
                </svg>
                <span class="font-semibold">Estás registrado como:</span>
                <span class="ml-2 font-bold uppercase"><?= strtoupper($rol_actual) ?></span>
            </div>

            <h2 class="text-xl font-bold mb-4">👤 Registrar Nuevo Usuario</h2>

          <form id="formRegistroUsuario">

                <label class="block font-semibold mb-1">Nombre de Usuario:</label>
                <input type="text" name="nombre_usuario" class="w-full border rounded px-3 py-2 mb-4" required>

                <label class="block font-semibold mb-1">Nombre Completo:</label>
                <input type="text" name="nom_completo" class="w-full border rounded px-3 py-2 mb-4" required>

                <label class="block font-semibold mb-1">Correo:</label>
                <input type="email" name="correo" class="w-full border rounded px-3 py-2 mb-4">

                <label class="block font-semibold mb-1">Contraseña:</label>
                <input type="password" name="password" class="w-full border rounded px-3 py-2 mb-4" required>

                <label class="block font-semibold mb-1">Rol:</label>
                <select name="rol" id="rol" class="w-full border rounded px-3 py-2 mb-4" onchange="toggleBodega()" required>
                    <?php if ($rol_actual === 'admin_general') { ?>
                        <option value="admin_empresa">Admin Empresa</option>
                        <option value="empleado">Empleado</option>
                    <?php } elseif ($rol_actual === 'admin_empresa') { ?>
                        <option value="empleado">Empleado</option>
                    <?php } ?>
                </select>

                <!-- Empresa solo si es admin_general -->
                <?php if ($rol_actual === 'admin_general') { ?>
                    <label class="block font-semibold mb-1">Empresa:</label>
                    <select name="id_empresa" id="empresa" class="w-full border rounded px-3 py-2 mb-4" onchange="cargarBodegas()" required>
                        <?php while ($empresa = $empresas->fetch_assoc()) { ?>
                            <option value="<?= $empresa['id_empresa'] ?>"><?= $empresa['nombre'] ?></option>
                        <?php } ?>
                    </select>
                <?php } else { ?>
                    <input type="hidden" name="id_empresa" value="<?= $id_empresa_usuario ?>">
                <?php } ?>

                <!-- Bodega (solo para empleados) -->
                <div id="bodegaSection" class="hidden">
                    <label class="block font-semibold mb-1">Bodega:</label>
                    <select name="id_bodega" id="bodega" class="w-full border rounded px-3 py-2 mb-4">
                        <option value="">Seleccione una bodega</option>
                        <?php while ($bodega = $bodegas_disponibles->fetch_assoc()) { ?>
                            <option value="<?= $bodega['id_bodega'] ?>"><?= $bodega['nombre'] ?> - <?= $bodega['direccion'] ?></option>
                        <?php } ?>
                    </select>
                    <div id="noBodegas" class="text-red-600 hidden">No hay bodegas disponibles para esta empresa.</div>
                </div>

                <button type="submit" class="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700">
                    Registrar Usuario
                </button>
            </form>
        </div>
    </div>
<script>
document.getElementById('formRegistroUsuario').addEventListener('submit', function (e) {
    e.preventDefault();

    const formData = new FormData(this);

    fetch('guardar_usuario_sistema.php', {
        method: 'POST',
        body: formData
    })
    .then(res => res.json())
    .then(data => {
        if (data.status === 'success') {
            Swal.fire({
                icon: 'success',
                title: '¡Éxito!',
                text: data.message
            });
            this.reset();
            document.getElementById('bodegaSection').classList.add('hidden');
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: data.message
            });
        }
    })
    .catch(error => {
        console.error('Error en red:', error);
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'No se pudo conectar al servidor.'
        });
    });
});
</script>

    <script>
        // Mostrar el modal
        document.getElementById('openModalButton').addEventListener('click', function() {
            document.getElementById('modal').classList.remove('hidden');
        });

        // Cerrar el modal
        document.getElementById('closeModalButton').addEventListener('click', function() {
            document.getElementById('modal').classList.add('hidden');
        });

        // Cerrar el modal al hacer clic fuera de él
        document.getElementById('modalBackdrop').addEventListener('click', function() {
            document.getElementById('modal').classList.add('hidden');
        });

        // Función para cargar bodegas según la empresa seleccionada
        function cargarBodegas() {
            const empresaId = document.getElementById('empresa').value;
            const bodegaSelect = document.getElementById('bodega');
            const noBodegas = document.getElementById('noBodegas');

            fetch(`bodegas.php?empresa_id=${empresaId}`)
                .then(response => response.json())
                .then(bodegas => {
                    bodegaSelect.innerHTML = '<option value="">Seleccione una bodega</option>';
                    if (bodegas.length === 0) {
                        noBodegas.classList.remove('hidden');
                    } else {
                        noBodegas.classList.add('hidden');
                        bodegas.forEach(bodega => {
                            const option = document.createElement('option');
                            option.value = bodega.id_bodega;
                            option.textContent = `${bodega.nombre} - ${bodega.direccion}`;
                            bodegaSelect.appendChild(option);
                        });
                    }
                    toggleBodega();
                });
        }

        // Función para manejar la visibilidad de la sección de bodegas
        function toggleBodega() {
            const rol = document.getElementById('rol').value;
            const bodegaSection = document.getElementById('bodegaSection');
            bodegaSection.classList.toggle('hidden', rol !== 'empleado');
        }

        // Cargar estado de bodegas al cargar la página
        document.addEventListener('DOMContentLoaded', function() {
            toggleBodega();
        });
    </script>

<!-- Modal para Editar Usuario -->
<div id="modalEditar" class="hidden fixed inset-0 flex items-center justify-center z-50">
    <div class="modal-backdrop" id="modalBackdrop"></div>
    <div class="bg-white shadow-lg rounded-lg p-8 max-w-2xl mx-auto relative">
        <button id="closeModalButtonedit" class="absolute top-2 right-2 text-gray-500 hover:text-gray-700">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </button>

        <h2 class="text-xl font-bold mb-4">Editar Usuario</h2>

        <form id="formEditarUsuario">
            <input type="hidden" name="id_usuario" id="id_usuario" />

            <label class="block font-semibold mb-1">Nombre de Usuario:</label>
            <input type="text" name="nombre_usuario" id="nombre_usuario" class="w-full border rounded px-3 py-2 mb-4" required>

            <label class="block font-semibold mb-1">Nombre Completo:</label>
            <input type="text" name="nom_completo" id="nom_completo" class="w-full border rounded px-3 py-2 mb-4" required>

            <label class="block font-semibold mb-1">Correo:</label>
            <input type="email" name="correo" id="correo" class="w-full border rounded px-3 py-2 mb-4" required>

            <label class="block font-semibold mb-1">Contraseña:</label>
            <input type="password" name="password" id="password" class="w-full border rounded px-3 py-2 mb-4" required>

            <button type="submit" class="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700">
                Guardar Cambios
            </button>
        </form>
    </div>
</div>

<script>
    // Función para cargar los usuarios mediante AJAX
   // Función para cargar los usuarios mediante AJAX
function cargarUsuarios() {
    fetch('list_user.php')
        .then(response => response.json())
        .then(data => {
            const tablaUsuarios = document.getElementById('tablaUsuarios');
            tablaUsuarios.innerHTML = ''; // Limpiar tabla antes de llenarla

            // Verificar si se recibieron usuarios
            if (data.status === 'success' && data.data.length > 0) {
                // Recorrer usuarios y crear filas en la tabla
                data.data.forEach(usuario => {
                    const tr = document.createElement('tr');
                    tr.classList.add('border-b', 'border-gray-200');
                    tr.innerHTML = `
                        <td class="px-4 py-2">${usuario.id_usuario}</td>
                        <td class="px-4 py-2">${usuario.nombre_usuario}</td>
                        <td class="px-4 py-2">${usuario.nom_completo}</td>
                        <td class="px-4 py-2">${usuario.correo}</td>
                        <td class="px-4 py-2">${usuario.rol}</td>
                        <td class="px-4 py-2">
                            <button class="bg-yellow-500 text-white px-4 py-2 rounded hover:bg-yellow-600" onclick="editarUsuario(${usuario.id_usuario})">Editar</button>
                        </td>
                    `;
                    tablaUsuarios.appendChild(tr);
                });
            } else {
                tablaUsuarios.innerHTML = `
                    <tr><td colspan="6" class="px-4 py-2 text-center text-red-600">No hay usuarios registrados.</td></tr>
                `;
            }
        })
        .catch(error => {
            console.error('Error al cargar los usuarios:', error);
        });
}



    // Función para abrir el modal de edición y cargar los datos del usuario
    function editarUsuario(id) {
        fetch(`editar_usuario.php?id_usuario=${id}`)
            .then(response => response.json())
            .then(usuario => {
                // Rellenar el formulario de edición con los datos del usuario
                document.getElementById('id_usuario').value = usuario.id_usuario;
                document.getElementById('nombre_usuario').value = usuario.nombre_usuario;
                document.getElementById('nom_completo').value = usuario.nom_completo;
                document.getElementById('correo').value = usuario.correo;
                document.getElementById('password').value = ''; // Dejar el campo de contraseña vacío para no exponerla

                // Mostrar el modal
                document.getElementById('modalEditar').classList.remove('hidden');
            })
            .catch(error => console.error('Error al obtener los datos del usuario:', error));
    }

    // Función para cerrar el modal
    document.getElementById('closeModalButtonedit').addEventListener('click', function() {
        document.getElementById('modalEditar').classList.add('hidden');
    });

    // Función para manejar el envío del formulario de edición
    document.getElementById('formEditarUsuario').addEventListener('submit', function(event) {
        event.preventDefault();
        
        const formData = new FormData(this);
        
        fetch('actualizar_usuario.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Usuario actualizado con éxito.');
                document.getElementById('modalEditar').classList.add('hidden');
                cargarUsuarios(); // Recargar la lista de usuarios
            } else {
                alert('Error al actualizar el usuario.');
            }
        })
        .catch(error => console.error('Error al actualizar el usuario:', error));
    });

    // Cargar los usuarios cuando la página esté completamente cargada
    document.addEventListener('DOMContentLoaded', cargarUsuarios);
</script>
