@php
$title = 'Nova Proposta';
    $propostasReturnUrl = $returnUrl ?? route('propostas.list');
@endphp

<div>
    <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(`{{ $propostasReturnUrl }}`)" class="text-decoration-none text-secondary">Propostas</a></li>
            <li class="breadcrumb-item active text-dark" aria-current="page">Nova 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>Nova Proposta
            </h1>
            <span class="text-muted small">Crie uma nova proposta comercial de viagem</span>
        </div>
        <div>
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="carregarConteudo(`{{ $propostasReturnUrl }}`)">
                <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>
        @csrf
        <input type="hidden" name="return_url" value="{{ $propostasReturnUrl }}">

        {{-- 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="clientes-search-wrapper">
                                <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>

                                    {{-- Loading específico do autocomplete (dentro do campo) --}}
                                    <div class="clientes-search-loading" id="clientes-search-loading">
                                        <div class="clientes-search-spinner"></div>
                                    </div>
                                </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>

                            <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>

                            {{-- 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]" required disabled>
                                <option value="">Selecione...</option>
                                <option value="RASCUNHO" {{ isset($proposta) && $proposta->status == 'RASCUNHO' ? 'selected' : (!isset($proposta) ? 'selected' : '') }}>Rascunho</option>
                                <option value="EM_ANDAMENTO" {{ isset($proposta) && $proposta->status == 'EM_ANDAMENTO' ? 'selected' : '' }}>Em Andamento</option>
                                <option value="ENVIADA" {{ isset($proposta) && $proposta->status == 'ENVIADA' ? 'selected' : '' }}>Enviada</option>
                                <option value="APROVADA" {{ isset($proposta) && $proposta->status == 'APROVADA' ? 'selected' : '' }}>Aprovada</option>
                                <option value="REJEITADA" {{ isset($proposta) && $proposta->status == 'REJEITADA' ? 'selected' : '' }}>Rejeitada</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="destinos-search-wrapper">
                                <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"
                                           data-url="{{ route('destinos.buscar') }}"
                                           placeholder="Digite no mínimo 3 caracteres para buscar destinos..." 
                                           autocomplete="off">

                                    <div class="destinos-search-loading" id="destinos-search-loading">
                                        <div class="destinos-search-spinner"></div>
                                    </div>
                                </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>
                            <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">
                        <div class="alert alert-info">
                            <i class="bi bi-info-circle me-2"></i>
                            Busque e selecione destinos para adicionar ao roteiro.
                        </div>
                    </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">
                    <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 }}">{{ $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 ?? '') : ' - ALUNOS PAGANTES POR ÔNIBUS' }}" 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 ?? '') : ' - INCLUINDO OS PROFESSORES' }}" 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">
            {{-- 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) ? $proposta->margem_percentual : '' }}" 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->qtd_alunos > 0 ? $proposta->qtd_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->num_cortesia > 0 ? $proposta->num_cortesia : '' }}" 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="rota-search-wrapper select-loading-inline">
                                    <div class="select-loading-field">
                                        <select class="form-select select-search" id="custos_transporte_rota" name="dados[custos_transporte_rota]" data-placeholder="Selecione a rota">
                                            <option value="">Selecione a rota</option>
                                        </select>
                                    </div>
                                    <div class="rota-loading" id="rota-loading" aria-hidden="true">
                                        <div class="rota-spinner"></div>
                                    </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold mb-1">Tipo de Transporte</label>
                                <div class="tipo-transporte-search-wrapper select-loading-inline">
                                    <div class="select-loading-field">
                                        <select class="form-select select-search" 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" aria-hidden="true">
                                        <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="{{ isset($proposta) ? $proposta->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="{{ isset($proposta) ? $proposta->transporte_onibus_obs : '' }}" 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="{{ isset($proposta) ? $proposta->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="{{ isset($proposta) ? $proposta->transporte_nota_obs : '' }}" 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="{{ isset($proposta) ? $proposta->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="{{ isset($proposta) ? $proposta->transporte_local_obs : '' }}" 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="{{ isset($proposta) ? $proposta->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="{{ isset($proposta) ? $proposta->transporte_despesas_obs : '' }}" 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="{{ isset($proposta) ? $proposta->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="{{ isset($proposta) ? $proposta->motorista_refeicao_obs : '' }}" 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="{{ isset($proposta) ? $proposta->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="{{ isset($proposta) ? $proposta->motorista_hospedagem_obs : '' }}" 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">
                    <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="{{ isset($proposta) ? $proposta->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="{{ isset($proposta) ? $proposta->monitor_coordenador_obs : '' }}" placeholder="Observação">
                                    </td>
                                </tr>

                                {{-- Recreadores (dinâmico) --}}
                                <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>

                                {{-- 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="{{ isset($proposta) ? $proposta->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="{{ isset($proposta) ? $proposta->monitor_socorrista_obs : '' }}" 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="{{ isset($proposta) ? $proposta->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="{{ isset($proposta) ? $proposta->monitor_pedagogico_obs : '' }}" 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="{{ isset($proposta) ? $proposta->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="{{ isset($proposta) ? $proposta->monitor_estagiario_obs : '' }}" 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="{{ isset($proposta) ? $proposta->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="{{ isset($proposta) ? $proposta->monitor_refeicao_obs : '' }}" 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="{{ isset($proposta) ? $proposta->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="{{ isset($proposta) ? $proposta->monitor_ingresso_obs : '' }}" 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="{{ isset($proposta) ? $proposta->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="{{ isset($proposta) ? $proposta->monitor_hospedagem_obs : '' }}" 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">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0" id="tabela-custos-gerais">
                            <tbody>
                                <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="{{ isset($proposta) && isset($proposta->custo_extra[0]) ? $proposta->custo_extra[0] : '' }}" 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="{{ isset($proposta) && isset($proposta->custo_extra_obs[0]) ? $proposta->custo_extra_obs[0] : '' }}" 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>
                            </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">
                    {{-- 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="{{ isset($proposta) ? $proposta->custo_aluno_seguro_valor : '' }}" 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="{{ isset($proposta) ? $proposta->custo_aluno_seguro_observacao : '' }}" 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="{{ isset($proposta) ? $proposta->custo_aluno_investimento_valor : '' }}" 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="{{ isset($proposta) ? $proposta->custo_aluno_investimento_observacao : '' }}" placeholder="Observação">
                                    </td>
                                </tr>

                                {{-- Extra (dinâmico) --}}
                                <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="{{ isset($proposta) && isset($proposta->custo_aluno_valor[0]) ? $proposta->custo_aluno_valor[0] : '' }}" 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="{{ isset($proposta) && isset($proposta->custo_aluno_observacao[0]) ? $proposta->custo_aluno_observacao[0] : '' }}" 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>
                            </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">
                                <tr data-index="0">
                                    <td class="text-start">
                                        <input type="text" class="form-control form-control-sm" name="dados[investimentos][0][valor]" value="{{ isset($proposta) && isset($proposta->investimentos[0]['valor']) ? $proposta->investimentos[0]['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][0][descricao]" value="{{ isset($proposta) && isset($proposta->investimentos[0]['descricao']) ? $proposta->investimentos[0]['descricao'] : '' }}" 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>
                            </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">
                                <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="{{ isset($proposta) && isset($proposta->inclusos[0]['descricao']) ? $proposta->inclusos[0]['descricao'] : '' }}" 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>
                            </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>

                    <hr class="my-4">

                    {{-- Seção: Não Incluso na Viagem --}}
                    <div class="text-start mb-3">
                        <span class="fw-bold"><i class="bi bi-x-circle me-2"></i>Não Incluso na Viagem</span>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered mb-0" id="tabela-nao-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="nao-inclusos-tbody">
                                <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[nao_inclusos][0][descricao]" value="" placeholder="Ex: Alimentação durante o trajeto">
                                    </td>
                                    <td class="text-start">
                                        <button type="button" class="btn btn-sm btn-danger" disabled>
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-3 text-start">
                        <button type="button" class="btn btn-sm btn-outline-primary" onclick="adicionarLinhaNaoIncluso()">
                            <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 : 'O PAGAMENTO PODERÁ SER REALIZADO NO CARTÃO DE CRÉDITO EM ATÉ X SEM JUROS OU NO SISTEMA PIX.' }}</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">
                <button type="button" class="btn btn-outline-secondary disabled" id="btn-salvar-rascunho" onclick="salvarRascunho('{{ route('propostas.store') }}')" disabled>
                    <i class="bi bi-save me-2"></i>Salvar Rascunho
                </button>
                <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="finalizarProposta('{{ route('propostas.store') }}')" style="display: none;">
                    <i class="bi bi-check-circle me-2"></i>Finalizar Proposta
                </button>
            </div>
        </div>
    </form>
</div>