<!--@Header-->
<?php
session_start();

if(isset($_SESSION['nomUsuario'])){
    $usuario = $_SESSION['nomUsuario'];
    $rol_usuario=$_SESSION['rolUsuario'];
    $id=$_SESSION['cveUsuario'];
    
    if ($rol_usuario == 'ADMINISTRADOR') {
        include("path/header.php");
    }else{
        echo "<script> 
               document.location.href='../functions/salir.php';
            </script>";
    }
}else{
  echo "<script> 
        document.location.href='/aqua-restaurant/';
    </script>";
}

?>
<div class="row">
    <div class="col-md-12 mb-lg-0">
        <div class="card mt-1 pb-0 p-2">
            <nav>
                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Alta de Propinas</button>
                    <!--<button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Edición de Propinas</button>-->
                </div>
            </nav>
            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                    <div class="card card-plain">
                        <div class="card-header">
                            <h5 class="font-weight-bolder">Propinas</h5>
                        </div>
                        <div class="card-body pt-3 pb-5">
                            <div class="col-md-10 mb-lg-0">
                                <form id="form_usuario">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="input-group input-group-outline mb-3">
                                                <label class="form-label">Cantidad</label>
                                                <input type="text" class="form-control" name="prp_cantidad" id="prp_cantidad" pattern="\d+(\.\d{1,2})?" required>
                                            </div>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="input-group input-group-outline mb-3">
                                                <label class="form-label">Fecha</label>
                                                <input type="date" class="form-control" name="prp_fecha" id="prp_fecha" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="text-center">
                                                <button type="submit" class="btn btn-lg bg-gradient-primary btn-lg w-100 mt-4 mb-0">Dar de alta</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                <div class="card card-plain">
                        <div class="card-header">
                            <h5 class="font-weight-bolder">Edición de Propinas</h5>
                        </div>
                        <div class="card-body pt-3 pb-5">
                            <div class="col-md-10 mb-lg-0">
                                <form id="form_propinas_edit">
                                    <div class="row">
                                        <div class="col-md-12 pt-3 pb-3">
                                            <div class="text-center">
                                                <i class="btn btn-warning" type="button" data-bs-target="#modalFecha" data-bs-toggle="modal">Buscar fecha</i>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="formulario_editar_propinas"></div>
                                    
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
        
            </div>
        </div>
    </div>
</div>
</div>

<!-- Modal Usuarios Actualizar-->
<div class="modal fade" id="modalFecha" tabindex="-1" aria-labelledby="modalFecha" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalFecha">Buscador de Fechas</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-10">
                        <div class="ms-md-auto pe-md-3 d-flex align-items-center">
                            <div class="input-group input-group-outline ">
                                <label class="form-label">Buscador...</label>
                                <input type="text" class="form-control" id="caja_buscador_usuarios">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <button type="button" class="btn btn-primary" style="padding-top: 5px; padding-bottom: 6px;"><img width="15" src="../assets/img/icons/buscar.png"></button>
                    </div>
                </div>
                <div class="table-responsive pt-2">
                    <div id="tabla_usuarios"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" id="btn_agregar_propina">Agregar</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal Guardar Propina -->
<div class="modal fade" id="modalGuardarPropina" tabindex="-1" aria-labelledby="modalGuardarPropina" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalGuardarPropina"> PROPINA GUARDADA</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-10">
                        <h6 class="mb-0">¡El Propina ha sido registrado exitosamente!</h6>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Editar Propina -->
<div class="modal fade" id="modalEditarPropina" tabindex="-1" aria-labelledby="modalEditarPropina" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalEditarPropina"> PROPINA GUARDADO</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-10">
                        <h6 class="mb-0">¡La propina ha sido editado exitosamente!</h6>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Editar Propina -->
<div class="modal fade" id="modalFalloPropina" tabindex="-1" aria-labelledby="modalFalloPropina" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalFalloPropina"> FALLO AL CARGAR EL PROPINA</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-10">
                        <h6 class="mb-0">¡La propina no ha podido ser cargada, porfavor introducir los datos correctos!</h6>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<script src="../assets/js/jquery-3.5.1.min.js"></script>

<!--/////// BUSCARPropina ///////////-->
<script type="text/javascript">
     $(document).ready(function(){
        buscar_propina();
    });
    $(document).on('keyup','#caja_buscador_propinas', function(){
        var valor = $(this).val();
        if(valor != ""){
            buscar_propina(valor);
        }else{
            buscar_propina();
        }
    });
    function buscar_propina(consulta){
        $.ajax({
            data: {consulta: consulta},
            url: '../functions/propina/buscar.php',
            type: 'post',
            dataType:'html',
            success:  function (response) {
                $('#tabla_usuarios').html(response);
            },
            error: function (error) {
                console.log(error); 
            }
        });

    }

   
