{% extends 'base.html' %}
{% load subscription_tags %}

{% block title %}{{ form.instance.pk|yesno:"Edit,New" }} Sale - POS{% endblock %}

{% block extra_css %}
<style>
    .sale-item-row {
        background: #f8f9fa;
        padding: 15px;
        margin-bottom: 10px;
        border-radius: 5px;
        border: 1px solid #dee2e6;
    }
    .sale-item-row.to-delete {
        opacity: 0.5;
        background: #ffe0e0;
    }
    .total-summary {
        background: #e7f3ff;
        border: 2px solid #0d6efd;
        padding: 20px;
        border-radius: 8px;
    }
    .total-summary h4 {
        color: #0d6efd;
    }
    .product-select {
        width: 100%;
    }
    .delete-item-btn {
        cursor: pointer;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2>
                        <i class="fas fa-cash-register me-2"></i>
                        {% if form.instance.pk %}
                            Edit Sale: {{ form.instance.sale_number }}
                        {% else %}
                            New Sale
                        {% endif %}
                    </h2>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
                            <li class="breadcrumb-item"><a href="{% url 'pos:dashboard' %}">POS</a></li>
                            <li class="breadcrumb-item"><a href="{% url 'pos:sale_list' %}">Sales</a></li>
                            <li class="breadcrumb-item active">{{ form.instance.pk|yesno:"Edit,New" }}</li>
                        </ol>
                    </nav>
                </div>
                <div>
                    <a href="{% url 'pos:sale_list' %}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-1"></i> Back to List
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Form -->
    <form method="post" id="saleForm">
        {% csrf_token %}
        
        <!-- Error Messages -->
        {% if form.errors or formset.errors %}
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <h6 class="alert-heading"><i class="fas fa-exclamation-triangle me-2"></i>Please correct the errors below:</h6>
            <ul class="mb-0">
                {% for field in form %}
                    {% for error in field.errors %}
                        <li><strong>{{ field.label }}:</strong> {{ error }}</li>
                    {% endfor %}
                {% endfor %}
                {% for error in form.non_field_errors %}
                    <li>{{ error }}</li>
                {% endfor %}
                {% if formset.non_form_errors %}
                    {% for error in formset.non_form_errors %}
                        <li>{{ error }}</li>
                    {% endfor %}
                {% endif %}
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        {% endif %}

        <div class="row">
            <!-- Left Column - Sale Information -->
            <div class="col-lg-8">
                <!-- Sale Details -->
                <div class="card shadow-sm mb-3">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Sale Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.sale_date.id_for_label }}" class="form-label">
                                    Sale Date <span class="text-danger">*</span>
                                </label>
                                {{ form.sale_date }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.status.id_for_label }}" class="form-label">
                                    Status <span class="text-danger">*</span>
                                </label>
                                {{ form.status }}
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.customer.id_for_label }}" class="form-label">Customer</label>
                                {{ form.customer }}
                                <small class="form-text text-muted">Select existing customer or leave blank for walk-in</small>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.bank_account.id_for_label }}" class="form-label">Bank Account</label>
                                {{ form.bank_account }}
                                <small class="form-text text-muted">For accounting integration</small>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="{{ form.notes.id_for_label }}" class="form-label">Notes</label>
                            {{ form.notes }}
                        </div>
                    </div>
                </div>

                <!-- Sale Items -->
                <div class="card shadow-sm mb-3">
                    <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
                        <h5 class="mb-0"><i class="fas fa-shopping-cart me-2"></i>Sale Items</h5>
                        <button type="button" class="btn btn-light btn-sm" id="addItemBtn">
                            <i class="fas fa-plus me-1"></i> Add Item
                        </button>
                    </div>
                    <div class="card-body">
                        {{ formset.management_form }}
                        
                        <div id="saleItemsContainer">
                            {% for item_form in formset %}
                            <div class="sale-item-row" data-form-idx="{{ forloop.counter0 }}">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <h6 class="mb-0">Item #<span class="item-number">{{ forloop.counter }}</span></h6>
                                    <button type="button" class="btn btn-danger btn-sm delete-item-btn" data-form-idx="{{ forloop.counter0 }}">
                                        <i class="fas fa-trash"></i> Remove
                                    </button>
                                </div>
                                
                                {% if item_form.errors %}
                                <div class="alert alert-danger alert-sm">
                                    {% for field in item_form %}
                                        {% for error in field.errors %}
                                            <div><strong>{{ field.label }}:</strong> {{ error }}</div>
                                        {% endfor %}
                                    {% endfor %}
                                </div>
                                {% endif %}

                                <div class="row">
                                    <div class="col-md-5 mb-2">
                                        <label class="form-label small">Product <span class="text-danger">*</span></label>
                                        {{ item_form.product }}
                                    </div>
                                    <div class="col-md-2 mb-2">
                                        <label class="form-label small">Quantity <span class="text-danger">*</span></label>
                                        {{ item_form.quantity }}
                                    </div>
                                    <div class="col-md-2 mb-2">
                                        <label class="form-label small">Unit Price <span class="text-danger">*</span></label>
                                        {{ item_form.unit_price }}
                                    </div>
                                    <div class="col-md-3 mb-2">
                                        <label class="form-label small">SST %</label>
                                        {{ item_form.sst_percentage }}
                                    </div>
                                </div>

                                <div class="row align-items-end">
                                    <div class="col-md-8">
                                        <label class="form-label small">Notes</label>
                                        {{ item_form.notes }}
                                    </div>
                                    <div class="col-md-4">
                                        <div class="alert alert-info mb-0 py-1 px-2 small">
                                            <strong>Subtotal:</strong> <span class="item-total">RM 0.00</span>
                                        </div>
                                    </div>
                                </div>

                                {{ item_form.id }}
                                {{ item_form.DELETE }}
                            </div>
                            {% endfor %}
                        </div>

                        <div id="emptyItemsMessage" class="alert alert-warning text-center" style="display: none;">
                            <i class="fas fa-info-circle me-2"></i>
                            No items added yet. Click "Add Item" to add products to this sale.
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column - Summary -->
            <div class="col-lg-4">
                <div class="card shadow-sm mb-3 total-summary sticky-top" style="top: 20px;">
                    <div class="card-body">
                        <h4 class="mb-4"><i class="fas fa-calculator me-2"></i>Sale Summary</h4>
                        
                        <div class="d-flex justify-content-between mb-2">
                            <span>Subtotal:</span>
                            <strong id="displaySubtotal">RM 0.00</strong>
                        </div>
                        
                        <div class="d-flex justify-content-between mb-2">
                            <span>SST (6%):</span>
                            <strong id="displaySST">RM 0.00</strong>
                        </div>
                        
                        <hr class="my-3">
                        
                        <div class="d-flex justify-content-between mb-4">
                            <h5 class="mb-0">Total Amount:</h5>
                            <h5 class="mb-0 text-primary" id="displayTotal">RM 0.00</h5>
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-save me-2"></i>
                                {% if form.instance.pk %}Update{% else %}Create{% endif %} Sale
                            </button>
                            <a href="{% url 'pos:sale_list' %}" class="btn btn-secondary">
                                <i class="fas fa-times me-1"></i> Cancel
                            </a>
                        </div>

                        {% if form.instance.pk %}
                        <div class="mt-4 pt-3 border-top">
                            <small class="text-muted">
                                <div><strong>Sale Number:</strong> {{ form.instance.sale_number }}</div>
                                <div><strong>Created:</strong> {{ form.instance.created_at|date:"d M Y H:i" }}</div>
                                {% if form.instance.cashier %}
                                <div><strong>Cashier:</strong> {{ form.instance.cashier.get_full_name|default:form.instance.cashier.username }}</div>
                                {% endif %}
                            </small>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- Empty Form Template (for adding new items dynamically) -->
