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

{% block content %}
<h2 class="mb-4">{{ title }}</h2>
{% block breadcrumbs %}
<nav aria-label="breadcrumb" class="mb-3">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{% url 'admin_page' %}">Dashboard</a></li>
    <li class="breadcrumb-item"><a href="{% url 'invoice_list' %}">Invoices</a></li>
    <li class="breadcrumb-item active" aria-current="page">
      {% if invoice %}Edit Invoice #{{ invoice.id }}{% else %}{{ title }}{% endif %}
    </li>
  </ol>
</nav>
{% endblock %}

<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.name == 'sender' %}
        <a href="#" class="btn btn-sm btn-outline-secondary mt-1" data-bs-toggle="modal" data-bs-target="#addSenderModal">
          + Add New Sender
        </a>
        {% endif %}
        {% if field.name == 'receiver' %}
        <a href="#" class="btn btn-sm btn-outline-secondary mt-1" data-bs-toggle="modal" data-bs-target="#addReceiverModal">
          + Add New Receiver
        </a>
        {% endif %}
        {% if field.errors %}<div class="text-danger">{{ field.errors }}</div>{% endif %}
      </div>
    {% endfor %}
  </div>

  <hr class="my-4">
  <h5 class="mb-3">Search and Add Items</h5>

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

  <!-- Invoice Items Table -->
  <table class="table table-bordered" id="invoice-items-table">
    <thead>
      <tr>
        <th>Item</th>
        <th>Qty</th>
        <th>Unit Price</th>
        <th>Handling</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody id="invoice-items-body">
      {% for item in invoice_items %}
      <tr>
        <td>
          <input type="hidden" name="form-{{ forloop.counter0 }}-item" value="{{ item.item.id }}">
          <input type="text" class="form-control" value="{{ item.item.title }}" readonly>
        </td>
        <td><input type="number" name="form-{{ forloop.counter0 }}-quantity" class="form-control" value="{{ item.quantity }}"></td>
        <td><input type="number" name="form-{{ forloop.counter0 }}-unit_price" class="form-control" value="{{ item.unit_price }}"></td>
        <td><input type="number" name="form-{{ forloop.counter0 }}-handling_charges" class="form-control" value="{{ item.handling_charges }}"></td>
        <td><button type="button" class="btn btn-danger btn-sm remove-row">X</button></td>
      </tr>
      {% endfor %}
    </tbody>
<tfoot>
  <tr>
    <td colspan="3" class="text-end fw-bold">Grand Total $:</td>
    <td colspan="2">
      <input type="text" id="grand-total" class="form-control fw-bold" value="0.00" readonly>
    </td>
  </tr>
</tfoot>


  </table>

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

  <div class="mt-4 d-flex gap-2">
    <button type="submit" class="btn btn-success">Save Invoice</button>
    <a href="{% url 'invoice_list' %}" class="btn btn-secondary">Cancel</a>
  </div>
</form>
<!-- Sender Modal -->
<div class="modal fade" id="addSenderModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <form id="add-sender-form">
        <div class="modal-header">
          <h5 class="modal-title">Add New Sender</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="row g-2">
            <div class="col-md-6"><input type="text" class="form-control" name="name" placeholder="First Name" required></div>
            <div class="col-md-6"><input type="text" class="form-control" name="last_name" placeholder="Last Name" required></div>
            <div class="col-md-6"><input type="text" class="form-control" name="fathers_name" placeholder="Father's Name" required></div>
            <div class="col-md-6"><input type="text" class="form-control" name="mobile" placeholder="Mobile" required></div>
            <div class="col-md-6"><input type="email" class="form-control" name="email" placeholder="Email"></div>
            <div class="col-md-6"><input type="text" class="form-control" name="home_phone" placeholder="Home Phone"></div>
            <div class="col-md-6"><input type="text" class="form-control" name="street" placeholder="Street"></div>
            <div class="col-md-6"><input type="text" class="form-control" name="city" placeholder="City"></div>
            <div class="col-md-6"><input type="text" class="form-control" name="State_province_area" placeholder="Province/State"></div>
            <div class="col-md-6"><input type="text" class="form-control" name="postal_code" placeholder="Postal Code"></div>
            <div class="col-md-12"><input type="text" class="form-control" name="country" placeholder="Country" value="Afghanistan"></div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-success">Save</button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Receiver Modal -->
