@php
    /**
     * Expected variables:
     * $sectionId (int)
     * $activeTypeId (int)
     * $availableTypes (Collection of ['type_id','title'])
     * $sectionColumns (Collection of section columns) - optional
     * $sides (Collection of sides) - optional
     */
    $enableSides = isset($editItem) && $editItem->enable_sides ? true : false;
    $isGrouped = isset($editItem) && $editItem->is_grouped ? true : false;
    $selectedSideIds = isset($editItem) && $editItem->relationLoaded('sides') ? $editItem->sides->pluck('id')->toArray() : [];
@endphp
<div class="mb-3">
    <label class="form-label" for="section_item_title">Question<span class="text-danger">*</span></label>
    <input type="text" id="section_item_title" name="type_name" class="form-control" placeholder="Enter question" value="{{ isset($editItem) && isset($editItem->type_name) ? $editItem->type_name : '' }}" />
</div>
<div class="mb-3">
    <label class="form-label" for="section_item_type_id">Question Category</label>
    <select id="section_item_type_id" name="item_type_id" class="form-select" aria-label="Item Type">
        <option value="">Select Question Category</option>
        @foreach($availableTypes as $t)
            @php
                // Support both sources: getAddSectionItemModalBody (type_id, title) and Helper tabs (item_type_id, item_type_title)
                $idField = isset($t->type_id) ? $t->type_id : (isset($t->item_type_id) ? $t->item_type_id : (isset($t->id) ? $t->id : null));
                $titleField = isset($t->title) ? $t->title : (isset($t->item_type_title) ? $t->item_type_title : '');
                $sel = ($idField && (int)$idField === (int)$activeTypeId) ? 'selected' : '';
            @endphp
            @if($idField)
            <option value="{{ $idField }}" {{ $sel }} data-title="{{ $titleField }}">{{ $titleField }}</option>
            @endif
        @endforeach
        <option value="others">Others</option>
    </select>
</div>
<div class="mb-3" id="new_category_field" style="display: none;">
    <label class="form-label" for="new_category_name">New Category Name <span class="text-danger">*</span></label>
    <input type="text" id="new_category_name" name="new_category_name" class="form-control" placeholder="Enter new category name" />
</div>

<!-- Group Enable Toggle -->
<div class="mb-3">
    <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" id="is_grouped_toggle" name="is_grouped" value="1" {{ $isGrouped ? 'checked' : '' }}>
        <label class="form-check-label" for="is_grouped_toggle">Enable Grouping</label>
    </div>
</div>

<!-- Enable Sides Toggle -->
<div class="mb-3">
    <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" id="enable_sides_toggle" name="enable_sides" value="1" {{ $enableSides ? 'checked' : '' }}>
        <label class="form-check-label" for="enable_sides_toggle">Enable Sides</label>
    </div>
</div>

<!-- Sides Selection (shown when toggle is on) -->
<div class="mb-3" id="sides_selection_container" style="display: {{ $enableSides ? 'block' : 'none' }};">
    <label class="form-label">Select Sides</label>
    <div class="sides-checkbox-group d-flex flex-wrap gap-3">
        @if(isset($sides) && $sides->count() > 0)
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="check_all_sides" {{ isset($selectedSideIds) && count($selectedSideIds) === $sides->count() ? 'checked' : '' }}>
                <label class="form-check-label fw-bold" for="check_all_sides">All</label>
            </div>
            @foreach($sides as $side)
                <div class="form-check">
                    <input class="form-check-input side-checkbox" type="checkbox" name="side_ids[]" value="{{ $side->id }}" id="side_{{ $side->id }}" {{ in_array($side->id, $selectedSideIds) ? 'checked' : '' }}>
                    <label class="form-check-label" for="side_{{ $side->id }}">{{ $side->side_name }}</label>
                </div>
            @endforeach
        @else
            <p class="text-muted small">No sides available</p>
        @endif
    </div>
</div>

<input type="hidden" name="section_id" id="modal_section_id" value="{{ $sectionId }}">
@if(isset($editItem))
    <input type="hidden" name="section_item_id" id="section_item_id" value="{{ $editItem->id }}">
@endif
<div class="edit_category_btnctrl mt-0">
    <a href="javascript:void(0)" class="btn editcategory_save section-item-save" data-mode="{{ isset($editItem)?'edit':'create' }}">{{ isset($editItem)?'Update':'Save' }}</a>
</div>