@extends('apex-layouts.main')

@section('content')
    @if(session()->get('success'))
        <div class="alert alert-success">
            {{ session()->get('success') }}
        </div><br/>
    @endif

    <section id="hoverable-rows">
        <div class="row">
            <div class="col-sm-12 col-md-6 col-lg-5">
                <div class="card" style="text-transform: capitalize;">
                    <div class="card-header">
                        <p><code>Role Name</code>&nbsp;:&nbsp;{{ $model->roleName}}
                            <a class="p-0" href="{{ route('roles.edit', $model->id) }}" data-original-title="" title="">
                                <i class="ft-edit font-medium-3 mr-2"></i>
                            </a>
                        </p>

                    </div>


                    <div class="card-body">
                        <div class="card-block">
                            <table class="table table-hover">
                                <tbody>
                                @foreach($model->getAttributes() as $index => $value)
                                    <tr>
                                        <th>{{ $index }}</th>
                                        <td>{{ $value }}</td>
                                    </tr>
                                @endForeach

                                </tbody>
                            </table>

                            <div class="form-actions">
                                <a href="{{ route('roles.index') }}"
                                   class="btn btn-raised btn-raised btn-warning pull-right">
                                    <i class="ft-x"></i> Back
                                </a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="col-sm-12 col-md-6 col-lg-7">
                <div class="card" style="text-transform: capitalize;">
                    <div class="card-header">
                        <h4 class="card-title">Permissions</h4>
                        <p>The Map Permissions Of {{ $model->roleName }}</p>
                    </div>
                    <div>
                        <div class="card-body">
                            <div class="card-block">
                                <table class="table table-responsive-sm zero-configuration">
                                    <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Permission Name</th>
                                        <th></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach(config('permissions') as $key => $permission)
                                        <tr>
                                            <td>{{$key}}</td>
                                            <td>{{$permission}}</td>
                                            <td>
                                                <div class="pull-right">
                                                    <input type="checkbox" id="switchery" data-name="{{$permission}}"
                                                           class="switchery switch-boxes-id"/>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>

@endsection


@section('scripts')
    <script src="{{ asset('apex-assets/vendors/js/datatable/datatables.min.js') }}"></script>
    <script src="{{ asset('apex-assets/vendors/js/switchery.min.js') }}"></script>
    <script src="{{ asset('apex-assets/js/switch.min.js') }}"></script>

    <script>
        $(document).ready(function () {
            var permissions = ;
            // $('.zero-configuration').DataTable();
            $('.zero-configuration').DataTable({
                "pageLength": 100
            });
            //set the assign pemission checks
            $('.switch-boxes-id').each(function () {
                var obj = $(this);
                var checkId = obj.attr('data-name');
                $.each(permissions, function (index, val) {
                    if (checkId == val) {
                        obj.trigger('click');
                        // obj.attr('disabled',true);
                    }
                });
            });

            //event of change permissions check
            $('.switch-boxes-id').change(function () {
                jQuery.ajax({
                    url: '{{route('roles.assignPermission',$model->id)}}',
                    data: {
                        _token: '{{csrf_token()}}',
                        roleId: {{ $model->id }} ,
                        permission: $(this).attr('data-name')
                    },
                    type: 'PUT',
                    dataType: 'JSON',
                    success: function (response) {
                        if (response.status) {
                            swal("Success", response.message, "success")
                        } else {
                            swal("Error", response.message, "error")
                        }
                    }, error: function (error) {
                        console.log(error);
                    }
                });
            });
        });
    </script>
@stop

@section('styles')
    <link rel="stylesheet" type="text/css"
          href="{{ asset('apex-assets/vendors/css/tables/datatable/datatables.min.css') }}">
    <link rel="stylesheet" type="text/css"
          href="{{ asset('apex-assets/vendors/css/switchery.min.css') }}">
@stop