<?php
session_start();
require 'conexion.php';

// Verificar sesión activa
if (!isset($_SESSION['id_usuario'])) {
    header("Location: login.php");
    exit;
}

$id_usuario = $_SESSION['id_usuario'];
$consulta = $conexion->query("SELECT rol, id_empresa FROM usuarios_sistema WHERE id_usuario = $id_usuario");

if ($consulta && $datos = $consulta->fetch_assoc()) {
    $rol = $datos['rol'];
    $id_empresa_usuario = $datos['id_empresa'];
} else {
    die("No se pudo obtener los datos del usuario.");
}

// Si el rol es admin_empresa, obtener el nombre de la empresa
$empresa_nombre = '';
if ($rol === 'admin_empresa') {
    $empresaQuery = $conexion->query("SELECT nombre FROM empresas WHERE id_empresa = '$id_empresa_usuario'");
    if ($empresaQuery && $row = $empresaQuery->fetch_assoc()) {
        $empresa_nombre = $row['nombre'];
    }
}
?>


 <!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">
    <h2 class="text-xs text-white">1. Selecciona una Empresa</h2>
    <div class="options flex items-center py-2">
        <?php
        if ($rol == 'admin_general') {
            $res_empresas = $conexion->query("SELECT * FROM empresas");
        } else {
            $res_empresas = $conexion->query("SELECT * FROM empresas WHERE id_empresa = $id_empresa_usuario");
        }

        while ($empresa = $res_empresas->fetch_assoc()) {
            echo "<a href='javascript:void(0)' onclick='seleccionarEmpresa({$empresa['id_empresa']})'><button class='boton text-xs font-thin p-1 border-2 text-white rounded-full w-24 hover:bg-white hover:text-black mr-4'>{$empresa['nombre']}</button></a>";
        }
        ?>
    </div>
</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 Ferreteria</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="openModal" class="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 transition">
   Crear Personal
</button>
            </div>
        </div>

 

 <table id="tabla-usuarios" class="min-w-full border border-gray-200 text-left text-xs md:text-sm">
                <thead class="bg-blue-100 text-gray-700 uppercase tracking-wider">
                    <tr>
                        <th class="p-2">ID</th>
                        <th class="p-2">Nombres</th>
                        <th class="p-2">Documento</th>
                        <th class="p-2">F. Nacimiento</th>
                        <th class="p-2">F. Ingreso</th>
                        <th class="p-2">Dirección</th>
                        <th class="p-2">Distrito</th>
                        <th class="p-2">Email</th>
                        <th class="p-2">Teléfono</th>
                        <th class="p-2">Cargo</th>
                        <th class="p-2"># Cuadrilla</th>
                        <th class="p-2">Perfil</th>
                        <th class="p-2">Vehículo</th>
                        <th class="p-2">CTR</th>
                        <th class="p-2">Zona</th>
                        <th class="p-2">Banco</th>
                        <th class="p-2"># Cuenta</th>
                        <th class="p-2">Estado</th>
                        <th class="p-2">Registrado</th>
                    </tr>
                </thead>
                <tbody class="bg-white">
                    <!-- Llenado dinámico por AJAX -->
                </tbody>
            </table>
    </div>
</div>


  </div>

</div> 

    </div>
