<?php
session_start();
include '../conexion.php';
$subtotal=null;    
mysqli_set_charset($connection, "utf8");
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Uniformes - Altas de Usuarios</title> <link rel="icon" href="./icons/taller.png" type="image/png">
    <link rel="stylesheet" href="./sidemenu.css">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="./sidemenu.css">
    <!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<!-- Latest minified bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body  >
    <div class="wrapper">
        <main>    
            <!-- Encabezado -->
            <header>
                <!--<h1>Taller</h1>-->
                <?php include "includes/header2.php"; ?>
            </header>

            <!--<div id="sidemenu" class="menu-collapsed">-->
            <div id="sidemenu" class="menu-expanded">
                <!-- Header -->
                <div id="header">
                    <div id="title"><span></span> </div>
                    <div id="menu-btn">
                        <div class="btn-hamburger"></div>
                        <div class="btn-hamburger"></div>
                        <div class="btn-hamburger"></div>
                    </div>
                </div>
                <!--Profile-->
                <!--<div id="profile">
                    <div id="photo"><img src="img/user.png" alt=""></div>
                    <div id="name"><span><?php echo $_SESSION['nombre'];?></span></div>
                    <div id="name"><span><?php echo $_SESSION['iduser']." [ ".$_SESSION['user']." ] ";?></span></div>
                    <div id="name"><span><?php echo "Sucursal: ".$_SESSION['suc'];?></span></div>
                    <div id="name"><span> <?php echo "Rol: ".$_SESSION['rol'];?></span></div>
                </div>-->
                <!--Items-->
                <div id="menu-items">
                    <?php include './includes/navs3.php'?>
                </div>
            </div>

            <div style="height:calc(100%); width:90%; padding-right:15px; padding-left:200px; margin-right:60px; margin-left:60px;margin-top:20px;">

            
            <div style="width:100%;">
                <table border='0' style='width:100%;'>
                    <tr>
                    <td style='text-align:right;'><button class="btn btn-primary btn-sm" onclick="actualizarPagina()"><i class="fa-solid fa-arrows-rotate"></i></button>
                    <button style="margin-right:15px;" class="btn btn-success btn-sm" data-backdrop="static" data-keyboard="false" data-toggle="modal" data-target="#modalForm"><i class="fa-solid fa-circle-plus"></i></button>
                    <input ID="busqueda" type="text" style="width:200px;"placeholder="Captura dato a buscar" onkeydown="if (event.key === 'Enter') buscar()">
                        <button id="btnBusqueda" class="btn btn-primary btn-sm" type="button" onclick="buscar()"><i class="fa-solid fa-magnifying-glass"></i></button>
                    </td>
                </tr>
                </table>
                <div class="table-container" style="width:100%;heigth:100%">
                    <table border='0' style='width:100%;font-size:8pt;'>
                        <thead>
                            <tr>
                                <th style="width:5%;">id</th>
                                <th style="width:15%;">Usuario</th>
                                <th style="width:10%;">Nombre</th>
                                <th style="width:10%;">Correo</th>
                                <th style="width:10%;">Sucursal</th>
                                <th style="width:10%;">Rol</th>
                                <th style="width:10%;">Estatus</th>
                                <th style="width:15%;">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php
                            if(empty($_GET['busqueda'])){
                                $busq="";
                            } else{
                                $busq=$_GET['busqueda'];
                            }

                            if(empty($busq)){
                                $b=" order by usuario DESC";
                            } else{

                                $b=" where Nombre = '".$busq."' or usuario like '%".$busq."%' order by usuario DESC";
                            }
                            $sql_registros=mysqli_query($connection,"select count(*) as total_registros from uni_user ". $b);
                            
                            $result_registros = mysqli_fetch_array($sql_registros);
                            $total_registros = $result_registros['total_registros'];
                            
                            $por_pagina = 15;
                            if(empty($_GET['pagina'])){
                                $pagina=1;
                            } else{
                                $pagina=$_GET['pagina'];
                            }
                            $desde = ($pagina - 1) * $por_pagina;
                            $total_paginas = ceil($total_registros / $por_pagina);

                            $sql_uniformes=mysqli_query($connection,"select * from uni_user". $b);
                            
                            $result_uniformes=mysqli_num_rows($sql_uniformes);
                            $suc=null;
                                if($result_uniformes>0){
                                    while($data=mysqli_fetch_array($sql_uniformes)){
                                        
                                        if($data['ubicacion']=='1'){
                                            $suc="TIJUANA";
                                        }else if($data['ubicacion']=='2'){
                                            $suc="ENSENADA";
                                        }else if($data['ubicacion']=='3'){
                                            $suc="MEXICALI";
                                        }

                                        if($data['tipo']=='1'){
                                            $tipo="Sistema";
                                        }else if($data['tipo']=='2'){
                                            $tipo="Administrador";
                                        }else if($data['tipo']=='3'){
                                            $tipo="Consulta";
                                        }

                                        ?>
                                        <tr>
                                            <td style="text-align:left;padding-left:20px"><?php echo $data['idUser']?></td>    
                                            <td style="text-align:left;padding-left:20px"><?php echo $data['usuario']?></td>    
                                            <td style="text-align:left;padding-left:20px"><?php echo $data['Nombre'];?></td>
                                            <td style="text-align:left;padding-left:20px"><?php echo $data['correo'];?></td>
                                            <td style="text-align:left;padding-left:20px"><?php echo $suc;?></td>
                                            <td style="text-align:left;padding-left:20px"><?php echo $tipo;?></td>
                                            <td style="text-align:left;padding-left:20px"><?php echo ($data['estado']=='1') ? 'Activo' : 'Inactivo';?></td>
                                            <td><button class="btn btn-primary btn-sm" id="modificar" data-backdrop="static" data-keyboard="false" data-id="<?php echo $data['idUser'];?>" data-toggle="modal" data-target="#modalUsuario"><i class="fa-solid fa-file-pen"></i></button>
                                                <button class="btn btn-danger btn-sm" id="cancelar" data-backdrop="static" data-keyboard="false" data-id="<?php echo $data['idUser'];?>" data-toggle="modal" data-target="#deleteModal"><i class="fa-solid fa-ban"></i></button>
                                        </td>
                                        </tr>
                                        <?php
                                        
                                    }
                                }

                            ?>
                            

                            <!-- Agrega más filas según sea necesario -->
                        </tbody>
                    </table>
                </div>
                <div class="paginador">
                    <ul><?php
                        $numeroInicio=1;
                        if($pagina!=1){
                        //$numeroInicio=1;
                        
                    ?>
                        
                        <li><a href="?pagina=<?php echo $numeroInicio?>"><i class="fa-solid fa-backward-fast"></i></a></li>
                        <!--<li><a href="?pagina=<?php /*echo $pagina-1*/?>"><<</a></li>-->
                        <?php 
                        }
                            if(($pagina-3)>1){
                                $numeroInicio=$pagina-3;
                            }
                            $numeroFin=$numeroInicio+4;
                            
                            if($numeroFin>$total_paginas){
                                $numeroFin=$total_paginas;
                            }
                            
                            for($i=$numeroInicio;$i<=$numeroFin;$i++){
                                if($i==$pagina){
                                    echo '<li class="pageSelected">'.$i.'</li>';
                                } else{
                                echo '<li><a href="?pagina='.$i.'&busqueda='.$busq.'">'.$i.'</a></li>';
                                }
                            }
                            if($pagina!=$total_paginas){
                                echo '<li><a href="?pagina='.$total_paginas.'&busqueda='.$busq.'"><i class="fa-solid fa-forward-fast"></i></a></li>';
                            }
                        ?>
                                        
                        
                    </ul>
                </div>
            </div>
            

            </div>


            




        </main>
            <!-- Pie de página -->
            <footer>
                <?php include "includes/footer.php"; ?>
            </footer>
    </div>

    <!-- Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">Confirmar Eliminación</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
            <div class="modal-body">
                ¿Estás seguro de que deseas eliminar la factura?
                <p class="statusMsg"></p>    
            </div>
            <div>
                <table style="width:50%;">
                    <tr>
                        <td style="text-align:left;padding-left:40px">Factura:</td>
                        <td><input disabled id="facturaE" type="text"></input><input id="idmovE"  type="hidden"></input></td>
                    </tr>
                    <tr>
                        <td style="text-align:left;padding-left:40px">Fecha:</td>
                        <td><input disabled id="fechaE" type="date"></input></td>
                    </tr>
                    <tr>
                        <td style="text-align:left;padding-left:40px">Proveedor:</td>
                        <td><input disabled id="proveedorE" type="text"></input></td>
                    </tr>
                    <tr>
                        <td style="text-align:left;padding-left:40px">Subtotal:</td>
                        <td><input disabled id="subtotalgE" type="text"></input></td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" onclick="javascript:window.location.reload()" data-dismiss="modal" >Cerrar</button>
                <form method="POST" style="display: inline;">
                <button type="button" class="btn btn-danger submitBtn" onclick="eliminar()">Eliminar</button>    
                <!--<input type="hidden" name="delete_id" id="deleteId">
                    <button type="submit" class="btn btn-danger">Eliminar</button>-->
                </form>
            </div>
        </div>
    </div>
