{% extends 'core/base.html' %}
{% load static %}

{% block content %}
<style>
  #dashboard_nav:hover { color: #c51d21; }
  .zone-field {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
  .zone-field:focus {
    border-color: #f97316;
    outline: none;
    box-shadow: 0 0 0 1px #f97316;
  }
  .country-select + .select2-container { width: 100% !important; }
  .select2-container--default .select2-selection--single {
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    min-height: 42px;
    padding: 4px 8px;
  }
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px;
    font-size: 0.875rem;
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }
  #zones-table_wrapper { width: 100%; }
</style>
<nav>
  <ol class="flex flex-wrap pt-1 mr-12 bg-transparent rounded-lg sm:mr-16"
    style="position: relative;top: -40px;right: -19px;">
    <li class="text-lg leading-normal"><a class="text-white" href="{% url 'core:dashboard' %}">Home</a></li>
    <li class="text-lg pl-2 capitalize leading-normal text-white before:pr-2 before:content-['/']" aria-current="page">Zones</li>
  </ol>
</nav>

<div style="margin-top: 30px;" class="mx-auto px-4 mt-16 pb-12">
  <div class="bg-white shadow-lg rounded-lg p-6">
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-2xl font-semibold text-gray-800">Zones</h3>
      <button type="button" id="zone-create-open" style="background-color:#d37f2c"
        class="inline-block rounded-lg px-4 py-2 text-center text-sm font-medium text-white shadow-md transition duration-200">
        + Zone
      </button>
    </div>
    <div class="overflow-x-auto">
      <table id="zones-table" class="w-full min-w-[640px] border-collapse text-sm display">
        <thead class="bg-gray-100">
          <tr>
            <th class="px-3 py-2 text-left">Country</th>
            <th class="px-3 py-2 text-left">Radius (km)</th>
            <th class="px-3 py-2 text-left">Price / km</th>
            <th class="px-3 py-2 text-left">Allow return trips</th>
            <th class="px-3 py-2 text-left">Created</th>
            <th class="px-3 py-2 text-left">Actions</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>
</div>

<div id="zone-create-modal" class="crud-modal zone-modal fixed inset-0 z-[10050] hidden items-center justify-center overflow-y-auto bg-black/50 px-4 py-6" role="dialog" aria-modal="true">
  <div class="w-full max-w-lg rounded-2xl bg-white shadow-2xl">
    <div class="flex items-start justify-between border-b px-6 py-4">
      <div>
        <h4 class="text-xl font-semibold text-gray-800">Add zone</h4>
        <p class="mt-1 text-sm text-gray-500">Configure a zone and return-trip rules.</p>
      </div>
      <button type="button" class="crud-modal-close rounded-full p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-700" aria-label="Close">&times;</button>
    </div>
    <form id="zone-create-form" method="post" action="{% url 'core:zones_new' %}" class="space-y-4 px-6 py-5">
      {% csrf_token %}
      <div>
        <label class="mb-1 block text-sm font-medium text-gray-700" for="create_zone_country_code">Country</label>
        <select id="create_zone_country_code" name="country_code" required class="country-select zone-field">
          <option value=""></option>
          {% for code, label in country_choices %}<option value="{{ code }}">{{ label }} ({{ code }})</option>{% endfor %}
        </select>
      </div>
      <div>
        <label class="mb-1 block text-sm font-medium text-gray-700" for="create_zone_radius_km">Radius (km)</label>
        <input id="create_zone_radius_km" name="radius_km" type="number" min="0.01" step="0.01" required
          class="zone-field" placeholder="e.g. 50">
      </div>
      <div>
        <label class="mb-1 block text-sm font-medium text-gray-700" for="create_zone_rate_per_km">Price per km</label>
        <input id="create_zone_rate_per_km" name="rate_per_km" type="number" min="0" step="0.0001"
          class="zone-field" placeholder="e.g. 1.50">
      </div>
      <div class="rounded-xl bg-gray-50 p-4">
        <label class="flex items-center gap-2 text-sm text-gray-700">
          <input type="checkbox" name="allow_return_trips" class="rounded border-gray-300 text-orange-600 focus:ring-orange-500">
          Allow return trips
        </label>
      </div>
      <div class="flex justify-end gap-3 border-t pt-4">
        <button type="button" class="crud-modal-close rounded-lg border px-5 py-2 text-sm text-gray-700 hover:bg-gray-50">Cancel</button>
        <button type="submit" id="zone-create-submit" style="background-color:#d37f2c" class="rounded-lg px-5 py-2 text-sm font-medium text-white shadow-sm">Create</button>
      </div>
    </form>
  </div>
