{% extends 'base.html' %}

<!-- START OF NEW CONTENT  -->
<!-- 
  Note: See TailwindUI preview and TailwindCSS docs, they are used heavily
 -->

{% block content %}

<div>
  <!-- Project List Heading -->
  <header class="pt-6">
    <div
      class="flex items-center justify-between max-w-5xl mx-auto pt-4 px-4 sm:px-6 lg:px-8"
    >
      <h3 class="text-xl">Products</h3>
      {% if errors %}
      <button
        id="errors-page-link"
            class="bg-red-500 hover:bg-red-700 text-white font-medium py-2 px-4 mr-2 rounded"
      >
      <a href="/errors">Economy is broken. See errors.</a>
      </button>
      {% endif %}
      <div>
        <div class="flex">
            <form method="get">
              <!--{{myFilter.form}}-->
              <input
                class="appearance-none rounded-none mr-4 px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5"
                placeholder="Search for product"
                name ="note"
                {% if products|length < 1 and not has_filter %}
                disabled
                {% endif %}
              />
            </form>
          {% if user.is_authenticated %}
            <button
              id="modal-trigger"
              class="modal-open bg-indigo-500 hover:bg-indigo-700 text-white font-medium py-2 px-4 mr-2 rounded"
            >
              Create
            </button>
            <form action="{{ request.scheme }}://{{ request.get_host }}/api/edit/commit-history/" method="post">
                {% csrf_token %}
                <button type="submit" name="Execute History Logging" class="modal-open bg-indigo-500 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded">
                  Commit History
                </button>
            </form>
          {% endif %}
          <button 
              class="modal-open bg-indigo-500 hover:bg-indigo-700 text-white font-medium py-2 px-4 ml-2 rounded"
              onclick="window.location.href='/products/analytics'"
            >
            Analytics 
          </button>
        </div>
      </div>
    </div>
  </header>
  <!-- End Project List Heading -->

  <!-- Product List -->
  <div class="max-w-5xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
    <div class="flex flex-col">
      <div class="-my-2 py-2 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
        <div
          class="bg-white align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200"
        >
          <table class="min-w-full">
            <tbody class="bg-white">
              <!-- if product list has items: render the list -->
              {% if products|length > 0 %} 
                {% for product in products %}
                <tr
                  class="cursor-pointer"
                  onclick="location.href = '/product/{{product.name}}';"
                >
                
                  <td
                    class="px-6 py-4 whitespace-no-wrap border-b border-gray-200"
                  >
                    <div>
                      <div class="ml-4">
                        {{ product.name }}
                      </div>
                      <div class="flex">
                        <div class="ml-4 text-sm leading-5 text-gray-500">
                          Estimated cost: ${{product.cost_price|floatformat:2}}
                        </div>
                        <div class="ml-4 text-sm leading-5 text-gray-500">
                          Estimated labor time: {{product.value|floatformat:3}} h
                        </div>
                        <div class="ml-4 text-sm leading-5 text-gray-500">
                          Unit of Measurement: {{product.measurement}}
                        </div>
                      </div>
                    </div>
                  </td>
                  <td
                    class="px-6 py-4 whitespace-no-wrap border-b border-gray-200"
                  ></td>
                </tr>
                {% endfor %}
              {% elif user.is_authenticated and has_filter == None %}
                <div class="flex items-center justify-center py-6">
                  Click the "Create" button to get started!
                </div>
              {% elif has_filter %}
                <div class="flex items-center justify-center py-6">
                  Uh oh, no products matched that search.
                </div>
              {% else %}
                <div class="flex items-center justify-center py-6">
                  Login to start adding some products!
                </div>
              {%endif%}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <!-- End Product List -->

  <!-- Product List Paginator -->
  {% if products.paginator.page_range|length > 1 or current_page != 1 %}
  <div
    class="flex justify-end items-center max-w-5xl mx-auto pt-2 px-4 sm:px-6 lg:px-8"
  >
    <nav class="relative inline-flex shadow-sm">
      {% if products.has_previous %}
        <a
          href="?page={{products.previous_page_number}}"
          class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-500 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150"
          aria-label="Previous"
        >
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path
              fill-rule="evenodd"
              d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
              clip-rule="evenodd"
            />
          </svg>
        </a>
      {% else %}
        <a
          class="disabled relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-500"
          aria-label="Previous"
        >
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path
              fill-rule="evenodd"
              d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
              clip-rule="evenodd"
            />
          </svg>
        </a>
      {% endif %}

      {% if products.paginator.page_range|length >= 5 %}
      {% comment %} use context page range {% endcomment %}
        {% for i in page_range %}
          {% if i.0 and i.0 == '...'%}
            <a
              href="?page={{i.1}}"
              class="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
            >
              {{i.0}}
            </a>

          {% elif products.number == i %}
            <a
              href="?page={{i}}"
              class="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue bg-gray-100 text-gray-700 transition ease-in-out duration-150"
            >
              {{i}}
            </a>
          {% else %}
            <a
              href="?page={{i}}"
              class="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
            >
              {{i}}
            </a>
          {% endif %}
        {% endfor %}

      {% else %}
        {% for i in products.paginator.page_range %}
          {% if products.number == i %}
            <a
              href="?page={{i}}"
              class="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue bg-gray-100 text-gray-700 transition ease-in-out duration-150"
            >
              {{i}}
            </a>
          {% else %}
            <a
              href="?page={{i}}"
              class="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
            >
              {{i}}
            </a>
          {% endif %}
        {% endfor %}
      {% endif %}
      {% if products.has_next %}
        <a
          href="?page={{products.next_page_number}}"
          class="-ml-px relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-500 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150"
          aria-label="Next"
        >
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path
              fill-rule="evenodd"
              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
              clip-rule="evenodd"
            />
          </svg>
        </a>
      {% else %}
        <a
          class="disabled -ml-px relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-500"
          aria-label="Next"
        >
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path
              fill-rule="evenodd"
              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
              clip-rule="evenodd"
            />
          </svg>
        </a>
      {% endif %}
    </nav>
  </div>
  {%endif%}
  <!-- End Product List Paginator -->

  <!-- MODAL -->
  <div
    class="modal opacity-0 pointer-events-none fixed inset-x-0 px-4 pb-4 sm:inset-0 sm:flex sm:items-center sm:justify-center"
  >
    <!-- This is the blurred, gray bg  -->
    <!-- TODO: Broken on mobile -->
    <div
      class="modal-closer absolute bg-gray-900 opacity-50"
      style="width: 110vw; height: 110vh;"
    ></div>

    <div
      class="bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:max-w-lg sm:w-full"
    >
      <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
        <!-- Modal Title  -->
        <h3 class="text-lg leading-6 font-medium text-gray-900">
          Create Product
        </h3>
        <!-- Modal Subtitle -->
        <div class="mt-2">
          <p class="text-sm leading-5 text-gray-500">
            Fill out the form beneath this prompt and hit confirm to create your
            new product
          </p>
        </div>
        <!-- End Modal Subtitle -->
        <!-- End Modal Title -->

        <!--Modal Content -->
        <form method="POST" action="{{ request.scheme }}://{{ request.get_host }}/api/create/product">
          {% csrf_token %}
          <input type="hidden" name="page" value={{products.number}} />
          <div class="mt-4 mb-6">
            <div class="flex items-center mx-auto mb-4">
              <div class="w-1/2 px-2">
                <label
                  class="px-2 block text-gray-700 text-sm font-medium mb-2"
                >
                  Name
                </label>
                <input
                  name="name"
                  required
                  class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5"
                  placeholder="Name of your product"
                />
              </div>
              <div class="w-1/2 px-2">
                <label
                  class="px-2 block text-gray-700 text-sm font-medium mb-2"
                >
                  Unit of Measurement
                </label>
                <input
                  name="measurement"
                  required
                  class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5"
                  placeholder="Yard, barrel, ton, etc."
                />
              </div>
            </div>
            <div class="flex items-center mx-auto mb-4">
              <div class="w-1/2 px-2">
                <label
                  class="px-2 block text-gray-700 text-sm font-medium mb-2"
                >
                  Current Real Price
                </label>
                <input
                  name="real_price"
                  required
                  class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5"
                  placeholder="$"
                />
              </div>
              <div class="w-1/2 px-2">
                <label
                  class="px-2 block text-gray-700 text-sm font-medium mb-2"
                >
                  Direct Labor Time
                </label>
                <input
                  name="direct_labor"
                  required
                  class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5"
                  placeholder=""
                />
              </div>
              <div class="w-1/2 px-2">
                <label
                  class="px-2 block text-gray-700 text-sm font-medium mb-2"
                >
                  Direct Wages
                </label>
                <input
                  name="direct_wages"
                  required
                  class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5"
                  placeholder="$"
                />
              </div>
            </div>


            <!----------------------------------------------------------------->
            <!--INDIRECT WAGES AND INCOME INPUTES WERE HERE, BUT WERE REMOVED-->
            <!----------------------------------------------------------------->
          </div>
          <!--Modal Actions-->
          <div class="bg-gray-50 sm:px-2 sm:flex sm:flex-row-reverse">
            <!-- BUTTON TO FINALIZE CREATION -->
            <span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
              <button
                type="submit"
                class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-indigo-600 text-base leading-6 font-medium text-white shadow-sm hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo transition ease-in-out duration-150 sm:text-sm sm:leading-5"
              >
                Confirm
              </button>
            </span>
            <!-- BUTTON TO CANCEL CREATION-->
            <span
              class="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto"
            >
              <button
                type="button"
                class="modal-closer inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-base leading-6 font-medium text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition ease-in-out duration-150 sm:text-sm sm:leading-5"
              >
                Cancel
              </button>
            </span>
          </div>
          <!-- End Actions -->
        </form>
        <!-- End Content -->
      </div>
    </div>
  </div>
  <!-- End Modal -->
  <!-- END  -->
</div>

<script>
  // I use id for open trigger bc one occurrence on this template
  // I use classes for close triggers bc multiple occurrences (the cancel button and outside click)

  let modalTrigger = document.getElementById("modal-trigger");

  // should always exist, but check for safety
  if (modalTrigger) {
    modalTrigger.addEventListener("click", () => {
      const modalContent = document.querySelector(".modal");

      // should always exist but check for safety
      if (modalContent) {
        modalContent.classList.toggle("opacity-0");
        modalContent.classList.toggle("pointer-events-none");
      }
    });
  }

  let modalClosers = document.querySelectorAll(".modal-closer");
  if (modalClosers) {
    modalClosers.forEach((modalCloser) => {
      console.log(modalCloser);
      modalCloser.addEventListener("click", () => {
        const modalContent = document.querySelector(".modal");

        // should always exist but check for safety
        if (modalContent) {
          modalContent.classList.toggle("opacity-0");
          modalContent.classList.toggle("pointer-events-none");
        }
      });
    });
  }
</script>

{% endblock %}
