{% extends 'lara_django_base/lara_base.html' %}
{% load render_table from django_tables2 %}
{% block content %}
  <div class="flex justify-between items-center mb-4">
  <div class="flex flex-col flex-none">
    <div class="h1 p-4 text-3xl font-bold text-gray-700">Device Baskets</div>
    <a href="{% url 'lara_django_material_store:device-basket-create' %}" class="btn bg-emerald-500">Create New Basket</a>
  </div>
  <div class="flex flex-col justify-between items-center">
    <button class="btn bg-sky-500/75 w-full" onclick="updateCheckoutSelectedItemsButton()">Checkout Selected Items</button>
    <button class="btn bg-red-700/75 w-full" onclick="updateDeleteSelectedItemsButton()">Delete Selected Items</button>
  </div>
  </div>
  <div class="divider"></div>
  {% for pair in basket_table_pairs %}
    <div id="table-container-{{ pair.basket.pk }}" class="table-header-container">
      <div class="relative grid grid-cols-3 justify-between gap-4 bg-gray-200 p-2">
        <div id="{{ pair.basket.pk }}" class="editable items-center group">
            <span>🧺</span>
            <span 
              class="editable-text cursor-pointer">
                {{ pair.basket.name_display }}
            </span>
            <span class="edit-icon ml-2 opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer">
              ✏️
            </span>
        </div>
        <div class="text-lg font-semibold text-gray-700">
          <span>Total:</span>
          <span id="total-price-{{ pair.basket.pk }}">{{ pair.basket.total_price_net }}</span>
        </div>
        <button class="btn btn-sm w-4 absolute right-4 top-1" onclick="updateDeleteBasketButton('{{ pair.basket.pk }}');"></button>
      </div>
      {% render_table pair.table %}
    </div>
    <div class="mb-5"></div>
  {% endfor %}
  
  <!-- Delete Item Modal -->
  <div id="delete-item-modal" class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50 hidden">
    <div class="bg-white p-8 rounded-lg shadow-lg w-96">
      <h2 class="text-xl mb-4">Are you sure you want to delete this item?</h2>
      <div class="flex justify-around">
        <button id="delete-item-button" onclick="this.closest('#delete-item-modal').classList.add('hidden');" class="btn btn-primary">Yes</button>
        <button type="button" onclick="this.closest('#delete-item-modal').classList.add('hidden');" class="btn btn-outline">Cancel</button>
      </div>
    </div>
  </div>

  <!-- Delete Selected Items Modal -->
  <div id="delete-selected-items-modal" class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50 hidden">
    <div class="bg-white p-8 rounded-lg shadow-lg w-96">
      <h2 class="text-xl mb-4">Are you sure you want to delete all selected items?</h2>
      <div class="flex justify-around">
        <button id="delete-selected-items-button" onclick="this.closest('#delete-selected-items-modal').classList.add('hidden');" class="btn btn-primary">Yes</button>
        <button type="button" onclick="this.closest('#delete-selected-items-modal').classList.add('hidden');" class="btn btn-outline">Cancel</button>
      </div>
    </div>
  </div>

  <!-- Checkout Selected Items Modal -->
  <div id="checkout-selected-items-modal" class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50 hidden">
    <div class="bg-white p-8 rounded-lg shadow-lg w-96">
      <h2 class="text-xl mb-4">Checkout all selected items?</h2>
      <div class="flex justify-around">
        <button id="checkout-selected-items-button" onclick="this.closest('#checkout-selected-items-modal').classList.add('hidden');" class="btn btn-primary">Yes</button>
        <button type="button" onclick="this.closest('#checkout-selected-items-modal').classList.add('hidden');" class="btn btn-outline">Cancel</button>
      </div>
    </div>
  </div>

  <!-- Delete Basket Modal -->
  <div id="delete-basket-modal" class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50 hidden">
    <div class="bg-white p-8 rounded-lg shadow-lg w-96">
      <h2 class="text-xl mb-4">Are you sure you want to delete this basket? <br> (all items in this basket will also be deleted!)</h2>
      <div class="flex justify-around">
        <button id="delete-basket-button" onclick="this.closest('#delete-basket-modal').classList.add('hidden');" class="btn btn-primary">Yes</button>
        <button type="button" onclick="this.closest('#delete-basket-modal').classList.add('hidden');" class="btn btn-outline">Cancel</button>
      </div>
    </div>
  </div>

  <script src="https://unpkg.com/htmx.org@1.9.2"></script>
  <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
  <script>
    var selectedIds = new Set();

    function updateDeleteItemButton(pk, tableId){
      var deleteItemButton = document.getElementById('delete-item-button');
      deleteItemButton.setAttribute('hx-post', '/material-store/device/basket/orderitem/delete/');
      deleteItemButton.setAttribute('hx-vals', JSON.stringify({ 'orderitem_id': pk }));
      deleteItemButton.setAttribute('hx-target', `table[data-table-id='t-${tableId}']`);
      document.querySelector('#delete-item-modal').classList.remove('hidden');
      htmx.process(deleteItemButton);
    }

    function updateDeleteSelectedItemsButton(tableId){
      if (selectedIds.size === 0) {
        alert('You haven\'t selected any items yet!');
        return;
      }
      var deleteSelectedItemsButton = document.getElementById('delete-selected-items-button');
      deleteSelectedItemsButton.setAttribute('hx-post', '/material-store/device/basket/orderitem/delete/');
      deleteSelectedItemsButton.setAttribute('hx-vals', JSON.stringify({ 'orderitem_ids[]': Array.from(selectedIds) }));
      deleteSelectedItemsButton.setAttribute('hx-target', 'body');
      document.querySelector('#delete-selected-items-modal').classList.remove('hidden');
      htmx.process(deleteSelectedItemsButton);
    }

    function updateCheckoutSelectedItemsButton(tableId){
      if (selectedIds.size === 0) {
        alert('You haven\'t selected any items yet!');
        return;
      }
      var checkoutSelectedItemsButton = document.getElementById('checkout-selected-items-button');
      checkoutSelectedItemsButton.setAttribute('hx-post', '/material-store/device/basket/orderitem/checkout/');
      checkoutSelectedItemsButton.setAttribute('hx-vals', JSON.stringify({ 'orderitem_ids[]': Array.from(selectedIds) }));
      checkoutSelectedItemsButton.setAttribute('hx-target', 'body');
      document.querySelector('#checkout-selected-items-modal').classList.remove('hidden');
      htmx.process(checkoutSelectedItemsButton);
    }

    function updateDeleteBasketButton(pk){
      basketCount = document.querySelectorAll('.table-header-container').length;
      if (basketCount > 1){
        var deleteBasketButton = document.getElementById('delete-basket-button');
        deleteBasketButton.setAttribute('hx-post', '/material-store/device/basket/delete/');
        deleteBasketButton.setAttribute('hx-vals', JSON.stringify({ 'basket_id': pk }));
        deleteBasketButton.setAttribute('hx-target', `#table-container-${pk}`);
        deleteBasketButton.setAttribute('hx-swap', 'outerHTML');
        document.querySelector('#delete-basket-modal').classList.remove('hidden');
        htmx.process(deleteBasketButton);
      } else {
        alert('You cannot delete the last basket');
      }
    }

    function initSortable() {
      document.querySelectorAll('.table-container table').forEach((table) => {
        const tableId = table.getAttribute('data-table-id');
        let numberId;
        if (tableId) {
          numberId = parseInt(tableId.replace('t-', ''))
        }
        const tableBody = document.getElementById(`basket-table-body-${numberId}`);

        if (!tableBody || tableBody.dataset.sortableInitialized) return;
        tableBody.dataset.sortableInitialized = "true";
        
        new Sortable(tableBody, {
          handle: '.basket-item',
          onEnd: function (evt) {
            doOnEnd(tableBody);
          }
        });
        doOnEnd(tableBody);
      });
    }

    function initCheckboxes(){
      document.querySelectorAll('.table-container table').forEach(function (table) {
      const tableId = table.getAttribute('data-table-id')
      // remove "t-" to get the table id in number
      let numberId;
      if (tableId) {
        numberId = parseInt(tableId.replace('t-', ''))
      }
      const tableBody = document.getElementById(`basket-table-body-${numberId}`)

      // get orderItem ids from the checkboxes
      function updateSelectedIds() {
        const selectedCheckboxes = document.querySelectorAll('.row-checkbox:checked')
        selectedIds.clear()
        selectedCheckboxes.forEach(function (checkbox) {
            selectedIds.add(checkbox.getAttribute('data-orderitem-id'))
        })
      }
      // update individual checkboxes while clicking Select All checkbox
      const rowCheckboxes = table.querySelectorAll(`.row-checkbox[data-table-id="${tableId}"]`)
      const selectAllCheckbox = document.querySelector(`#select-all-${numberId}`)
      selectAllCheckbox.addEventListener('change', function () {
        rowCheckboxes.forEach(function (checkbox) {
          checkbox.checked = selectAllCheckbox.checked
        })
        updateSelectedIds();
      })
  
      // Update "Select All" checkbox based on individual row checkboxes
      rowCheckboxes.forEach(function (checkbox) {
        checkbox.addEventListener('change', function () {
          updateSelectedIds();
          if (!checkbox.checked) {
            selectAllCheckbox.checked = false
          } else {
            const allChecked = Array.from(rowCheckboxes).every((cb) => cb.checked)
            selectAllCheckbox.checked = allChecked
          }
        })
      })
    })}

    function doOnEnd(tableBody) {
      const sortedIDs = Array.from(tableBody.querySelectorAll('tr[data-id]')).map((tr) => tr.dataset.id);
      tableBody.setAttribute('hx-vals', JSON.stringify({ 'sorted_ids[]': sortedIDs }));
      tableBody.dispatchEvent(new Event('change', { bubbles: true }));
    }

    // reinitialize sortable and checkboxes after deleting an item
    document.body.addEventListener('htmx:afterSwap', function (event) {
      initSortable();
    });

    document.addEventListener('DOMContentLoaded', function () {

      initSortable();
      document.querySelectorAll('.table-container table').forEach(function (table) {
      const tableId = table.getAttribute('data-table-id')
      // remove "t-" to get the table id in number
      let numberId;
      if (tableId) {
        numberId = parseInt(tableId.replace('t-', ''))
      }
      const tableBody = document.getElementById(`basket-table-body-${numberId}`)

      // get orderItem ids from the checkboxes
      function updateSelectedIds() {
        const selectedCheckboxes = document.querySelectorAll('.row-checkbox:checked')
        selectedIds.clear()
        selectedCheckboxes.forEach(function (checkbox) {
            selectedIds.add(checkbox.getAttribute('data-orderitem-id'))
        })
      }
      // update individual checkboxes while clicking Select All checkbox
      const rowCheckboxes = table.querySelectorAll(`.row-checkbox[data-table-id="${tableId}"]`)
      const selectAllCheckbox = document.querySelector(`#select-all-${numberId}`)
      selectAllCheckbox.addEventListener('change', function () {
        rowCheckboxes.forEach(function (checkbox) {
          checkbox.checked = selectAllCheckbox.checked
        })
        updateSelectedIds();
      })
  
      // Update "Select All" checkbox based on individual row checkboxes
      rowCheckboxes.forEach(function (checkbox) {
        checkbox.addEventListener('change', function () {
          updateSelectedIds();
          if (!checkbox.checked) {
            selectAllCheckbox.checked = false
          } else {
            const allChecked = Array.from(rowCheckboxes).every((cb) => cb.checked)
            selectAllCheckbox.checked = allChecked
          }
        })
      })
    })

      
      // logic for editing basket name
      document.querySelectorAll(".editable").forEach(function(container) {
        const textElement = container.querySelector(".editable-text");
        const editIcon = container.querySelector(".edit-icon");

        editIcon.addEventListener("click", function() {
          const input = document.createElement("input");
          input.type = "text";
          input.value = textElement.textContent.trim();
          input.className = "border border-gray-400 p-1 rounded";
          input.style.width = (input.value.length + 5) + "ch";

          container.replaceChild(input, textElement);
          input.focus();

          const submitEdit = async () => {
            const response = await fetch(`/material-store/device/basket/update_name/${container.id}`, {
              method: "PUT",
              headers: {
                "Content-Type": "application/json",
                "X-CSRFToken": "{{ csrf_token }}"
              },
              body: JSON.stringify({ name: input.value })
            });
            textElement.textContent = input.value;
            container.replaceChild(textElement, input);
          };

          input.addEventListener("blur", submitEdit, { once: true });
        });
      });
    })
  </script>
{% endblock %}