{% extends "base.html" %}

{% block title %}Relatório de Ordens de Serviço{% endblock %}

{% block extra_css %}
<style>
    @media print {
        .btn, .card-body form, nav, .no-print {
            display: none !important;
        }
        .card {
            border: none;
            box-shadow: none;
        }
        body {
            background: white;
        }
        .table {
            font-size: 12px;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="fas fa-chart-line"></i> Relatório de Ordens de Serviço</h2>
        <div>
            <button onclick="window.print()" class="btn btn-info me-2">
                <i class="fas fa-print"></i> Imprimir
            </button>
            <a href="{{ url_for('ordem_servico') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Voltar
            </a>
        </div>
    </div>

    {# Filtros #}
    <div class="card mb-4">
        <div class="card-body">
            <form method="GET" class="row g-3">
                <div class="col-md-2">
                    <label class="form-label">Data Início</label>
                    <input type="date" class="form-control" name="data_inicio" 
                           value="{{ data_inicio.strftime('%Y-%m-%d') }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Data Fim</label>
                    <input type="date" class="form-control" name="data_fim" 
                           value="{{ data_fim.strftime('%Y-%m-%d') }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Status</label>
                    <select class="form-select" name="status">
                        <option value="">Todos</option>
                        <option value="aberta" {% if status_filtro == 'aberta' %}selected{% endif %}>Aberta</option>
                        <option value="agendada" {% if status_filtro == 'agendada' %}selected{% endif %}>Agendada</option>
                        <option value="em_atendimento" {% if status_filtro == 'em_atendimento' %}selected{% endif %}>Em Atendimento</option>
                        <option value="concluida" {% if status_filtro == 'concluida' %}selected{% endif %}>Concluída</option>
                        <option value="cancelada" {% if status_filtro == 'cancelada' %}selected{% endif %}>Cancelada</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Empresa</label>
                    <select class="form-select" name="empresa_id">
                        <option value="">Todas</option>
                        {% for empresa in empresas %}
                        <option value="{{ empresa.id }}" {% if empresa_filtro == empresa.id|string %}selected{% endif %}>
                            {{ empresa.nome or ('Empresa ' ~ empresa.id) }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Técnico</label>
                    <select class="form-select" name="tecnico_id">
                        <option value="">Todos</option>
                        {% for tecnico in tecnicos %}
                        <option value="{{ tecnico['id'] }}" {% if tecnico_filtro == tecnico['id'] %}selected{% endif %}>
                            {{ tecnico['nome'] }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-1">
                    <label class="form-label">Class.</label>
                    <select class="form-select" name="classificar">
                        <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 class="form-select" name="ordem">
                        <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="fas fa-filter"></i> Filtrar
                    </button>
                </div>
            </form>
        </div>
    </div>

    {# Resumo #}
    <div class="row mb-4">
        <div class="col-md-2">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <h6 class="card-title">Total OS</h6>
                    <h3>{{ total_os }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <h6 class="card-title">Abertas</h6>
                    <h3>{{ os_abertas }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <h6 class="card-title">Em Atend.</h6>
                    <h3>{{ os_em_atendimento }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <h6 class="card-title">Concluídas</h6>
                    <h3>{{ os_concluidas }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-secondary text-white">
                <div class="card-body">
                    <h6 class="card-title">Valor Total</h6>
                    <h5>R$ {{ "%.2f"|format(total_faturado) }}</h5>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-dark text-white">
                <div class="card-body">
                    <h6 class="card-title">Tempo Médio</h6>
                    <h5>{{ "%.1f"|format(tempo_medio) }}h</h5>
                </div>
            </div>
        </div>
    </div>

    {# Detalhamento #}
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">OS do Período</h5>
        </div>
        <div class="card-body">
            {% if ordens %}
            <div class="table-responsive">
                <table class="table table-hover table-sm">
                    <thead>
                        <tr>
                            <th>Número</th>
                            <th>Data</th>
                            <th>Cliente</th>
                            <th>Tipo</th>
                            <th>Técnico</th>
                            <th>Valor</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for os in ordens %}
                        <tr>
                            <td><strong>{{ os.numero_os }}</strong></td>
                            <td>{{ os.data_abertura.strftime('%d/%m/%Y') }}</td>
                            <td>
                                {% if os.pessoa %}
                                    {{ os.pessoa.nome_fantasia or os.pessoa.razao_social or os.pessoa.nome }}
                                {% elif os.cliente %}
                                    {{ os.cliente.nome }}
                                {% else %}
                                    -
                                {% endif %}
                            </td>
                            <td>
                                {% if os.tipo_os == 'manutencao' %}Manutenção
                                {% elif os.tipo_os == 'instalacao' %}Instalação
                                {% elif os.tipo_os == 'suporte' %}Suporte
                                {% elif os.tipo_os == 'visita_tecnica' %}Visita Técnica
                                {% endif %}
                            </td>
                            <td>
                                {% if os.tecnico_pessoa %}
                                    {{ os.tecnico_pessoa.nome }}
                                {% elif os.tecnico %}
                                    {{ os.tecnico.nome }}
                                {% else %}
                                    -
                                {% endif %}
                            </td>
                            <td>R$ {{ "%.2f"|format(os.valor_total) }}</td>
                            <td>
                                {% if os.status == 'aberta' %}
                                    <span class="badge bg-warning">Aberta</span>
                                {% elif os.status == 'agendada' %}
                                    <span class="badge bg-info">Agendada</span>
                                {% elif os.status == 'em_atendimento' %}
                                    <span class="badge bg-primary">Em Atendimento</span>
                                {% elif os.status == 'concluida' %}
                                    <span class="badge bg-success">Concluída</span>
                                {% elif os.status == 'cancelada' %}
                                    <span class="badge bg-danger">Cancelada</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="alert alert-info">
                <i class="fas fa-info-circle"></i> Nenhuma OS encontrada no período.
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}