@php
$page_name = 'Roles';
@endphp

@inject('GetPermission', 'App\Http\Traits\GetPermission')
@include('partial.header')

<div class="container-fluid">
    @include('partial.navigation')
    <div class="main-container">
            <!-- Content wrapper start -->
            <div class="content-wrapper">
                <div class="table-container">
                    @if(\Session::has('success'))
                        <div class="alert alert-success">
                            {{\Session::get('success')}}
                        </div>
                    @endif
                </div>  
                <table class="table" style="margin-bottom: 0px !important;">
                    <tbody>
                        <tr>
                            <td style="width:100px;">
                                <h5 class="table-title">Role</h5>
                            </td>
                            <td style="width:60px;"><b>Search</b></td>
                            <td style="width:300px;">
                            <!-- <input autofocus="" id="SearchShift" onblur="Shifts()"
                                    class="form-control form-control-sm" type="text" placeholder=""> -->
                                </td>
                            <td></td>
                            <td style="width:350px;">
                            </td>
                            <td style="width:150px;">
                                <button type="button" id="AddButton"
                                    onclick="$('#AddRole').modal('show'); setTimeout(function(){ $('#ShiftName').focus(); }, 500);"
                                    class="btn btn-info btn-block">Add <small> (Role)</small></button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <!--****************** Vertical Scroll table start ************************-->
                <div class="table-responsive CustomFixedTbl" style="min-height:60vh; max-height:60vh; ">
                        <table id="RolesReOrder" class="table ui-sortable">
                            <thead>
                                <tr>
                                    <th>Sr. No</th>
                                    <th>Role Name</th>
                                    <th class="text-center">Updated Date</th>
                                    <th class="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody id="RoleBody">
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>Sr. No</th>
                                    <th>Role Name</th>
                                    <th class="text-center">Updated Date</th>
                                    <th class="text-center">Action</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    <!--******** Vertical Scroll table end ********************-->
            </div>
    </div>
</div>

<!-- Start Add Ledger Modal -->
<div class="modal fade" id="AddRole" tabindex="-1" role="dialog" aria-labelledby="basicModalLabel"
                    aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <form method="post" action="addRole" id="AddRoleForm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="basicModalLabel">Role</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row gutters">
                        <div class="col-xl-6 col-lglg-6 col-md-6 col-sm-6 col-12">
                            <div class="form-group">
                                <label for="disabledInput">Role Name</label>
                                <input type="text" name="name" id="RoleName" class="form-control form-control-sm"
                                    placeholder="">
                            </div>
                        </div>
                        
                    </div>
                    <div class="row gutters">
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="hidden" value="{{csrf_token()}}" name="_token" />
                    <button onclick="SaveRole()" type="button" class="btn btn-primary">Save</button>
                    <button type="button" class="btn btn-lighten" data-dismiss="modal">Close</button>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- End Add Ledger Modal -->
<!-- Start Add Ledger Modal -->
<div class="modal fade" id="ActionModal" tabindex="-1" role="dialog" aria-labelledby="basicModalLabel"
                    aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <form method="post" action="addRole" id="AddRoleForm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="basicModalLabel">Edit Role</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row gutters">
                        <div class="col-xl-6 col-lglg-6 col-md-6 col-sm-6 col-12">
                            <div class="form-group">
                                <label for="disabledInput">Role Name</label>
                                <input type="text" name="name" id="EditRoleName" class="form-control form-control-sm"
                                    placeholder="">
                            </div>
                            <div class="form-group">
                                @foreach($permission as $value)
                                    <label for="example-text-input" class="col-md-2 col-form-label">{{ $value->group_name }}</label>
                                    @foreach($GetPermission->get_permisions_by_group($value->group_name) as $row)
                                    <label for="{{$row->name}}" class="col-md-2 col-form-label pl-4"><input type="checkbox" name="permission[]" id="{{$row->name}}" value="{{$row->name}}" class="" /> {{ $row->name }}</label>
                                    @endforeach
                                @endforeach
                                @if ($errors->has('permission'))
                                <span class="text-danger">{{ $errors->first('permission') }}</span>
                                @endif
                            </div>
                        </div>
                        
                    </div>
                    <div class="row gutters">
                    </div>
                </div>
                <div class="modal-footer">
                    <button onclick="UpdateRole()" type="button" class="btn btn-primary">Update</button>
                    <button type="button" class="btn btn-lighten" data-dismiss="modal">Close</button>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- End Add Ledger Modal -->
