{% extends "base.html" %}
{% block content %}
<h1>{% if order %}✏️ Редактирование заявки{% else %}➕ Новая заявка{% endif %}</h1>

<form method="post" id="orderForm">
    <div class="form-card">
        <div class="form-group">
            <label>Номер заявки *</label>
            <input type="text" name="order_number" value="{{ order.order_number if order else '' }}" required>
        </div>
        
        <div class="form-group">
            <label>Партнер *</label>
            <select name="partner_id" id="partner_id" required>
                <option value="">Выберите партнера</option>
                {% for p in partners %}
                    <option value="{{ p.id }}" data-sales="{{ p.total_sales }}" data-name="{{ p.company_name }}" {% if order and order.partner_id == p.id %}selected{% endif %}>
                        {{ p.company_name }} (продажи: {{ "%.2f"|format(p.total_sales) }} ₽)
                    </option>
                {% endfor %}
            </select>
        </div>
        
        <div class="form-group">
            <label>Примечания</label>
            <textarea name="notes" rows="2">{{ order.notes if order else '' }}</textarea>
        </div>
    </div>
    
    <hr style="margin: 20px 0;">
    
    <h3>📦 Товары в заявке</h3>
    <div id="items_container">
        {% if order_items %}
            {% for item in order_items %}
            <div class="item-row">
                <select name="product_id[]" required>
                    <option value="">Выберите товар</option>
                    {% for prod in products %}
                        <option value="{{ prod.id }}" data-price="{{ prod.calculated_price }}" {% if item.product_id == prod.id %}selected{% endif %}>
                            {{ prod.name }} - {{ "%.2f"|format(prod.calculated_price) }} ₽
                        </option>
                    {% endfor %}
                </select>
                <input type="number" name="quantity[]" placeholder="Количество" step="0.01" value="{{ item.quantity }}" required>
                <button type="button" class="btn btn-primary btn-small remove-item">×</button>
            </div>
            {% endfor %}
        {% else %}
            <div class="item-row">
                <select name="product_id[]" required>
                    <option value="">Выберите товар</option>
                    {% for prod in products %}
                        <option value="{{ prod.id }}" data-price="{{ prod.calculated_price }}">{{ prod.name }} - {{ "%.2f"|format(prod.calculated_price) }} ₽</option>
                    {% endfor %}
                </select>
                <input type="number" name="quantity[]" placeholder="Количество" step="0.01" required>
                <button type="button" class="btn btn-primary btn-small remove-item">×</button>
            </div>
        {% endif %}
    </div>
    
    <button type="button" id="add_item_btn" class="btn btn-secondary" style="margin: 10px 0;">+ Добавить товар</button>
    
    <div style="margin-top: 20px; padding: 15px; background: #FFFAF0; border-radius: 8px; border: 1px solid #F5DEB3;">
        <h3>💰 Расчет стоимости</h3>
        
        <div style="background: #F5DEB3; padding: 10px; border-radius: 5px; margin-bottom: 15px;">
            <small style="font-weight: bold;">📊 Шкала скидок от суммы заявки:</small><br>
            <small>• до 500 000 ₽ → 0%</small><br>
            <small>• от 500 000 до 1 000 000 ₽ → 5%</small><br>
            <small>• от 1 000 000 до 2 000 000 ₽ → 10%</small><br>
            <small>• свыше 2 000 000 ₽ → 15%</small>
        </div>
        
        <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
            <span>Сумма заявки:</span>
            <strong id="preview_subtotal">0.00</strong> ₽
        </div>
        <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
            <span>Скидка:</span>
            <strong id="preview_discount">0</strong>% 
            <span id="discount_range" style="font-size: 0.8rem; color: #666;"></span>
        </div>
        <div style="display: flex; justify-content: space-between; margin-bottom: 10px; padding-top: 10px; border-top: 1px dashed #F5DEB3;">
            <span style="font-size: 1.2rem;">Сумма к оплате:</span>
            <strong style="font-size: 1.4rem; color: #D2691E;" id="preview_total">0.00</strong> ₽
        </div>
        <div style="display: flex; justify-content: space-between; margin-top: 10px; font-size: 0.9rem; color: #666;">
            <span>Вы экономите:</span>
            <span id="preview_savings">0.00</span> ₽
        </div>
    </div>
    
    <div style="display: flex; gap: 10px; margin-top: 20px;">
        <button type="submit" class="btn btn-primary">💾 Сохранить заявку</button>
        <a href="/" class="btn btn-secondary">❌ Отмена</a>
    </div>