</script>
<!--/////// SELECCIONAR Propina ///////////-->
<script type="text/javascript">
    $(document).ready(function(){
        seleccionar_usuario();
        var id="";

        $(document).on('click', '#tabla_usuario tbody tr', function(){

            var tr = $(this).closest('tr');
            id = $(tr).find('td:nth-child(0)').text();
            cleanTr();
            $(this).addClass('row-selected');
        
            function cleanTr(){
                $('.row-selected').each(function(index, element){
                    $(element).removeClass('row-selected');
                })
            }
        });

        $('#btn_agregar_propina').on('click',function(){
            
            seleccionar_fecha(id );
            $('#modalUsuario').modal('toggle'); 
        });

        function seleccionar_fecha(id){
            $.ajax({
                data: {id: id},
                url: '../functions/usuario/editar_usuario_formulario.php',
                type: 'post',
                dataType:'html',
                success:  function (response) {
                    $('#formulario_editar_usuario').html(response);
                },
                error: function (error) {
                    console.log(error); 
                }
            });
        }
        

  });
</script>

<!-- ////////// ENVIAR DATOS PARA GUARDAR EL USUARIO /////////////////-->
<script>
$(document).ready(function() {
    var usu_nombre = document.getElementById('usu_nombre');
    var usu_apellido = document.getElementById('usu_apellido');
    
    
  $('#form_usuario').submit(function(event) {
    // Prevenir que el formulario se envíe de forma predeterminada
    event.preventDefault();
    
    // Obtener los datos del formulario
    var datos = $(this).serialize();
    console.log(datos);
        // Enviar la solicitud AJAX
        $.ajax({
        url: '../functions/propina/guardar.php',
        type: 'POST',
        data: datos,
        success: function(respuesta) {
            console.log(respuesta);
            if (respuesta == 1) {
                $('#modalGuardarPropina').modal('toggle'); 
                setTimeout(function() {
                    location.href='/aqua-restaurant/usuario_administrador/propinas.php';
                }, 3000);
            } else {
                $('#modalFalloGuardarPropina').modal('toggle'); 
                setTimeout(function() {
                    location.href='/aqua-restaurant/usuario_administrador/propinas.php';
                }, 3000);
            }
        },
        error: function(xhr, status, error) {
            console.log('Error al enviar la solicitud: ' + error);
        }
        });
        
     
  });
  $('#form_usuario_edit').submit(function(event) {
    // Prevenir que el formulario se envíe de forma predeterminada
    event.preventDefault();
    
    var datos = $(this).serialize();
    $.ajax({
        url: '../functions/usuario/editar_usuario.php',
        type: 'POST',
        data: datos,
        success: function(respuesta) {
            console.log(respuesta);
            
            if (respuesta == 1) {
                $('#modalEditarUsuario').modal('toggle'); 
                
                setTimeout(function() {
                    location.href='/aqua-restaurant/usuario_administrador/usuarios.php';
                }, 3000);
            } else {
                if(!expresiones.numeros.test(document.getElementById('celular_usu').value)){
                    document.getElementById('celular_usu').classList.add('input_error');
                }
                if(!expresiones.numeros.test(document.getElementById('telefono_usu').value)){
                    document.getElementById('telefono_usu').classList.add('input_error');
                }
            }
            
        },
        error: function(xhr, status, error) {
            console.log('Error al enviar la solicitud: ' + error);
        }
    });
        
});
});
</script>

<script>
    /*
    $(document).ready(function(){
        var nombre_usu = document.getElementById('nombre_usu');
        var apellido_usu = document.getElementById('apellido_usu');
        var celular_usu = document.getElementById('celular_usu');
        var fecha_ingreso_usu = document.getElementById('fecha_ingreso_usu');
        var rol_usu = document.getElementById('rol_usu');
        var nick_usu = document.getElementById('nick_usu');
        var clave_numerica_usu = document.getElementById('clave_numerica_usu');

        nombre_usu.addEventListener('keyup', (e)=>{
            document.getElementById('nombre_usu').classList.remove('input_error');
        });
        apellido_usu.addEventListener('keyup', (e)=>{
            document.getElementById('apellido_usu').classList.remove('input_error');
        });
        celular_usu.addEventListener('keyup', (e)=>{
            document.getElementById('celular_usu').classList.remove('input_error');
        });
        fecha_ingreso_usu.addEventListener('change', (e)=>{
            document.getElementById('fecha_ingreso_usu').classList.remove('input_error');
        });
        rol_usu.addEventListener('change', (e)=>{
            document.getElementById('rol_usu').classList.remove('input_error');
        });
        nick_usu.addEventListener('keyup', (e)=>{
            document.getElementById('nick_usu').classList.remove('input_error');
        });
        clave_numerica_usu.addEventListener('keyup', (e)=>{
            document.getElementById('clave_numerica_usu').classList.remove('input_error');
        });
        
    });*/
</script>
<!--@Footer-->
<?php
include("path/footer.php");
?>