@php /* Expects $items (Collection<SectionItem>) */ @endphp
@if($items->count())
    @foreach($items as $itm)
<div class="kitchen_listbottomarea" data-section-item="{{ $itm->id }}">
    <div class="kitchen_listbottomList">
        <div class="divtable_mobscroll">
            <div class="kitchen_listbottomListHead">
                <div class="kitchen_listbottomListHItem" style="width:30px;flex:0 0 30px;">
                    <input type="checkbox" class="form-check-input section-item-row-checkbox" value="{{ $itm->id }}" title="Select Item" />
                </div>
                <div class="kitchen_listbottomListHItem">Title</div>
                <div class="kitchen_listbottomListHItem">Created By</div>
                <div class="kitchen_listbottomListHItem">Modified date</div>
                <div class="kitchen_listbottomListHItem">Item to be Shown in report</div>
                <div class="kitchen_listbottomListHItem">Action</div>
            </div>
            <div class="kitchen_listbottomListBody">
                
                <div class="kitchen_listbottomListBItem" style="width:30px;flex:0 0 30px;">
                    &nbsp;
                </div>
                <div class="kitchen_listbottomListBItem">{{ $itm->title }}</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">
                    <div class="form-check form-switch">
                        <input class="form-check-input status-toggle-items" 
                                type="checkbox" 
                                role="switch" 
                                data-id="{{ $itm->id }}"
                                {{ $itm->is_required ? 'checked' : '' }}>
                        <label class="form-check-label"></label>
                    </div>
                </div>
                <div class="kitchen_listbottomListBItem">
                    <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>
                </div>
                    
            </div>
        </div>
        @php
            $accId = 'accItem_'.$itm->id;
            $headingId = 'heading_'.$itm->id;
            $collapseId = 'collapse_'.$itm->id;
        @endphp
        <div class="accordion mt-2" id="{{ $accId }}">
            <div class="accordion-item">
                <h2 class="accordion-header" id="{{ $headingId }}">
                    <button class="accordion-button collapsed category-accordion-toggle" type="button" data-bs-toggle="collapse"
                        data-bs-target="#{{ $collapseId }}" aria-expanded="false"
                        aria-controls="{{ $collapseId }}">                        
                    </button>
                </h2>
                <div id="{{ $collapseId }}" class="accordion-collapse collapse"
                    aria-labelledby="{{ $headingId }}" data-bs-parent="#{{ $accId }}">
                    <div class="accordion-body p-0 pt-3">
                        <div class="row g-3">
                            <div class="col-lg-4 col-md-5">
                                <div class="add_edit_category section-item-categories-wrapper"
                                     data-item-id="{{ $itm->id }}"
                                     data-section-id="{{ $itm->section_id }}"
                                     data-tenant-id="{{ $itm->tenant_id }}">
                                    <div class="add_edit_categorytitle d-flex justify-content-between align-items-center">
                                        <h3 class="mb-0">Choose Categories</h3>
                                        <div class="d-flex align-items-center gap-2">
                                            <a href="javascript:void(0)" class="add-category-btn" title="Add Category">
                                                <img src="{{ asset('images/add_w.svg')}}" />
                                            </a>
                                            <!-- <a href="javascript:void(0)">
                                                <img src="{{ asset('images/horizontal_menu_w.svg')}}" />
                                            </a> -->
                                        </div>
                                    </div>
                                    <!-- Add Category Form (hidden by default) -->
                                    <div class="add_categoryarea category-add-area mt-2 d-none">
                                        <h3 class="h6">Add Category <span class="text-danger" title="Required">*</span></h3>
                                        <input type="text" class="form-control category-title-input mb-2" placeholder="Enter Category Name" />
                                        <div class="edit_category_btnctrl">
                                            <a href="javascript:void(0)" class="btn editcategory_cancel category-cancel-btn">Cancel</a>
                                            <a href="javascript:void(0)" class="btn editcategory_save category-save-btn">Save</a>
                                        </div>
                                    </div>
                                    <div class="add_edit_categorylist categories-list text-center" data-empty-text="No category found.">
                                        <!-- AJAX list will load here -->
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-8 col-md-7">
                                <div class="template_tabs">
                                    <div class="row">
                                        <div class="col-lg-3">
                                            <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="false">Comment</button>
                                                    <button class="nav-link" id="nav-material-tab-{{ $itm->id }}" data-bs-toggle="tab" data-bs-target="#nav-material-{{ $itm->id }}" type="button" role="tab" aria-controls="nav-material-{{ $itm->id }}" aria-selected="false">Material</button>
                                                </div>
                                            </nav>
                                        </div>
                                        <div class="col-lg-9 d-flex justify-content-end gap-1 flex-nowrap">
                                            <a href="javascript:void(0)" class="btn btn-danger btn-sm delete-selected-comments-btn d-none" data-section-id="{{ $itm->section_id }}"><i class="fas fa-trash"></i> Delete Selected</a>
                                            <a href="javascript:void(0)" class="btn btn-success btn-sm copy-selected-comments-btn d-none" data-section-id="{{ $itm->section_id }}"><i class="fas fa-copy"></i> Copy Selected</a>
                                            <a href="javascript:void(0)" class="btn btn-outline-secondary btn-sm paste-comment-global-btn d-none" data-section-id="{{ $itm->section_id }}">Paste Comment</a>
                                            <a href="javascript:void(0)" class="btn btn-primary btn-sm add-comment-item-btn d-none" data-section-id="{{ $itm->section_id }}"><i class="fas fa-plus"></i> Add Comments</a>
                                        </div>
                                    </div>
                                    <div class="tab-content" id="myTabContent">
                                        <div class="tab-pane fade show active" id="nav-profile-{{ $itm->id }}" role="tabpanel" aria-labelledby="nav-profile-tab-{{ $itm->id }}">
                                            <div class="py-2 text-center text-muted fw-semibold" style="border:2px dashed #e3e3e3; border-radius:6px; background:#fafafa;">
                                                Choose category to view comments
                                            </div>
                                        </div>
                                        
                                        <div class="tab-pane fade" id="nav-material-{{ $itm->id }}" role="tabpanel" aria-labelledby="nav-material-tab-{{ $itm->id }}">
                                            <div class="material-listing-wrapper">
                                                <div class="row mb-2">                                                    
                                                    <div class="col-md-12 text-end">
                                                        <div class="d-flex justify-content-end gap-2">
                                                            <button class="btn btn-danger btn-sm material-delete-selected-btn d-none" data-item-id="{{ $itm->id }}">
                                                                <i class="fas fa-trash"></i> Delete Selected
                                                            </button>
                                                            <button class="btn btn-success btn-sm material-copy-selected-btn d-none" data-item-id="{{ $itm->id }}">
                                                                <i class="fas fa-copy"></i> Copy Selected
                                                            </button>
                                                            <button class="btn btn-outline-secondary btn-sm paste-material-global-btn d-none" data-item-id="{{ $itm->id }}" data-template-id="{{ $itm->section->template_id }}">
                                                                <i class="fas fa-paste"></i> Paste Material
                                                            </button>
                                                            <button class="btn btn-primary btn-sm add-material-btn" data-item-id="{{ $itm->id }}" data-template-id="{{ $itm->section->template_id }}">
                                                                <i class="fas fa-plus"></i> Add Material
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="material-table-container" data-item-id="{{ $itm->id }}" data-template-id="{{ $itm->section->template_id }}">
                                                    <!-- Material table will be loaded here via AJAX -->
                                                </div>
                                                
                                                <!-- No Materials Message -->
                                                <div class="no-materials-message text-center py-3 d-none" data-item-id="{{ $itm->id }}">
                                                    <div class="text-muted">
                                                        <i class="fas fa-box-open fa-3x mb-3"></i>
                                                        <h5>No materials found</h5>
                                                        <p>Add materials to this item to get started.</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                          </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endforeach
@else
    <div class="kitchen_listbottomListBItem w-100 text-muted py-2 text-center">No items added yet.</div>
@endif

@push('page_script')
<!-- Category CRUD moved to parent page script -->
@endpush

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