</body>
</html>  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
    $.ajax({
        url: 'listar_usuarios_masivo.php',
        method: 'GET',
        dataType: 'json',
        success: function(data) {
            let tableRows = '';
            data.forEach(usuario => {
                tableRows += `
                    <tr class="border-b hover:bg-gray-50 transition">
                        <td class="p-2">${usuario.id}</td>
                        <td class="p-2">${usuario.nombres} ${usuario.apellido_paterno} ${usuario.apellido_materno}</td>
                        <td class="p-2">${usuario.tipo_documento} - ${usuario.numero_documento}</td>
                        <td class="p-2">${usuario.fecha_nacimiento}</td>
                        <td class="p-2">${usuario.fecha_ingreso}</td>
                        <td class="p-2">${usuario.direccion}</td>
                        <td class="p-2">${usuario.distrito}</td>
                        <td class="p-2">${usuario.email}</td>
                        <td class="p-2">${usuario.telefono}</td>
                        <td class="p-2">${usuario.cargo}</td>
                        <td class="p-2">${usuario.numero_cuadrilla}</td>
                        <td class="p-2">${usuario.perfil}</td>
                        <td class="p-2">${usuario.vehiculo} ${usuario.placa ? '- ' + usuario.placa : ''}</td>
                        <td class="p-2">${usuario.ctr} ${usuario.numero_ctr ? '- ' + usuario.numero_ctr : ''}</td>
                        <td class="p-2">${usuario.zona_trabajo}</td>
                        <td class="p-2">${usuario.tipo_banco}</td>
                        <td class="p-2">${usuario.numero_cuenta}</td>
                        <td class="p-2">${usuario.estado}</td>
                        <td class="p-2">${usuario.fecha_registro}</td>
                        <td class="p-2">
                            <button 
                                class="ver-credenciales bg-blue-500 hover:bg-blue-600 text-white px-2 py-1 rounded"
                                data-username="${usuario.numero_documento}"
                                data-apellido_p="${usuario.apellido_paterno}"
                                data-apellido_m="${usuario.apellido_materno}"
                                onclick="mostrarCredenciales(this)"
                            >
                                Ver
                            </button>
                        </td>
                    </tr>
                `;
            });
            $('#tabla-usuarios tbody').html(tableRows);
        },
        error: function() {
            alert('Error al cargar los usuarios.');
        }
    });
});
</script>
<script>
function mostrarCredenciales(btn) {
    const username = btn.dataset.username;
    const ap_paterno = btn.dataset.apellido_p;
    const ap_materno = btn.dataset.apellido_m;

    const ultimos_digitos = username.slice(-2);
    const inicial_paterno = ap_paterno.charAt(0).toUpperCase();
    const inicial_materno = ap_materno.charAt(0).toUpperCase();
    const password = (ultimos_digitos + inicial_paterno + inicial_materno + "@").slice(0, 8);

    Swal.fire({
        icon: 'info',
        title: 'Credenciales del Usuario',
        html: `
            <p><strong>Usuario:</strong> ${username}</p>
            <p><strong>Contraseña temporal:</strong> ${password}</p>
            <button class="mt-2 px-3 py-1 bg-blue-600 text-white rounded" onclick="copiarTexto('Usuario: ${username}\\nContraseña: ${password}')">Copiar</button>
        `
    });
}

function copiarTexto(texto) {
    navigator.clipboard.writeText(texto).then(() => {
        Swal.fire('Copiado', 'Credenciales copiadas al portapapeles.', 'success');
    });
}
</script>


  <script>
    $(document).ready(function () {
      $('#empresaSelect').on('change', function () {
        const empresaId = $(this).val();
        if (empresaId) {
          $.get('bodegas.php', { empresa_id: empresaId }, function (data) {
            const bodegas = JSON.parse(data);
            let options = '<option value="">Seleccione una bodega</option>';
            bodegas.forEach(function (bodega) {
              options += `<option value="${bodega.id_bodega}">${bodega.nombre}</option>`;
            });
            $('#bodegaSelect').html(options);
          });
        } else {
          $('#bodegaSelect').html('<option value="">Seleccione una bodega</option>');
        }
      });
    });
  </script>
  <script src="https://cdn.tailwindcss.com"></script>

  <style>
        /* Agregamos estilos para el modal */
        .modal {
            display: none;
            position: fixed;
            z-index: 50;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }
        .modal-content {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            max-width: 900px;
            width: 80%;
            overflow-y: auto;
        }
    </style>


<!-- Modal -->
<div id="modal" class="modal">
    <div class="modal-content">
        <button id="closeModal" class="bg-red-600 text-white px-4 py-2 rounded absolute top-4 right-4">X</button>
        <h2 class="text-3xl font-bold text-center text-blue-700 mb-6">👤 Registro de Usuario</h2>

