{% extends "base.html" %}
{% macro moeda_br(valor, casas=2) -%}{{ valor|formatar_moeda_br(casas) }}{%- endmacro %}
{% block content %}
<!-- Flatpickr CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<style>
    .flatpickr-input { background-color: #fff !important; cursor: pointer; }
    .input-date-wrapper { position: relative; }
    .input-date-wrapper .bi-calendar3 {
        position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
        color: #6c757d; pointer-events: none;
    }
</style>
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col">
            <h2><i class="bi bi-cash-coin me-2"></i>Relatório de Caixa do PDV</h2>
            <p class="text-muted">Acompanhe fechamentos, movimentos e diferenças por caixa/operador</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_caixa') }}">
                <div class="row g-3">
                    <div class="col-md-2">
                        <label class="form-label">Data Inicial</label>
                        <div class="input-date-wrapper">
                            <input type="text" id="data_inicio" name="data_inicio" class="form-control flatpickr-date"
                                   placeholder="DD/MM/AAAA" autocomplete="off"
                                   value="{{ data_inicio.strftime('%d/%m/%Y') if data_inicio else '' }}">
                            <i class="bi bi-calendar3"></i>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Data Final</label>
                        <div class="input-date-wrapper">
                            <input type="text" id="data_fim" name="data_fim" class="form-control flatpickr-date"
                                   placeholder="DD/MM/AAAA" autocomplete="off"
                                   value="{{ data_fim.strftime('%d/%m/%Y') if data_fim else '' }}">
                            <i class="bi bi-calendar3"></i>
                        </div>
                    </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">Status</label>
                        <select name="status" class="form-select">
                            <option value="todos" {% if status_filtro == 'todos' %}selected{% endif %}>Todos</option>
                            <option value="aberto" {% if status_filtro == 'aberto' %}selected{% endif %}>Abertos</option>
                            <option value="fechado" {% if status_filtro == 'fechado' %}selected{% endif %}>Fechados</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Origem</label>
                        <select name="origem" class="form-select">
                            <option value="todos" {% if origem_filtro == 'todos' %}selected{% endif %}>Todos</option>
                            <option value="web" {% if origem_filtro == 'web' %}selected{% endif %}>PDV Nativo Web</option>
                            <option value="cape_pdv" {% if origem_filtro == 'cape_pdv' %}selected{% endif %}>Cape PDV Desktop</option>
                        </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-2 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="bi bi-search"></i> Filtrar
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Indicadores -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card border-primary">
                <div class="card-body">
                    <h6 class="text-muted">Total de Caixas</h6>
                    <h3 class="mb-0">{{ caixas_dados|length }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-success">
                <div class="card-body">
                    <h6 class="text-muted">Total Vendas</h6>
                    <h3 class="mb-0 text-success">{{ moeda_br(total_vendas_geral) }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-danger">
                <div class="card-body">
                    <h6 class="text-muted">Caixas com Diferença</h6>
                    <h3 class="mb-0 text-danger">{{ caixas_com_diferenca }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-warning">
                <div class="card-body">
                    <h6 class="text-muted">Total Diferenças</h6>
                    <h3 class="mb-0 text-warning">{{ moeda_br(total_diferencas) }}</h3>
                </div>
            </div>
        </div>
    </div>

    <!-- Lista de Caixas -->
    <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>Caixas do Período</h5>
            <div>
                <span class="badge bg-light text-dark border">
                    <i class="bi bi-info-circle me-1"></i>Use o botão PDF em cada caixa (layout padrão de fechamento)
                </span>
            </div>
        </div>
        <div class="card-body p-0">
            {% if caixas_dados %}
            {% for item in caixas_dados %}
            <div class="border-bottom p-3 {% if item.diferenca|abs > 10 %}bg-danger bg-opacity-10{% endif %}">
                <div class="row align-items-center">
                    <div class="col-md-2">
                        <span class="badge bg-{{ item.origem_class|default('secondary') }} mb-1">{{ item.origem|default('PDV') }}</span>
                        <br><strong>Caixa #{{ item.caixa.numero_caixa|default(item.caixa.id) }}</strong>
                        <br><small class="text-muted">{{ item.caixa.usuario.username if item.caixa.usuario else 'N/A' }}</small>
                    </div>
                    <div class="col-md-2">
                        <small class="text-muted">Abertura</small>
                        <br><strong>{{ formatar_datetime_operacional(item.caixa.data_abertura, '%d/%m/%Y %H:%M', item.caixa.empresa) }}</strong>
                    </div>
                    <div class="col-md-2">
                        <small class="text-muted">Fechamento</small>
                        <br>
                        {% if item.caixa.data_fechamento %}
                        <strong>{{ formatar_datetime_operacional(item.caixa.data_fechamento, '%d/%m/%Y %H:%M', item.caixa.empresa) }}</strong>
                        {% else %}
                        <span class="badge bg-success">Aberto</span>
                        {% endif %}
                    </div>
                    <div class="col-md-2 text-end">
                        <small class="text-muted">Vendas</small>
                        <br><strong>{{ moeda_br(item.total_vendas) }}</strong>
                        <br><small>({{ item.qtd_vendas }} vendas)</small>
                    </div>
                    <div class="col-md-2 text-end">
                        <small class="text-muted">Suprimentos</small>
                        <br><strong class="text-success">+{{ moeda_br(item.total_suprimentos) }}</strong>
                        <br><small class="text-muted">Sangrias</small>
                        <br><strong class="text-danger">-{{ moeda_br(item.total_sangrias) }}</strong>
                    </div>
                    <div class="col-md-2 text-end">
                        <small class="text-muted">Esperado / Informado</small>
                        <br><strong>{{ moeda_br(item.valor_esperado) }}</strong>
                        {% if item.caixa.valor_informado %}
                        <br><strong>{{ moeda_br(item.caixa.valor_informado) }}</strong>
                        {% endif %}
                        <br>
                        {% if item.diferenca|abs > 0.01 %}
                        <span class="badge {% if item.diferenca > 0 %}bg-success{% else %}bg-danger{% endif %}">
                            Dif: {{ moeda_br(item.diferenca) }}
                        </span>
                        {% else %}
                        <span class="badge bg-secondary">Conferido</span>
                        {% endif %}
                        <div class="mt-2">
                            {% if item.origem == 'PDV Nativo Web' %}
                            <a href="{{ url_for('pdv_relatorio_caixa', caixa_id=item.caixa.id, print='1') }}"
                               class="btn btn-sm btn-outline-danger"
                               target="_blank"
                               title="Abrir impressão no layout de fechamento de caixa">
                                <i class="bi bi-file-pdf me-1"></i>PDF
                            </a>
                            {% else %}
                            <button type="button"
                                    class="btn btn-sm btn-outline-secondary"
                                    disabled
                                    title="Layout padrão disponível para caixas do PDV Nativo Web">
                                <i class="bi bi-file-pdf me-1"></i>PDF
                            </button>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% if item.caixa.observacoes %}
                <div class="row mt-2">
                    <div class="col">
                        <small class="text-muted">Obs:</small> {{ item.caixa.observacoes }}
                    </div>
                </div>
                {% endif %}
            </div>
            {% endfor %}
            {% else %}
            <div class="text-center text-muted py-5">
                <i class="bi bi-inbox" style="font-size: 3rem;"></i>
                <p class="mt-2">Nenhum caixa encontrado no período selecionado</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>

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

<!-- Flatpickr JS -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/pt.js"></script>
<script>
flatpickr.localize(flatpickr.l10ns.pt);
var fpConfig = {
    dateFormat: "d/m/Y",
    allowInput: true,
    locale: "pt",
};
flatpickr("#data_inicio", Object.assign({}, fpConfig, {
    onReady: function(_, __, fp) {
        if (!fp.input.value) fp.setDate(new Date(new Date().setHours(0,0,0,0)));
    }
}));
flatpickr("#data_fim", Object.assign({}, fpConfig, {
    onReady: function(_, __, fp) {
        if (!fp.input.value) fp.setDate(new Date(new Date().setHours(23,59,59,0)));
    }
}));

// Converter DD/MM/YYYY → YYYY-MM-DD antes de submeter (formato esperado pelo backend)
document.querySelector('form').addEventListener('submit', function() {
    ['data_inicio', 'data_fim'].forEach(function(id) {
        var el = document.getElementById(id);
        if (el && el.value) {
            var parts = el.value.split('/');
            if (parts.length === 3) {
                el.value = parts[2] + '-' + parts[1] + '-' + parts[0];
            }
        }
    });
});
</script>
{% endblock %}