@extends('admin.layout')

@section('content')

    <div class="wrapper-md">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-md-10">
                        <div class="col-sm-4 form-group">
                        <p class="m-n font-thin h3">All Roll</p>
                        </div>


                        {{--<div class="col-md-4 ">
                            @can('create-role')
                                <form method="get" action="{{$_SERVER['REQUEST_URI']}}" class="navbar-form navbar-form-sm navbar-left shift" ui-shift="prependTo" data-target=".navbar-collapse" role="search" ng-controller="TypeaheadDemoCtrl">
                                 <select class="form-control bg-light no-border rounded" name="user_role_group_id" id="user_role_group_id" onchange="javascript:submit()" >
                                  <option value="All">Select Group</option>
                                @foreach($user_role_group as $key=>$value)
                                    <option value="{{$value->id}}">{{$value->group_name}}</option>
                                @endforeach
                            </select>
                            {!! $errors->first('user_role_group_id', '<small class="text-danger">:message</small>') !!}
                                </form>
                            @endcan
                        </div>



                        <div class="col-md-3">
                        @can('create-role')
                            <!-- search form -->
                                <form method="get" action="{{$_SERVER['REQUEST_URI']}}" class="navbar-form navbar-form-sm navbar-left shift" ui-shift="prependTo" data-target=".navbar-collapse" role="search" ng-controller="TypeaheadDemoCtrl">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <input type="text" name="searchkey" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control input-sm bg-light no-border rounded padder" placeholder="Search projects...">
                                            <span class="input-group-btn">
                <button type="submit" class="btn btn-sm bg-light rounded"><i class="fa fa-search"></i></button>
              </span>
                                        </div>
                                    </div>
                                </form>
                        @endcan
                        <!-- / search form -->
                        </div>--}}


                    </div>
                    <div class="col-md-2 text-right">
                        <a href="{{route('role.create')}}" class="btn btn-primary btn-sm"><i
                                    class="fa fa-plus"></i>&nbsp;&nbsp;Add New</a>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <table id="pattern-type-data" ui-jq="dataTable" class="table table-bordered dataTable">
                    <thead>
                    <tr>
                        <th style="width:10%">SRL No.</th>
                        <th style="width:25%">Name of the Roles</th>
                        <th style="width:20%">Created At</th>
                        <th style="width:25%">Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($roles as $role)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $role->name }}</td>

                            <td>{{ date('d-m-Y', strtotime($role->created_at)) }}</td>
                            <td>
                                @can('update-role')
                                    <a href="{{ url('/role/' . $role->id . '/edit') }}" title="Edit Role">
                                        <button class="btn btn-primary btn-xs"><i class="fa fa-pencil-square-o"
                                                                                  aria-hidden="true"></i> &nbsp;Edit
                                        </button>
                                    </a>
                                @endcan
                                @can('delete-role')
                                    <form method="POST" action="{{ url('/role' . '/' . $role->id) }}"
                                          accept-charset="UTF-8" style="display:inline">
                                        {{ method_field('DELETE') }}
                                        {{ csrf_field() }}
                                        <button type="submit" class="btn btn-danger btn-xs"
                                                title="Delete Role"
                                                onclick="return confirm('&quot;Confirm delete?&quot;')"><i
                                                    class="fa fa-trash" aria-hidden="true"></i> &nbsp;Delete
                                        </button>
                                    </form>
                                @endcan
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script src="{{asset('backend')}}/libs/jquery/jquery/dist/jquery.js"></script>
    <script>
        $(document).ready(function () {
            $('.sortaccess').change(function () {
                id = $(this).data('id')
                sortid = $(this).val()

                $.ajax({
                    url: "{{URL::to('/update-sortaccess')}}",
                    dataType: "text",
                    type: 'POST',
                    data: {'_token': $('meta[name=csrf-token]').attr('content'), 'id': id, 'sortid': sortid },
                    success: function (data) {
                        $.snackbar({content: data, timeout: 10000});
                    }
                })

            })
        })
    </script>

    <script type="text/javascript">
        $(document).ready(function () {
            ////////////////////////////////////////////////////////////////////////////////////////
            $(".dataTable3").dataTable();
            $('.dataTable').dataTable({
                "bPaginate": true,
                "bLengthChange": false,
                "bFilter": true,
                "bSort": false,
                "bInfo": true,
                "bAutoWidth": false
            });
        });
    </script>
@endsection