<form id="registroForm" method="POST" enctype="multipart/form-data" class="space-y-4 grid grid-cols-1 md:grid-cols-2 gap-4">

    <?php if ($rol == 'admin_general'): ?>
        <!-- Empresa -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Empresa:</label>
            <select name="id_empresa" id="empresaSelect" class="w-full border border-gray-300 rounded px-3 py-2">
                <option value="">Seleccione una empresa</option>
                <?php
                  $empresas = $conexion->query("SELECT id_empresa, nombre FROM empresas");
                  while ($empresa = $empresas->fetch_assoc()):
                ?>
                  <option value="<?= $empresa['id_empresa'] ?>"><?= $empresa['nombre'] ?></option>
                <?php endwhile; ?>
            </select>
        </div>

        <!-- Subcontrata -->
        <div id="subcontrataDiv" style="display:none;">
            <label class="block text-sm font-medium text-gray-700 mb-1">Subcontrata:</label>
            <select name="id_subcontrata" id="subcontrataSelect" class="w-full border border-gray-300 rounded px-3 py-2">
                <option value="">Seleccione una subcontrata</option>
            </select>
        </div>

        <!-- Bodega -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Bodega:</label>
            <select name="id_bodega" id="bodegaSelect" class="w-full border border-gray-300 rounded px-3 py-2" required>
                <option value="">Seleccione una bodega</option>
            </select>
        </div>

    <?php elseif ($rol == 'admin_empresa'): ?>
        <input type="hidden" name="id_empresa" value="<?= $id_empresa_usuario ?>">
        <!-- Empresa (para admin_empresa ya seleccionada y bloqueada) -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Empresa:</label>
            <select name="id_empresa" id="empresaSelect" class="w-full border border-gray-300 rounded px-3 py-2 bg-gray-100 cursor-not-allowed" disabled>
                <option value="<?= $id_empresa_usuario ?>"><?= $empresa_nombre ?></option>
            </select>
            <!-- Campo oculto para enviar el valor al backend aunque esté deshabilitado -->
            <input type="hidden" name="id_empresa" value="<?= $id_empresa_usuario ?>">
        </div>

        <!-- Subcontrata -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Subcontrata:</label>
            <select name="id_subcontrata" class="w-full border border-gray-300 rounded px-3 py-2">
                <option value="">Seleccione una subcontrata</option>
                <?php
                  $subcontratas = $conexion->query("SELECT id_subcontrata, nombre_subcontrata FROM subcontratas WHERE id_empresa = $id_empresa_usuario");
                  while ($sub = $subcontratas->fetch_assoc()):
                ?>
                  <option value="<?= $sub['id_subcontrata'] ?>"><?= $sub['nombre_subcontrata'] ?></option>
                <?php endwhile; ?>
            </select>
        </div>

        <!-- Bodega -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Bodega:</label>
            <select name="id_bodega" class="w-full border border-gray-300 rounded px-3 py-2" required>
                <option value="">Seleccione una bodega</option>
                <?php
                  $bodegas = $conexion->query("SELECT id_bodega, nombre FROM bodegas WHERE id_empresa = $id_empresa_usuario");
                  while ($bodega = $bodegas->fetch_assoc()):
                ?>
                  <option value="<?= $bodega['id_bodega'] ?>"><?= $bodega['nombre'] ?></option>
                <?php endwhile; ?>
            </select>
        </div>
    <?php endif; ?>

    <!-- Datos personales (Distribuidos en dos columnas) -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Nombres:</label>
            <input type="text" name="nombres" class="w-full border border-gray-300 rounded px-3 py-2">
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Apellido Paterno:</label>
            <input type="text" name="apellido_paterno" class="w-full border border-gray-300 rounded px-3 py-2">
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Apellido Materno:</label>
            <input type="text" name="apellido_materno" class="w-full border border-gray-300 rounded px-3 py-2">
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de Documento:</label>
            <select name="tipo_documento" class="w-full border border-gray-300 rounded px-3 py-2">
                <option value="DNI">DNI</option>
                <option value="CE">CE</option>
                <option value="PP">PP</option>
                <option value="CI">CI</option>
                <option value="PTP">PTP</option>
            </select>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Número de Documento:</label>
            <input type="text" name="numero_documento" class="w-full border border-gray-300 rounded px-3 py-2">
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Foto DNI:</label>
            <input type="file" name="foto_dni" class="w-full border border-gray-300 rounded px-3 py-2">
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Fecha de Nacimiento:</label>
            <input type="date" name="fecha_nacimiento" class="w-full border border-gray-300 rounded px-3 py-2">
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Fecha de Ingreso:</label>
            <input type="date" name="fecha_ingreso" class="w-full border border-gray-300 rounded px-3 py-2">
        </div>
    </div>

    <!-- Banco y número de cuenta -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de Banco:</label>
            <select name="tipo_banco" class="w-full border border-gray-300 rounded px-3 py-2">
                <option value="">Seleccione un banco</option>
                <option value="BCP">BCP</option>
                <option value="Interbank">Interbank</option>
                <option value="BBVA">BBVA</option>
                <option value="Scotiabank">Scotiabank</option>
                <option value="Banco de la Nacion">Banco de la Nacion</option>
                <option value="BanBif">BanBif</option>
                <option value="Banco Pichincha">Banco Pichincha</option>
                <option value="MiBanco">MiBanco</option>
                <option value="Caja Arequipa">Caja Arequipa</option>
                <option value="Caja Huancayo">Caja Huancayo</option>
                <option value="Caja Sullana">Caja Sullana</option>
                <option value="Caja Piura">Caja Piura</option>
            </select>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Número de Cuenta:</label>
            <input type="text" name="numero_cuenta" class="w-full border border-gray-300 rounded px-3 py-2">
        </div>
    </div>

    <!-- Producción -->
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Productos:</label>
        <select name="produccion" class="w-full border border-gray-300 rounded px-3 py-2">
            <option value="">Seleccione una opción</option>
            <option value="Averias">Averias</option>
            <option value="Alto valor">Alto valor</option>
            <option value="Traslado">Traslado</option>
            <option value="Moto Win">Moto Win</option>
        </select>
    </div>

    <!-- Datos de contacto -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Dirección:</label>
            <input type="text" name="direccion" class="w-full border border-gray-300 rounded px-3 py-2">
        </div>

        <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">Distrito:</label>
    <select name="distrito" class="w-full border border-gray-300 rounded px-3 py-2">
           <option value="" disabled selected>Selecciona un distrito</option>
           <option value="lima">Lima</option>
        <option value="barranco">Barranco</option>
         <option value="Callao">Callao</option>
        <option value="brena">Breña</option>
        <option value="carabayllo">Carabayllo</option>
        <option value="cercado_de_lima">Cercado de Lima</option>
        <option value="chaclacayo">Chaclacayo</option>
        <option value="chorrillos">Chorrillos</option>
        <option value="cieneguilla">Cieneguilla</option>
        <option value="comas">Comas</option>
        <option value="el_agustino">El Agustino</option>
        <option value="independencia">Independencia</option>
        <option value="jesus_maria">Jesús María</option>
        <option value="la_molina">La Molina</option>
        <option value="la_victoria">La Victoria</option>
        <option value="lince">Lince</option>
        <option value="los_olivos">Los Olivos</option>
        <option value="lurigacho">Lurigancho</option>
        <option value="lurin">Lurín</option>
        <option value="magdalena_del_mar">Magdalena del Mar</option>
        <option value="miraflores">Miraflores</option>
        <option value="pachacamac">Pachacámac</option>
        <option value="pucusana">Pucusana</option>
        <option value="pueblo_libre">Pueblo Libre</option>
        <option value="puente_piedra">Puente Piedra</option>
        <option value="punta_hermosa">Punta Hermosa</option>
        <option value="punta_negra">Punta Negra</option>
        <option value="rimac">Rímac</option>
        <option value="san_bartolo">San Bartolo</option>
        <option value="san_borja">San Borja</option>
        <option value="san_isidro">San Isidro</option>
        <option value="san_juan_de_lurigancho">San Juan de Lurigancho</option>
        <option value="san_juan_de_miraflores">San Juan de Miraflores</option>
        <option value="san_luis">San Luis</option>
        <option value="san_martin_de_porres">San Martín de Porres</option>
        <option value="san_miguel">San Miguel</option>
        <option value="santa_anita">Santa Anita</option>
        <option value="santa_maria_del_mar">Santa María del Mar</option>
        <option value="santa_rosa">Santa Rosa</option>
        <option value="santiago_de_surco">Santiago de Surco</option>
        <option value="surquillo">Surquillo</option>
        <option value="villa_el_salvador">Villa El Salvador</option>
        <option value="villa_maria_del_triunfo">Villa María del Triunfo</option>
    </select>
