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

{% block title %}{{ form.instance.pk|yesno:"Edit,New" }} Product - POS{% 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-box me-2"></i>
                        {% if form.instance.pk %}
                            Edit Product: {{ form.instance.name }}
                        {% else %}
                            New Product
                        {% 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:product_list' %}">Products</a></li>
                            <li class="breadcrumb-item active">{{ form.instance.pk|yesno:"Edit,New" }}</li>
                        </ol>
                    </nav>
                </div>
                <div>
                    <a href="{% url 'pos:product_list' %}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-1"></i> Back to List
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Form -->
    <div class="row">
        <div class="col-lg-10 col-xl-8">
            <div class="card shadow-sm">
                <div class="card-body">
                    <form method="post" id="productForm">
                        {% csrf_token %}
                        
                        <!-- Error Messages -->
                        {% if form.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 %}
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                        {% endif %}

                        <!-- Basic Information -->
                        <div class="card mb-3">
                            <div class="card-header bg-primary text-white">
                                <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Basic Information</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="{{ form.sku.id_for_label }}" class="form-label">
                                            SKU <span class="text-danger">*</span>
                                        </label>
                                        {{ form.sku }}
                                        <small class="form-text text-muted">Stock Keeping Unit - unique code</small>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="{{ form.barcode.id_for_label }}" class="form-label">Barcode</label>
                                        {{ form.barcode }}
                                        <small class="form-text text-muted">Optional barcode for scanning</small>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="{{ form.name.id_for_label }}" class="form-label">
                                            Product Name (English) <span class="text-danger">*</span>
                                        </label>
                                        {{ form.name }}
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="{{ form.name_bm.id_for_label }}" class="form-label">
                                            Nama Produk (Bahasa Malaysia)
                                        </label>
                                        {{ form.name_bm }}
                                    </div>
                                </div>

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

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="{{ form.category.id_for_label }}" class="form-label">
                                            Category <span class="text-danger">*</span>
                                        </label>
                                        {{ form.category }}
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="{{ form.product_type.id_for_label }}" class="form-label">
                                            Product Type <span class="text-danger">*</span>
                                        </label>
                                        {{ form.product_type }}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Pricing -->
                        <div class="card mb-3">
                            <div class="card-header bg-success text-white">
                                <h5 class="mb-0"><i class="fas fa-dollar-sign me-2"></i>Pricing</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="{{ form.cost_price.id_for_label }}" class="form-label">
                                            Cost Price (RM)
                                        </label>
                                        {{ form.cost_price }}
                                        <small class="form-text text-muted">Your purchase/production cost</small>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="{{ form.selling_price.id_for_label }}" class="form-label">
                                            Selling Price (RM) <span class="text-danger">*</span>
                                        </label>
                                        {{ form.selling_price }}
                                        <small class="form-text text-muted">Price to customer</small>
                                    </div>
                                </div>
                                
                                {% if form.instance.pk %}
                                <div class="alert alert-info">
                                    <i class="fas fa-chart-line me-2"></i>
                                    <strong>Profit Margin:</strong> {{ form.instance.get_profit_margin|floatformat:2 }}%
                                </div>
                                {% endif %}
                            </div>
                        </div>

                        <!-- Inventory -->
                        <div class="card mb-3">
                            <div class="card-header bg-warning text-dark">
                                <h5 class="mb-0"><i class="fas fa-warehouse me-2"></i>Inventory</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3 form-check">
                                    {{ form.track_inventory }}
                                    <label class="form-check-label" for="{{ form.track_inventory.id_for_label }}">
                                        Track inventory for this product
                                    </label>
                                    <small class="form-text text-muted d-block">Uncheck for services or non-tracked items</small>
                                </div>

                                <div id="inventoryFields">
                                    <div class="row">
                                        <div class="col-md-4 mb-3">
                                            <label for="{{ form.current_stock.id_for_label }}" class="form-label">
                                                Current Stock
                                            </label>
                                            {{ form.current_stock }}
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label for="{{ form.reorder_level.id_for_label }}" class="form-label">
                                                Reorder Level
                                            </label>
                                            {{ form.reorder_level }}
                                            <small class="form-text text-muted">Alert when stock below this</small>
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label for="{{ form.unit_of_measure.id_for_label }}" class="form-label">
                                                Unit of Measure
                                            </label>
                                            {{ form.unit_of_measure }}
                                            <small class="form-text text-muted">e.g., pcs, kg, litre</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Tax & Accounting -->
                        <div class="card mb-3">
                            <div class="card-header bg-info text-white">
                                <h5 class="mb-0"><i class="fas fa-receipt me-2"></i>Tax & Accounting</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3 form-check">
                                    {{ form.include_sst }}
                                    <label class="form-check-label" for="{{ form.include_sst.id_for_label }}">
                                        Include SST (Sales & Service Tax)
                                    </label>
                                </div>

                                <div id="sstFields" style="display: none;">
                                    <div class="mb-3">
                                        <label for="{{ form.sst_percentage.id_for_label }}" class="form-label">
                                            SST Rate (%)
                                        </label>
                                        {{ form.sst_percentage }}
                                        <small class="form-text text-muted">Standard rate is 6%</small>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label for="{{ form.income_account.id_for_label }}" class="form-label">
                                        Income Account
                                    </label>
                                    {{ form.income_account }}
                                    <small class="form-text text-muted">Account for revenue recognition</small>
                                </div>
                            </div>
                        </div>

                        <!-- Status -->
                        <div class="card mb-3">
                            <div class="card-body">
                                <div class="form-check">
                                    {{ form.is_active }}
                                    <label class="form-check-label" for="{{ form.is_active.id_for_label }}">
                                        <strong>Active Product</strong>
                                    </label>
                                    <small class="form-text text-muted d-block">Inactive products won't appear in sales</small>
                                </div>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="d-flex justify-content-between">
                            <a href="{% url 'pos:product_list' %}" class="btn btn-secondary">
                                <i class="fas fa-times me-1"></i> Cancel
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i>
                                {% if form.instance.pk %}Update{% else %}Create{% endif %} Product
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Toggle inventory fields based on track_inventory checkbox
    const trackInventoryCheckbox = document.getElementById('{{ form.track_inventory.id_for_label }}');
    const inventoryFields = document.getElementById('inventoryFields');
    
    function toggleInventoryFields() {
        if (trackInventoryCheckbox.checked) {
            inventoryFields.style.display = 'block';
        } else {
            inventoryFields.style.display = 'none';
        }
    }
    
    trackInventoryCheckbox.addEventListener('change', toggleInventoryFields);
    toggleInventoryFields(); // Initial state

    // Toggle SST fields based on include_sst checkbox
    const includeSstCheckbox = document.getElementById('{{ form.include_sst.id_for_label }}');
    const sstFields = document.getElementById('sstFields');
    
    function toggleSstFields() {
        if (includeSstCheckbox.checked) {
            sstFields.style.display = 'block';
        } else {
            sstFields.style.display = 'none';
        }
    }
    
    includeSstCheckbox.addEventListener('change', toggleSstFields);
    toggleSstFields(); // Initial state

    // Calculate and display profit margin on price changes
    const costPriceInput = document.getElementById('{{ form.cost_price.id_for_label }}');
    const sellingPriceInput = document.getElementById('{{ form.selling_price.id_for_label }}');
    
    function calculateProfitMargin() {
        const costPrice = parseFloat(costPriceInput.value) || 0;
        const sellingPrice = parseFloat(sellingPriceInput.value) || 0;
        
        if (sellingPrice > 0) {
            const profit = sellingPrice - costPrice;
            const margin = (profit / sellingPrice) * 100;
            console.log('Profit Margin:', margin.toFixed(2) + '%');
        }
    }
    
    if (costPriceInput && sellingPriceInput) {
        costPriceInput.addEventListener('input', calculateProfitMargin);
        sellingPriceInput.addEventListener('input', calculateProfitMargin);
    }
});
</script>
{% endblock %}