@extends('layouts.app')
@section('title', trans('settings.access_right_title'))

@section('plugin-styles')
    <link href="//cdn.datatables.net/rowreorder/1.4.1/css/rowReorder.bootstrap4.min.css" rel="stylesheet">
@stop

@section('content')
    <div class="content">
        <x-content.header title="{{__('title.setup_roles')}}" subTitle="{{__('title.role_subtitle')}}">
            <x-slot:headerRight>
                <button type="button" data-toggle="canvas-panel"
                    data-title="{{trans('forms.lbl_create_role')}}"
                    data-uri="{{url('settings/roles')}}"
                    class="btn-secondary-base">
                    <x-svg-icon icon="icon-plus" />{{__('forms.lbl_add_new')}}
                </button>
            </x-slot:headerRight>
        </x-content.header>

        <table id="datatable" class="table-custom-striped w-full" style="width: 100%;">
            <thead>
                <tr>
                    <th scope="col">{{__('forms.lbl_name')}}</th>
                    <th scope="col">{{trans("tables.order_title")}}</th>
                    <th scope="col" style="min-width:30%">&nbsp;</th>
                </tr>
            </thead>
        </table>
    </div>

    @include('users.roles.clone')

@endsection

@section('panel-content')
    <x-content.canvas title="{{__('forms.lbl_role')}}" action="{{url('settings/roles')}}">
        <div class="form_group">
            <label for="name" class="form-label text-sm-medium">{{__('forms.lbl_name')}}*</label>
            <input type="text" name="name" id="name" class="form-input" value="" required>
            <input type="hidden" name="id" disabled value="0">
        </div>
    </x-content.canvas>
@stop

@section('footer-script')
    <script type="text/javascript">

        PDDataTable({
            url: "{{ url('settings/roles') }}",
            searching : false,
            columns:[
                { data: 'name', name: 'name'},
                { data: 'order', name: 'order', orderable: true, visible:false },
                { data: 'action', name: 'action', orderable: false, searchable : false, className:"text-right" }
            ],
            order : [1, 'asc'],
            rowReorder : {
                dataSrc : 'order',
                update  : false,
                ajaxUri : "{{route('settings.roles.reorder')}}"
            }

        });

        $(".btn-save").on("click", function(event) {

            event.preventDefault();

            if($("#form").valid()){
	            data = $('#form').serialize();
	            PDRequest({
	                type    : $('#form').attr("method"),
	                url     : $("#form").attr("action"),
	                data    : data,
	                event   : event
	            }).then((response) => {

                    PDTable.draw();

                    Canvas.close();
	            });
			}
        });
    </script>
@stop