@extends('modules.head') @section('contenido')
<div class="rols_items_container">
    <div id="rols">
        <div>
            <h4>Roles List</h4>
            <a href="{{url('/seeForm')}}" id="set_relation_btn" style="display:none">Edit Roles</a>
            <ul>
                @foreach($rols as $rol)
                <li><button type="button" value="{{$rol->id}}" class="rols-btn">{{$rol->name}}</button></li>
                @endforeach
            </ul>
        </div>  
    </div> 
    <div id="items" style="display: none;">
        <div id="dvLoader" style="display: none;">
            <div class="loader"></div>
        </div>
        <div id="dvRoleItems" style="display: none;">
            <h4 id="items-label"></h4>
            <ol class="list-ordered"></ol>
        </div>
    </div>
</div>
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/dropzone/dropzone.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".rols-btn").click(function(e) {
            $(".list-ordered").empty();
            $("#items-label").text("");
            $("#set_relation_btn").show();
            $("#items, #dvLoader").show();
            $("#dvRoleItems").hide();
            $.ajax({
                url: "managerol",
                success: function(result) {
                    let current_rol = e.target.value;
                    let rolName = $("#items-label");
                    let data = result.data;
                    let arrayOfItems = [];
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].rol_id == current_rol) {
                            rolName.text(`${data[i].rol.name} items`);
                            arrayOfItems.push(data[i].rol);
                        }
                    }
                    let arr = arrayOfItems[0];
                    let modItems = arr.modules_items;
                    var cList = $('.list-ordered')
                    for (let i = 0; i < modItems.length; i++) {
                        var li = $('<li/>')
                            .text(modItems[i].name)
                            .appendTo(cList);
                    }
                    window.setTimeout( $("#dvLoader").hide(), 4500 );
                    window.setTimeout( $("#dvRoleItems").show(), 4500 );
                }
            });
        });
    });
</script>
@endsection