{% 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="filterState" class="form-label">تصفية حسب الولاية:</label>
        <select id="filterState" class="form-select select2-search">
          <option value="all">جميع الولايات</option>
        </select>
      </div>
    </div>

    <!-- نموذج إضافة محلية -->
    <form id="localityForm" class="row g-3 mb-4">
      <div class="col-md-3">
        <input type="text" class="form-control" id="localityName" placeholder="اسم المحلية" required>
      </div>
      <div class="col-md-3">
        <input type="text" class="form-control" id="localityCode" placeholder="الكود" required>
      </div>
      <div class="col-md-3">
        <select id="localityState" class="form-select select2-search" required>
          <option value="">اختر الولاية</option>
        </select>
      </div>
      <div class="col-md-3">
        <button type="submit" class="btn btn-primary" id="submitLocalityBtn">إضافة محلية</button>
        <button type="button" class="btn btn-secondary" id="cancelLocalityEdit" style="display:none;">إلغاء</button>
      </div>
    </form>

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

{% block extra_js %}
<script>
  // عناصر النموذج والفلتر
  const localityForm = document.getElementById('localityForm');
  const localityNameInput = document.getElementById('localityName');
  const localityCodeInput = document.getElementById('localityCode');
  const localityStateSelect = document.getElementById('localityState');
  const submitLocalityBtn = document.getElementById('submitLocalityBtn');
  const cancelLocalityEditBtn = document.getElementById('cancelLocalityEdit');
  const filterStateSelect = document.getElementById('filterState');

  let editingLocalityId = null;

  // دالة ملء قائمة الولايات في القوائم المنسدلة
      async function populateStateSelects() {
      try {
        const response = await fetch('http://127.0.0.1:8000/api/states/');
        const states = await response.json();

        // Keep the "all" option as the first child
        filterStateSelect.innerHTML = '<option value="all">جميع الولايات</option>';
        localityStateSelect.innerHTML = '<option value="all">اختر الولاية</option>'; // if you want a separate placeholder

        states.forEach(state => {
          const optFilter = document.createElement('option');
          optFilter.value = state.id;
          optFilter.textContent = state.name;
          filterStateSelect.appendChild(optFilter);

          const optAdd = document.createElement('option');
          optAdd.value = state.id;
          optAdd.textContent = state.name;
          localityStateSelect.appendChild(optAdd);
        });
      } catch (error) {
        console.error('خطأ في جلب الولايات:', error);
      }
    }

  // دوال الإضافة والتحديث والحذف (مشابهة للولايات)
  window.editLocality = async function(id) {
    try {
      const response = await fetch(`http://127.0.0.1:8000/api/localities/${id}/`);
      if (!response.ok) throw new Error('لا يمكن جلب البيانات');
      const locality = await response.json();
      localityNameInput.value = locality.name;
      localityCodeInput.value = locality.code;
      localityStateSelect.value = locality.state;
      editingLocalityId = id;
      submitLocalityBtn.textContent = 'تحديث محلية';
      cancelLocalityEditBtn.style.display = 'inline-block';
    } catch (error) {
      alert('خطأ في جلب بيانات المحلية: ' + error.message);
    }
  };

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

  cancelLocalityEditBtn.addEventListener('click', () => {
    localityNameInput.value = '';
    localityCodeInput.value = '';
    localityStateSelect.value = '';
    editingLocalityId = null;
    submitLocalityBtn.textContent = 'إضافة محلية';
    cancelLocalityEditBtn.style.display = 'none';
  });

  localityForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    const name = localityNameInput.value.trim();
    const code = localityCodeInput.value.trim();
    const stateId = localityStateSelect.value;

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

    try {
      if (editingLocalityId) {
        await fetch(`http://127.0.0.1:8000/api/localities/${editingLocalityId}/`, {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ name, code, state: stateId })
        });
      } else {
        await fetch('http://127.0.0.1:8000/api/localities/', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ name, code, state: stateId })
        });
      }
      localityNameInput.value = '';
      localityCodeInput.value = '';
      localityStateSelect.value = '';
      editingLocalityId = null;
      submitLocalityBtn.textContent = 'إضافة محلية';
      cancelLocalityEditBtn.style.display = 'none';
      $('#localitiesTable').DataTable().ajax.reload();
    } catch (error) {
      alert('خطأ: ' + error.message);
    }
  });

  // تهيئة DataTables للمحليات
  $(document).ready(function() {
    var table = $('#localitiesTable').DataTable({
      processing: true,
      serverSide: true,
      ajax: {
        url: 'http://127.0.0.1:8000/api/localities-datatable-test/',
        type: 'GET',
        data: function(d) {
          const stateFilter = $('#filterState').val();
    d.filter_state = (stateFilter === 'all') ? '' : stateFilter
        }
      },
      columns: [
        { data: 'id' },
        { data: 'name' },
        { data: 'code' },
        { data: 'state_name' },
        { data: 'created_at' },
        {
          data: null,
          render: function(data, type, row) {
            return '<button class="btn btn-sm btn-warning" onclick="editLocality(' + row.id + ')">تعديل</button> ' +
                   '<button class="btn btn-sm btn-danger" onclick="deleteLocality(' + row.id + ')">حذف</button>';
          },
          orderable: false,
          searchable: false
        }
      ],
      language: {
        url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/ar.json'
      },
      order: [[3, 'asc'], [1, 'asc']],
      pageLength: 10,
      lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]]
    });

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

  // تحميل قائمة الولايات في القوائم المنسدلة
  populateStateSelects();
</script>
{% endblock %}