{% extends 'base.html' %}

{% block title %}إدارة المناطق - ICIS{% endblock %}

{% block content %}
<div class="card">
  <div class="card-header">
    <h3 class="card-title">إدارة المناطق</h3>
  </div>
  <div class="card-body">
    <!-- فلتر المحلية -->
    <div class="row mb-3">
      <div class="col-md-4">
        <label for="filterLocality" class="form-label">تصفية حسب المحلية:</label>
        <select id="filterLocality" class="form-select select2-search">
          <option value="all">جميع المحليات</option>
        </select>
      </div>
    </div>

    <!-- نموذج إضافة منطقة -->
    <form id="areaForm" class="row g-3 mb-4">
      <div class="col-md-3">
        <input type="text" class="form-control" id="areaName" placeholder="اسم المنطقة" required>
      </div>
      <div class="col-md-3">
        <input type="text" class="form-control" id="areaCode" placeholder="الكود" required>
      </div>
      <div class="col-md-3">
        <div class="input-group">
          <select id="areaLocality" class="form-select select2-search" required>
            <option value="">اختر المحلية</option>
          </select>
          <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addLocalityModal">
            <i class="fas fa-plus"></i>
          </button>
        </div>
      </div>
      <div class="col-md-3">
        <button type="submit" class="btn btn-primary" id="submitAreaBtn">إضافة منطقة</button>
        <button type="button" class="btn btn-secondary" id="cancelAreaEdit" style="display:none;">إلغاء</button>
      </div>
    </form>

    <!-- جدول المناطق باستخدام DataTables -->
    <div class="table-responsive">
      <table id="areasTable" class="table table-bordered table-striped" style="width:100%">
        <thead>
          <tr>
            <th>ID</th>
            <th>الاسم</th>
            <th>الكود</th>
            <th>المحلية</th>
            <th>الولاية</th>
            <th>تاريخ الإنشاء</th>
            <th>الإجراءات</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
</div>

<!-- Modal لإضافة محلية جديدة -->
<div class="modal fade" id="addLocalityModal" tabindex="-1" aria-labelledby="addLocalityModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addLocalityModalLabel">إضافة محلية جديدة</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="addLocalityForm">
          <div class="mb-3">
            <label for="newLocalityName" class="form-label">اسم المحلية</label>
            <input type="text" class="form-control" id="newLocalityName" required>
          </div>
          <div class="mb-3">
            <label for="newLocalityCode" class="form-label">الكود</label>
            <input type="text" class="form-control" id="newLocalityCode" required>
          </div>
          <div class="mb-3">
            <label for="newLocalityState" class="form-label">الولاية</label>
            <select id="newLocalityState" class="form-select" required>
              <option value="">اختر الولاية</option>
            </select>
          </div>
          <div class="alert alert-danger d-none" id="localityModalError"></div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
        <button type="button" class="btn btn-primary" id="saveLocalityBtn">حفظ</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
     function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
