{% extends "base.html" %}
{% load static %}


{% block 'head' %}
<link rel="stylesheet" href="{% static 'products/css/products.css' %}">
{% endblock %}

{% block 'title' %}
Produtos
{% endblock %}


{% block 'body' %}

<body>
    <div class="grid-container">
        <div class="grid-top">
          <button class="btn-primary"
           onclick="openModal()" id="openModal">Novo Produto</button>
          <input type="text" id="search-product" name="search-product" placeholder="Buscar Produto" hx-get="{% url 'searchProduct' %}" hx-trigger="keyup" hx-target="#product-list">
        </div>

        <table id="product-list">
          <tr>
            <th style="text-align: left;">Produto</th>
            <th style="text-align: left;width: 20%;">Preço</th>
            <th class="hide-on-mobile" style="text-align: left;">Quantidade</th>
            <th class="hide-on-mobile" style="text-align: left;">Categoria</th>
            <th style="text-align: left;width: 20%;">Ações</th>
          </tr>
  
      {% for product in products %}

      <tr>
        <td id="name-{{product.id}}" >{{product.name}}</td>
        <td id="price-{{product.id}}" >R$ {{product.price}}</td>
        <td class="hide-on-mobile" id="quantity-{{product.id}}" >{{product.quantity}}</td>
        <td class="hide-on-mobile" id="category-{{product.id}}" >{{product.category.name}}</td>
        <td>
          <div class="grid-buttons">
          <img 
          src="{% static 'midia/icons/edit.svg' %}" 
          style=" width: 35px; height: 35px; cursor: pointer;" 
          onclick="editProduct({{product.id}})" >
        </img>

          <input type="hidden" id="h-category-{{product.id}}" value="{{ product.category.id }}">
          <input type="hidden" id="description-{{product.id}}" value="{{ product.description }}">
          <input type="hidden" id="cuisine-{{product.id}}" value="{{ product.cuisine }}">

          <form hx-post="{% url 'onOffproduct' %}" hx-trigger="click"  hx-target="#product-list">
            {% csrf_token %}
            <input type="hidden"  name="id-product" id="id-{{product.id}}" value="{{ product.id }}">

          {% if product.active == True %}
          <button style="background-color: rgba(255, 0, 0, 0); padding: 0px;border: 0px;">
            <span data-tooltip="Ativar ou Desativar Produto" data-flow="top">
              <img 
              src="{% static 'midia/icons/toggle-on.svg' %}" 
              style=" width: 35px; height: 35px; cursor: pointer;" >
            </img>
          </span>
          </button>
          {% else %}
          <button style="background-color: rgba(0, 128, 0, 0); padding: 0px;border: 0px;" >
            <span data-tooltip="Ativar ou Desativar Produto" data-flow="top">
            <img 
              src="{% static 'midia/icons/toggle-off.svg' %}" 
              style=" width: 35px; height: 35px; cursor: pointer;" >
            </img>
            <span>
          </button>

          {% endif %}

        </form>
      </div>
        </td>
      </tr>
  
      {% endfor %} 

    </table>
    </div>
  </body>
  
    <dialog  id='Modal-create-product'  >
      <article >
        <form action="{% url 'create_product' %}" id="productForm" method="post" >

          {% csrf_token %}
            <h2>Cadastro de Produto</h2>
            <input  type="text" id="productId" name="productId"  hidden >
            <input  type="text" id="productName" name="name" required placeholder="Nome">
             <input type="number" step="0.01" id="productPrice" name="price" required placeholder="Preço">
             <input type="number" step="1" id="productqtd" name="qtd"  placeholder="Quantidade">
              <div>
             <input type="checkbox" id="cuisine" name="cuisine" placeholder="Cozinha">Cozinha
            </div>
              <select id="select-categorie" name="select-categorie" >

                {% for categorie in categories %}
                <option value="{{categorie.id}}">{{categorie.name}}</option>
                {% endfor %}

              </select>
            <textarea id="productDescription" name="description" rows="4" placeholder="Descrição"></textarea>
            <footer>
              <div style="display: flex;gap: 10px;">

                
                <button class="btn-primary" id="save" type="submit">Salvar</button>
                <button class="btn-primary" type="submit" onclick="closeModal()" type="button" id="edit" hx-post="{% url 'editProduct' 1 %}" hx-trigger="click"  hx-target="#product-list" >Alterar</button>
                <button class="btn-cancel" type="button" onclick="closeModal()">Cancelar</button>
              </div>
            </footer>
        </form>

      </article>
    </dialog>


<script src="{% static 'products/js/products.js' %}"></script>

{% endblock %}