<div id="emptyFormTemplate" style="display: none;">
    <div class="sale-item-row" data-form-idx="__prefix__">
        <div class="d-flex justify-content-between align-items-start mb-2">
            <h6 class="mb-0">Item #<span class="item-number">1</span></h6>
            <button type="button" class="btn btn-danger btn-sm delete-item-btn" data-form-idx="__prefix__">
                <i class="fas fa-trash"></i> Remove
            </button>
        </div>
        
        <div class="row">
            <div class="col-md-5 mb-2">
                <label class="form-label small">Product <span class="text-danger">*</span></label>
                {{ formset.empty_form.product }}
            </div>
            <div class="col-md-2 mb-2">
                <label class="form-label small">Quantity <span class="text-danger">*</span></label>
                {{ formset.empty_form.quantity }}
            </div>
            <div class="col-md-2 mb-2">
                <label class="form-label small">Unit Price <span class="text-danger">*</span></label>
                {{ formset.empty_form.unit_price }}
            </div>
            <div class="col-md-3 mb-2">
                <label class="form-label small">SST %</label>
                {{ formset.empty_form.sst_percentage }}
            </div>
        </div>

        <div class="row align-items-end">
            <div class="col-md-8">
                <label class="form-label small">Notes</label>
                {{ formset.empty_form.notes }}
            </div>
            <div class="col-md-4">
                <div class="alert alert-info mb-0 py-1 px-2 small">
                    <strong>Subtotal:</strong> <span class="item-total">RM 0.00</span>
                </div>
            </div>
        </div>

        {{ formset.empty_form.id }}
        {{ formset.empty_form.DELETE }}
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    let formIdx = parseInt(document.querySelector('#id_items-TOTAL_FORMS').value);
    
    // Add new item
    document.getElementById('addItemBtn').addEventListener('click', function() {
        const container = document.getElementById('saleItemsContainer');
        const emptyFormTemplate = document.getElementById('emptyFormTemplate');
        const newForm = emptyFormTemplate.innerHTML.replace(/__prefix__/g, formIdx);
        
        container.insertAdjacentHTML('beforeend', newForm);
        formIdx++;
        document.querySelector('#id_items-TOTAL_FORMS').value = formIdx;
        
        updateItemNumbers();
        updateTotals();
        checkEmptyItems();
        attachEventListeners();
    });
    
    // Delete item
    function attachEventListeners() {
        document.querySelectorAll('.delete-item-btn').forEach(btn => {
            btn.removeEventListener('click', handleDeleteClick);
            btn.addEventListener('click', handleDeleteClick);
        });
        
        document.querySelectorAll('.sale-item-row input, .sale-item-row select').forEach(input => {
            input.removeEventListener('input', updateTotals);
            input.removeEventListener('change', updateTotals);
            input.addEventListener('input', updateTotals);
            input.addEventListener('change', updateTotals);
        });
    }
    
    function handleDeleteClick(e) {
        const formIdx = e.currentTarget.dataset.formIdx;
        const formRow = document.querySelector(`.sale-item-row[data-form-idx="${formIdx}"]`);
        
        // Check if this is an existing item with an ID
        const idInput = formRow.querySelector('input[name$="-id"]');
        if (idInput && idInput.value) {
            // Mark for deletion
            const deleteInput = formRow.querySelector('input[name$="-DELETE"]');
            deleteInput.checked = true;
            formRow.classList.add('to-delete');
            formRow.style.display = 'none';
        } else {
            // Remove from DOM (new item)
            formRow.remove();
        }
        
        updateItemNumbers();
        updateTotals();
        checkEmptyItems();
    }
    
    // Update item numbers
    function updateItemNumbers() {
        document.querySelectorAll('.sale-item-row:not(.to-delete)').forEach((row, index) => {
            const numberSpan = row.querySelector('.item-number');
            if (numberSpan) {
                numberSpan.textContent = index + 1;
            }
        });
    }
    
    // Calculate and update totals
    function updateTotals() {
        let subtotal = 0;
        let totalSST = 0;
        
        document.querySelectorAll('.sale-item-row:not(.to-delete)').forEach(row => {
            const quantityInput = row.querySelector('input[name$="-quantity"]');
            const priceInput = row.querySelector('input[name$="-unit_price"]');
            const sstInput = row.querySelector('input[name$="-sst_percentage"]');
            
            const quantity = parseFloat(quantityInput?.value) || 0;
            const price = parseFloat(priceInput?.value) || 0;
            const sstPercentage = parseFloat(sstInput?.value) || 0;
            
            const itemSubtotal = quantity * price;
            const itemSST = (itemSubtotal * sstPercentage) / 100;
            const itemTotal = itemSubtotal + itemSST;
            
            subtotal += itemSubtotal;
            totalSST += itemSST;
            
            // Update item total display
            const totalDisplay = row.querySelector('.item-total');
            if (totalDisplay) {
                totalDisplay.textContent = 'RM ' + itemTotal.toFixed(2);
            }
        });
        
        const total = subtotal + totalSST;
        
        // Update summary display
        document.getElementById('displaySubtotal').textContent = 'RM ' + subtotal.toFixed(2);
        document.getElementById('displaySST').textContent = 'RM ' + totalSST.toFixed(2);
        document.getElementById('displayTotal').textContent = 'RM ' + total.toFixed(2);
    }
    
    // Check if there are any items
    function checkEmptyItems() {
        const visibleItems = document.querySelectorAll('.sale-item-row:not(.to-delete)').length;
        const emptyMessage = document.getElementById('emptyItemsMessage');
        
        if (visibleItems === 0) {
            emptyMessage.style.display = 'block';
        } else {
            emptyMessage.style.display = 'none';
        }
    }
    
    // Initialize
    attachEventListeners();
    updateItemNumbers();
    updateTotals();
    checkEmptyItems();
    
    // Auto-fill unit price when product is selected
    document.querySelectorAll('select[name$="-product"]').forEach(select => {
        select.addEventListener('change', function() {
            const row = this.closest('.sale-item-row');
            const priceInput = row.querySelector('input[name$="-unit_price"]');
            const sstInput = row.querySelector('input[name$="-sst_percentage"]');
            
            // Get product data (you may need to add data attributes to options)
            const selectedOption = this.options[this.selectedIndex];
            if (selectedOption.value) {
                // Here you can add AJAX to fetch product details
                // For now, we'll just trigger recalculation
                updateTotals();
            }
        });
    });
});
</script>
{% endblock %}