{% extends "admin/base_site.html" %}
{% load i18n admin_urls %}

{% block breadcrumbs %}
<div class="breadcrumbs">
  <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a> ›
  <a href="{% url 'admin:app_list' opts.app_label %}">{{ opts.app_config.verbose_name }}</a> ›
  <a href="{% url opts|admin_urlname:'changelist' %}">{{ opts.verbose_name_plural|capfirst }}</a> ›
  {% trans 'Discover' %}
</div>
{% endblock %}

{% block content %}
{% if credential_error %}
  <div class="messagelist">
    <div class="error">{{ credential_error }}
      {% if profile_url %}
        <a href="{{ profile_url }}">{% trans 'Manage Odoo credentials' %}</a>
      {% endif %}
    </div>
  </div>
{% endif %}

{% if error %}
  <div class="messagelist">
    <div class="error">{{ error }}</div>
  </div>
{% endif %}

{% if debug_error %}
  <div class="messagelist">
    <div class="warning">
      <strong>Debug details</strong>
      <pre>{{ debug_error }}</pre>
    </div>
  </div>
{% endif %}

{% if form_error %}
  <div class="messagelist">
    <div class="error">{{ form_error }}</div>
  </div>
{% endif %}

{% if has_credentials %}
<form method="post">
  {% csrf_token %}
  <p class="help">{% trans 'Select a product from Odoo to create it in Arthexis.' %}</p>
  <table class="adminlist">
    <thead>
      <tr>
        <th>{% trans 'Select' %}</th>
        <th>{% trans 'Name' %}</th>
        <th>{% trans 'Sales description' %}</th>
        <th>{% trans 'Price' %}</th>
        <th>{% trans 'Original cost' %}</th>
      </tr>
      <tr class="filter-row">
        <th></th>
        <th>
          <input
            type="text"
            class="column-filter"
            data-column="1"
            placeholder="{% trans 'Filter name' %}"
            aria-label="{% trans 'Filter name' %}"
          >
        </th>
        <th>
          <input
            type="text"
            class="column-filter"
            data-column="2"
            placeholder="{% trans 'Filter sales description' %}"
            aria-label="{% trans 'Filter sales description' %}"
          >
        </th>
        <th>
          <input
            type="text"
            class="column-filter"
            data-column="3"
            placeholder="{% trans 'Filter price' %}"
            aria-label="{% trans 'Filter price' %}"
          >
        </th>
        <th>
          <input
            type="text"
            class="column-filter"
            data-column="4"
            placeholder="{% trans 'Filter original cost' %}"
            aria-label="{% trans 'Filter original cost' %}"
          >
        </th>
      </tr>
    </thead>
    <tbody>
      {% for product in products %}
        <tr>
          <td>
            <input
              type="radio"
              name="product_id"
              value="{{ product.id }}"
              {% if product.id|stringformat:'s' == selected_product_id %}checked{% endif %}
            >
          </td>
          <td>{{ product.name }}</td>
          <td>{{ product.description_sale }}</td>
          <td>{{ product.list_price }}</td>
          <td>{{ product.standard_price }}</td>
        </tr>
      {% empty %}
        <tr>
          <td colspan="5">{% trans 'No products available from Odoo.' %}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
  <div class="submit-row">
    <button type="submit" class="button default">{% trans 'Register product' %}</button>
  </div>
</form>
{% endif %}
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const table = document.querySelector('.adminlist');
    if (!table) {
      return;
    }

    const filters = table.querySelectorAll('input.column-filter[data-column]');
    if (!filters.length) {
      return;
    }

    const tbody = table.querySelector('tbody');
    const rows = Array.from(tbody.querySelectorAll('tr'));

    function applyFilters() {
      rows.forEach((row) => {
        const cells = row.querySelectorAll('td');
        let isVisible = true;

        filters.forEach((filterInput) => {
          const columnIndex = parseInt(filterInput.dataset.column, 10);
          const filterValue = filterInput.value.trim().toLowerCase();

          if (!filterValue) {
            return;
          }

          const cellText = (cells[columnIndex] ? cells[columnIndex].textContent : '').trim().toLowerCase();

          if (!cellText.includes(filterValue)) {
            isVisible = false;
          }
        });

        row.style.display = isVisible ? '' : 'none';
      });
    }

    filters.forEach((filterInput) => {
      filterInput.addEventListener('input', applyFilters);
    });
  });
</script>
{% endblock %}