{% extends "base.html" %}

{% block title %}Nova Solicitação Comercial - GWG Intranet{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
    <h1><i class="bi bi-plus-circle"></i> Nova Solicitação Comercial</h1>
</div>

<div class="card shadow-sm">
    <div class="card-header bg-primary text-white">
        <h5 class="mb-0">Dados do Cliente</h5>
    </div>
    
    <div class="card-body p-4">
        <form method="POST" action="{{ url_for('nova_solicitacao_comercial') }}" enctype="multipart/form-data">
            
            <!-- Dados do Cliente -->
            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label">Razão Social / Nome Cliente *</label>
                    <input type="text" class="form-control" name="cliente_nome" required 
                           placeholder="Empresa LTDA">
                </div>
                
                <div class="col-md-6">
                    <label class="form-label">CNPJ *</label>
                    <input type="text" class="form-control" name="cliente_cnpj" required 
                           placeholder="00.000.000/0001-00">
                </div>
            </div>
            
            <div class="row mb-3">
                <div class="col-md-8">
                    <label class="form-label">Endereço Completo *</label>
                    <input type="text" class="form-control" name="cliente_endereco" required 
                           placeholder="Rua, Número, Bairro">
                </div>
                
                <div class="col-md-4">
                    <label class="form-label">Cidade *</label>
                    <select class="form-select" name="cliente_cidade" required>
                        <option value="">Selecione...</option>
                        <option value="Campos do Jordão">Campos do Jordão</option>
                        <option value="Pindamonhangaba">Pindamonhangaba</option>
                        <option value="Roseira">Roseira</option>
                        <option value="Aparecida">Aparecida</option>
                        <option value="Guará">Guará</option>
                        <option value="Lorena">Lorena</option>
                        <option value="Canas">Canas</option>
                        <option value="Cachoeira Paulista">Cachoeira Paulista</option>
                        <option value="Cruzeiro">Cruzeiro</option>
                        <option value="Americana">Americana</option>
                        <option value="Outra">Outra (consultar disponibilidade)</option>
                    </select>
                </div>
            </div>
            
            <hr class="my-4">
            
            <!-- Contato -->
            <h5><i class="bi bi-person"></i> Dados do Contato</h5>
            
            <div class="row mb-3">
                <div class="col-md-4">
                    <label class="form-label">Nome do Contato</label>
                    <input type="text" class="form-control" name="cliente_contato_nome" 
                           placeholder="Nome da pessoa de contato">
                </div>
                
                <div class="col-md-4">
                    <label class="form-label">Telefone</label>
                    <input type="text" class="form-control" name="cliente_contato_tel" 
                           placeholder="(12) 99999-9999">
                </div>
                
                <div class="col-md-4">
                    <label class="form-label">Email</label>
                    <input type="email" class="form-control" name="cliente_contato_email" 
                           placeholder="contato@empresa.com">
                </div>
            </div>
            
            <hr class="my-4">
            
            <!-- Produto -->
            <h5><i class="bi bi-router"></i> Produto Solicitado</h5>
            
            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label">Tipo de Produto *</label>
                    <select class="form-select" name="tipo_produto" required>
                        <option value="">Selecione...</option>
                        <option value="internet">Internet Banda Larga (Fibra)</option>
                        <option value="link_dedicado">Link Dedicado (Empresarial)</option>
                        <option value="telefonia_fixa">Telefonia Fixa (PABX)</option>
                        <option value="telefonia_movel">Telefonia Móvel (Chips)</option>
                    </select>
                </div>
                
                <div class="col-md-6">
                    <label class="form-label">Banda Desejada (Mbps)</label>
                    <select class="form-select" name="banda_mbps">
                        <option value="">Selecione...</option>
                        <option value="240">240 Mbps</option>
                        <option value="360">360 Mbps</option>
                        <option value="450">450 Mbps</option>
                        <option value="600">600 Mbps</option>
                        <option value="800">800 Mbps</option>
                        <option value="1000">1000 Mbps (1 Gbps)</option>
                        <option value="outra">Outra (especificar nas observações)</option>
                    </select>
                </div>
            </div>
            
            <div class="mb-3">
                <label class="form-label">Observações</label>
                <textarea class="form-control" name="observacoes" rows="3" 
                          placeholder="Informações adicionais, necessidades específicas, etc."></textarea>
            </div>
            
            <div class="mb-3">
                <label class="form-label">Anexar Arquivos</label>
                <input type="file" class="form-control" name="arquivos" multiple 
                       accept=".pdf,.doc,.docx,.png,.jpg,.jpeg">
                <div class="form-text">PDFs, documentos ou imagens relacionados ao cliente.</div>
            </div>
            
            <div class="alert alert-info">
                <i class="bi bi-info-circle"></i> 
                <strong>Após envio:</strong> A proposta será gerada automaticamente pela equipe comercial.
            </div>
            
            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                <a href="{{ url_for('dashboard') }}" class="btn btn-outline-secondary">Cancelar</a>
                <button type="submit" class="btn btn-gwg">
                    <i class="bi bi-send"></i> Enviar Solicitação
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}