<div class="d-none" id="forItemsModal" data-action="/admin/webinar-for-items/store">
    <h3 class="section-title after-line font-20 text-dark-blue mb-25">إضافة محور للدبلوم</h3>

    <form action="/admin/webinar-for-items/store" method="post">
        <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">النص</label>
            <textarea name="description" class="form-control js-ajax-description" placeholder=""></textarea>
            <div class="invalid-feedback"></div>
        </div>

        <div class="form-group">
            <label class="input-label">الأيقونة</label>
            <select name="icon" class="form-control">
                <option value="users">طلاب / مستخدمون</option>
                <option value="award">شهادة / اعتماد</option>
                <option value="book-open">دروس / كتاب</option>
                <option value="clock">مدة / وقت</option>
                <option value="star">تميز</option>
                <option value="check-circle">تحقق</option>
                <option value="layers">أقسام</option>
                <option value="play-circle">محاضرة</option>
                <option value="briefcase">عمل / مهنة</option>
                <option value="globe">عالمي / أونلاين</option>
                <option value="smile">رضا / سعادة</option>
                <option value="target">هدف</option>
                <option value="heart">اهتمام</option>
                <option value="zap">طاقة / سرعة</option>
            </select>
            <small class="form-text text-muted">تظهر عند عدم رفع صورة، أو بجانب الصورة في صفحة الدبلوم.</small>
        </div>
        
        <div class="form-group">
            <label class="input-label">الصورة (اختياري)</label>
            <div class="input-group">
                <div class="input-group-prepend">
                    <button type="button" class="input-group-text admin-file-manager" data-input="item_image" data-preview="holder">
                        <i class="fa fa-upload"></i>
                    </button>
                </div>
                <input type="text" name="image" id="item_image" value="" class="form-control js-ajax-image" placeholder="اختر صورة (اختياري)"/>
                <div class="input-group-append">
                    <button type="button" class="input-group-text admin-file-view" data-input="item_image">
                        <i class="fa fa-eye"></i>
                    </button>
                </div>
            </div>
            <div class="invalid-feedback"></div>
        </div>
        
        <div class="form-group">
            <label class="input-label">لون الخلفية (اختياري)</label>
            <div class="input-group">
                <input type="color" name="background_color" id="background_color" value="#ffffff" class="form-control" style="height: 38px; width: 80px; padding: 2px;"/>
                <input type="text" name="background_color_text" id="background_color_text" value="#ffffff" class="form-control" placeholder="أدخل كود اللون (مثل: #ffffff أو linear-gradient(...))" style="margin-right: 10px;"/>
            </div>
            <small class="form-text text-muted">يمكنك اختيار لون بسيط أو إدخال gradient مثل: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%)</small>
            <div class="invalid-feedback"></div>
        </div>
        
       <div class="js-form-groups">
           
       </div>
        

        <div class="mt-30 d-flex align-items-center justify-content-end">
            <button type="button" id="saveForItem" class="btn btn-primary">{{ trans('public.save') }}</button>
            <button type="button" class="btn btn-danger ml-2 close-swl">{{ trans('public.close') }}</button>
        </div>
    </form>
</div>

<script>
    $(document).ready(function() {
        // ربط حقل اللون مع حقل النص
        $('#background_color').on('change', function() {
            var colorValue = $(this).val();
            $('#background_color_text').val(colorValue);
        });
        
        // عند تغيير حقل النص، إذا كان لون بسيط (hex) نحدث حقل اللون
        $('#background_color_text').on('input', function() {
            var textValue = $(this).val().trim();
            // إذا كان النص يبدأ بـ # وله 7 أحرف (hex color)
            if (textValue.match(/^#[0-9A-Fa-f]{6}$/)) {
                $('#background_color').val(textValue);
            }
        });
        
        // قبل إرسال النموذج، نأخذ القيمة من حقل النص إذا كان مملوءاً
        $('body').on('click', '#saveForItem', function() {
            var colorText = $('#background_color_text').val().trim();
            if (colorText) {
                // نستخدم حقل نصي مخفي لإرسال القيمة
                if ($('input[name="background_color"]').length && $('input[name="background_color"]').attr('type') === 'color') {
                    $('input[name="background_color"]').val(colorText);
                } else {
                    // إذا لم يكن موجوداً، نضيفه
                    $('<input>').attr({
                        type: 'hidden',
                        name: 'background_color',
                        value: colorText
                    }).appendTo('#forItemsModal form');
                }
            }
        });
    });
</script>