{% extends "base.html" %}

{% block content %}
<h2>Оформление заказа</h2>

<style>
    .order-form {
        max-width: 600px;
        margin: 0 auto;
        background: rgba(0, 0, 0, 0.55);
        padding: 2rem;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .form-group { margin-bottom: 1rem; }
    .form-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; color: #f5cba0; }
    .form-group input, .form-group select, .form-group textarea {
        width: 100%; padding: 0.5rem;
        border: 1px solid rgba(255,255,255,0.3);
        border-radius: 8px;
        background: rgba(255,255,255,0.9);
    }
    .form-group textarea { resize: none; height: 100px; }
    .price-display {
        font-size: 1.3rem; font-weight: bold; color: #f5cba0;
        padding: 0.5rem; background: rgba(0,0,0,0.3);
        border-radius: 8px; text-align: center;
    }
    .btn-primary {
        background: #f5cba0;
        color: #2c1810;
        padding: 0.75rem;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        width: 100%;
        font-weight: bold;
        transition: 0.2s;
    }
    .btn-primary:hover {
        background: #ffdd99;
        transform: translateY(-2px);
    }
    small {
        display: block;
        margin-top: 0.25rem;
        font-size: 0.7rem;
        color: #ffffff !important;
    }
</style>

<form method="POST" class="order-form" id="orderForm">
    <div class="form-group">
        <label for="service_type">Тип услуги:</label>
        <select id="service_type" name="service_type" required>
            <option value="">Выберите тип</option>
            <option value="service">Услуга</option>
            <option value="abonement">Абонемент</option>
            <option value="certificate">Подарочный сертификат</option>
        </select>
    </div>

    <div class="form-group">
        <label for="service_id">Выберите:</label>
        <select id="service_id" name="service_id" required disabled>
            <option value="">Сначала выберите тип услуги</option>
        </select>
    </div>

    <div class="form-group">
        <label>Цена:</label>
        <div id="price_display" class="price-display">0 руб.</div>
        <input type="hidden" id="price" name="price" value="0">
        <input type="hidden" id="service_name" name="service_name">
    </div>

    <div id="date-group" class="form-group">
        <label for="date">Дата:</label>
        <input type="date" id="date" name="date">
        <small>Нельзя выбрать прошедшую дату</small>
    </div>

    <div id="time-group" class="form-group">
        <label for="time">Время:</label>
        <input type="time" id="time" name="time">
        <small id="time_hint">Режим работы: с 9:00 до 20:00</small>
    </div>

    <div id="persons-group" class="form-group">
        <label for="persons">Количество человек:</label>
        <input type="number" id="persons" name="persons" min="1" max="20" step="1" value="1">
        <small>от 1 до 20. При заказе прогулки для 4+ человек - скидка 15%</small>
    </div>

    <div class="form-group">
        <label for="comment">Комментарий к заказу:</label>
        <textarea id="comment" name="comment" rows="3" placeholder="Ваши пожелания..."></textarea>
    </div>

    <button type="submit" class="btn-primary">Оформить заказ</button>
</form>

<script>
    let itemsData = {services: [], abonements: [], certificates: []};

    fetch('/api/services')
        .then(res => res.json())
        .then(data => { itemsData = data; })
        .catch(console.error);

    const typeSelect = document.getElementById('service_type');
    const serviceSelect = document.getElementById('service_id');
    const dateGroup = document.getElementById('date-group');
    const timeGroup = document.getElementById('time-group');
    const personsGroup = document.getElementById('persons-group');
    const timeHint = document.getElementById('time_hint');

    typeSelect.addEventListener('change', function() {
        const type = this.value;
        if (type === 'certificate') {
            dateGroup.style.display = 'none';
            timeGroup.style.display = 'none';
            personsGroup.style.display = 'none';
        } else {
            dateGroup.style.display = 'block';
            timeGroup.style.display = 'block';
            personsGroup.style.display = 'block';
        }

        if (!type) {
            serviceSelect.disabled = true;
            serviceSelect.innerHTML = '<option value="">Сначала выберите тип услуги</option>';
            document.getElementById('price_display').textContent = '0 руб.';
            document.getElementById('price').value = 0;
            return;
        }

        let items = [];
        if (type === 'service') items = itemsData.services;
        else if (type === 'abonement') items = itemsData.abonements;
        else if (type === 'certificate') items = itemsData.certificates;

        serviceSelect.disabled = false;
        serviceSelect.innerHTML = '<option value="">Выберите...</option>';
        items.forEach(item => {
            const option = document.createElement('option');
            option.value = item.id;
            option.textContent = `${item.name} - ${item.price} руб.`;
            option.dataset.price = item.price;
            option.dataset.name = item.name;
            if (item.duration) option.dataset.duration = item.duration;
            serviceSelect.appendChild(option);
        });
    });

    serviceSelect.addEventListener('change', function() {
        const opt = this.options[this.selectedIndex];
        if (opt.value) {
            document.getElementById('price_display').textContent = opt.dataset.price + ' руб.';
            document.getElementById('price').value = opt.dataset.price;
            document.getElementById('service_name').value = opt.dataset.name;

            const duration = opt.dataset.duration;
            if (duration && typeSelect.value === 'service') {
                let minutes = 0;
                if (duration.includes('минут')) minutes = parseInt(duration);
                else if (duration.includes('час')) minutes = parseInt(duration) * 60;
                if (minutes > 0) {
                    const maxHour = Math.floor((20*60 - minutes) / 60);
                    const maxMin = (20*60 - minutes) % 60;
                    timeHint.innerHTML = `Услуга длится ${duration}. Необходимо закончить до 20:00. Максимальное время начала: ${maxHour}:${maxMin.toString().padStart(2,'0')}`;
                } else timeHint.innerHTML = 'Режим работы: с 9:00 до 20:00';
            } else timeHint.innerHTML = 'Режим работы: с 9:00 до 20:00';
        } else {
            document.getElementById('price_display').textContent = '0 руб.';
            document.getElementById('price').value = 0;
        }
    });

    document.getElementById('date').min = new Date().toISOString().split('T')[0];
</script>
{% endblock %}