{% extends "base.html" %} {% block title %}تعديل كلمة - لوحة التحكم{% endblock
%} {% block content %}
<div class="row">
  <div class="col-md-12">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h1>تعديل الكلمة: {{ word.fur_word }}</h1>
      <a href="{{ url_for('admin.words_list') }}" class="btn btn-secondary">
        <i class="fas fa-arrow-right"></i> العودة إلى قائمة الكلمات
      </a>
    </div>

    <div class="card">
      <div class="card-body">
        <form method="POST" enctype="multipart/form-data" id="editWordForm">
          <div class="row">
            <!-- الكلمة بالفور -->
            <div class="col-md-6 mb-3">
              <label for="fur_word" class="form-label">
                <i class="fas fa-font"></i> الكلمة بالفور *
              </label>
              <input
                type="text"
                class="form-control"
                id="fur_word"
                name="fur_word"
                value="{{ word.fur_word }}"
                required
                placeholder="أدخل الكلمة بالفور"
              />
            </div>

            <!-- الكلمة بالعربية -->
            <div class="col-md-6 mb-3">
              <label for="arabic_word" class="form-label">
                <i class="fas fa-font"></i> الكلمة بالعربية *
              </label>
              <input
                type="text"
                class="form-control"
                id="arabic_word"
                name="arabic_word"
                value="{{ word.arabic_word }}"
                required
                placeholder="أدخل الكلمة بالعربية"
                pattern="[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF\s\d\p{P}\u064B-\u065F\u0670]+"
                title="يجب أن تحتوي على أحرف عربية ورموز وعلامات وتشكيل فقط"
              />
              <div class="invalid-feedback">
                يجب أن تحتوي الكلمة العربية على أحرف عربية ورموز وعلامات وتشكيل
                فقط
              </div>
            </div>
          </div>

          <div class="row">
            <!-- الكلمة بالإنجليزية -->
            <div class="col-md-6 mb-3">
              <label for="english_word" class="form-label">
                <i class="fas fa-font"></i> الكلمة بالإنجليزية *
              </label>
              <input
                type="text"
                class="form-control"
                id="english_word"
                name="english_word"
                value="{{ word.english_word }}"
                required
                placeholder="أدخل الكلمة بالإنجليزية"
                pattern="[a-zA-Z\s\d\p{P}]+"
                title="يجب أن تحتوي على أحرف إنجليزية ورموز وعلامات فقط"
              />
              <div class="invalid-feedback">
                يجب أن تحتوي الكلمة الإنجليزية على أحرف إنجليزية ورموز وعلامات
                فقط
              </div>
            </div>

            <!-- حالة الكلمة -->
            <div class="col-md-6 mb-3">
              <label for="is_active" class="form-label">
                <i class="fas fa-toggle-on"></i> حالة الكلمة *
              </label>
              <select
                class="form-control"
                id="is_active"
                name="is_active"
                required
              >
                <option value="1" {% if word.is_active %}selected{% endif %}>
                  نشطة
                </option>
                <option
                  value="0"
                  {%
                  if
                  not
                  word.is_active
                  %}selected{%
                  endif
                  %}
                >
                  غير نشطة
                </option>
              </select>
              <div class="form-text">الكلمات غير النشطة لن تظهر في التطبيق</div>
            </div>
          </div>

          <!-- حقول مرادفات لغة الفور -->
          <div class="row">
            <div class="col-md-12 mb-3">
              <label class="form-label">
                <i class="fas fa-language"></i> مرادفات فورية إضافية
              </label>
              <div id="furSynonymsContainer">
                <!-- سيتم إضافة حقول مرادفات لغة الفور هنا بواسطة JS -->
              </div>
              <button
                type="button"
                class="btn btn-info btn-sm mt-2"
                id="addFurSynonymBtn"
              >
                <i class="fas fa-plus"></i> إضافة مرادف فوري
              </button>
            </div>
          </div>

          <!-- حقول المرادفات الإنجليزية -->
          <div class="row">
            <div class="col-md-12 mb-3">
              <label class="form-label">
                <i class="fas fa-language"></i> مرادفات إنجليزية إضافية
              </label>
              <div id="englishSynonymsContainer">
                <!-- سيتم إضافة حقول المرادفات الإنجليزية هنا بواسطة JS -->
              </div>
              <button
                type="button"
                class="btn btn-info btn-sm mt-2"
                id="addEnglishSynonymBtn"
              >
                <i class="fas fa-plus"></i> إضافة مرادف إنجليزي
              </button>
            </div>
          </div>

          <!-- حقول المرادفات العربية -->
          <div class="row">
            <div class="col-md-12 mb-3">
              <label class="form-label">
                <i class="fas fa-font"></i> مرادفات عربية إضافية
              </label>
              <div id="arabicSynonymsContainer">
                <!-- سيتم إضافة حقول المرادفات العربية هنا بواسطة JS -->
              </div>
              <button
                type="button"
                class="btn btn-info btn-sm mt-2"
                id="addArabicSynonymBtn"
              >
                <i class="fas fa-plus"></i> إضافة مرادف عربي
              </button>
            </div>
          </div>

          <!-- الملفات الصوتية الحالية -->
          {% if word.fur_audio_url or word.english_audio_url %}
          <div class="row mb-3">
            <div class="col-md-12">
              <h6>
                <i class="fas fa-headphones"></i> الملفات الصوتية الحالية:
              </h6>
            </div>
            <div class="col-md-6">
              {% if word.fur_audio_url %}
              <div class="alert alert-info">
                <strong>ملف الفور الحالي:</strong><br />
                <audio controls class="mt-2" style="width: 100%">
                  <source src="https://www.yaatoy.com/admin/{{ word.fur_audio_url }}" type="audio/mpeg" />
                  متصفحك لا يدعم تشغيل الصوت
                </audio>
              </div>
              {% else %}
              <div class="alert alert-warning">
                <i class="fas fa-exclamation-triangle"></i> لا يوجد ملف صوتي
                للفور
              </div>
              {% endif %}
            </div>
            <div class="col-md-6">
              {% if word.english_audio_url %}
              <div class="alert alert-info">
                <strong>ملف الإنجليزية الحالي:</strong><br />
                <audio controls class="mt-2" style="width: 100%">
                  <source
                    src="{{ word.english_audio_url }}"
                    type="audio/mpeg"
                  />
                  متصفحك لا يدعم تشغيل الصوت
                </audio>
              </div>
              {% else %}
              <div class="alert alert-warning">
                <i class="fas fa-exclamation-triangle"></i> لا يوجد ملف صوتي
                للإنجليزية
              </div>
              {% endif %}
            </div>
          </div>
          {% endif %}

          <!-- رفع ملفات صوتية جديدة -->
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="fur_audio" class="form-label">
                <i class="fas fa-microphone me-1"></i>
                ملف صوتي جديد (فور)
              </label>
              <div class="input-group">
                <input
                  type="file"
                  class="form-control"
                  id="fur_audio"
                  name="fur_audio"
                  accept=".mp3,.wav,.ogg,.webm"
                  onchange="previewAudio(this, 'furAudioPreview')"
                />
                <button
                  type="button"
                  class="btn btn-outline-danger"
                  id="recordFurBtn"
                >
                  <i class="fas fa-microphone"></i> تسجيل
                </button>
              </div>
              <div class="form-text">
                الملفات المدعومة: MP3, WAV, OGG, WEBM أو اضغط تسجيل
              </div>

              <!-- منطقة التسجيل للفور -->
              <div
                id="furRecordingInterface"
                class="mt-2"
                style="display: none"
              >
                <div class="alert alert-info recording-status">
                  <i class="fas fa-info-circle"></i> اضغط على "بدء التسجيل"
                  للبدء
                </div>
                <div class="d-flex gap-2 mb-2">
                  <button
                    type="button"
                    class="btn btn-danger"
                    id="startFurRecording"
                  >
                    <i class="fas fa-play"></i> بدء التسجيل
                  </button>
                  <button
                    type="button"
                    class="btn btn-success d-none"
                    id="stopFurRecording"
                  >
                    <i class="fas fa-stop"></i> إيقاف التسجيل
                  </button>
                  <button
                    type="button"
                    class="btn btn-secondary"
                    id="cancelFurRecording"
                  >
                    <i class="fas fa-times"></i> إلغاء
                  </button>
                </div>
              </div>

              <!-- معاينة الصوت المسجل للفور -->
              <div id="fur_preview" class="d-none"></div>
            </div>


          </div>

          <!-- معاينة الملفات المرفوعة -->
          <div class="row" id="audioPreview" style="display: none">
            <div class="col-md-12">
              <h6>
                <i class="fas fa-headphones"></i> معاينة الملفات الصوتية
                الجديدة:
              </h6>
            </div>
            <div class="col-md-6">
              <div id="furAudioPreview"></div>
            </div>
          </div>

          <!-- أزرار التحكم -->
          <div class="d-flex justify-content-between">
            <a
              href="{{ url_for('admin.words_list') }}"
              class="btn btn-secondary"
            >
              <i class="fas fa-arrow-left me-1"></i>
              العودة للقائمة
            </a>
            <button type="submit" class="btn btn-primary">
              <i class="fas fa-save me-1"></i>
              حفظ التغييرات
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- معلومات إضافية -->
<div class="row mt-4">
  <div class="col-md-12">
    <div class="alert alert-info">
      <h6><i class="fas fa-info-circle"></i> ملاحظات مهمة:</h6>
      <ul class="mb-0">
        <li>الحقول المميزة بـ (*) مطلوبة</li>
        <li>رفع ملفات صوتية جديدة سيستبدل الملفات الحالية</li>
        <li>يمكن استخدام التسجيل المباشر أو رفع ملفات من الجهاز</li>
        <li>الملفات ستُحفظ باسم مبني على رقم الكلمة في قاعدة البيانات</li>
      </ul>
    </div>
  </div>
