@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</h4>
                    </div>
                    <div class="card-body ">

                        <!-- @if(auth()->user()->id_perfil == 1) -->
                        <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>
                        <!-- @endif -->
                        <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>
            </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

                            @if($data['menus']['reportes'])

                            <!-- CATALOGOS -->
                            <div class="card card-collapse">
                                <div class="card-header" role="tab" id="heading5">
                                    <h5 class="mb-0">
                                        <a class="collapsed" data-toggle="collapse" href="#collapse5" aria-expanded="false" aria-controls="collapse5">
                                            Reportes
                                            <i class="material-icons">keyboard_arrow_down</i>
                                        </a>
                                    </h5>
                                </div>
                                <div id="collapse5" class="collapse" role="tabpanel" aria-labelledby="heading5" 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']['reportes'] 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
                            <!-- PROYECTOS -->
                            @if($data['menus']['proyectos'])

                            <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">
                                            Proyectos
                                            <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']['proyectos'] 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


                            @if($data['menus']['compras'])

                            <div class="card card-collapse">
                                <div class="card-header" role="tab" id="headingCom">
                                    <h5 class="mb-0">
                                        <a class="collapsed" data-toggle="collapse" href="#collapseCom" aria-expanded="false" aria-controls="collapseCom">
                                            Compras
                                            <i class="material-icons">keyboard_arrow_down</i>
                                        </a>
                                    </h5>
                                </div>
                                <div id="collapseCom" class="collapse" role="tabpanel" aria-labelledby="headingCom" 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']['compras'] 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

                            <!-- 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>



<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();
		$("input[type='search']").wrap("<form>");
		$("input[type='search']").closest("form").attr("autocomplete","off");
    });

    // PERFILES

    function loadPerfiles() {
        //$('#').DataTable();
        $('#tablePerfiles').dataTable().fnDestroy();
        $('#tablePerfiles').DataTable({
            lengthMenu: [10, 15, 20, 50, 100],
            dom: 'Bfrtip',
            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"]
            ],
            buttons: [{
                    extend: 'copyHtml5',
                    text: '<i class="fa fa-files-o"></i>',
                    titleAttr: 'Copiar'
                },
                {
                    extend: 'excelHtml5',
                    text: '<i class="fa fa-file-excel-o"></i>',
                    titleAttr: 'Excel'
                },
                {
                    extend: 'csvHtml5',
                    text: '<i class="fa fa-file-text-o"></i>',
                    titleAttr: 'CSV'
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fa fa-file-pdf-o"></i>',
                    titleAttr: 'PDF'
                }

            ],

        });

    }


    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");

                    });

            }
        })
    }

    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');
        }

    }
</script>
@endpush