<div class="modal fade" id="addReceiverModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <form id="add-receiver-form">
        <div class="modal-header">
          <h5 class="modal-title">Add New Receiver</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="row g-2">
            <div class="col-md-6">
              <input type="text" class="form-control" name="name" placeholder="First Name" required>
            </div>
            <div class="col-md-6">
              <input type="text" class="form-control" name="last_name" placeholder="Last Name" required>
            </div>
            <div class="col-md-6">
              <input type="text" class="form-control" name="fathers_name" placeholder="Father's Name" required>
            </div>
            <div class="col-md-6">
              <input type="text" class="form-control" name="mobile" placeholder="Mobile" required>
            </div>
            <div class="col-md-6">
              <input type="email" class="form-control" name="email" placeholder="Email">
            </div>
            <div class="col-md-6">
              <input type="text" class="form-control" name="home_phone" placeholder="Home Phone">
            </div>
            <div class="col-md-6">
              <input type="text" class="form-control" name="street" placeholder="Street">
            </div>
            <div class="col-md-6">
              <input type="text" class="form-control" name="city" placeholder="City">
            </div>
            <div class="col-md-6">
              <input type="text" class="form-control" name="State_province_area" placeholder="Province/State">
            </div>
            <div class="col-md-6">
              <input type="text" class="form-control" name="postal_code" placeholder="Postal Code">
            </div>
            <div class="col-md-12">
              <input type="text" class="form-control" name="country" placeholder="Country" value="Afghanistan">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-success">Save</button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
function submitAndAttach(endpoint, formId, selectId, modalId) {
  const form = document.getElementById(formId);
  form.addEventListener('submit', async function (e) {
    e.preventDefault();
    const formData = new FormData(form);
    const response = await fetch(endpoint, {
      method: 'POST',
      headers: {
        'X-CSRFToken': '{{ csrf_token }}'
      },
      body: formData
    });

    const data = await response.json();
    if (data.success) {
      const select = document.getElementById(selectId);
      const opt = new Option(data.text, data.id, true, true);
      select.appendChild(opt);
      bootstrap.Modal.getInstance(document.getElementById(modalId)).hide();
      form.reset();
    } else {
      alert(data.error || "Error saving record.");
    }
  });
}

submitAndAttach('/api/sender/create/', 'add-sender-form', 'id_sender', 'addSenderModal');
submitAndAttach('/api/receiver/create/', 'add-receiver-form', 'id_receiver', 'addReceiverModal');
</script>

<script>
function updateGrandTotal() {
  let total = 0;

  document.querySelectorAll('#invoice-items-body tr').forEach(row => {
    const qty = parseFloat(row.querySelector('[name*="-quantity"]')?.value) || 0;
    const price = parseFloat(row.querySelector('[name*="-unit_price"]')?.value) || 0;
    const handling = parseFloat(row.querySelector('[name*="-handling_charges"]')?.value) || 0;

    total += (qty * price) + handling;
  });

  document.getElementById('grand-total').value = total.toFixed(2);
}
document.getElementById('invoice-items-table').addEventListener('input', function (e) {
  if (
    e.target.name.includes('quantity') ||
    e.target.name.includes('unit_price') ||
    e.target.name.includes('handling_charges')
  ) {
    updateGrandTotal();
  }
});
updateGrandTotal();
</script>

<script>
let selectedSuggestionIndex = -1;

const itemSearch = document.getElementById('item-search');
const suggestionsBox = document.getElementById('item-suggestions');
const formBody = document.getElementById('invoice-items-body');
const totalForms = document.getElementById('id_form-TOTAL_FORMS');

