{% extends 'base.html' %}
{% block content %}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<style>
    .select2-container .select2-selection--single { height: 31px !important; border: 1px solid #ced4da; border-radius: 0.25rem; font-size: 0.875rem; }
    .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { line-height: 29px !important; padding-left: 10px; }
    .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow { height: 29px !important; }
    #orderTable th { font-size: 0.85rem; padding: 8px; background-color: #f8f9fa; }
    #orderTable td { padding: 4px 8px; }
</style>

<div class="card border-0 shadow-lg rounded-4 mb-5">
    <div class="card-header bg-primary text-white p-3 rounded-top-4">
        <h4 class="mb-0 fw-bold fs-5">{% if editing %}Edit Order #{{ order.id }}{% else %}Create New Order{% endif %}</h4>
    </div>
    <div class="card-body p-4">
        {% if error %}<div class="alert alert-danger py-2"><i class="fas fa-exclamation-circle me-2"></i>{{ error }}</div>{% endif %}
        
        <form method="POST">
            {% csrf_token %}
            <div class="row g-2 mb-4 pb-3 border-bottom">
                <div class="col-md-3"><label class="form-label fw-bold small text-muted mb-1">Party Name</label><input type="text" name="party_name" class="form-control form-control-sm" value="{{ order.party_name|default:'' }}" required></div>
                <div class="col-md-3"><label class="form-label fw-bold small text-muted mb-1">Contact</label><input type="text" name="contact" class="form-control form-control-sm" value="{{ order.contact|default:'' }}" required></div>
                <div class="col-md-3"><label class="form-label fw-bold small text-muted mb-1">Address</label><input type="text" name="address" class="form-control form-control-sm" value="{{ order.address|default:'' }}" required></div>
                <div class="col-md-3"><label class="form-label fw-bold small text-muted mb-1">VAT No</label><input type="text" name="vat_no" class="form-control form-control-sm" value="{{ order.vat_no|default:'' }}"></div>
            </div>

            <div class="table-responsive">
                <table class="table table-bordered align-middle mb-0 table-sm" id="orderTable">
                    <thead><tr><th width="40%">Product</th><th width="12%">Stock</th><th width="15%">Price</th><th width="15%">Qty</th><th width="15%">Total</th><th width="3%"></th></tr></thead>
                    <tbody>
                        {% if editing and order.items.all %}
                            {% for item in order.items.all %}
                            <tr class="item-row">
                                <td><select class="form-select form-select-sm product-select" name="product_id[]" style="width: 100%;">
                                    <option value="" selected>Select...</option>
                                    {% for p in products %}
                                    <option value="{{ p.id }}" data-price="{{ p.price_per_packet }}" data-stock="{{ p.current_stock }}" {% if p.id == item.product.id %}selected{% endif %}>
                                        {{ p.name }} {% if p.current_stock <= 0 and p.id != item.product.id %}(OUT){% endif %}
                                    </option>
                                    {% endfor %}
                                </select></td>
                                <td><input type="text" class="form-control-plaintext form-control-sm stock-display text-muted" readonly value="{{ item.product.current_stock }}"></td>
                                <td><input type="text" class="form-control-plaintext form-control-sm price-display" readonly value="{{ item.product.price_per_packet }}"></td>
                                <td><input type="number" name="quantity[]" class="form-control form-control-sm quantity-input" min="1" value="{{ item.quantity }}"></td>
                                <td><input type="text" class="form-control-plaintext form-control-sm total-display fw-bold" readonly value="{{ item.item_total }}"></td>
                                <td class="text-center"><button type="button" class="btn btn-sm text-danger border-0 remove-row px-1"><i class="fas fa-times"></i></button></td>
                            </tr>
                            {% endfor %}
                        {% endif %}
                        <tr class="item-row" id="templateRow" style="display:none;">
                            <td><select class="form-select form-select-sm product-select-template" name="product_id[]" style="width: 100%;" disabled>
                                <option value="" selected>Select...</option>
                                {% for p in products %}
                                <option value="{{ p.id }}" data-price="{{ p.price_per_packet }}" data-stock="{{ p.current_stock }}">
                                    {{ p.name }} {% if p.current_stock <= 0 %}(OUT){% endif %}
                                </option>
                                {% endfor %}
                            </select></td>
                            <td><input type="text" class="form-control-plaintext form-control-sm stock-display text-muted" readonly></td>
                            <td><input type="text" class="form-control-plaintext form-control-sm price-display" readonly></td>
                            <td><input type="number" name="quantity[]" class="form-control form-control-sm quantity-input" min="1" disabled></td>
                            <td><input type="text" class="form-control-plaintext form-control-sm total-display fw-bold" readonly></td>
                            <td class="text-center"><button type="button" class="btn btn-sm text-danger border-0 remove-row px-1"><i class="fas fa-times"></i></button></td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="d-flex justify-content-between align-items-center mt-2 p-2 bg-light border border-top-0 rounded-bottom">
                <button type="button" class="btn btn-sm btn-link text-decoration-none fw-bold" id="addRow"><i class="fas fa-plus-circle me-1"></i> Add Row</button>
                <h5 class="fw-bold mb-0 fs-6">Grand Total: Rs. <span id="grandTotal">{{ order.total_amount|default:'0.00' }}</span></h5>
            </div>

            <div class="mt-4 pt-3 d-flex gap-2 justify-content-end border-top">
                {% if editing %}
                    {% if order.is_delivered %}
                        <button type="button" class="btn btn-sm btn-outline-warning text-dark fw-bold rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#cancelOrderModal">Return</button>
                    {% else %}
                        <button type="button" class="btn btn-sm btn-outline-danger fw-bold rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#cancelOrderModal">Cancel</button>
                    {% endif %}
                    <a href="{% url 'order_book_page' %}" class="btn btn-sm btn-outline-secondary fw-bold rounded-pill px-3">Back</a>
                {% endif %}
                <button type="submit" class="btn btn-success btn-sm fw-bold px-4 rounded-pill">{% if editing %}Update{% else %}Complete Order{% endif %}</button>
            </div>
        </form>
    </div>
</div>

{% if editing %}
<div class="modal fade" id="cancelOrderModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content border-0 shadow-lg rounded-4">
            <div class="modal-body text-center p-4">
                {% if order.is_delivered %}
                    <h5 class="fw-bold mb-3">Confirm Return?</h5>
                    <div class="d-flex gap-2 justify-content-center">
                        <button type="button" class="btn btn-light btn-sm fw-bold rounded-pill px-3" data-bs-dismiss="modal">No</button>
                        <a href="{% url 'cancel_order' order.id %}?is_return=true" class="btn btn-warning btn-sm text-dark fw-bold rounded-pill px-3">Yes</a>
                    </div>
                {% else %}
                    <h5 class="fw-bold text-danger mb-3">Cancel Order?</h5>
                    <div class="d-flex gap-2 justify-content-center">
                        <button type="button" class="btn btn-light btn-sm fw-bold rounded-pill px-3" data-bs-dismiss="modal">No</button>
                        <a href="{% url 'cancel_order' order.id %}" class="btn btn-danger btn-sm fw-bold rounded-pill px-3">Yes</a>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endif %}

