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



<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    {% block 'head' %}
    <link rel="stylesheet" href="{% static 'orders/css/orders.css' %}">
    {% endblock %}

    {% block 'title' %}
    Pedidos Cozinha
    {% endblock %}
</head>

<body>
    {% block 'body' %}
    <div class="container">
        <h1 id="title">Pedidos cozinha</h1>
        <div class="kanban-board">
            {% csrf_token %}
            <div class="column">
                <h2>FILA</h2>
                <div id="fila" class="cards-container">
                   {% for order in orders %}
            {% if order.preparing == None and order.productComanda != Null %}
            <div class="m-card" id="m-card-{{order.id}}"
            {% 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 id="obs-{{order.id}}">{{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>
            {% if user|groupUser:"Cozinha" %}

            <form method="path" action="{% url 'preparing' order.id %}">
            
            <button class="btn-primary" type="submit">Preparar</button>
            </form>
            {% endif %}
            </div>
            {% endif %}
            {% endfor %}
                    </div>
            </div>
            <div class="column">
                <h2>PREPARANDO</h2>
                <div class="cards-container">
                    {% for order in orders %}
                {% if order.finished == None and order.preparing != None %}
                    <div class="m-card" id="m-card-{{order.id}}"
                        {% 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 id="obs-{{order.id}}">{{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>
                        {% if user|groupUser:"Cozinha" %}
                        <form method="path" action="{% url 'finished' order.id %}">
                        <button class="btn-primary" type="submit">Finalizar</button>
                        </form>
                    
                        {% endif %}
                    </div>
                    {% endif %}
                {% endfor %}
                    </div>
            </div>
            <div class="column">
                <h2>PRONTO</h2>
                <div class="cards-container">
                     {% for order in orders %}
                {% if order.delivered == None and order.finished != None %}
                    <div class="m-card" id="m-card-{{order.id}}"
                        {% 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 id="obs-{{order.id}}">{{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>
                        {% if user|groupUser:"Garçom" %}
                        <form method="path" action="{% url 'delivered' order.id %}">
                        <button class="btn-primary" type="submit">Entregar</button>
                        </form>
                
                        {% endif %}
                    </div>
                    {% endif %}
                {% endfor %}
                    </div>
            </div>
            <div class="column" 
                    {% if user|groupUser:"Gerente" %}
                       style="display:block"
                       {% else %}
                       style="display:none"
                       {% endif %}
            
                >
                <h2>ENTREGUE</h2>
                <div class="cards-container">
                      {% for order in orders %}
                {% if order.delivered != None %}
                    <div class="m-card" id="m-card-{{order.id}}"
                        {% 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 id="obs-{{order.id}}">{{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>
                    </div>
                {% endif %}
            {% endfor %}
                    </div>
            </div>
        </div>
    </div>
    <script src="{% static 'orders/js/orders.js' %}"></script>
    {% endblock %}
</body>
</html>