{% extends 'admin_pages/base_admin.html' %}
{% block title %}{{ title }} | Admin Panel{% endblock %}

{% block content %}
<h2 class="mb-4">{{ title }}</h2>

<form method="post">
  {% csrf_token %}
  <div class="row g-3">
    {% for field in form.visible_fields %}
      <div class="col-md-6 mb-3">
        {{ field.label_tag }}{{ field }}
        {% if field.errors %}<div class="text-danger">{{ field.errors }}</div>{% endif %}
      </div>
    {% endfor %}
  </div>

  <hr class="my-4">
  <h5 class="mb-3">Add Products</h5>

  <!-- Search Input Box -->
  <div class="position-relative mb-3">
    <input type="text" id="item-search" class="form-control" placeholder="Search product and press Enter to add">
    <ul id="item-suggestions" class="list-group position-absolute w-100 d-none" style="z-index: 1000;"></ul>
  </div>

  <!-- Order Items Table -->
  <table class="table table-bordered" id="order-items-table">
    <thead>
      <tr>
        <th>Product</th>
        <th>Qty</th>
        <th>Unit Price</th>
        <th>Line Total</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody id="order-items-body">
      {% for item in order_items %}
      <tr>
        <td>
          <input type="hidden" name="form-{{ forloop.counter0 }}-product" value="{{ item.product.id }}">
          <input type="text" class="form-control" value="{{ item.product }}" readonly>
        </td>
        <td><input type="number" name="form-{{ forloop.counter0 }}-quantity" class="form-control qty" value="{{ item.quantity }}"></td>
        <td><input type="number" name="form-{{ forloop.counter0 }}-unit_price" class="form-control unit_price" value="{{ item.unit_price }}"></td>
        <td><input type="text" class="form-control line-total" readonly></td>
        <td><button type="button" class="btn btn-danger btn-sm remove-row">X</button></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

  <!-- Grand Total -->
  <div class="text-end fw-bold">Grand Total (including other charges): <span id="grand-total">0.00</span></div>

  <input type="hidden" id="id_form-TOTAL_FORMS" name="form-TOTAL_FORMS" value="{{ order_items|length }}">

  <div class="mt-4 d-flex gap-2">
    <button type="submit" class="btn btn-success">Save Order</button>
    <a href="{% url 'inventory:order_list' %}" class="btn btn-secondary">Cancel</a>
  </div>
</form>

<script>
let selectedIndex = -1;
const search = document.getElementById('item-search');
const suggestions = document.getElementById('item-suggestions');
const tableBody = document.getElementById('order-items-body');
const totalForms = document.getElementById('id_form-TOTAL_FORMS');

search.addEventListener('input', async function () {
  const q = this.value.trim();
  selectedIndex = -1;
  if (q.length < 2) return suggestions.classList.add('d-none');

  const res = await fetch(`/api/order-product-search/?q=${q}`);
  const items = await res.json();
  suggestions.innerHTML = '';
  items.forEach((item, i) => {
    const li = document.createElement('li');
    li.className = 'list-group-item list-group-item-action';
    li.textContent = item.title;
    li.dataset.id = item.id;
    li.dataset.price = item.price;
    li.dataset.index = i;
    li.onclick = () => selectItem(item);
    suggestions.appendChild(li);
  });
  suggestions.classList.remove('d-none');
});

search.addEventListener('keydown', function (e) {
  const items = suggestions.querySelectorAll('li');
  if (e.key === 'ArrowDown') {
    e.preventDefault();
    if (selectedIndex < items.length - 1) selectedIndex++;
    highlight(items);
  } else if (e.key === 'ArrowUp') {
    e.preventDefault();
    if (selectedIndex > 0) selectedIndex--;
    highlight(items);
  } else if (e.key === 'Enter') {
    e.preventDefault();
    if (items.length > 0) {
      const li = items[selectedIndex >= 0 ? selectedIndex : 0];
      selectItem({ id: li.dataset.id, title: li.textContent, price: li.dataset.price });
    }
  }
});

