{% extends "base.html" %}

{% import 'macros/empresa.html' as empresa_ui %}

{% block title %}Nova Ordem de Serviço{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="fas fa-plus-circle"></i> Nova Ordem de Serviço</h2>
        <a href="{{ url_for('ordem_servico') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Voltar
        </a>
    </div>

    <form method="POST" class="form-lockable">
        <div class="row">
            <div class="col-md-12">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">Dados da OS</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Cliente *</label>
                                <select class="form-select" name="cliente_id" required>
                                    <option value="">Selecione...</option>
                                    {% for cliente in clientes %}
                                    <option value="{{ cliente['id'] }}">
                                        {{ cliente['nome'] }}
                                        {% if cliente['tipo_cadastro'] == 'pessoa' %}
                                        <span class="badge bg-success">Novo</span>
                                        {% endif %}
                                        {% if cliente['cpf_cnpj'] %}
                                        - {{ cliente['cpf_cnpj'] }}
                                        {% endif %}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Empresa *</label>
                                {% if is_multi_empresa() %}
                                <select class="form-select" name="empresa_id" required>
                                    <option value="">Selecione...</option>
                                    {% for empresa in empresas %}
                                    <option value="{{ empresa.id }}" title="{{ empresa_ui.titulo(empresa) }}">{{ empresa_ui.nome(empresa) }}</option>
                                    {% endfor %}
                                </select>
                                {% else %}
                                <!-- Modo single-empresa: usar empresa padrão -->
                                <input type="hidden" name="empresa_id" value="{{ empresas[0].id if empresas else '' }}">
                                <input type="text" class="form-control" value="{{ empresa_ui.nome(empresas[0], 'N/A') if empresas else 'N/A' }}" readonly>
                                {% endif %}
                            </div>

                            <div class="col-md-3 mb-3">
                                <label class="form-label">Tipo de Documento *</label>
                                <select class="form-select" name="tipo_documento" required>
                                    <option value="OS">OS - Ordem de Serviço</option>
                                    <option value="CT">CT - Chamado Técnico</option>
                                </select>
                            </div>

                            <div class="col-md-3 mb-3">
                                <label class="form-label">Tipo de Serviço *</label>
                                <select class="form-select" name="tipo_os" required>
                                    <option value="manutencao">Manutenção Equipamento</option>
                                    <option value="chamado_tecnico">Chamado Técnico</option>
                                    <option value="instalacao">Instalação</option>
                                    <option value="suporte">Suporte</option>
                                    <option value="visita_tecnica">Visita Técnica</option>
                                </select>
                            </div>

                            <div class="col-md-3 mb-3">
                                <label class="form-label">Prioridade *</label>
                                <select class="form-select" name="prioridade" required>
                                    <option value="baixa">Baixa</option>
                                    <option value="normal" selected>Normal</option>
                                    <option value="alta">Alta</option>
                                    <option value="urgente">Urgente</option>
                                </select>
                            </div>

                            <div class="col-md-3 mb-3">
                                <label class="form-label">Técnico</label>
                                <select class="form-select" name="tecnico_id">
                                    <option value="">Não atribuído</option>
                                    {% for tecnico in tecnicos %}
                                    <option value="{{ tecnico['id'] }}">
                                        {{ tecnico['nome'] }}
                                        {% if tecnico['tipo_cadastro'] == 'pessoa' %}
                                        <span class="badge bg-info">Externo</span>
                                        {% endif %}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-md-12 mb-3">
                                <label class="form-label">Relato do Cliente *</label>
                                <input type="text" class="form-control" name="titulo" required 
                                       placeholder="Resumo breve do problema relatado">
                            </div>

                            <div class="col-md-12 mb-3">
                                <label class="form-label">Descrição Detalhada do Problema *</label>
                                <textarea class="form-control" name="descricao_problema" rows="4" required 
                                          placeholder="Descreva detalhadamente o problema relatado pelo cliente..."></textarea>
                            </div>

                            <div class="col-md-12 mb-3">
                                <label class="form-label">Equipamento do Cliente</label>
                                <select class="form-select" name="equipamento_id" id="equipamento_id">
                                    <option value="">Selecione primeiro um cliente...</option>
                                </select>
                            </div>

                            <div class="col-md-12 mb-3">
                                <label class="form-label">Observações</label>
                                <textarea class="form-control" name="observacoes" rows="2"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="text-end">
            <button type="submit" class="btn btn-primary btn-lg">
                <i class="fas fa-save"></i> Criar OS
            </button>
        </div>
    </form>
</div>

<script>
// Carregar equipamentos quando selecionar cliente
document.querySelector('select[name="cliente_id"]').addEventListener('change', function() {
    const clienteId = this.value;
    const equipamentoSelect = document.getElementById('equipamento_id');
    
    // Limpar opções
    equipamentoSelect.innerHTML = '<option value="">Carregando...</option>';
    
    if (!clienteId) {
        equipamentoSelect.innerHTML = '<option value="">Selecione primeiro um cliente...</option>';
        return;
    }
    
    // Buscar equipamentos do cliente
    fetch(`/api/equipamentos-por-cliente/${clienteId}`)
        .then(response => response.json())
        .then(equipamentos => {
            equipamentoSelect.innerHTML = '<option value="">Nenhum equipamento</option>';
            
            if (equipamentos.length > 0) {
                equipamentoSelect.innerHTML = '<option value="">Selecione...</option>';
                equipamentos.forEach(eq => {
                    const option = document.createElement('option');
                    option.value = eq.id;
                    option.textContent = eq.descricao;
                    equipamentoSelect.appendChild(option);
                });
            }
        })
        .catch(error => {
            console.error('Erro ao carregar equipamentos:', error);
            equipamentoSelect.innerHTML = '<option value="">Erro ao carregar</option>';
        });
});
</script>
{% endblock %}