{% extends "base.html" %}

{% block content %}
<div class="page-header">
    <h2>Создание нового заказа</h2>
    <a href="{{ url_for('index') }}" class="btn-back">Отмена</a>
</div>

<form method="POST" class="order-form" id="orderForm">
    <div class="form-section">
        <h3>Информация о заказе</h3>

        <div class="form-group">
            <label for="partner_id">Партнер *</label>
            <select name="partner_id" id="partner_id" required>
                <option value="">Выберите партнера</option>
                {% for partner in partners %}
                <option value="{{ partner.id }}">{{ partner.name }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="form-group">
            <label for="order_date">Дата заказа *</label>
            <input type="date" name="order_date" id="order_date" value="{{ today }}" required>
        </div>

        <div class="form-group">
            <label for="notes">Примечания</label>
            <textarea name="notes" id="notes" rows="3"></textarea>
        </div>
    </div>

    <div class="form-section">
        <h3>Позиции заказа</h3>
        <p class="info-text">Выберите товары для заказа</p>

        <div id="items-container">
            <div class="item-row" id="item-row-1">
                <div class="item-fields">
                    <div class="form-group">
                        <label>Товар</label>
                        <select name="product_id[]" class="product-select" required onchange="updatePrice(this)">
                            <option value="">Выберите товар</option>
                            {% for product in products %}
                            <option value="{{ product.id }}" data-price="{{ product.min_partner_price }}">
                                {{ product.product_name }} ({{ product.type_name }})
                            </option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="form-group">
                        <label>Количество</label>
                        <input type="number" name="quantity[]" class="quantity-input"
                               min="1" value="1" required oninput="updateItemTotal(this)">
                    </div>

                    <div class="form-group">
                        <label>Цена</label>
                        <input type="number" name="price[]" class="price-input"
                               step="0.01" min="0.01" required readonly>
                    </div>

                    <div class="item-total">
                        <label>Сумма с наценкой:</label>
                        <span class="item-total-value">0.00 ₽</span>
                    </div>

                    <button type="button" class="btn-remove-item" onclick="removeItem(1)" style="display: none;">×</button>
                </div>
            </div>
        </div>

        <button type="button" class="btn-add-item" onclick="addItem()">+ Добавить позицию</button>
    </div>

    <div class="form-actions">
        <button type="submit" class="btn-submit">Создать заказ</button>
    </div>
</form>

<script>
let itemCount = 1;

function addItem() {
    itemCount++;
    const container = document.getElementById('items-container');
    const newRow = document.createElement('div');
    newRow.className = 'item-row';
    newRow.id = `item-row-${itemCount}`;

    let options = '<option value="">Выберите товар</option>';
    {% for product in products %}
    options += `<option value="{{ product.id }}" data-price="{{ product.min_partner_price }}">
                   {{ product.product_name }} ({{ product.type_name }})
                </option>`;
    {% endfor %}

    newRow.innerHTML = `
        <div class="item-fields">
            <div class="form-group">
                <label>Товар</label>
                <select name="product_id[]" class="product-select" required onchange="updatePrice(this)">
                    ${options}
                </select>
            </div>

            <div class="form-group">
                <label>Количество</label>
                <input type="number" name="quantity[]" class="quantity-input"
                       min="1" value="1" required oninput="updateItemTotal(this)">
            </div>

            <div class="form-group">
                <label>Цена</label>
                <input type="number" name="price[]" class="price-input"
                       step="0.01" min="0.01" required readonly>
            </div>

            <div class="item-total">
                <label>Сумма с наценкой:</label>
                <span class="item-total-value">0.00 ₽</span>
            </div>

            <button type="button" class="btn-remove-item" onclick="removeItem(${itemCount})">×</button>
        </div>
    `;

    container.appendChild(newRow);
    updateRemoveButtons();
}

function removeItem(id) {
    const row = document.getElementById(`item-row-${id}`);
    if (row) {
        row.remove();
        updateRemoveButtons();
    }
}

function updateRemoveButtons() {
    const rows = document.querySelectorAll('.item-row');
    rows.forEach((row, index) => {
        const btn = row.querySelector('.btn-remove-item');
        if (btn) {
            btn.style.display = rows.length > 1 ? 'block' : 'none';
        }
    });
}

function updatePrice(select) {
    const row = select.closest('.item-row');
    const priceInput = row.querySelector('.price-input');
    const selectedOption = select.options[select.selectedIndex];

    if (selectedOption && selectedOption.dataset.price) {
        priceInput.value = selectedOption.dataset.price;
    }

    updateItemTotal(priceInput);
}

function updateItemTotal(input) {
    const row = input.closest('.item-row');
    const quantity = parseFloat(row.querySelector('.quantity-input').value) || 0;
    const price = parseFloat(row.querySelector('.price-input').value) || 0;
    const totalSpan = row.querySelector('.item-total-value');

    const totalWithMarkup = quantity * price * 1.1;
    totalSpan.textContent = totalWithMarkup.toFixed(2) + ' ₽';
}

document.getElementById('orderForm').addEventListener('submit', function(e) {
    const rows = document.querySelectorAll('.item-row');
    let hasValidItems = false;

    rows.forEach((row, index) => {
        const select = row.querySelector('.product-select');
        const quantity = row.querySelector('.quantity-input');
        const price = row.querySelector('.price-input');

        if (select.value && quantity.value && price.value) {
            hasValidItems = true;
        }
    });

    if (!hasValidItems) {
        e.preventDefault();
        alert('Добавьте хотя бы одну позицию с корректными данными');
    }
});

// Инициализация обработчиков
document.addEventListener('DOMContentLoaded', function() {
    const firstSelect = document.querySelector('.product-select');
    if (firstSelect) {
        updatePrice(firstSelect);
    }

    document.querySelectorAll('.quantity-input').forEach(input => {
        input.addEventListener('input', function() {
            updateItemTotal(this);
        });
    });
});
</script>

<style>
.order-form {
    background: white;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    max-width: 1000px;
    margin: 0 auto;
}

.form-section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #E0E0E0;
}