</div>


        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Correo Electrónico:</label>
            <input type="email" name="email" class="w-full border border-gray-300 rounded px-3 py-2" required>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Teléfono:</label>
            <input type="text" name="telefono" class="w-full border border-gray-300 rounded px-3 py-2">
        </div>
         <div>
             <label for="operadores">operadores:</label>
<select id="operadores" name="operadores">
    <option value="" disabled selected>Selecciona un operador</option>
    <option value="movistar">Movistar</option>
    <option value="claro">Claro</option>
    <option value="entel">Entel</option>
    <option value="bitel">Bitel</option>
</select>


          </div>
    </div>

    <!-- Cargo -->
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Cargo:</label>
        <select name="cargo" class="w-full border border-gray-300 rounded px-3 py-2" required>
            <option value="Tecnico de Campo">Técnico de Campo</option>
            <option value="Supervisor">Supervisor</option>
            <option value="Coordinador de Certificaciones">Coordinador de Certificaciones</option>
            <option value="Coordinador de Operaciones">Coordinador de Operaciones</option>
            <option value="Gerente General">Gerente General</option>
        </select>
    </div>

    <!-- Nuevos campos -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Perfil:</label>
            <select name="perfil" class="w-full border border-gray-300 rounded px-3 py-2">
                <option value="T1">T1</option>
                <option value="T2">T2</option>
            </select>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Número de Cuadrilla:</label>
            <input type="text" name="numero_cuadrilla" class="w-full border border-gray-300 rounded px-3 py-2">
        </div>
    </div>
 <div> 
 <div class="mb-4">
    <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de contrato:</label>
    <select name="tipo_contrato" id="tipo_contrato" class="w-full border border-gray-300 rounded px-3 py-2" onchange="mostrarMonto()">
        <option value="">Seleccione una opción</option>
        <option value="sueldo">Sueldo</option>
        <option value="produccion">Producción</option>
    </select>
