@extends('layouts.master')

@section('page_title', 'Permission Details')
@section('title', 'Permission Details')
@section('main_item', 'Permission ')
@section('sub_item', 'Permission Details')

@section('content')
   
    <div class="col-12" style="width: 1180px;">
        <div class="card">
            <div class="card-body">

                {{-- @can('create_marketing_cost') --}}
                <button class="btn btn-primary px-4 float-right mt-0 mb-3" data-toggle="modal" data-animation="bounce"
                    data-target=".bs-example-modal-lg-permission"><i class="mdi mdi-plus-circle-outline mr-2"></i>Add Permission
                    &nbsp;
                </button>
                {{-- @endif --}}
                
                <h4 class="header-title mt-0">permission Details</h4>
                <div class="table-responsive dash-social">
                    <table id="laravel_datatable" class="table table-hover">
                        <thead class="thead-dark">
                            <tr>
                                <th>Action</th>
                                <th>Permission ID</th>
                                <th>Name</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
            <!--end card-body-->
        </div>
    </div>
    <div class="modal fade bs-example-modal-lg-permission" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title mt-0">Add Permission</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <form class="form-parsley" method="POST" id="permission_form" action="{{ url('permissions/store') }}">
                    @csrf
                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-md">
                                <label style="font-weight: bold">Permission Name</label>
                                <input type="text" class="form-control" id="permission_name" name="permission_name" placeholder="permission name">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary  btn-sm" id="save_btn">Save </button>
                        <button type="button" class="btn btn-danger  btn-sm " data-dismiss="modal">Close</button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>

    {{-- edit --}}
    <div id="per-edit" class="modal fade"></div>
    
    </div>

@endsection
@section('scripts')
    <script>

        $(document).ready(function() {
            var table = $('#laravel_datatable').DataTable({
                processing: false,
                serverSide: true,
                columnDefs: [{
                    "targets": [],
                    "orderable": false,
                    "searchable": false,

                }],
                columns: [{
                        data: 'action',
                        name: 'action'
                    },
                    {
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                ]
            });
        
        });
        $(document).on('click', '.permissions-edit', function() {
            $('#per-edit').load($(this).data('href'), function() {
                $('#per-edit').modal('show');
            })
        });
            $(document).on('click', '#permission_update', function() {
                $.ajax({
                    method: 'POST',
                    url: '{{ route("permissions.update") }}',
                    data: $('#permission_form_update').serialize(),
              
                    success: function(response) {
                        if (response.success == true) {
                            $.toast({
                                heading: 'Success',
                                text: response.msg,
                                position: 'top-right',
                                bgColor: '#1ecab8',
                                icon: 'success',
                                showHideTransition: 'fade',
                                loaderBg: '#ecf0f1'
                            })
                            $('#per-edit').modal('hide');
                            table.ajax.reload();
                        } else {
                            $.toast({
                                heading: 'Error',
                                text: response.msg,
                                position: 'top-right',
                                bgColor: '#f1646c',
                                icon: 'error',
                                showHideTransition: 'fade',
                                loaderBg: '#ecf0f1'
                            })
                        }
                    }
                })
            });
    </script>
@endsection