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


{% block 'title' %}
Comandas
{% endblock %}

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

{% block 'body' %}

<body>
  <div style="justify-self: center;">
    <button class="btn-primary" id="openModal">Abrir Comanda</button>
  </div>
  
    <div class="grid-container ">

    {% for comanda in comandas %}
    <div class="card-comanda">
      <a  href="{% url 'viewcomanda' %}?parametro={{ comanda.id }}" style="text-decoration: none; ">
        <header 
          {% if comanda.status == 'OPEN' %}
          style="padding: 5px; min-height: 60px;border-radius: 5px 5px 0px 0px; background-color: #036800;"
          {% elif comanda.status == 'PAYING' %}
          style="padding: 5px; min-height: 60px;border-radius: 5px 5px 0px 0px; background-color: rgb(165, 86, 33);"
          {% endif %}
            > 
            <p>{{comanda.name}}</p>
            <p>{{comanda.mesa}}</p>
        </header>
          <div style="padding: 5px;">
            <p>
              Hora: {{comanda.dt_open|date:"H:i"}}
            </p>
            <p>
              {{ comanda.id | total }}
            </p>
          </div>
      </a>
    </div>
    {% endfor %} 


  </div>

  <dialog  id="Modal-create-comanda">
    <article >
        <form id="form-comanda" method="post" action="{% url 'createComanda' %}">
            {% csrf_token %}
            <h2>Abrir Comanda</h2>
            <input type="text" id="name-comanda" name="name-comanda" required placeholder="Nome"><br>
             <select name="select-mesa" required>
              <option value="">Selecione um local</option>

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

            </select>
            <div style="display: flex;gap: 10px;">
              <button class="btn-primary" type="submit">Abrir</button>
              <button class="btn-cancel" type="button" onclick="closeModal()">Cancelar</button>
            </div>
        </form>
    </article>
</dialog >
</body>
<script src="{% static 'comandas/js/comandas.js' %}"></script>




{% endblock %}