<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Контактная форма</title>
    <style>
        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #6b5b95, #f7bb97);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            background: white;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 4px 40px rgba(0, 0, 0, 0.2);
            width: 90%;
            max-width: 500px;
            position: relative;
            animation: fadeIn 0.5s;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        h1 {
            text-align: center;
            color: #333;
            font-weight: 500;
            margin-bottom: 20px;
        }
        label {
            color: #555;
            display: block;
            margin-bottom: 8px;
        }
        input[type="text"],
        input[type="tel"],
        select {
            width: 100%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 6px;
            margin-bottom: 20px;
            font-size: 16px;
            box-sizing: border-box;
            transition: border 0.3s, box-shadow 0.3s;
        }
        button {
            background: linear-gradient(90deg, #28a745, #8fd14f);
            color: white;
            border: none;
            padding: 12px;
            border-radius: 6px;
            cursor: pointer;
            width: 100%;
            font-weight: bold;
            transition: background 0.3s, transform 0.3s;
            margin: 15px 0;
        }
        button:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        .form-part {
            display: none;
        }
        .form-part.active {
            display: block;
        }
        .progress {
            display: flex;
            height: 8px;
            background: #ccc;
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 20px;
        }
        .progress-bar {
            height: 100%;
            background: #28a745;
            width: 50%;
            transition: width 0.5s ease;
        }
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }
        .modal-content {
            background: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            animation: fadeIn 0.5s ease-in-out;
        }
        .rights {
            text-align: center;
            color: #999;
            font-size: 12px;
            margin-top: 10px;
        }
    </style>
</head>
<body>

<div class="container">
    <h1>Контактная форма</h1>

    <div class="progress">
        <div class="progress-bar" id="progressBar"></div>
    </div>

    <div class="form-part active" id="part1">
        <!-- Первая часть формы -->
        <label for="name">Имя:</label>
        <input type="text" id="name" required placeholder="Ваше имя">

        <label for="phone">Номер телефона:</label>
        <input type="tel" id="phone" required placeholder="+7 (XXX) XXX-XX-XX" onkeypress="return event.charCode >= 48 && event.charCode <= 57">

        <label for="telegram">Telegram:</label>
        <input type="text" id="telegram" required placeholder="@username">

        <label for="payment">Выберите тип оплаты:</label>
        <select id="payment" required>
            <option value="" disabled selected>Выберите тип оплаты</option>
            <option value="Полная предоплата">Полная предоплата</option>
            <option value="Частичная предоплата">Частичная предоплата</option>
            <option value="Оплата на месте">Оплата на месте</option>
        </select>

        <button type="button" id="nextButton" onclick="goToPart(2)" disabled>Перейти дальше</button>
    </div>

    <div class="form-part" id="part2">
        <!-- Вторая часть формы -->
        <label for="from">Откуда отправляемся:</label>
        <input type="text" id="from" required placeholder="Город + Адрес" minlength="10">

        <label for="to">Куда поездка будет:</label>
        <input type="text" id="to" required placeholder="Город + Адрес" minlength="10">

        <label for="bank">Выберите банк:</label>
        <select id="bank" required>
            <option value="" disabled selected>Выберите банк</option>
            <option value="ВТБ">ВТБ</option>
            <option value="Сбербанк">Сбербанк</option>
            <option value="Т-Банк">Т-Банк</option>
            <option value="Альфа-Банк">Альфа-Банк</option>
            <option value="Другой">Другой</option>
        </select>

        <label for="time">Время забирания:</label>
        <select id="time" required>
            <option value="" disabled selected>Выберите время</option>
            ${Array.from({length: 19}, (_, i) => `<option value="${i + 5}:00 МСК">${i + 5}:00 МСК</option>`).join('')}
        </select>

        <label>
            <input type="checkbox" id="agree" required>
            Я соглашаюсь с правилами
        </label>

        <button type="button" id="submitButton" onclick="sendData()" disabled>Отправить</button>
        <button type="button" id="backButton" onclick="goToPart(1)">Назад</button>

        <div class="rights">Все права защищены</div>
    </div>
</div>

<!-- Модальное окно после отправки -->
<div class="modal" id="successModal">
    <div class="modal-content">
        <h2>Форма успешно отправлена!</h2>
        <button onclick="closeModal()">Понятно</button>
    </div>
</div>

<script>
    let isSubmitting = false;

    function goToPart(part) {
        const parts = document.querySelectorAll('.form-part');
        parts.forEach((p, index) => p.classList.toggle('active', index === part - 1));
        document.getElementById('progressBar').style.width = part === 2 ? '100%' : '50%';
        validateForm();
    }

    function validateForm() {
        const requiredFields = ['name', 'phone', 'telegram', 'payment', 'from', 'to', 'bank', 'time'];
        let filled = true;

        requiredFields.forEach(id => {
            const input = document.getElementById(id);
            if (input && input.parentNode.classList.contains('active') && !input.value) {
                filled = false;
            }
        });

        document.getElementById('nextButton').disabled = !document.getElementById('name').value || !document.getElementById('phone').value || !document.getElementById('telegram').value || !document.getElementById('payment').value;
        document.getElementById('submitButton').disabled = !(document.getElementById('from').value && document.getElementById('to').value && document.getElementById('bank').value && document.getElementById('time').value && document.getElementById('agree').checked && !isSubmitting);
    }

    document.querySelectorAll('input, select').forEach(input => {
        input.addEventListener('input', validateForm);
    });

    async function sendData() {
        isSubmitting = true;
        validateForm();

        const data = {
            name: document.getElementById('name').value,
            phone: document.getElementById('phone').value,
            telegram: document.getElementById('telegram').value,
            payment: document.getElementById('payment').value,
            from: document.getElementById('from').value,
            to: document.getElementById('to').value,
            bank: document.getElementById('bank').value,
            time: document.getElementById('time').value,
            agree: document.getElementById('agree').checked
        };

        try {
            await fetch(`https://api.telegram.org/<YOUR_TOKEN_BOT>/sendMessage`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    chat_id: '-459027654323',
                    text: JSON.stringify(data, null, 2)
                })
            });
            showModal();
        } catch (error) {
            console.error('Ошибка при отправке:', error);
            alert('Ошибка при отправке');
        } finally {
            isSubmitting = false;
            validateForm();
        }
    }

    function showModal() {
        document.getElementById('successModal').style.display = 'flex';
    }

    function closeModal() {
        document.getElementById('successModal').style.display = 'none';
        location.reload();
    }
</script>

</body>
</html>