@extends('layouts.app', ['activePage' => 'peruser', 'menuParent' => 'configuracion', 'titlePage' => __('Configuración')])

@section('content')
<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">

                <div class="card">
                    <div class="card-header card-header-primary card-header-icon">
                        <div class="card-icon ">
                            <i class="material-icons">people</i>
                        </div>
                        <h4 class="card-title">Usuarios</h4>
                    </div>
                    <div class="card-body ">
                        <ul class="nav nav-pills nav-pills-primary" role="tablist">
                            <!--<li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#link1" role="tablist" >
                                    Perfiles
                                </a>
                            </li>-->
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#link2" role="tablist" onclick="loadUsuarios()">
                                    Usuarios
                                </a>
                            </li>
                        </ul>
                        <hr>
                        <div class="tab-content tab-space">
                            <div class="tab-pane" id="link1">
                                <div class="row justify-content-end">
                                    <div class="col-md-4 text-right">
                                        <button class="btn btn-primary" onclick="nuevoPerfil();">Nuevo perfil</button>
                                    </div>
                                </div>
                                <div class="material-datatables ">
                                    <table class="table table-striped table-bordered table-hover" cellspacing="0" id="tablePerfiles" width="100%" style="width: 100%;">
                                        <thead>
                                            <tr>
                                                <th>ID</th>
                                                <th>Nombre del perfil</th>
                                                <th>Código</th>
                                                <th>Estatus</th>
                                                <th>Acciones</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="tab-pane active" id="link2">
                                <div class="row justify-content-end">
                                    <div class="col-md-4 text-right">
                                        <button class="btn btn-primary" onclick="nuevoUsuario();">Nuevo usuario</button>
                                    </div>
                                </div>
                                <div class="material-datatables">
                                    <table class="table table-striped table-bordered table-hover" cellspacing="0" id="tableUsuarios" width="100%" style="width:100%">
                                        <thead>
                                            <tr>
                                                <th>ID</th>
                                                <th>Nombre de usuario</th>
                                                <th>Nombre Completo</th>
                                                <th>Correo</th>
                                                <!--<th>Perfil</th>
                                                <th>Sucursal</th>-->
                                                <th>Estatus</th>
                                                <th>Acciones</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal draggable fade" id="modalUsuario" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="text_title_modal_informacion2"></h4>
            </div>
            <div class="modal-body">
                <ul class="nav nav-pills nav-pills-primary" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#general_link" role="tablist" aria-expanded="true">
                            General
                        </a>
                    </li>
                    <!--<li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#imagen_link" role="tablist" aria-expanded="false">
                            Imagen de usuario
                        </a>
                    </li>-->
                </ul>
                <div class="tab-content tab-space">
                    <div class="tab-pane active" id="general_link" aria-expanded="true">
                        <h5 class="text-center card-description" style="margin-top: -20px;">Agrega toda la información del usuario</h5>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group filled">
                                    <label for="descripcion" class="label">Nombres: <span class="text-danger"> *</span></label>
                                    <input type="text" class="form-control" id="nombres">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group filled">
                                    <label for="descripcion" class="label">Apellidos: <span class="text-danger"> *</span></label>
                                    <input type="text" class="form-control" id="apellidos">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group filled">
                                    <label for="clave" class="label">Nombre de usuario: <span class="text-danger"> *</span></label>
                                    <input type="text" class="form-control" id="name">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group filled ">
                                    <label for="descripcion" class="label">Correo: <span class="text-danger"> *</span></label>
                                    <input type="email" class="form-control" id="email">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group filled">
                                    <label for="clave" class="label">Contraseña: <span class="text-danger"> *</span></label>
                                    <input type="password" class="form-control" id="password">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group filled">
                                    <label for="clave" class="label">Confirmar contraseña: <span class="text-danger"> *</span></label>
                                    <input type="password" class="form-control" id="password_confirm">
                                </div>
                            </div>
                            <div class="col-md-2 text-right">
                                <button id="btn1" class="btn btn-secondary btn-sm" onclick="verContraseñas(1)"><i class="material-icons">
                                        visibility
                                    </i></button>
                                <button style="display: none;" id="btn2" class="btn btn-dark btn-sm" onclick="verContraseñas(2)"><i class="material-icons">
                                        visibility_off
                                    </i></button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4 col-xs-12" style="display: none;">
                                <div class="form-group">
                                    <label>Perfil <span class="text-danger"> *</span></label>
                                    <select class="selectpicker" style="display:inline-block" id="id_perfil" data-style="select-with-transition" data-width="100%" data-live-search="true">
                                        <option value="0" selected disabled>-Selecciona-</option>
                                        @foreach($data['perfiles'] as $p)
                                        <option value="{{$p->id}}">{{$p->nombre}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4 col-xs-12" style="display: none;">
                                <div class="form-group">
                                    <label>Sucursal <span class="text-danger"> *</span></label>
                                    <select class="selectpicker" style="display:inline-block" id="id_sucursal" data-style="select-with-transition" data-width="100%" data-live-search="true">
                                        <option value="0" selected disabled>-Selecciona-</option>
                                        @foreach($data['sucursales'] as $su)
                                        <option value="{{$su->idSuc}}">{{$su->nombre}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group filled">
                                    <label for="descripcion" class="label">Teléfono: <span class="text-danger"> *</span></label>
                                    <input type="number" class="form-control" id="telefono">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group filled">
                                    <label for="descripcion" class="label">Extensión: <span class="text-danger"> *</span></label>
                                    <input type="number" class="form-control" id="extension">
                                </div>
                            </div>
                                                        <div class="col-md-4">
                                <div class="form-group filled">
                                    <label for="clave" class="label">Celular: <span class="text-danger"> *</span></label>
                                    <input type="number" class="form-control" id="celular">
                                </div>
                            </div>
                        </div>
                        <div class="row">




                        </div>
                    </div>
                    <div class="tab-pane " id="imagen_link" aria-expanded="false">
                        <h5 class="text-center card-description" style="margin-top: -20px;">Selecciona la imagen del usuario</h5>
                        <div class="row justify-content-center">
                            <div class="col-md-4">
                                <div class="fileinput fileinput-new text-center" data-provides="fileinput">
                                    <div class="fileinput-new thumbnail img-raised">
                                        <img src="http://style.anu.edu.au/_anu/4/images/placeholders/person_8x10.png" id="imgContent" alt="...">
                                    </div>
                                    <div class="fileinput-preview fileinput-exists thumbnail img-raised"></div>
                                    <div>
                                        <span class="btn btn-raised btn-round btn-default btn-file">
                                            <span class="fileinput-new">Selecciona una imagen</span>
                                            <span class="fileinput-exists">Cambiar</span>
                                            <input type="file" id="foto" name="foto" accept="image/png, image/gif, image/jpeg" />
                                            <textarea id="fotobase64" style="display: none;"></textarea>
                                        </span>
                                        <a href="#pablo" class="btn btn-danger btn-round fileinput-exists" data-dismiss="fileinput"><i class="fa fa-times"></i> Eliminar</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger btn-link" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" onclick="guardarUsuario()">Guardar</button>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="id_usuario_hidden">
<input type="hidden" id="id_perfil_hidden">
@endsection
@push('js')

<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        loadPerfiles();
        loadUsuarios();
    });

    // PERFILES

    function loadPerfiles() {
        //$('#').DataTable();
        $('#tablePerfiles').dataTable().fnDestroy();
        $('#tablePerfiles').DataTable({
            "scrollX": true,
            language: {
                url: "{{asset('material/datatable_sp.json')}}"
            },
            ajax: {
                url: "{{url('configuracion/perfiles/get_perfiles')}}",
                type: "POST",
            },
            columns: [{
                    data: "id"
                },
                {
                    data: "nombre"
                },
                {
                    data: "codigo"
                },
                {
                    data: "estatus"
                },
                {
                    data: "acciones"
                },

            ],
            order: [
                [0, "asc"]
            ],

        });

    }


    function nuevoPerfil() {
        $('#text_title_modal_informacion').text('Agregar nuevo perfil');
        $('#modalPerfil').modal('show');
        limpiarSection(2);
    }
    $('input[name="selectMenu"]').change(function() {
        if ($(this).is(':checked')) {
            $('.' + this.value).prop('checked', true)
        } else {
            $('.' + this.value).prop('checked', false)
        }

    });

    function selectAll(tipo) {
        if (tipo == 1) {
            $('#btnClear').show()
            $('#btnSelect').hide()
            $('.acciones').prop('checked', true);
            // showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', 'Se han seleccionado todos los menús.')
        } else {
            $('#btnClear').hide()
            $('#btnSelect').show()
            $('.acciones').prop('checked', false);
            // showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', 'Se han limpiado los menús seleccionados.')

        }

    }

    function guardarPerfil() {
        var nombre = $('#nombre_perfil').val(),
            codigo = $('#codigo_perfil').val(),
            id_perfil = $('#id_perfil_hidden').val();

        var menusPerfil = new Array;
        $('input.acciones[type=checkbox]').each(function() {
            if (this.checked) {
                menusPerfil.push(this.value)
            }
        });
        if (menusPerfil.length == 0) {
            showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Por lo menos debes seleccionar un menú para el perfil');
            return false;
        }
        if (nombre == '' || codigo == '') {
            showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Debes ingresar toda la información del perfil');
            return false;
        }
        $('#loadingSave').modal('show');
        $.ajax({
                url: "{{ url('configuracion/perfiles/save_perfil')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id_perfil,
                    nombre: nombre,
                    codigo: codigo,
                    menus: menusPerfil,
                    estatus: 1,
                },
            })
            .done(function(resp) {
                setTimeout(() => {
                    location.reload();
                }, 3000);

            })
            .fail(function() {
                console.log("error");
                showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Algo salio mal durante el proceso, intentalo más tarde.')

            })
            .always(function(resp) {
                console.log("complete");
                limpiarSection(2);
                $('#modalPerfil').modal('hide');
                setTimeout(() => {
                    showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje)
                    $('#loadingSave').modal('hide');
                }, 2000);
            });
    }

    function activarDesPerfil(id) {
        //console.log(val,id)
        var act_des = 0

        if ($('#actdes_' + id).prop('checked')) {
            act_des = 1
        } else {
            act_des = 0

        }
        $('#loadingUpdate').modal('show');
        $.ajax({
                url: "{{ url('configuracion/perfiles/update_perfil')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    estatus: act_des,
                    id: id
                },
            })
            .done(function(resp) {
                if (resp.result == 1) {
                    $('#tablePerfiles').DataTable().ajax.reload();
                }
            })
            .fail(function() {
                console.log("error");
            })
            .always(function(resp) {
                console.log("complete");
                setTimeout(() => {
                    $('#loadingUpdate').modal('hide');
                    showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje)
                }, 2000);
            });

    }

    function editarPerfil(id) {
        limpiarSection(2)
        $.ajax({
                url: "{{url('configuracion/perfiles/get_perfil')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                }
            })
            .done(function(resp) {
                console.log("success");
                if (resp.result == 1) {
                    $('#modalPerfil').modal('show');
                    $('#text_title_modal_informacion').text('Editar perfil')
                    $('.filled').addClass('is-filled');
                    $('#id_perfil_hidden').val(resp.data['perfil']['id']);
                    $('#nombre_perfil').val(resp.data['perfil']['nombre']);
                    $('#codigo_perfil').val(resp.data['perfil']['codigo']);
                }
                $.each(resp.data['menus_perfil'], function(index, value) {
                    $('#check_' + value['id_menu']).prop('checked', true);
                })
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function eliminarPerfil(id) {
        Swal.fire({
            title: '¿Estás seguro de eliminar?',
            text: "Esta acción no es reversible",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: 'Cancelar',
            confirmButtonText: 'Sí, eliminar'
        }).then((result) => {
            if (result.value) {
                $('#loadingLoad').modal('show')
                $.ajax({
                        url: "{{url('configuracion/perfiles/delete_perfil')}}",
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            id: id,
                        }
                    })
                    .done(function(resp) {
                        console.log("success");
                        if (resp.result == 1) {
                            showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje)
                            $('#tablePerfiles').DataTable().ajax.reload();
                        } else {
                            $('#loadingLoad').modal('hide')
                            showNotification('error', 'top', 'center', 'danger', '¡ERROR!', resp.mensaje)
                        }
                    })
                    .fail(function() {
                        console.log("error");
                    })
                    .always(function(resp) {
                        console.log("complete");
                        setTimeout(() => {
                            $('#loadingLoad').modal('hide')
                        }, 2000);
                    });

            }
        })
    }
    // USUARIOS
    function loadUsuarios() {
        //$('#').DataTable();
        $('#tableUsuarios').dataTable().fnDestroy();
        $('#tableUsuarios').DataTable({
            "scrollX": true,
            language: {
                url: "{{asset('material/datatable_sp.json')}}"
            },
            ajax: {
                url: "{{url('configuracion/perfiles/get_usuarios')}}",
                type: "POST",
            },
            columns: [{
                    data: "id", visible: false
                },
                {
                    data: "name"
                },
                 {
                    data: "name",render : function(data, type, row ){
                        return row.nombres+' '+row.apellidos
                    }
                },
                {
                    data: "email"
                },
               /* {
                    data: "perfil"
                },
                {
                    data: "sucursal"
                },*/
                {
                    data: "estatus"
                },
                {
                    data: "acciones"
                },
            ],
            order: [
                [0, "asc"]
            ],

        });

    }

    function nuevoUsuario() {
        $('#text_title_modal_informacion2').text('Agregar nuevo usuario');
        $('#modalUsuario').modal('show')
        limpiarSection(1);
    }

    function limpiarSection(tipo) {
        if (tipo == 1) {
            $('#id_usuario_hidden').val('');
            $('#nombres').val('');
            $('#apellidos').val('');
            $('#name').val('');
            $('#email').val('');
            $('#password').val('');
            $('#password_confirm').val('');
            $('#telefono').val('');
            $('#foto').val('');
            $('#fotobase64').text('');
            $('#imgContent').attr('src', "http://style.anu.edu.au/_anu/4/images/placeholders/person_8x10.png");
            $('#extension').val('');
            $('#celular').val('');
            $('#id_perfil').val(0);
            $('#id_sucursal').val(0);
            $('.selectpicker').selectpicker('refresh');
            $('.filled').removeClass('is-filled');

        } else {
            $('#id_perfil_hidden').val('');
            $('#nombre_perfil').val('');
            $('#codigo_perfil').val('');
            $('#btnClear').hide()
            $('#btnSelect').show()
            $('input.acciones[type="checkbox"]').prop('checked', false)
            $('.filled').removeClass('is-filled');
        }

    }

    function error() {
        Swal.fire({
            type: 'error',
            title: 'Contraseña no valida',
            html: '<label class="text-secondary h6" >La contraseña debe de tener:</label></br>' +
                '<label class="text-secondary"><span class="text-danger">1. </span>Deben de ser iguales.</label></br>' +
                '<label class="text-secondary"><span class="text-danger">2. </span>Tener por lo menos una letra.</label></br>' +
                '<label class="text-secondary"><span class="text-danger">3. </span>Tener por lo menos un numero.</label></br>' +
                '<label class="text-secondary"><span class="text-danger">4. </span>Tener por lo menos un caracter especial ( * + - . _ ).</label></br>' +
                '<label class="text-secondary"><span class="text-danger">5. </span>Tener logitud mayor o igual a 8.</label>',
        })
    }

    function tiene_letras(password) {
        var letras = "abcdefghyjklmnñopqrstuvwxyz";
        password = password.toLowerCase();
        for (i = 0; i < password.length; i++) {
            if (letras.indexOf(password.charAt(i), 0) != -1) {
                return 1;
            }
        }
        return 0;
    }

    function guardarUsuario() {
        var id_usuario = $('#id_usuario_hidden').val();
        var nombres = $('#nombres').val();
        var apellidos = $('#apellidos').val();
        var name = $('#name').val();
        var email = $('#email').val();
        var password = $('#password').val();
        var telefono = $('#telefono').val();
        var extension = $('#extension').val(); 
        var celular = $('#celular').val();
        var password_confirm = $('#password_confirm').val();
        var id_perfil = 2;
        var id_sucursal = 1;
        var foto = $('#fotobase64').val();

        if (nombres == '' || name == '' || password == '' || password_confirm == '') {
            showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Debes ingresar toda la información del usuario');
            return false;
        }
        const regex = /^[0-9]*$/;
        var longitud = password.length,
            bandera = false,
            bandera2 = false,
            bandera3 = false;
        for (var i = 0; i <= longitud - 1; i++) {
            if (regex.test(password[i])) {
                var bandera = true;
            } else {
                if (password[i] == password[i].toUpperCase()) {
                    var bandera2 = true;
                }
            }
        }
        if (password.includes('*') || password.includes('+') || password.includes('.') || password.includes('-') || password.includes('_')) {
            var bandera3 = true;
        }
        var a = tiene_letras(password)
        if (a == 0) {
            error()
            return false;
        }
        if (longitud < 8) {
            error()
            return false;
        }
        if (!bandera || !bandera2 || !bandera3) {
            error()
            return false;
        }
        if (password != password_confirm) {
            error()
            return false;
        }
        $('#loadingSave').modal('show');
        $.ajax({
                url: "{{ url('configuracion/perfiles/save_usuario')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id_usuario,
                    nombres: nombres,
                    apellidos: apellidos,
                    name: name,
                    email: email,
                    password: password,
                    id_perfil: id_perfil,
                    id_sucursal: id_sucursal,
                    telefono: telefono,
                    extension: extension,
                    celular: celular,
                    estatus: 1,
                    secret: password_confirm,
                    foto: foto,
                },
            })
            .done(function(resp) {
                $('#tableUsuarios').DataTable().ajax.reload();

                setTimeout(() => {
                    if (resp.result == 1) {
                        showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje)


                    } else {
                        Swal.fire({
                            type: 'error',
                            title: 'Límite de usuarios alcanzado',
                            html: '<label class="text-secondary" >Te recomendamos contactar con el área de soporte para aumentar tu límite de usuarios</label></br>'
                        })
                    }
                    limpiarSection(1);
                    $('#modalUsuario').modal('hide');
                }, 2000);
            })
            .fail(function() {
                console.log("error");
            })
            .always(function(resp) {
                console.log("complete");

                setTimeout(() => {
                    $('#loadingSave').modal('hide');

                }, 2000);
            });

    }

    function activarDes(id) {
        //console.log(val,id)
        var act_des = 0

        if ($('#actdes_' + id).prop('checked')) {
            act_des = 1
        } else {
            act_des = 0

        }
        $('#loadingUpdate').modal('show');
        $.ajax({
                url: "{{ url('configuracion/perfiles/update_usuario')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    estatus: act_des,
                    id: id
                },
            })
            .done(function(resp) {
                if (resp.result == 1) {
                    $('#tableUsuarios').DataTable().ajax.reload();
                }
            })
            .fail(function() {
                console.log("error");
            })
            .always(function(resp) {
                console.log("complete");
                setTimeout(() => {
                    $('#loadingUpdate').modal('hide');
                    showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje)
                }, 2000);
            });

    }

    function editar(id) {
        $.ajax({
                url: "{{url('configuracion/perfiles/get_usuario')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                }
            })
            .done(function(resp) {
                console.log("success");
                if (resp.result == 1) {
                    $('#modalUsuario').modal('show');
                    $('#text_title_modal_informacion2').text('Editar usuario')
                    $('.filled').addClass('is-filled');
                    $('#id_usuario_hidden').val(resp.data['id']);
                    $('#nombres').val(resp.data['nombres']);
                    $('#apellidos').val(resp.data['apellidos']);
                    $('#email').val(resp.data['email']);
                    $('#name').val(resp.data['name']);
                    $('#password').val(atob(resp.data['secret']));
                    $('#password_confirm').val(atob(resp.data['secret']));
                    $('#id_perfil').val(resp.data['id_perfil']);
                    $('#id_sucursal').val(resp.data['id_sucursal']);
                    $('#telefono').val(resp.data['telefono']);
                    $('#extension').val(resp.data['extension']);
                    $('#fotobase64').text(resp.data['foto']);
                    $('#celular').val(resp.data['celular']);
                    $('#imgContent').attr('src', resp.data['foto']);
                    $('.selectpicker').selectpicker('refresh');
                }
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function eliminar(id) {
        Swal.fire({
            title: '¿Estás seguro de eliminar?',
            text: "Esta acción no es reversible",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: 'Cancelar',
            confirmButtonText: 'Sí, eliminar'
        }).then((result) => {
            if (result.value) {
                $('#loadingLoad').modal('show')
                $.ajax({
                        url: "{{url('configuracion/perfiles/delete_usuario')}}",
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            id: id,
                        }
                    })
                    .done(function(resp) {
                        console.log("success");
                        if (resp.result == 1) {
                            $('#tableUsuarios').DataTable().ajax.reload();
                        }
                    })
                    .fail(function() {
                        console.log("error");
                    })
                    .always(function(resp) {
                        console.log("complete");
                        setTimeout(() => {
                            showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje)
                            $('#loadingLoad').modal('hide')
                        }, 2000);
                    });

            }
        })
    }

    function verContraseñas(tipo) {
        if (tipo == 1) {
            document.getElementById("password").type = "text"
            document.getElementById("password_confirm").type = "text"
            $('#btn1').hide();
            $('#btn2').show();

        } else {
            $('#btn2').hide();
            $('#btn1').show();
            document.getElementById("password").type = "password"
            document.getElementById("password_confirm").type = "password"
        }
    }


    // get a reference to the file input
    const fileInput = document.querySelector("#foto");

    // listen for the change event so we can capture the file
    fileInput.addEventListener("change", (e) => {
        // get a reference to the file
        const file = e.target.files[0];
        // encode the file using the FileReader API
        const reader = new FileReader();
        reader.onloadend = () => {
            $('#fotobase64').text(reader.result);
            // $('#imgContent').attr('src', reader.result)
        };
        reader.readAsDataURL(file);
    });
</script>
@endpush