{% extends "base.html" %}
{% block content %}
    <div class="container mt-4">
        <h2>{{ title }}</h2>
        <form method="post">
            {% csrf_token %}
            {{ form.as_p }}
            <hr>
            <h4>Items</h4>
            {{ formset.management_form }}
            <div id="formset-container">
                {% for form in formset %}
                    <div class="item-form row g-3 mb-3 align-items-end">
                        {{ form.id }}
                        <div class="col-md-2">
                            {{ form.make.label_tag }}
                            {{ form.make }}
                        </div>
                        <div class="col-md-2">
                            {{ form.model.label_tag }}
                            {{ form.model }}
                        </div>
                        <div class="col-md-2">
                            {{ form.serie.label_tag }}
                            {{ form.serie }}
                        </div>
                        <div class="col-md-2">
                            {{ form.trim.label_tag }}
                            {{ form.trim }}
                        </div>
                        <div class="col-md-1">
                            {{ form.year.label_tag }}
                            {{ form.year }}
                        </div>
                        <div class="col-md-2">
                            {{ form.color.label_tag }}
                            {{ form.color }}
                        </div>
                        <div class="col-md-2">
                            {{ form.expected_cost.label_tag }}
                            {{ form.expected_cost }}
                        </div>
                        <div class="col-md-1">
                            <button type="button" class="btn btn-phoenix-danger btn-sm remove-row">Remove</button>
                        </div>
                    </div>
                {% endfor %}
            </div>
            <button type="button"
                    id="add-item"
                    class="btn btn-phoenix-secondary btn-sm mb-3">+ Add Item</button>
            <div class="mt-3">
                <button type="submit" class="btn btn-phoenix-primary">Save</button>
                <a href="{% url 'purchase_order_list' request.dealer.slug %}"
                   class="btn btn-phoenix-secondary">Cancel</a>
            </div>
        </form>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const container = document.getElementById('formset-container');
            const addBtn = document.getElementById('add-item');
            const totalForms = document.querySelector('#id_form-TOTAL_FORMS');
            const emptyForm = document.querySelector('.empty-form').cloneNode(true);

            function updateFormIndex(formRow, index) {
                formRow.querySelectorAll('input, select').forEach(input => {
                    input.name = input.name.replace('__prefix__', index);
                    input.id = input.id.replace('__prefix__', index);
                });
            }

            addBtn.addEventListener('click', function () {
                const currentCount = parseInt(totalForms.value);
                const newForm = emptyForm.cloneNode(true);
                updateFormIndex(newForm, currentCount);
                newForm.classList.remove('empty-form');

        // Attach remove handler
                const removeBtn = newForm.querySelector('.remove-row');
                removeBtn.addEventListener('click', function () {
                    newForm.remove();
                    totalForms.value = parseInt(totalForms.value) - 1;
                });

                container.appendChild(newForm);
                totalForms.value = currentCount + 1;
            });

            document.querySelectorAll('.remove-row').forEach(btn => {
                btn.addEventListener('click', function () {
                    const row = this.closest('.item-form');
                    row.remove();
                    totalForms.value = parseInt(totalForms.value) - 1;
                });
            });
        });
    </script>
    <!-- Empty form template -->
    <div class="empty-form d-none">
        <div class="item-form row g-3 mb-3 align-items-end">
            <div class="col-md-2">
                <select name="form-__prefix__-make" class="form-select make-select"></select>
            </div>
            <div class="col-md-2">
                <select name="form-__prefix__-model" class="form-select model-select"></select>
            </div>
            <div class="col-md-2">
                <select name="form-__prefix__-serie" class="form-select serie-select"></select>
            </div>
            <div class="col-md-2">
                <select name="form-__prefix__-trim" class="form-select trim-select"></select>
            </div>
            <div class="col-md-1">
                <input type="number" name="form-__prefix__-year" class="form-control">
            </div>
            <div class="col-md-2">
                <input type="text" name="form-__prefix__-color" class="form-control">
            </div>
            <div class="col-md-2">
                <input type="number"
                       step="0.01"
                       name="form-__prefix__-expected_cost"
                       class="form-control">
            </div>
            <div class="col-md-1">
                <button type="button" class="btn btn-phoenix-danger btn-sm remove-row">Remove</button>
            </div>
        </div>
    </div>
{% endblock %}