@extends('backend.layout.app')

@section('content')
    <div class="page-content">
        <div class="container-fluid">
            <h4 class="mb-4">Role Wise Permissions</h4>

            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <table class="table table-bordered table-striped">
                        <thead class="table-light">
                            <tr>
                                <th style="min-width: 130px">Role Name</th>
                                <th>Permissions</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($roles as $role)
                                <tr id="partenTr_{{ $role->id }}">
                                    <td class="text-capitalize">{{ ucfirst($role->name) }}</td>
                                    <td id="accessTd_{{$role->id}}">
                                        @forelse($role->permissions as $perm)
                                            <span class="badge btn-pink">{{ $perm->name }}</span>
                                        @empty
                                            <span class="badge bg-danger">No Permissions</span>
                                        @endforelse
                                    </td>
                                    <td class="text-center">
                                        <div class="action-btn-group">
                                            <a href="{{ route('admin.role.permission.assign', $role->id) }}" class="action-btn action-btn-edit" title="Edit Permissions">
                                                <i class="bi bi-pencil-square"></i>
                                            </a>

                                            <a href="javascript:void(0)" class="action-btn action-btn-danger removePermission"
                                                data-url="{{ route('admin.role-permission.delete', $role->id) }}"
                                                data-accesstd='accessTd_{{$role->id}}'
                                                title="Remove All Permissions">
                                                <i class="bi bi-trash3-fill"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                             @empty
                               <td colspan="3" class=" text-center">No Permissions</td>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    @push('js')
  <script>

$(document).on('click', '.removePermission', function() {

    let destroyUrl = $(this).data('url');
    let access_td = $(this).data('accesstd');
    console.log(access_td)

    Swal.fire({
        title: "Are you sure?",
        text: "All permissions of this role will be removed!",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#d33",
        cancelButtonColor: "#3085d6",
        confirmButtonText: "Yes, remove!"
    }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Removing...',
                text: 'Please wait!',
                allowOutsideClick: false,
                didOpen: () => Swal.showLoading()
            });

            $.ajax({
                url: destroyUrl,
                method: 'DELETE',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(res) {
                    Swal.close();
                    if (res.status) {

                        Swal.fire({
                            icon: 'success',
                            title: 'Removed!',
                            text: res.message || 'All permissions removed from this role.'
                        });
                        $('#'+access_td).html(`<span class="badge bg-danger">No Permissions</span>`)

                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error!',
                            text: res.message || 'Something went wrong!'
                        });
                    }
                },
                error: function(xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: xhr.responseJSON?.message || 'Delete failed. Please try again.'
                    });
                }
            });
        }
    });
});
</script>
    @endpush
@endsection