<div class="row g-4">
    <div class="col-lg-6">
        <label class="form-label">{{ $sectionTitle }} Heading EN</label>
        <input type="text" name="{{ $sectionKey }}[heading_en]" value="{{ old($sectionKey . '.heading_en', $section->heading_en) }}" class="form-control @error($sectionKey . '.heading_en') is-invalid @enderror">
        @error($sectionKey . '.heading_en')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-lg-6">
        <label class="form-label">{{ $sectionTitle }} Heading AR</label>
        <input type="text" name="{{ $sectionKey }}[heading_ar]" value="{{ old($sectionKey . '.heading_ar', $section->heading_ar) }}" dir="rtl" class="form-control @error($sectionKey . '.heading_ar') is-invalid @enderror">
        @error($sectionKey . '.heading_ar')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-lg-6">
        <label class="form-label">{{ $sectionTitle }} Description EN</label>
        <textarea name="{{ $sectionKey }}[description_en]" rows="4" class="form-control @error($sectionKey . '.description_en') is-invalid @enderror">{{ old($sectionKey . '.description_en', $section->description_en) }}</textarea>
        @error($sectionKey . '.description_en')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-lg-6">
        <label class="form-label">{{ $sectionTitle }} Description AR</label>
        <textarea name="{{ $sectionKey }}[description_ar]" rows="4" dir="rtl" class="form-control @error($sectionKey . '.description_ar') is-invalid @enderror">{{ old($sectionKey . '.description_ar', $section->description_ar) }}</textarea>
        @error($sectionKey . '.description_ar')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-lg-12">
        <label class="form-label">{{ $sectionTitle }} Content EN</label>
        <textarea id="{{ $sectionKey }}_content_en" name="{{ $sectionKey }}[content_en]" rows="10" class="form-control @error($sectionKey . '.content_en') is-invalid @enderror">{{ old($sectionKey . '.content_en', $section->content_en) }}</textarea>
        @error($sectionKey . '.content_en')
            <div class="invalid-feedback d-block">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-lg-12">
        <label class="form-label">{{ $sectionTitle }} Content AR</label>
        <textarea id="{{ $sectionKey }}_content_ar" name="{{ $sectionKey }}[content_ar]" rows="10" dir="rtl" class="form-control @error($sectionKey . '.content_ar') is-invalid @enderror">{{ old($sectionKey . '.content_ar', $section->content_ar) }}</textarea>
        @error($sectionKey . '.content_ar')
            <div class="invalid-feedback d-block">{{ $message }}</div>
        @enderror
    </div>
</div>

@push('ad_styles')
<style>
    .cke_contents {
        min-height: 360px !important;
    }
</style>
@endpush

@push('ad_scripts')
<script src="https://cdn.ckeditor.com/4.22.1/standard-all/ckeditor.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const enId = '{{ $sectionKey }}_content_en';
        const arId = '{{ $sectionKey }}_content_ar';

        if (document.getElementById(enId) && typeof CKEDITOR !== 'undefined') {
            if (CKEDITOR.instances[enId]) {
                CKEDITOR.instances[enId].destroy(true);
            }

            CKEDITOR.replace(enId, {
                height: 360,
                allowedContent: true,
                extraAllowedContent: '*(*);*{*};*[*]'
            });
        }

        if (document.getElementById(arId) && typeof CKEDITOR !== 'undefined') {
            if (CKEDITOR.instances[arId]) {
                CKEDITOR.instances[arId].destroy(true);
            }

            CKEDITOR.replace(arId, {
                height: 360,
                contentsLangDirection: 'rtl',
                allowedContent: true,
                extraAllowedContent: '*(*);*{*};*[*]'
            });
        }
    });
</script>
@endpush