{% extends "base.html" %}
{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col">
            <h2><i class="bi bi-arrow-down-circle me-2"></i>Relatório de Sangrias do PDV</h2>
            <p class="text-muted">Retiradas de dinheiro do caixa com detalhamento por operador, forma de pagamento e período</p>
        </div>
    </div>

    <!-- Filtros -->
    <div class="card mb-4">
        <div class="card-header bg-light">
            <h5 class="mb-0"><i class="bi bi-funnel me-2"></i>Filtros</h5>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ url_for('relatorio_pdv_sangrias') }}">
                <div class="row g-3">
                    <div class="col-md-2">
                        <label class="form-label">Data Inicial</label>
                        <input type="date" name="data_inicio" class="form-control" 
                               value="{{ data_inicio.strftime('%Y-%m-%d') if data_inicio else '' }}">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Data Final</label>
                        <input type="date" name="data_fim" class="form-control" 
                               value="{{ data_fim.strftime('%Y-%m-%d') if data_fim else '' }}">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Operador</label>
                        <select name="usuario_id" class="form-select">
                            <option value="">Todos</option>
                            {% for usuario in usuarios %}
                            <option value="{{ usuario.id }}" {% if usuario_id == usuario.id %}selected{% endif %}>
                                {{ usuario.username }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Caixa</label>
                        <select name="caixa_id" class="form-select">
                            <option value="">Todos</option>
                            {% for caixa in caixas %}
                            <option value="{{ caixa.id }}" {% if caixa_id == caixa.id %}selected{% endif %}>
                                Caixa #{{ caixa.numero_caixa }} - {{ formatar_datetime_operacional(caixa.data_abertura, '%d/%m', caixa.empresa) }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Forma Pagamento</label>
                        <select name="forma_pagamento" class="form-select">
                            <option value="">Todas</option>
                            {% for forma in formas_pagamento %}
                            <option value="{{ forma }}" {% if forma_pagamento_filtro == forma %}selected{% endif %}>
                                {{ forma }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-1">
                        <label class="form-label">Class.</label>
                        <select name="classificar" class="form-select">
                            <option value="codigo" {% if classificar == 'codigo' %}selected{% endif %}>Código</option>
                            <option value="nome" {% if classificar == 'nome' %}selected{% endif %}>Nome</option>
                            <option value="descricao" {% if classificar == 'descricao' %}selected{% endif %}>Descrição</option>
                        </select>
                    </div>
                    <div class="col-md-1">
                        <label class="form-label">Ordem</label>
                        <select name="ordem" class="form-select">
                            <option value="asc" {% if ordem == 'asc' %}selected{% endif %}>Asc</option>
                            <option value="desc" {% if ordem == 'desc' %}selected{% endif %}>Desc</option>
                        </select>
                    </div>
                    <div class="col-md-1 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="bi bi-search"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Indicadores -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card border-danger">
                <div class="card-body">
                    <h6 class="text-muted">Total de Sangrias</h6>
                    <h3 class="mb-0">{{ sangrias|length }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-danger">
                <div class="card-body">
                    <h6 class="text-muted">Valor Total</h6>
                    <h3 class="mb-0 text-danger">R$ {{ '%.2f'|format(total_sangrias) }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-info">
                <div class="card-body">
                    <h6 class="text-muted">Formas de Pagamento</h6>
                    <h3 class="mb-0">{{ sangrias_por_forma|length }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-primary">
                <div class="card-body">
                    <h6 class="text-muted">Operadores</h6>
                    <h3 class="mb-0">{{ sangrias_por_usuario|length }}</h3>
                </div>
            </div>
        </div>
    </div>

    <!-- Resumo por Forma de Pagamento -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-light">
                    <h6 class="mb-0"><i class="bi bi-credit-card me-2"></i>Por Forma de Pagamento</h6>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover mb-0">
                            <thead>
                                <tr>
                                    <th>Forma</th>
                                    <th class="text-center">Quantidade</th>
                                    <th class="text-end">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for forma, dados in sangrias_por_forma.items() %}
                                <tr>
                                    <td><strong>{{ forma }}</strong></td>
                                    <td class="text-center">{{ dados['qtd'] }}</td>
                                    <td class="text-end text-danger">R$ {{ '%.2f'|format(dados['total']) }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-light">
                    <h6 class="mb-0"><i class="bi bi-person me-2"></i>Por Operador</h6>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover mb-0">
                            <thead>
                                <tr>
                                    <th>Operador</th>
                                    <th class="text-center">Quantidade</th>
                                    <th class="text-end">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for usuario_nome, dados in sangrias_por_usuario.items() %}
                                <tr>
                                    <td><strong>{{ usuario_nome }}</strong></td>
                                    <td class="text-center">{{ dados['qtd'] }}</td>
                                    <td class="text-end text-danger">R$ {{ '%.2f'|format(dados['total']) }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Lista de Sangrias -->
    <div class="card">
        <div class="card-header bg-light d-flex justify-content-between align-items-center">
            <h5 class="mb-0"><i class="bi bi-list-ul me-2"></i>Sangrias Detalhadas</h5>
            <div>
                <button class="btn btn-sm btn-outline-success" onclick="exportarExcel()">
                    <i class="bi bi-file-earmark-excel me-1"></i>Excel
                </button>
                <button class="btn btn-sm btn-outline-danger" onclick="window.print()">
                    <i class="bi bi-file-pdf me-1"></i>PDF
                </button>
            </div>
        </div>
        <div class="card-body p-0">
            {% if sangrias %}
            <div class="table-responsive">
                <table class="table table-hover mb-0" id="tabelaSangrias">
                    <thead class="table-light">
                        <tr>
                            <th>Data/Hora</th>
                            <th>Caixa</th>
                            <th>Operador</th>
                            <th>Forma</th>
                            <th>Responsável</th>
                            <th>Destino</th>
                            <th class="text-end">Valor</th>
                            <th>Observações</th>
                            <th class="text-center">Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for sangria in sangrias %}
                        <tr>
                            <td>
                                <strong>{{ formatar_datetime_operacional(sangria.data_hora, '%d/%m/%Y', sangria.caixa.empresa if sangria.caixa else None) }}</strong>
                                <br><small class="text-muted">{{ formatar_datetime_operacional(sangria.data_hora, '%H:%M', sangria.caixa.empresa if sangria.caixa else None) }}</small>
                            </td>
                            <td>
                                {% if sangria.caixa %}
                                Caixa #{{ sangria.caixa.numero_caixa }}
                                {% else %}
                                <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                            <td>{{ sangria.usuario.username if sangria.usuario else '-' }}</td>
                            <td>
                                <span class="badge bg-secondary">
                                    {{ sangria.forma_pagamento or 'Não informado' }}
                                </span>
                            </td>
                            <td>{{ sangria.responsavel or '-' }}</td>
                            <td>{{ sangria.origem_destino or '-' }}</td>
                            <td class="text-end">
                                <strong class="text-danger">R$ {{ '%.2f'|format(sangria.valor) }}</strong>
                            </td>
                            <td>
                                <small class="text-muted">{{ sangria.observacoes or '-' }}</small>
                            </td>
                            <td class="text-center">
                                <a href="{{ url_for('pdv_recibo_movimento', movimento_id=sangria.id) }}" 
                                   class="btn btn-sm btn-outline-primary" target="_blank" title="Imprimir Recibo">
                                    <i class="bi bi-printer"></i>
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                    <tfoot class="table-light">
                        <tr>
                            <th colspan="6" class="text-end">TOTAL GERAL:</th>
                            <th class="text-end text-danger">R$ {{ '%.2f'|format(total_sangrias) }}</th>
                            <th colspan="2"></th>
                        </tr>
                    </tfoot>
                </table>
            </div>
            {% else %}
            <div class="text-center text-muted py-5">
                <i class="bi bi-inbox" style="font-size: 3rem;"></i>
                <p class="mt-2">Nenhuma sangria encontrada no período selecionado</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<style>
@media print {
    .btn, .card-header .d-flex > div, nav, footer { display: none !important; }
    .card { border: none !important; box-shadow: none !important; }
}
</style>

<script>
function exportarExcel() {
    const table = document.getElementById('tabelaSangrias');
    if (!table) {
        alert('Nenhum dado para exportar');
        return;
    }
    
    let csv = [];
    const rows = table.querySelectorAll('tr');
    
    for (let row of rows) {
        let cols = row.querySelectorAll('td, th');
        let csvRow = [];
        for (let col of cols) {
            // Pular coluna de ações
            if (col.textContent.includes('Ações')) continue;
            csvRow.push('"' + col.textContent.trim().replace(/"/g, '""') + '"');
        }
        csv.push(csvRow.join(','));
    }
    
    const csvContent = csv.join('\n');
    const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    const url = URL.createObjectURL(blob);
    link.setAttribute('href', url);
    link.setAttribute('download', 'sangrias_pdv_' + new Date().toISOString().slice(0,10) + '.csv');
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}
</script>
{% endblock %}