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

    <!-- نموذج إضافة موقع -->
    <form id="locationForm" class="row g-3 mb-4">
      <div class="col-md-3">
        <input type="text" class="form-control" id="locationName" placeholder="اسم الموقع" required>
      </div>
      <div class="col-md-2">
        <input type="text" class="form-control" id="locationCode" placeholder="الكود">
      </div>
      <div class="col-md-2">
        <select id="locationZoning" class="form-select">
          <option value="">المنطقة التصنيفية</option>
          <option value="commercial">تجارية</option>
          <option value="residential">سكنية</option>
          <option value="industrial">صناعية</option>
          <option value="services">خدمية</option>
          <option value="mixed">مختلطة</option>
        </select>
      </div>
      <div class="col-md-2">
        <input type="text" class="form-control" id="locationLatitude" placeholder="خط العرض">
      </div>
      <div class="col-md-2">
        <input type="text" class="form-control" id="locationLongitude" placeholder="خط الطول">
      </div>
      <div class="col-md-3">
        <div class="input-group">
          <select id="locationArea" 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="#addAreaModal">
            <i class="fas fa-plus"></i>
          </button>
        </div>
      </div>
      <div class="col-md-3">
        <button type="submit" class="btn btn-primary" id="submitLocationBtn">إضافة موقع</button>
        <button type="button" class="btn btn-secondary" id="cancelLocationEdit" style="display:none;">إلغاء</button>
      </div>
    </form>

    <!-- جدول المواقع باستخدام DataTables -->
    <div class="table-responsive">
      <table id="locationsTable" 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>
            <th>خط العرض</th>
            <th>خط الطول</th>
            <th>تاريخ الإنشاء</th>
            <th>الإجراءات</th>
           </tr>
        </thead>
       </table>
    </div>
  </div>
</div>

