@include('layouts.header', ['title' => 'Assign Permissions'])
    <div class="wrapper">
        @include('layouts.navbar')
        @include('layouts.sidebar')

        <div class="content-page">
            <div class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">
                            <div class="page-title-box">
                                <div class="page-title-right"></div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-9">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="page-title">Assign Permissions</h4>
                                </div>
                                <form id="userForm" action="{{ route('admin.role-permission.store') }}" method="POST" enctype="multipart/form-data">
                                    @csrf

                                    <div class="card-body">
                                        <div class="mb-3">
                                            <label for="role_id" class="form-label">Role</label>
                                            <select class="form-select form-select-sm mb-3 select2" name="role_id" id="role_id">
                                                <option value="" selected disabled>Select</option>
                                                @foreach ($roles as $roleOption)
                                                    <option value="{{ $roleOption->id }}">
                                                        {{ $roleOption->display_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="mb-3">
                                            <label for="permissions" class="form-label">Permissions</label>
                                            <ul id="permissionsList">
                                                @foreach ($permissions as $permission)
                                                    @include('admin.role-permission.permission-item', [
                                                        'permission' => $permission,
                                                    ])
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>

                                    <div class="card-footer border-top border-light">
                                        <button type="submit" class="btn btn-success me-2" id="submitBtn">
                                            Submit
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            @include('layouts.footer')
        </div>
    </div>

    <!-- Vendor JS -->
    <script src="{{ asset('assets/js/vendor.min.js') }}"></script>
    <script src="{{ asset('assets/js/app.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            @if ($errors->any())
                @foreach ($errors->all() as $error)
                    toastr.error("{{ $error }}");
                @endforeach
            @endif

            @if (session('success'))
                toastr.success("{{ session('success') }}");
            @endif

            @if (session('error'))
                toastr.error("{{ session('error') }}");
            @endif

            document.getElementById('userForm').addEventListener('submit', function() {
                const submitBtn = document.getElementById('submitBtn');
                submitBtn.disabled = true;
                submitBtn.innerHTML = 'Submitting...'; // Change button text to indicate submission
            });

            // When a role is selected, fetch and update the permission tree
            $('#role_id').change(function() {
                const roleId = $(this).val();

                if (roleId) {
                    // Make AJAX request to fetch the permissions for the selected role
                    $.ajax({
                        url: '{{ route('admin.role-permission.get-permissions') }}',
                        method: 'GET',
                        data: { role_id: roleId },
                        success: function(response) {
                            if (response.permissions) {
                                // Uncheck all checkboxes first
                                $('#permissionsList input[type="checkbox"]').prop('checked', false);

                                // Check the checkboxes for the permissions linked to the selected role
                                response.permissions.forEach(function(permissionId) {
                                    $('#permissionsList input[type="checkbox"][value="' + permissionId + '"]').prop('checked', true);
                                });
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
        // Log the error details to help debugging
        console.error('AJAX Error:', textStatus, errorThrown);
        toastr.error("Failed to fetch permissions.");
    }
                    });
                }
            });
        });
    </script>

    <!-- Custom JS -->
    <script src="{{ asset('assets/js/pages/roles/roles-permission.js') }}"></script>

</body>

</html>