</div>

<div class="mb-4" id="campo_monto" style="display: none;">
    <label class="block text-sm font-medium text-gray-700 mb-1">Monto del sueldo (S/):</label>
    <input type="number" step="0.01" name="monto_sueldo" class="w-full border border-gray-300 rounded px-3 py-2">
</div>

<script>
    function mostrarMonto() {
        var tipo = document.getElementById("tipo_contrato").value;
        var campoMonto = document.getElementById("campo_monto");
        if (tipo === "sueldo") {
            campoMonto.style.display = "block";
        } else {
            campoMonto.style.display = "none";
        }
    }
</script>

 </div>
    <!-- Vehículo -->
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">¿Cuenta con vehículo?</label>
        <select name="vehiculo" id="vehiculoSelect" class="w-full border border-gray-300 rounded px-3 py-2">
            <option value="No">No</option>
            <option value="Sí">Sí</option>
        </select>
    </div>

    <div id="placaDiv" style="display: none;">
        <label class="block text-sm font-medium text-gray-700 mb-1">Placa del Vehículo:</label>
        <input type="text" name="placa" class="w-full border border-gray-300 rounded px-3 py-2">
    </div>

    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">¿Tiene contrato SCTR?</label>
        <select name="ctr" id="ctrSelect" class="w-full border border-gray-300 rounded px-3 py-2">
            <option value="No">No</option>
            <option value="Sí">Sí</option>
        </select>
    </div>

    <div id="ctrNumeroDiv" style="display: none;">
        <label class="block text-sm font-medium text-gray-700 mb-1">Número de CTR:</label>
        <input type="text" name="numero_ctr" class="w-full border border-gray-300 rounded px-3 py-2">
    </div>
<div>
    <label class="block text-sm font-medium text-gray-700 mb-1">¿Tiene licencia?</label>
    <select name="tiene_licencia" id="tiene_licencia" class="w-full border border-gray-300 rounded px-3 py-2" onchange="mostrarNumeroLicencia()">
        <option value="">Seleccione</option>
        <option value="si">Sí</option>
        <option value="no">No</option>
    </select>
</div>

<div id="campo_numero_licencia" style="display: none;" class="mt-2">
    <label class="block text-sm font-medium text-gray-700 mb-1">Número de Licencia:</label>
    <input type="text" name="numero_licencia" class="w-full border border-gray-300 rounded px-3 py-2">
</div>

<script>
    function mostrarNumeroLicencia() {
        var tieneLicencia = document.getElementById("tiene_licencia").value;
        var campoLicencia = document.getElementById("campo_numero_licencia");
        campoLicencia.style.display = (tieneLicencia === "si") ? "block" : "none";
    }
