@extends('admin.layout.main_v')
@section('permissions_active_class')
    @include('admin.layout.active_class')
@stop
@section('style')
    @if(App::getLocale() == 'ar')
        <link href="{{asset('assets/assets_1/datatables/datatables.bundle.rtl.css')}}" rel="stylesheet" type="text/css" />
    @else
        <!--begin::Page Vendors Styles(used by this page) -->
        <link href="{{asset('assets/assets_1/datatables/datatables.bundle.css')}}" rel="stylesheet" type="text/css" />
        <link href="{{url("/")}}/assets/assets_1/bootstrap-select/dist/css/bootstrap-select.css" rel="stylesheet" type="text/css" />

        <!--end::Page Vendors Styles -->
    @endif
@stop

@section('js')
    <script src="{{asset('assets/assets_1/datatables/basic/basic.js')}}" type="text/javascript"></script>
    <script src="{{asset('assets/assets_1/datatables/datatables.bundle.js')}}" type="text/javascript"></script>

	<script>
        var add_edit_url = '{!!route('admin.roles_permissions.add_edit')!!}';
        var data_table_url = '{!!route('admin.roles_permissions.list')!!}';
        var Modal = $('#add_edit');
        var Table = $('#data_table');
        $(document).ready(function() {
            Table.DataTable({
                processing: true,
                serverSide: true,
                // "order": [[ 0, "desc" ]],
                @include('admin.shared.pagination')
                ajax:{
                    "url":  data_table_url,
                    "type": 'GET',
                    "data": function(d) {
                        d.s_display_name = $('#s_display_name').val()
                    }
                },
                columns: [
                    {className: 'text-center', data: 's_display_name', name: 's_display_name', orderable: true, searchable: false},
                    {className: 'text-center', data: 'set_permission', name: 'set_permission', searchable: false},
                    {className: 'text-center', data: 'b_enabled', name: 'b_enabled', orderable: true, searchable: true},
                    {className: 'text-center', data: 'actions', name: 'actions', orderable: true, searchable: false},
                ]
            });

            $('#app_delete_modal .ok').click(function (e) {
                e.preventDefault();
                var data = $('#app_delete_form').serializeArray();
                var urlDelete = data[2].value;
                $.ajax({
                    url : urlDelete,
                    data : data,
                    type: "POST",
                    beforeSend(){
                    block_modal('app_delete_modal','@lang('general.text_please_wait')');
                    },
                    success:function(data) {
                        if(data.success){
                            $('#app_delete_modal').modal('hide');
                            RefreshTable(Table, data_table_url);
                            showAlertMessage('success','{{$data['name']}} /', data.message);
                        }
                        else{
                            if(data.errors) {
                                const error_messages = Object.values(data.errors);
                                var message_to_show = '<ul style="padding-left:20px">';
                                for (const error_message of error_messages) {
                                    message_to_show += '<li>'+error_message+'</li>';
                                }
                                message_to_show += '</ul>';
                                showAlertMessage('danger', '{{$data['name']}} /' + data.message, message_to_show, 1000);
                            }
                            else showAlertMessage('danger', '{{$data['name']}} /' , data.message, 1000);
                        }
                        un_block_modal('app_delete_modal');
                    },
                    error:function(data){},
                    statusCode: {500: function(data){}}
                });
            });

            $('.reset_form').click(function() {
                $('#s_full_name').val('');
                $('#s_username').val('');
                $('#email').val('');
                RefreshTable(Table, data_table_url);
            });

            $('.search_btn').click( function(ev) {
                RefreshTable(Table, data_table_url);
            });
		});

        function showModal(id,modal_id,url,token,validate){
            $("html, body").animate({
                scrollTop: 0
            }, 600);

            $.ajax({
                url : url,
                data : {'pk_i_id':id,'_token':token},
                type: "POST",
                beforeSend(){
                    block_page('{{trans('general.text_please_wait')}} ...');
                },
                success:function(data) {
                    if (data.success) {
                        $('#'+modal_id).html(data.page).modal('show', {backdrop: 'static', keyboard: false});
                        if (typeof validateForm === "function")
                            validateForm();
                    }
                    else
                        showAlertMessage('alert-danger', 'error !', 'An unknown error occured');
                    un_block_page();
                },
                error:function(data) {
                    un_block_page();
                } ,
                statusCode: {
                    500: function(data) {
                        un_block_page();
                    }
                }
            });
        }

        function postData(){
            if (!$("#add_edit_form").valid())
                return false;
            let data = new FormData($('#add_edit_form').get(0));
            $.ajax({
                url : add_edit_url,
                data : data,
                type: "POST",
                processData: false,
                contentType: false,
                beforeSend(){
                    block_modal('add_edit','{{trans('general.text_please_wait')}} ...');
                },
                success:function(data) {
                    if(data.success){
                        Modal.modal('hide');
                        Table.DataTable().ajax.reload();
                        showAlertMessage('success','{{$data['name']}}', data.message);
                    }
                    else{
                        console.log(data.errors);
                        if(data.errors) {
                            const error_messages = Object.values(data.errors);
                            var message_to_show = '<ul style="padding-left:20px">';
                            for (const error_message of error_messages) {
                                message_to_show += '<li>'+error_message+'</li>';
                            }
                            message_to_show += '</ul>';
                            showAlertMessage('danger', '{{$data['name']}}/ ' + data.message, message_to_show, 10000);
                        }
                        else showAlertMessage('danger', '{{$data['name']}}/ ' , data.message, 10000);
                    }
                    {{--else--}}
                    {{--    showAlertMessage('danger', '{{$data['name']}} / ' , data.message, 3000);--}}

                    un_block_modal('add_edit');
                },
                error:function(data) {
                    console.log(data);
                    un_block_modal('add_edit');
                } ,
                statusCode: {
                    500: function(data) {
                        console.log(data);
                        un_block_modal('add_edit');
                    }
                }
            });
        }

        function validateForm(){
            $("#add_edit_form").validate({
                ignore: ':hidden',
                rules: {
                    s_name: {
                        required: true,
                    },
                },
                messages: {
                    s_name: {
                        required: "هذا الحقل مطلوب",
                    },
                },
            });

            $(".fileupload").change(function() {
                readURL(this);
            });

            $('.add_edit').click(function(e) {
                e.preventDefault();
                postData();
            });
        }
    </script>

