


<div class="tab">
    <button class="tablinks active" onclick="openTab(event, 'Fila')">Fila</button>
    <button class="tablinks" onclick="openTab(event, 'Preparo')">Preparo</button>
    <button class="tablinks" onclick="openTab(event, 'Finalizado')">Pronto</button>
    <button class="tablinks" onclick="openTab(event, 'Entregue')">Entregue</button>
</div>

<div id="Fila" class="tabcontent">
    {% for order in orders %}
    {% if order.preparing == None and order.productComanda != Null %}
    <div class="m-card"
    {% if order.productComanda == Null %}
    style="background-color: rgb(253, 69, 69);"
    {% elif order.obs != '' %}
    style="background-color: rgb(243, 165, 75);"
    {% endif %}
    >
        <h4>{{order.id_product.name}}</h4>
        <h4>{{order.obs}} </h4>
        <h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
        <h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
        <h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
        <button class="btn-primary"
        hx-get="{% url 'preparing' order.id %} " hx-trigger="click" hx-target="#list-orders"
        >Preparar</button>
    </div>
    {% endif %}
    {% endfor %}
</div>


<div id="Preparo" class="tabcontent">
    {% for order in orders %}
    {% if order.finished == None and order.preparing != None %}

    <div class="m-card"
    {% if order.productComanda == Null %}
    style="background-color: rgb(253, 69, 69);"
    {% elif order.obs != '' %}
    style="background-color: rgb(243, 165, 75);"
    {% endif %}
    >
        <h4>{{order.id_product.name}}</h4>
        <h4>{{order.obs}} </h4>
        <h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
        <h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
        <h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
        <button class="btn-secondary"
        hx-get="{% url 'finished' order.id %} " hx-trigger="click" hx-target="#list-orders"
        >Finalizar</button>
    </div>
    {% endif %}
    {% endfor %}
</div>

<div id="Finalizado" class="tabcontent">
    {% for order in orders %}
    {% if order.delivered == None and order.finished != None %}

    <div class="m-card"
    {% if order.productComanda == Null %}
    style="background-color: rgb(253, 69, 69);"
    {% elif order.obs != '' %}
    style="background-color: rgb(243, 165, 75);"
    {% endif %}
    >
        <h4>{{order.id_product.name}}</h4>
        <h4>{{order.obs}} </h4>
        <h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
        <h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
        <h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
        <button
        hx-get="{% url 'delivered' order.id %} " hx-trigger="click" hx-target="#list-orders"
        >Entregar</button>
    </div>
    {% endif %}
    {% endfor %}
</div>

<div id="Entregue" class="tabcontent">
    {% for order in orders %}
    {% if order.delivered != None %}

    <div class="m-card"
    {% if order.productComanda == Null %}
    style="background-color: rgb(253, 69, 69);"
    {% elif order.obs != '' %}
    style="background-color: rgb(243, 165, 75);"
    {% endif %}
    >
        <h4>{{order.id_product.name}}</h4>
        <h4>{{order.obs}} </h4>
        <h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
        <h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
        <h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
        <!-- <button>Preparar</button> -->
    </div>
    {% endif %}
    {% endfor %}
</div>