{% extends 'base.html' %}

{% block title %}Comanda #{{ comanda.id }} - Sistema de Comandas{% endblock %}

{% block content %}
<div class="clearfix">
    <h2 style="float: left;">Comanda #{{ comanda.id }}</h2>
    <div style="float: right;">
        {% if comanda.status == 'aberta' %}
        <a href="{% url 'comandas:add_item' comanda.pk %}" class="btn">Adicionar Item</a>
        <a href="{% url 'comandas:fechar' comanda.pk %}" class="btn btn-success" 
           onclick="return confirm('Fechar comanda?')">Fechar Comanda</a>
        {% endif %}
        <a href="{% url 'comandas:list' %}" class="btn">Voltar</a>
    </div>
</div>

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0;">
    <div class="card">
        <h3>Informações da Comanda</h3>
        <p><strong>Mesa:</strong> {{ comanda.mesa.numero }}</p>
        <p><strong>Garçom:</strong> {{ comanda.garcom.get_full_name|default:comanda.garcom.username }}</p>
        <p><strong>Status:</strong> 
            <span style="color: {% if comanda.status == 'aberta' %}#ffc107{% elif comanda.status == 'fechada' %}#28a745{% else %}#dc3545{% endif %};">
                {{ comanda.get_status_display }}
            </span>
        </p>
        <p><strong>Abertura:</strong> {{ comanda.abertura|date:"d/m/Y H:i" }}</p>
        {% if comanda.fechamento %}
        <p><strong>Fechamento:</strong> {{ comanda.fechamento|date:"d/m/Y H:i" }}</p>
        {% endif %}
        {% if comanda.observacoes %}
        <p><strong>Observações:</strong> {{ comanda.observacoes }}</p>
        {% endif %}
    </div>
    
    <div class="card">
        <h3>Resumo</h3>
        <p><strong>Total de Itens:</strong> {{ itens.count }}</p>
        <p><strong>Total Geral:</strong> <span style="font-size: 1.5em; color: #28a745;">R$ {{ comanda.total|floatformat:2 }}</span></p>
        {% if comanda.arquivo_gerado %}
        <p><strong>Arquivo:</strong> <a href="{% url 'comandas:download' comanda.arquivo_gerado %}">{{ comanda.arquivo_gerado }}</a></p>
        {% endif %}
    </div>
</div>

<h3>Itens da Comanda</h3>
<table class="table">
    <thead>
        <tr>
            <th>Produto</th>
            <th>Quantidade</th>
            <th>Preço Unit.</th>
            <th>Subtotal</th>
            <th>Observações</th>
            {% if comanda.status == 'aberta' %}
            <th>Ações</th>
            {% endif %}
        </tr>
    </thead>
    <tbody>
        {% for item in itens %}
        <tr>
            <td>{{ item.produto.nome }}</td>
            <td>{{ item.quantidade }}</td>
            <td>R$ {{ item.preco_unitario|floatformat:2 }}</td>
            <td>R$ {{ item.subtotal|floatformat:2 }}</td>
            <td>{{ item.observacoes|default:"-" }}</td>
            {% if comanda.status == 'aberta' %}
            <td>
                <a href="{% url 'comandas:delete_item' item.pk %}" class="btn btn-danger" 
                   onclick="return confirm('Remover item?')">Remover</a>
            </td>
            {% endif %}
        </tr>
        {% empty %}
        <tr>
            <td colspan="{% if comanda.status == 'aberta' %}6{% else %}5{% endif %}" class="text-center">
                Nenhum item adicionado.
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endblock %}