@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">
                        <h4 class="card-title">Perfiles y usuarios</h4>
                    </div>
                    <div class="card-body ">
                        <ul class="nav nav-pills nav-pills-primary" role="tablist">
                            <li class="nav-item" onclick="loadPerfiles()">
                                <a class="nav-link active" data-toggle="tab" href="#link1" role="tablist">
                                    Perfiles
                                </a>
                            </li>
                            <li class="nav-item" onclick="loadUsuarios()">
                                <a class="nav-link" data-toggle="tab" href="#link2" role="tablist">
                                    Usuarios
                                </a>
                            </li>
                        </ul>
                        <hr>
                        <div class="tab-content tab-space">
                            <div class="tab-pane active" 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="row">
                                    <table class="table table-bordered table-hover" cellspacing="0" id="tablePerfiles" width="100%" style="width: 100%;">
                                        <thead>
                                            <tr>
                                                <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">ID</th>
                                                <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">Nombre del perfil</th>
                                                <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">Estatus</th>
                                                <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">Acciones</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="tab-pane" 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="row">
                                    <table class="table table-bordered table-hover" cellspacing="0" id="tableUsuarios" width="100%" style="width:100%">
                                        <thead>
                                            <tr>
                                                <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">ID</th>
                                                <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">Nombre del usuario</th>
                                                <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">Correo</th>
                                                <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">Perfil</th>
                                                <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">Sucursal</th>
                                                <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">Estatus</th>
                                                <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">Acciones</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal draggable fade" id="modalPerfil" 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_informacion"></h4>
            </div>
            <div class="modal-body">
                <h5 class="text-center card-description mt-1 mb-2">Selecciona los menús a los cuales tendra acceso el perfil</h5>

                <div class="row">
                    <div class="col-md-8">
                        <div class="row mb-2">
                            <div class="col-12">
                                <button class="btn btn-primary btn-sm" id="btnSelect" onclick="selectAll(1)">Seleccionar todos</button>
                                <button class="btn btn-sm btn-danger" style="display:none ;" id="btnClear" onclick="selectAll(2)">Limpiar seleccionados</button>
                            </div>
                        </div>

                        <div id="accordion" role="tablist">
                            @if($data['menus']['catalogos'])

                            <!-- CATALOGOS -->
                            <div class="card card-collapse">
                                <div class="card-header" role="tab" id="heading4">
                                    <h5 class="mb-0">
                                        <a class="collapsed" data-toggle="collapse" href="#collapse4" aria-expanded="false" aria-controls="collapse4">
                                            Catalogos
                                            <i class="material-icons">keyboard_arrow_down</i>
                                        </a>
                                    </h5>
                                </div>
                                <div id="collapse4" class="collapse" role="tabpanel" aria-labelledby="heading4" data-parent="#accordion">
                                    <div class="card-body">
                                        <div class="material-datatables col-md-12 m-0 p-0">
                                            <table class="table table-no-bordered table-hover" cellspacing="0" id="tableOperaciones" width="100%" style="width:100%">
                                                <thead>

                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Seleccionar todos</td>
                                                        <td><input type="checkbox" name="selectMenu" value="check_cat"></td>
                                                    </tr>
                                                    @foreach($data['menus']['catalogos'] as $m)
                                                    <tr>
                                                        <td>{{$m->nombre_largo}}</td>
                                                        <td><input class="acciones check_cat" type="checkbox" name="prods" value="{{$m->id}}" id="check_{{$m->id}}"></td>
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endif
                            <!-- CONSULTAS -->
                            @if($data['menus']['consultas'])

                            <div class="card card-collapse">
                                <div class="card-header" role="tab" id="headingTwo">
                                    <h5 class="mb-0">
                                        <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                            Consultas
                                            <i class="material-icons">keyboard_arrow_down</i>
                                        </a>
                                    </h5>
                                </div>
                                <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
                                    <div class="card-body">
                                        <div class="material-datatables col-md-12 m-0 p-0">
                                            <table class="table table-no-bordered table-hover" cellspacing="0" id="tableOperaciones" width="100%" style="width:100%">
                                                <thead>

                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Seleccionar todos</td>
                                                        <td><input type="checkbox" name="selectMenu" value="check_co"></td>
                                                    </tr>
                                                    @foreach($data['menus']['consultas'] as $m)
                                                    <tr>
                                                        <td>{{$m->nombre_largo}}</td>
                                                        <td><input class="acciones check_co" type="checkbox" name="prods" value="{{$m->id}}" id="check_{{$m->id}}"></td>
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endif

                            <!-- OPERACIONES -->
                            @if($data['menus']['operaciones'])

                            <div class="card card-collapse">
                                <div class="card-header" role="tab" id="headingOne">
                                    <h5 class="mb-0">
                                        <a data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                            Operaciones
                                            <i class="material-icons">keyboard_arrow_down</i>
                                        </a>
                                    </h5>
                                </div>
                                <div id="collapseOne" class="collapse " role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
                                    <div class="card-body">
                                        <div class="material-datatables col-md-12 m-0 p-0">
                                            <table class="table table-no-bordered table-hover" cellspacing="0" id="tableOperaciones" width="100%" style="width:100%">
                                                <thead>

                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Seleccionar todos</td>
                                                        <td><input type="checkbox" name="selectMenu" value="check_op"></td>
                                                    </tr>
                                                    @foreach($data['menus']['operaciones'] as $m)
                                                    <tr>
                                                        <td>{{$m->nombre_largo}}</td>
                                                        <td><input class="acciones check_op" type="checkbox" name="prods" value="{{$m->id}}" id="check_{{$m->id}}"></td>
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endif

                            <!-- REPORTES -->
                            @if($data['menus']['reportes'])

                            <div class="card card-collapse">
                                <div class="card-header" role="tab" id="headingEs">
                                    <h5 class="mb-0">
                                        <a data-toggle="collapse" href="#collapseEs" aria-expanded="false" aria-controls="collapseEs">
                                            Reportes
                                            <i class="material-icons">keyboard_arrow_down</i>
                                        </a>
                                    </h5>
                                </div>
                                <div id="collapseEs" class="collapse " role="tabpanel" aria-labelledby="headingEs" data-parent="#accordion">
                                    <div class="card-body">
                                        <div class="material-datatables col-md-12 m-0 p-0">
                                            <table class="table table-no-bordered table-hover" cellspacing="0" id="tableOperaciones" width="100%" style="width:100%">
                                                <thead>

                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Seleccionar todos</td>
                                                        <td><input type="checkbox" name="selectMenu" value="check_es"></td>
                                                    </tr>
                                                    @foreach($data['menus']['reportes'] as $m)
                                                    <tr>
                                                        <td>{{$m->nombre_largo}}</td>
                                                        <td><input class="acciones check_es" type="checkbox" name="prods" value="{{$m->id}}" id="check_{{$m->id}}"></td>
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endif

                            <!-- CONFIGURACION -->
                            @if($data['menus']['configuracion'])

                            <div class="card card-collapse pb-4">
                                <div class="card-header" role="tab" id="heading8">
                                    <h5 class="mb-0">
                                        <a class="collapsed" data-toggle="collapse" href="#collapse8" aria-expanded="false" aria-controls="collapse8">
                                            Configuración
                                            <i class="material-icons">keyboard_arrow_down</i>
                                        </a>
                                    </h5>
                                </div>
                                <div id="collapse8" class="collapse" role="tabpanel" aria-labelledby="heading8" data-parent="#accordion">
                                    <div class="card-body">
                                        <div class="material-datatables col-md-12 m-0 p-0">
                                            <table class="table table-no-bordered table-hover" cellspacing="0" id="tableOperaciones" width="100%" style="width:100%">
                                                <thead>

                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Seleccionar todos</td>
                                                        <td><input type="checkbox" name="selectMenu" value="check_conf"></td>
                                                    </tr>
                                                    @foreach($data['menus']['configuracion'] as $m)
                                                    <tr>
                                                        <td>{{$m->nombre_largo}}</td>
                                                        <td><input class="acciones check_conf" type="checkbox" name="prods" value="{{$m->id}}" id="check_{{$m->id}}"></td>
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endif

                        </div>
                    </div>
                    <div class="col-md-4">

                        <div class="input-group  input-group-static mb-2">
                            <label>Nombre del perfil: <span class="text-danger">*</span></label>
                            <input type="text" class="form-control " id="nombre_perfil">
                        </div>
                    </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" onclick="guardarPerfil()">Guardar</button>
            </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">
                <div class="row">
                    <div class="col-md-4">
                        <div class="input-group  input-group-static mb-2">
                            <label for="descripcion" class="bmd-label-floating">Nombres <span class="text-danger"> *</span></label>
                            <input type="text" class="form-control" id="nombres">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="input-group  input-group-static mb-2">
                            <label for="descripcion" class="bmd-label-floating">Apellidos <span class="text-danger"> *</span></label>
                            <input type="text" class="form-control" id="apellidos">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="input-group  input-group-static mb-2">
                            <label for="clave" class="bmd-label-floating">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="input-group  input-group-static mb-2">
                            <label for="descripcion" class="bmd-label-floating">Correo <span class="text-danger"> *</span></label>
                            <input type="email" class="form-control" id="email">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="input-group  input-group-static mb-2">
                            <label for="clave" class="bmd-label-floating">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="input-group  input-group-static mb-2">
                            <label for="clave" class="bmd-label-floating">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">
                        <div class="input-group input-group-static mb-2">
                            <label>Perfil <span class="text-danger"> *</span></label>
                            <select class="form-control" 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">
                        <div class="input-group input-group-static mb-2">
                            <label>Sucursal <span class="text-danger"> *</span></label>
                            <select class="form-control" 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->Id}}">{{$su->Descripcion}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="input-group input-group-static mb-2">
                            <label for="descripcion" class="bmd-label-floating">Teléfono <span class="text-danger"> *</span></label>
                            <input type="number" class="form-control" id="telefono">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="input-group input-group-static mb-2">
                            <label for="descripcion" class="bmd-label-floating">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="input-group input-group-static mb-2">
                            <label for="clave" class="bmd-label-floating">Celular <span class="text-danger"> *</span></label>
                            <input type="number" class="form-control" id="celular">
                        </div>
                    </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" 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({
            lengthMenu: [10, 15, 20, 50, 100],
            processing: true,
            responsive: true,
            scrollY: '50vh',
            scrollCollapse: true,
            ajax: {
                url: "{{url('configuracion/perfiles/get_perfiles')}}",
                type: "POST",
            },
            columns: [{
                    data: "id"
                },
                {
                    data: "nombre"
                },
                {
                    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(),
            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) {
            Swal.fire({
                type: 'error',
                title: 'Por lo menos debes seleccionar un menú para el perfil',
                showConfirmButton: false,
                timer: 2500
            });
            return false;
        }
        if (nombre == '') {
            Swal.fire({
                type: 'error',
                title: 'Debes ingresar toda la información del perfil',
                showConfirmButton: false,
                timer: 2500
            });
            return false;
        }
        $.ajax({
                url: "{{ url('configuracion/perfiles/save_perfil')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id_perfil,
                    nombre: nombre,
                    menus: menusPerfil,
                    estatus: 1,
                },
            })
            .done(function(resp) {
                limpiarSection(2);
                $('#modalPerfil').modal('hide');
                Swal.fire({
                    type: 'success',
                    title: resp.mensaje,
                    showConfirmButton: false,
                    timer: 2500
                });
            })
            .fail(function() {
                console.log("error");
                Swal.fire({
                    type: 'error',
                    title: 'Algo salio mal durante el proceso, intentalo más tarde',
                    showConfirmButton: false,
                    timer: 2500
                });
            })
            .always(function(resp) {
                console.log("complete");

            });
    }

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

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

        }
        $.ajax({
                url: "{{ url('configuracion/perfiles/update_perfil')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    estatus: act_des,
                    id: id
                },
            })
            .done(function(resp) {
                $('#tablePerfiles').DataTable().ajax.reload();
                // showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje)
                Swal.fire({
                    type: 'success',
                    title: resp.mensaje,
                    showConfirmButton: false,
                    timer: 2500
                });
            })
            .fail(function() {
                console.log("error");
            })
            .always(function(resp) {
                console.log("complete");

            });

    }

    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']);
                }
                $.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)
                            Swal.fire({
                                type: 'success',
                                title: resp.mensaje,
                                showConfirmButton: false,
                                timer: 2500
                            });
                            $('#tablePerfiles').DataTable().ajax.reload();
                        } else {
                            // $('#loadingLoad').modal('hide')
                            Swal.fire({
                                type: 'success',
                                title: resp.mensaje,
                                showConfirmButton: false,
                                timer: 2500
                            });
                            // showNotification('error', 'top', 'center', 'danger', '¡ERROR!', resp.mensaje)
                        }
                    })
                    .fail(function() {
                        console.log("error");
                    })
                    .always(function(resp) {
                        console.log("complete");

                    });

            }
        })
    }
    // USUARIOS
    function loadUsuarios() {
        //$('#').DataTable();
        $('#tableUsuarios').dataTable().fnDestroy();
        $('#tableUsuarios').DataTable({
            lengthMenu: [10, 15, 20, 50, 100],
            processing: true,
            responsive: true,
            scrollY: '50vh',
            scrollCollapse: true,
            ajax: {
                url: "{{url('configuracion/perfiles/get_usuarios')}}",
                type: "POST",
            },
            columns: [{
                    data: "id"
                },
                {
                    data: "name"
                },
                {
                    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('');
            $('#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('');
            $('#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 = $('#id_perfil option:selected').val();
        var id_sucursal = $('#id_sucursal option:selected').val();

        if (nombres == '' || name == '' || password == '' || password_confirm == '' || id_perfil == 0 || id_sucursal == 0) {
            // showNotification('error', 'top', 'center', 'danger', '¡ERROR!', '');
            Swal.fire({
                type: 'error',
                title: 'Debes ingresar toda la información del usuario',
                showConfirmButton: false,
                timer: 2500
            });
            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;
        }
        $.ajax({
                url: "{{ url('configuracion/perfiles/save_usuario')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id_usuario,
                    name: nombres,
                    apellidos: apellidos,
                    username: name,
                    email: email,
                    password: password,
                    id_perfil: id_perfil,
                    id_sucursal: id_sucursal,
                    telefono: telefono,
                    extension: extension,
                    celular: celular,
                    estatus: 1,
                    secret: password_confirm,
                },
            })
            .done(function(resp) {
                if (resp.result == 2) {
                    Swal.fire({
                        type: 'error',
                        title: 'Algo salio mal',
                        text: resp.mensaje,
                        showConfirmButton: false,
                        timer: 2500
                    });
                    return;
                }
                limpiarSection(1);
                $('#modalUsuario').modal('hide');
                Swal.fire({
                    type: 'success',
                    title: resp.mensaje,
                    showConfirmButton: false,
                    timer: 3500
                });
                $('#tableUsuarios').DataTable().ajax.reload();
            })
            .fail(function() {
                console.log("error");
            })
            .always(function(resp) {
                console.log("complete");

            });

    }

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

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

        }
        $.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();
                    // showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje);
                    Swal.fire({
                        type: 'success',
                        title: resp.mensaje,
                        showConfirmButton: false,
                        timer: 2500
                    });
                }
            })
            .fail(function() {
                console.log("error");
            })
            .always(function(resp) {
                console.log("complete");

            });

    }

    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['name']);
                    $('#apellidos').val(resp.data['apellidos']);
                    $('#email').val(resp.data['email']);
                    $('#name').val(resp.data['username']);
                    $('#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']);
                    $('#celular').val(resp.data['celular']);
                    $('.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");
                        $('#tableUsuarios').DataTable().ajax.reload();
                        Swal.fire({
                            type: 'success',
                            title: resp.mensaje,
                            showConfirmButton: false,
                            timer: 2500
                        });
                    })
                    .fail(function() {
                        console.log("error");
                    })
                    .always(function(resp) {
                        console.log("complete");

                    });

            }
        })
    }

    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"
        }
    }
</script>
@endpush