@php
$title = 'Editar Proposta';
@endphp

<div data-proposta-id="{{ $proposta->id }}" 
     data-update-route="{{ route('propostas.update', $proposta->id) }}">
    <nav aria-label="breadcrumb" class="mb-2 mt-2">
        <ol class="breadcrumb bg-transparent px-0 py-1 mb-1">
            <li class="breadcrumb-item"><a href="/" class="text-decoration-none text-secondary">Início</a></li>
            <li class="breadcrumb-item"><a href="#" onclick="carregarConteudo(`{{ route('propostas.list') }}`)" class="text-decoration-none text-secondary">Propostas</a></li>
            <li class="breadcrumb-item active text-dark" aria-current="page">Editar Proposta</li>
        </ol>
    </nav>

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="fw-bold mb-0" style="font-size:2.1rem; letter-spacing:1px;">
                <i class="bi bi-file-earmark-text me-2 text-primary"></i>Editar Proposta
            </h1>
            <span class="text-muted small">Edite a proposta comercial de viagem</span>
        </div>
        <div>
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="carregarConteudo(`{{ route('propostas.list') }}`)">
                <i class="bi bi-arrow-left me-2"></i>Voltar
            </button>
        </div>
    </div>

    {{-- Indicador de Steps Moderno --}}
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-body py-4 px-5">
            <div class="step-progress-container">
                <div class="steps-wrapper">
                    <div class="step-item active" id="step-indicator-1" data-step="1">
                        <div class="step-circle">
                            <i class="bi bi-info-circle"></i>
                            <div class="step-check"><i class="bi bi-check-lg"></i></div>
                        </div>
                        <div class="step-content">
                            <div class="step-title">Informações</div>
                            <div class="step-subtitle">Dados básicos do projeto</div>
                        </div>
                    </div>
                    <div class="step-item" id="step-indicator-2" data-step="2">
                        <div class="step-circle">
                            <i class="bi bi-sign-turn-right"></i>
                            <div class="step-check"><i class="bi bi-check-lg"></i></div>
                        </div>
                        <div class="step-content">
                            <div class="step-title">Roteiro</div>
                            <div class="step-subtitle">Planeje sua jornada</div>
                        </div>
                    </div>
                    <div class="step-item" id="step-indicator-3" data-step="3">
                        <div class="step-circle">
                            <i class="bi bi-currency-dollar"></i>
                            <div class="step-check"><i class="bi bi-check-lg"></i></div>
                        </div>
                        <div class="step-content">
                            <div class="step-title">Custo</div>
                            <div class="step-subtitle">Orçamento estimado</div>
                        </div>
                    </div>
                    <div class="step-item" id="step-indicator-4" data-step="4">
                        <div class="step-circle">
                            <i class="bi bi-file-earmark-text"></i>
                            <div class="step-check"><i class="bi bi-check-lg"></i></div>
                        </div>
                        <div class="step-content">
                            <div class="step-title">Resumo</div>
                            <div class="step-subtitle">Visão geral completa</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <form id="formNovaProposta" class="needs-validation" novalidate data-proposta-id="{{ $proposta->id }}">
        @csrf

        {{-- STEP 1: Informações Básicas --}}
        <div class="step-content" id="step-1">
            <div class="card shadow border-0">
                <div class="card-header bg-white border-0 pb-1">
                    <span class="fw-bold"><i class="bi bi-info-circle me-2"></i>Informações da Proposta</span>
                </div>
                <div class="card-body">
                    {{-- Primeira Linha - Cliente (com autocomplete IGUAL ao de rotas) --}}
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <label for="cliente_busca" class="form-label required-field">Cliente</label>

                            <div class="d-flex align-items-center gap-2">
                                <div style="flex: 1; position: relative;">
                                    <div class="input-group">
                                        <span class="input-group-text bg-white">
                                            <i class="bi bi-search"></i>
                                        </span>
                                        <input type="text"
                                            class="form-control"
                                            id="cliente_busca"
                                            data-url="{{ route('clientes.buscar') }}"
                                            placeholder="Digite no mínimo 4 caracteres para buscar..."
                                            autocomplete="off"
                                            required>
                                    </div>

                                    {{-- Lista de resultados --}}
                                    <div id="lista-resultados-clientes" class="list-group shadow-sm"
                                        style="display: none; position: absolute; z-index: 1050; max-height: 300px; overflow-y: auto; width: 100%; background: white; border-radius: 0.375rem; margin-top: 2px;">
                                    </div>
                                </div>
                                {{-- Loading específico do autocomplete (FORA do input-group) --}}
                                <div class="clientes-search-loading" id="clientes-search-loading">
                                    <div class="clientes-search-spinner"></div>
                                </div>
                            </div>

                            <div class="invalid-feedback">
                                Por favor, selecione um cliente.
                            </div>

                            {{-- Hidden field com ID do cliente --}}
                            <input type="hidden" id="cliente_id" name="dados[cliente_id]" value="{{ isset($proposta) ? $proposta->cliente_id : '' }}" required>

                            {{-- Dados para auto-inicialização em modo de edição --}}
                            @if(isset($proposta) && $proposta->cliente)
                            <input type="hidden" id="edit_cliente_nome" value="{{ $proposta->cliente->nome_fantasia ?? $proposta->cliente->razao_social }}" onfocus="inicializarEdicaoProposta()">
                            <input type="hidden" id="edit_cliente_razao" value="{{ $proposta->cliente->razao_social ?? '' }}">
                            <input type="hidden" id="edit_cliente_unidade" value="{{ $proposta->cliente->complemento ?? '' }}">
                            <input type="hidden" id="edit_cliente_cnpj" value="{{ $proposta->cliente->cnpj ?? '' }}">
                            <input type="hidden" id="edit_cliente_telefone" value="{{ $proposta->cliente->telefone ?? '' }}">
                            <input type="hidden" id="edit_cliente_coordenadores" value='@json($proposta->cliente->coordenadores ?? [])'>
                            @if($proposta->coordenador)
                            <input type="hidden" id="edit_coordenador_tipo" value="{{ $proposta->coordenador->idTipoCoord }}">
                            @endif
                            @endif

                            {{-- Cliente selecionado --}}
                            <div class="alert alert-success border-success mt-2 text-start" id="cliente-selecionado-alert" style="display: none;">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div id="cliente_selecionado" class="flex-grow-1">
                                        {{-- Preenchido via JavaScript --}}
                                    </div>
                                    <button type="button" class="btn btn-sm btn-outline-danger" id="btn-limpar-cliente">
                                        <i class="bi bi-x-lg"></i> Trocar
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Segunda Linha - Status e Validade --}}
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="status_proposta" class="form-label required-field">Status da Proposta</label>
                            <select class="form-select" id="status_proposta" name="dados[status_proposta]" 
                                    onfocus="if(typeof inicializarEdicaoProposta === 'function') inicializarEdicaoProposta()" 
                                    required {{ $proposta->status->value == 'RASCUNHO' ? 'disabled' : '' }}>
                                <option value="">Selecione...</option>
                                @if($proposta->status->value === 'RASCUNHO')
                                <option value="RASCUNHO" selected>Rascunho</option>
                                @endif
                                <option value="EM_ANDAMENTO" {{ $proposta->status->value == 'EM_ANDAMENTO' ? 'selected' : '' }}>Em Andamento</option>
                                <option value="ENVIADA" {{ $proposta->status->value == 'ENVIADA' ? 'selected' : '' }}>Enviada</option>
                                <option value="APROVADA" {{ $proposta->status->value == 'APROVADA' ? 'selected' : '' }}>Aprovada</option>
                                <option value="REJEITADA" {{ $proposta->status->value == 'REJEITADA' ? 'selected' : '' }}>Rejeitada</option>
                                <option value="CANCELADA" {{ $proposta->status->value == 'CANCELADA' ? 'selected' : '' }}>Cancelada</option>
                            </select>
                            <div class="invalid-feedback">Por favor, selecione o status.</div>
                        </div>
                        <div class="col-md-6">
                            <label for="validade" class="form-label required-field">Validade</label>
                            <select class="form-select" id="validade" name="dados[validade]" required>
                                <option value="">Selecione...</option>
                                <option value="1_SEMESTRE" {{ isset($proposta) && $proposta->validade == '1_SEMESTRE' ? 'selected' : (!isset($proposta) ? 'selected' : '') }}>1º Semestre</option>
                                <option value="2_SEMESTRE" {{ isset($proposta) && $proposta->validade == '2_SEMESTRE' ? 'selected' : '' }}>2º Semestre</option>
                            </select>
                            <div class="invalid-feedback">Por favor, selecione a validade.</div>
                        </div>
                    </div>

                    {{-- Terceira Linha - Número de Alunos e Turmas --}}
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="numero_alunos" class="form-label required-field">Número de Alunos</label>
                            <input type="number" class="form-control" id="numero_alunos" name="dados[numero_alunos]"
                                value="{{ isset($proposta) ? $proposta->numero_alunos : '' }}"
                                min="1" placeholder="Ex: 45" required>
                            <div class="invalid-feedback">Por favor, informe o número de alunos.</div>
                        </div>
                        <div class="col-md-6">
                            <label for="turmas" class="form-label">Turmas</label>
                            <input type="text" class="form-control" id="turmas" name="dados[turmas]"
                                value="{{ isset($proposta) ? $proposta->turmas : '' }}"
                                placeholder="Ex: 5º Ano A, 5º Ano B" required>
                            <div class="invalid-feedback">Por favor, selecione a turma.</div>
                        </div>
                    </div>

                    {{-- Quarta Linha - Tipo e Coordenador (aparecem após selecionar cliente) --}}
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <label for="tipo" class="form-label required-field">Tipo</label>
                            <div class="d-flex align-items-center gap-2">
                                <div style="flex: 1;">
                                    <select class="form-select"
                                        id="tipo"
                                        name="dados[tipo_id]"
                                        disabled
                                        required>
                                        <option value="">Selecione o cliente primeiro...</option>
                                    </select>
                                    <div class="invalid-feedback">Por favor, selecione o tipo.</div>
                                </div>
                                {{-- Loading específico do tipo (FORA do select) --}}
                                <div class="tipo-search-loading" id="tipo-search-loading">
                                    <div class="tipo-search-spinner"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <label for="coordenador_nome" class="form-label">Coordenador</label>
                            <input type="text"
                                class="form-control"
                                id="coordenador_nome"
                                readonly
                                placeholder="Será preenchido automaticamente">
                            <input type="hidden" id="coordenador_id" name="dados[coordenador_id]" value="{{ isset($proposta) ? $proposta->coordenador_id : '' }}">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- STEP 2: Roteiro --}}
        <div class="step-content d-none" id="step-2">
            {{-- 1. Data Agendada --}}
            <div class="card shadow border-0 mb-4">
                <div class="card-header bg-white border-0 pb-1">
                    <span class="fw-bold"><i class="bi bi-calendar3 me-2"></i>Data Prevista da Viagem</span>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <label for="data_agendada_range" class="form-label">Data Agendada</label>
                            <div class="input-group">
                                <input type="text" 
                                       class="form-control" 
                                       id="data_agendada_range" 
                                       placeholder="Selecione uma data ou período"
                                       style="z-index: 1 !important;"
                                       autocomplete="off">
                                <span class="input-group-text" data-daterange-toggle style="cursor: pointer;">
                                    <i class="bi bi-calendar"></i>
                                </span>
                            </div>
                            {{-- Campos hidden para enviar ao backend --}}
                            <input type="hidden" 
                                   id="data_agendada_inicio_hidden" 
                                   name="dados[data_agendada_inicio]" 
                                   value="{{ isset($proposta) ? ($proposta->data_agendada_inicio ? $proposta->data_agendada_inicio->format('d/m/Y') : '') : '' }}">
                            <input type="hidden" 
                                   id="data_agendada_fim_hidden" 
                                   name="dados[data_agendada_fim]" 
                                   value="{{ isset($proposta) ? ($proposta->data_agendada_fim ? $proposta->data_agendada_fim->format('d/m/Y') : '') : '' }}">
                        </div>
                        <div class="col-md-6">
                            <label for="observacao_data_agendada" class="form-label">Observação</label>
                            <input type="text" 
                                   class="form-control" 
                                   id="observacao_data_agendada" 
                                   name="dados[observacao_data_agendada]" 
                                   value="{{ isset($proposta) ? $proposta->observacao_data_agendada : '' }}"
                                   placeholder="Digite observações sobre a data da viagem">
                        </div>
                    </div>

                </div>
            </div>

            {{-- 2. Destinos --}}
            <div class="card shadow border-0 mb-4">
                <div class="card-header bg-white border-0 pb-1">
                    <span class="fw-bold"><i class="bi bi-geo-alt me-2"></i>Destinos</span>
                </div>
                <div class="card-body">
                    {{-- Busca de Destino (Autocomplete) --}}
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <label for="destino_busca" class="form-label required-field">Buscar Destino</label>
                            <div class="d-flex align-items-center gap-2">
                                <div style="flex: 1; position: relative;">
                                    <div class="input-group">
                                        <span class="input-group-text bg-white">
                                            <i class="bi bi-search"></i>
                                        </span>
                                        <input type="text"
                                            class="form-control"
                                            id="destino_busca"
                                            oninput="buscarDestinos(this.value, `{{ route('destinos.buscar') }}`)"
                                            placeholder="Digite no mínimo 3 caracteres para buscar destinos..."
                                            autocomplete="off">
                                    </div>

                                    {{-- Lista de resultados --}}
                                    <div id="lista-resultados-destinos" class="list-group shadow-sm"
                                        style="display: none; position: absolute; z-index: 1050; max-height: 300px; overflow-y: auto; width: 100%; background: white; border-radius: 0.375rem; margin-top: 2px;">
                                    </div>
                                </div>
                                {{-- Loading FORA do input-group --}}
                                <div class="destinos-search-loading" id="destinos-search-loading">
                                    <div class="destinos-search-spinner"></div>
                                </div>
                            </div>
                            <div class="invalid-feedback">
                                Por favor, selecione pelo menos um destino.
                            </div>

                            {{-- Hidden field para controlar validação (igual ao cliente) --}}
                            <input type="hidden" id="destinos_count" value="0">
                        </div>
                    </div>

                    {{-- Lista de Destinos Selecionados --}}
                    <div id="lista-destinos" class="mt-3">
                        {{-- Hidden inputs para inicialização dos destinos existentes (modo edição) --}}
                        @if(isset($proposta) && $proposta->destinos->count() > 0)
                            @foreach($proposta->destinos as $index => $propostaDestino)
                            @php
                                $destinoData = [
                                    'id' => $propostaDestino->destino->id,
                                    'nome_fantasia' => $propostaDestino->destino->nome_fantasia ?? '',
                                    'razao_social' => $propostaDestino->destino->razao_social ?? '',
                                    'endereco' => $propostaDestino->destino->endereco ?? '',
                                    'numero' => $propostaDestino->destino->numero ?? '',
                                    'cidade' => $propostaDestino->destino->cidade ?? '',
                                    'estado' => $propostaDestino->destino->estado ?? '',
                                    'telefone' => $propostaDestino->destino->telefone ?? '',
                                    'ordem' => $propostaDestino->ordem ?? $index + 1
                                ];
                            @endphp
                            <input type="hidden" 
                                   class="edit_destino_data" 
                                   value='@json($destinoData)'>
                            @endforeach
                        @else
                            <div class="alert alert-info">
                                <i class="bi bi-info-circle me-2"></i>
                                Busque e selecione destinos para adicionar ao roteiro.
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- 3. Cronograma --}}
            <div class="card shadow border-0 mb-4">
                <div class="card-header bg-white border-0 py-2 d-flex justify-content-between align-items-center">
                    <span class="fw-bold"><i class="bi bi-clock-history me-2"></i>Cronograma de Atividades</span>
                    <button type="button" class="btn btn-sm btn-primary" id="btn-adicionar-cronograma">
                        <i class="bi bi-plus-circle me-1"></i>Adicionar Cronograma
                    </button>
                </div>
                <div class="card-body">
                    {{-- Dados para auto-inicialização de cronogramas em modo de edição --}}
                    @if(isset($proposta) && $proposta->cronogramas && $proposta->cronogramas->count() > 0)
                        @foreach($proposta->cronogramas as $cronograma)
                            @php
                                $cronogramaData = [
                                    'id' => $cronograma->id,
                                    'titulo' => $cronograma->titulo,
                                    'ordem' => $cronograma->ordem,
                                    'atividades' => $cronograma->atividades->map(function($atividade) {
                                        return [
                                            'id' => $atividade->id,
                                            'horario' => substr($atividade->horario, 0, 5),
                                            'descricao' => $atividade->descricao,
                                            'ordem' => $atividade->ordem
                                        ];
                                    })->toArray()
                                ];
                            @endphp
                            <input type="hidden" 
                                   class="edit_cronograma_data" 
                                   value='@json($cronogramaData)'>
                        @endforeach
                    @endif

                    <div id="lista-cronogramas">
                        {{-- Cronogramas serão adicionados aqui --}}
                        <div class="alert alert-info">
                            <i class="bi bi-info-circle me-2"></i>
                            Nenhum cronograma adicionado. Clique em "Adicionar Cronograma" para começar.
                        </div>
                    </div>
                </div>
            </div>

            {{-- 4. Alimentação --}}
            <div class="card shadow border-0 mb-4">
                <div class="card-header bg-white border-0 pb-1">
                    <span class="fw-bold"><i class="bi bi-cup-straw me-2"></i>Alimentação</span>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label for="sugestao_local" class="form-label">Sugestão de Local</label>
                            <input type="text"
                                class="form-control"
                                id="sugestao_local"
                                name="dados[sugestao_local]"
                                value="{{ isset($proposta) ? $proposta->sugestao_local : '' }}"
                                placeholder="Ex: Os participantes devem levar lanche para a viagem">
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">Inclusa:</label>
                            <div class="d-flex gap-4">
                                <div class="form-check">
                                    <input class="form-check-input"
                                        type="radio"
                                        name="dados[incluso_alimentacao]"
                                        id="incluso_alimentacao_sim"
                                        value="1"
                                        {{ isset($proposta) && $proposta->incluso_alimentacao == 1 ? 'checked' : '' }}>
                                    <label class="form-check-label" for="incluso_alimentacao_sim">
                                        Sim
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input"
                                        type="radio"
                                        name="dados[incluso_alimentacao]"
                                        id="incluso_alimentacao_nao"
                                        value="0"
                                        {{ isset($proposta) && $proposta->incluso_alimentacao == 0 ? 'checked' : (!isset($proposta) ? 'checked' : '') }}>
                                    <label class="form-check-label" for="incluso_alimentacao_nao">
                                        Não
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- 5. Transporte --}}
            <div class="card shadow border-0 mb-4">
                <div class="card-header bg-white border-0 pb-1">
                    <span class="fw-bold"><i class="bi bi-bus-front me-2"></i>Transporte</span>
                </div>
                <div class="card-body">
                    <div class="row align-items-end">
                        <div class="col-md-6">
                            <label for="tipo_veiculo" class="form-label required-field">Tipo de Veículo</label>
                            <select class="form-select select-search" id="tipo_veiculo" name="dados[tipo_veiculo_id]" data-placeholder="Selecione o tipo de veículo..." required>
                                <option value="">Selecione o tipo de veículo...</option>
                                @foreach($tiposVeiculos as $tipo)
                                    <option value="{{ $tipo->id }}" {{ isset($proposta) && $proposta->transporte && $proposta->transporte->tipo_veiculo_id == $tipo->id ? 'selected' : '' }}>{{ $tipo->nome }}</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback">Por favor, selecione o tipo de veículo.</div>
                        </div>
                        <div class="col-md-3">
                            <label for="numero_minimo_alunos" class="form-label required-field">Nº mínimo de alunos</label>
                            <input type="text" class="form-control text-center" id="numero_minimo_alunos" name="dados[numero_minimo_alunos]" value="{{ isset($proposta) ? ($proposta->transporte->numero_minimo_alunos ?? '') : '' }}" placeholder="Ex: 30" required>
                            <div class="invalid-feedback">Por favor, informe o número mínimo de alunos.</div>
                        </div>
                        <div class="col-md-3">
                            <label for="numero_maximo_pessoas" class="form-label required-field">Nº máximo de passageiros</label>
                            <input type="text" class="form-control text-center" id="numero_maximo_pessoas" name="dados[numero_maximo_pessoas]" value="{{ isset($proposta) ? ($proposta->transporte->numero_maximo_pessoas ?? '') : '' }}" placeholder="Ex: 50" required>
                            <div class="invalid-feedback">Por favor, informe o número máximo de passageiros.</div>
                        </div>
                    </div>

                    {{-- Card de Transporte Selecionado (REMOVIDO) --}}
                    <div id="transporte-selecionado" style="display: none;"></div>
                </div>
            </div>
        </div>

        {{-- STEP 3: Custos --}}
        <div class="step-content d-none" id="step-3">
            @php
                // Organizar custos por categoria e tipo para facilitar acesso
                $custosOrganizados = [];
                if (isset($proposta) && $proposta->custos) {
                    foreach ($proposta->custos as $custo) {
                        $key = strtolower($custo->categoria) . '_' . $custo->tipo;
                        $custosOrganizados[$key] = $custo;
                    }
                }
                
                // Helper function para buscar valor do custo
                $getCustoValor = function($categoria, $tipo) use ($custosOrganizados) {
                    $key = strtolower($categoria) . '_' . $tipo;
                    $valor = $custosOrganizados[$key]->valor ?? '';
                    // Formatar valor decimal para exibição no formato brasileiro (1234.56 → 1234,56)
                    if ($valor !== '' && is_numeric($valor)) {
                        return number_format((float)$valor, 2, ',', '.');
                    }
                    return $valor;
                };
                
                // Helper function para buscar observação do custo
                $getCustoObs = function($categoria, $tipo) use ($custosOrganizados) {
                    $key = strtolower($categoria) . '_' . $tipo;
                    return $custosOrganizados[$key]->observacao ?? '';
                };
            @endphp
            
            {{-- Informações Gerais --}}
            <div class="card shadow border-0 mb-4">
                <div class="card-header bg-white border-0 pb-1">
                    <span class="fw-bold"><i class="bi bi-cash-stack me-2"></i>Informações Gerais</span>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <label for="markup" class="form-label required-field">Mark Up</label>
                            <input type="text" class="form-control text-center" id="markup" name="dados[margem_percentual]" value="{{ isset($proposta) && !is_null($proposta->markup_percentual) ? str_replace('.', ',', number_format($proposta->markup_percentual, 1)) . '%' : '' }}" data-mask="percentage" placeholder="0,0%" required>
                            <div class="invalid-feedback">Por favor, informe o Mark Up.</div>
                        </div>
                        <div class="col-md-4">
                            <label for="num_alunos" class="form-label required-field">Nº de alunos</label>
                            <input type="number" class="form-control text-center" id="num_alunos" name="dados[qtd_alunos]" value="{{ isset($proposta) ? $proposta->participantes_alunos : '' }}" min="0" placeholder="Ex: 30" required>
                            <div class="invalid-feedback">Por favor, informe o número de alunos.</div>
                        </div>
                        <div class="col-md-4">
                            <label for="num_cortesia" class="form-label">Nº de cortesia (professores)</label>
                            <input type="number" class="form-control text-center" id="num_cortesia" name="dados[num_cortesia]" value="{{ isset($proposta) ? $proposta->cortesias : '' }}" min="0" placeholder="Ex: 2">
                        </div>
                    </div>
                </div>
            </div>

            {{-- Custos de Transporte --}}
            <div class="card shadow border-0 mb-4">
                <div class="card-header bg-white border-0 pb-1">
                    <span class="fw-bold"><i class="bi bi-bus-front me-2"></i>Custos de Transporte</span>
                </div>
                <div class="card-body">
                    {{-- Filtros de Seleção --}}
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label fw-bold mb-1">Rota</label>
                            <div class="d-flex align-items-center gap-2">
                                <div style="flex: 1;">
                                    <select class="form-select" id="custos_transporte_rota" name="dados[custos_transporte_rota]" data-placeholder="Selecione a rota">
                                        <option value="">Selecione a rota</option>
                                    </select>
                                </div>
                                <div class="tipo-veiculo-loading" id="rota-loading">
                                    <div class="tipo-veiculo-spinner"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold mb-1">Tipo de Transporte</label>
                            <div class="d-flex align-items-center gap-2">
                                <div style="flex: 1;">
                                    <select class="form-select" id="custos_transporte_tipo_veiculo" name="custos_transporte_tipo_veiculo" data-placeholder="Selecione o tipo" disabled>
                                        <option value="">Selecione a rota primeiro</option>
                                    </select>
                                </div>
                                <div class="tipo-veiculo-loading" id="tipo-veiculo-loading">
                                    <div class="tipo-veiculo-spinner"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Card de Melhores Opções --}}
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <div id="melhores-opcoes-card" class="alert alert-info mb-0" role="alert">
                                <div class="text-start"><strong><i class="bi bi-info-circle me-2"></i>Melhores Opções</strong></div>
                                <div id="melhores-opcoes-lista" class="mt-2 text-start">
                                    <small class="text-muted"><strong>OBS:</strong> Aqui aparecerão as 3 melhores opções de valores da rota escolhida após selecionar a rota e o tipo de veículo.</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Tabela de Custos --}}
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead>
                                <tr>
                                    <th class="text-start py-2" style="width: 20%;">Custo</th>
                                    <th class="text-start py-2" style="width: 15%;">Valor</th>
                                    <th class="text-start py-2" style="width: 65%;">Observação</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{-- Transporte (Ônibus/Micro/Van) --}}
                                <tr>
                                    <td class="fw-semibold text-primary text-start">Transporte (Ônibus/Micro/Van)</td>
                                    <td>
                                        <div class="input-group">
                                            <span class="input-group-text bg-light">R$</span>
                                            <input type="text" class="form-control text-end" id="transporte_onibus" name="dados[transporte_onibus]" value="{{ $getCustoValor('TRANSPORTE', 'onibus') }}" placeholder="0,00" data-mask="money">
                                        </div>
                                    </td>
                                    <td>
                                        <input type="text" class="form-control text-start" id="transporte_onibus_obs" name="dados[transporte_onibus_obs]" value="{{ $getCustoObs('TRANSPORTE', 'onibus') }}" placeholder="Observação">
                                    </td>
                                </tr>

                                {{-- Transporte (Nota) --}}
                                <tr>
                                    <td class="fw-semibold text-primary text-start">Transporte (Nota)</td>
                                    <td>
                                        <div class="input-group">
                                            <span class="input-group-text bg-light">R$</span>
                                            <input type="text" class="form-control text-end" id="transporte_nota" name="dados[transporte_nota]" value="{{ $getCustoValor('TRANSPORTE', 'nota') }}" placeholder="0,00" data-mask="money">
                                        </div>
                                    </td>
                                    <td>
                                        <input type="text" class="form-control text-start" id="transporte_nota_obs" name="dados[transporte_nota_obs]" value="{{ $getCustoObs('TRANSPORTE', 'nota') }}" placeholder="Observação">
                                    </td>
                                </tr>

                                {{-- Transporte (Local) --}}
                                <tr>
                                    <td class="fw-semibold text-primary text-start">Transporte (Local)</td>
                                    <td>
                                        <div class="input-group">
                                            <span class="input-group-text bg-light">R$</span>
                                            <input type="text" class="form-control text-end" id="transporte_local" name="dados[transporte_local]" value="{{ $getCustoValor('TRANSPORTE', 'local') }}" placeholder="0,00" data-mask="money">
                                        </div>
                                    </td>
                                    <td>
                                        <input type="text" class="form-control text-start" id="transporte_local_obs" name="dados[transporte_local_obs]" value="{{ $getCustoObs('TRANSPORTE', 'local') }}" placeholder="Observação">
                                    </td>
                                </tr>

                                {{-- Transporte (Despesas) --}}
                                <tr>
                                    <td class="fw-semibold text-primary text-start">Transporte (Despesas)</td>
                                    <td>
                                        <div class="input-group">
                                            <span class="input-group-text bg-light">R$</span>
                                            <input type="text" class="form-control text-end" id="transporte_despesas" name="dados[transporte_despesas]" value="{{ $getCustoValor('TRANSPORTE', 'despesas') }}" placeholder="0,00" data-mask="money">
                                        </div>
                                    </td>
                                    <td>
                                        <input type="text" class="form-control text-start" id="transporte_despesas_obs" name="dados[transporte_despesas_obs]" value="{{ $getCustoObs('TRANSPORTE', 'despesas') }}" placeholder="Observação">
                                    </td>
                                </tr>

                                {{-- Motorista (Extra) --}}
                                <tr>
                                    <td class="fw-semibold text-primary text-start">Motorista (Extra)</td>
                                    <td>
                                        <div class="input-group">
                                            <span class="input-group-text bg-light">R$</span>
                                            <input type="text" class="form-control text-end" id="motorista_refeicao" name="dados[motorista_refeicao]" value="{{ $getCustoValor('TRANSPORTE', 'motorista_refeicao') }}" placeholder="0,00" data-mask="money">
                                        </div>
                                    </td>
                                    <td>
                                        <input type="text" class="form-control text-start" id="motorista_refeicao_obs" name="dados[motorista_refeicao_obs]" value="{{ $getCustoObs('TRANSPORTE', 'motorista_refeicao') }}" placeholder="Observação">
                                    </td>
                                </tr>

                                {{-- Motorista (Hospedagem) --}}
                                <tr>
                                    <td class="fw-semibold text-primary text-start">Motorista (Hospedagem)</td>
                                    <td>
                                        <div class="input-group">
                                            <span class="input-group-text bg-light">R$</span>
                                            <input type="text" class="form-control text-end" id="motorista_hospedagem" name="dados[motorista_hospedagem]" value="{{ $getCustoValor('TRANSPORTE', 'motorista_hospedagem') }}" placeholder="0,00" data-mask="money">
                                        </div>
                                    </td>
                                    <td>
                                        <input type="text" class="form-control text-start" id="motorista_hospedagem_obs" name="dados[motorista_hospedagem_obs]" value="{{ $getCustoObs('TRANSPORTE', 'motorista_hospedagem') }}" placeholder="Observação">
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- Custos Recursos Humanos --}}
            <div class="card shadow border-0 mb-4">
                <div class="card-header bg-white border-0 pb-1 d-flex justify-content-between align-items-center">
                    <span class="fw-bold"><i class="bi bi-people me-2"></i>Custos Recursos Humanos</span>
                    <button type="button" class="btn btn-sm btn-primary" id="btn-adicionar-recreador">
                        <i class="bi bi-plus-circle me-1"></i>Adicionar Educador
                    </button>
                </div>
                <div class="card-body">
                    @php
                        $recreadores = isset($proposta) ? $proposta->custos->where('categoria', 'MONITOR')->where('tipo', 'recreador')->values() : collect();
                    @endphp
                    
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0" id="tabela-monitores">
                            <tbody>
                                {{-- Coordenador --}}
                                <tr>
                                    <td class="fw-semibold text-primary text-start" style="width: 20%;">Coordenador</td>
                                    <td style="width: 15%;">
                                        <div class="input-group">
                                            <span class="input-group-text bg-light">R$</span>
                                            <input type="text" class="form-control text-end" id="monitor_coordenador" name="dados[monitor_coordenador]" value="{{ $getCustoValor('MONITOR', 'coordenador') }}" placeholder="0,00" data-mask="money">
                                        </div>
                                    </td>
                                    <td style="width: 65%;">
                                        <input type="text" class="form-control text-start" id="monitor_coordenador_obs" name="dados[monitor_coordenador_obs]" value="{{ $getCustoObs('MONITOR', 'coordenador') }}" placeholder="Observação">
                                    </td>
                                </tr>

                                {{-- Recreadores (dinâmico) --}}
                                @if($recreadores->count() > 0)
                                    @foreach($recreadores as $loop_index => $recreador)
                                    <tr data-recreador="true">
                                        <td class="fw-semibold text-primary text-start" style="width: 20%;">
                                            <span>Educador(a)</span>
                                        </td>
                                        <td style="width: 15%;">
                                            <div class="input-group">
                                                <span class="input-group-text bg-light">R$</span>
                                                <input type="text" class="form-control text-end" name="dados[monitor_recreador][]" value="{{ number_format((float)$recreador->valor, 2, ',', '.') }}" placeholder="0,00" data-mask="money">
                                            </div>
                                        </td>
                                        <td style="width: 15%;">
                                            <div class="input-group">
                                                <input type="text" class="form-control text-start" name="dados[monitor_recreador_obs][]" value="{{ $recreador->observacao ?? '' }}" placeholder="Observação">
                                                <button type="button" class="btn btn-outline-danger btn-remover-recreador" @if($recreadores->count() <= 2 && $loop_index === 0) disabled @endif>
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                    {{-- Complementa até o mínimo de 2 linhas --}}
                                    @for($i = $recreadores->count(); $i < 2; $i++)
                                    <tr data-recreador="true">
                                        <td class="fw-semibold text-primary text-start" style="width: 20%;">
                                            <span>Educador(a)</span>
                                        </td>
                                        <td style="width: 15%;">
                                            <div class="input-group">
                                                <span class="input-group-text bg-light">R$</span>
                                                <input type="text" class="form-control text-end" name="dados[monitor_recreador][]" placeholder="0,00" data-mask="money">
                                            </div>
                                        </td>
                                        <td style="width: 15%;">
                                            <div class="input-group">
                                                <input type="text" class="form-control text-start" name="dados[monitor_recreador_obs][]" placeholder="Observação">
                                                <button type="button" class="btn btn-outline-danger btn-remover-recreador" disabled>
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    @endfor
                                @else
                                    <tr data-recreador="true">
                                        <td class="fw-semibold text-primary text-start" style="width: 20%;">
                                            <span>Educador(a)</span>
                                        </td>
                                        <td style="width: 15%;">
                                            <div class="input-group">
                                                <span class="input-group-text bg-light">R$</span>
                                                <input type="text" class="form-control text-end" name="dados[monitor_recreador][]" placeholder="0,00" data-mask="money">
                                            </div>
                                        </td>
                                        <td style="width: 15%;">
                                            <div class="input-group">
                                                <input type="text" class="form-control text-start" name="dados[monitor_recreador_obs][]" placeholder="Observação">
                                                <button type="button" class="btn btn-outline-danger btn-remover-recreador" disabled>
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr data-recreador="true">
                                        <td class="fw-semibold text-primary text-start" style="width: 20%;">
                                            <span>Educador(a)</span>
                                        </td>
                                        <td style="width: 15%;">
                                            <div class="input-group">
                                                <span class="input-group-text bg-light">R$</span>
                                                <input type="text" class="form-control text-end" name="dados[monitor_recreador][]" placeholder="0,00" data-mask="money">
                                            </div>
                                        </td>
                                        <td style="width: 15%;">
                                            <div class="input-group">
                                                <input type="text" class="form-control text-start" name="dados[monitor_recreador_obs][]" placeholder="Observação">
                                                <button type="button" class="btn btn-outline-danger btn-remover-recreador">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                @endif

                                {{-- Socorrista --}}
                                <tr>
                                    <td class="fw-semibold text-primary text-start" style="width: 20%;">Socorrista</td>
                                    <td style="width: 15%;">
                                        <div class="input-group">
                                            <span class="input-group-text bg-light">R$</span>
                                            <input type="text" class="form-control text-end" id="monitor_socorrista" name="dados[monitor_socorrista]" value="{{ $getCustoValor('MONITOR', 'socorrista') }}" placeholder="0,00" data-mask="money">
                                        </div>
                                    </td>
                                    <td style="width: 15%;">
                                        <input type="text" class="form-control text-start" id="monitor_socorrista_obs" name="dados[monitor_socorrista_obs]" value="{{ $getCustoObs('MONITOR', 'socorrista') }}" placeholder="Observação">
                                    </td>
                                </tr>

                                {{-- Pedagógico --}}
                                <tr>
                                    <td class="fw-semibold text-primary text-start" style="width: 20%;">Pedagógico</td>
                                    <td style="width: 15%;">
                                        <div class="input-group">
                                            <span class="input-group-text bg-light">R$</span>
                                            <input type="text" class="form-control text-end" id="monitor_pedagogico" name="dados[monitor_pedagogico]" value="{{ $getCustoValor('MONITOR', 'pedagogico') }}" placeholder="0,00" data-mask="money">
                                        </div>
                                    </td>
                                    <td style="width: 15%;">
                                        <input type="text" class="form-control text-start" id="monitor_pedagogico_obs" name="dados[monitor_pedagogico_obs]" value="{{ $getCustoObs('MONITOR', 'pedagogico') }}" placeholder="Observação">
                                    </td>
                                </tr>

                                {{-- Coruja --}}
                                <tr>
                                    <td class="fw-semibold text-primary text-start" style="width: 20%;">Coruja</td>
                                    <td style="width: 15%;">
                                        <div class="input-group">
                                            <span class="input-group-text bg-light">R$</span>
                                            <input type="text" class="form-control text-end" id="monitor_estagiario" name="dados[monitor_estagiario]" value="{{ $getCustoValor('MONITOR', 'estagiario') }}" placeholder="0,00" data-mask="money">
                                        </div>
                                    </td>
                                    <td style="width: 15%;">
                                        <input type="text" class="form-control text-start" id="monitor_estagiario_obs" name="dados[monitor_estagiario_obs]" value="{{ $getCustoObs('MONITOR', 'estagiario') }}" placeholder="Observação">
                                    </td>
                                </tr>

                                {{-- Educador (Refeição) --}}
                                <tr>
                                    <td class="fw-semibold text-primary text-start" style="width: 20%;">Educador (Refeição)</td>
                                    <td style="width: 15%;">
                                        <div class="input-group">
                                            <span class="input-group-text bg-light">R$</span>
                                            <input type="text" class="form-control text-end" id="monitor_refeicao" name="dados[monitor_refeicao]" value="{{ $getCustoValor('MONITOR', 'monitor_refeicao') }}" placeholder="0,00" data-mask="money">
                                        </div>
                                    </td>
                                    <td style="width: 15%;">
                                        <input type="text" class="form-control text-start" id="monitor_refeicao_obs" name="dados[monitor_refeicao_obs]" value="{{ $getCustoObs('MONITOR', 'monitor_refeicao') }}" placeholder="Observação">
                                    </td>
                                </tr>

                                {{-- Educador (Ingresso) --}}
                                <tr>
                                    <td class="fw-semibold text-primary text-start" style="width: 20%;">Educador (Ingresso)</td>
                                    <td style="width: 15%;">
                                        <div class="input-group">
                                            <span class="input-group-text bg-light">R$</span>
                                            <input type="text" class="form-control text-end" id="monitor_ingresso" name="dados[monitor_ingresso]" value="{{ $getCustoValor('MONITOR', 'monitor_ingresso') }}" placeholder="0,00" data-mask="money">
                                        </div>
                                    </td>
                                    <td style="width: 15%;">
                                        <input type="text" class="form-control text-start" id="monitor_ingresso_obs" name="dados[monitor_ingresso_obs]" value="{{ $getCustoObs('MONITOR', 'monitor_ingresso') }}" placeholder="Observação">
                                    </td>
                                </tr>

                                {{-- Educador (Hospedagem) --}}
                                <tr>
                                    <td class="fw-semibold text-primary text-start" style="width: 20%;">Educador (Hospedagem)</td>
                                    <td style="width: 15%;">
                                        <div class="input-group">
                                            <span class="input-group-text bg-light">R$</span>
                                            <input type="text" class="form-control text-end" id="monitor_hospedagem" name="dados[monitor_hospedagem]" value="{{ $getCustoValor('MONITOR', 'monitor_hospedagem') }}" placeholder="0,00" data-mask="money">
                                        </div>
                                    </td>
                                    <td style="width: 15%;">
                                        <input type="text" class="form-control text-start" id="monitor_hospedagem_obs" name="dados[monitor_hospedagem_obs]" value="{{ $getCustoObs('MONITOR', 'monitor_hospedagem') }}" placeholder="Observação">
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- Custos Gerais --}}
            <div class="card shadow border-0 mb-4">
                <div class="card-header bg-white border-0 pb-1 d-flex justify-content-between align-items-center">
                    <span class="fw-bold"><i class="bi bi-calculator me-2"></i>Custos Gerais</span>
                    <button type="button" class="btn btn-sm btn-primary" id="btn-adicionar-custo-extra">
                        <i class="bi bi-plus-circle me-1"></i>Adicionar Custo Extra
                    </button>
                </div>
                <div class="card-body">
                    @php
                        $custosExtrasGeral = isset($proposta) ? $proposta->custos->where('categoria', 'GERAL')->where('tipo', 'extra')->values() : collect();
                    @endphp
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0" id="tabela-custos-gerais">
                            <tbody>
                                @if($custosExtrasGeral->count() > 0)
                                    @foreach($custosExtrasGeral as $custoExtra)
                                    <tr data-custo-extra="true">
                                        <td class="fw-semibold text-primary text-start" style="width: 20%;"><span>Extra</span></td>
                                        <td style="width: 15%;">
                                            <div class="input-group">
                                                <span class="input-group-text bg-light">R$</span>
                                                <input type="text" class="form-control text-end custo-extra-valor" name="dados[custo_extra][]" value="{{ number_format((float)$custoExtra->valor, 2, ',', '.') }}" placeholder="0,00" data-mask="money">
                                            </div>
                                        </td>
                                        <td style="width: 65%;">
                                            <div class="input-group">
                                                <input type="text" class="form-control text-start custo-extra-obs" name="dados[custo_extra_obs][]" value="{{ $custoExtra->observacao ?? '' }}" placeholder="Observação">
                                                <button type="button" class="btn btn-outline-danger btn-remover-custo-extra">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                @else
                                    <tr data-custo-extra="true">
                                        <td class="fw-semibold text-primary text-start" style="width: 20%;"><span>Extra</span></td>
                                        <td style="width: 15%;">
                                            <div class="input-group">
                                                <span class="input-group-text bg-light">R$</span>
                                                <input type="text" class="form-control text-end custo-extra-valor" name="dados[custo_extra][]" placeholder="0,00" data-mask="money">
                                            </div>
                                        </td>
                                        <td style="width: 65%;">
                                            <div class="input-group">
                                                <input type="text" class="form-control text-start custo-extra-obs" name="dados[custo_extra_obs][]" placeholder="Observação">
                                                <button type="button" class="btn btn-outline-danger btn-remover-custo-extra" disabled>
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- Custos Adicionais por Aluno --}}
            <div class="card shadow border-0 mb-4">
                <div class="card-header bg-white border-0 pb-1">
                    <span class="fw-bold"><i class="bi bi-person-badge me-2"></i>Custos Adicionais por Aluno</span>
                </div>
                <div class="card-body">
                    @php
                        $custosAlunoExtras = isset($proposta) ? $proposta->custos->where('categoria', 'POR_ALUNO')->where('tipo', 'extra')->values() : collect();
                    @endphp
                    
                    {{-- Tabela de Pacotes do Destino (separada) --}}
                    <div class="table-responsive mb-3">
                        <table class="table align-middle mb-0">
                            <tbody>
                                <tr>
                                    <td class="fw-semibold text-primary text-start border-0" style="width: 20%; background-color: #f8f9fa; border-radius: 8px 0 0 8px; padding: 12px;">Pacotes do Destino</td>
                                    <td class="border-0" style="width: 80%; background-color: #f8f9fa; border-radius: 0 8px 8px 0; padding: 12px;">
                                        <div class="d-flex align-items-center gap-2">
                                            <div style="flex: 1;">
                                                <select class="form-select select-search" id="pacotes_destino" 
                                                        data-placeholder="Selecione um destino..."
                                                        data-url-pacotes="{{ route('destinos.pacotes', ':id') }}">
                                                    <option value="">Selecione um destino...</option>
                                                    @php
                                                        $destinos = \App\Models\Destino::where('status', 'ATIVO')
                                                            ->orderBy('nome_fantasia')
                                                            ->get(['id', 'nome_fantasia', 'cnpj', 'telefone']);
                                                    @endphp
                                                    @foreach($destinos as $destino)
                                                        <option value="{{ $destino->id }}">
                                                            {{ $destino->nome_fantasia }} / {{ $destino->cnpj ?? 'Sem CNPJ' }} / {{ $destino->telefone ?? 'Sem telefone' }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="pacotes-destino-loading" id="pacotes-destino-loading">
                                                <div class="pacotes-destino-spinner"></div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    {{-- Card de Pacotes do Destino --}}
                    <div class="card mb-3" id="pacotes-destino-card" style="display: none;">
                        <div class="card-body">
                            <h6 class="card-title text-primary mb-3">
                                <i class="bi bi-box-seam me-2"></i>Pacotes Disponíveis
                            </h6>
                            <div class="pacotes-destino-loading" id="pacotes-destino-loading">
                                <div class="pacotes-destino-spinner"></div>
                            </div>
                            <div id="pacotes-destino-lista">
                                <small class="text-muted"><strong>OBS:</strong> Selecione um destino para visualizar os pacotes disponíveis.</small>
                            </div>
                        </div>
                    </div>

                    {{-- Tabela de Custos Adicionais --}}
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0" id="tabela-custos-alunos">
                            <tbody>
                                {{-- Seguro --}}
                                <tr>
                                    <td class="fw-semibold text-primary text-start" style="width: 20%;">Seguro</td>
                                    <td style="width: 15%;">
                                        <div class="input-group">
                                            <span class="input-group-text bg-light">R$</span>
                                            <input type="text" class="form-control text-end" id="custo-aluno-seguro-valor" name="dados[custo_aluno_seguro_valor]" value="{{ $getCustoValor('POR_ALUNO', 'seguro') }}" placeholder="0,00" data-mask="money">
                                        </div>
                                    </td>
                                    <td style="width: 65%;">
                                        <input type="text" class="form-control text-start" id="custo-aluno-seguro-observacao" name="dados[custo_aluno_seguro_observacao]" value="{{ $getCustoObs('POR_ALUNO', 'seguro') }}" placeholder="Observação">
                                    </td>
                                </tr>

                                {{-- Investimento Aluno --}}
                                <tr>
                                    <td class="fw-semibold text-primary text-start" style="width: 20%;">Investimento Aluno</td>
                                    <td style="width: 15%;">
                                        <div class="input-group">
                                            <span class="input-group-text bg-light">R$</span>
                                            <input type="text" class="form-control text-end" id="custo-aluno-investimento-valor" name="dados[custo_aluno_investimento_valor]" value="{{ $getCustoValor('POR_ALUNO', 'investimento') }}" placeholder="0,00" data-mask="money">
                                        </div>
                                    </td>
                                    <td style="width: 15%;">
                                        <input type="text" class="form-control text-start" id="custo-aluno-investimento-observacao" name="dados[custo_aluno_investimento_observacao]" value="{{ $getCustoObs('POR_ALUNO', 'investimento') }}" placeholder="Observação">
                                    </td>
                                </tr>

                                {{-- Extra (dinâmico) --}}
                                @if($custosAlunoExtras->count() > 0)
                                    @foreach($custosAlunoExtras as $custoAluno)
                                    <tr data-custo-aluno="true">
                                        <td class="fw-semibold text-primary text-start" style="width: 20%;">
                                            <span>Extra</span>
                                        </td>
                                        <td style="width: 15%;">
                                            <div class="input-group">
                                                <span class="input-group-text bg-light">R$</span>
                                                <input type="text" class="form-control text-end custo-aluno-valor" name="dados[custo_aluno_valor][]" value="{{ number_format((float)$custoAluno->valor, 2, ',', '.') }}" placeholder="0,00" data-mask="money">
                                            </div>
                                        </td>
                                        <td style="width: 65%;">
                                            <div class="input-group">
                                                <input type="text" class="form-control text-start custo-aluno-observacao" name="dados[custo_aluno_observacao][]" value="{{ $custoAluno->observacao ?? '' }}" placeholder="Observação">
                                                <button type="button" class="btn btn-outline-danger btn-remover-custo-aluno" title="Remover custo">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                @else
                                    <tr data-custo-aluno="true">
                                        <td class="fw-semibold text-primary text-start" style="width: 20%;">
                                            <span>Extra</span>
                                        </td>
                                        <td style="width: 15%;">
                                            <div class="input-group">
                                                <span class="input-group-text bg-light">R$</span>
                                                <input type="text" class="form-control text-end custo-aluno-valor" name="dados[custo_aluno_valor][]" placeholder="0,00" data-mask="money">
                                            </div>
                                        </td>
                                        <td style="width: 65%;">
                                            <div class="input-group">
                                                <input type="text" class="form-control text-start custo-aluno-observacao" name="dados[custo_aluno_observacao][]" placeholder="Observação">
                                                <button type="button" class="btn btn-outline-danger btn-remover-custo-aluno" disabled title="Remover custo">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                    
                    {{-- Botão Adicionar Custo Extra --}}
                    <div class="mt-3 text-start">
                        <button type="button" class="btn btn-sm btn-primary" id="btn-adicionar-custo-aluno">
                            <i class="bi bi-plus-circle me-1"></i>Adicionar Custo Extra
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {{-- STEP 4: Resumo --}}
        <div class="step-content d-none" id="step-4">

            {{-- Card: Investimento por Aluno --}}
            <div class="card shadow border-0 mb-4">
                <div class="card-header bg-white border-0 pb-1">
                    <span class="fw-bold"><i class="bi bi-cash-coin me-2"></i>Investimento por Aluno</span>
                </div>
                <div class="card-body">
                    <div class="mb-3 d-flex align-items-center gap-2">
                        <span class="text-primary fw-bold" id="valor-total-unitario-display">R$ 0,00 (Com Nota)</span>
                        <button type="button" class="btn btn-sm btn-outline-primary" onclick="alternarTipoValor()" title="Alternar entre Com Nota / Sem Nota">
                            <i class="bi bi-arrow-repeat"></i>
                        </button>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered mb-0" id="tabela-investimento">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-start" width="200">Valor</th>
                                    <th class="text-start">Descrição</th>
                                    <th class="text-start" width="100">Ações</th>
                                </tr>
                            </thead>
                            <tbody id="investimento-tbody">
                                @if(isset($proposta) && $proposta->investimentos->count() > 0)
                                    @foreach($proposta->investimentos as $index => $investimento)
                                    <tr data-index="{{ $index }}">
                                        <td class="text-start">
                                            <input type="text" class="form-control form-control-sm" name="dados[investimentos][{{ $index }}][valor]" value="{{ $investimento->valor ?? '' }}" data-mask="money" placeholder="R$ 0,00">
                                        </td>
                                        <td class="text-start">
                                            <input type="text" class="form-control form-control-sm" name="dados[investimentos][{{ $index }}][descricao]" value="{{ $investimento->descricao ?? '' }}" placeholder="Descrição">
                                        </td>
                                        <td class="text-start">
                                            <button type="button" class="btn btn-sm btn-danger" onclick="removerLinhaInvestimento(this)">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    @endforeach
                                @else
                                    <tr data-index="0">
                                        <td class="text-start">
                                            <input type="text" class="form-control form-control-sm" name="dados[investimentos][0][valor]" value="" data-mask="money" placeholder="R$ 0,00">
                                        </td>
                                        <td class="text-start">
                                            <input type="text" class="form-control form-control-sm" name="dados[investimentos][0][descricao]" value="" placeholder="Descrição">
                                        </td>
                                        <td class="text-start">
                                            <button type="button" class="btn btn-sm btn-danger" disabled>
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-3 text-start">
                        <button type="button" class="btn btn-sm btn-outline-primary" onclick="adicionarLinhaInvestimento()">
                            <i class="bi bi-plus-circle me-1"></i>Adicionar Linha
                        </button>
                    </div>

                    <hr class="my-4">

                    {{-- Seção: Incluso na Viagem --}}
                    <div class="text-start mb-3">
                        <span class="fw-bold"><i class="bi bi-check-circle me-2"></i>Incluso na Viagem</span>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered mb-0" id="tabela-inclusos">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-start" width="50">#</th>
                                    <th class="text-start">Descrição</th>
                                    <th class="text-start" width="100">Ações</th>
                                </tr>
                            </thead>
                            <tbody id="inclusos-tbody">
                                @if(isset($proposta) && $proposta->inclusos->count() > 0)
                                    @foreach($proposta->inclusos as $index => $incluso)
                                    <tr data-index="{{ $index }}">
                                        <td class="text-start">{{ $index + 1 }}</td>
                                        <td class="text-start">
                                            <input type="text" class="form-control form-control-sm" name="dados[inclusos][{{ $index }}][descricao]" value="{{ $incluso->descricao ?? '' }}" placeholder="Ex: Transporte ida e volta">
                                        </td>
                                        <td class="text-start">
                                            <button type="button" class="btn btn-sm btn-danger" onclick="removerLinhaIncluso(this)">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    @endforeach
                                @else
                                    <tr data-index="0">
                                        <td class="text-start">1</td>
                                        <td class="text-start">
                                            <input type="text" class="form-control form-control-sm" name="dados[inclusos][0][descricao]" value="" placeholder="Ex: Transporte ida e volta">
                                        </td>
                                        <td class="text-start">
                                            <button type="button" class="btn btn-sm btn-danger" disabled>
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-3 text-start">
                        <button type="button" class="btn btn-sm btn-outline-primary" onclick="adicionarLinhaIncluso()">
                            <i class="bi bi-plus-circle me-1"></i>Adicionar Linha
                        </button>
                    </div>

                    <div class="mt-4 text-start">
                        <label for="condicoes_pagamento" class="form-label fw-bold text-start">Condições de Pagamento</label>
                        <textarea class="form-control text-start" id="condicoes_pagamento" name="dados[condicoes_pagamento]" rows="4" placeholder="Descreva as condições de pagamento...">{{ isset($proposta) ? $proposta->condicoes_pagamento : '' }}</textarea>
                    </div>

                    <hr class="my-4">

                    {{-- Seção: Custos Totais --}}
                    <div class="text-start mb-3">
                        <span class="fw-bold"><i class="bi bi-calculator me-2"></i>Custos Totais</span>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover table-bordered mb-0" id="tabela-custos-totais">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-start">Custos</th>
                                    <th class="text-start" style="width: 30%;">Valores</th>
                                    <th class="text-start" style="width: 30%;">Unitário</th>
                                </tr>
                            </thead>
                            <tbody id="custos-totais-tbody">
                                <tr>
                                    <td class="text-start"><strong style="color: #0d6efd;">Transporte + Motorista</strong></td>
                                    <td class="text-start">R$ 0,00</td>
                                    <td class="text-start">R$ 0,00</td>
                                </tr>
                                <tr>
                                    <td class="text-start"><strong style="color: #0d6efd;">Monitores</strong></td>
                                    <td class="text-start">R$ 0,00</td>
                                    <td class="text-start">R$ 0,00</td>
                                </tr>
                                <tr>
                                    <td class="text-start"><strong style="color: #0d6efd;">Despesas Gerais</strong></td>
                                    <td class="text-start">R$ 0,00</td>
                                    <td class="text-start">R$ 0,00</td>
                                </tr>
                                <tr>
                                    <td class="text-start"><strong style="color: #0d6efd;">Despesas Individuais</strong></td>
                                    <td class="text-start">R$ 0,00</td>
                                    <td class="text-start">R$ 0,00</td>
                                </tr>
                                <tr style="background-color: #f8f9fa;">
                                    <td class="text-start"><strong>Custos Totais</strong></td>
                                    <td class="text-start"><strong>R$ 0,00</strong></td>
                                    <td class="text-start"><strong>R$ 0,00</strong></td>
                                </tr>
                                <tr style="background-color: #f8f9fa;">
                                    <td class="text-start"><strong>Mark Up (0'15%)</strong></td>
                                    <td class="text-start"><strong>R$ 0,00</strong></td>
                                    <td class="text-start"><strong>R$ 0,00</strong></td>
                                </tr>
                                <tr style="background-color: #f8f9fa;">
                                    <td class="text-start"><strong>Total</strong></td>
                                    <td class="text-start"><strong>R$ 0,00</strong></td>
                                    <td class="text-start"><strong>R$ 0,00</strong></td>
                                </tr>
                                <tr style="background-color: #f8f9fa;">
                                    <td class="text-start"><strong>Total (com nota)</strong></td>
                                    <td class="text-start"><strong>R$ 0,00</strong></td>
                                    <td class="text-start"><strong>R$ 0,00</strong></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <hr class="my-4">

                    {{-- Seção: Lucros --}}
                    <div class="text-start mb-3">
                        <span class="fw-bold"><i class="bi bi-graph-up-arrow me-2"></i>Lucros</span>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover table-bordered mb-0" id="tabela-lucros">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-start" style="width: 40%;">Lucro Mínimo</th>
                                    <th class="text-start" style="width: 60%;">Lucro Estimado</th>
                                </tr>
                            </thead>
                            <tbody id="lucros-tbody">
                                <tr>
                                    <td class="text-start"><strong>R$ 0,00</strong></td>
                                    <td class="text-start"><strong>R$ 0,00</strong></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        {{-- Botões de Navegação --}}
        <div class="d-flex justify-content-between align-items-center mb-4 mt-4">
            <div>
                <button type="button" class="btn btn-outline-secondary" id="btn-anterior" onclick="anteriorStep()" style="display: none;">
                    <i class="bi bi-arrow-left me-2"></i>Anterior
                </button>
            </div>
            <div class="d-flex gap-2">
                @if($proposta->status->value === 'RASCUNHO')
                <button type="button" class="btn btn-outline-secondary" id="btn-salvar-rascunho" onclick="salvarRascunho()">
                    <i class="bi bi-save me-2"></i>Salvar Rascunho
                </button>
                @endif
                <button type="button" class="btn btn-primary" id="btn-proximo" onclick="proximoStep()">
                    Próximo<i class="bi bi-arrow-right ms-2"></i>
                </button>
                <button type="button" class="btn btn-success" id="btn-finalizar" onclick="atualizarProposta()" style="display: none;">
                    <i class="bi bi-check-circle me-2"></i>Atualizar Proposta
                </button>
            </div>
        </div>
    </form>
</div>