<script>
$(document).ready(function() {
    $('.product-select').each(function() { initializeSelect2($(this)); });
    
    {% if not editing %} 
        for(let i=0; i<5; i++) { addRow(); }
    {% endif %}

    function initializeSelect2(element) {
        element.select2({ theme: "bootstrap-5", width: '100%', placeholder: "Search...", allowClear: true });
        element.on('select2:select', function (e) {
            var selectedOption = $(this).find(':selected');
            var row = $(this).closest('tr');
            var price = parseFloat(selectedOption.data('price')) || 0;
            var stock = parseInt(selectedOption.data('stock')) || 0;
            
            row.find('.price-display').val(price.toFixed(2));
            row.find('.stock-display').val(stock);
            
            var qtyInput = row.find('.quantity-input');
            if (stock <= 0) { 
                row.find('.stock-display').val("Out").addClass('text-danger fw-bold small'); 
                qtyInput.prop('readonly', true).val(''); 
            } else { 
                row.find('.stock-display').val(stock).removeClass('text-danger fw-bold small'); 
                qtyInput.prop('readonly', false).attr('max', stock); 
            }
            calculateRow(row);
        });
    }

    $('#addRow').on('click', addRow);
    function addRow() {
        var newRow = $('#templateRow').clone().removeAttr('id').show();
        newRow.find('select, input').removeAttr('disabled');
        newRow.find('.product-select-template').removeClass('product-select-template').addClass('product-select');
        $('#orderTable tbody').append(newRow);
        initializeSelect2(newRow.find('.product-select'));
    }

    $(document).on('input', '.quantity-input', function() { calculateRow($(this).closest('tr')); });
    $(document).on('click', '.remove-row', function() { $(this).closest('tr').remove(); calculateTotal(); });

    function calculateRow(row) {
        var price = parseFloat(row.find('.price-display').val()) || 0;
        var qty = parseFloat(row.find('.quantity-input').val()) || 0;
        row.find('.total-display').val((price * qty).toFixed(2));
        calculateTotal();
    }
    function calculateTotal() {
        var grandTotal = 0;
        $('.total-display').not('#templateRow .total-display').each(function() { grandTotal += parseFloat($(this).val()) || 0; });
        $('#grandTotal').text(grandTotal.toFixed(2));
    }
});
</script>
{% endblock %}