function highlight(items) {
  items.forEach((item, i) => {
    item.classList.toggle('active', i === selectedIndex);
  });
}

function selectItem(item) {
  const existingInputs = tableBody.querySelectorAll('input[name$="-product"]');
  for (let input of existingInputs) {
    if (input.value === item.id) {
      alert("This item is already added.");
      search.value = '';
      suggestions.classList.add('d-none');
      return;
    }
  }

  const index = parseInt(totalForms.value);
  totalForms.value = index + 1;

  const row = document.createElement('tr');
  row.innerHTML = `
    <td>
      <input type="hidden" name="form-${index}-product" value="${item.id}">
      <input type="text" class="form-control" value="${item.title}" readonly>
    </td>
    <td><input type="number" name="form-${index}-quantity" class="form-control qty" required></td>
    <td><input type="number" name="form-${index}-unit_price" class="form-control unit_price" value="${item.price}" required></td>
    <td><input type="text" class="form-control line-total" readonly></td>
    <td><button type="button" class="btn btn-danger btn-sm remove-row">X</button></td>
  `;
  tableBody.appendChild(row);
  suggestions.classList.add('d-none');
  search.value = '';
  selectedIndex = -1;

  const inputs = row.querySelectorAll('input');
  setFocusCycle(inputs);
  inputs[1].focus();
  row.querySelector('.qty')?.addEventListener('input', updateTotals);
  row.querySelector('.unit_price')?.addEventListener('input', updateTotals);
  updateTotals();
}

function setFocusCycle(inputs) {
  for (let i = 1; i < inputs.length - 1; i++) {
    inputs[i].addEventListener('keydown', function (e) {
      if (e.key === 'Enter') {
        e.preventDefault();
        inputs[i + 1].focus();
      }
    });
  }
  inputs[inputs.length - 2].addEventListener('keydown', function (e) {
    if (e.key === 'Enter') {
      e.preventDefault();
      search.focus();
    }
  }); 
}

tableBody.addEventListener('click', function (e) {
  if (e.target.classList.contains('remove-row')) {
    e.target.closest('tr').remove();
    updateIndexes();
    updateTotals();
  }
});

function updateIndexes() {
  const rows = tableBody.querySelectorAll('tr');
  rows.forEach((row, idx) => {
    row.querySelectorAll('input').forEach(input => {
      if (input.name) input.name = input.name.replace(/form-\d+-/, `form-${idx}-`);
    });
  });
  totalForms.value = rows.length;
}

function updateTotals() {
  let grandTotal = 0;
  const rows = tableBody.querySelectorAll('tr');
  rows.forEach(row => {
    const qty = parseFloat(row.querySelector('.qty')?.value || 0);
    const price = parseFloat(row.querySelector('.unit_price')?.value || 0);
    const total = qty * price;
    row.querySelector('.line-total').value = total.toFixed(2);
    grandTotal += total;
  });

  // Add other charges
  const otherChargesField = document.querySelector('#id_other_charges');
  const otherCharges = parseFloat(otherChargesField?.value || 0);
  const finalTotal = grandTotal + otherCharges;

  document.getElementById('grand-total').textContent = finalTotal.toFixed(2);

  const totalField = document.querySelector('#id_total_amount');
  if (totalField) totalField.value = finalTotal.toFixed(2);

  const paidField = document.querySelector('#id_amount_paid');
  const remainField = document.querySelector('#id_amount_remain');
  if (paidField && remainField) {
    const paid = parseFloat(paidField.value || 0);
    remainField.value = (finalTotal - paid).toFixed(2);
  }
}

document.querySelector('#id_amount_paid')?.addEventListener('input', updateTotals);
document.querySelector('#id_other_charges')?.addEventListener('input', updateTotals);
</script>
{% endblock %}