@section('title', 'Add Roles To Permissions')
<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ __('Role') }}: <span class="uppercase text-lg">{{ $role->name }}</span>
            </h2>
            <a href="{{ url('roles') }}"
                class="text-white bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 font-medium rounded-full text-sm px-3 py-1.5 text-center me-2 mt-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800">Back</a>
        </div>
    </x-slot>

    <div class="py-8">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white rounded-lg overflow-hidden">
                <x-validation-errors class="mb-4" />
                <div class="p-6 min-w-full border border-gray-300 divide-y divide-gray-200">
                    <form method="POST" action="{{ url('roles/' . $role->id . '/give-permissions') }}" class="max-w-screen-md mx-auto">
                        @csrf
                        @method('PUT')

                        <h2 class="text-2xl font-semibold text-center mb-6">{{ __('Permissions') }}</h2>

                        <div class="mb-4 float-end">
                            <div class="flex items-center">
                                <input type="checkbox" id="checkAll" class="mr-2 rounded-md border-gray-300 text-blue-600 focus:ring-blue-500" />
                                <label for="checkAll" class="text-gray-700 font-semibold">{{ __('Check All') }}</label>
                            </div>
                        </div>

                        <table class="min-w-full border border-gray-300 divide-y divide-gray-200">

                            <tbody>
                                @foreach ($permissions as $index => $value)
                                    @if ($index % 3 == 0)
                                        <tr>
                                    @endif
                                    <td class="border border-gray-300 px-4 py-2">
                                        <div class="flex items-center">
                                            <input type="checkbox" name="permission[]" value="{{ $value->name }}"
                                                {{ in_array($value->id, $rolePermissions) ? 'checked' : '' }}
                                                class="mr-2 rounded-md border-gray-300 text-blue-600 focus:ring-blue-500 permission-checkbox" />
                                            <label for="permission[]" class="text-gray-700">{{ $value->name }}</label>
                                        </div>
                                    </td>
                                    @if ($index % 3 == 2 || $loop->last)
                                        </tr>
                                    @endif
                                @endforeach
                            </tbody>
                        </table>

                        <div class="flex items-center justify-center mt-6">
                            <x-button>
                                {{ __('Submit') }}
                            </x-button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const checkAll = document.getElementById('checkAll');
                const checkboxes = document.querySelectorAll('.permission-checkbox');

                checkAll.addEventListener('change', function() {
                    checkboxes.forEach(checkbox => {
                        checkbox.checked = checkAll.checked;
                    });
                });

                checkboxes.forEach(checkbox => {
                    checkbox.addEventListener('change', function() {
                        if (!this.checked) {
                            checkAll.checked = false;
                        } else {
                            checkAll.checked = Array.from(checkboxes).every(checkbox => checkbox.checked);
                        }
                    });
                });
                checkAll.checked = Array.from(checkboxes).every(checkbox => checkbox.checked);
            });
        </script>
    @endpush
</x-app-layout>