@extends('template')

@section('conteudo')

    {{-- Breadcrumb --}}
    <nav class="mb-3" style="font-size:0.82rem;">
        <span class="text-muted" style="cursor:pointer;" onclick="carregarConteudo('/inscricoes')">Inscrições</span>
        <span class="text-muted mx-1">/</span>
        <span style="color:var(--primary); font-weight:600;">Nova Inscrição</span>
    </nav>

    {{-- Cabeçalho --}}
    <div class="d-flex align-items-start justify-content-between mb-4">
        <div class="d-flex align-items-center gap-3">
            <i class="bi bi-pencil-square" style="font-size:2rem; color:var(--primary);"></i>
            <div>
                <h4 class="fw-bold mb-0" style="color:var(--primary);">Nova Inscrição</h4>
                <span class="text-muted" style="font-size:0.82rem;">Preencha os dados da visita passo a passo</span>
            </div>
        </div>
        <button type="button" class="btn btn-sm rounded-3 btn-outline-castelo"
                onclick="carregarConteudo('/inscricoes')">
            <i class="bi bi-arrow-left me-1"></i> Voltar
        </button>
    </div>

    {{-- Card único: indicador de progresso + formulário --}}
    <div class="form-container">

        {{-- Step indicator --}}
        <div class="stepflow-header">
            <div id="stepflow" class="stepflow">
                <div class="stepflow-item ativo" id="sf-1">
                    <div class="stepflow-circulo"><i class="bi bi-building"></i></div>
                    <div class="stepflow-label">Cliente</div>
                </div>
                <div class="stepflow-item" id="sf-2">
                    <div class="stepflow-circulo"><i class="bi bi-calendar3"></i></div>
                    <div class="stepflow-label">Visita</div>
                </div>
                <div class="stepflow-item" id="sf-3">
                    <div class="stepflow-circulo"><i class="bi bi-people-fill"></i></div>
                    <div class="stepflow-label">Participantes</div>
                </div>
                <div class="stepflow-item" id="sf-4">
                    <div class="stepflow-circulo"><i class="bi bi-clipboard-check"></i></div>
                    <div class="stepflow-label">Resumo</div>
                </div>
            </div>
        </div>

        <form id="form-inscricao" novalidate>
        @csrf

        {{-- Campos hidden com todos os dados calculados --}}
        <input type="hidden" name="dados[cliente_id]"           id="campo-cliente-id">
        <input type="hidden" name="dados[cortesias]"            id="campo-cortesias">
        <input type="hidden" name="dados[cortesias_excedentes]" id="campo-cortesias-excedentes" value="0">
        <input type="hidden" name="dados[exclusividade]"        id="campo-exclusividade" value="0">
        <input type="hidden" name="dados[valor_por_aluno]"      id="campo-valor-por-aluno">
        <input type="hidden" name="dados[valor_total]"          id="campo-valor-total">

        {{-- ===== STEP 1: CLIENTE ===== --}}
        <div id="step-1">
            <div class="form-secao">
                <div class="form-secao-titulo"><i class="bi bi-building me-2"></i> Selecionar Cliente</div>

                    {{-- Busca --}}
                    <div class="mb-3" style="position:relative;">
                        <label for="busca-cliente" class="form-label fw-semibold">Cliente <span class="text-danger">*</span></label>
                        <input type="text"
                               id="busca-cliente"
                               class="form-control"
                               placeholder="Buscar por nome, código ou responsável..."
                               autocomplete="off">
                        <div class="cliente-busca-resultado" id="resultado-busca-cliente"></div>
                    </div>

                    {{-- Card do cliente selecionado --}}
                    <div id="card-cliente-selecionado" class="d-none">
                        <div class="d-flex align-items-center gap-3 p-3 rounded-3" style="background:#f0f4ff; border:1px solid #dce3f5;">
                            <i class="bi bi-check-circle-fill text-success fs-4"></i>
                            <div class="flex-grow-1">
                                <div class="fw-bold" id="display-cliente-nome" style="color:var(--primary);"></div>
                                <div class="d-flex gap-3 mt-1" style="font-size:0.8rem; color:#718096;">
                                    <span id="display-cliente-codigo"></span>
                                    <span id="display-cliente-tipo"></span>
                                    <span id="display-cliente-responsavel"></span>
                                </div>
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-secondary rounded-3" onclick="limparCliente()">
                                <i class="bi bi-x me-1"></i> Alterar
                            </button>
                        </div>

                        {{-- Regra de cortesia do tipo de cliente --}}
                        <div id="info-cortesia" class="mt-2 p-2 rounded-3" style="background:#fffde7; border:1px solid #ffe082; font-size:0.82rem; color:#7c5500;">
                        </div>
                    </div>

                    <div id="aviso-sem-cliente" class="text-muted mt-2" style="font-size:0.82rem; display:none;">
                        <i class="bi bi-info-circle me-1"></i> Nenhum cliente ativo encontrado.
                    </div>
                </div>

            <div class="d-flex justify-content-between mt-3">
                <div></div>
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-outline-secondary px-4" id="btn-salvar-rascunho-1"
                            onclick="salvarRascunho()">
                        <i class="bi bi-floppy me-1"></i> Salvar Rascunho
                    </button>
                    <button type="button" class="btn btn-castelo px-4" id="btn-avancar-1" onclick="avancarStep()" disabled>
                        Próximo <i class="bi bi-arrow-right ms-1"></i>
                    </button>
                </div>
            </div>
        </div>

        {{-- ===== STEP 2: VISITA ===== --}}
        <div id="step-2" class="d-none">
            <div class="form-secao">
                <div class="form-secao-titulo"><i class="bi bi-calendar3 me-2"></i> Dados da Visita</div>

                    <div class="row g-3">
                        <div class="col-md-3">
                            <label for="dados-status" class="form-label fw-semibold">Status <span class="text-danger">*</span></label>
                            <select class="form-select" id="dados-status" name="dados[status]" required disabled>
                                <option value="rascunho" selected>Rascunho</option>
                                <option value="em_andamento">Em Andamento</option>
                                <option value="enviada">Enviada</option>
                                <option value="agendada">Agendada</option>
                                <option value="aprovada">Aprovada</option>
                                <option value="cancelada">Cancelada</option>
                            </select>
                        </div>

                        <div class="col-md-3">
                            <label for="dados-data-visita" class="form-label fw-semibold">Data da Visita <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" id="dados-data-visita" name="dados[data_visita]" required>
                            <div id="aviso-sabado" class="mt-1 d-none" style="font-size:0.78rem; color:#e65100;">
                                <i class="bi bi-exclamation-triangle me-1"></i> Sábado — consultar disponibilidade.
                            </div>
                        </div>

                        <div class="col-md-3">
                            <label for="dados-horario" class="form-label fw-semibold">Horário <span class="text-danger">*</span></label>
                            <input type="time" class="form-control" id="dados-horario" name="dados[horario]" value="08:30" required>
                        </div>

                        <div class="col-md-3">
                            <label for="dados-modalidade" class="form-label fw-semibold">Modalidade <span class="text-danger">*</span></label>
                            <select class="form-select" id="dados-modalidade" name="dados[modalidade]" required onchange="_recalcular()">
                                <option value="">Selecionar...</option>
                                <option value="sem_agencia">Sem Agência</option>
                                <option value="com_agencia_parceira">Com Agência Parceira</option>
                                <option value="universo_ludico">Universo Lúdico</option>
                            </select>
                        </div>
                    </div>

                    {{-- Badge exclusividade --}}
                    <div id="badge-exclusividade" class="mt-3 d-none">
                        <span class="badge rounded-pill" style="background:var(--secondary); color:#fff; font-size:0.8rem; padding:0.4em 0.9em;">
                            <i class="bi bi-star-fill me-1"></i> Visita Exclusiva (≥ 150 alunos pagantes)
                        </span>
                    </div>
                </div>

            <div class="d-flex justify-content-between mt-3">
                <button type="button" class="btn btn-outline-secondary px-4" onclick="voltarStep()">
                    <i class="bi bi-arrow-left me-1"></i> Anterior
                </button>
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-outline-secondary px-4" id="btn-salvar-rascunho-2"
                            onclick="salvarRascunho()">
                        <i class="bi bi-floppy me-1"></i> Salvar Rascunho
                    </button>
                    <button type="button" class="btn btn-castelo px-4" id="btn-avancar-2" onclick="avancarStep()">
                        Próximo <i class="bi bi-arrow-right ms-1"></i>
                    </button>
                </div>
            </div>
        </div>

        {{-- ===== STEP 3: PARTICIPANTES ===== --}}
        <div id="step-3" class="d-none">
            <div class="row g-3 align-items-start">

                {{-- Coluna esquerda: inputs --}}
                <div class="col-lg-6">
                    <div class="form-secao">
                        <div class="form-secao-titulo"><i class="bi bi-people me-2"></i> Participantes</div>

                            <div class="mb-3">
                                <label for="dados-alunos-pagantes" class="form-label fw-semibold">
                                    Alunos Pagantes <span class="text-danger">*</span>
                                </label>
                                <input type="number" class="form-control" id="dados-alunos-pagantes"
                                       name="dados[alunos_pagantes]" min="1" max="999" required
                                       oninput="_recalcular()">
                                <div class="form-text" id="hint-cortesias"></div>
                            </div>

                            <div id="bloco-onibus" class="mb-3 p-2 rounded-3 d-none"
                                 style="background:#e8f5e9; border:1px solid #a5d6a7; font-size:0.82rem; color:#2e7d32;">
                                <i class="bi bi-bus-front me-1"></i>
                                <span id="txt-onibus">0 ônibus estimados</span>
                                <span class="text-muted ms-2">(base: 50 alunos/ônibus)</span>
                            </div>

                            <div class="mb-3">
                                <label for="dados-cortesias-excedentes-input" class="form-label fw-semibold">
                                    Cortesias Excedentes
                                    <span class="badge bg-warning text-dark ms-1" style="font-size:0.7rem;">50% do valor</span>
                                </label>
                                <input type="number" class="form-control" id="dados-cortesias-excedentes-input"
                                       name="dados[cortesias_excedentes_input]" min="0" max="99" value="0"
                                       oninput="_recalcular()">
                                <div class="form-text">Acompanhantes acima do limite de cortesias gratuitas.</div>
                            </div>
                        </div>

                        <div class="form-secao">
                            <div class="form-secao-titulo"><i class="bi bi-accessibility me-2"></i> PCD</div>

                            <div class="row g-3">
                                <div class="col-6">
                                    <label for="dados-pcds" class="form-label fw-semibold">PCDs</label>
                                    <input type="number" class="form-control" id="dados-pcds"
                                           name="dados[pcds]" min="0" max="99" value="0"
                                           oninput="_recalcular()">
                                </div>
                                <div class="col-6">
                                    <label for="dados-acomp-pcd" class="form-label fw-semibold">Acomp. PCD</label>
                                    <input type="number" class="form-control" id="dados-acomp-pcd"
                                           name="dados[acompanhantes_pcd]" min="0" max="99" value="0"
                                           oninput="_recalcular()">
                                </div>
                            </div>

                            <div class="form-check mt-3">
                                <input class="form-check-input" type="checkbox" id="dados-laudo-pcd"
                                       name="dados[laudo_pcd]" value="1" onchange="_recalcular()">
                                <label class="form-check-label" for="dados-laudo-pcd">
                                    Laudo PCD entregue
                                    <span class="text-muted" style="font-size:0.78rem;">(desconto de 50% aplicado)</span>
                                </label>
                            </div>
                        </div>

                        {{-- Gancho transporte --}}
                        <div id="bloco-transporte" class="form-secao d-none">
                            <div class="calc-alerta">
                                <i class="bi bi-truck me-1"></i>
                                <strong>Custo com transporte:</strong> Regra em definição com o time comercial.
                                Este campo ficará disponível quando a política for estabelecida.
                            </div>
                        </div>
                </div>

                {{-- Coluna direita: painel de cálculo --}}
                <div class="col-lg-6">
                    <div class="calc-panel">
                        <div class="calc-panel-titulo"><i class="bi bi-currency-dollar me-1"></i> Valores</div>

                        {{-- Quando modalidade "com agência parceira" --}}
                        <div id="calc-consultar" class="calc-consultar d-none">
                            <div class="mb-3">
                                <label for="dados-valor-customizado" class="form-label fw-semibold" style="font-size:0.9rem;">
                                    Valor por Aluno <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">R$</span>
                                    <input type="text" class="form-control" id="dados-valor-customizado" 
                                           name="dados[valor_por_aluno_display]" data-mascara="moeda"
                                           placeholder="240,00" oninput="_recalcular()">
                                    <input type="hidden" name="dados[valor_por_aluno]" id="dados-valor-customizado-hidden">
                                </div>
                                <small class="text-muted">Informar após consulta com time comercial</small>
                            </div>
                        </div>

                        {{-- Cálculo normal --}}
                        <div id="calc-normal">
                            <div class="calc-linha">
                                <span class="calc-linha-label">Valor por aluno</span>
                                <span class="calc-linha-valor" id="cv-valor-por-aluno">—</span>
                            </div>
                            <div class="calc-linha">
                                <span class="calc-linha-label" id="cv-label-pagantes">Alunos pagantes</span>
                                <span class="calc-linha-valor" id="cv-subtotal-pagantes">—</span>
                            </div>
                            <div class="calc-linha" id="cv-linha-cortesias-gratuitas">
                                <span class="calc-linha-label" id="cv-label-cortesias">Cortesias gratuitas</span>
                                <span class="calc-linha-valor text-success">R$ 0,00</span>
                            </div>
                            <div class="calc-linha" id="cv-linha-excedentes" style="display:none;">
                                <span class="calc-linha-label">Cortesias excedentes</span>
                                <span class="calc-linha-valor" id="cv-subtotal-excedentes">—</span>
                            </div>
                            <div class="calc-linha" id="cv-linha-pcd" style="display:none;">
                                <span class="calc-linha-label">Desconto PCD</span>
                                <span class="calc-linha-valor text-success" id="cv-desconto-pcd">—</span>
                            </div>

                            <div class="calc-linha destaque">
                                <span class="calc-linha-label">VALOR TOTAL</span>
                                <span class="calc-linha-valor" id="cv-valor-total">—</span>
                            </div>

                            <div class="mt-3 mb-1" style="font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:#718096;">
                                Condições de Pagamento
                            </div>
                            <div class="calc-linha prazo">
                                <span class="calc-linha-label">Sinal (50%)</span>
                                <span class="calc-linha-valor" id="cv-sinal">—</span>
                            </div>
                            <div class="calc-linha prazo">
                                <span class="calc-linha-label">Venc. sinal</span>
                                <span class="calc-linha-valor" id="cv-prazo-sinal">—</span>
                            </div>
                            <div class="calc-linha prazo">
                                <span class="calc-linha-label">Quitação (50%)</span>
                                <span class="calc-linha-valor" id="cv-quitacao">—</span>
                            </div>
                            <div class="calc-linha prazo">
                                <span class="calc-linha-label">Venc. quitação</span>
                                <span class="calc-linha-valor" id="cv-prazo-quitacao">—</span>
                            </div>

                            <div id="cv-aviso-sem-data" class="calc-alerta mt-2" style="display:none;">
                                <i class="bi bi-calendar-x me-1"></i> Informe a data da visita para calcular os prazos.
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-between mt-2">
                <button type="button" class="btn btn-outline-secondary px-4" onclick="voltarStep()">
                    <i class="bi bi-arrow-left me-1"></i> Anterior
                </button>
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-outline-secondary px-4" id="btn-salvar-rascunho-3"
                            onclick="salvarRascunho()">
                        <i class="bi bi-floppy me-1"></i> Salvar Rascunho
                    </button>
                    <button type="button" class="btn btn-castelo px-4" id="btn-avancar-3" onclick="avancarStep()">
                        Próximo <i class="bi bi-arrow-right ms-1"></i>
                    </button>
                </div>
            </div>
        </div>

        {{-- ===== STEP 4: RESUMO ===== --}}
        <div id="step-4" class="d-none">
            <div class="form-secao">
                <div class="form-secao-titulo"><i class="bi bi-clipboard-check me-2"></i> Resumo da Inscrição</div>

                    <div class="row g-3">
                        {{-- Cliente --}}
                        <div class="col-md-6 d-flex">
                            <div class="p-3 rounded-3 w-100" style="background:#f7f9ff; border:1px solid #dce3f5;">
                                <div style="font-size:0.7rem; font-weight:700; text-transform:uppercase; color:var(--primary); letter-spacing:0.06em; margin-bottom:0.5rem;">Cliente</div>
                                <div class="fw-bold" id="res-cliente-nome"></div>
                                <div style="font-size:0.8rem; color:#718096;" id="res-cliente-detalhe"></div>
                            </div>
                        </div>

                        {{-- Visita --}}
                        <div class="col-md-6 d-flex">
                            <div class="p-3 rounded-3 w-100" style="background:#f7f9ff; border:1px solid #dce3f5;">
                                <div style="font-size:0.7rem; font-weight:700; text-transform:uppercase; color:var(--primary); letter-spacing:0.06em; margin-bottom:0.5rem;">Visita</div>
                                <div class="fw-bold" id="res-data-horario"></div>
                                <div style="font-size:0.8rem; color:#718096;" id="res-modalidade"></div>
                                <div class="mt-1" id="res-badge-exclusividade"></div>
                            </div>
                        </div>

                        {{-- Participantes --}}
                        <div class="col-md-6 d-flex">
                            <div class="p-3 rounded-3 w-100" style="background:#f7f9ff; border:1px solid #dce3f5;">
                                <div style="font-size:0.7rem; font-weight:700; text-transform:uppercase; color:var(--primary); letter-spacing:0.06em; margin-bottom:0.5rem;">Participantes</div>
                                <div style="font-size:0.85rem;" id="res-participantes"></div>
                            </div>
                        </div>

                        {{-- Financeiro --}}
                        <div class="col-md-6 d-flex">
                            <div class="p-3 rounded-3 w-100" style="background:#f0f4ff; border:1px solid var(--primary);">
                                <div style="font-size:0.7rem; font-weight:700; text-transform:uppercase; color:var(--primary); letter-spacing:0.06em; margin-bottom:0.5rem;">Financeiro</div>
                                <div style="font-size:0.85rem;" id="res-financeiro"></div>
                            </div>
                        </div>
                    </div>

                    <div id="res-aviso-consultar" class="calc-consultar mt-3 d-none">
                        <i class="bi bi-telephone-outbound me-2 fs-5"></i> Modalidade com Agência Parceira — consultar time comercial para valor final.
                    </div>
                </div>

            <div class="d-flex justify-content-between mt-3">
                <button type="button" class="btn btn-outline-secondary px-4" onclick="voltarStep()">
                    <i class="bi bi-arrow-left me-1"></i> Anterior
                </button>
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-outline-secondary px-4" id="btn-salvar-rascunho"
                            onclick="salvarRascunho()">
                        <i class="bi bi-floppy me-1"></i> Salvar Rascunho
                    </button>
                    <button type="button" class="btn btn-success px-4" id="btn-salvar-inscricao"
                            onclick="submeterForm('/inscricoes/salvar', 'form-inscricao', 'btn-salvar-inscricao')">
                        <i class="bi bi-check-circle me-1"></i> Salvar Inscrição
                    </button>
                </div>
            </div>
        </div>

        </form>

    </div>{{-- /card único --}}

    {{-- Dataset de clientes para o JS --}}
    <script>
        window._clientesDataset = @json($clientesData);
    </script>
    <script src="{{ asset('js/inscricoes.js') }}"></script>
@endsection