@stop
@section('content')
<div class="kt-portlet kt-portlet--mobile">
    <div class="kt-portlet__head kt-portlet__head--lg">
        <div class="kt-portlet__head-label">
                <span class="kt-portlet__head-icon">
                    <i class="kt-font-brand flaticon-medal"></i>
                </span>
            <h4 class="kt-portlet__head-text">
                @if(isset($data['page_title']))
                    {{ $data['page_title'] }}
                @endif
            </h4>
        </div>
        <div class="kt-portlet__head-toolbar">
            <div class="kt-portlet__head-wrapper">
                <button id="btn_show_search_box" onclick="check_collapse()" class="btn btn-dark" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                    <i class="la la-filter"></i>
                    @lang('general.text_show_search_box')
                    <i class="la la-angle-down"></i>
                </button>
                <a style="margin: 0 10px 0 10px" href="javascript:;" onclick="showModal(null,'add_edit','{{ route('admin.roles_permissions.show_form')}}','{{csrf_token()}}')" class="btn btn-primary">
                    <span><i class="la la-plus-circle"></i>
                        <span>{{trans('general.text_add')}} New Role</span>
                    </span>
                </a>
            </div>
        </div>
    </div>
    <div class="kt-portlet__body">
        <!--begin: Search Form -->
        <div class="kt-form kt-form--label-right kt-margin-t-20 kt-margin-b-10">
            <div class="row align-items-center">
                <div class="collapse col-xl-12" id="collapseExample">
                    <div class="col-xl-12" id="filter_options">
                        <div class="form-group row">
                            <div class="col-lg-3">
                                <label for="s_name" class="form-control-label">@lang('roles.text_name'):</label>
                                <input type="text" class="form-control" name="s_display_name" id="s_display_name" placeholder="@lang('roles.text_name')"/>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-lg-3">
                                <a href="javascript:;" style="width: 100%" class="btn btn-warning btn-elevate btn-sm btn-icon search_btn">
                                <span>
                                    <i class="la la-search"></i>
                                    <span>{{trans('general.text_do_search')}}</span>
                                </span>
                                </a>
                            </div>
                            <div class="col-lg-3">
                                <a href="javascript:;" style="width: 100%" class="btn btn-dark btn-elevate btn-sm btn-icon reset_form">
                                <span>
                                    <i class="la la-search-minus"></i>
                                    <span>{{trans('general.text_cancel_search')}}</span>
                                </span>
                                </a>
                            </div>

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

        <!--end: Search Form -->

        <!--begin: Datatable -->
        <table class="table table-striped- table-bordered table-hover table-checkable responsive no-wrap" id="data_table">
            <thead>
            <tr>
                <th class="text-center">Name</th>
                <th class="text-center">Set Permissions</th>
                <th class="text-center">Status</th>
                <th class="text-center">@lang('general.text_options')</th>
            </tr>
            </thead>
        </table>
    </div>
</div>

<!--end units-management -->
<div class="modal fade" id="add_edit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"></div>
@stop