</div>

<script>
  // متغيرات التسجيل
  let furStream = null;
  let englishStream = null;
  let furMediaRecorder = null;
  let englishMediaRecorder = null;
  let furAudioChunks = [];
  let englishAudioChunks = [];
  let furRecordingTimer = null;
  let englishRecordingTimer = null;

  // إظهار واجهة التسجيل للفور
  document.getElementById('recordFurBtn').addEventListener('click', function() {
      const recordingInterface = document.getElementById('furRecordingInterface');
      if (recordingInterface.style.display === 'none') {
          recordingInterface.style.display = 'block';
          this.innerHTML = '<i class="fas fa-microphone"></i> إخفاء التسجيل';
          this.classList.remove('btn-outline-danger');
          this.classList.add('btn-outline-secondary');
      } else {
          recordingInterface.style.display = 'none';
          this.innerHTML = '<i class="fas fa-microphone"></i> تسجيل';
          this.classList.remove('btn-outline-secondary');
          this.classList.add('btn-outline-danger');
      }
  });



  // بدء التسجيل للفور
  document.getElementById('startFurRecording').addEventListener('click', async function() {
      try {
          furStream = await navigator.mediaDevices.getUserMedia({
              audio: {
                  sampleRate: 16000, // تقليل معدل العينة لضغط الملف
                  channelCount: 1,   // صوت أحادي القناة
                  echoCancellation: true,
                  noiseSuppression: true
              }
          });

          const options = {
              mimeType: 'audio/webm;codecs=opus', // استخدام Opus للضغط الأفضل
              audioBitsPerSecond: 32000 // معدل بت منخفض للضغط
          };

          furMediaRecorder = new MediaRecorder(furStream, options);
          furAudioChunks = [];

          furMediaRecorder.addEventListener('dataavailable', event => {
              if (event.data.size > 0) furAudioChunks.push(event.data);
          });

          furMediaRecorder.addEventListener('stop', () => {
              if (furAudioChunks.length > 0) {
                  const audioBlob = new Blob(furAudioChunks, { type: 'audio/webm;codecs=opus' });

                  // إنشاء ملف من البيانات المسجلة
                  const fileName = `fur_recording_${Date.now()}.webm`;
                  const file = new File([audioBlob], fileName, { type: 'audio/webm;codecs=opus' });

                  // إنشاء قائمة ملفات جديدة وإضافة الملف المسجل
                  const dataTransfer = new DataTransfer();
                  dataTransfer.items.add(file);
                  document.getElementById('fur_audio').files = dataTransfer.files;

                  // عرض معاينة الصوت مع حجم الملف
                  const audioUrl = URL.createObjectURL(audioBlob);
                  const fileSizeKB = (audioBlob.size / 1024).toFixed(2);
                  document.getElementById('fur_preview').innerHTML = `
                      <div class="mt-2">
                          <small class="text-success">تم التسجيل: ${fileName} (${fileSizeKB} KB)</small><br>
                          <audio controls class="mt-1" style="width: 100%; max-width: 300px;">
                              <source src="${audioUrl}" type="audio/webm;codecs=opus">
                              متصفحك لا يدعم تشغيل الصوت
                          </audio>
                      </div>
                  `;
                  document.getElementById('fur_preview').classList.remove('d-none');
              }

              // إيقاف التسجيل وتحديث واجهة المستخدم
              document.getElementById('stopFurRecording').classList.add('d-none');
              document.getElementById('startFurRecording').classList.remove('d-none');
              document.querySelector('#furRecordingInterface .recording-status').innerHTML =
                  '<i class="fas fa-check-circle"></i> تم التسجيل بنجاح';
              document.querySelector('#furRecordingInterface .recording-status').classList.remove('alert-danger');
              document.querySelector('#furRecordingInterface .recording-status').classList.add('alert-success');

              // إيقاف المؤقت
              if (furRecordingTimer) {
                  clearTimeout(furRecordingTimer);
                  furRecordingTimer = null;
              }
          });

          furMediaRecorder.start();
          this.classList.add('d-none');
          document.getElementById('stopFurRecording').classList.remove('d-none');
          document.querySelector('#furRecordingInterface .recording-status').innerHTML =
              '<i class="fas fa-microphone"></i> جاري التسجيل... (حد أقصى 10 ثوانٍ)';
          document.querySelector('#furRecordingInterface .recording-status').classList.remove('alert-info');
          document.querySelector('#furRecordingInterface .recording-status').classList.add('alert-danger');

          // بدء مؤقت الـ 10 ثوانٍ
          furRecordingTimer = setTimeout(() => {
              if (furMediaRecorder && furMediaRecorder.state === 'recording') {
                  furMediaRecorder.stop();
                  furStream.getTracks().forEach(track => track.stop());
                  alert('تم إيقاف التسجيل تلقائياً بعد 10 ثوانٍ');
              }
          }, 10000);

      } catch (err) {
          console.error('خطأ في الوصول إلى الميكروفون:', err);
          alert('لا يمكن الوصول إلى الميكروفون. يرجى التأكد من السماح بالوصول إلى الميكروفون.');
      }
  });

  // إيقاف التسجيل للفور
  document.getElementById('stopFurRecording').addEventListener('click', function() {
      if (furMediaRecorder && furMediaRecorder.state === 'recording') {
          furMediaRecorder.stop();
          furStream.getTracks().forEach(track => track.stop());
      }

      // إيقاف المؤقت
      if (furRecordingTimer) {
          clearTimeout(furRecordingTimer);
          furRecordingTimer = null;
      }
  });

  // إلغاء التسجيل للفور
  document.getElementById('cancelFurRecording').addEventListener('click', function() {
      if (furMediaRecorder && furMediaRecorder.state === 'recording') {
          furMediaRecorder.stop();
          furStream.getTracks().forEach(track => track.stop());
      }

      // إيقاف المؤقت
      if (furRecordingTimer) {
          clearTimeout(furRecordingTimer);
          furRecordingTimer = null;
      }

      // إعادة تعيين واجهة المستخدم
      document.getElementById('stopFurRecording').classList.add('d-none');
      document.getElementById('startFurRecording').classList.remove('d-none');
      document.querySelector('#furRecordingInterface .recording-status').innerHTML =
          '<i class="fas fa-info-circle"></i> اضغط على "بدء التسجيل" للبدء (حد أقصى 10 ثوانٍ)';
      document.querySelector('#furRecordingInterface .recording-status').classList.remove('alert-danger', 'alert-success');
      document.querySelector('#furRecordingInterface .recording-status').classList.add('alert-info');
      document.getElementById('fur_preview').classList.add('d-none');
      document.getElementById('fur_audio').value = '';
  });



  // دالة معاينة الملفات المرفوعة
  function previewAudio(input, previewId) {
    const file = input.files[0];
    const previewDiv = document.getElementById(previewId);
    const audioPreview = document.getElementById('audioPreview');

    if (file) {
      const url = URL.createObjectURL(file);
      const label = 'ملف الفور';

      previewDiv.innerHTML = `
        <div class="mt-2">
          <small class="text-muted">${label}: ${file.name}</small><br>
          <audio controls class="mt-1" style="width: 100%; max-width: 300px;">
            <source src="${url}" type="${file.type}">
            متصفحك لا يدعم تشغيل الصوت
          </audio>
        </div>
      `;

      audioPreview.style.display = 'block';
    } else {
      previewDiv.innerHTML = '';
      // إخفاء قسم المعاينة إذا لم تكن هناك ملفات
      if (!document.getElementById('furAudioPreview').innerHTML) {
        audioPreview.style.display = 'none';
      }
    }
  }

  // تحسين تجربة المستخدم
  document.addEventListener('DOMContentLoaded', function() {
      // التركيز على أول حقل إدخال
      document.getElementById('fur_word').focus();

      // إضافة التحقق من صحة الإدخال
      const arabicInput = document.getElementById('arabic_word');
      const englishInput = document.getElementById('english_word');

      // التحقق من الأحرف العربية
      arabicInput.addEventListener('input', function(e) {
      // تعديل النمط ليسمح بجميع الرموز الخاصة
      const arabicPattern = /^[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF\s\d.,;:"'\[\]{}()\-_=+*&^%$#@!~`<>?\/\\|\u064B-\u065F\u0670]*$/;
      if (!arabicPattern.test(e.target.value)) {
          e.target.setCustomValidity("يجب أن تحتوي الكلمة العربية على أحرف عربية فقط");
          e.target.classList.add("is-invalid"); // إضافة فئة is-invalid لإظهار رسالة الخطأ
      } else {
          e.target.setCustomValidity("");
          e.target.classList.remove("is-invalid"); // إزالة فئة is-invalid عند صحة الإدخال
      }
  });

  // التحقق من الأحرف الإنجليزية
  englishInput.addEventListener('input', function(e) {
      // تعديل النمط ليسمح بجميع الرموز الخاصة
      const englishPattern = /^[a-zA-Z\s\d.,;:"'\[\]{}()\-_=+*&^%$#@!~`<>?\/\\|]*$/;
      if (!englishPattern.test(e.target.value)) {
          e.target.setCustomValidity("يجب أن تحتوي الكلمة الإنجليزية على أحرف إنجليزية فقط");
          e.target.classList.add("is-invalid"); // إضافة فئة is-invalid لإظهار رسالة الخطأ
      } else {
          e.target.setCustomValidity("");
          e.target.classList.remove("is-invalid"); // إزالة فئة is-invalid عند صحة الإدخال
      }
  });

      // تعطيل زر الإرسال عند تقديم النموذج لمنع الإرسال المتكرر
      document.getElementById('editWordForm').addEventListener('submit', function() {
          const submitBtn = this.querySelector('button[type="submit"]');
          submitBtn.disabled = true;
          submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري الحفظ...';
      });
  });

  document.addEventListener('keydown', function(event) {
      // التحقق من الضغط على زر المسطرة (keyCode 32) أثناء التسجيل
      if (event.keyCode === 32) {
          // إيقاف التسجيل النشط
          if (furMediaRecorder && furMediaRecorder.state === 'recording') {
              document.getElementById('stopFurRecording').click();
              event.preventDefault();
          }
      }
  });

  // إضافة حقول المرادفات الإنجليزية والعربية ديناميكياً
  const englishSynonymsContainer = document.getElementById('englishSynonymsContainer');
  const addEnglishSynonymBtn = document.getElementById('addEnglishSynonymBtn');

  function addEnglishSynonymField(synonymText = '', synonymId = '') {
    const div = document.createElement('div');
    div.classList.add('input-group', 'mb-2', 'english-synonym-item');
    div.innerHTML = `
      <input type="hidden" name="english_synonym_id[]" value="${synonymId}">
      <input type="text" class="form-control" name="english_synonym_text[]" placeholder="أدخل مرادف إنجليزي" value="${synonymText}">
      <button type="button" class="btn btn-danger remove-synonym-btn"><i class="fas fa-minus"></i></button>
    `;
    englishSynonymsContainer.appendChild(div);

    div.querySelector('.remove-synonym-btn').addEventListener('click', () => {
      div.remove();
    });
  }

  addEnglishSynonymBtn.addEventListener('click', () => addEnglishSynonymField());

  // إضافة المرادفات الإنجليزية الموجودة
  {% for synonym in word.english_synonyms %}
  addEnglishSynonymField("{{ synonym.synonym_text }}", "{{ synonym.id }}");
  {% endfor %}

  const arabicSynonymsContainer = document.getElementById('arabicSynonymsContainer');
  const addArabicSynonymBtn = document.getElementById('addArabicSynonymBtn');

  function addArabicSynonymField(synonymText = '', synonymId = '') {
    const div = document.createElement('div');
    div.classList.add('input-group', 'mb-2', 'arabic-synonym-item');
    div.innerHTML = `
      <input type="hidden" name="arabic_synonym_id[]" value="${synonymId}">
      <input type="text" class="form-control" name="arabic_synonym_text[]" placeholder="أدخل مرادف عربي" value="${synonymText}">
      <button type="button" class="btn btn-danger remove-synonym-btn"><i class="fas fa-minus"></i></button>
    `;
    arabicSynonymsContainer.appendChild(div);

    div.querySelector('.remove-synonym-btn').addEventListener('click', () => {
      div.remove();
    });
  }

  addArabicSynonymBtn.addEventListener('click', () => addArabicSynonymField());

  // إضافة المرادفات العربية الموجودة
  {% for synonym in word.arabic_synonyms %}
  addArabicSynonymField("{{ synonym.synonym_text }}", "{{ synonym.id }}");
  {% endfor %}

  // إضافة حقول مرادفات لغة الفور ديناميكياً
  const furSynonymsContainer = document.getElementById('furSynonymsContainer');
  const addFurSynonymBtn = document.getElementById('addFurSynonymBtn');
  let furSynonymCounter = 0;

  function addFurSynonymField(synonymText = '', synonymId = '', audioUrl = '') {
    const currentIndex = furSynonymCounter;
    const div = document.createElement('div');
    div.classList.add('mb-3', 'fur-synonym-item');
    div.innerHTML = `
      <input type="hidden" name="fur_synonym_id[]" value="${synonymId}">
      <div class="input-group mb-2">
        <input type="text" class="form-control" name="fur_synonym_text[]" placeholder="أدخل مرادف فوري" value="${synonymText}">
        <button type="button" class="btn btn-danger remove-synonym-btn"><i class="fas fa-minus"></i></button>
      </div>
      <div class="input-group">
        <input type="file" class="form-control" name="fur_synonym_audio_${currentIndex}" accept=".mp3,.wav,.ogg">
        <button type="button" class="btn btn-outline-danger record-fur-synonym-btn" data-index="${currentIndex}">
          <i class="fas fa-microphone"></i> تسجيل
        </button>
      </div>
      <div class="form-text">الملفات المدعومة: MP3, WAV, OGG أو اضغط تسجيل</div>
      <div class="fur-synonym-recording-area mt-2" id="furSynonymRecordingArea_${currentIndex}" style="display: none">
        <div class="d-flex align-items-center gap-2">
          <button type="button" class="btn btn-sm btn-success start-fur-synonym-record" data-index="${currentIndex}">
            <i class="fas fa-play"></i> بدء التسجيل
          </button>
          <button type="button" class="btn btn-sm btn-danger stop-fur-synonym-record" data-index="${currentIndex}" disabled>
            <i class="fas fa-stop"></i> إيقاف التسجيل
          </button>
          <button type="button" class="btn btn-sm btn-secondary cancel-fur-synonym-record" data-index="${currentIndex}">
            <i class="fas fa-times"></i> إلغاء
          </button>
          <span class="fur-synonym-recording-status" id="furSynonymRecordingStatus_${currentIndex}"></span>
        </div>
        <div class="fur-synonym-recorded-audio mt-2" id="furSynonymRecordedAudio_${currentIndex}"></div>
      </div>
      ${audioUrl ? `<div class="mt-2"><strong>الملف الصوتي الحالي:</strong><br><audio controls style="width: 100%;"><source src="${audioUrl}" type="audio/mpeg"></audio></div>` : ''}
    `;
    furSynonymsContainer.appendChild(div);

    // إضافة مستمعي الأحداث
    div.querySelector('.remove-synonym-btn').addEventListener('click', () => {
      div.remove();
    });

    // مستمع حدث زر التسجيل
    const recordBtn = div.querySelector('.record-fur-synonym-btn');
    const recordingArea = div.querySelector('.fur-synonym-recording-area');
    const startBtn = div.querySelector('.start-fur-synonym-record');
    const stopBtn = div.querySelector('.stop-fur-synonym-record');
    const cancelBtn = div.querySelector('.cancel-fur-synonym-record');
    const statusSpan = div.querySelector('.fur-synonym-recording-status');
    const recordedAudioDiv = div.querySelector('.fur-synonym-recorded-audio');

    let synonymRecorder = null;
    let synonymAudioChunks = [];

    recordBtn.addEventListener('click', () => {
      recordingArea.style.display = 'block';
      recordBtn.style.display = 'none';
    });

    startBtn.addEventListener('click', async () => {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        synonymRecorder = new MediaRecorder(stream);
        synonymAudioChunks = [];

        synonymRecorder.ondataavailable = (event) => {
          synonymAudioChunks.push(event.data);
        };

        synonymRecorder.onstop = () => {
          const audioBlob = new Blob(synonymAudioChunks, { type: 'audio/wav' });
          const audioUrl = URL.createObjectURL(audioBlob);
          
          // إنشاء ملف وإضافته للنموذج
          const file = new File([audioBlob], `fur_synonym_${currentIndex}_recording.wav`, {
            type: 'audio/wav',
            lastModified: Date.now(),
          });
          
          const fileInput = div.querySelector(`input[name="fur_synonym_audio_${currentIndex}"]`);
          const dataTransfer = new DataTransfer();
          dataTransfer.items.add(file);
          fileInput.files = dataTransfer.files;
          
          // عرض معاينة التسجيل
          recordedAudioDiv.innerHTML = `
            <div class="alert alert-success">
              <i class="fas fa-check-circle"></i> تم التسجيل بنجاح
              <audio controls class="d-block mt-2" style="width: 100%;">
                <source src="${audioUrl}" type="audio/wav">
              </audio>
            </div>
          `;
          
          stream.getTracks().forEach(track => track.stop());
        };

        synonymRecorder.start();
        startBtn.disabled = true;
        stopBtn.disabled = false;
        statusSpan.textContent = 'جاري التسجيل... (10 ثوانٍ كحد أقصى)';
        statusSpan.className = 'text-danger';
        
        // إيقاف التسجيل تلقائياً بعد 10 ثوانٍ
        setTimeout(() => {
          if (synonymRecorder && synonymRecorder.state !== 'inactive') {
            synonymRecorder.stop();
            startBtn.disabled = false;
            stopBtn.disabled = true;
            statusSpan.textContent = 'تم إيقاف التسجيل تلقائياً بعد 10 ثوانٍ';
            statusSpan.className = 'text-warning';
          }
        }, 10000);
      } catch (error) {
        alert('لا يمكن الوصول إلى الميكروفون. تأكد من السماح بالوصول.');
      }
    });

    stopBtn.addEventListener('click', () => {
      if (synonymRecorder && synonymRecorder.state !== 'inactive') {
        synonymRecorder.stop();
        startBtn.disabled = false;
        stopBtn.disabled = true;
        statusSpan.textContent = 'تم التسجيل والاختيار تلقائياً';
        statusSpan.className = 'text-success';
      }
    });

    cancelBtn.addEventListener('click', () => {
      if (synonymRecorder && synonymRecorder.state !== 'inactive') {
        synonymRecorder.stop();
      }
      recordingArea.style.display = 'none';
      recordBtn.style.display = 'inline-block';
      recordedAudioDiv.innerHTML = '';
      statusSpan.textContent = '';
      startBtn.disabled = false;
      stopBtn.disabled = true;
    });

    furSynonymCounter++;
  }

  addFurSynonymBtn.addEventListener('click', () => addFurSynonymField());

  // إضافة مرادفات لغة الفور الموجودة
  {% for synonym in word.fur_synonyms %}
  addFurSynonymField("{{ synonym.synonym_text }}", "{{ synonym.id }}", "{{ synonym.audio_url or '' }}");
  {% endfor %}
</script>
{% endblock %}