{% extends "base.html" %}

{% block title %}{% if equipamento %}Editar{% else %}Novo{% endif %} Equipamento - Cape System{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>
            <i class="bi bi-tools"></i>
            {% if equipamento %}Editar Equipamento{% else %}Novo Equipamento{% endif %}
        </h2>
        <a href="{{ url_for('equipamentos') }}" class="btn btn-secondary">
            <i class="bi bi-arrow-left"></i> Voltar
        </a>
    </div>

    <form method="POST" class="needs-validation form-lockable" novalidate>
        <!-- Abas -->
        <ul class="nav nav-tabs mb-3" id="equipamentoTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="basico-tab" data-bs-toggle="tab" data-bs-target="#basico" type="button">
                    <i class="bi bi-info-circle"></i> Dados Básicos
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="especificacoes-tab" data-bs-toggle="tab" data-bs-target="#especificacoes" type="button">
                    <i class="bi bi-gear"></i> Especificações
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="cliente-tab" data-bs-toggle="tab" data-bs-target="#cliente" type="button">
                    <i class="bi bi-person"></i> Cliente/Localização
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="garantia-tab" data-bs-toggle="tab" data-bs-target="#garantia" type="button">
                    <i class="bi bi-shield-check"></i> Garantia
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="manutencao-tab" data-bs-toggle="tab" data-bs-target="#manutencao" type="button">
                    <i class="bi bi-wrench"></i> Manutenção
                </button>
            </li>
        </ul>

        <div class="tab-content" id="equipamentoTabsContent">
            <!-- Aba: Dados Básicos -->
            <div class="tab-pane fade show active" id="basico" role="tabpanel">
                <div class="card mb-3">
                    <div class="card-header">
                        <h5 class="mb-0">Identificação</h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-3">
                                <label for="codigo" class="form-label">Código</label>
                                <input type="text" class="form-control" id="codigo" name="codigo" value="{{ equipamento.codigo if equipamento else '' }}">
                                <small class="text-muted">Código interno/SKU</small>
                            </div>
                            <div class="col-md-9">
                                <label for="nome" class="form-label">Nome *</label>
                                <input type="text" class="form-control" id="nome" name="nome" value="{{ equipamento.nome if equipamento else '' }}" required>
                            </div>
                            <div class="col-md-12">
                                <label for="descricao" class="form-label">Descrição</label>
                                <textarea class="form-control" id="descricao" name="descricao" rows="3">{{ equipamento.descricao if equipamento else '' }}</textarea>
                            </div>
                            <div class="col-md-4">
                                <label for="tipo" class="form-label">Tipo</label>
                                <input type="text" class="form-control" id="tipo" name="tipo" value="{{ equipamento.tipo if equipamento else '' }}" list="tiposList" placeholder="Ex: Notebook, Ar Condicionado">
                                <datalist id="tiposList">
                                    <option value="Notebook">
                                    <option value="Desktop">
                                    <option value="Servidor">
                                    <option value="Impressora">
                                    <option value="Scanner">
                                    <option value="Ar Condicionado">
                                    <option value="Gerador">
                                    <option value="Nobreak">
                                    <option value="Switch">
                                    <option value="Roteador">
                                </datalist>
                            </div>
                            <div class="col-md-4">
                                <label for="categoria" class="form-label">Categoria</label>
                                <input type="text" class="form-control" id="categoria" name="categoria" value="{{ equipamento.categoria if equipamento else '' }}" placeholder="Ex: TI, HVAC, Elétrico">
                            </div>
                            <div class="col-md-4">
                                <label for="status" class="form-label">Status *</label>
                                <select class="form-select" id="status" name="status" required>
                                    <option value="ativo" {% if equipamento and equipamento.status == 'ativo' %}selected{% endif %}>Ativo</option>
                                    <option value="manutencao" {% if equipamento and equipamento.status == 'manutencao' %}selected{% endif %}>Em Manutenção</option>
                                    <option value="inativo" {% if equipamento and equipamento.status == 'inativo' %}selected{% endif %}>Inativo</option>
                                    <option value="baixado" {% if equipamento and equipamento.status == 'baixado' %}selected{% endif %}>Baixado</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Aba: Especificações -->
            <div class="tab-pane fade" id="especificacoes" role="tabpanel">
                <div class="card mb-3">
                    <div class="card-header">
                        <h5 class="mb-0">Dados Técnicos</h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label for="fabricante" class="form-label">Fabricante</label>
                                <input type="text" class="form-control" id="fabricante" name="fabricante" value="{{ equipamento.fabricante if equipamento else '' }}">
                            </div>
                            <div class="col-md-4">
                                <label for="modelo" class="form-label">Modelo</label>
                                <input type="text" class="form-control" id="modelo" name="modelo" value="{{ equipamento.modelo if equipamento else '' }}">
                            </div>
                            <div class="col-md-4">
                                <label for="ano_fabricacao" class="form-label">Ano de Fabricação</label>
                                <input type="number" class="form-control" id="ano_fabricacao" name="ano_fabricacao" value="{{ equipamento.ano_fabricacao if equipamento else '' }}" min="1900" max="2100">
                            </div>
                            <div class="col-md-6">
                                <label for="numero_serie" class="form-label">Número de Série</label>
                                <input type="text" class="form-control" id="numero_serie" name="numero_serie" value="{{ equipamento.numero_serie if equipamento else '' }}">
                            </div>
                            <div class="col-md-6">
                                <label for="patrimonio" class="form-label">Nº Patrimônio</label>
                                <input type="text" class="form-control" id="patrimonio" name="patrimonio" value="{{ equipamento.patrimonio if equipamento else '' }}">
                            </div>
                            <div class="col-md-4">
                                <label for="potencia" class="form-label">Potência</label>
                                <input type="text" class="form-control" id="potencia" name="potencia" value="{{ equipamento.potencia if equipamento else '' }}" placeholder="Ex: 500W, 12000 BTUs">
                            </div>
                            <div class="col-md-4">
                                <label for="capacidade" class="form-label">Capacidade</label>
                                <input type="text" class="form-control" id="capacidade" name="capacidade" value="{{ equipamento.capacidade if equipamento else '' }}" placeholder="Ex: 500GB, 10L">
                            </div>
                            <div class="col-md-4">
                                <label for="voltagem" class="form-label">Voltagem</label>
                                <select class="form-select" id="voltagem" name="voltagem">
                                    <option value="">Selecione...</option>
                                    <option value="110V" {% if equipamento and equipamento.voltagem == '110V' %}selected{% endif %}>110V</option>
                                    <option value="220V" {% if equipamento and equipamento.voltagem == '220V' %}selected{% endif %}>220V</option>
                                    <option value="Bivolt" {% if equipamento and equipamento.voltagem == 'Bivolt' %}selected{% endif %}>Bivolt</option>
                                    <option value="380V" {% if equipamento and equipamento.voltagem == '380V' %}selected{% endif %}>380V (Trifásico)</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="estado_conservacao" class="form-label">Estado de Conservação</label>
                                <select class="form-select" id="estado_conservacao" name="estado_conservacao">
                                    <option value="">Selecione...</option>
                                    <option value="Novo" {% if equipamento and equipamento.estado_conservacao == 'Novo' %}selected{% endif %}>Novo</option>
                                    <option value="Ótimo" {% if equipamento and equipamento.estado_conservacao == 'Ótimo' %}selected{% endif %}>Ótimo</option>
                                    <option value="Bom" {% if equipamento and equipamento.estado_conservacao == 'Bom' %}selected{% endif %}>Bom</option>
                                    <option value="Regular" {% if equipamento and equipamento.estado_conservacao == 'Regular' %}selected{% endif %}>Regular</option>
                                    <option value="Ruim" {% if equipamento and equipamento.estado_conservacao == 'Ruim' %}selected{% endif %}>Ruim</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="manual_url" class="form-label">Link do Manual</label>
                                <input type="url" class="form-control" id="manual_url" name="manual_url" value="{{ equipamento.manual_url if equipamento else '' }}" placeholder="https://">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Aba: Cliente/Localização -->
            <div class="tab-pane fade" id="cliente" role="tabpanel">
                <div class="card mb-3">
                    <div class="card-header">
                        <h5 class="mb-0">Proprietário e Localização</h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-12">
                                <label for="cliente_id" class="form-label">Cliente *</label>
                                <select class="form-select" id="cliente_id" name="cliente_id" required>
                                    <option value="">Selecione...</option>
                                    {% for cliente in clientes %}
                                    {% set cliente_selecionado = false %}
                                    {% if equipamento %}
                                        {% if cliente['tipo_cadastro'] == 'pessoa' and equipamento.pessoa_id == cliente['id_real'] %}
                                            {% set cliente_selecionado = true %}
                                        {% elif cliente['tipo_cadastro'] == 'cliente' and equipamento.cliente_id == cliente['id_real'] %}
                                            {% set cliente_selecionado = true %}
                                        {% endif %}
                                    {% endif %}
                                    <option value="{{ cliente['id'] }}" {% if cliente_selecionado %}selected{% endif %}>
                                        {{ cliente['nome'] }}
                                        {% if cliente['cpf_cnpj'] %} - {{ cliente['cpf_cnpj'] }}{% endif %}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-12">
                                <label for="localizacao" class="form-label">Localização</label>
                                <input type="text" class="form-control" id="localizacao" name="localizacao" value="{{ equipamento.localizacao if equipamento else '' }}" placeholder="Ex: Sala 201, Galpão A, Matriz">
                            </div>
                            <div class="col-md-12">
                                <label for="observacoes_localizacao" class="form-label">Observações de Localização</label>
                                <textarea class="form-control" id="observacoes_localizacao" name="observacoes_localizacao" rows="3" placeholder="Detalhes adicionais sobre onde o equipamento está instalado">{{ equipamento.observacoes_localizacao if equipamento else '' }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Aba: Garantia -->
            <div class="tab-pane fade" id="garantia" role="tabpanel">
                <div class="card mb-3">
                    <div class="card-header">
                        <h5 class="mb-0">Informações de Garantia</h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label for="data_compra" class="form-label">Data da Compra</label>
                                <input type="date" class="form-control" id="data_compra" name="data_compra" value="{{ equipamento.data_compra.strftime('%Y-%m-%d') if equipamento and equipamento.data_compra else '' }}">
                            </div>
                            <div class="col-md-4">
                                <label for="data_garantia" class="form-label">Garantia até</label>
                                <input type="date" class="form-control" id="data_garantia" name="data_garantia" value="{{ equipamento.data_garantia.strftime('%Y-%m-%d') if equipamento and equipamento.data_garantia else '' }}">
                            </div>
                            <div class="col-md-4">
                                <label for="fornecedor_garantia" class="form-label">Fornecedor/Garantia</label>
                                <input type="text" class="form-control" id="fornecedor_garantia" name="fornecedor_garantia" value="{{ equipamento.fornecedor_garantia if equipamento else '' }}" placeholder="Nome do fornecedor">
                            </div>
                            
                            {% if equipamento and equipamento.data_garantia %}
                            <div class="col-md-12">
                                {% if equipamento.em_garantia() %}
                                <div class="alert alert-success">
                                    <i class="bi bi-shield-check"></i> <strong>Em garantia!</strong> Válida até {{ equipamento.data_garantia.strftime('%d/%m/%Y') }}
                                </div>
                                {% else %}
                                <div class="alert alert-warning">
                                    <i class="bi bi-shield-x"></i> <strong>Garantia vencida</strong> em {{ equipamento.data_garantia.strftime('%d/%m/%Y') }}
                                </div>
                                {% endif %}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Aba: Manutenção -->
            <div class="tab-pane fade" id="manutencao" role="tabpanel">
                <div class="card mb-3">
                    <div class="card-header">
                        <h5 class="mb-0">Controle de Manutenção</h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="periodicidade_manutencao" class="form-label">Periodicidade (dias)</label>
                                <input type="number" class="form-control" id="periodicidade_manutencao" name="periodicidade_manutencao" value="{{ equipamento.periodicidade_manutencao if equipamento else '' }}" placeholder="Ex: 90, 180, 365">
                                <small class="text-muted">Intervalo entre manutenções preventivas</small>
                            </div>
                            
                            {% if equipamento %}
                            <div class="col-md-6">
                                <label class="form-label">Próxima Manutenção</label>
                                {% if equipamento.proxima_manutencao %}
                                <div class="form-control-plaintext">
                                    {{ equipamento.proxima_manutencao.strftime('%d/%m/%Y') }}
                                    {% if equipamento.precisa_manutencao() %}
                                    <span class="badge bg-danger ms-2">
                                        <i class="bi bi-exclamation-triangle"></i> Urgente
                                    </span>
                                    {% endif %}
                                </div>
                                {% else %}
                                <div class="form-control-plaintext text-muted">
                                    Não agendada
                                </div>
                                {% endif %}
                            </div>
                            {% endif %}
                            
                            <div class="col-md-12">
                                <label for="observacoes" class="form-label">Observações Gerais</label>
                                <textarea class="form-control" id="observacoes" name="observacoes" rows="4" placeholder="Anotações, histórico, instruções especiais...">{{ equipamento.observacoes if equipamento else '' }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Botões de Ação -->
        <div class="d-flex justify-content-between mt-4">
            <a href="{{ url_for('equipamentos') }}" class="btn btn-secondary">
                <i class="bi bi-x-circle"></i> Cancelar
            </a>
            <button type="submit" class="btn btn-primary">
                <i class="bi bi-check-circle"></i> Salvar Equipamento
            </button>
        </div>
    </form>
</div>

<script>
// Validação Bootstrap
(function() {
    'use strict';
    const forms = document.querySelectorAll('.needs-validation');
    Array.from(forms).forEach(form => {
        form.addEventListener('submit', event => {
            if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            }
            form.classList.add('was-validated');
        }, false);
    });
})();
</script>
{% endblock %}