{% extends "base.html" %} {% block title %}قائمة الكلمات - لوحة التحكم{%
endblock %} {% block content %}
<style>
  /* حل مشكلة modal backdrop */
  .modal {
    z-index: 1055 !important;
  }

  .modal-backdrop {
    z-index: 1050 !important;
  }

  .modal-dialog {
    position: relative;
    z-index: 1057 !important;
  }

  .modal-content {
    position: relative;
    z-index: 1058 !important;
  }
</style>

<div class="row">
  <div class="col-md-12">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h1>قائمة الكلمات</h1>
      <a href="{{ url_for('admin.add_word') }}" class="btn btn-primary">
        <i class="fas fa-plus"></i> إضافة كلمة جديدة
      </a>
    </div>
  </div>
</div>

<!-- نموذج البحث -->
<div class="row mb-4">
  <div class="col-md-6">
    <form method="GET" class="d-flex">
      <input
        type="text"
        name="search"
        class="form-control me-2"
        placeholder="البحث في الكلمات..."
        value="{{ search or '' }}"
      />
      <button type="submit" class="btn btn-outline-primary">
        <i class="fas fa-search"></i> بحث
      </button>
      {% if search %}
      <a
        href="{{ url_for('admin.words_list') }}"
        class="btn btn-outline-secondary ms-2"
      >
        <i class="fas fa-times"></i> مسح
      </a>
      {% endif %}
    </form>
  </div>
  <div class="col-md-6 text-end">
    <span class="text-muted"> إجمالي النتائج: {{ words.total }} كلمة </span>
  </div>
</div>