const csrftoken = getCookie('csrftoken');
  // عناصر الصفحة
  const areaForm = document.getElementById('areaForm');
  const areaNameInput = document.getElementById('areaName');
  const areaCodeInput = document.getElementById('areaCode');
  const areaLocalitySelect = document.getElementById('areaLocality');
  const submitAreaBtn = document.getElementById('submitAreaBtn');
  const cancelAreaEditBtn = document.getElementById('cancelAreaEdit');
  const filterLocalitySelect = document.getElementById('filterLocality');

  let editingAreaId = null;

  // دالة ملء قائمة المحليات في الفلتر وفي نموذج الإضافة
  async function populateLocalitySelects() {
    try {
      const response = await fetch('http://127.0.0.1:8000/api/localities/');
      const localities = await response.json();

      // فلتر (بخيار "all")
      filterLocalitySelect.innerHTML = '<option value="all">جميع المحليات</option>';
      // قائمة الإضافة (بدون placeholder)
      areaLocalitySelect.innerHTML = '<option value="">اختر المحلية</option>';

      localities.forEach(loc => {
        // للفلتر
        const optFilter = document.createElement('option');
        optFilter.value = loc.id;
        optFilter.textContent = `${loc.name} (${loc.state_name})`;
        filterLocalitySelect.appendChild(optFilter);

        // للإضافة
        const optAdd = document.createElement('option');
        optAdd.value = loc.id;
        optAdd.textContent = `${loc.name} (${loc.state_name})`;
        areaLocalitySelect.appendChild(optAdd);
      });

      // إعادة تهيئة Select2
      if (typeof $ !== 'undefined' && $.fn.select2) {
        $('#filterLocality, #areaLocality').each(function() {
          if ($(this).hasClass('select2-hidden-accessible')) {
            $(this).select2('destroy');
          }
        });

        $('#filterLocality').select2({
          theme: 'bootstrap-5',
          language: 'ar',
          dir: 'rtl',
          width: '100%',
          allowClear: true
        });

        $('#areaLocality').select2({
          theme: 'bootstrap-5',
          language: 'ar',
          dir: 'rtl',
          width: '100%',
          placeholder: 'اختر المحلية',
          allowClear: true
        });
      }

    } catch (error) {
      console.error('خطأ في جلب المحليات:', error);
    }
  }

  // دوال CRUD للمناطق
  window.editArea = async function(id) {
    try {
      const response = await fetch(`http://127.0.0.1:8000/api/areas/${id}/`);
      if (!response.ok) throw new Error('لا يمكن جلب البيانات');
      const area = await response.json();
      areaNameInput.value = area.name;
      areaCodeInput.value = area.code;
      $('#areaLocality').val(area.locality).trigger('change');
      editingAreaId = id;
      submitAreaBtn.textContent = 'تحديث منطقة';
      cancelAreaEditBtn.style.display = 'inline-block';
    } catch (error) {
      alert('خطأ في جلب بيانات المنطقة: ' + error.message);
    }
  };

  window.deleteArea = async function(id) {
    if (!confirm('هل أنت متأكد من الحذف؟')) return;
    try {
      const response = await fetch(`http://127.0.0.1:8000/api/areas/${id}/`, {
        method: 'DELETE'
      });
      if (!response.ok) throw new Error('فشل في الحذف');
      $('#areasTable').DataTable().ajax.reload();
    } catch (error) {
      alert('خطأ في الحذف: ' + error.message);
    }
  };

  cancelAreaEditBtn.addEventListener('click', () => {
    areaNameInput.value = '';
    areaCodeInput.value = '';
    $('#areaLocality').val('').trigger('change');
    editingAreaId = null;
    submitAreaBtn.textContent = 'إضافة منطقة';
    cancelAreaEditBtn.style.display = 'none';
  });

  areaForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    const name = areaNameInput.value.trim();
    const code = areaCodeInput.value.trim();
    const localityId = $('#areaLocality').val();

    if (!name || !code || !localityId) {
      alert('الرجاء إدخال جميع الحقول واختيار المحلية');
      return;
    }

    try {
      if (editingAreaId) {
        await fetch(`http://127.0.0.1:8000/api/areas/${editingAreaId}/`, {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrftoken },
          body: JSON.stringify({ name, code, locality: localityId })
        });
      } else {
        await fetch('http://127.0.0.1:8000/api/areas/', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrftoken },
          body: JSON.stringify({ name, code, locality: localityId })
        });
      }
      // إعادة تعيين النموذج
      areaNameInput.value = '';
      areaCodeInput.value = '';
      $('#areaLocality').val('').trigger('change');
      editingAreaId = null;
      submitAreaBtn.textContent = 'إضافة منطقة';
      cancelAreaEditBtn.style.display = 'none';
      $('#areasTable').DataTable().ajax.reload();
    } catch (error) {
      alert('خطأ: ' + error.message);
    }
  });

  // معالجة إضافة محلية جديدة من المودال
  document.getElementById('saveLocalityBtn').addEventListener('click', async function() {
    const name = document.getElementById('newLocalityName').value.trim();
    const code = document.getElementById('newLocalityCode').value.trim();
    const stateId = document.getElementById('newLocalityState').value;
    const errorDiv = document.getElementById('localityModalError');

    if (!name || !code || !stateId) {
      errorDiv.textContent = 'الرجاء إدخال جميع الحقول واختيار الولاية';
      errorDiv.classList.remove('d-none');
      return;
    }

    try {
      const response = await fetch('http://127.0.0.1:8000/api/localities/', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrftoken },
        body: JSON.stringify({ name, code, state: stateId })
      });

      if (!response.ok) {
        let errorMsg = 'فشل في إضافة المحلية';
        try {
          const errData = await response.json();
          if (errData && typeof errData === 'object') {
            errorMsg = Object.values(errData).flat().join(', ');
          } else if (typeof errData === 'string') {
            errorMsg = errData;
          }
        } catch (e) {
          const text = await response.text();
          errorMsg = text || errorMsg;
        }
        throw new Error(errorMsg);
      }

      const newLocality = await response.json();

      // إضافة الخيار الجديد إلى القائمتين (فلتر وإضافة)
      // الفلتر
      const optFilter = document.createElement('option');
      optFilter.value = newLocality.id;
      optFilter.textContent = `${newLocality.name} (${newLocality.state_name})`;
      filterLocalitySelect.appendChild(optFilter);

      // قائمة الإضافة
      const optAdd = document.createElement('option');
      optAdd.value = newLocality.id;
      optAdd.textContent = `${newLocality.name} (${newLocality.state_name})`;
      areaLocalitySelect.appendChild(optAdd);

      // إعادة تهيئة Select2 للقائمتين
      if (typeof $ !== 'undefined' && $.fn.select2) {
        $('#filterLocality').select2('destroy');
        $('#areaLocality').select2('destroy');

        $('#filterLocality').select2({
          theme: 'bootstrap-5',
          language: 'ar',
          dir: 'rtl',
          width: '100%',
          allowClear: true
        });
        $('#areaLocality').select2({
          theme: 'bootstrap-5',
          language: 'ar',
          dir: 'rtl',
          width: '100%',
          placeholder: 'اختر المحلية',
          allowClear: true
        });
      }

      // اختيار المحلية الجديدة في قائمة الإضافة
      $('#areaLocality').val(newLocality.id).trigger('change');

      // إغلاق المودال وتنظيف الحقول
      const modal = bootstrap.Modal.getInstance(document.getElementById('addLocalityModal'));
      modal.hide();
      document.getElementById('newLocalityName').value = '';
      document.getElementById('newLocalityCode').value = '';
      document.getElementById('newLocalityState').value = '';
      errorDiv.classList.add('d-none');

    } catch (error) {
      errorDiv.textContent = error.message;
      errorDiv.classList.remove('d-none');
    }
  });

  // ملء قائمة الولايات في المودال (عند فتح المودال)
  async function populateStateSelectForModal() {
    try {
      const response = await fetch('http://127.0.0.1:8000/api/states/');
      const states = await response.json();
      const stateSelect = document.getElementById('newLocalityState');
      stateSelect.innerHTML = '<option value="">اختر الولاية</option>';
      states.forEach(state => {
        const option = document.createElement('option');
        option.value = state.id;
        option.textContent = state.name;
        stateSelect.appendChild(option);
      });
    } catch (error) {
      console.error('خطأ في جلب الولايات للمودال:', error);
    }
  }

  // تهيئة DataTables للمناطق
  $(document).ready(function() {
    // تهيئة Select2 للعناصر الثابتة (لو وجدت)
    if (typeof $ !== 'undefined' && $.fn.select2) {
      $('.select2-search:not(.select2-hidden-accessible)').select2({
        theme: 'bootstrap-5',
        language: 'ar',
        dir: 'rtl',
        width: '100%',
        placeholder: 'ابحث...',
        allowClear: true
      });
    }

    var table = $('#areasTable').DataTable({
      processing: true,
      serverSide: true,
      ajax: {
        url: 'http://127.0.0.1:8000/api/areas-datatable/',
        type: 'GET',
        data: function(d) {
          const locFilter = $('#filterLocality').val();
          d.filter_locality = (locFilter === 'all') ? '' : locFilter;
        }
      },
      columns: [
        { data: 'id' },
        { data: 'name' },
        { data: 'code' },
        { data: 'locality_name' },
        { data: 'state_name' },
        { data: 'created_at' },
        {
          data: null,
          render: function(data, type, row) {
            return '<button class="btn btn-sm btn-warning" onclick="editArea(' + row.id + ')">تعديل</button> ' +
                   '<button class="btn btn-sm btn-danger" onclick="deleteArea(' + row.id + ')">حذف</button>';
          },
          orderable: false,
          searchable: false
        }
      ],
      language: {
        url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/ar.json'
      },
      order: [[4, 'asc'], [1, 'asc']],
      pageLength: 10,
      lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]]
    });

    $('#filterLocality').on('change', function() {
      table.ajax.reload();
    });

    // تحميل قائمة المحليات
    populateLocalitySelects();

    // تحميل قائمة الولايات للمودال عند فتح المودال
    $('#addLocalityModal').on('show.bs.modal', function() {
      populateStateSelectForModal();
    });
  });
</script>
{% endblock %}