@extends('admin.layouts.master')
@section('content')
@include('admin.permissions.modal')
<style>
    .swal2-confirm{
    margin-left: 7px;
}
</style>
    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-end my-4 page-header-breadcrumb">
        {{-- <h1 class="page-title fw-semibold fs-18 mb-0 urdu-fonts">@lang('lang.supplier_account')</h1> --}}
        <div class="ms-md-1 ms-0">
            <nav>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item "><a href="javascript:void(0);">Roles</a></li>
                    <li class="breadcrumb-item active " aria-current="page">Role</li>
                </ol>
            </nav>
        </div>
    </div>

    {{-- //modal --}}


    {{-- modal end --}}
    <!-- Start:: row-1 -->
    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-header d-flex justify-content-between">
                    <div class="card-title">

                        {{-- <div class="add_role"> --}}
                        <h3>
                            Permission
                        </h3>
                        {{-- </div> --}}
                    </div>
                    <div class="add_permission">
                        <button id="addpermission" data-bs-effect="effect-super-scaled" data-bs-toggle="modal"
                            href="#modaldemo8" class="modal-effect btn btn-primary">Add Permission +</button>
                    </div>
                </div>

                <div class="card-body">
                    <div class="table-responsive">
                        <table id="myTable" class="display table text-nowrap">
                            <thead class="table-primary">
                                <tr>
                                    <th>Name</th>
                                    <th>Action</th>
                                    <th>Assign Role</th>
                                    <th> Roles</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($permissions as $permission)
                                    <tr>
                                        <td>{{ $permission->name }}</td>
                                        <td>
                                            <div class="hstack gap-2 fs-15">
                                                <a data-id="{{ $permission->id }}" href="javascript:void(0);"
                                                    class="editbtn btn btn-icon btn-sm btn-info-transparent rounded-pill"><i
                                                        class="ri-edit-line"></i></a>
                                                <a href="javascript:void(0);"
                                                data-url="{{route('admin.permission.delete',['id'=>$permission->id])}}"  class="delete-btn btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i
                                                        class="ri-delete-bin-line"></i></a>
                                            </div>
                                        </td>
                                        {{-- <td> --}}
                                            <td><a data-permission-id="{{ $permission->id }}" data-bs-effect="effect-super-scaled"
                                                data-bs-toggle="modal" href="#modaldemo4"
                                                class="modal-effect btn btn-primary" id="roleModal">Assign Role <i
                                                    class="fa fa-edit"></i></a></td>
                                        {{-- </td> --}}
                                        @if ($permission->roles)
                                        <td>
                                            @foreach ($permission->roles as $permission_role)
                                            <form class="d-inline" action="{{route('admin.permission.removeRole')}}" method="POST">
                                                @csrf
                                                <input type="hidden" value="{{$permission->id}}" name="permission_id">
                                                <input type="hidden" value="{{$permission_role->id}}" name="role_id">
                                                <a href="#dismissal" class="btn btn-danger ">{{ $permission_role->name }}
                                                 <i class="delete-btn-post fa-solid fa-xmark"></i></a>
                                                </form>
                                            @endforeach
                                        </td>
                                    @endif
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="links mt-3 float-end">
                        {{ @$permissions->links() }} <h4 class="d-inline urdu-fonts ps-3">:@lang('pagination.Pageno')</h4>
                    </div>
                </div>
                <div class="card-footer d-none border-top-0">
                </div>


            </div>

        </div>

    </div>
    <!-- End:: row-1 -->
    @push('page-script')
        <script type="92a7f920e829357800bf8055-text/javascript">
            $(document).ready(function() {
                $(document).on('click', '#roleModal', function() {
                    var permission_id = $(this).attr('data-permission-id');
                    $('#modaldemo4').modal('show').addClass('effect-super-scaled');
                    $('#permission_id').val(permission_id)
                    // $('#modaldemo4').html(response.permission)
                    // $('#role_id').val(role_id)
                })

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $(document).on('click', '#addpermission', function() {
                    $('#modaldemo8').find('input').val('');
                })
                $(document).on('click', '.editbtn', function() {
                    var id = $(this).attr('data-id');

                    $.ajax({
                        url: "{{ route('admin.permission.index') }}",
                        dataType: 'json',
                        data: {
                            id: id
                        },
                        success: function(response) {
                            console.log(response)
                            // $('#modaldemo8').modal('show')
                            $('#modaldemo8').modal('show').addClass('effect-super-scaled');
                            $('#permission_name').val(response.name)
                            $('#update_id').val(response.id)
                            // $('#role_details').val(response.role_details)
                            // $('#update_id').val(response.id)
                            // $('.modal-header h2').text('Edit role')
                            // $('.modal-footer button[type="submit"]').text('Update')

                        },
                        error: function(xhr, textStatus, errorThrown) {

                            console.log('AJAX Error:', errorThrown);
                            console.log('Response Body:', xhr.responseText);

                        }

                    })
                })
                // $(document).on('click', '.editbtn', function() {
                //     var id = $(this).attr('data-id');
                //     var url="{{ route('admin.role.index') }}"
                //     $.ajax({
                //         url: url,
                //         dataType: 'json',
                //         type: 'GET',
                //         data: {
                //             id:id
                //         },
                //         success: function(response) {
                //             console.log(response)

                //         },
                //         error: function(response) {
                //             console.log(response)
                //             // if (response.status === 422) {
                //             //     var errors = response.responseJSON.errors;
                //             //     var errorMessages = '';
                //             //     $.each(errors, function(key, value) {
                //             //         errorMessages += value[0] +
                //             //             '\n'; // Assumes the error messages are arrays
                //             //     });
                //             //     Swal.fire(
                //             //         errorMessages,
                //             //         "Error",
                //             //         "error"
                //             //     )
                //             // } else if (response.status === 500) {
                //             //     Swal.fire("Internal Servor Error", "Error", "error");
                //             // } else {
                //             //     Swal.fire(
                //             //         "error",
                //             //         "an error occured",
                //             //         "error"
                //             //     )
                //             // }
                //             // $('button[type="button"]').attr('disabled', false);
                //             // $('.spinner').css('display', 'none');

                //         }
                //     })
                // })
            })
        </script>
    @endpush
@endsection
<script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="92a7f920e829357800bf8055-|49" defer></script>