{% extends 'lara_django_base/lara_base.html' %}
{% load render_table from django_tables2 %}
{% block content %}
  <div class="flex justify-between">
    <div class="h1 p-4 text-3xl font-bold text-gray-700">Order Admin</div>
    <div class="m-4">
      <input type="text" id="search-input" class="input input-bordered w-full max-w-xs" placeholder="Search for orders..." />
    </div>
  </div>
  <div class="divider"></div>
  
  {% if order_table_pairs %}
    {% for pair in order_table_pairs %}
    <div class="pair-container">
      <div class="relative grid grid-cols-4 justify-between gap-4 bg-gray-200 p-2 text-lg font-semibold text-gray-700">
        <div>Date: {{ pair.order.datetime_order }}</div>
        <div>Total: {{ pair.order.order_total_price_net }}</div>
        <div>User: {{ pair.order.entity_ordered }}</div>
        <div>
          Status: {{ pair.order.order_status.status }}
          <button class="btn btn-sm btn-neutral" onclick="showStatusEditModal('{{pair.order.pk}}','{{pair.order.order_status.status}}');">edit</button>
        </div>
      </div>
      {% render_table pair.table %}
    </div>
      <div class="mb-4"></div>
    {% endfor %}

    <!-- Modal for status change -->
    <dialog id="status_edit_modal" class="modal">
      <div class="modal-box">
        <h3 class="font-bold text-lg mb-4">Edit Status</h3>

        <form id="status-form">
          {% for status_ in status  %}
            <div class="form-control">
              <label class="label cursor-pointer">
                <span class="label-text">{{status_}}</span>
                <input type="radio" name="status" value="{{status_}}" class="radio checked:bg-green-500" />
              </label>
            </div>
          {% endfor %}
          <div class="text-red-500 text-sm mb-4">
            <p>Changing the status to "delivered" will create a new device instance.</p>
          </div>
          <div class="modal-action">
            <button method="dialog" class="btn btn-outline">Cancel</button>
            <button type="submit" class="btn btn-primary" id="status_edit_modal_button">Confirm</button>
          </div>
        </form>
      </div>
      <form method="dialog" class="modal-backdrop">
        <button>close</button>
      </form>
    </dialog>
  {% else %}
    <div class="p-4 text-xl font-bold text-gray-700">No orders found.</div>
  {% endif %}

<script>
  // Search functionality
  const searchInput = document.getElementById('search-input');
  const pairs = document.querySelectorAll('.pair-container');
  searchInput.addEventListener('input', function() {
    const query = searchInput.value.toLowerCase();
    pairs.forEach(function(pair) {
      const text = pair.textContent.toLowerCase();
      if (text.includes(query)) {
        pair.style.display = '';
      } else {
        pair.style.display = 'none';
      }
    });
  });
  
  // Modal functionality
  const status_edit_modal = document.getElementById('status_edit_modal');
  function showStatusEditModal(orderId, status) {
    status_edit_modal.showModal();
    const button = document.getElementById('status_edit_modal_button');
    button.setAttribute('hx-post', '/material-store/device/orders/edit_status');
    button.setAttribute('hx-vals', JSON.stringify({ 'order_id': orderId }));
    htmx.process(button);

    const radios = document.querySelectorAll('#status-form input[name="status"]');
    radios.forEach(radio => {
        if (radio.value === status) {
            radio.checked = true;
        } else {
            radio.checked = false;
        }
    });
  }
  </script>
{% endblock %}