217 lines
9.1 KiB
HTML
217 lines
9.1 KiB
HTML
{% 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
|