{% extends "base.html" %}

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

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
    <div>
        <form method="POST" class="order-form" oninput="calculateTotal()">
            <div class="form-group">
                <label>Ваше имя *</label>
                <input type="text" name="name" required>
            </div>
            
            <div class="form-group">
                <label>Телефон *</label>
                <input type="tel" name="phone" required placeholder="+7 (___) ___-__-__">
            </div>
            
            <div class="form-group">
                <label>Email *</label>
                <input type="email" name="email" required>
            </div>
            
            <div class="form-group">
                <label>Выберите товар *</label>
                <select name="product_id" id="product_id" required onchange="updatePrice()">
                    <option value="">Выберите товар</option>
                    {% for product in products %}
                    <option value="{{ product.id }}" data-price="{{ product.price }}" data-category="{{ product.product_type }}">
                        {{ product.name }} - {{ product.price }} ₽ ({{ product.product_type }})
                    </option>
                    {% endfor %}
                </select>
            </div>
            
            <div class="form-group">
                <label>Партнер *</label>
                <select name="partner" required>
                    <option value="">Выберите партнера</option>
                    {% for partner in partners %}
                    <option value="{{ partner.name }}">{{ partner.name }}</option>
                    {% endfor %}
                </select>
            </div>
            
            <div class="form-group">
                <label>Количество</label>
                <input type="number" name="quantity" id="quantity" min="1" value="1" onchange="calculateTotal()">
            </div>
            
            <div class="form-group">
                <label>Примечание</label>
                <textarea name="notes" rows="4"></textarea>
            </div>
            
            <button type="submit" class="btn-submit">Отправить заказ</button>
        </form>
    </div>
    
    <div style="background: #FDF5E6; padding: 1.5rem; border-radius: 10px; border: 1px solid #CD853F;">
        <h3>💰 Расчет стоимости</h3>
        <div id="calculation">
            <p><strong>Товар:</strong> <span id="selected_product">-</span></p>
            <p><strong>Цена за шт:</strong> <span id="price">0</span> ₽</p>
            <p><strong>Сумма:</strong> <span id="total">0</span> ₽</p>
            <p><strong>Скидка:</strong> <span id="discount_percent">0</span>% (<span id="discount_amount">0</span> ₽)</p>
            <p style="font-size: 1.2rem;"><strong>Итого:</strong> <span id="final_total">0</span> ₽</p>
        </div>
        <hr>
        <p><strong>Условия скидки:</strong></p>
        <ul style="font-size: 0.9rem;">
            <li>от 5 шт. → 5% скидка</li>
            <li>от 10 шт. → 10% скидка</li>
            <li>от 20 шт. → 15% скидка</li>
            <li>от 50 шт. → 20% скидка</li>
        </ul>
        <hr>
        <p><strong>📞 Телефон:</strong> +7 (999) 123-45-67</p>
        <p><strong>✉️ Email:</strong> info@photomaterials.ru</p>
    </div>
</div>

<script>
function updatePrice() {
    let select = document.getElementById('product_id');
    let selectedOption = select.options[select.selectedIndex];
    let price = selectedOption.getAttribute('data-price') || 0;
    document.getElementById('price').innerText = price;
    document.getElementById('selected_product').innerText = selectedOption.text.split(' - ')[0];
    calculateTotal();
}

function calculateTotal() {
    let quantity = parseInt(document.getElementById('quantity').value) || 0;
    let select = document.getElementById('product_id');
    let selectedOption = select.options[select.selectedIndex];
    let price = parseInt(selectedOption.getAttribute('data-price')) || 0;
    let total = quantity * price;
    
    let discountPercent = 0;
    if (quantity >= 50) discountPercent = 20;
    else if (quantity >= 20) discountPercent = 15;
    else if (quantity >= 10) discountPercent = 10;
    else if (quantity >= 5) discountPercent = 5;
    
    let discountAmount = total * discountPercent / 100;
    let finalTotal = total - discountAmount;
    
    document.getElementById('total').innerText = total.toFixed(2);
    document.getElementById('discount_percent').innerText = discountPercent;
    document.getElementById('discount_amount').innerText = discountAmount.toFixed(2);
    document.getElementById('final_total').innerText = finalTotal.toFixed(2);
}

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('product_id').addEventListener('change', updatePrice);
    updatePrice();
});
</script>

<style>
.order-form { max-width: 100%; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; color: #CD853F; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 5px; }
.btn-submit { background: #CD853F; color: white; padding: 0.75rem; border: none; border-radius: 5px; width: 100%; cursor: pointer; }
.btn-submit:hover { background: #B87333; }
#calculation { background: white; padding: 1rem; border-radius: 5px; margin-top: 1rem; }
</style>
{% endblock %}