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

{% block title %}{{ title }} - Ghana Wholesale{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8 mx-auto">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-box"></i> {{ title }} (Ghana Market)
                </h5>
            </div>
            <div class="card-body">
                <form method="post" novalidate>
                    {% csrf_token %}
                    
                    {% if form.non_field_errors %}
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-triangle"></i>
                        {% for error in form.non_field_errors %}
                            {{ error }}
                        {% endfor %}
                    </div>
                    {% endif %}
                    
                    <!-- Basic Information -->
                    <div class="mb-4">
                        <h6 class="border-bottom pb-2 mb-3">
                            <i class="fas fa-info-circle"></i> Basic Information
                        </h6>
                        
                        <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|add_class:"form-control"|attr:"placeholder:PROD-001" }}
                                {% if form.sku.errors %}
                                <div class="text-danger small mt-1">
                                    {% for error in form.sku.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                                {% endif %}
                                <small class="form-text text-muted">Unique product code (required)</small>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.barcode.id_for_label }}" class="form-label">
                                    Barcode
                                </label>
                                {{ form.barcode|add_class:"form-control"|attr:"placeholder:Optional" }}
                                <small class="form-text text-muted">For barcode scanning (optional)</small>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="{{ form.name.id_for_label }}" class="form-label">
                                Product Name *
                                <span class="text-danger">*</span>
                            </label>
                            {{ form.name|add_class:"form-control"|attr:"placeholder:Enter product name" }}
                            {% if form.name.errors %}
                            <div class="text-danger small mt-1">
                                {% for error in form.name.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>
                        
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="{{ form.category.id_for_label }}" class="form-label">
                                    Category
                                </label>
                                {{ form.category|add_class:"form-select" }}
                            </div>
                            
                            <div class="col-md-4 mb-3">
                                <label for="{{ form.supplier.id_for_label }}" class="form-label">
                                    Supplier
                                </label>
                                {{ form.supplier|add_class:"form-select" }}
                            </div>
                            
                            <div class="col-md-4 mb-3">
                                <label for="{{ form.unit.id_for_label }}" class="form-label">
                                    Unit *
                                    <span class="text-danger">*</span>
                                </label>
                                {{ form.unit|add_class:"form-select" }}
                                <small class="form-text text-muted">Measurement unit (piece, kg, bag, etc.)</small>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="{{ form.description.id_for_label }}" class="form-label">
                                Description
                            </label>
                            {{ form.description|add_class:"form-control"|attr:"rows:2"|attr:"placeholder:Optional description" }}
                        </div>
                    </div>
                    
                    <!-- Ghana Pricing -->
                    <div class="mb-4">
                        <h6 class="border-bottom pb-2 mb-3">
                            <i class="fas fa-money-bill-wave"></i> Ghana Pricing (Cedis)
                        </h6>
                        
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="{{ form.cost_price.id_for_label }}" class="form-label">
                                    Cost Price *
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">GH₵</span>
                                    {{ form.cost_price|add_class:"form-control"|attr:"placeholder:0.00"|attr:"step:0.01" }}
                                </div>
                                {% if form.cost_price.errors %}
                                <div class="text-danger small mt-1">
                                    {% for error in form.cost_price.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                                {% endif %}
                                <small class="form-text text-muted">What you pay to buy</small>
                            </div>
                            
                            <div class="col-md-4 mb-3">
                                <label for="{{ form.selling_price.id_for_label }}" class="form-label">
                                    Selling Price *
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">GH₵</span>
                                    {{ form.selling_price|add_class:"form-control"|attr:"placeholder:0.00"|attr:"step:0.01" }}
                                </div>
                                {% if form.selling_price.errors %}
                                <div class="text-danger small mt-1">
                                    {% for error in form.selling_price.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                                {% endif %}
                                <small class="form-text text-muted">Retail price for customers</small>
                            </div>
                            
                            <div class="col-md-4 mb-3">
                                <label for="{{ form.wholesale_price.id_for_label }}" class="form-label">
                                    Wholesale Price
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">GH₵</span>
                                    {{ form.wholesale_price|add_class:"form-control"|attr:"placeholder:Optional"|attr:"step:0.01" }}
                                </div>
                                <small class="form-text text-muted">Price for bulk buyers (optional)</small>
                            </div>
                        </div>
                        
                        <!-- Price Calculator -->
                        <div class="card bg-light mb-3">
                            <div class="card-body p-3">
                                <h6 class="card-title mb-2">Price Calculator</h6>
                                <div class="row">
                                    <div class="col-md-4">
                                        <small class="text-muted">Profit per unit:</small>
                                        <div id="profitPerUnit" class="text-success fw-bold">GH₵0.00</div>
                                    </div>
                                    <div class="col-md-4">
                                        <small class="text-muted">Profit margin:</small>
                                        <div id="profitMargin" class="text-info fw-bold">0.0%</div>
                                    </div>
                                    <div class="col-md-4">
                                        <small class="text-muted">Ghana VAT (15%):</small>
                                        <div id="vatAmount" class="text-warning fw-bold">GH₵0.00</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Stock Information -->
                    <div class="mb-4">
                        <h6 class="border-bottom pb-2 mb-3">
                            <i class="fas fa-boxes"></i> Stock Information
                        </h6>
                        
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label for="{{ form.initial_stock.id_for_label }}" class="form-label">
                                    {% if title == 'Create Product' or 'Add Product' in title %}
                                    Initial Stock Quantity *
                                    <span class="text-danger">*</span>
                                    {% else %}
                                    Add More Stock
                                    {% endif %}
                                </label>
                                <div class="input-group">
                                    {{ form.initial_stock|add_class:"form-control"|attr:"placeholder:Enter quantity"|attr:"min:0" }}
                                    <span class="input-group-text">units</span>
                                </div>
                                {% if form.initial_stock.errors %}
                                <div class="text-danger small mt-1">
                                    {% for error in form.initial_stock.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                                {% endif %}
                                <small class="form-text text-muted">
                                    {% if title == 'Create Product' or 'Add Product' in title %}
                                    Number of units to add to warehouse stock
                                    {% else %}
                                    Enter additional quantity to add to existing stock (enter 0 to keep current)
                                    {% endif %}
                                </small>
                            </div>
                        </div>
                        
                        <!-- Stock Value Preview -->
                        <div class="card bg-light mt-3">
                            <div class="card-body p-3">
                                <h6 class="card-title mb-2">Stock Value Calculator</h6>
                                <div class="row">
                                    <div class="col-md-6">
                                        <small class="text-muted">Total Stock Value:</small>
                                        <div id="stockValuePreview" class="text-success fw-bold">GH₵0.00</div>
                                    </div>
                                    <div class="col-md-6">
                                        <small class="text-muted">Total Units:</small>
                                        <div id="totalUnitsPreview" class="text-info fw-bold">0 units</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Additional Information -->
                    <div class="mb-4">
                        <h6 class="border-bottom pb-2 mb-3">
                            <i class="fas fa-cog"></i> Additional Information
                        </h6>
                        
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <div class="form-check form-switch">
                                    {{ form.is_active|add_class:"form-check-input" }}
                                    <label for="{{ form.is_active.id_for_label }}" class="form-check-label">
                                        <strong>Active Product</strong>
                                    </label>
                                </div>
                                <small class="form-text text-muted">Inactive products won't appear in sales</small>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Ghana Market Tips -->
                    <div class="alert alert-info mb-4">
                        <h6><i class="fas fa-lightbulb"></i> Ghana Market Tips:</h6>
                        <small class="mb-0">
                            • <strong>Pricing:</strong> Round to nearest 0.50 or 1.00 (e.g., GH₵5.00, GH₵10.50)<br>
                            • <strong>Markup:</strong> Typical 20-30% above cost price<br>
                            • <strong>Stock Quantity:</strong> Enter initial stock for warehouse<br>
                            • <strong>VAT:</strong> Standard rate is 15% (included in selling price)<br>
                            • <strong>Wholesale Price:</strong> Typically 10-20% below retail price for bulk buyers
                        </small>
                    </div>
                    
                    <!-- Form Actions -->
                    <div class="d-flex justify-content-between border-top pt-4">
                        <a href="{% url 'product_list' %}" class="btn btn-outline-secondary">
                            <i class="fas fa-times"></i> Cancel
                        </a>
                        <div>
                            <button type="submit" class="btn btn-success">
                                <i class="fas fa-check"></i>
                                {% if title == 'Create Product' or 'Add Product' in title %}
                                Add Product with Stock
                                {% else %}
                                Update Product
                                {% endif %}
                            </button>
                            {% if title == 'Create Product' or 'Add Product' in title %}
                            <button type="submit" name="save_and_add" class="btn btn-outline-primary">
                                <i class="fas fa-plus"></i> Save & Add Another
                            </button>
                            {% endif %}
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const costPriceField = document.getElementById('{{ form.cost_price.id_for_label }}');
    const sellingPriceField = document.getElementById('{{ form.selling_price.id_for_label }}');
    const wholesalePriceField = document.getElementById('{{ form.wholesale_price.id_for_label }}');
    const initialStockField = document.getElementById('{{ form.initial_stock.id_for_label }}');
    
    function calculateProfits() {
        const costPrice = parseFloat(costPriceField.value) || 0;
        const sellingPrice = parseFloat(sellingPriceField.value) || 0;
        const wholesalePrice = parseFloat(wholesalePriceField.value) || 0;
        
        if (costPrice > 0 && sellingPrice > 0) {
            const profitPerUnit = sellingPrice - costPrice;
            const profitMargin = (profitPerUnit / costPrice) * 100;
            const vatAmount = costPrice * 0.15; // Ghana VAT 15%
            
            document.getElementById('profitPerUnit').textContent = 'GH₵' + profitPerUnit.toFixed(2);
            document.getElementById('profitMargin').textContent = profitMargin.toFixed(1) + '%';
            document.getElementById('vatAmount').textContent = 'GH₵' + vatAmount.toFixed(2);
            
            // Suggest wholesale price if empty and selling price exists
            if (wholesalePriceField && !wholesalePriceField.value && sellingPrice > 0) {
                const suggestedWholesale = sellingPrice * 0.85; // 15% discount for wholesale
                wholesalePriceField.value = suggestedWholesale.toFixed(2);
            }
            
            // Round selling price to nearest 0.50 for Ghana market
            if (sellingPriceField && sellingPrice > 0) {
                const roundedSellingPrice = Math.round(sellingPrice * 2) / 2;
                if (Math.abs(sellingPrice - roundedSellingPrice) > 0.01) {
                    // Show suggestion tooltip
                    if (!document.getElementById('priceSuggestion')) {
                        const suggestionDiv = document.createElement('div');
                        suggestionDiv.id = 'priceSuggestion';
                        suggestionDiv.className = 'alert alert-warning mt-2';
                        suggestionDiv.innerHTML = `
                            <small><i class="fas fa-info-circle"></i> 
                            Suggested rounded price for Ghana market: <strong>GH₵${roundedSellingPrice.toFixed(2)}</strong></small>
                        `;
                        sellingPriceField.parentNode.parentNode.appendChild(suggestionDiv);
                    }
                } else if (document.getElementById('priceSuggestion')) {
                    document.getElementById('priceSuggestion').remove();
                }
            }
        } else {
            document.getElementById('profitPerUnit').textContent = 'GH₵0.00';
            document.getElementById('profitMargin').textContent = '0.0%';
            document.getElementById('vatAmount').textContent = 'GH₵0.00';
        }
    }
    
    function calculateStockValue() {
        const costPrice = parseFloat(costPriceField.value) || 0;
        const initialStock = parseInt(initialStockField.value) || 0;
        
        if (costPrice > 0 && initialStock > 0) {
            const stockValue = costPrice * initialStock;
            document.getElementById('stockValuePreview').innerHTML = `GH₵${stockValue.toFixed(2)}`;
            document.getElementById('totalUnitsPreview').textContent = `${initialStock} units`;
        } else {
            document.getElementById('stockValuePreview').innerHTML = 'GH₵0.00';
            document.getElementById('totalUnitsPreview').textContent = '0 units';
        }
    }
    
    // Add event listeners
    if (costPriceField) {
        costPriceField.addEventListener('input', calculateProfits);
        costPriceField.addEventListener('input', calculateStockValue);
    }
    if (sellingPriceField) sellingPriceField.addEventListener('input', calculateProfits);
    if (wholesalePriceField) wholesalePriceField.addEventListener('input', calculateProfits);
    if (initialStockField) initialStockField.addEventListener('input', calculateStockValue);
    
    // Calculate on page load if values exist
    if (costPriceField && costPriceField.value) {
        calculateProfits();
        calculateStockValue();
    }
    
    // Auto-generate SKU from name
    const nameField = document.getElementById('{{ form.name.id_for_label }}');
    const skuField = document.getElementById('{{ form.sku.id_for_label }}');
    
    if (nameField && skuField && (!skuField.value || skuField.value.includes('GH'))) {
        nameField.addEventListener('blur', function() {
            if ((!skuField.value || skuField.value.includes('GH')) && this.value) {
                const name = this.value.toUpperCase().replace(/[^A-Z0-9]/g, '');
                const date = new Date();
                const dateStr = date.getFullYear().toString().slice(-2) + 
                              (date.getMonth() + 1).toString().padStart(2, '0');
                const randomNum = Math.floor(Math.random() * 1000).toString().padStart(3, '0');
                skuField.value = 'GH' + dateStr + randomNum;
            }
        });
    }
    
    // Auto-calculate selling price from cost price (Ghana standard)
    if (costPriceField && sellingPriceField) {
        costPriceField.addEventListener('blur', function() {
            const cost = parseFloat(this.value) || 0;
            if (cost > 0 && !sellingPriceField.value) {
                // Ghana standard markup: 30% for retail
                const sellingPrice = cost * 1.3;
                // Round to nearest 0.50 for Ghana market
                const roundedPrice = Math.round(sellingPrice * 2) / 2;
                sellingPriceField.value = roundedPrice.toFixed(2);
                calculateProfits();
            }
        });
    }
    
    // Ghana-specific validation
    const form = document.querySelector('form');
    form.addEventListener('submit', function(event) {
        const costPrice = parseFloat(costPriceField.value) || 0;
        const sellingPrice = parseFloat(sellingPriceField.value) || 0;
        
        if (costPrice > 0 && sellingPrice > 0) {
            const markup = ((sellingPrice - costPrice) / costPrice) * 100;
            
            // Check if markup is too high or negative
            if (markup < 0) {
                alert('Error: Selling price cannot be less than cost price!');
                event.preventDefault();
                sellingPriceField.focus();
                return;
            }
            
            if (markup > 200) {
                const confirm = window.confirm(
                    `Warning: Your markup is ${markup.toFixed(1)}%, which is very high for Ghana market.\n` +
                    `Typical markup is 20-30%. Do you want to continue?`
                );
                if (!confirm) {
                    event.preventDefault();
                    sellingPriceField.focus();
                }
            }
        }
        
        // Validate initial stock for new products
        if (('{{ title }}' == 'Create Product' || 'Add Product' in '{{ title }}') && initialStockField) {
            const initialStock = parseInt(initialStockField.value) || 0;
            if (initialStock <= 0) {
                const confirm = window.confirm(
                    'You are adding 0 initial stock. The product will be created but not available for sale.\n' +
                    'Do you want to continue?'
                );
                if (!confirm) {
                    event.preventDefault();
                    initialStockField.focus();
                }
            }
        }
    });
});
</script>
{% endblock %}