@php /** @var \Illuminate\Support\Collection $materials */ @endphp
<div class="material_table">
    <style>
        /* Material table styles matching comment layout */
        .material_table .kitchen_listbottomListHead{display:flex;border-bottom:1px solid #e5e5e5;}
        .material_table .kitchen_listbottomListHead .kitchen_listbottomListHItem{flex:1;padding:8px 10px;font-weight:600;font-size:14px;}
        .material_table .kitchen_listbottomListHead .w_20{width:40px;flex:0 0 40px;}
        .material_table .kitchen_listbottomListBody{display:block;}
        .material_table .kitchen_listbottomListBRow{display:flex;align-items:flex-start;border-bottom:1px solid #f1f1f1;}
        .material_table .kitchen_listbottomListBRow:last-child{border-bottom:none;}
        .material_table .kitchen_listbottomListBRow .kitchen_listbottomListBItem{flex:1;padding:8px 10px;font-size:14px;line-height:1.3;word-break:break-word;}
        .material_table .kitchen_listbottomListBRow .w_20{width:40px;flex:0 0 40px;}
        .material_table .drag-handle{cursor:grab;display:inline-block;padding:2px;}
        .material_table .kitchen_listbottomListBItem a{display:inline-block;}
        /* Spacing & tab tweaks */
        .template_tabs .nav-tabs{margin-bottom:8px;}
        .template_tabs .nav-tabs .nav-link{font-weight:600;color:#444;background:#f5f5f5;border:1px solid #e2e2e2;border-bottom:none;border-top-left-radius:4px;border-top-right-radius:4px;padding:6px 14px;font-size:14px;}        
        .template_tabs .tab-pane{background:#ffffff;border:1px solid #d5d5d5;padding:10px 12px;border-radius:0 4px 4px 4px;}
        .material_table{margin-top:6px;}
        .template_tabs .btn.add-material-btn{margin-top:2px;}
    </style>
    
    <!-- Material Search -->
    <div class="mb-3">
        <div class="input-group">
            <input type="text" class="form-control material-search-input" placeholder="Search materials..." data-item-id="{{ $itemId }}">
            <button class="btn btn-outline-secondary material-search-clear" type="button" style="display: none;" data-item-id="{{ $itemId }}">
                <i class="fas fa-times"></i>
            </button>
        </div>
    </div>
    
    <div class="divtable_mobscroll">
        <div class="kitchen_listbottomListHead">
            <div class="kitchen_listbottomListHItem w_20" style="width:30px;flex:0 0 30px;">
                <input type="checkbox" class="form-check-input material-select-all" title="Select All" />
            </div>
            <div class="kitchen_listbottomListHItem w_20">&nbsp;</div>
            <div class="kitchen_listbottomListHItem">Material Name</div>
            <div class="kitchen_listbottomListHItem">Control Type</div>
            <div class="kitchen_listbottomListHItem">Group</div>
            <div class="kitchen_listbottomListHItem">Action</div>
        </div>
        <div class="kitchen_listbottomListBody sortable-materials" data-item-id="{{ $itemId }}">
            @forelse($materials as $m)
                <div class="kitchen_listbottomListBRow" data-material-row="{{ $m->id }}" data-sort="{{ $m->sort_order }}">
                    <div class="kitchen_listbottomListBItem" style="width:30px;flex:0 0 30px;">
                        <input type="checkbox" class="form-check-input material-row-checkbox" value="{{ $m->id }}" />
                    </div>
                    <div class="kitchen_listbottomListBItem w_20">
                        <a href="javascript:void(0);" class="drag-handle"><img src="{{ asset('images/table_menue.svg') }}"></a>
                    </div>
                    <div class="kitchen_listbottomListBItem">{{ $m->name }}</div>
                    <div class="kitchen_listbottomListBItem">{{ ucfirst($m->control_type) }}</div>
                    <div class="kitchen_listbottomListBItem">{{ optional($m->groupCategory)->name ?: ($m->is_primary_group ? 'Primary Group' : '-') }}</div>
                    <div class="kitchen_listbottomListBItem">
                        <a href="javascript:void(0)" class="material-preview-btn" title="Preview" data-id="{{ $m->id }}"><img src="{{ asset('images/view.svg') }}"></a>
                        <a href="javascript:void(0)" class="ps-3 edit-material-btn" data-id="{{ $m->id }}"><img src="{{ asset('images/edit.svg') }}"></a>
                        <a href="javascript:void(0)" class="ps-3 duplicate-material-btn" data-id="{{ $m->id }}"><img src="{{ asset('images/copy.svg') }}"></a>
                        <a href="javascript:void(0)" class="ps-3 delete-material-btn" data-id="{{ $m->id }}"><img src="{{ asset('images/delete_black.svg') }}"></a>
                    </div>
                </div>
            @empty
                <div class="kitchen_listbottomListBItem w-100 text-muted py-2 text-center">No materials found.</div>
            @endforelse
        </div>
    </div>
</div>