<!--
=========================================================
* 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.
-->
<!--
=========================================================
* 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>
    <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>

<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_usuarios.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 id="openModal" 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>
                   Agregar
                </button>
            </div>
        </div>

       
      

  <div id="lista_usuarios" class="overflow-x-auto"></div>

    </div>
</div>


  </div>

</div> 

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


    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   
<div id="personaModal" class="modal fade" tabindex="-1" aria-labelledby="personaModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="personaModalLabel">Registro de Usuario</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="formRegistro" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <input type="text" name="nombres" placeholder="Nombres" required class="form-control">
                        </div>
                        <div class="col-md-6">
                            <input type="text" name="apellido_paterno" placeholder="Apellido Paterno" required class="form-control">
                        </div>
                        <div class="col-md-6">
                            <input type="text" name="apellido_materno" placeholder="Apellido Materno" required class="form-control">
                        </div>
                       <div class="col-md-6">
    <select name="tipo_documento" required class="form-select">
        <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 class="col-md-6">
                            <input type="text" name="numero_documento" placeholder="Número de Documento" required class="form-control">
                        </div>
                        <div class="col-md-6">
                            <input type="file" name="foto_dni"  class="form-control">
                        </div>
                        <div class="col-md-6">
                            <input type="date" name="fecha_nacimiento"  class="form-control">
                        </div>
                        <div class="col-md-6">
                            <input type="date" name="fecha_ingreso"  class="form-control">
                        </div>
                        <div class="col-md-6">
                            <input type="text" name="direccion" placeholder="Dirección"  class="form-control">
                        </div>
                        <div class="col-md-6">
                            <input type="text" name="distrito" placeholder="Distrito de Residencia"  class="form-control">
                        </div>
                        <div class="col-md-6">
                            <input type="email" name="email" placeholder="Email" required class="form-control">
                        </div>
                        <div class="col-md-6">
                            <input type="text" name="telefono" placeholder="Número de Teléfono" required class="form-control">
                        </div>
                        <!-- Zona de Trabajo -->
<div class="col-md-6">
    <label for="zona_trabajo" class="form-label">Zona de Trabajo</label>
    <select name="zona_trabajo" class="form-select" >
        <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>
    </select>
</div>
<!-- Bodega -->
<div class="col-md-6">
    <label for="bodega" class="form-label">Bodega</label>
    <select name="bodega" class="form-select" >
        <option value="PERU FIBRA">PERU FIBRA</option>
        <option value="WIN">WIN</option>
    </select>
</div>

                        <div class="col-md-6">
                            <select name="cargo"  class="form-select">
                                <option value="Supervisor">Supervisor</option>
                                <option value="Técnico de Campo">Técnico de Campo</option>
                                <option value="Coordinador de Certificaciones">Coordinador de Certificaciones</option>
                                <option value="Coordinador de Operaciones">Coordinador de Operaciones</option>
                                <option value="Supervisor Técnico y Logístico">Supervisor Técnico y Logístico</option>
                                <option value="Gerente General">Gerente General</option>
                                <option value="Coordinador de Tesorería">Coordinador de Tesorería</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <input type="text" name="numero_cuadrilla" placeholder="Número de Cuadrilla" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <select name="perfil"  class="form-select">
                                <option value="T1">T1</option>
                                <option value="T2">T2</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <select name="vehiculo" id="vehiculo" class="form-select">
                                <option value="">¿Tiene vehículo? (Opcional)</option>
                                <option value="Sí">Sí</option>
                                <option value="No">No</option>
                            </select>
                        </div>
                        <div class="col-md-6" id="placa-container">
                            <input type="text" id="placa" name="placa" placeholder="Placa (Opcional)" class="form-control d-none">
                        </div>
                        <div class="col-md-6">
    <select name="ctr" id="ctr" class="form-select">
        <option value="" disabled selected>Elija una opción</option>
        <option value="No">SCTR: No</option>
        <option value="Sí">SCTR: Sí</option>
    </select>
</div>

                        <div class="col-md-6" id="numero-ctr-container">
                            <input type="text" id="numero_ctr" name="numero_ctr" placeholder="Número SCTR (Opcional)" class="form-control d-none">
                        </div>
                        <div class="col-md-6">
                            <select name="estado"  class="form-select">
                                <option value="Activo">Activo</option>
                                <option value="Anulado">Anulado</option>
                                <option value="Baja">Baja</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-primary">Registrar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
$(document).ready(function () {
   function cargarLista() {
        $("#lista_usuarios").load("listar_usuarios.php", function() {
           
        });
    }
    cargarLista();
    
$("#formRegistro").on("submit", function (e) {
    e.preventDefault();
    var formData = new FormData(this);  // FormData recopila todos los datos del formulario
    $.ajax({
        url: "procesar_registro.php",
        type: "POST",
        data: formData,
        processData: false,  // Evitar que jQuery intente procesar el FormData
        contentType: false,  // Dejar que el FormData maneje los encabezados
        success: function (respuesta) {
            var response = JSON.parse(respuesta);  // Convertir la respuesta JSON

            if (response.status === "success") {
                Swal.fire({
                    icon: 'success',
                    title: 'Usuario registrado con éxito',
                    text: response.message,
                    confirmButtonText: 'Aceptar'
                }).then(() => {
                    cargarLista();
                    $("#personaModal").modal('hide');
                    $("#formRegistro")[0].reset();  // Limpiar el formulario
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: response.message,
                    confirmButtonText: 'Aceptar'
                });
            }
        },
        error: function () {
            Swal.fire({
                icon: 'error',
                title: 'Error al registrar usuario',
                text: 'Hubo un problema al procesar el registro.',
                confirmButtonText: 'Aceptar'
            });
        }
    });
});

    // Mostrar campo de Placa si el usuario tiene vehículo
    $("#vehiculo").on("change", function () {
        if ($(this).val() === "Sí") {
            $("#placa").removeClass("d-none");
        } else {
            $("#placa").addClass("d-none").val("");  // Limpia el valor al ocultarlo
        }
    });

    // Mostrar campo de Número CTR si selecciona "Sí"
    $("#ctr").on("change", function () {
        if ($(this).val() === "No") {
            $("#numero_ctr").removeClass("d-none");
        } else {
            $("#numero_ctr").addClass("d-none").val("");
        }
    });

    // Modal show/hide
    document.getElementById("openModal").addEventListener("click", function() {
        var modal = new bootstrap.Modal(document.getElementById('personaModal'));
        modal.show();
    });

    document.getElementById("closeModal").addEventListener("click", function() {
        var modal = bootstrap.Modal.getInstance(document.getElementById('personaModal'));
        modal.hide();
    });
});

</script>


  <link id="pagestyle" href="assets/css/soft-ui-dashboard.css?v=1.1.0" rel="stylesheet" />
  
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <style>
    
.icon-sm:not(.active) i {
    top: 2px;
    color: black;
    font-size: 0.65rem;
}
  </style>
