<div class="d-none" id="AcademySectionModal" data-action="/admin/webinar-academy-sections/store">
    <h3 class="section-title after-line font-20 text-dark-blue mb-25">تعديل قسم الأكاديمية</h3>

    <form action="/admin/webinar-academy-sections/store" method="post" id="academySectionForm">
        {{ csrf_field() }}
        <input type="hidden" name="webinar_id" value="{{ !empty($webinar) ? $webinar->id : '' }}">

        @if(!empty(getGeneralSettings('content_translate')))
            <div class="form-group">
                <label class="input-label">{{ trans('auth.language') }}</label>
                <select name="locale" class="form-control">
                    @foreach($userLanguages as $lang => $language)
                        <option value="{{ $lang }}" @if(mb_strtolower(request()->get('locale', app()->getLocale())) == mb_strtolower($lang)) selected @endif>{{ $language }}</option>
                    @endforeach
                </select>
                @error('locale')
                <div class="invalid-feedback">
                    {{ $message }}
                </div>
                @enderror
            </div>
        @else
            <input type="hidden" name="locale" value="{{ getDefaultLocale() }}">
        @endif

            <div class="form-group">
                <label class="input-label"><?php echo e(trans('admin/main.status')); ?></label>
                <div class="custom-switches-stacked">
                    <label class="custom-switch">
                        <input type="checkbox" name="status" value="1" class="custom-switch-input js-academy-status" checked>
                        <span class="custom-switch-indicator"></span>
                        <span class="custom-switch-description"><?php echo e(trans('admin/main.active')); ?></span>
                    </label>
                </div>
            </div>

        <div class="form-group">
            <label class="input-label"><?php echo e(trans('admin/main.title')); ?></label>
            <input type="text" name="title" class="form-control js-academy-title" placeholder="الأكاديمية تحتوي على">
            <div class="invalid-feedback"></div>
        </div>

        <hr>
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h4 class="mb-0">الصناديق</h4>
            <button type="button" id="addAcademyBox" class="btn btn-sm btn-success">إضافة صندوق</button>
        </div>

        <div id="academyBoxesList">
            <!-- Boxes will be loaded here dynamically -->
        </div>

        <div class="mt-30 d-flex align-items-center justify-content-end">
            <button type="button" id="saveAcademySection" class="btn btn-primary"><?php echo e(trans('public.save')); ?></button>
            <button type="button" class="btn btn-danger ml-2 close-swl"><?php echo e(trans('public.close')); ?></button>
        </div>
    </form>
</div>
    <div class="box-item card mb-3" data-box-index="">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0">صندوق <span class="box-number"></span></h5>
                <button type="button" class="btn btn-sm btn-danger remove-academy-box">حذف</button>
            </div>
            
            <div class="form-group">
                <label>العنوان</label>
                <input type="text" name="boxes[][title]" class="form-control box-title" required>
            </div>

            <div class="form-group">
                <label>الوصف</label>
                <textarea name="boxes[][description]" class="form-control box-description" rows="3" required></textarea>
            </div>

            <div class="form-group">
                <label>نوع الأيقونة</label>
                <select name="boxes[][icon_type]" class="form-control box-icon-type">
                    <option value="class" selected>Class (Font Awesome)</option>
                    <option value="image">صورة</option>
                </select>
            </div>

            <div class="form-group box-icon-class-group">
                <label>اسم الأيقونة (Font Awesome Class)</label>
                <input type="text" name="boxes[][icon]" class="form-control box-icon" placeholder="مثال: fa fa-graduation-cap">
            </div>

            <div class="form-group box-icon-image-group" style="display:none;">
                <label>صورة الأيقونة</label>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <button type="button" class="input-group-text admin-file-manager" data-input="box_icon_image_" data-preview="box_icon_preview_">
                            <i class="fa fa-chevron-up"></i>
                        </button>
                    </div>
                    <input type="text" name="boxes[][icon]" class="form-control box-icon-image">
                </div>
            </div>
        </div>
    </div>
</div>

