{% extends "base.html" %}

{% block title %}Crédito Loja #{{ credito.id }} - CapeSystem{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-8">
            <!-- Detalhes do Crédito -->
            <div class="card mb-4">
                <div class="card-header bg-info text-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="bi bi-wallet2"></i> Crédito Loja #{{ credito.id }}
                    </h5>
                    {% if credito.status == 'ativo' %}
                        <span class="badge bg-success fs-6">Ativo</span>
                    {% elif credito.status == 'utilizado' %}
                        <span class="badge bg-secondary fs-6">Utilizado</span>
                    {% elif credito.status == 'cancelado' %}
                        <span class="badge bg-danger fs-6">Cancelado</span>
                    {% elif credito.status == 'expirado' %}
                        <span class="badge bg-warning fs-6">Expirado</span>
                    {% endif %}
                </div>
                <div class="card-body">
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <h6 class="text-muted">Cliente</h6>
                            <h4>{{ credito.pessoa.nome if credito.pessoa else 'N/A' }}</h4>
                            {% if credito.pessoa and credito.pessoa.cpf_cnpj %}
                                <p class="text-muted mb-0">{{ credito.pessoa.cpf_cnpj }}</p>
                            {% endif %}
                        </div>
                        <div class="col-md-6 text-end">
                            <h6 class="text-muted">Data de Criação</h6>
                            <h5>{{ credito.data_criacao.strftime('%d/%m/%Y %H:%M') if credito.data_criacao else '-' }}</h5>
                        </div>
                    </div>
                    
                    <hr>
                    
                    <div class="row text-center">
                        <div class="col-md-4">
                            <div class="p-3 bg-light rounded">
                                <h6 class="text-muted mb-1">Valor Original</h6>
                                <h3 class="text-primary mb-0">R$ {{ "%.2f"|format(credito.valor_original) }}</h3>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="p-3 bg-light rounded">
                                <h6 class="text-muted mb-1">Utilizado</h6>
                                <h3 class="text-warning mb-0">R$ {{ "%.2f"|format(credito.valor_utilizado) }}</h3>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="p-3 bg-light rounded">
                                <h6 class="text-muted mb-1">Saldo Disponível</h6>
                                <h3 class="text-success mb-0">R$ {{ "%.2f"|format(credito.valor_saldo) }}</h3>
                            </div>
                        </div>
                    </div>
                    
                    <hr>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <h6 class="text-muted">Origem</h6>
                            <p>
                                {% if credito.tipo_origem == 'devolucao' %}
                                    <span class="badge bg-warning">Devolução</span>
                                {% elif credito.tipo_origem == 'bonificacao' %}
                                    <span class="badge bg-info">Bonificação</span>
                                {% elif credito.tipo_origem == 'cortesia' %}
                                    <span class="badge bg-success">Cortesia</span>
                                {% elif credito.tipo_origem == 'manual' %}
                                    <span class="badge bg-secondary">Manual</span>
                                {% else %}
                                    <span class="badge bg-light text-dark">{{ credito.tipo_origem or 'N/A' }}</span>
                                {% endif %}
                            </p>
                        </div>
                        <div class="col-md-4">
                            <h6 class="text-muted">Validade</h6>
                            <p>{{ credito.data_validade.strftime('%d/%m/%Y') if credito.data_validade else 'Sem validade' }}</p>
                        </div>
                        <div class="col-md-4">
                            <h6 class="text-muted">Usuário Criador</h6>
                            <p>{{ credito.usuario.username if credito.usuario else 'Sistema' }}</p>
                        </div>
                    </div>
                    
                    {% if credito.observacoes %}
                    <div class="mt-3">
                        <h6 class="text-muted">Observações</h6>
                        <p class="bg-light p-3 rounded">{{ credito.observacoes }}</p>
                    </div>
                    {% endif %}
                </div>
            </div>
            
            <!-- Histórico de Utilizações -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-clock-history"></i> Histórico de Utilizações</h5>
                </div>
                <div class="card-body">
                    {% if utilizacoes %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Data</th>
                                    <th>Valor</th>
                                    <th>Venda</th>
                                    <th>Usuário</th>
                                    <th>Observação</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for u in utilizacoes %}
                                <tr>
                                    <td>{{ u.data_utilizacao.strftime('%d/%m/%Y %H:%M') if u.data_utilizacao else '-' }}</td>
                                    <td class="text-success fw-bold">R$ {{ "%.2f"|format(u.valor) }}</td>
                                    <td>
                                        {% if u.venda_id %}
                                            <a href="{{ url_for('venda_detalhe', id=u.venda_id) }}">
                                                Venda #{{ u.venda_id }}
                                            </a>
                                        {% else %}
                                            -
                                        {% endif %}
                                    </td>
                                    <td>{{ u.usuario.username if u.usuario else '-' }}</td>
                                    <td>{{ u.observacao or '-' }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="text-center text-muted py-4">
                        <i class="bi bi-inbox fs-1 d-block mb-2"></i>
                        Nenhuma utilização registrada
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <!-- Ações -->
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0"><i class="bi bi-gear"></i> Ações</h6>
                </div>
                <div class="card-body">
                    <a href="{{ url_for('credito_loja_lista') }}" class="btn btn-outline-secondary w-100 mb-2">
                        <i class="bi bi-arrow-left"></i> Voltar à Lista
                    </a>
                    
                    {% if credito.status == 'ativo' and credito.valor_utilizado == 0 %}
                    <form action="{{ url_for('credito_loja_cancelar', credito_id=credito.id) }}" 
                          method="POST"
                          onsubmit="return confirm('Tem certeza que deseja cancelar este crédito?')">
                        <button type="submit" class="btn btn-outline-danger w-100">
                            <i class="bi bi-x-circle"></i> Cancelar Crédito
                        </button>
                    </form>
                    {% endif %}
                </div>
            </div>
            
            <!-- Info do Cliente -->
            {% if credito.pessoa %}
            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="mb-0"><i class="bi bi-person"></i> Cliente</h6>
                </div>
                <div class="card-body">
                    <h5>{{ credito.pessoa.nome }}</h5>
                    {% if credito.pessoa.cpf_cnpj %}
                        <p class="text-muted mb-2">{{ credito.pessoa.cpf_cnpj }}</p>
                    {% endif %}
                    {% if credito.pessoa.telefone %}
                        <p class="mb-1"><i class="bi bi-telephone"></i> {{ credito.pessoa.telefone }}</p>
                    {% endif %}
                    {% if credito.pessoa.email %}
                        <p class="mb-1"><i class="bi bi-envelope"></i> {{ credito.pessoa.email }}</p>
                    {% endif %}
                    
                    <hr>
                    
                    <div class="bg-light p-3 rounded text-center">
                        <small class="text-muted">Saldo Total de Crédito</small>
                        <h4 class="text-info mb-0">R$ {{ "%.2f"|format(credito.pessoa.saldo_credito_loja or 0) }}</h4>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}