@php /* Expects $items (Collection<SectionItem>) */ @endphp
@if($items->count())
    <!-- Bulk actions toolbar for questions -->
    <div class="questions-bulk-actions-toolbar" style="padding:10px;background:#f8f9fa;border-bottom:1px solid #dee2e6;display:none;gap:8px;align-items:center;margin-bottom:10px;">
        <span class="selected-count-text">0 selected</span>
        <button class="btn btn-sm btn-primary copy-selected-questions-btn"><i class="fas fa-copy"></i> Copy Selected</button>
        <button class="btn btn-sm btn-outline-secondary deselect-all-questions-btn">Deselect All</button>
    </div>
    
    <!-- Paste button (shown when clipboard has questions) -->
    <div style="padding:10px;background:#fff;border-bottom:1px solid #dee2e6;display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-bottom:10px;">
        <button class="whitebg_btn btn paste-questions-btn" data-section-id="{{ $items->first()->section_id ?? '' }}" data-item-type-id="{{ $itemTypeId ?? '' }}" title="Paste copied questions here" style="display:none;"><i class="fas fa-paste me-1"></i> Paste Questions</button>
    </div>
    
    <div class="sortable-section-items" data-section-id="{{ $items->first()->section_id ?? '' }}">
    @foreach($items as $itm)
        <div class="kitchen_listbottomarea" data-section-item="{{ $itm->id }}" data-sort-order="{{ $itm->sort_order }}">
    <div class="kitchen_listbottomList">
        <div class="divtable_mobscroll">
            <div class="kitchen_listbottomListHead">
                <div class="kitchen_listbottomListHItem" style="width:40px;flex:0 0 40px;">
                    <input type="checkbox" class="select-all-questions" title="Select all" />
                </div>
                <div class="kitchen_listbottomListHItem" style="width:40px;flex:0 0 40px;">&nbsp;</div>
                <div class="kitchen_listbottomListHItem">Question</div>
                <div class="kitchen_listbottomListHItem">Created By</div>
                <div class="kitchen_listbottomListHItem">Modified date</div>
                <div class="kitchen_listbottomListHItem">Action</div>
            </div>
            <div class="kitchen_listbottomListBody">
                
                <div class="kitchen_listbottomListBItem" style="width:40px;flex:0 0 40px;">
                    <input type="checkbox" class="question-checkbox" data-question-id="{{ $itm->id }}" />
                </div>
                <div class="kitchen_listbottomListBItem" style="width:40px;flex:0 0 40px;">
                    <a href="javascript:void(0);" class="drag-handle"><img src="{{ asset('images/table_menue.svg') }}" alt="Drag"></a>
                </div>
                <div class="kitchen_listbottomListBItem">
                    <div class="question-text-wrapper">
                    {{ $itm->type_name ?: '-' }}
                        @if($itm->is_grouped)
                            <span class="badge bg-info ms-2" title="Grouping Enabled"><i class="fas fa-layer-group"></i> Grouped</span>
                            <a href="javascript:void(0);" class="category-quick-toggle ms-2" data-item-id="{{ $itm->id }}" data-target="#category-quick-collapse-{{ $itm->id }}" title="Toggle Categories">
                                <i class="fas fa-chevron-down"></i>
                            </a>
                        @endif
                    </div>
                    @if($itm->enable_sides && $itm->sides->count() > 0)
                        <div class="sides-badge-row mt-1">
                            @foreach($itm->sides as $side)
                                <span class="badge bg-secondary me-1">{{ $side->side_name }}</span>
                            @endforeach
                        </div>
                    @endif
                </div>
                <div class="kitchen_listbottomListBItem">{{ $itm->created_by_display ?: '-' }} </div>
                <div class="kitchen_listbottomListBItem">{{ \App\Helpers\Helper::showdate(($itm->updated_at ?? $itm->created_at), false) ?: '-' }}</div>
                <div class="kitchen_listbottomListBItem">
                    @php
                        $isTenantAdmin = (auth()->user()->roles->first()->slug ?? '') === 'tenant-admin';
                        $hasMasterId = !empty($itm->master_item_id);
                        $canEdit = !($isTenantAdmin && $hasMasterId);
                    @endphp
                    @if($canEdit)
                        <a href="javascript:void(0)" class="copy-single-question-btn me-2" data-question-id="{{$itm->id}}" title="Copy this question with all its data"><i class="fas fa-copy"></i></a>
                        <a href="javascript:void(0)" data-section_item_id="{{$itm->id}}" class="me-2 edit-section-item"><img src="{{ asset('images/edit.svg') }}" /></a>
                        <a href="javascript:void(0)" data-section_item_id="{{$itm->id}}" class="ps-1 delete-section-item"><img src="{{ asset('images/delete_black.svg') }}" /></a>
                    @else
                        <span class="text-muted" title="This item is from master template and cannot be edited"><i class="fas fa-lock"></i></span>
                    @endif
                </div>
                    
            </div>
        </div>
        <!-- Main Accordion Toggle Button (fixed position at bottom-right of question row) -->
        @php
            $accId = 'accItem_'.$itm->id;
            $headingId = 'heading_'.$itm->id;
            $collapseId = 'collapse_'.$itm->id;
        @endphp
        <div class="main-accordion-toggle-wrapper">
                    <button class="accordion-button collapsed category-accordion-toggle" type="button" data-bs-toggle="collapse"
                        data-bs-target="#{{ $collapseId }}" aria-expanded="false"
                aria-controls="{{ $collapseId }}" data-item-id="{{ $itm->id }}">                        
            </button>
        </div>
    </div>
        
        <!-- Expandable Sections Container -->
        <div class="expandable-sections-container">
            @if($itm->is_grouped)
            <!-- Quick Category Collapse (opened by small arrow next to Grouped badge) -->
            <div class="category-quick-collapse collapse" id="category-quick-collapse-{{ $itm->id }}" data-item-id="{{ $itm->id }}">
                <div class="template_tabs">
                    <div class="row">
                        <div class="col-lg-6">
                            <nav>
                                <div class="nav nav-tabs mb-0">
                                    <button class="nav-link active">
                                        Categories <span class="badge bg-primary rounded-pill ms-1 cat-count-badge" data-item-id="{{ $itm->id }}">{{ $itm->questionCategories->count() }}</span>
                    </button>
                                </div>
                            </nav>
                        </div>
                        <div class="col-lg-6 d-flex justify-content-end gap-1 flex-nowrap">
                            <a href="javascript:void(0)" class="whitebg_btn btn add-category-btn" data-item-id="{{ $itm->id }}"><img src="{{ asset('images/add.svg') }}" alt="Add"> Add Category</a>
                        </div>
                    </div>
                    <div class="tab-content">
                        <div class="tab-pane fade show active">
                            <div class="categories-list-wrapper quick-categories-wrapper" data-item-id="{{ $itm->id }}">
                                <div class="py-2 text-center text-muted fw-semibold loading-placeholder">
                                    Loading categories...
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif
            
            <!-- Main Accordion Content (Options & Recommendations) -->
            <div class="accordion" id="{{ $accId }}">
                <div class="accordion-item border-0">
                <div id="{{ $collapseId }}" class="accordion-collapse collapse"
                    aria-labelledby="{{ $headingId }}" data-bs-parent="#{{ $accId }}">
                        <div class="accordion-body p-0">
                        <div class="row g-3">
                                    <div class="col-12">
                                <div class="template_tabs">
                                    <div class="row">
                                            <div class="col-lg-6">
                                            <nav>
                                                <div class="nav nav-tabs mb-0" id="nav-tab-{{ $itm->id }}" role="tablist">
                                                    <button class="nav-link active" id="nav-profile-tab-{{ $itm->id }}" data-bs-toggle="tab" data-bs-target="#nav-profile-{{ $itm->id }}" type="button" role="tab" aria-controls="nav-profile-{{ $itm->id }}" aria-selected="true">Options</button>
                                                    <button class="nav-link" id="nav-recommendations-tab-{{ $itm->id }}" data-bs-toggle="tab" data-bs-target="#nav-recommendations-{{ $itm->id }}" type="button" role="tab" aria-controls="nav-recommendations-{{ $itm->id }}" aria-selected="false">Recommendations</button>
                                                </div>
                                            </nav>
                                        </div>
                                            <div class="col-lg-6 d-flex justify-content-end gap-1 flex-nowrap">
                                            <a href="javascript:void(0)" class="whitebg_btn btn add-option-btn" data-item-id="{{ $itm->id }}"><img src="{{ asset('images/add.svg') }}" alt="Add"> Add Option</a>
                                            <a href="javascript:void(0)" class="whitebg_btn btn add-recommendation-btn d-none" data-item-id="{{ $itm->id }}"><img src="{{ asset('images/add.svg') }}" alt="Add"> Add Recommendation</a>
                                        </div>
                                    </div>
                                    <div class="tab-content" id="myTabContent-{{ $itm->id }}">
                                        <div class="tab-pane fade show active" id="nav-profile-{{ $itm->id }}" role="tabpanel" aria-labelledby="nav-profile-tab-{{ $itm->id }}">
                                            <div class="options-list-wrapper" data-item-id="{{ $itm->id }}">
                                                    <div class="py-2 text-center text-muted fw-semibold loading-placeholder">
                                                    Loading options...
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="nav-recommendations-{{ $itm->id }}" role="tabpanel" aria-labelledby="nav-recommendations-tab-{{ $itm->id }}">
                                            <div class="recommendations-list-wrapper" data-item-id="{{ $itm->id }}">
                                                    <div class="py-2 text-center text-muted fw-semibold loading-placeholder">
                                                    Loading recommendations...
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                          </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div> <!-- Close kitchen_listbottomarea -->
        @endforeach
    </div>
@else
    <!-- Paste button (shown when clipboard has questions) -->
    <div style="padding:10px;background:#fff;border-bottom:1px solid #dee2e6;display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-bottom:10px;">
        <button class="whitebg_btn btn paste-questions-btn" data-section-id="{{ $sectionId ?? '' }}" data-item-type-id="{{ $itemTypeId ?? '' }}" title="Paste copied questions here" style="display:none;">
            <i class="fas fa-paste me-1"></i> Paste Questions
        </button>
    </div>
    <div class="kitchen_listbottomListBItem w-100 text-muted py-2 text-center">No items added yet.</div>
@endif

<!-- Styles moved to custom.css -->

<!-- Material Modal Slot -->
<div id="material-modal-slot">
    @include('admin.report-templates.materials.partials.modal_add')
</div>