</div>





<!-- Modal view-->
<div class="modal fade" id="modalUsuario" role="dialog" >
    <div class="modal-dialog" >
        <div class="modal-content" style="width:600px;">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel" style="font-size: 14px;" >Datos Usuarios</h4>
            </div>
            
            <!-- Modal Body -->
            <div class="modal-body" >
                <p class="statusMsg"></p>    
                <form role="form">
                <table >
				<tr>
				<td  style="text-align:left;">
				<div class="form-group">
                        <input style="font-size: 12px;" type="hidden" class="form-control" id="id" />
                        <input style="font-size: 12px;" type="hidden" class="form-control" id="x" value="2" />
                        <label style="font-size: 12px;" for="usuario">Nombre</label>
						<input style="font-size: 12px;" type="text" class="form-control" id="usuario" />
                    </div>
				</td>
                <td  style="text-align:left;">
				<div class="form-group">
                        <label style="font-size: 12px;" for="correo">Correo:</label>
                        <input style="font-size: 12px;" type="email" class="form-control" id="correo" />
                    </div>
				</td>
                        </tr>
                        </table >
                <table >
				<tr>
                <td  style="text-align:left;">
				<div class="form-group">
                        <label style="font-size: 12px;" for="nombre">Usuario:</label>
                        <input style="font-size: 12px;" type="text" class="form-control" id="nombre" />
                    </div>
				</td>
                <td style="text-align:left;">
                    <div class="form-group">
                        <label style="font-size: 12px;" for="pass">Contraseña</label>
                        <div style="display: flex; align-items: center;" class="form-group">
                            <input style="font-size: 12px; flex: 1;" type="password" class="form-control" id="pass" />
                            <button 
                                style="margin-left: 5px; font-size: 12px; cursor: pointer;" 
                                type="button" 
                                id="togglePass" 
                                title="Mostrar/Ocultar contraseña">
                                👁️
                            </button>
                        </div>
                    </div>
                </td>
                        </tr>
                        </table >
                <table >
                        <tr>
                        <td  style="text-align:left;">
				<div class="form-group">
                        <label style="font-size: 12px;" for="ubicacion">Sucursal:</label>
                        <select style="font-size: 12px;"  class="form-control" id="ubicacion">
                        <option value="0">--Selecciona--</option>
                        <option value="1">TIJUANA</option>
                        <option value="2">ENSENADA</option>
                        <option value="3">MEXICALI</option>
						</select>
                    </div>
				</td>
                
                <td  style="text-align:left;">
				<div class="form-group">
                        <label style="font-size: 12px;" for="tipo">Rol:</label>
                        <select style="font-size: 12px;" class="form-control" id="tipo">
                        <option value="1">Sistemas</option>
                        <option value="2">Administrador</option>
                        <option value="3">Consultor</option>
						</select>
                    </div>
				</td>
                <td  style="text-align:left;">
				<div class="form-group">
                        <label style="font-size: 12px;" for="estatus">Estatus:</label>
                        <select style="font-size: 12px;" class="form-control" id="estatus">
                        <option value="1">Activo</option>
                        <option value="2">Inactivo</option>
						</select>
                    </div>
				</td>
				</tr>
                        </table>
                    
                </form>
            </div>
            
            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" onclick="javascript:window.location.reload()" data-dismiss="modal" >Cerrar</button>
                <button  disabled type="button" class="btn btn-primary submitBtn" onclick="guardarUsuario()">GUARDAR</button>
            </div>
        </div>
    </div>
