<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>



    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">


<div class="container mt-5">
    <!-- Título da Página -->
    <h2 class="mb-4">Formulários de Contato</h2>

    <!-- Formulário de Passo a Passo -->
    <form id="formulario" method="POST">
        <!-- Passo 1: Informações Pessoais -->
        <div id="passo1" class="form-step">
            <h4>Passo 1: Informações Pessoais</h4>
            <div class="mb-3">
                <label for="nome" class="form-label">Nome</label>
                <input type="text" class="form-control" id="nome" required>
            </div>
            <div class="mb-3">
                <label for="email" class="form-label">E-mail</label>
                <input type="email" class="form-control" id="email" required>
            </div>
            <div class="mb-3">
                <label for="telefone" class="form-label">Telefone</label>
                <input type="tel" class="form-control" id="telefone" required>
            </div>
            <div class="d-flex justify-content-between">
                <button type="button" id="next1" class="btn btn-primary">Próximo</button>
            </div>
        </div>

        <!-- Passo 2: Detalhes do Serviço -->
        <div id="passo2" class="form-step" style="display: none;">
            <h4>Passo 2: Detalhes do Serviço</h4>
            <div class="mb-3">
                <label for="servico" class="form-label">Serviço Desejado</label>
                <select class="form-select" id="servico" required>
                    <option selected>Escolha o serviço</option>
                    <option value="1">Troca de óleo</option>
                    <option value="2">Alinhamento de rodas</option>
                    <option value="3">Revisão completa</option>
                </select>
            </div>
            <div class="mb-3">
                <label for="data" class="form-label">Data desejada</label>
                <input type="date" class="form-control" id="data" required>
            </div>
            <div class="d-flex justify-content-between">
                <button type="button" id="prev2" class="btn btn-secondary">Anterior</button>
                <button type="submit" class="btn btn-success">Enviar</button>
            </div>
        </div>
    </form>
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<script>
    // Mostrar o Passo 2 ao clicar em 'Próximo' no Passo 1
    document.getElementById('next1').addEventListener('click', function() {
        document.getElementById('passo1').style.display = 'none';
        document.getElementById('passo2').style.display = 'block';
    });

    // Voltar ao Passo 1 ao clicar em 'Anterior' no Passo 2
    document.getElementById('prev2').addEventListener('click', function() {
        document.getElementById('passo2').style.display = 'none';
        document.getElementById('passo1').style.display = 'block';
    });
</script>



