{% extends 'base.html' %}
{% load static %}
{% load crispy_forms_tags %}

{% block title %}- Create Order{% endblock %}

{% block on_page_css %}
<link rel="stylesheet" type="text/css" media="all" href="{% static 'css/style.css' %}">
{% endblock on_page_css %}

{% block content %}
<div class="container mt-4">
    <div class="card order-form">
        <div class="card-header">
            <h2 class="mb-0">Create New Order</h2>
        </div>
        <div class="card-body">
            <form method="post">
                {% csrf_token %}
                
                <!-- Main Order Form -->
                <div class="order-details mb-4">
                    <h3>Order Details</h3>
                    <div class="row">
                        <div class="col-md-6">
                            {{ form.shipping_method|as_crispy_field }}
                        </div>
                        <div class="col-md-6">
                            {{ form.carrier|as_crispy_field }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            {{ form.delivery_address|as_crispy_field }}
                        </div>
                    </div>
                </div>
                
                <!-- Order Items Formset -->
                <div class="order-items">
                    <h3>Order Items</h3>
                    {{ order_items.management_form }}
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>Quantity</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="order-items-formset">
                            {% for form in order_items.forms %}
                                <tr class="order-item-form">
                                    <td>
                                        {{ form.product|as_crispy_field }}
                                    </td>
                                    <td>
                                        {{ form.quantity|as_crispy_field }}
                                    </td>
                                    <td>
                                        {% if order_items.can_delete %}
                                            {{ form.DELETE|as_crispy_field }}
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                
                <div class="mt-3">
                    <button type="button" class="btn btn-secondary" id="add-item">Add Item</button>
                    <button type="submit" class="btn btn-primary">Create Order</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock content %}

{% block on_page_js %}
<script>
    $(document).ready(function() {
        var formCount = {{ order_items.total_form_count }};
        
        $('#add-item').click(function() {
            var form = $('.order-item-form:first').clone(true);
            
            // Clear the values
            form.find('input').val('');
            form.find('select').val('');
            
            // Update form index
            form.find('input, select').each(function() {
                var name = $(this).attr('name');
                if (name) {
                    name = name.replace('-0-', '-' + formCount + '-');
                    var id = 'id_' + name;
                    $(this).attr({
                        'name': name,
                        'id': id
                    });
                }
            });
            
            // Update labels
            form.find('label').each(function() {
                var newFor = $(this).attr('for').replace('-0-', '-' + formCount + '-');
                $(this).attr('for', newFor);
            });
            
            // Append the new form
            $('#order-items-formset').append(form);
            formCount++;
            
            // Update the management form
            $('#id_order_items-TOTAL_FORMS').val(formCount);
        });
            
        // Optional: Handle deletion
        $(document).on('change', 'input[type="checkbox"][name$="-DELETE"]', function() {
            if ($(this).is(':checked')) {
                $(this).closest('tr').addClass('table-danger');
            } else {
                $(this).closest('tr').removeClass('table-danger');
            }
        });
    });
</script>
{% endblock on_page_js %}