</div>



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        const btn = document.querySelector('#menu-btn');
        const menu = document.querySelector('#sidemenu');

        btn.addEventListener('click', e => {
            menu.classList.toggle("menu-expanded");
            menu.classList.toggle("menu-collapsed");

            document.querySelector('body').classList.toggle('body-expanded')
        });
    



function guardarUsuario() {
        var id = $('#id').val();
        var nombre = $('#usuario').val();
        var usuario = $('#nombre').val();
        var pass = $('#pass').val();
        var sucursal = $('#ubicacion').val();
        var rol = $('#tipo').val();
        var estatus = $('#estatus').val();
        var x = $('#x').val();
        var correo = $('#correo').val();


        // Validación de campos
        if (sucursal == '0' || !pass ) {
            $('.statusMsg').html('<span style="color:red;">Favor de llenar todos los campos obligatorios.</span>');
            return;
        }


        // Preparar datos para enviar
        var datos = {
            id: id,
            nombre: nombre,
            usuario: usuario,
            pass: pass,
            correo:correo,
            sucursal: sucursal,
            rol: rol,
            estatus: estatus,
            x : x
            
        };

        // Enviar solicitud AJAX
        $.ajax({
            type: 'POST',
            url: 'guardar_usuario.php', // Cambiar por tu ruta PHP
            data: datos,
            success: function(response) {

                try {
                    var data = JSON.parse(response);

                    if (data.success) {
                        
                        $('.statusMsg').html('<span style="color:green;">' + data.message + '.</span>'); 
                        $('.submitBtn').prop('disabled', true);
                    } else {
                        $('.statusMsg').html('<span style="color:red;">Error al guardar la factura: ' + data.message + '</span>');
                    }
                } catch (e) {
                    $('.statusMsg').html('<span style="color:red;">Error al procesar la respuesta del servidor.</span>');
                }
            },
            error: function(xhr, status, error) {
                $('.statusMsg').html('<span style="color:red;">Error en la solicitud: ' + error + '</span>');
            }
        });
}