</div>

<div id="zone-edit-modal" class="crud-modal zone-modal fixed inset-0 z-[10050] hidden items-center justify-center overflow-y-auto bg-black/50 px-4 py-6" role="dialog" aria-modal="true">
  <div class="w-full max-w-lg rounded-2xl bg-white shadow-2xl">
    <div class="flex items-start justify-between border-b px-6 py-4">
      <div>
        <h4 class="text-xl font-semibold text-gray-800">Edit zone</h4>
        <p id="zone-edit-subtitle" class="mt-1 text-sm text-gray-500"></p>
      </div>
      <button type="button" class="crud-modal-close rounded-full p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-700" aria-label="Close">&times;</button>
    </div>
    <form id="zone-edit-form" method="post" action="" class="space-y-4 px-6 py-5">
      {% csrf_token %}
      <div>
        <label class="mb-1 block text-sm font-medium text-gray-700" for="edit_zone_country_code">Country</label>
        <select id="edit_zone_country_code" name="country_code" required class="country-select zone-field">
          <option value=""></option>
          {% for code, label in country_choices %}<option value="{{ code }}">{{ label }} ({{ code }})</option>{% endfor %}
        </select>
      </div>
      <div>
        <label class="mb-1 block text-sm font-medium text-gray-700" for="edit_zone_radius_km">Radius (km)</label>
        <input id="edit_zone_radius_km" name="radius_km" type="number" min="0.01" step="0.01" required
          class="zone-field" placeholder="e.g. 50">
      </div>
      <div>
        <label class="mb-1 block text-sm font-medium text-gray-700" for="edit_zone_rate_per_km">Price per km</label>
        <input id="edit_zone_rate_per_km" name="rate_per_km" type="number" min="0" step="0.0001"
          class="zone-field" placeholder="e.g. 1.50">
      </div>
      <div class="rounded-xl bg-gray-50 p-4">
        <label class="flex items-center gap-2 text-sm text-gray-700">
          <input id="edit_zone_allow_return_trips" type="checkbox" name="allow_return_trips" class="rounded border-gray-300 text-orange-600 focus:ring-orange-500">
          Allow return trips
        </label>
      </div>
      <div class="flex justify-end gap-3 border-t pt-4">
        <button type="button" class="crud-modal-close rounded-lg border px-5 py-2 text-sm text-gray-700 hover:bg-gray-50">Cancel</button>
        <button type="submit" id="zone-edit-submit" style="background-color:#d37f2c" class="rounded-lg px-5 py-2 text-sm font-medium text-white shadow-sm">Save changes</button>
      </div>
    </form>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const zoneEditUrl = "{% url 'core:zone_edit' 0 %}";
    const zoneDeleteUrl = "{% url 'core:zone_delete' 0 %}";
    const csrfToken = '{{ csrf_token }}';

    const editIcon = `<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"><path d="M17.414 2.586a2 2 0 0 0-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 0 0 0-2.828Z"/><path fill-rule="evenodd" d="M2 6a2 2 0 0 1 2-2h4a1 1 0 1 1 0 2H4v10h10v-4a1 1 0 1 1 2 0v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6Z" clip-rule="evenodd"/></svg>`;
    const deleteIcon = `<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75V4H3.5a.75.75 0 0 0 0 1.5h.3l.69 10.354A3 3 0 0 0 7.48 18.75h5.04a3 3 0 0 0 2.99-2.896L16.2 5.5h.3a.75.75 0 0 0 0-1.5H14v-.25A2.75 2.75 0 0 0 11.25 1h-2.5ZM7.5 4v-.25c0-.69.56-1.25 1.25-1.25h2.5c.69 0 1.25.56 1.25 1.25V4h-5Zm1.25 4a.75.75 0 0 0-1.5 0v6a.75.75 0 0 0 1.5 0V8Zm4 0a.75.75 0 0 0-1.5 0v6a.75.75 0 0 0 1.5 0V8Z" clip-rule="evenodd"/></svg>`;

    const actionButtons = (row) => `
      <div class="flex items-center gap-2">
        <button type="button" class="zone-edit-open inline-flex h-9 w-9 items-center justify-center rounded-full text-orange-600 transition hover:bg-orange-50" data-id="${row.id}" aria-label="Edit">${editIcon}</button>
        <button type="button" class="zone-delete-open inline-flex h-9 w-9 items-center justify-center rounded-full text-red-600 transition hover:bg-red-50" data-id="${row.id}" data-label="${row.country_display} (${row.country_code})" aria-label="Delete">${deleteIcon}</button>
      </div>`;

    const initCountrySelect = (select) => {
      if (!select || select.dataset.select2Ready === '1' || typeof jQuery === 'undefined' || !jQuery.fn.select2) return;
      jQuery(select).select2({
        width: '100%',
        placeholder: 'Search country...',
        allowClear: true,
        dropdownParent: jQuery(select).closest('.crud-modal'),
      });
      select.dataset.select2Ready = '1';
    };

    const setSelectValue = (select, value) => {
      if (!select) return;
      if (typeof jQuery !== 'undefined' && jQuery.fn.select2 && select.dataset.select2Ready === '1') {
        jQuery(select).val(value || null).trigger('change');
      } else {
        select.value = value || '';
      }
    };

    const openModal = (modal) => {
      if (!modal) return;
      modal.classList.remove('hidden');
      modal.classList.add('flex');
      document.body.style.overflow = 'hidden';
      modal.querySelectorAll('.country-select').forEach(initCountrySelect);
    };

    const closeModal = (modal) => {
      if (!modal) return;
      modal.classList.add('hidden');
      modal.classList.remove('flex');
      if (!document.querySelector('.crud-modal:not(.hidden)')) document.body.style.overflow = '';
    };

    const submitAjaxForm = async (form, submitButton) => {
      if (submitButton) {
        submitButton.disabled = true;
        submitButton.dataset.originalText = submitButton.textContent;
        submitButton.textContent = 'Saving...';
      }
      try {
        const response = await fetch(form.action, {
          method: 'POST',
          headers: { 'X-Requested-With': 'XMLHttpRequest' },
          body: new FormData(form),
        });
        const payload = await response.json();
        if (!response.ok || !payload.success) throw new Error(payload.message || 'Request failed.');
        return payload;
      } finally {
        if (submitButton) {
          submitButton.disabled = false;
          submitButton.textContent = submitButton.dataset.originalText || 'Save';
        }
      }
    };

    const rowDataFromButton = (table, button) => {
      if (!table) return null;
      let row = table.row(jQuery(button).closest('tr'));
      if (!row.data()) row = table.row(jQuery(button).closest('tr').prev());
      return row.data();
    };

    const confirmDelete = async (title, text, url) => {
      const result = await Swal.fire({
        title, text, icon: 'warning', showCancelButton: true,
        confirmButtonColor: '#dc2626', cancelButtonColor: '#6b7280', confirmButtonText: 'Yes, delete',
      });
      if (!result.isConfirmed) return;
      const formData = new FormData();
      formData.append('csrfmiddlewaretoken', csrfToken);
      const response = await fetch(url, {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        body: formData,
      });
      const payload = await response.json();
      if (!response.ok || !payload.success) throw new Error(payload.message || 'Delete failed.');
      return payload;
    };

    let zonesTable = null;

    if (window.jQuery && window.jQuery.fn.DataTable) {
      zonesTable = jQuery('#zones-table').DataTable({
        serverSide: true,
        processing: true,
        ajax: { url: "{% url 'core:zones' %}" },
        responsive: true,
        pageLength: 10,
        order: [[0, 'asc']],
        columns: [
          { data: null, render: (d, t, row) => `${row.country_display} (${row.country_code})` },
          { data: 'radius_km_display', defaultContent: '—' },
          { data: 'rate_per_km_display', defaultContent: '—' },
          { data: 'allow_return_trips_display', defaultContent: 'No' },
          { data: 'created_at', defaultContent: '' },
          { data: null, orderable: false, searchable: false, render: (d, t, row) => actionButtons(row) },
        ],
      });
    }

    document.getElementById('zone-create-open')?.addEventListener('click', () => {
      const form = document.getElementById('zone-create-form');
      form.reset();
      setSelectValue(document.getElementById('create_zone_country_code'), '');
      openModal(document.getElementById('zone-create-modal'));
    });

    document.getElementById('zones-table')?.addEventListener('click', async (event) => {
      const editBtn = event.target.closest('.zone-edit-open');
      if (editBtn) {
        const row = rowDataFromButton(zonesTable, editBtn);
        if (!row) return;
        const form = document.getElementById('zone-edit-form');
        form.action = zoneEditUrl.replace('/0/edit', `/${row.id}/edit`);
        document.getElementById('zone-edit-subtitle').textContent = `${row.country_display} (${row.country_code})`;
        setSelectValue(document.getElementById('edit_zone_country_code'), row.country_code);
        document.getElementById('edit_zone_radius_km').value = row.radius_km || '';
        document.getElementById('edit_zone_rate_per_km').value = row.rate_per_km || '';
        document.getElementById('edit_zone_allow_return_trips').checked = !!row.allow_return_trips;
        openModal(document.getElementById('zone-edit-modal'));
        return;
      }
      const deleteBtn = event.target.closest('.zone-delete-open');
      if (deleteBtn) {
        try {
          const payload = await confirmDelete('Delete zone?', `This will permanently delete ${deleteBtn.dataset.label}.`, zoneDeleteUrl.replace('/0/delete', `/${deleteBtn.dataset.id}/delete`));
          zonesTable?.ajax.reload(null, false);
          Swal.fire({ icon: 'success', title: 'Deleted', text: payload.message, timer: 1600, showConfirmButton: false });
        } catch (error) {
          Swal.fire({ icon: 'error', title: 'Error', text: error.message });
        }
      }
    });

    document.querySelectorAll('.crud-modal-close').forEach((btn) => {
      btn.addEventListener('click', () => closeModal(btn.closest('.crud-modal')));
    });
    document.querySelectorAll('.crud-modal').forEach((modal) => {
      modal.addEventListener('click', (event) => { if (event.target === modal) closeModal(modal); });
    });
    document.addEventListener('keydown', (event) => {
      if (event.key === 'Escape') document.querySelectorAll('.crud-modal:not(.hidden)').forEach(closeModal);
    });

    const bindForm = (formId, submitId, modalId, onSuccess) => {
      document.getElementById(formId)?.addEventListener('submit', async (event) => {
        event.preventDefault();
        const form = event.currentTarget;
        const submitButton = document.getElementById(submitId);
        try {
          const payload = await submitAjaxForm(form, submitButton);
          closeModal(document.getElementById(modalId));
          form.reset();
          onSuccess(payload);
          Swal.fire({ icon: 'success', title: 'Success', text: payload.message, timer: 1600, showConfirmButton: false });
        } catch (error) {
          Swal.fire({ icon: 'error', title: 'Error', text: error.message });
        }
      });
    };

    bindForm('zone-create-form', 'zone-create-submit', 'zone-create-modal', () => {
      setSelectValue(document.getElementById('create_zone_country_code'), '');
      zonesTable?.ajax.reload(null, false);
    });
    bindForm('zone-edit-form', 'zone-edit-submit', 'zone-edit-modal', () => zonesTable?.ajax.reload(null, false));
  });
</script>
{% endblock %}