<!-- Modal لإضافة منطقة جديدة -->
<div class="modal fade" id="addAreaModal" tabindex="-1" aria-labelledby="addAreaModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addAreaModalLabel">إضافة منطقة جديدة</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="addAreaForm">
          <div class="mb-3">
            <label for="newAreaName" class="form-label">اسم المنطقة</label>
            <input type="text" class="form-control" id="newAreaName" required>
          </div>
          <div class="mb-3">
            <label for="newAreaCode" class="form-label">الكود</label>
            <input type="text" class="form-control" id="newAreaCode" required>
          </div>
          <div class="mb-3">
            <label for="newAreaLocality" class="form-label">المحلية</label>
            <select id="newAreaLocality" class="form-select" required>
              <option value="">اختر المحلية</option>
            </select>
          </div>
          <div class="alert alert-danger d-none" id="areaModalError"></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="saveAreaBtn">حفظ</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 locationForm = document.getElementById('locationForm');
  const locationNameInput = document.getElementById('locationName');
  const locationCodeInput = document.getElementById('locationCode');
  const locationZoningSelect = document.getElementById('locationZoning');
  const locationLatitudeInput = document.getElementById('locationLatitude');
  const locationLongitudeInput = document.getElementById('locationLongitude');
  const locationAreaSelect = document.getElementById('locationArea');
  const submitLocationBtn = document.getElementById('submitLocationBtn');
  const cancelLocationEditBtn = document.getElementById('cancelLocationEdit');
  const filterAreaSelect = document.getElementById('filterArea');

  let editingLocationId = null;

  // دالة ملء قائمة المناطق
  async function populateAreaSelects() {
    try {
      const response = await fetch('http://127.0.0.1:8000/api/areas/');
      const areas = await response.json();

      filterAreaSelect.innerHTML = '<option value="all">جميع المناطق</option>';
      locationAreaSelect.innerHTML = '<option value="">اختر المنطقة</option>';

      areas.forEach(area => {
        const optFilter = document.createElement('option');
        optFilter.value = area.id;
        optFilter.textContent = `${area.name} (${area.locality_name})`;
        filterAreaSelect.appendChild(optFilter);

        const optAdd = document.createElement('option');
        optAdd.value = area.id;
        optAdd.textContent = `${area.name} (${area.locality_name})`;
        locationAreaSelect.appendChild(optAdd);
      });

      if (typeof $ !== 'undefined' && $.fn.select2) {
        $('#filterArea, #locationArea').each(function() {
          if ($(this).hasClass('select2-hidden-accessible')) {
            $(this).select2('destroy');
          }
        });
        $('#filterArea').select2({
          theme: 'bootstrap-5',
          language: 'ar',
          dir: 'rtl',
          width: '100%',
          allowClear: true
        });
        $('#locationArea').select2({
          theme: 'bootstrap-5',
          language: 'ar',
          dir: 'rtl',
          width: '100%',
          placeholder: 'اختر المنطقة',
          allowClear: true
        });
      }
    } catch (error) {
      console.error('خطأ في جلب المناطق:', error);
    }
  }

  // دوال CRUD
  window.editLocation = async function(id) {
    try {
      const response = await fetch(`http://127.0.0.1:8000/api/locations/${id}/`);
      if (!response.ok) throw new Error('لا يمكن جلب البيانات');
      const loc = await response.json();
      locationNameInput.value = loc.name;
      locationCodeInput.value = loc.code || '';
      locationZoningSelect.value = loc.zoning || '';
      locationLatitudeInput.value = loc.latitude || '';
      locationLongitudeInput.value = loc.longitude || '';
      $('#locationArea').val(loc.area).trigger('change');
      editingLocationId = id;
      submitLocationBtn.textContent = 'تحديث موقع';
      cancelLocationEditBtn.style.display = 'inline-block';
    } catch (error) {
      alert('خطأ في جلب بيانات الموقع: ' + error.message);
    }
  };

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

  cancelLocationEditBtn.addEventListener('click', () => {
    locationNameInput.value = '';
    locationCodeInput.value = '';
    locationZoningSelect.value = '';
    locationLatitudeInput.value = '';
    locationLongitudeInput.value = '';
    $('#locationArea').val('').trigger('change');
    editingLocationId = null;
    submitLocationBtn.textContent = 'إضافة موقع';
    cancelLocationEditBtn.style.display = 'none';
  });

  locationForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    const name = locationNameInput.value.trim();
    const code = locationCodeInput.value.trim() || null;
    const areaId = $('#locationArea').val();
    const zoning = locationZoningSelect.value || null;
    const lat = locationLatitudeInput.value.trim() || null;
    const lng = locationLongitudeInput.value.trim() || null;

    if (!name || !areaId) {
      alert('الرجاء إدخال اسم الموقع واختيار المنطقة');
      return;
    }

    const payload = {
      name, code: code,
      area: areaId,
      zoning: zoning,
      latitude: lat,
      longitude: lng
    };

    try {
      let response;
      if (editingLocationId) {
        response = await fetch(`http://127.0.0.1:8000/api/locations/${editingLocationId}/`, {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrftoken },
          body: JSON.stringify(payload)
        });
      } else {
        response = await fetch('http://127.0.0.1:8000/api/locations/', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrftoken },
          body: JSON.stringify(payload)
        });
      }

      if (!response.ok) {
        const errorData = await response.json();
        let errorMsg = 'فشل في إضافة الموقع';
        if (errorData && typeof errorData === 'object') {
          errorMsg = Object.values(errorData).flat().join(', ');
        } else if (typeof errorData === 'string') {
          errorMsg = errorData;
        }
        throw new Error(errorMsg);
      }

      // إعادة تعيين النموذج
      locationNameInput.value = '';
      locationCodeInput.value = '';
      locationZoningSelect.value = '';
      locationLatitudeInput.value = '';
      locationLongitudeInput.value = '';
      $('#locationArea').val('').trigger('change');
      editingLocationId = null;
      submitLocationBtn.textContent = 'إضافة موقع';
      cancelLocationEditBtn.style.display = 'none';
      $('#locationsTable').DataTable().ajax.reload();
    } catch (error) {
      alert('خطأ: ' + error.message);
    }
  });

  // معالجة إضافة منطقة جديدة من المودال
  document.getElementById('saveAreaBtn').addEventListener('click', async function() {
    const name = document.getElementById('newAreaName').value.trim();
    const code = document.getElementById('newAreaCode').value.trim();
    const localityId = document.getElementById('newAreaLocality').value;
    const errorDiv = document.getElementById('areaModalError');

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

    try {
      const response = 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 })
      });

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

      const newArea = await response.json();

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

      const optAdd = document.createElement('option');
      optAdd.value = newArea.id;
      optAdd.textContent = `${newArea.name} (${newArea.locality_name})`;
      locationAreaSelect.appendChild(optAdd);

      // إعادة تهيئة Select2 للقائمتين
      if (typeof $ !== 'undefined' && $.fn.select2) {
        $('#filterArea').select2('destroy');
        $('#locationArea').select2('destroy');
        $('#filterArea').select2({
          theme: 'bootstrap-5',
          language: 'ar',
          dir: 'rtl',
          width: '100%',
          allowClear: true
        });
        $('#locationArea').select2({
          theme: 'bootstrap-5',
          language: 'ar',
          dir: 'rtl',
          width: '100%',
          placeholder: 'اختر المنطقة',
          allowClear: true
        });
      }

      // اختيار المنطقة الجديدة في قائمة الإضافة
      $('#locationArea').val(newArea.id).trigger('change');

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

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

  // ملء قائمة المحليات في المودال
  async function populateLocalitySelectForModal() {
    try {
      const response = await fetch('http://127.0.0.1:8000/api/localities/');
      const localities = await response.json();
      const localitySelect = document.getElementById('newAreaLocality');
      localitySelect.innerHTML = '<option value="">اختر المحلية</option>';
      localities.forEach(loc => {
        const option = document.createElement('option');
        option.value = loc.id;
        option.textContent = `${loc.name} (${loc.state_name})`;
        localitySelect.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
      });
    }

    const table = $('#locationsTable').DataTable({
      processing: true,
      serverSide: true,
      ajax: {
        url: 'http://127.0.0.1:8000/api/locations-datatable/',
        type: 'GET',
        data: function(d) {
          const areaFilter = $('#filterArea').val();
          d.filter_area = (areaFilter === 'all') ? '' : areaFilter;
        }
      },
      columns: [
        { data: 'id' },
        { data: 'name' },
        { data: 'code' },
        { data: 'area_name' },
        { data: 'locality_name' },
        { data: 'state_name' },
        {
          data: 'zoning',
          render: function(data) {
            const map = {
              'commercial': 'تجارية',
              'residential': 'سكنية',
              'industrial': 'صناعية',
              'services': 'خدمية',
              'mixed': 'مختلطة'
            };
            return map[data] || data || '';
          }
        },
        { data: 'latitude' },
        { data: 'longitude' },
        { data: 'created_at' },
        {
          data: null,
          render: function(data, type, row) {
            return '<button class="btn btn-sm btn-warning" onclick="editLocation(' + row.id + ')">تعديل</button> ' +
                   '<button class="btn btn-sm btn-danger" onclick="deleteLocation(' + row.id + ')">حذف</button>';
          },
          orderable: false,
          searchable: false
        }
      ],
      language: {
        url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/ar.json'
      },
      order: [[5, 'asc'], [1, 'asc']],
      pageLength: 10,
      lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]]
    });

    // تحديث الجدول عند تغيير فلتر المنطقة
    $('#filterArea').on('change', function() {
      table.ajax.reload();
    });

    // تحميل قائمة المناطق
    populateAreaSelects();

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