@extends('modules.head') @section('contenido')
<div class="roles-main-section">
    <div class="roles-items-container">
        <div id="roles">
            <div>
                <h4>Roles List</h4>
                <a href="{{url('/role-see-form')}}" id="set_relation_btn" style="display:none">Edit Roles</a>
                <ul>
                    @foreach($roles as $role)
                    <li><button type="button" value="{{ $role->id }}" class="roles-btn">{{ $role->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" style="max-height: 355px;overflow-y:scroll;"></ol>
            </div>
        </div>
    </div>
    @if(Auth::user()->rol_id == 1)
    <div class="roles-homepage-container">
        <div>
            <select class="form-control" name="roles" id="roles">
                <option value="">Select role</option>
                @foreach($roles as $role)
                <option value="{{ $role->id }}"
                        data-current-homepage="{{ isset($role->defaultHomePageRoute?->name) ? Lang::get('messages.'.$role->defaultHomePageRoute?->name) : '' }}">{{ $role->name }}
                </option>
                @endforeach
            </select>
        </div>
        <div>
            <select class="form-control" name="module_items" id="module_items">
              <option value=''>Select homepage</option>
            </select>
        </div>
        <div>
            <i class="fa-solid fa-plus"></i>
        </div>
    </div>
    <div class="roles-homepage-payload-container">
        <table id="payload-table" class="table table-striped" style="display:none">
            <thead>
                <tr>
                    <th>Role</th>
                    <th>Current homepage</th>
                    <th>New homepage</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    @endif
</div>
@if(Auth::user()->rol_id == 1)
<button id="set-home-page-btn" class="btn pull-left btnAux">
    Set Homepage
</button>
@endif
<link rel="stylesheet" href="{{ asset('css/managerols.css') }}">
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".roles-btn").click(function(e) {
            $(".list-ordered").empty();
            $("#items-label").text("");
            $("#set_relation_btn").show();
            $("#items, #dvLoader").show();
            $("#dvRoleItems").hide();
            $.ajax({
                url: "/manage-role",
                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);
                }
            });
        });

        // HOMEPAGE FUNCTIONALITY
        $(".roles-homepage-container .fa-plus").click(function() {
            let selected_role_id = $(".roles-homepage-container #roles").val();
            let selected_role_name = $(".roles-homepage-container #roles option:selected").eq(0).text();
            let current_role_homepage = $(".roles-homepage-container #roles option:selected").eq(0).attr('data-current-homepage');
            let selected_module_item_id = $(".roles-homepage-container #module_items").val();
            let selected_module_item_name = $(".roles-homepage-container #module_items option:selected").eq(0).text();
            if (selected_role_id == "" || selected_module_item_id == "") {
                swal('', 'Either Role or Homepage not selected.', 'info');
                return false;
            }

            let row = {
                role_id: selected_role_id,
                role_name: selected_role_name,
                current_role_homepage: current_role_homepage,
                module_item_id: selected_module_item_id,
                module_item_name: selected_module_item_name
            }

            let trs = $("#payload-table tbody tr");
            if (shouldIAddTheLine(trs, row)) {
                renderTableWithValues(row);
            } else {
                swal('', 'Role already added.', 'info');
            }
        });

        function shouldIAddTheLine(trs, row) {
            let shouldIAddTheLine = true;
            for (let i = 0; i < trs.length; i++) {
                if (trs[i].dataset.roleId == row.role_id) {
                    shouldIAddTheLine = false;
                }
            }
            return shouldIAddTheLine;
        }

        function renderTableWithValues(row) {
            $("#payload-table").show();
            let line = `<tr data-role-id=${row.role_id} data-module-item-id=${row.module_item_id}>
                             <td>${row.role_name}</td>
                             <td>${row.current_role_homepage}</td>
                             <td>${row.module_item_name}</td>
                             <td><i class="fa-solid fa-minus"></i></td>
                        </tr>`;
            $("#payload-table tbody").append(line);

            // Removing row
            $("#payload-table tbody .fa-minus").each(function(index) {
                $(this).on("click", function() {
                    $(this).closest('tr').remove();
                });
            });
        }

        $("#set-home-page-btn").click(function() {
            if (!$("#payload-table tbody tr").length) {
                swal('', 'Select at least one relation.', 'info');
                return false;
            }

            let payload = [];
            $("#payload-table tbody tr").each(function() {
                let obj = {
                    role_id: $(this).attr("data-role-id"),
                    module_item_id: $(this).attr("data-module-item-id"),
                }
                payload.push(obj);
            })

            setNewHomePage(payload);
        })

        function setNewHomePage(payload) {
            $.ajax({
                url: '/roles/set-home-page',
                type: "POST",
                contentType: 'application/json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Content-Type': 'application/json'
                },
                data: JSON.stringify(payload),
                success: function(data) {
                    let icon_value = data.status ? 'success' : 'warning';
                    swal('', data.message, icon_value).then(function(ok) {
                        location.reload();
                    });
                },
                error: function(error) {
                    swal('Server error', `${error.message}`, 'error');
                }
            });
        }

        $(".roles-homepage-container #roles").change(function() {
            $.ajax({
                url: "/manage-role/get-assigned-module-items/" + $(this).val(),
                type: "GET",
                contentType: 'application/json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Content-Type': 'application/json'
                },
                success: function(r) {
                    if (r.status) {
                        renderModuleItemsOptionByRole(r.module_items);
                    }
                },
                error: function(e) {
                    console.log(e);
                }
            });
        })

        function renderModuleItemsOptionByRole(module_items) {
            let selectElement = $(".roles-homepage-container #module_items");
                selectElement.empty();
            let options = "<option value=''>Select homepage</option>";
            module_items.forEach(function(module_item){
                options += `<option value="${module_item.id}">${module_item.name}</option>`;
            })
            selectElement.append(options);
        }

    });
</script>
@endsection