<!-- جدول الكلمات -->
<div class="row">
  <div class="col-md-12">
    <div class="card">
      <div class="card-body">
        {% if words.items %}
        <div class="table-responsive">
          <table class="table table-hover">
            <thead>
              <tr>
                <th>الكلمة بالفور</th>
                <th>الكلمة بالعربية</th>
                <th>الكلمة بالإنجليزية</th>
                <th>مرادفات فورية</th>
                <th>مرادفات إنجليزية</th>
                <th>مرادفات عربية</th>
                <th>الحالة</th>
                <th>تاريخ الإضافة</th>
                <th>الإجراءات</th>
              </tr>
            </thead>
            <tbody>
              {% for word in words.items %}
              <tr>
                <td>
                  <strong>{{ word.fur_word }}</strong>
                  {% if word.fur_audio_url %}
                  <br />
                  <audio
                    controls
                    class="mt-1"
                    style="width: 150px; height: 30px"
                  >
                    <source
                      src="https://www.yaatoy.com/admin/{{ word.fur_audio_url }}"
                      type="audio/mpeg"
                    />
                    متصفحك لا يدعم تشغيل الصوت
                  </audio>
                  {% endif %}
                </td>
                <td>{{ word.arabic_word }}</td>
                <td>
                  {{ word.english_word }}
                  <button 
                    onclick="speakEnglish('{{ word.english_word }}')"
                    class="btn btn-sm btn-outline-primary ms-2"
                    title="نطق الكلمة الإنجليزية"
                  >
                    🔊
                  </button>
                  {% if word.english_audio_url %}
                  <br />
                  <audio
                    controls
                    class="mt-1"
                    style="width: 150px; height: 30px"
                  >
                    <source
                      src="{{ word.english_audio_url }}"
                      type="audio/mpeg"
                    />
                    متصفحك لا يدعم تشغيل الصوت
                  </audio>
                  {% endif %}
                </td>
                <td>
                  {% if word.fur_synonyms %} {% for synonym in word.fur_synonyms
                  %} {{ loop.index }}. {{ synonym.synonym_text }} {% if
                  synonym.audio_url %}
                  <audio
                    controls
                    class="mt-1"
                    style="width: 150px; height: 30px"
                  >
                    <source
                      src="https://www.yaatoy.com/admin/{{ synonym.audio_url }}"
                      type="audio/mpeg"
                    />
                    متصفحك لا يدعم تشغيل الصوت
                  </audio>
                  {% endif %} {% if not loop.last %}<br />{% endif %} {% endfor
                  %} {% else %} لا يوجد {% endif %}
                </td>
                <td>
                  {% if word.english_synonyms %} {% for synonym in
                  word.english_synonyms %} {{ loop.index }}. {{
                  synonym.synonym_text }}
                  <button 
                    onclick="speakEnglish('{{ synonym.synonym_text }}')"
                    class="btn btn-sm btn-outline-primary ms-1"
                    title="نطق المرادف الإنجليزي"
                  >
                    🔊
                  </button>
                  {% if synonym.audio_url %}
                  <br />
                  <audio
                    controls
                    class="mt-1"
                    style="width: 100px; height: 25px"
                  >
                    <source src="{{ synonym.audio_url }}" type="audio/mpeg" />
                    متصفحك لا يدعم تشغيل الصوت
                  </audio>
                  {% endif %} {% if not loop.last %}<br />{% endif %} {% endfor
                  %} {% else %} لا يوجد {% endif %}
                </td>
                <td>
                  {% if word.arabic_synonyms %} {% for synonym in
                  word.arabic_synonyms %} {{ loop.index }}. {{
                  synonym.synonym_text }} {% if not loop.last %}<br />{% endif
                  %} {% endfor %} {% else %} لا يوجد {% endif %}
                </td>
                <td>
                  {% if word.is_active %}
                  <span class="badge bg-success">نشط</span>
                  {% else %}
                  <span class="badge bg-danger">غير نشط</span>
                  {% endif %}
                </td>
                <td>
                  <small class="text-muted">
                    {{ word.created_at.strftime('%Y-%m-%d %H:%M') }}
                  </small>
                </td>
                <td>
                  <div class="btn-group btn-group-sm" role="group">
                    <a
                      href="{{ url_for('admin.edit_word', word_id=word.id) }}"
                      class="btn btn-outline-primary"
                      title="تعديل"
                    >
                      <i class="fas fa-edit"></i>
                    </a>
                    <button
                      type="button"
                      class="btn btn-outline-danger"
                      title="حذف"
                      onclick="confirmDelete({{ word.id }}, '{{ word.fur_word }}')"
                    >
                      <i class="fas fa-trash"></i>
                    </button>
                  </div>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>

        <!-- التنقل بين الصفحات -->
        {% if words.pages > 1 %}
        <nav aria-label="تنقل الصفحات" class="mt-4">
          <ul class="pagination justify-content-center">
            {% if words.has_prev %}
            <li class="page-item">
              <a
                class="page-link"
                href="{{ url_for('admin.words_list', page=words.prev_num, search=search) }}"
              >
                السابق
              </a>
            </li>
            {% endif %} {% for page_num in words.iter_pages() %} {% if page_num
            %} {% if page_num != words.page %}
            <li class="page-item">
              <a
                class="page-link"
                href="{{ url_for('admin.words_list', page=page_num, search=search) }}"
              >
                {{ page_num }}
              </a>
            </li>
            {% else %}
            <li class="page-item active">
              <span class="page-link">{{ page_num }}</span>
            </li>
            {% endif %} {% else %}
            <li class="page-item disabled">
              <span class="page-link">…</span>
            </li>
            {% endif %} {% endfor %} {% if words.has_next %}
            <li class="page-item">
              <a
                class="page-link"
                href="{{ url_for('admin.words_list', page=words.next_num, search=search) }}"
              >
                التالي
              </a>
            </li>
            {% endif %}
          </ul>
        </nav>
        {% endif %} {% else %}
        <div class="text-center py-5">
          <i class="fas fa-search fa-3x text-muted mb-3"></i>
          <h4 class="text-muted">لا توجد كلمات</h4>
          {% if search %}
          <p class="text-muted">
            لم يتم العثور على نتائج للبحث: "{{ search }}"
          </p>
          <a
            href="{{ url_for('admin.words_list') }}"
            class="btn btn-outline-primary"
          >
            عرض جميع الكلمات
          </a>
          {% else %}
          <p class="text-muted">ابدأ بإضافة كلمات جديدة إلى القاموس</p>
          <a href="{{ url_for('admin.add_word') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> إضافة أول كلمة
          </a>
          {% endif %}
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<script>
  function confirmDelete(wordId, wordName) {
    document.getElementById("wordToDelete").textContent = wordName;
    document.getElementById(
      "deleteForm"
    ).action = `/admin/admin/words/delete/${wordId}`;

    // إنشاء النافذة مع خيارات إضافية
    const modal = new bootstrap.Modal(document.getElementById("deleteModal"), {
      backdrop: "static", // منع إغلاق النافذة بالنقر خارجها
      keyboard: false, // منع إغلاق النافذة بمفتاح Escape
    });

    modal.show();
  }

  // وظيفة النطق التلقائي للكلمات الإنجليزية
  function speakEnglish(text) {
    if ('speechSynthesis' in window) {
      // إيقاف أي نطق سابق
      speechSynthesis.cancel();
      
      // إنشاء utterance جديد
      const utterance = new SpeechSynthesisUtterance(text);
      
      // تعيين اللغة الإنجليزية
      utterance.lang = 'en-US';
      
      // تعيين سرعة النطق
      utterance.rate = 0.8;
      
      // تعيين درجة الصوت
      utterance.pitch = 1;
      
      // تعيين مستوى الصوت
      utterance.volume = 1;
      
      // بدء النطق
      speechSynthesis.speak(utterance);
    } else {
      alert('متصفحك لا يدعم النطق التلقائي');
    }
  }
</script>
{% endblock %}