@csrf
<style>
  .field-error { color: #d9534f; font-size: .9rem; margin-top: .25rem; display: none; }
  .is-invalid { border-color: #d9534f !important; box-shadow: 0 0 0 .15rem rgba(217,83,79,.12); }
  .is-valid { border-color: #28a745 !important; box-shadow: 0 0 0 .15rem rgba(40,167,69,.08); }
  .validation-summary { display:none; margin-bottom:1rem; padding: .75rem 1rem; border-radius:6px; background: #fff3f2; color: #b02a37; border:1px solid #f5c2c7; }
  .tox-tinymce.is-invalid { outline: 3px solid rgba(217,83,79,.12); }
  .tox-tinymce.is-valid { outline: 3px solid rgba(40,167,69,.12); }
</style>

@if ($errors->any())
    <ul class="alert alert-warning">
        @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
        @endforeach
    </ul>
@endif
<div class="validation-summary" id="validationSummary"></div>

<div class="block-card mb-4">
  <div class="block-card-header">
    <h2 class="widget-title">{{ $formTitle ?? 'نموذج البرنامج' }}</h2>
    <div class="stroke-shape"></div>
  </div>

  <div class="block-card-body">
    <div class="form-group row mb-3">
        <div class="col-md-6">
            <label>الفئة <span class="text-danger">*</span></label>
            <select name="id_categorie" id="id_categorie" class="form-control">
                <option value="">-- اختر الفئة --</option>
                @foreach($categories as $categorie)
                    <option value="{{ $categorie->id }}" 
                        {{ old('id_categorie', $prog_actv->id_categorie ?? '') == $categorie->id ? 'selected' : '' }}>
                        {{ $categorie->nom_ar }} ({{ $categorie->nom_fr }})
                    </option>
                @endforeach
            </select>
            <span id="error_id_categorie" class="field-error">الرجاء اختيار الفئة.</span>
        </div>
    </div>

    <div class="form-group row mb-3">
      <div class="col-md-6">
        <label>العنوان بالعربية <span class="text-danger">*</span></label>
        <input type="text" required maxlength="200" name="titre_ar" id="titre_ar" class="form-control" value="{{ old('titre_ar', $prog_actv->titre_ar ?? '') }}">
        <span id="error_titre_ar" class="field-error">الرجاء إدخال العنوان بالعربية.</span>
      </div>

      <div class="col-md-6">
        <label>العنوان بالفرنسية <span class="text-danger">*</span></label>
        <input type="text" required maxlength="200" name="titre_fr" id="titre_fr" class="form-control" value="{{ old('titre_fr', $prog_actv->titre_fr ?? '') }}">
        <span id="error_titre_fr" class="field-error">الرجاء إدخال العنوان بالفرنسية.</span>
      </div>
    </div>

    <div class="form-group row mb-3">
      <div class="col-md-6">
        <label>العنوان بالإنجليزية <span class="text-danger">*</span></label>
        <input type="text" required maxlength="200" name="titre_en" id="titre_en" class="form-control" value="{{ old('titre_en', $prog_actv->titre_en ?? '') }}">
        <span id="error_titre_en" class="field-error">الرجاء إدخال العنوان بالإنجليزية.</span>
      </div>
    </div>

    <div class="form-group mb-3" dir="rtl">
      <label class="fw-bold mb-2">الوصف بالعربية <span class="text-danger">*</span></label>
      <textarea name="desc_ar" required id="editor_desc_ar" class="form-control" rows="10">{{ old('desc_ar', $prog_actv->desc_ar ?? '') }}</textarea>
      <span id="error_desc_ar" class="field-error">الرجاء إدخال الوصف بالعربية.</span>
    </div>

    <div class="form-group mb-3" dir="rtl">
      <label class="fw-bold mb-2">الملخّص بالعربية <span class="text-danger">*</span></label>
      <textarea name="resume_ar" id="resume_ar" class="form-control" rows="3" required>{{ old('resume_ar', $prog_actv->resume_ar ?? '') }}</textarea>
      <span id="error_resume_ar" class="field-error">الرجاء إدخال الملخّص بالعربية.</span>
    </div>

    <div class="form-group mb-3">
      <label class="fw-bold mb-2">الوصف بالفرنسية <span class="text-danger">*</span></label>
      <textarea name="desc_fr" required id="editor_desc_fr" class="form-control" rows="10">{{ old('desc_fr', $prog_actv->desc_fr ?? '') }}</textarea>
      <span id="error_desc_fr" class="field-error">الرجاء إدخال الوصف بالفرنسية.</span>
    </div>

    <div class="form-group mb-3" dir="rtl">
      <label class="fw-bold mb-2">الملخّص بالفرنسية <span class="text-danger">*</span></label>
      <textarea name="resume_fr" id="resume_fr" required class="form-control" rows="3">{{ old('resume_fr', $prog_actv->resume_fr ?? '') }}</textarea>
      <span id="error_resume_fr" class="field-error">الرجاء إدخال الملخّص بالفرنسية.</span>
    </div>

    <div class="form-group mb-3">
      <label class="fw-bold mb-2">الوصف بالإنجليزية <span class="text-danger">*</span></label>
      <textarea name="desc_en" required id="editor_desc_en" class="form-control" rows="10">{{ old('desc_en', $prog_actv->desc_en ?? '') }}</textarea>
      <span id="error_desc_en" class="field-error">الرجاء إدخال الوصف بالإنجليزية.</span>
    </div>

    <div class="form-group mb-3" dir="rtl">
      <label class="fw-bold mb-2">الملخّص بالإنجليزية <span class="text-danger">*</span></label>
      <textarea name="resume_en" id="resume_en" class="form-control" rows="3" required>{{ old('resume_en', $prog_actv->resume_en ?? '') }}</textarea>
      <span id="error_resume_en" class="field-error">الرجاء إدخال الملخّص بالإنجليزية.</span>
    </div>

    <div class="form-group mb-3">
      <label>صورة البرنامج</label>
      <input type="file" name="image" id="image" class="form-control" accept="image/*">
      <span id="error_image" class="field-error">صورة غير صالحة أو أكبر من 2 ميغابايت.</span>

      @if(isset($prog_actv) && !empty($prog_actv->imageSrc))
        <div class="mt-2">
          <img src="{{ $prog_actv->imageSrc }}"
            alt="{{ $prog_actv->titre_ar ?? 'صورة البرنامج' }}"
            style="height:100px; border-radius:8px; object-fit:cover;">
        </div>
      @elseif(isset($prog_actv) && !empty($prog_actv->image) && is_string($prog_actv->image) && preg_match('/^data:/', $prog_actv->image))
        <div class="mt-2">
          <img src="{{ $prog_actv->image }}" alt="صورة البرنامج" style="height:100px; border-radius:8px; object-fit:cover;">
        </div>
      @endif
    </div>

    <div class="form-group mb-3">
      <label>رابط YouTube</label>
      <input type="text" name="youtube_url" id="youtube_url" class="form-control" value="{{ old('youtube_url', $prog_actv->youtube_url ?? '') }}" placeholder="https://www.youtube.com/watch?v=...">
      <span id="error_youtube" class="field-error">الرجاء إدخال رابط YouTube صالح أو إزالته.</span>
    </div>

    <div class="form-check mb-3">
      <input type="hidden" name="published" value="0">
      <input type="checkbox" name="published" value="1" class="form-check-input" id="published" {{ old('published', $prog_actv->published ?? false) ? 'checked' : '' }}>
      <label for="published" class="form-check-label">منشور</label>
    </div>
  </div>

  <div class="block-card-footer mt-3 mb-3 text-center">
    <button type="submit" id="submitBtn" class="btn bg-rgb-primary1 font-weight-medium">
      <i class="la la-save mr-1"></i> حفظ
    </button>
    <a href="{{ route('prog_actv.index') }}" class="btn bg-rgb-primary1 font-weight-medium">
      <i class="la la-times mr-1"></i> إلغاء
    </a>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/tinymce@6/tinymce.min.js" referrerpolicy="origin"></script>

<div id="validationSummary" class="validation-summary"></div>

<script>
(function(){
  function stripHtml(html){
    const tmp = document.createElement("DIV"); tmp.innerHTML = html || ""; return (tmp.textContent || tmp.innerText || "").trim();
  }
  function ensureErrorSpan(el, id){
    if(!el) return null;
    if(id){
      const e = document.getElementById(id);
      if(e) return e;
    }
    const sibling = el.parentNode.querySelector('.field-error');
    if(sibling) return sibling;
    const span = document.createElement('div'); span.className = 'field-error'; if(id) span.id = id;
    el.parentNode.appendChild(span); return span;
  }
  function markInvalid(el, msg){
    if(!el) return;
    el.classList.remove('is-valid'); el.classList.add('is-invalid');
    const span = ensureErrorSpan(el); if(span){ span.innerText = msg; span.style.display = 'block'; }
  }
  function markValid(el){
    if(!el) return;
    el.classList.remove('is-invalid'); el.classList.add('is-valid');
    const span = ensureErrorSpan(el); if(span){ span.style.display = 'none'; span.innerText = ''; }
  }
  function clearValidation(root){
    root.querySelectorAll('.is-invalid').forEach(i => i.classList.remove('is-invalid'));
    root.querySelectorAll('.is-valid').forEach(i => i.classList.remove('is-valid'));
    root.querySelectorAll('.field-error').forEach(s => { s.style.display = 'none'; s.innerText = ''; });
    document.querySelectorAll('.tox-tinymce.is-invalid, .tox-tinymce.is-valid').forEach(c => { c.classList.remove('is-invalid','is-valid'); });
  }
  function isYouTubeUrl(url){
    if(!url) return false;
    const patterns = [/^https?:\/\/(www\.)?youtube\.com\/watch\?v=[\w-]+(&.*)?$/i, /^https?:\/\/youtu\.be\/[\w-]+$/i];
    return patterns.some(rx => rx.test(url.trim()));
  }

  function validateText(selector, friendlyName, required=true, maxLen=null){
    const el = document.querySelector(selector); if(!el) return true;
    const v = (el.value || '').trim();
    if(required && !v){ markInvalid(el, friendlyName + ' مطلوب.'); return false; }
    if(maxLen && v.length > maxLen){ markInvalid(el, friendlyName + ' يجب ألا يتجاوز ' + maxLen + ' حرفاً.'); return false; }
    if(v) markValid(el); else if(!required) markValid(el);
    return true;
  }
  function validateSelect(selector, friendlyName, required=true){
    const el = document.querySelector(selector); if(!el) return true;
    const v = (el.value || '').trim();
    if(required && !v){ markInvalid(el, friendlyName + ' مطلوب.'); return false; }
    if(v) markValid(el);
    return true;
  }
  function validateFile(selector, friendlyName, required=false, maxBytes=2*1024*1024){
    const el = document.querySelector(selector); if(!el) return true;
    if(el.files && el.files.length){
      const f = el.files[0];
      if(!f.type.startsWith('image/')){ markInvalid(el, friendlyName + ' يجب أن يكون صورة.'); return false; }
      if(f.size > maxBytes){ markInvalid(el, friendlyName + ' يجب ألا يتجاوز 2 ميغابايت.'); return false; }
      markValid(el); return true;
    } else {
      if(required){ markInvalid(el, friendlyName + ' مطلوب.'); return false; }
      el.classList.remove('is-invalid','is-valid'); return true;
    }
  }
  function validateYouTube(selector, friendlyName){
    const el = document.querySelector(selector); if(!el) return true;
    const v = (el.value || '').trim();
    if(!v){ el.classList.remove('is-invalid','is-valid'); return true; }
    if(!isYouTubeUrl(v)){ markInvalid(el, friendlyName + ' غير صالح.'); return false; }
    markValid(el); return true;
  }
  function markTinyMCE(editorId, valid, message){
    const ta = document.getElementById(editorId); const ed = tinymce.get(editorId);
    if(ta){ if(valid) markValid(ta); else markInvalid(ta, message); }
    if(ed && ed.getContainer){ const c = ed.getContainer(); if(valid){ c.classList.remove('is-invalid'); c.classList.add('is-valid'); } else { c.classList.remove('is-valid'); c.classList.add('is-invalid'); } }
  }
  function validateEditor(editorId, friendlyName, required=true, maxLen=100000){
    const ed = tinymce.get(editorId); const ta = document.getElementById(editorId);
    const raw = ed ? ed.getContent() : (ta ? ta.value : '');
    const text = stripHtml(raw);
    if(required && !text){ markTinyMCE(editorId, false, friendlyName + ' مطلوب.'); return false; }
    if(maxLen && text.length > maxLen){ markTinyMCE(editorId, false, friendlyName + ' تجاوز الحد الأقصى ('+maxLen+').'); return false; }
    markTinyMCE(editorId, true, ''); return true;
  }

  document.addEventListener('DOMContentLoaded', function(){
    let form = document.querySelector('form');
    const submitBtn = document.getElementById('submitBtn');
    if(submitBtn){
      const f = submitBtn.closest('form');
      if(f) form = f;
    }
    if(!form) return;

    form.setAttribute('novalidate','novalidate');

    const liveIds = ['#titre_ar','#titre_fr','#titre_en','#resume_ar','#resume_fr','#resume_en','#youtube_url','#id_categorie','input[type="file"][name="image"]'];
    liveIds.forEach(sel=>{
      const el = form.querySelector(sel); if(!el) return;
      const ev = (el.tagName === 'INPUT' && el.type === 'file') ? 'change' : 'input';
      el.addEventListener(ev, function(){
        if(sel === '#youtube_url') validateYouTube('#youtube_url','رابط YouTube');
        else if(sel === '#id_categorie') validateSelect('#id_categorie','الفئة', false);
        else if(sel.indexOf('input[type="file"') === 0) validateFile('input[type="file"][name="image"]','صورة البرنامج', false);
        else {
          if(sel === '#titre_ar' || sel === '#titre_fr' || sel === '#titre_en') validateText(sel,'العنوان', true, 200);
          else validateText(sel,'الملخّص', true, 65535);
        }
      });
    });

    function bindEditorLive(id){
      const tryBind = () => {
        const ed = tinymce.get(id);
        const ta = document.getElementById(id);
        if(ed){ ed.on('keyup change', ()=> validateEditor(id, id==='editor_desc_ar' ? 'الوصف بالعربية' : id==='editor_desc_fr' ? 'الوصف بالفرنسية' : 'الوصف بالإنجليزية', true, 100000)); }
        else if(ta){ ta.addEventListener('input', ()=> validateEditor(id, 'الوصف', true, 100000)); }
        else { setTimeout(tryBind, 200); }
      };
      tryBind();
    }
    bindEditorLive('editor_desc_ar'); bindEditorLive('editor_desc_fr'); bindEditorLive('editor_desc_en');

    form.addEventListener('submit', function(e){
      if(tinymce.get('editor_desc_ar')) document.querySelector('textarea[name="desc_ar"]').value = tinymce.get('editor_desc_ar').getContent();
      if(tinymce.get('editor_desc_fr')) document.querySelector('textarea[name="desc_fr"]').value = tinymce.get('editor_desc_fr').getContent();
      if(tinymce.get('editor_desc_en')) document.querySelector('textarea[name="desc_en"]').value = tinymce.get('editor_desc_en').getContent();

      clearValidation(form);
      const summary = document.getElementById('validationSummary'); summary.style.display = 'none'; summary.innerText = '';

      let firstInvalid = null;
      if(!validateSelect('#id_categorie','الفئة', false)) firstInvalid = firstInvalid || document.getElementById('id_categorie');
      if(!validateText('#titre_ar','العنوان بالعربية', true, 200)) firstInvalid = firstInvalid || document.getElementById('titre_ar');
      if(!validateText('#titre_fr','العنوان بالفرنسية', true, 200)) firstInvalid = firstInvalid || document.getElementById('titre_fr');
      if(!validateText('#titre_en','العنوان بالإنجليزية', true, 200)) firstInvalid = firstInvalid || document.getElementById('titre_en');
      if(!validateText('#resume_ar','الملخّص بالعربية', true, 65535)) firstInvalid = firstInvalid || document.getElementById('resume_ar');
      if(!validateText('#resume_fr','الملخّص بالفرنسية', true, 65535)) firstInvalid = firstInvalid || document.getElementById('resume_fr');
      if(!validateText('#resume_en','الملخّص بالإنجليزية', true, 65535)) firstInvalid = firstInvalid || document.getElementById('resume_en');
      if(!validateEditor('editor_desc_ar','الوصف بالعربية', true, 100000)) firstInvalid = firstInvalid || (document.getElementById('editor_desc_ar') || document.querySelector('.tox-tinymce'));
      if(!validateEditor('editor_desc_fr','الوصف بالفرنسية', true, 100000)) firstInvalid = firstInvalid || (document.getElementById('editor_desc_fr') || document.querySelector('.tox-tinymce'));
      if(!validateEditor('editor_desc_en','الوصف بالإنجليزية', true, 100000)) firstInvalid = firstInvalid || (document.getElementById('editor_desc_en') || document.querySelector('.tox-tinymce'));
      if(!validateYouTube('#youtube_url','رابط YouTube')) firstInvalid = firstInvalid || document.getElementById('youtube_url');
      if(!validateFile('input[type="file"][name="image"]','صورة البرنامج', false, 2*1024*1024)) firstInvalid = firstInvalid || document.querySelector('input[type="file"][name="image"]');

      if(firstInvalid){
        e.preventDefault();
        try{ firstInvalid.focus(); }catch(_){}
        firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
        return false;
      }
      return true;
    });
  });
})();
</script>

<style>
.bg-rgb-primary1 {
    background-color: #e8f0fe;
    color: #4a6f8f;
}
</style>