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



{% block 'title' %}

Detalhes {{comanda.name}}

{% endblock %}


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


{% block 'body' %}

<body>
  <input hidden id="id-temp" type="number">
  <div class="grid-container" >
    <div>
      <button class="btn-primary" id="openModal" onclick="openModal()"
      {%  if comanda.status != 'OPEN'%}
       disabled
       {% endif %}
       >Add Produto</button>

      <button class="btn-cancel" id="pagarComanda" hx-get="{% url 'closeComanda' comanda.id %} " hx-trigger="click" hx-swap="none"  onclick="imprimirConta()"
      {% if comanda.status != 'OPEN' %}
      style="display: none;"
      {% endif %}
      >Fechar Conta</button>

      {% if comanda.status == 'PAYING' %}
      <button class="btn-secondary" id="pagarComanda" onclick="modal_payment_comanda()">Receber</button>
      {% else %}


      {% endif %}
  
      {%  if comanda.status != 'OPEN'%}
      <button class="btn-primary" id="imprimirFichas" 
      style="display: none;"
      onclick="imprimirFichas()">Fichas</button>
      {% endif %}
      
      {% if user|groupUser:"Gerente" %}
      <button class="btn-primary" id="imprimirFichas" hx-get="{% url 'reopenComanda' comanda.id %} " hx-trigger="click" hx-swap="none"  onclick="reloadPage()"
      {%  if comanda.status == 'OPEN'%}
      style="display: none;"
      {% elif comanda.status == 'CLOSED' %}
      style="display: none;"
      {% endif %}
      >Reabrir</button>

      {% endif %}

    </div>
     <div>
      <input hidden type="text" id="h-mesaId" value="{{comanda.mesa.id}}">
       <span id="name-comanda">Nome: {{comanda.name}} | </span>
       <span id="mesa-comanda">Local: {{comanda.mesa}}</span>

       <img
        onclick="openModalAlter()"
        src="{% static 'midia/icons/pen.svg' %}"
        style="width: 30px; height: 35px; cursor: pointer;">
      </img>

     </div>
    <p id="open-comanda">Aberta em: {{comanda.dt_open|date:"D"}} {{comanda.dt_open|date:"d/m/Y - H:i"}}</p>

<img hidden src="{% static 'midia/logo.png' %}" style="width: 240px; height: 200px;">
    <table id="list-products-comanda">
      <tr>
        <th style="text-align: left;">Produto</th>
        <th style="text-align: left;">Preço</th>
      </tr>

    {%  for item in consumo%}

    <tr>
      <td >
        {{item.product.name}}
        {% if item.product.cuisine == True %}
        <span data-tooltip="Observações para preparo." data-flow="top">

          <img
          onclick="openModalObs({{item.id}})"
          src="{% static 'midia/icons/note.svg' %}"
          style="width: 25px; height: 35px; cursor: pointer;">
        </img>
      </span>
        {% endif %}

      </td>
      <td>R$ {{item.product.price}}</td>



      
      {%  if comanda.status != 'OPEN'%}
      {% else %}
      <td>
        <img
        src="{% static 'midia/icons/delete.svg' %}"
        style="width: 35px; height: 35px; cursor: pointer;"
        hx-get="{% url 'removeProductComanda' item.id  %} " 
        hx-trigger="click" 
        hx-target="#list-products-comanda" 
        hx-confirm="Tem certeza que deseja excluir o produto {{item.product.name}}?" >
      </img>
      </td>
        {% endif %}
      </tr>
        {% endfor %}
    <tfoot>
      <tr>
        <td colspan="2" style="text-align: center;">Total R$ {{total}}</td>
      </tr>
    </tfoot>
  </table>


  </div>


    <dialog id="Modal-add-product" style="display: none;" >
      <article>
        <form id="productForm" >
          <div style="display: flex;justify-content: space-around;">
            <h2>Adicionar Produto</h2> <button class="btn-cancel" type="button" onclick="closeModal()">Fechar</button>
          </div>
          
            <input type="text" id="search-product" name="search-product" placeholder="Buscar Produto" hx-get="{% url 'listProduct' comanda.id %}" hx-trigger="keyup" hx-target="#product-list"><br>
              <div id="product-list" class="grid-list-products">
                {% for product in products %}

                <article class="card-product" onclick="addProductComanda({{product.id}}, {{comanda.id}}, '{{product.cuisine}}')" >
                  {{product.name}} <br>
                  R$ {{product.price}}
                </article >
                {% endfor %}
              </div>
        </form>
      </article>
    </dialog>

    <dialog id="modal-obs" style="display: none;">
      <article>
        <h2>Observação do Pedido</h2>
        <p>Observações do pedido que serão enviadas para o preparo na cozinha.</p>
        <textarea placeholder="Ex.: pedido sem cebola. para viagem." name="obs" id="obs"></textarea>
        <div>
          <div style="display: flex;gap: 10px;">
          <button type="submit" class="btn-primary" onclick="addOrder()" >OK</button>
          <button type="button" class="btn-cancel" onclick="closeModalObs()">Cancela</button>
        </div>
    </article>
      </dialog>



<dialog id="payment-comanda" style="display: none;" >
  <article>
    <h2>Pagamento</h2>
    <h1 id="first-total">R$ {{ total }}</h1>
    <div>
      <p>Recebido:</p> <input id="recebido" type="number">
      <h4 id="troco">Troco: </h4>
    </div>
    <footer>
      <div style="display: flex;gap: 10px;">

        <button type="submit" class="btn-secondary" hx-get="{% url 'paymentComanda' comanda.id %} " hx-trigger="click" hx-swap="none"  onclick="backPage()">Receber</button>
        <button type="button" class="btn-primary"  onclick=" modal_conta_client()">
          Conta
        </button>
        <button type="button" class="btn-cancel" onclick="close_modal_payment_comanda()">Cancelar</button>
      </div>
    </footer>
  </article>
</dialog>


<dialog  id="Modal-alter-comanda">
  <article >
      <form id="form-comanda" method="post" action="{% url 'editComanda' %}">
          {% csrf_token %}
          <h2>Editar Comanda</h2>
          <input hidden type="text" name="h-comandaId"  id="h-comandaId" value="{{comanda.id}}">
          <input type="text" id="nameComanda" name="nameComanda" required placeholder="Nome"><br>
          <select name="select-mesa" id="select-mesa" required >
            

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

          </select>
          <div style="display: flex;gap: 10px;">
          <button type="submit" class="btn-primary">Alterar</button>
          <button type="button" class="btn-cancel" onclick="closeModalAlter()">Cancelar</button>
        </div>
        </form>
  </article>
</dialog >



<dialog id="conta-cliente" style="display: none;" >
  <article>
    <form id="form-comanda" method="post" action="{% url 'addContaCliente' %}">
      {% csrf_token %}
    <h2>Adicionar na Conta</h2>
    <h1>R$ {{ total }}</h1>
    <div>
      <input hidden type="text" name="valor-conta" value="{{ total }}">
      <input hidden type="text" name="idComanda" value="{{ comanda.id }}">
      <p>Selecione o Cliente:</p>
       <select name="select-client" id="select-client" required>
        <option value="">Selecione um cliente</option>

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

       </select>
    </div>
    <footer>
      <div style="display: flex;gap: 10px;">
        <button type="submit" class="btn-primary"> Adicionar a conta</button>
        <button type="button" class="btn-cancel" onclick="close_modal_conta_client()">Cancelar</button>
      </div>
    </form>
    </footer>
  </article>
</dialog>



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

</body>


{% endblock %}