</form>

<script>
function calculateDiscount(subtotal) {
    if (subtotal >= 2000000) return 15;
    if (subtotal >= 1000000) return 10;
    if (subtotal >= 500000) return 5;
    return 0;
}

function getDiscountRange(discount) {
    if (discount === 15) return '(свыше 2 000 000 ₽)';
    if (discount === 10) return '(от 1 000 000 до 2 000 000 ₽)';
    if (discount === 5) return '(от 500 000 до 1 000 000 ₽)';
    return '(до 500 000 ₽)';
}

function updatePreview() {
    let subtotal = 0;
    const rows = document.querySelectorAll('.item-row');
    rows.forEach(row => {
        const select = row.querySelector('select[name="product_id[]"]');
        const qty = row.querySelector('input[name="quantity[]"]');
        if (select && select.value && qty && qty.value) {
            const price = parseFloat(select.options[select.selectedIndex].dataset.price);
            const quantity = parseFloat(qty.value);
            if (!isNaN(price) && !isNaN(quantity) && quantity > 0) {
                subtotal += price * quantity;
            }
        }
    });
    
    const discount = calculateDiscount(subtotal);
    const total = subtotal * (1 - discount / 100);
    const savings = subtotal - total;
    const discountRange = getDiscountRange(discount);
    
    document.getElementById('preview_subtotal').innerText = subtotal.toFixed(2);
    document.getElementById('preview_discount').innerText = discount;
    document.getElementById('discount_range').innerText = discountRange;
    document.getElementById('preview_total').innerText = total.toFixed(2);
    document.getElementById('preview_savings').innerText = savings.toFixed(2);
}

document.getElementById('add_item_btn').addEventListener('click', function() {
    const container = document.getElementById('items_container');
    const newRow = document.createElement('div');
    newRow.className = 'item-row';
    newRow.style.display = 'flex';
    newRow.style.gap = '10px';
    newRow.style.marginBottom = '10px';
    newRow.innerHTML = `
        <select name="product_id[]" required style="flex: 2; padding: 8px; border: 1px solid #F5DEB3; border-radius: 5px;">
            <option value="">Выберите товар</option>
            {% for prod in products %}
                <option value="{{ prod.id }}" data-price="{{ prod.calculated_price }}">{{ prod.name }} - {{ "%.2f"|format(prod.calculated_price) }} ₽</option>
            {% endfor %}
        </select>
        <input type="number" name="quantity[]" placeholder="Количество" step="0.01" required style="flex: 1; padding: 8px; border: 1px solid #F5DEB3; border-radius: 5px;">
        <button type="button" class="btn btn-primary btn-small remove-item">×</button>
    `;
    container.appendChild(newRow);
    attachEvents(newRow);
    updatePreview();
});

function attachEvents(row) {
    const select = row.querySelector('select');
    const qty = row.querySelector('input');
    const removeBtn = row.querySelector('.remove-item');
    if (select) select.addEventListener('change', updatePreview);
    if (qty) qty.addEventListener('input', updatePreview);
    if (removeBtn) {
        removeBtn.addEventListener('click', function() {
            if (document.querySelectorAll('.item-row').length > 1) {
                row.remove();
                updatePreview();
            } else {
                alert('Должен быть хотя бы один товар');
            }
        });
    }
}

document.querySelectorAll('.item-row').forEach(row => attachEvents(row));
updatePreview();
</script>

<style>
.item-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: start;
}
.item-row select {
    flex: 2;
    padding: 8px;
    border: 1px solid #F5DEB3;
    border-radius: 5px;
}
.item-row input {
    flex: 1;
    padding: 8px;
    border: 1px solid #F5DEB3;
    border-radius: 5px;
}
@media (max-width: 768px) {
    .item-row {
        flex-direction: column;
    }
    .item-row select, .item-row input {
        width: 100%;
    }
}
</style>
{% endblock %}
EOF