function actualizarPagina() {
    location.reload();
}


</script>
<script>
    $(document).ready(function(){
        $('#modalFormm').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // Botón que activó el modal
            var id = button.data('id'); // Extrae el valor data-fact
            var modal = $(this);
            modal.find('#actfact').val(factValue); // Asigna el valor al input
        });
    });
    </script>
<script>
$(document).on('click', '[data-target="#modalUsuario"]', function () {
    // Capturamos el valor del atributo `data-id`
    var idUsuario = $(this).data('id');
    
    // Realizamos la solicitud AJAX
    $.ajax({
        type: 'POST',
        url: 'obtener_usuario.php', // Cambia esto por el nombre de tu archivo PHP 
        data: { idUsuario: idUsuario },
        success: function(response) {
            //alert(response);
            try {
                var data = JSON.parse(response); // Parsea la respuesta JSON
                $('#modalUsuario').find('#nombre').val(data.nombre);
                // Asignamos los valores obtenidos a los campos del modal
                $('#modalUsuario').find('#nombre').val(data.nombre);
                $('#modalUsuario').find('#pass').val(data.pass);
                $('#modalUsuario').find('#usuario').val(data.usuario);
                $('#modalUsuario').find('#correo').val(data.correo);
                $('#modalUsuario').find('#tipo').val(data.tipo);
                $('#modalUsuario').find('#ubicacion').val(data.ubicacion);
                $('#modalUsuario').find('#estatus').val(data.estado);
                $('#modalUsuario').find('#id').val(idUsuario);
                // Abrimos el modal
                //$('.submitBtn').prop('disabled', true);
                $('.submitBtn').prop('disabled', false);
            } catch (e) {
                console.error('Error procesando los datos del servidor: ', e);
                alert('Error al cargar los datos. Intente nuevamente.');
            }
        },
        error: function() {
            alert('Ocurrió un error al obtener los datos. Por favor, inténtelo más tarde.');
        }
    });
});
</script>

