{% extends 'base.html' %}
{% load static %}

{% block title %}Detalhes da Venda - {{ block.super }}{% endblock %}

{% block content %}
<div class="mb-4">
    <a href="{% url 'lista_vendas' %}" class="btn btn-secondary">
        <i class="bi bi-arrow-left"></i> Voltar
    </a>
    {% if venda.status == 'finalizada' %}
    <button type="button" class="btn btn-danger" onclick="abrirModalCancelarVenda()">
        <i class="bi bi-x-octagon"></i> Cancelar Venda
    </button>
    <a href="{% url 'imprimir_cupom' venda.id %}" class="btn btn-primary" target="_blank">
        <i class="bi bi-printer"></i> Imprimir Cupom
    </a>
    {% endif %}
</div>

<div class="row">
    <div class="col-lg-8">
        <div class="card mb-4">
            <div class="card-header">
                <i class="bi bi-cart-check"></i> Venda #{{ venda.numero_venda }}
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <p><strong>Data/Hora:</strong> {{ venda.data_venda|date:"d/m/Y H:i" }}</p>
                        <p><strong>Cliente:</strong> {{ venda.cliente.nome|default:"Cliente não informado" }}</p>
                        <p><strong>Vendedor:</strong> {{ venda.vendedor.username|default:"-" }}</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>Status:</strong>
                            {% if venda.status == 'finalizada' %}
                                <span class="badge bg-success">Finalizada</span>
                            {% elif venda.status == 'cancelada' %}
                                <span class="badge bg-danger">Cancelada</span>
                            {% else %}
                                <span class="badge bg-warning">Aberta</span>
                            {% endif %}
                        </p>
                        <p><strong>Subtotal:</strong> R$ {{ venda.subtotal|floatformat:2 }}</p>
                        <p><strong>Desconto:</strong> R$ {{ venda.desconto|floatformat:2 }}</p>
                        <h4><strong>Total:</strong> R$ {{ venda.total|floatformat:2 }}</h4>
                    </div>
                </div>

                {% if venda.observacoes %}
                <div class="alert alert-info">
                    <strong>Observações:</strong> {{ venda.observacoes }}
                </div>
                {% endif %}

                {% if venda.status == 'cancelada' and venda.motivo_cancelamento %}
                <div class="alert alert-danger">
                    <strong>Venda cancelada:</strong> {{ venda.motivo_cancelamento }}
                    <br>
                    <small>
                        {% if venda.cancelada_por %}Por {{ venda.cancelada_por.username }}{% endif %}
                        {% if venda.cancelada_em %} em {{ venda.cancelada_em|date:"d/m/Y H:i" }}{% endif %}
                    </small>
                </div>
                {% endif %}
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <i class="bi bi-list-ul"></i> Itens da Venda
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="table-light">
                            <tr>
                                <th>Produto</th>
                                <th>Quantidade</th>
                                <th>Preço Unit.</th>
                                <th>Subtotal</th>
                                <th class="text-end">Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in itens_ativos %}
                            <tr>
                                <td>{{ item.produto.nome }}</td>
                                <td>{{ item.quantidade }}</td>
                                <td>R$ {{ item.preco_unitario|floatformat:2 }}</td>
                                <td><strong>R$ {{ item.subtotal|floatformat:2 }}</strong></td>
                                <td class="text-end">
                                    {% if venda.status == 'finalizada' %}
                                    <button class="btn btn-sm btn-outline-danger" type="button" onclick="abrirModalCancelarItem({{ item.id }}, '{{ item.produto.nome|escapejs }}')">
                                        <i class="bi bi-x-circle"></i> Cancelar Item
                                    </button>
                                    {% else %}
                                    <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="5" class="text-center text-muted">Nenhum item ativo nesta venda.</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {% if itens_cancelados %}
        <div class="card mt-3">
            <div class="card-header bg-light">
                <i class="bi bi-clock-history"></i> Histórico de Itens Cancelados
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Produto</th>
                                <th>Quantidade</th>
                                <th>Motivo</th>
                                <th>Cancelado em</th>
                                <th>Por</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in itens_cancelados %}
                            <tr class="table-danger">
                                <td>{{ item.produto.nome }}</td>
                                <td>{{ item.quantidade }}</td>
                                <td>{{ item.motivo_cancelamento|default:"-" }}</td>
                                <td>{{ item.cancelado_em|date:"d/m/Y H:i"|default:"-" }}</td>
                                <td>{{ item.cancelado_por.username|default:"-" }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {% endif %}
    </div>

    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <i class="bi bi-credit-card"></i> Pagamentos
            </div>
            <div class="card-body">
                {% for pagamento in venda.pagamentos.all %}
                <div class="mb-3 p-3 bg-light rounded">
                    <p><strong>{{ pagamento.forma_pagamento.nome }}</strong></p>
                    <p>Valor: R$ {{ pagamento.valor|floatformat:2 }}</p>
                    <p>Parcelas: {{ pagamento.parcelas }}x</p>
                    {% if pagamento.forma_pagamento.tipo == 'credito' or pagamento.forma_pagamento.tipo == 'debito' %}
                    <p>Bandeira: {% if pagamento.taxa_maquininha %}{{ pagamento.taxa_maquininha.get_bandeira_display }}{% else %}{{ pagamento.bandeira_cartao|default:"-" }}{% endif %}</p>
                    <p class="mb-1 text-danger">Taxa maquininha: R$ {{ pagamento.valor_taxa|floatformat:2 }}</p>
                    <p class="mb-1 text-success">Líquido: R$ {{ pagamento.valor_liquido|floatformat:2 }}</p>
                    {% endif %}
                    {% if pagamento.forma_pagamento.tipo == 'credito' and pagamento.parcelas > 1 %}
                    <p><small class="text-muted">Parcelamento processado pela operadora do cartão.</small></p>
                    {% endif %}
                    <p>Data: {{ pagamento.data_pagamento|date:"d/m/Y H:i" }}</p>
                </div>
                {% empty %}
                <p class="text-muted">Nenhum pagamento registrado</p>
                {% endfor %}
            </div>
        </div>

        {% if venda.parcelas.all %}
        <div class="card mt-3">
            <div class="card-header">
                <i class="bi bi-calendar-check"></i> Parcelas
            </div>
            <div class="card-body">
                {% for parcela in venda.parcelas.all %}
                <div class="mb-2 p-2 border rounded">
                    <strong>{{ parcela.numero_parcela }}/{{ parcela.pagamento.parcelas }}</strong><br>
                    R$ {{ parcela.valor|floatformat:2 }}<br>
                    Venc: {{ parcela.data_vencimento|date:"d/m/Y" }}<br>
                    <span class="badge
                        {% if parcela.status == 'paga' %}bg-success
                        {% elif parcela.status == 'atrasada' %}bg-danger
                        {% elif parcela.status == 'cancelada' %}bg-secondary
                        {% else %}bg-warning{% endif %}">
                        {{ parcela.get_status_display }}
                    </span>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
</div>

{% if venda.status == 'finalizada' %}
<div class="modal fade" id="modalCancelarVenda" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title"><i class="bi bi-exclamation-triangle"></i> Cancelar Venda</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form method="post" action="{% url 'cancelar_venda_registrada' venda.id %}">
                <div class="modal-body">
                    {% csrf_token %}
                    <p>Informe o motivo do cancelamento da venda <strong>{{ venda.numero_venda }}</strong>:</p>
                    <textarea name="motivo_cancelamento" class="form-control" rows="4" required></textarea>
                    <hr>
                    <p class="mb-2"><strong>Confirmação de Administrador</strong></p>
                    <div class="mb-2">
                        <label class="form-label">Usuário administrador</label>
                        <input type="text" name="admin_username" class="form-control" required>
                    </div>
                    <div>
                        <label class="form-label">Senha do administrador</label>
                        <input type="password" name="admin_password" class="form-control" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                    <button type="submit" class="btn btn-danger">
                        <i class="bi bi-x-octagon"></i> Confirmar Cancelamento
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="modalCancelarItem" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-warning">
                <h5 class="modal-title"><i class="bi bi-box-seam"></i> Cancelar Item</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="post" id="formCancelarItem">
                <div class="modal-body">
                    {% csrf_token %}
                    <p>Item: <strong id="itemCancelarNome">-</strong></p>
                    <p class="mb-2">Informe o motivo do cancelamento:</p>
                    <textarea name="motivo_cancelamento" class="form-control" rows="4" required></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                    <button type="submit" class="btn btn-warning">
                        <i class="bi bi-x-circle"></i> Confirmar Cancelamento do Item
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endif %}

<script>
let modalCancelarVenda = null;
let modalCancelarItem = null;

function abrirModalCancelarVenda() {
    if (!modalCancelarVenda) {
        modalCancelarVenda = new bootstrap.Modal(document.getElementById('modalCancelarVenda'));
    }
    modalCancelarVenda.show();
}

function abrirModalCancelarItem(itemId, nomeItem) {
    const form = document.getElementById('formCancelarItem');
    const nomeEl = document.getElementById('itemCancelarNome');
    if (!form || !nomeEl) return;

    form.action = "{% url 'cancelar_item_venda' venda.id 0 %}".replace('/0/cancelar/', `/${itemId}/cancelar/`);
    nomeEl.textContent = nomeItem;

    if (!modalCancelarItem) {
        modalCancelarItem = new bootstrap.Modal(document.getElementById('modalCancelarItem'));
    }
    modalCancelarItem.show();
}
</script>
{% endblock %}