@extends('layouts.admin', ['title' => 'Permission Management'])

@push('stylesheets')

<meta name="csrf-token" content="{{ csrf_token() }}">
<!--datatable css-->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" />
<!--datatable responsive css-->
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" />


@endpush

@section('content')
<div class="main-content">
    <div class="page-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{$role->role}} Permission Management</h5>
                        </div>
                        
                        <div class="card-body">
                            <div class="mb-4">
                                <div class="mb-3 text-center">
                                    <h5 class="card-title mb-0">Selected Permissions</h5>
                                </div>
                                

                                <livewire:selected-permission :slug="$role->slug">

                            </div>
                            <div class="mb-3">
                                <div class="mb-3 text-center">
                                    <h5 class="card-title mb-0">Available Permissions</h5>
                                </div>
                                <form id="add-permisions-to-role-form" method="POST">
                                    <button type="submit" class="btn btn-success button-prevent-multiple-submits">Add Permissions</button>
                                </form>
                            </div>
                            <table id="permissions" class="table table-bordered dt-responsive nowrap table-striped align-middle" style="width:100%">
                                <thead>
                                    <tr><th>
                                        <div class="form-check">
                                            <input class="form-check-input fs-15" type="checkbox" id="checkAll" value="option">
                                        </div>
                                        <th>No.</th>
                                        <th>Permission</th>
                    
                                    </tr>
                                </thead>
                                
                            </table>
                        </div>
                    </div>
                </div><!--end col-->
            </div><!--end row-->
        </div>
        <!-- container-fluid -->
    </div>
    <!-- End Page-content -->
</div>
@endsection

@push('scripts')



<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>



<script>


////////////////////////////////INITIALISATION OF DATATABLE ///////////////////////////
    

        var slug = '{{$role->slug}}';
 
        console.log(slug);

        var permissions_to_add = [];

        ///////////////////////////AJAX CSRF SET UP //////////////////////////////////////////////

        $.ajaxSetup({
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        var table = $('#permissions').DataTable({
            processing: true,
            serverSide: true,
            ajax: "/permissions-by-position/"+slug,
            columns: [
                { data: 'checkbox', name: 'checkbox'},
                { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable:false, searchable:false},
                { data: 'permission', name: 'permission'},
         
            ]
        });


         //////////////////////ON SELECT OF MEMBER /////////////////////////////////////////////
    $(document).on('change', '.permission-checkbox', function() {
        var permission = $(this).attr('id');

        if($(this).prop('checked')){

            permissions_to_add.push(permission);
            
        }
        else{
            var index = permissions_to_add.indexOf(permission);

            if (index !== -1) {

                permissions_to_add.splice(index, 1);

            }
        }
    });

    /////////////////ON SUBMIT ///////////////////////////////////////////////////////////
    $("#add-permisions-to-role-form").on('submit', function(event) { 
        $('.button-prevent-multiple-submits').attr('disabled', true);
        event.preventDefault();

        if(permissions_to_add.length > 0){

        

            var formData = new FormData();

            $.each(permissions_to_add, function(index, value) {
                formData.append('permissions[]', value);
            });

            formData.append('slug', slug);

            $.ajax({
                type: 'post',
                url: '/add-permissions-to-position/'+slug,
                processData: false,
                contentType: false,
                dataType: 'json',
                data: formData,
                success: function(response){
                    Swal.fire({
                            title: 'Success',
                            text: response.message,
                            icon: 'success',
                            toast:'true',
                            showConfirmButton:false,
                            position:'top-end',
                            timer:5000
                            
                        });
                    $("#add-permisions-to-role-form")[0].reset();
                    $('.button-prevent-multiple-submits').attr('disabled', false);
                    permissions_to_add.length = 0;
                    table.ajax.reload();
                    Livewire.dispatch('refreshComponent',  { slug: slug });

                },
                error: function(response){
                        
                        if(response.status == 422){
                            var firstKey = Object.keys(response.responseJSON.errors)[0];
                            Swal.fire({
                            title: 'Error',
                            text: response.responseJSON.errors[firstKey][0],
                            icon: 'error',
                            toast:'true',
                            showConfirmButton:false,
                            position:'top-end',
                            timer:10000
                            
                            });
                        }    
                        $('.button-prevent-multiple-submits').attr('disabled', false);
                    }
            
                });
            }
            else{
                Swal.fire({
                    title: 'Error',
                    text: 'Please select atleast one member',
                    icon: 'error',
                    toast:'true',
                    showConfirmButton:false,
                    position:'top-end',
                    timer:5000

                    
                });

                $('.button-prevent-multiple-submits').attr('disabled', false);
            }

        });

        Livewire.on('reloadTable', () => {
            
            table.ajax.reload();

        })
</script>


@endpush