<?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'];

// Obtener las empresas disponibles (solo si el usuario es 'admin_general')
if ($rol_actual === 'admin_general') {
    $empresas_query = $conexion->query("SELECT * FROM empresas");
} else {
    $empresas_query = $conexion->query("SELECT * FROM empresas 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 Parnes y Proveedores</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 para abrir el modal -->
    <button id="openModalButton" class="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700">
        Registrar Parne o Proveedor
    </button>
            </div>
        </div>

        <table class="w-full table-auto border-collapse mb-6" id="tablaParnes">
            <thead>
                <tr class="bg-blue-600 text-white">
                    <th class="px-4 py-2">Nombre</th>
                    <th class="px-4 py-2">RUC</th>
                    <th class="px-4 py-2">Dirección</th>
                    <th class="px-4 py-2">Número</th>
                </tr>
            </thead>
            <tbody>
                <!-- Los parnes se cargarán aquí -->
            </tbody>
        </table>

        <h2 class="text-xl font-bold mb-4">Proveedores Registrados</h2>
        <table class="w-full table-auto border-collapse" id="tablaProveedores">
            <thead>
                <tr class="bg-green-600 text-white">
                    <th class="px-4 py-2">Nombre</th>
                    <th class="px-4 py-2">RUC</th>
                    <th class="px-4 py-2">Dirección</th>
                    <th class="px-4 py-2">Número</th>
                </tr>
            </thead>
            <tbody>
                <!-- Los proveedores 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="fixed inset-0  bg-opacity-50 hidden justify-center items-center">
        <div class="bg-white shadow-lg rounded-lg p-8 max-w-2xl mx-auto">
            <h2 class="text-xl font-bold mb-4">👤 Registrar Parne o Proveedor</h2>

         <form id="registroParneProveedor">

                <!-- Campo de tipo: Parne o Proveedor -->
                <label class="block font-semibold mb-1">Tipo:</label>
                <select name="tipo" class="w-full border rounded px-3 py-2 mb-4" required>
                    <option value="parne">Parne</option>
                    <option value="proveedor">Proveedor</option>
                </select>

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

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

                <!-- Campo de dirección -->
                <label class="block font-semibold mb-1">Dirección:</label>
                <input type="text" name="direccion" class="w-full border rounded px-3 py-2 mb-4" required>

                <!-- Campo de número -->
                <label class="block font-semibold mb-1">Número:</label>
                <input type="text" name="numero" class="w-full border rounded px-3 py-2 mb-4" required>

                <!-- Selección de empresa (solo si el usuario es 'admin_general') -->
                <?php if ($rol_actual === 'admin_general'): ?>
                    <label class="block font-semibold mb-1">Empresa:</label>
                    <select name="id_empresa" class="w-full border rounded px-3 py-2 mb-4" required>
                        <?php while ($empresa = $empresas_query->fetch_assoc()): ?>
                            <option value="<?= $empresa['id_empresa'] ?>"><?= $empresa['nombre'] ?></option>
                        <?php endwhile; ?>
                    </select>
                <?php else: ?>
                    <input type="hidden" name="id_empresa" value="<?= $id_empresa_usuario ?>">
                <?php endif; ?>

                <!-- Botón de registro -->
                <button type="submit" class="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700">
                    Registrar
                </button>
            </form>

            <!-- Botón para cerrar el modal -->
            <button id="closeModalButton" class="absolute top-0 right-0 p-2 text-gray-600">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>
    </div>
<script>
document.getElementById('registroParneProveedor').addEventListener('submit', function (e) {
    e.preventDefault(); // Evita que se recargue la página

    const formData = new FormData(this);

    fetch('guardar_parne_proveedor.php', {
        method: 'POST',
        body: formData
    })
    .then(res => res.json())
    .then(data => {
        if (data.status === 'success') {
            Swal.fire({
                icon: 'success',
                title: '¡Registrado!',
                text: data.message
            });
            document.getElementById('registroParneProveedor').reset();
            // Puedes cerrar el modal si deseas
            document.getElementById('modal').classList.add('hidden');
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: data.message
            });
        }
    })
    .catch(error => {
        console.error('Error:', error);
        Swal.fire({
            icon: 'error',
            title: 'Error de red',
            text: 'No se pudo conectar con el servidor.'
        });
    });
});
</script>

    <script>
        // Variables
        const modal = document.getElementById('modal');
        const openModalButton = document.getElementById('openModalButton');
        const closeModalButton = document.getElementById('closeModalButton');

        // Función para abrir el modal
        openModalButton.addEventListener('click', () => {
            modal.classList.remove('hidden');
        });

        // Función para cerrar el modal
        closeModalButton.addEventListener('click', () => {
            modal.classList.add('hidden');
        });

        // Cerrar el modal si se hace clic fuera del modal
        window.addEventListener('click', (event) => {
            if (event.target === modal) {
                modal.classList.add('hidden');
            }
        });
    </script>



   

    <script>
        // Función para cargar los parnes y proveedores
        function cargarParnesYProveedores() {
            fetch('obtener_parnes_proveedores.php')
                .then(response => response.json())
                .then(data => {
                    // Limpiar las tablas
                    document.getElementById('tablaParnes').getElementsByTagName('tbody')[0].innerHTML = '';
                    document.getElementById('tablaProveedores').getElementsByTagName('tbody')[0].innerHTML = '';

                    // Cargar los parnes
                    data.parnes.forEach(parne => {
                        const tr = document.createElement('tr');
                        tr.classList.add('border-b', 'border-gray-200');
                        tr.innerHTML = `
                            <td class="px-4 py-2">${parne.nombre}</td>
                            <td class="px-4 py-2">${parne.ruc}</td>
                            <td class="px-4 py-2">${parne.direccion}</td>
                            <td class="px-4 py-2">${parne.numero}</td>
                        `;
                        document.getElementById('tablaParnes').getElementsByTagName('tbody')[0].appendChild(tr);
                    });

                    // Cargar los proveedores
                    data.proveedores.forEach(proveedor => {
                        const tr = document.createElement('tr');
                        tr.classList.add('border-b', 'border-gray-200');
                        tr.innerHTML = `
                            <td class="px-4 py-2">${proveedor.nombre}</td>
                            <td class="px-4 py-2">${proveedor.ruc}</td>
                            <td class="px-4 py-2">${proveedor.direccion}</td>
                            <td class="px-4 py-2">${proveedor.numero}</td>
                        `;
                        document.getElementById('tablaProveedores').getElementsByTagName('tbody')[0].appendChild(tr);
                    });
                })
                .catch(error => console.error('Error al cargar los parnes y proveedores:', error));
        }

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