{{--Get the Page Format--}}
@extends('layouts.app')

{{--Set Page Title--}}
@section('title', 'User Roles')

{{--Include any Internal JS Code--}}
@section('internal-js')
    <script>
        $(document).ready(function () {
            $('#active-table').dataTable();
        });

        {{--Create New User Account Function--}}
        function addRole(){
            var route_link = '/add-user-role';

            $('#edit_dialog_content').html('<div style="text-align: center; margin: 20px 0 20px 0;"><img src="{{asset('images/loads/loader.gif')}}" border=0></div>');
            $('#edit_dialog_content').load(encodeURI(route_link));
            $('#edit_dialog_content').dialog({
                modal: true,
                width: 500,
                title: "Create New User Role",

                buttons: [
                    {
                        text: "Save Details",
                        icon: "ui-icon-check",
                        id: "my-button-1",
                        click: function(e) {
                            if(confirm('Are you sure to Save Entered Details?')){
                                e.preventDefault();
                                $("#my-button-1").attr('disabled', true);
                                $("#my-button-1").text('Please Wait....');
                                var datas = $('#add-user-role').serializeArray();

                                $.ajax({
                                    method: "POST",
                                    url: route_link,
                                    data: datas,
                                    success: function (res){
                                        if(res == 'name exists'){
                                            alert('Entered name already Exists.');
                                            $("#my-button-1").attr('disabled', false).text('Save Details');
                                        }else if(res == 'success'){
                                            alert('User Role Created Successfully');
                                            location.reload();
                                        }else if(res == 'error'){
                                            alert('An Error occurred and System is unable to perform the requested action. Try again later');
                                            location.reload();
                                        }else{
                                            alert('System Encountered an Error. Please Contact System Admin');
                                            location.reload();
                                        }
                                    }
                                });
                            }
                            return false;
                        }
                    }
                ],
                open: function() {
                    $(this).parent().css({'top': 50});
                }
            });
        }


        {{--Assign Permisions to Roles--}}
        function assignPermissions(id){
            var route_link = '/assign-permissions-to-role/'+id;

            $('#edit_dialog_content').html('<div style="text-align: center; margin: 20px 0 20px 0;"><img src="{{asset('images/loads/loader.gif')}}" border=0></div>');
            $('#edit_dialog_content').load(encodeURI(route_link));
            $('#edit_dialog_content').dialog({
                modal: true,
                width: 500,
                title: "Affiliate a Role with Permissions",

                buttons: [
                    {
                        text: "Save Details",
                        icon: "ui-icon-check",
                        id: "my-button-1",
                        click: function(e) {
                            if(confirm('Are you sure to Save Entered Details?')){
                                e.preventDefault();
                                $("#my-button-1").attr('disabled', true).text('Please Wait....');
                                var datas = $('#assign-permissions-to-role').serializeArray();

                                $.ajax({
                                    method: "POST",
                                    url: route_link,
                                    data: datas,
                                    success: function (res){
                                        if(res == 'success'){
                                            location.reload();
                                        }else if(res == 'empty list'){
                                            alert('Please Select at least one Permission from the Provided List');
                                            $("#my-button-1").attr('disabled', false).text('Save Details');
                                        }else{
                                            alert('System Encountered an Error. Please Contact System Admin');
                                        }
                                    }
                                });
                            }
                            return false;
                        }
                    }
                ],
                open: function() {
                    $(this).parent().css({'top': 50});
                }
            });
        }

        {{--View Permissions Assigned to a Role--}}
        function viewRolePermissions(id){
            var route_link = '/view-assigned-permissions-to-role/'+id;

            $('#edit_dialog_content').html('<div style="text-align: center; margin: 20px 0 20px 0;"><img src="{{asset('images/loads/loader.gif')}}" border=0></div>')
                .load(encodeURI(route_link)).dialog({
                modal: true,
                width: 500,
                title: "View Assigned Permissions to a Role",
                open: function() {
                    $(this).parent().css({'top': 50});
                }
            });
        }
    </script>
@endsection

{{--Include any Internal CSS Code--}}
@section('internal-css')
    <style>
        #active-table th, td {
            text-align: left;
            padding: 4px;
        }
        #active-table tr:hover {background-color: #cbd1f8;}

    </style>
@endsection

{{--Control Page Header/Links--}}
@section('headers')
    @include('headers.settings-header')
@endsection

{{--Set Page Heading--}}
@section('heading', 'User Roles')

{{--Page Content Goes here--}}
@section('content')
    <div class="tab">
        <button class="tablinks" onclick="openCity(event, 'users')" id="defaultOpen">Active User Roles</button>
    </div>

    <div id="users" class="tabcontent">
        <h3 class="error">
            Company's Active User Roles
            <button onclick="addRole()" class="section-button">+ Add New User Role</button>
        </h3>
        <table id="active-table" class="display" style="width: 100%; border-collapse: collapse; ">
            <thead>
            <tr style="background-color: #a1b5d3">
                <th>No</th>
                <th>Role Name</th>
                <th>Assigned Permissions</th>
                <th>Assign Permission</th>
                <th>Created At</th>
                <th style="width: 40px">Edit</th>
                <th style="width: 40px">Manage</th>
            </tr>
            </thead>
            <tbody>
            @foreach($lists as $row)
                <tr>
                    <td class="ar"></td>
                    <td><b class="error">{!! $row->name !!}</b></td>
                    <td>
                        <b>
                            {!! count($row->permissions) !!}
                            @if(count($row->permissions) > 0)
                                <i onclick="viewRolePermissions('{{$row->id}}')" class="fa fa-eye error" style="margin-left: 5px;font-size: 16px; cursor: pointer"></i>
                            @endif
                        </b>
                    </td>
                    <td><i onclick="assignPermissions('{{$row->id}}')" class="fa fa-pencil error" style="font-size: 16px; cursor: pointer"></i></td>
                    <td>{!! date('d/m/Y',strtotime($row->created_at)) !!}</td>
                    <td><i class="fa fa-pencil error" style="font-size: 14px"></i></td>
                    <td><i class="fa fa-trash error" style="font-size: 14px"></i></td>
                </tr>
            @endforeach
            </tbody>
            <tfoot>
            <tr style="background-color: #a1b5d3">
                <th>No</th>
                <th>Role Name</th>
                <th>Assigned Permissions</th>
                <th>Assign Permission</th>
                <th>Created At</th>
                <th style="width: 40px">Edit</th>
                <th style="width: 40px">Manage</th>
            </tr>
            </tfoot>
        </table>
    </div>

@endsection

@section('modal_heading')
    <h1>Setup Users Roles</h1>
@endsection
@section('modal_title')
    <h3><u>Dashboard Functionalities</u></h3>
    <b>
        <ol>
            <li>View All User Roles in the System </li>
        </ol>
    </b>
@endsection