.form-section h3 {
    color: #696969;
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.info-text {
    color: #666;
    margin-bottom: 15px;
    font-style: italic;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #555;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    font-family: 'Calibri', sans-serif;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #696969;
}

.stock-hint {
    display: block;
    margin-top: 5px;
    color: #696969;
    font-size: 0.9rem;
}

.stock-hint .max-stock {
    font-weight: 600;
    color: #4CAF50;
}

.item-row {
    background-color: #F5F5F5;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    border-left: 4px solid #696969;
}

.item-fields {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    gap: 15px;
    align-items: start;
}

.item-total {
    padding-top: 25px;
    font-weight: 600;
    color: #696969;
}

.item-total label {
    display: block;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 5px;
}

.btn-add-item {
    background-color: #696969;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    width: 100%;
    margin-top: 10px;
    transition: background-color 0.3s;
}

.btn-add-item:hover {
    background-color: #555;
}

.btn-remove-item {
    background-color: #ff6b6b;
    color: white;
    border: none;
    border-radius: 4px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
    margin-top: 25px;
}

.btn-remove-item:hover {
    background-color: #ff5252;
}

.total-section {
    background-color: #F5F5F5;
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
    border: 2px solid #E0E0E0;
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #E0E0E0;
}

.total-row:last-child {
    border-bottom: none;
}

.total-label {
    font-size: 1.1rem;
    color: #555;
}

.total-value {
    font-size: 1.1rem;
    color: #696969;
    font-weight: 500;
}

.grand-total {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 2px solid #696969;
}

.grand-total .total-label,
.grand-total .total-value {
    font-size: 1.3rem;
    color: #696969;
}

.discount-info {
    color: #4CAF50;
}

.form-actions {
    text-align: center;
    margin-top: 30px;
}

.btn-submit {
    background-color: #696969;
    color: white;
    border: none;
    padding: 15px 40px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 600;
    transition: background-color 0.3s;
}

.btn-submit:hover {
    background-color: #555;
}

.btn-back {
    display: inline-block;
    background-color: #E0E0E0;
    color: #696969;
    text-decoration: none;
    padding: 15px 40px;
    border-radius: 4px;
    margin-left: 10px;
    font-weight: 600;
    transition: background-color 0.3s;
}

.btn-back:hover {
    background-color: #D0D0D0;
}

@media (max-width: 768px) {
    .item-fields {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .item-total {
        padding-top: 0;
    }

    .btn-remove-item {
        margin-top: 0;
        width: 100%;
    }

    .form-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .btn-back {
        margin-left: 0;
    }
}
</style>
{% endblock %}