@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>
                                        <a href="{{ route('admin.role-permission.edit', $role->id) }}" class="col">
                                            <button type="button" class="btn btn-primary btn-sm">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                    fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
                                                    <path
                                                        d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z">
                                                    </path>
                                                    <path fill-rule="evenodd"
                                                        d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z">
                                                    </path>
                                                </svg>
                                            </button>
                                        </a>

                                        <a href="javascript:void(0)" class="btn btn-danger btn-sm removePermission"
                                            data-url={{ route('admin.role-permission.delete', $role->id) }}
                                            data-accesstd='accessTd_{{$role->id}}'
                                            >
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                fill="currentColor" class="bi bi-trash3-fill" viewBox="0 0 16 16">
                                                <path
                                                    d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06m6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528M8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5">
                                                </path>
                                            </svg>
                                        </a>
                                    </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