@php
    $isEdit = isset($editSection);
    $excludedIds = $isEdit ? ($editSection['excluded_column_ids'] ?? []) : [];
@endphp
<div class="mb-3">
    <label class="form-label">Title <span class="text-danger">*</span></label>
    <input type="text" class="form-control" id="section-title" placeholder="Enter section title" value="{{ $isEdit ? e($editSection['title']) : '' }}">
</div>
<div class="mb-3">
    <label class="form-label">Select section column you want to exclude in this section</label>
    <select class="form-select" id="section_column" name="section_column[]" multiple>
        @foreach($sectionColumns as $col)
            <option value="{{ $col->id }}" {{ in_array($col->id, $excludedIds) ? 'selected' : '' }}>{{ $col->name }}</option>
        @endforeach
    </select>
</div>
<div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" value="1" id="checkDefault" {{ $isEdit && $editSection['include_by_default'] ? 'checked' : '' }}>
    <label class="form-check-label" for="checkDefault">
        Do you want to keep this section included in the report editor by default?
    </label>
</div>
<div class="mb-3">
    <label class="form-label">Color Code</label>
    <div class="color_code_list">
        <ul>
            <li><a href="javascript:void(0)" class="color_code color2" data-color_code="#7E57C2"></a></li>
            <li><a href="javascript:void(0)" class="color_code color3" data-color_code="#5C6BC0"></a></li>
            <li><a href="javascript:void(0)" class="color_code color4" data-color_code="#42A5F5"></a></li>
            <li><a href="javascript:void(0)" class="color_code color5" data-color_code="#29B6F6"></a></li>
            <li><a href="javascript:void(0)" class="color_code color6" data-color_code="#26C6DA"></a></li>
            <li><a href="javascript:void(0)" class="color_code color7" data-color_code="#26A69A"></a></li>
            <li><a href="javascript:void(0)" class="color_code color8" data-color_code="#9CCC65"></a></li>
            <li><a href="javascript:void(0)" class="color_code color9" data-color_code="#D4E157"></a></li>
            <li><a href="javascript:void(0)" class="color_code color10" data-color_code="#FFEE58"></a></li>
            <li><a href="javascript:void(0)" class="color_code color11" data-color_code="#FFCA28"></a></li>
            <li><a href="javascript:void(0)" class="color_code color12" data-color_code="#FF7043"></a></li>
        </ul>
        <input type="hidden" id="selected_color_code" name="color_code" value="{{ $isEdit ? e($editSection['color_code']) : '' }}">
        @if($isEdit && !empty($editSection['color_code']))
            <script>
                document.addEventListener('DOMContentLoaded', function(){
                    var code = "{{ addslashes($editSection['color_code']) }}";
                    var el = document.querySelector('.color_code[data-color_code="'+code+'"]');
                    if(el){ el.classList.add('selected'); }
                });
            </script>
        @endif
        <input type="hidden" id="section_tenaunt_id" name="section_tenaunt_id" value="">
        <input type="hidden" id="section_template_id" name="section_template_id" value="">
        @if($isEdit)
            <input type="hidden" id="edit_section_id" value="{{ $editSection['id'] }}">
        @endif
    </div>
</div>
<div class="mb-3">
    <label class="form-label">Attach image</label>
    <div class="banner-upload-area" id="banner-upload-area">
        <div class="banner-placeholder">
            <i class="fas fa-cloud-upload-alt fa-3x text-muted"></i>
            <p class="mt-2 mb-0">Browse</p>
            <small class="text-muted">Click to upload banner image</small>
        </div>
        @php
            $hasBanner = $isEdit && !empty($editSection['file']['original']);
        @endphp
        @php
            $bannerDisplay = $hasBanner ? 'block' : 'none';
            $bannerSrc = $hasBanner ? $editSection['file']['original'] : '';
        @endphp
    <img id="banner-preview" class="banner-preview {{ $hasBanner ? '' : 'd-none' }}" data-banner-display="{{ $hasBanner ? '1' : '0' }}" src="{{ $bannerSrc }}" alt="Banner Preview" style="width: 267px;">
        <input type="file" id="section_image" name="section_image" accept="image/*" style="position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:10;">
    </div>
    <div class="form-text" style="display: none;">
        <strong>Required banner image size:</strong> Minimum 1920px W × 250px H (larger dimensions allowed)
    </div>
</div>
<div class="edit_category_btnctrl mt-0">
    <a href="javascript:void(0)" class="btn editcategory_save saveSectionBtn">Save</a>
</div>