<script>
    var BaseUrl = "/";
    var nav = "roles";
</script>
@include('partial.footer')
<script>
    var Shift_ArrayList = [];
    var SelectedRow = [];

    var ShiftsOders = [];

    $(document).ready(function() {
        roles();
    });
    function SaveRole() {
        let role = $('#RoleName').val();
        if (role == '') {
            Notify("Error ", 'Role Name is required!', "danger"); 
            return false;      
        }
        $("#AddRoleForm").submit();
    }
    function roles() {
        //var Name = $('#SearchShift').val();
        var JsonData = { 'SearchRole': '' };
        JsonData['nav'] = nav;
        JsonData['Method'] = "ajax_roles_all";
        AjaxCall("/getRoles", JsonData, function (response) {
            if (response.status == true) {
                var Row = '';
                Shift_ArrayList = [];
                $.each(response.data, function (index, obj) {
                    Shift_ArrayList[index] = obj;
                    Row += '<tr id="Roles_' + this.id + '">'
                        + '<td>' + (index + 1) + '</td>'
                        + '<td>' + this.role_name + '</td>'
                        + '<td class="text-center">' + this.updated_at + '</td>'
                        + '<td class="text-center">'
                            +   '<a onclick="ActionPopup(' + index + ')" class="badge badge-primary" href="#">Edit</a>  '
                            + '<a onclick="ActionDelete(' + this.id + ')" class="badge badge-danger" href="#">Delete</a>'
                        + '</td>'
                        + '</tr>';
                });
                $('#RoleBody').html(Row);
                //console.clear();
            } else if (response.status == false) {
                // Notify("Error ", response.message, "danger");
            }
        });
    }

    function ActionDelete(id) {
        if (confirm('Are you sure want to delete?')) {
            let JsonData = {};
            JsonData['roleId'] = id;
            JsonData['_token'] = _token;
            JsonData['nav'] = nav;
            JsonData['Method'] = "role_delete";
            AjaxCall("/deleteRole", JsonData, function (response) {
                if (response.status == true) {
                    Notify("Success ", response.message, "success");
                    setTimeout(function() {
                        location.reload(true);
                    }, 500);
                } else if (response.status == false) {
                    Notify("Error ", response.message, "danger");
                }
            });
        }
    }

    function ActionPopup(index) {
        SelectedRow = {};
        SelectedRow = Shift_ArrayList[index];
        $('#ActionModal').modal('show');
        setTimeout(function () {
            $('#EditRoleName').val(SelectedRow.role_name);
            $('#EditRoleName').focus().select();
        }, 700);
    }

    function UpdateRole() {
        let role = $('#EditRoleName').val();
        if (role == '') {
            Notify("Error ", 'Role Name is required!', "danger");
            return false;       
        }
        let JsonData = {'name':role};
        JsonData['roleId'] = SelectedRow.id;
        JsonData['_token'] = _token;
        JsonData['nav'] = nav;
        JsonData['Method'] = "ajax_role_update";
        AjaxCall("/updateRole", JsonData, function (response) {
            if (response.status == true) {
                Notify("Success ", response.message, "success");
                setTimeout(function() {
                    location.reload(true);
                }, 500);
            } else if (response.status == false) {
                Notify("Error ", response.message, "danger");
            }
        });
    }
    
    
    ko.bindingHandlers.nextFieldOnEnter = {
        init: function(element, valueAccessor, allBindingsAccessor) {
            $(element).on('keydown', 'input, select', function (e) {
                var self = $(this)
                , form = $(element)
                  , focusable
                  , next
                ;
                //LastFocusedControl_Id = $(":focus").attr("id");
                if (e.keyCode == 13) {
                    focusable = form.find('input,select,button,textarea').filter(':visible');
                    var nextIndex = focusable.index(this) == focusable.length -1 ? 0 : focusable.index(this) + 1;
                    next = focusable.eq(nextIndex);
                        
                        
                    next.focus().select();
                    return false;
                }
            });
        }
    };
    ko.applyBindings({});
</script>