@php
$page_name = 'Roles';
@endphp
@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">Permission</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;">
                            <a href="{{route('roles.create')}}" class="btn btn-info btn-block">Add <small> (Role)</small></a>
                                <!-- <button type="button" id="AddButton"
                                    onclick="$('#AddRole').modal('show'); setTimeout(function(){ $('#ShiftName').focus(); }, 500);"
                                    class="btn btn-info btn-block">Add <small> (Permission)</small></button> -->
                            </td>
                        </tr>
                    </tbody>
                </table>
                <!--****************** Vertical Scroll table start ************************-->
                <div class="table-responsive CustomFixedTbl" style="min-height:60vh; max-height:60vh; ">
                        <table id="basicExample" class="table ui-sortable">
                            <thead>
                                <tr>
                                    <th>Sr. No</th>
                                    <th>Role Name</th>
                                    <th>Group Name</th>
                                    <th class="text-center">Updated Date</th>
                                    <th class="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            @foreach($roles as $key => $value)
                                <tr>
                                    <td>{{ $value->id}}</td>
                                    <td>{{ $value->name}}</td>
                                    <td>{{ $value->group_name}}</td>
                                    <td>{{ $value->group_name}}</td>
                                    <td class="text-center">
                                    <a class="badge badge-primary" href="{{route('roles.edit',$value->id)}}">Edit</a>
                                    <a onclick="ActionDelete({{$value->id}})" class="badge badge-danger" href="#">Delete</a>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>Sr. No</th>
                                    <th>Permission Name</th>
                                    <th>Group 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">Permission</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">Permission 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 Permission</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">Permission Name</label>
                                <input type="text" name="name" id="EditRoleName" class="form-control form-control-sm"
                                    placeholder="">
                            </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 = [];

    function SaveRole() {
        let role = $('#RoleName').val();
        if (role == '') {
            Notify("Error ", 'Role Name is required!', "danger"); 
            return false;      
        }
        $("#AddRoleForm").submit();
    }
    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>