@extends('layouts.superAdmin')
@section('page-css')
    <link rel="stylesheet" href="{{ asset('assets/styles/vendor/datatables.min.css') }}">
@endsection
@section('main-content')

    <div class="breadcrumb">
        <h1>Permission Templates</h1>
        <ul>
            <li><a href="{{route('dashboard')}}">Home</a></li>
            <li><a href="{{route('superAdmin.dashboard')}}">Dashboard</a></li>
            <li>Lists</li>
        </ul>
    </div>
    <div class="separator-breadcrumb border-top"></div>


    <section class="contact-list">
        <div class="row">
            <div class="col-md-12 mb-4">
                <div class="card text-left">
                    <div class="card-header text-right bg-transparent">
                        <button type="button" data-toggle="modal" data-target=".create_new_role" class="btn btn-primary btn-md m-1"><i class="i-Add text-white mr-2"></i> Add Permission Template</button>
                        <button type="button" data-toggle="modal" data-target=".create_new_permission" class="btn btn-primary btn-md m-1"><i class="i-Add text-white mr-2"></i> Add New Permissions</button>
                    </div>
                    <!-- begin::modal -->
                    <div class="ul-card-list__modal">
                        <div class="modal fade create_new_role" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-md">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">New Permission Template</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <form method="post" action="{{ route('roles.store') }}" novalidate class="needs-validation" id="frmRoles">
                                            @csrf
                                            @method('POST')
                                            <input type="hidden" name='action' id="action-field" value='create'>
                                            <input type="hidden" name='role' id="role_id" value="">
                                            <div class="form-group row">
                                                <label for="name" class="col-sm-3 col-form-label">Template Name</label>
                                                <div class="col-sm-9">
                                                    <input type="text" class="form-control" value="" name="name" id="name" placeholder="Name" required>
                                                    <div class="invalid-feedback">this field value is required</div>
                                                    @error('name')<span class="invalid-feedback">{{$message}}</span> @enderror
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                <button type="submit" class="btn btn-primary" >Save</button>
                                            </div>

                                        </form>
                                    </div>

                                </div>
                            </div>
                        </div>

                        <div class="modal fade create_new_permission" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-md">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">New Permission</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <form method="post" action="{{ route('permissions.store') }}" id="frmPermission" novalidate class="needs-validation">
                                            @csrf
                                            @method('POST')
                                            <input type="hidden" name='action' id="action-field" value='create'>
                                            <input type="hidden" name='permission' id="permission_id" value="">
                                            <div class="form-group row">
                                                <label for="name" class="col-sm-3 col-form-label">Permission Category</label>
                                                <div class="col-sm-9">
                                                    {{--<select multiple name="category_id" id="category_id" class="form-control" required>
                                                        @for($i=0; $i<count($permissionCats);$i++)
                                                            @if($i == 0)
                                                                <optgroup label="{{$permissionCats[$i]->subcat}}">
                                                                    <option value="{{$permissionCats[$i]->id}}">{{$permissionCats[$i]->subsub_cat}}</option>
                                                            @elseif($permissionCats[$i]->subcat == $permissionCats[$i-1]->subcat)
                                                                    <option value="{{$permissionCats[$i]->id}}">{{$permissionCats[$i]->subsub_cat}}</option>
                                                            @else
                                                                </optgroup><optgroup label="{{$permissionCats[$i]->subcat}}">
                                                                    <option value="{{$permissionCats[$i]->id}}">{{$permissionCats[$i]->subsub_cat}}</option>
                                                            @endif
                                                        @endfor
                                                        </optgroup>
                                                    </select>--}}
                                                    <select multiple name="category_id" id="category_id" class="form-control" required>
                                                        @if(count($permissionCats)>0)
                                                            @foreach($permissionCats as $permissions)
                                                                <option value="{{$permissions->id}}">{{$permissions->subcat}}</option>
                                                            @endforeach
                                                        @else
                                                            <option value="">No Records Found</option>
                                                        @endif
                                                    </select>
                                                    <div class="invalid-feedback">this field value is required</div>
                                                    @error('name')<span class="invalid-feedback">{{$message}}</span> @enderror
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="name" class="col-sm-3 col-form-label">Permission Name</label>
                                                <div class="col-sm-9">
                                                    <input type="text" class="form-control" value="" name="name" id="name" placeholder="Permission" required>
                                                    <div class="invalid-feedback">this field value is required</div>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                <button type="submit" class="btn btn-primary" >Save</button>
                                            </div>

                                        </form>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end::modal -->

                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="ul-roles-list" class="display table table-striped table-bordered dataTable" style="width:100%">
                                <thead>
                                <tr>
                                    <th>Permission Template Name</th>
                                    {{--<th class="no-sort">Permissions</th>
                                    <th>Enable</th>--}}
                                    <th>Created</th>
                                    <th class="no-sort">Action</th>
                                </tr>
                                </thead>


                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- end of row -->

@endsection

@section('bottom-js')
    <script src="{{ asset('assets/js/vendor/datatables.min.js') }}"></script>
    <!-- page script -->
    <script>
        var table = $('#ul-roles-list').DataTable({
            processing: true,
            serverSide: true,
            dom: 'f<"top"i>rt<"bottom"lp><"clear">',
            pagingType: "full_numbers",
            scrollY: '50vh',
            scrollCollapse: true,
            /*select: {
                style:    'os',
                selector: 'td:first-child'
            },*/
            ajax: "{{route('roles.list')}}",
            "columnDefs": [ {
                "targets": 'no-sort',
                "orderable": false,
            }],
            fnDrawCallback: function( oSettings ) {
                $('.edit_roles').on('click', function(){
                    var roleName = $(this).data('name')
                    var roleId = $(this).data('role')
                    $('.create_new_role').modal('show');
                    $('.create_new_role').on('shown.bs.modal', function (e) {
                        $("input[name='name']").val(roleName)
                        $("input[name='role']").val(roleId)
                        var url = '{{ route('roles.update',":id") }}';
                        url = url.replace(':id', roleId);
                        $('#frmRoles').attr('action', url)
                        $('#action-field').val('update');
                        $('#exampleModalLabel').text('Update Permission Template');
                        $('input[name="_method"]').val('PUT')
                    });
                });
            }
        });
    </script>
    <script src="{{asset('assets/js/form.validation.script.js')}}"></script>
@endsection