<script>
$(document).on('click', '[data-target="#deleteModal"]', function () {
    // Capturamos el valor del atributo `data-id`
    var idMovimiento = $(this).data('id');

    // Realizamos la solicitud AJAX
    $.ajax({
        type: 'POST',
        url: 'obtener_factura2.php', // Cambia esto por el nombre de tu archivo PHP
        data: { idfactura: idMovimiento },
        success: function(response) {
            //alert(response);
            try {
                var datax = JSON.parse(response); // Parsea la respuesta JSON

                // Asignamos los valores obtenidos a los campos del modal
                $('#deleteModal').find('#proveedorE').val(datax.proveedor);
                $('#deleteModal').find('#idmovE').val(datax.idmov);
                $('#deleteModal').find('#fechaE').val(datax.fecha);
                $('#deleteModal').find('#facturaE').val(datax.factura);
                $('#deleteModal').find('#subtotalgE').val(datax.subtotal);
                
                // Abrimos el modal
                $('#deleteModal').modal('show');
            } catch (e) {
                console.error('Error procesando los datos del servidor: ', e);
                alert('Error al cargar los datos. Intente nuevamente.');
            }
        },
        error: function() {
            alert('Ocurrió un error al obtener los datos. Por favor, inténtelo más tarde.');
        }
    });
});


function eliminar() {
    var id = $('#idmovE').val();
    

    $('.submitBtn').prop('disabled', true);

    // Preparar datos para enviar
    var datos = {
        id: id
    };

    // Enviar solicitud AJAX
    $.ajax({
        type: 'POST',
        url: 'eliminar_factura.php', // Cambiar por tu ruta PHP
        data: datos,
        success: function(response) {
            //alert(response);
            //exit();
            try {
                var data = JSON.parse(response);
                //alert(data.message)
                if (data.success) {
                    $('.statusMsg').html('<span style="color:green;">Factura eliminada exitosamente.</span>');
                    
                } else {
                    $('.statusMsg').html('<span style="color:red;">Error al eliminar la factura: ' + data.message + '</span>');
                    $('.submitBtn').prop('disabled', false); // Reactivar botón si ocurre un error
                }
            } catch (e) {
                //$('.statusMsg').html('<span style="color:red;">Error al procesar la cancelacion .</span>');
                $('.statusMsg').html('<span style="color:red;">Error al eliminar la factura: ' + e + '</span>');
                $('.submitBtn').prop('disabled', false); // Reactivar botón si ocurre un error
            }
        },
        error: function(xhr, status, error) {
            $('.statusMsg').html('<span style="color:red;">Error en la solicitud: ' + error + '</span>');
            $('.submitBtn').prop('disabled', false); // Reactivar botón si ocurre un error
        }
    });
}

function buscar() {
    // Obtiene el valor del input con ID "busqueda"
    const busqueda = document.getElementById("busqueda").value;
    
    // Define la página que deseas agregar (puedes cambiar este valor)
    //const pagina = <?php echo isset($_GET['pagina']) ? json_encode($_GET['pagina']) : '1'; ?>;
    const pagina = '1';
    // Obtén la URL actual
    let url = new URL(window.location.href);

    // Agrega o actualiza los parámetros "buscar" y "pagina"
    url.searchParams.set("busqueda", busqueda);
    url.searchParams.set("pagina", pagina);

    // Redirige a la URL modificada
    window.location.href = url.toString();
}

</script>

<script>
    document.getElementById('togglePass').addEventListener('click', function () {
        const passwordInput = document.getElementById('pass');
        const currentType = passwordInput.type;

        // Alternar entre 'password' y 'text'
        passwordInput.type = currentType === 'password' ? 'text' : 'password';

        // Cambiar icono o texto del botón (opcional)
        this.textContent = currentType === 'password' ? '🙈' : '👁️';
    });
</script>

</body>
</html>
