{% 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">
        <div class="input-group">
          <select id="localityState" 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="#addStateModal">
            <i class="fas fa-plus"></i>
          </button>
        </div>
      </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>

<!-- Modal لإضافة ولاية جديدة -->
<div class="modal fade" id="addStateModal" tabindex="-1" aria-labelledby="addStateModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addStateModalLabel">إضافة ولاية جديدة</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="addStateForm">
          <div class="mb-3">
            <label for="newStateName" class="form-label">اسم الولاية</label>
            <input type="text" class="form-control" id="newStateName" required>
          </div>
          <div class="mb-3">
            <label for="newStateCode" class="form-label">الكود</label>
            <input type="text" class="form-control" id="newStateCode" required>
          </div>
          <div class="alert alert-danger d-none" id="stateModalError"></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="saveStateBtn">حفظ</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 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();

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

      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);
      });

      // إعادة تهيئة Select2
      if (typeof $ !== 'undefined' && $.fn.select2) {
        // تدمير أي مثيل سابق
        $('#filterState, #localityState').each(function() {
          if ($(this).hasClass('select2-hidden-accessible')) {
            $(this).select2('destroy');
          }
        });

        // تهيئة فلتر الولاية (بدون placeholder، مع allowClear)
        $('#filterState').select2({
          theme: 'bootstrap-5',
          language: 'ar',
          dir: 'rtl',
          width: '100%',
          allowClear: true
        });

        // تهيئة قائمة إضافة المحلية (مع placeholder)
        $('#localityState').select2({
          theme: 'bootstrap-5',
          language: 'ar',
          dir: 'rtl',
          width: '100%',
          placeholder: 'اختر الولاية',
          allowClear: true
        });
      }

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

  // دوال CRUD للمحليات
  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;
      $('#localityState').val(locality.state).trigger('change');
      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 = '';
    $('#localityState').val('').trigger('change');
    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 = $('#localityState').val();

    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', 'X-CSRFToken': csrftoken },
          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', 'X-CSRFToken': csrftoken },
          body: JSON.stringify({ name, code, state: stateId })
        });
      }
      // إعادة تعيين النموذج
      localityNameInput.value = '';
      localityCodeInput.value = '';
      $('#localityState').val('').trigger('change');
      editingLocalityId = null;
      submitLocalityBtn.textContent = 'إضافة محلية';
      cancelLocalityEditBtn.style.display = 'none';
      $('#localitiesTable').DataTable().ajax.reload();
    } catch (error) {
      alert('خطأ: ' + error.message);
    }
  });

  // معالجة إضافة ولاية جديدة من المودال
  document.getElementById('saveStateBtn').addEventListener('click', async function() {
    const name = document.getElementById('newStateName').value.trim();
    const code = document.getElementById('newStateCode').value.trim();
    const errorDiv = document.getElementById('stateModalError');

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

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

        if (!response.ok) {
            // Try to get detailed error from response
            let errorMsg = 'فشل في إضافة الولاية';
            try {
                const errData = await response.json();
                // Django REST Framework usually returns errors in a dictionary
                if (errData && typeof errData === 'object') {
                    // Combine all error messages
                    errorMsg = Object.values(errData).flat().join(', ');
                } else if (typeof errData === 'string') {
                    errorMsg = errData;
                }
            } catch (e) {
                // If response is not JSON, try to get text
                const text = await response.text();
                errorMsg = text || errorMsg;
            }
            throw new Error(errorMsg);
        }

        const newState = await response.json();

        // Update filter and add dropdowns (as before)
        const filterSelect = filterStateSelect;
        const addSelect = localityStateSelect;

        // Add new option to both selects
        const optFilter = document.createElement('option');
        optFilter.value = newState.id;
        optFilter.textContent = newState.name;
        filterSelect.appendChild(optFilter);

        const optAdd = document.createElement('option');
        optAdd.value = newState.id;
        optAdd.textContent = newState.name;
        addSelect.appendChild(optAdd);

        // Reinitialize Select2
        if (typeof $ !== 'undefined' && $.fn.select2) {
            $('#filterState').select2('destroy');
            $('#localityState').select2('destroy');

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

        // Select the new state
        $('#localityState').val(newState.id).trigger('change');

        // Close modal and clear fields
        const modal = bootstrap.Modal.getInstance(document.getElementById('addStateModal'));
        modal.hide();
        document.getElementById('newStateName').value = '';
        document.getElementById('newStateCode').value = '';
        errorDiv.classList.add('d-none');

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

  // تهيئة 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 = $('#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 %}