{% extends "base.html" %}
{% block content %}
<h1>{% if issue %}Редактирование выдачи{% else %}Новая выдача{% endif %}</h1>
<form method="post">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <div class="form-group">
        <label>Партнёр</label>
        <select name="partner_id" required>
            {% for p in partners %}
            <option value="{{ p.id }}" {% if issue and issue.partner_id == p.id %}selected{% endif %}>{{ p.name }}</option>
            {% endfor %}
        </select>
    </div>
    <div class="form-group">
        <label>Примечания</label>
        <textarea name="notes">{{ issue.notes if issue else '' }}</textarea>
    </div>

    <h3>Позиции</h3>
    <div id="items">
        {% if issue %}
            {% for item in issue.items %}
            <div class="card item-row">
                <div class="form-group">
                    <label>Товар</label>
                    <select name="inventory_id[]" required>
                        {% for inv in inventory %}
                        <option value="{{ inv.id }}" {% if inv.id == item.inventory_id %}selected{% endif %}>{{ inv.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label>Количество</label>
                    <input type="number" name="quantity[]" value="{{ item.quantity }}" min="1" required>
                </div>
                <button type="button" class="btn btn-secondary remove-item">Удалить</button>
            </div>
            {% endfor %}
        {% else %}
            <div class="card item-row">
                <div class="form-group">
                    <label>Товар</label>
                    <select name="inventory_id[]" required>
                        {% for inv in inventory %}
                        <option value="{{ inv.id }}">{{ inv.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label>Количество</label>
                    <input type="number" name="quantity[]" value="1" min="1" required>
                </div>
                <button type="button" class="btn btn-secondary remove-item">Удалить</button>
            </div>
        {% endif %}
    </div>
    <button type="button" id="add-item" class="btn btn-secondary">➕ Добавить позицию</button>
    <br><br>
    <button type="submit" class="btn">Сохранить</button>
    <a href="{{ url_for('main.issues') }}" class="btn btn-secondary">Отмена</a>
</form>

<script>
document.getElementById('add-item').addEventListener('click', function() {
    const div = document.createElement('div');
    div.className = 'card item-row';
    div.innerHTML = `
        <div class="form-group">
            <label>Товар</label>
            <select name="inventory_id[]" required>
                {% for inv in inventory %}
                <option value="{{ inv.id }}">{{ inv.name }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="form-group">
            <label>Количество</label>
            <input type="number" name="quantity[]" value="1" min="1" required>
        </div>
        <button type="button" class="btn btn-secondary remove-item">Удалить</button>
    `;
    document.getElementById('items').appendChild(div);
    attachRemove();
});

function attachRemove() {
    document.querySelectorAll('.remove-item').forEach(btn => {
        btn.removeEventListener('click', removeHandler);
        btn.addEventListener('click', removeHandler);
    });
}
function removeHandler(e) {
    e.target.closest('.item-row').remove();
}
attachRemove();
</script>
{% endblock %}