itemSearch.addEventListener('input', async function () {
  const query = this.value.trim();
  if (query.length < 2) {
    suggestionsBox.classList.add('d-none');
    return;
  }
  const response = await fetch(`/api/item-search/?q=${query}`);
  const items = await response.json();
  suggestionsBox.innerHTML = '';
  selectedSuggestionIndex = -1;
  if (!items.length) return suggestionsBox.classList.add('d-none');

  items.forEach((item, index) => {
    const li = document.createElement('li');
    li.className = 'list-group-item list-group-item-action';
    li.textContent = item.title;
    li.dataset.id = item.id;
    li.addEventListener('click', () => selectItem(item));
    suggestionsBox.appendChild(li);
  });
  suggestionsBox.classList.remove('d-none');
});

itemSearch.addEventListener('keydown', function (e) {
  const suggestions = suggestionsBox.querySelectorAll('li');
  if (!suggestions.length) return;

  if (e.key === 'ArrowDown') {
    e.preventDefault();
    selectedSuggestionIndex = (selectedSuggestionIndex + 1) % suggestions.length;
    highlightSuggestion(suggestions);
  } else if (e.key === 'ArrowUp') {
    e.preventDefault();
    selectedSuggestionIndex = (selectedSuggestionIndex - 1 + suggestions.length) % suggestions.length;
    highlightSuggestion(suggestions);
  } else if (e.key === 'Enter') {
    e.preventDefault();
    const selected = suggestions[selectedSuggestionIndex] || suggestions[0];
    if (selected) {
      selectItem({ id: selected.dataset.id, title: selected.textContent });
    }
  }
});

function highlightSuggestion(items) {
  items.forEach((li, index) => {
    li.classList.toggle('active', index === selectedSuggestionIndex);
  });
}

function selectItem(item) {
  const index = parseInt(totalForms.value);
  totalForms.value = index + 1;

  const row = document.createElement('tr');
  row.innerHTML = `
    <td>
      <input type="hidden" name="form-${index}-item" 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 row-input" data-next="form-${index}-unit_price" required></td>
    <td><input type="number" name="form-${index}-unit_price" class="form-control row-input" data-next="form-${index}-handling_charges" required></td>
    <td><input type="number" name="form-${index}-handling_charges" class="form-control row-input" data-next="item-search"></td>
    <td><button type="button" class="btn btn-danger btn-sm remove-row">X</button></td>
  `;
  formBody.appendChild(row);
  itemSearch.value = '';
  suggestionsBox.innerHTML = '';
  suggestionsBox.classList.add('d-none');
  selectedSuggestionIndex = -1;

  // Focus the quantity field
  document.querySelector(`[name="form-${index}-quantity"]`).focus();
}

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

formBody.addEventListener('input', function (e) {
  if (
    e.target.name.includes('quantity') ||
    e.target.name.includes('unit_price') ||
    e.target.name.includes('handling_charges')
  ) {
    updateGrandTotal();
  }
});

formBody.addEventListener('keydown', function (e) {
  if (e.key === 'Enter' && e.target.classList.contains('row-input')) {
    e.preventDefault();
    const nextName = e.target.dataset.next;
    const nextInput = nextName === 'item-search'
      ? document.getElementById('item-search')
      : document.querySelector(`[name="${nextName}"]`);
    if (nextInput) nextInput.focus();
  }
});

function updateIndexes() {
  const rows = formBody.querySelectorAll('tr');
  rows.forEach((row, idx) => {
    row.querySelectorAll('input').forEach(input => {
      const parts = input.name.split('-');
      if (parts.length === 3) {
        parts[1] = idx;
        input.name = parts.join('-');
        input.setAttribute('data-next', input.dataset.next?.replace(/form-\\d+-/, `form-${idx}-`));
      }
    });
  });
  totalForms.value = rows.length;
}

function updateGrandTotal() {
  let total = 0;
  document.querySelectorAll('#invoice-items-body tr').forEach(row => {
    const qty = parseFloat(row.querySelector('[name*=\"-quantity\"]')?.value) || 0;
    const price = parseFloat(row.querySelector('[name*=\"-unit_price\"]')?.value) || 0;
    const handling = parseFloat(row.querySelector('[name*=\"-handling_charges\"]')?.value) || 0;
    total += (qty * price) + handling;
  });
  document.getElementById('grand-total').value = total.toFixed(2);
}
updateGrandTotal();
</script>

{% endblock %}