</script>

  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">Zona de Trabajo:</label>
    <select name="zona_trabajo" class="w-full border border-gray-300 rounded px-3 py-2">
        <option value="">Selecciona una zona</option>
        <option value="LIMA - CENTRO 1">LIMA - CENTRO 1</option>
        <option value="LIMA - CENTRO 2">LIMA - CENTRO 2</option>
        <option value="LIMA - ESTE 1">LIMA - ESTE 1</option>
        <option value="LIMA - ESTE 2">LIMA - ESTE 2</option>
        <option value="LIMA - ESTE 3">LIMA - ESTE 3</option>
        <option value="LIMA - ESTE 4">LIMA - ESTE 4</option>
        <option value="LIMA - NORTE 1">LIMA - NORTE 1</option>
        <option value="LIMA - NORTE 2">LIMA - NORTE 2</option>
        <option value="LIMA - NORTE 3">LIMA - NORTE 3</option>
        <option value="LIMA - OESTE 1">LIMA - OESTE 1</option>
        <option value="LIMA - OESTE 2">LIMA - OESTE 2</option>
        <option value="LIMA - OESTE 3">LIMA - OESTE 3</option>
        <option value="LIMA - SUR 1">LIMA - SUR 1</option>
        <option value="LIMA - SUR 2">LIMA - SUR 2</option>
        <option value="LIMA - SUR 3">LIMA - SUR 3</option>
        <option value="LIMA - SUR 4">LIMA - SUR 4</option>
        <option value="LIMA - SUR 5">LIMA - SUR 5</option>
        <option value="LIMA - SUR 6">LIMA - SUR 6</option>
    </select>
</div>


    <!-- Botón de envío -->
    <div class="mt-4">
        <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Guardar Usuario</button>
    </div>

</form>

  </div>  </div>
  <script>
    // Abre el modal al hacer click en el botón
    $('#openModal').click(function() {
        $('#modal').css('display', 'flex');
    });

    // Cierra el modal al hacer click en el botón de cerrar
    $('#closeModal').click(function() {
        $('#modal').css('display', 'none');
    });
</script>
<!-- Scripts para mostrar campos -->
<script>
    document.getElementById('vehiculoSelect').addEventListener('change', function () {
        document.getElementById('placaDiv').style.display = this.value === 'Sí' ? 'block' : 'none';
    });

    document.getElementById('ctrSelect').addEventListener('change', function () {
        document.getElementById('ctrNumeroDiv').style.display = this.value === 'Sí' ? 'block' : 'none';
    });
</script>
<!-- Incluir los estilos de Alert2 -->
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.18/dist/sweetalert2.min.css" rel="stylesheet">

<!-- Incluir el script de Alert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.18/dist/sweetalert2.min.js"></script>
<script>
   // Usamos 'fetch' para enviar el formulario con AJAX
    document.getElementById('registroForm').addEventListener('submit', function(event) {
        event.preventDefault(); // Prevenir el envío tradicional del formulario

        const formData = new FormData(this); // Obtener los datos del formulario

        fetch('guardar_usuario.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json()) // Obtener la respuesta como JSON
        .then(data => {
            if (data.status === 'success') {
                // Si el usuario se guarda exitosamente
                Swal.fire({
                    title: '¡Éxito!',
                    text: data.message,
                    icon: 'success',
                    confirmButtonText: 'Aceptar'
                }).then(() => {
                    // Ocultar el modal al hacer clic en "Aceptar"
                    $('#modal').css('display', 'none');
                    
                    // Opcional: Limpiar el formulario
                    document.getElementById('registroForm').reset();
                    
                    
                });
            } else {
                // Si ocurre un error
                Swal.fire({
                    title: 'Error',
                    text: data.message,
                    icon: 'error',
                    confirmButtonText: 'Intentar de nuevo'
                });
            }
        })
        .catch(error => {
            console.error('Error al enviar el formulario:', error);
            Swal.fire({
                title: 'Error',
                text: 'Hubo un error al enviar el formulario. Inténtalo nuevamente.',
                icon: 'error',
                confirmButtonText: 'Cerrar'
            });
        });
    });
</script>

<script>
document.getElementById('empresaSelect').addEventListener('change', function() {
    var empresaId = this.value;
    if (empresaId) {
        // Mostrar el campo de subcontrata
        document.getElementById('subcontrataDiv').style.display = 'block';
        
        // Realizar una petición AJAX para obtener las subcontratas
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'obtener_subcontratas.php', true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onload = function() {
            if (xhr.status == 200) {
                var subcontratas = JSON.parse(xhr.responseText);
                var subcontrataSelect = document.getElementById('subcontrataSelect');
                subcontrataSelect.innerHTML = '<option value="">Seleccione una subcontrata</option>';
                subcontratas.forEach(function(subcontrata) {
                    var option = document.createElement('option');
                    option.value = subcontrata.id_subcontrata;
                    option.textContent = subcontrata.nombre_subcontrata;
                    subcontrataSelect.appendChild(option);
                });
            }
        };
        xhr.send('id_empresa=' + empresaId);
    } else {
        // Ocultar el campo de subcontrata si no hay empresa seleccionada
        document.getElementById('subcontrataDiv').style.display = 'none';
    }
});
</script>

