@foreach ($role as $data)
    <div id="deleteroleModal{{ $data->id }}"
        class="fixed inset-0 z-50 flex items-start justify-center hidden bg-black bg-opacity-50 modal fade">
        <!-- Modal dialog -->
        <div class="max-w-md mx-auto mt-10 overflow-hidden bg-white rounded-lg shadow-xl">
            <!-- Modal header -->
            <div class="flex items-center justify-between px-4 py-2 bg-red-500">
                <h5 class="font-bold text-white">Confirm Delete</h5>
                <button onclick="closeModal('deleteroleModal{{ $data->id }}')" class="text-white">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="px-4 py-4">
                <p>Are you certain you want to delete this role ({{ $data->role_name }})?</p>
            </div>

            <!-- Modal footer -->
            <div class="flex items-center justify-end px-4 py-3 bg-gray-100">
                <button onclick="closeModal('deleteroleModal{{ $data->id }}')"
                    class="px-3 py-1 mr-2 text-gray-800 bg-gray-300 rounded hover:bg-gray-400">Cancel</button>

                <!-- Form for delete -->
                <form id="deleteForm{{ $data->id }}" action="{{ route('roles.destroy', $data->id) }}"
                    method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit"
                        class="px-3 py-1 text-white bg-red-500 rounded hover:bg-red-600">Delete</button>
                </form>
            </div>
        </div>
    </div>



    <div id="updateroleModal{{ $data->id }}"
        class="fixed inset-0 z-50 flex items-start justify-center hidden bg-black bg-opacity-50 modal fade">
        <!-- Modal dialog -->
        <div class=" w-[40rem] mx-auto mt-10 overflow-hidden bg-white rounded-lg shadow-xl">
            <!-- Modal header -->
            <div class="flex items-center justify-between px-4 py-2 ">
                <h5 class="font-bold text-black">Update Role</h5>
                <button onclick="closeModal('updateroleModal{{ $data->id }}')" class="text-black">&times;</button>
            </div>


            <!-- Modal footer -->
            <div class="flex items-center justify-center px-4 py-3 bg-gray-100">



                <form action="{{ route('roles.update', $data->id) }}" method="POST"
                    class="p-6 mt-4 bg-white rounded shadow">
                    @csrf
                    @method('PUT') <!-- Add this line to specify that this is a PUT request for updating -->

                    <div class="mb-4">
                        <label for="role_name" class="block text-sm font-medium text-gray-700">Role Name</label>
                        <input type="text" name="role_name" id="role_name" required
                            value="{{ old('role_name', $data->role_name) }}"
                            class="mt-1 block w-full border-black border-2 h-10 rounded-md shadow-sm {{ $errors->has('role_name') ? 'border-red-500' : '' }}">
                        @if ($errors->has('role_name'))
                            <p class="mt-1 text-xs text-red-500">{{ $errors->first('role_name') }}</p>
                        @endif
                    </div>

                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700">Privileges</label>
                        <div class="grid grid-cols-3 gap-3 mt-2">
                            @foreach ($privileges1 as $privilege)
                                <div class="grid-cols-2 mb-2 gird whitespace-nowrap">

                                    <input type="checkbox" name="privileges[]" value="{{ $privilege->id }}"
                                        id="privilege_{{ $privilege->id }}"
                                        class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"
                                        {{ in_array($privilege->id, $data->privileges->pluck('id')->toArray()) ? 'checked' : '' }}>
                                    <label for="privilege_{{ $privilege->id }}" class="text-sm text-gray-600 ">
                                        {{ $privilege->privilege_name }}
                                    </label>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <button type="submit"
                        class="inline-flex justify-center px-4 py-2 mt-4 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        Update Role
                    </button>
                </form>

            </div>
        </div>
    </div>
@endforeach