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

{% block page_title %}Product Inventory{% endblock %}

{% block header_actions %}
<div class="btn-group me-2">
    <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addProductModal">
        <i class="fas fa-plus me-1"></i> Add Product
    </button>
    <button type="button" class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#quickSaleModal">
        <i class="fas fa-cash-register me-1"></i> Quick Sale
    </button>
    <a href="{% url 'dashboard' %}" class="btn btn-sm btn-outline-secondary">
        <i class="fas fa-arrow-left me-1"></i> Back
    </a>
</div>
{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <div class="card shadow">
            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="fas fa-filter me-2"></i>Filters</h5>
                <span class="badge bg-light text-dark">{{ products.count }} products</span>
            </div>
            <div class="card-body">
                <form method="get" class="row g-3">
                    <div class="col-md-4">
                        <label for="search" class="form-label">Search</label>
                        <input type="text" class="form-control" id="search" name="search" 
                               value="{{ search_query }}" placeholder="Search by name, SKU or category...">
                    </div>
                    <div class="col-md-3">
                        <label for="category" class="form-label">Category</label>
                        <select class="form-select" id="category" name="category">
                            <option value="">All Categories</option>
                            {% for category in categories %}
                            <option value="{{ category.id }}" 
                                    {% if request.GET.category == category.id|stringformat:"i" %}selected{% endif %}>
                                {{ category.name }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="stock_status" class="form-label">Stock Status</label>
                        <select class="form-select" id="stock_status" name="stock_status">
                            <option value="">All Status</option>
                            <option value="low" {% if request.GET.stock_status == 'low' %}selected{% endif %}>
                                Low Stock
                            </option>
                            <option value="out" {% if request.GET.stock_status == 'out' %}selected{% endif %}>
                                Out of Stock
                            </option>
                        </select>
                    </div>
                    <div class="col-md-2 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-search me-1"></i> Filter
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card shadow">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="fas fa-boxes me-2"></i>All Products</h5>
                <div>
                    <button class="btn btn-sm btn-outline-primary" onclick="window.print()">
                        <i class="fas fa-print me-1"></i> Print
                    </button>
                    <button class="btn btn-sm btn-outline-success" onclick="exportProducts()">
                        <i class="fas fa-file-export me-1"></i> Export
                    </button>
                    <a href="{% url 'category_list' %}" class="btn btn-sm btn-outline-info">
                        <i class="fas fa-tags me-1"></i> Manage Categories
                    </a>
                </div>
            </div>
            <div class="card-body">
                <!-- Simple status display -->
                <div class="row mb-3">
                    <div class="col-md-12">
                        <small class="text-muted">
                            Showing page {{ products.number }} of {{ products.paginator.num_pages }} 
                            ({{ products.paginator.count }} total products)
                        </small>
                    </div>
                </div>
                
                <div class="table-responsive">
                    <table class="table table-hover data-table">
                        <thead class="table-light">
                            <tr>
                                <th>SKU</th>
                                <th>Product Name</th>
                                <th>Category</th>
                                <th>Stock</th>
                                <th>Price</th>
                                <th>Value</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for product in products %}  <!-- This should now work -->
                            <tr class="{% if product.quantity_in_stock == 0 %}stock-out{% elif product.quantity_in_stock <= product.minimum_stock_level %}stock-low{% else %}stock-ok{% endif %}">
                                <td><strong>{{ product.sku }}</strong></td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        {% if product.image %}
                                        <img src="{{ product.image.url }}" alt="{{ product.name }}" 
                                             class="rounded me-3" width="40" height="40">
                                        {% else %}
                                        <div class="rounded bg-secondary text-white d-flex align-items-center justify-content-center me-3" 
                                             style="width: 40px; height: 40px;">
                                            <i class="fas fa-box"></i>
                                        </div>
                                        {% endif %}
                                        <div>
                                            <strong>{{ product.name }}</strong>
                                            {% if product.description %}
                                            <small class="text-muted d-block">{{ product.description|truncatechars:50 }}</small>
                                            {% endif %}
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    {% if product.category %}
                                    <span class="badge bg-info">{{ product.category.name }}</span>
                                    {% else %}
                                    <span class="badge bg-secondary">Uncategorized</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div>
                                        {{ product.quantity_in_stock }} units
                                        {% if product.minimum_stock_level %}
                                        <small class="text-muted d-block">
                                            Min: {{ product.minimum_stock_level }}
                                        </small>
                                        {% endif %}
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <strong>KSh {{ product.unit_price|floatformat:2 }}</strong>
                                        <small class="text-muted d-block">
                                            Cost: KSh {{ product.cost_price|floatformat:2 }}
                                        </small>
                                    </div>
                                </td>
                                <td>
                                    <strong>KSh {{ product.total_value|floatformat:2 }}</strong>
                                </td>
                                <td>
                                    {% if product.quantity_in_stock == 0 %}
                                    <span class="badge bg-danger">Out of Stock</span>
                                    {% elif product.quantity_in_stock <= product.minimum_stock_level %}
                                    <span class="badge bg-warning">Low Stock</span>
                                    {% else %}
                                    <span class="badge bg-success">In Stock</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <button class="btn btn-outline-success btn-action" 
                                                onclick="quickSale({{ product.id }})"
                                                title="Quick Sale">
                                            <i class="fas fa-cash-register"></i>
                                        </button>
                                        <button class="btn btn-outline-primary btn-action" 
                                                onclick="viewProduct({{ product.id }})"
                                                title="View Details">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="btn btn-outline-warning btn-action" 
                                                onclick="editProduct({{ product.id }})"
                                                title="Edit">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="btn btn-outline-danger btn-action" 
                                                onclick="deleteProduct({{ product.id }}, '{{ product.name|escapejs }}')"
                                                title="Delete">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="8" class="text-center py-4">
                                    <i class="fas fa-box-open fa-3x text-muted mb-3"></i>
                                    <h5>No products found</h5>
                                    <p class="text-muted">Add your first product using the "Add Product" button.</p>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                
                <!-- Simple Pagination -->
                {% if products.paginator.num_pages > 1 %}
                <nav aria-label="Page navigation">
                    <ul class="pagination justify-content-center">
                        {% if products.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?page=1" aria-label="First">
                                <i class="fas fa-angle-double-left"></i>
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page={{ products.previous_page_number }}" aria-label="Previous">
                                <i class="fas fa-angle-left"></i>
                            </a>
                        </li>
                        {% else %}
                        <li class="page-item disabled">
                            <span class="page-link"><i class="fas fa-angle-double-left"></i></span>
                        </li>
                        <li class="page-item disabled">
                            <span class="page-link"><i class="fas fa-angle-left"></i></span>
                        </li>
                        {% endif %}
                        
                        {% for num in products.paginator.page_range %}
                            {% if products.number == num %}
                            <li class="page-item active">
                                <span class="page-link">{{ num }}</span>
                            </li>
                            {% elif num > products.number|add:'-3' and num < products.number|add:'3' %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                            </li>
                            {% endif %}
                        {% endfor %}
                        
                        {% if products.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ products.next_page_number }}" aria-label="Next">
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page={{ products.paginator.num_pages }}" aria-label="Last">
                                <i class="fas fa-angle-double-right"></i>
                            </a>
                        </li>
                        {% else %}
                        <li class="page-item disabled">
                            <span class="page-link"><i class="fas fa-angle-right"></i></span>
                        </li>
                        <li class="page-item disabled">
                            <span class="page-link"><i class="fas fa-angle-double-right"></i></span>
                        </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}
            </div>
            <div class="card-footer bg-white">
                <div class="row">
                    <div class="col-md-6">
                        <h6>Inventory Summary</h6>
                        <div class="d-flex">
                            <div class="me-4">
                                <span class="badge bg-success me-1">In Stock</span>
                                <span>{{ products_in_stock|default:"0" }}</span>
                            </div>
                            <div class="me-4">
                                <span class="badge bg-warning me-1">Low Stock</span>
                                <span>{{ products_low_stock|default:"0" }}</span>
                            </div>
                            <div>
                                <span class="badge bg-danger me-1">Out of Stock</span>
                                <span>{{ products_out_of_stock|default:"0" }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 text-end">
                        <h6>Total Inventory Value</h6>
                        <h3 class="text-success">KSh {{ total_inventory_value|default:"0.00"|floatformat:2 }}</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Product Modal -->
<div class="modal fade" id="addProductModal" tabindex="-1" aria-labelledby="addProductModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="addProductModalLabel">
                    <i class="fas fa-plus me-2"></i>Add New Product
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <!-- CHANGE THIS: Remove the form tag and handle submission via JavaScript -->
            <div class="modal-body">
                <!-- Error Container -->
                <div id="productFormErrors" class="alert alert-danger d-none" role="alert"></div>
                
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="productName" class="form-label">
                            Product Name <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control" id="productName" name="name" required>
                        <div class="invalid-feedback">Please enter a product name.</div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="productSKU" class="form-label">
                            SKU <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control" id="productSKU" name="sku" required>
                        <small class="text-muted">Unique Stock Keeping Unit (e.g., PROD-001)</small>
                        <div class="invalid-feedback">Please enter a unique SKU.</div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="productCategory" class="form-label">Category</label>
                        <div class="input-group">
                            <select class="form-select" id="productCategory" name="category">
                                <option value="">Select Category</option>
                                {% for category in categories %}
                                <option value="{{ category.id }}">{{ category.name }}</option>
                                {% endfor %}
                            </select>
                            <button type="button" class="btn btn-outline-primary" onclick="showAddCategoryModal()">
                                <i class="fas fa-plus"></i>
                            </button>
                        </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="productLocation" class="form-label">Location</label>
                        <input type="text" class="form-control" id="productLocation" name="location" placeholder="e.g., Shelf A1">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="unitPrice" class="form-label">
                            Selling Price (KSh) <span class="text-danger">*</span>
                        </label>
                        <div class="input-group">
                            <span class="input-group-text">KSh</span>
                            <input type="number" step="0.01" min="0" class="form-control" 
                                   id="unitPrice" name="unit_price" required>
                        </div>
                        <div class="invalid-feedback">Please enter a valid price.</div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="costPrice" class="form-label">
                            Cost Price (KSh) <span class="text-danger">*</span>
                        </label>
                        <div class="input-group">
                            <span class="input-group-text">KSh</span>
                            <input type="number" step="0.01" min="0" class="form-control" 
                                   id="costPrice" name="cost_price" required>
                        </div>
                        <div class="invalid-feedback">Please enter a valid cost price.</div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="initialStock" class="form-label">
                            Initial Stock <span class="text-danger">*</span>
                        </label>
                        <input type="number" min="0" class="form-control" 
                               id="initialStock" name="quantity" required>
                        <div class="invalid-feedback">Please enter initial stock quantity.</div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="minStock" class="form-label">Minimum Stock Level</label>
                        <input type="number" min="0" class="form-control" 
                               id="minStock" name="minimum_stock" value="10">
                        <small class="text-muted">Alert when stock falls below this level</small>
                    </div>
                    <div class="col-12 mb-3">
                        <label for="productDescription" class="form-label">Description</label>
                        <textarea class="form-control" id="productDescription" name="description" rows="3"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="submitProductBtn" onclick="submitProductForm()">
                    <i class="fas fa-save me-1"></i> Save Product
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Quick Sale Modal -->
<div class="modal fade" id="quickSaleModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title">
                    <i class="fas fa-cash-register me-2"></i>Quick Sale
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <!-- REMOVE THE FORM TAG - use div instead -->
            <div class="modal-body">
                <!-- Error Container -->
                <div id="saleFormErrors" class="alert alert-danger d-none" role="alert"></div>
                
                <div class="mb-3">
                    <label for="saleProductSelect" class="form-label">Product <span class="text-danger">*</span></label>
                    <select class="form-select" id="saleProductSelect" required>
                        <option value="">Select product...</option>
                        {% for product in products %}
                        <option value="{{ product.id }}">
                            {{ product.name }} ({{ product.quantity_in_stock }} in stock) - KSh {{ product.unit_price|floatformat:2 }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                
                <div class="mb-3">
                    <label for="saleQuantity" class="form-label">Quantity <span class="text-danger">*</span></label>
                    <input type="number" class="form-control" id="saleQuantity" min="1" required>
                    <small class="text-muted" id="availableStock"></small>
                </div>
                
                <div class="mb-3">
                    <label for="salePaymentMethod" class="form-label">Payment Method <span class="text-danger">*</span></label>
                    <select class="form-select" id="salePaymentMethod" required>
                        <option value="cash">Cash</option>
                        <option value="mpesa">M-Pesa</option>
                        <option value="card">Card</option>
                        <option value="credit">Credit</option>
                    </select>
                </div>
                
                <div class="mb-3">
                    <label for="customerName" class="form-label">Customer Name (Optional)</label>
                    <input type="text" class="form-control" id="customerName">
                </div>
                
                <div class="mb-3">
                    <label for="customerPhone" class="form-label">Customer Phone (Optional)</label>
                    <input type="text" class="form-control" id="customerPhone">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="submitSaleBtn" onclick="submitQuickSale()">
                    <i class="fas fa-check me-1"></i> Complete Sale
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Add Category Modal -->
<div class="modal fade" id="addCategoryModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title">
                    <i class="fas fa-plus me-2"></i>Add New Category
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="addCategoryForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="newCategoryName" class="form-label">Category Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="newCategoryName" required>
                    </div>
                    <div class="mb-3">
                        <label for="newCategoryDescription" class="form-label">Description</label>
                        <textarea class="form-control" id="newCategoryDescription" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-info">
                        <i class="fas fa-save me-1"></i> Save Category
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle me-2"></i>Confirm Delete
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p id="deleteMessage">Are you sure you want to delete this product?</p>
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    This action cannot be undone. All sales data for this product will be preserved.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
                    <i class="fas fa-trash me-1"></i> Delete
                </button>
            </div>
        </div>
    </div>
</div>

<!-- View Product Modal -->
<div class="modal fade" id="viewProductModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">
                    <i class="fas fa-eye me-2"></i>Product Details
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="productDetailsContent">
                    <!-- Product details will be loaded here -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Product Modal -->
<div class="modal fade" id="editProductModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-warning text-white">
                <h5 class="modal-title">
                    <i class="fas fa-edit me-2"></i>Edit Product
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- Error Container -->
                <div id="editProductFormErrors" class="alert alert-danger d-none" role="alert"></div>
                
                <div id="editProductContent">
                    <!-- Product edit form will be loaded here -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-warning" id="updateProductBtn" onclick="updateProduct()">
                    <i class="fas fa-save me-1"></i> Update Product
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Notification Container -->
<div id="notificationContainer" style="position: fixed; top: 20px; right: 20px; z-index: 9999;"></div>

<style>
    .loading {
        opacity: 0.7;
        pointer-events: none;
    }
    .loading-spinner {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        border: 2px solid currentColor;
        border-radius: 50%;
        border-top-color: transparent;
        animation: spin 1s linear infinite;
    }
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
</style>

<script>
    // CSRF Token setup for AJAX
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    
    const csrftoken = getCookie('csrftoken');
    
    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        }
    });
    
    // Helper function to show notifications
    function showNotification(message, type = 'success', duration = 5000) {
        const alertClass = {
            'success': 'alert-success',
            'danger': 'alert-danger',
            'warning': 'alert-warning',
            'info': 'alert-info'
        }[type] || 'alert-info';
        
        const alertId = 'alert-' + Date.now();
        const alertHtml = `
            <div id="${alertId}" class="alert ${alertClass} alert-dismissible fade show" role="alert" 
                 style="min-width: 300px; margin-bottom: 10px;">
                ${message}
                <button type="button" class="btn-close" onclick="$('#${alertId}').alert('close')"></button>
            </div>
        `;
        
        $('#notificationContainer').append(alertHtml);
        
        // Auto remove after duration
        setTimeout(function() {
            $(`#${alertId}`).alert('close');
        }, duration);
    }
    
    // Add Product Form Submission
function submitProductForm() {
    console.log('Form submission started...');
    
    // Validate form
    if (!validateProductForm()) {
        return;
    }
    
    // Collect form data
    const formData = {
        name: $('#productName').val().trim(),
        sku: $('#productSKU').val().trim(),
        unit_price: $('#unitPrice').val(),
        cost_price: $('#costPrice').val(),
        quantity: $('#initialStock').val(),
        minimum_stock: $('#minStock').val() || 10,
        category: $('#productCategory').val() || null,
        description: $('#productDescription').val().trim(),
        location: $('#productLocation').val().trim()
    };
    
    console.log('Form data:', formData);
    
    // Show loading state
    const submitBtn = $('#submitProductBtn');
    const originalText = submitBtn.html();
    submitBtn.prop('disabled', true).html('<span class="loading-spinner"></span> Saving...');
    
    $.ajax({
        url: '/api/add-product/',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(formData),
        beforeSend: function(xhr) {
            console.log('Sending AJAX request to /api/add-product/');
        },
        success: function(response) {
            console.log('Response received:', response);
            
            if (response.success) {
                showNotification('Product added successfully!', 'success');
                
                // Reset form and close modal
                $('#productName').val('');
                $('#productSKU').val('');
                $('#unitPrice').val('');
                $('#costPrice').val('');
                $('#initialStock').val('');
                $('#minStock').val('10');
                $('#productCategory').val('');
                $('#productDescription').val('');
                $('#productLocation').val('');
                $('#addProductModal').modal('hide');
                
                // Reload page after a short delay
                setTimeout(function() {
                    location.reload();
                }, 1500);
                
            } else {
                // Show error in form
                const errorContainer = $('#productFormErrors');
                errorContainer.html(`<strong>Error:</strong> ${response.error}`);
                errorContainer.removeClass('d-none');
                showNotification('Error: ' + response.error, 'danger');
            }
        },
        error: function(xhr, status, error) {
            console.error('AJAX Error:', xhr.responseText);
            console.error('Status:', status);
            console.error('Error:', error);
            
            let errorMessage = 'An error occurred while saving the product.';
            
            try {
                const response = JSON.parse(xhr.responseText);
                if (response && response.error) {
                    errorMessage = response.error;
                }
            } catch (e) {
                // If can't parse JSON, use default message
            }
            
            const errorContainer = $('#productFormErrors');
            errorContainer.html(`<strong>Error:</strong> ${errorMessage}`);
            errorContainer.removeClass('d-none');
            showNotification(errorMessage, 'danger');
        },
        complete: function() {
            // Restore button state
            submitBtn.prop('disabled', false).html(originalText);
        }
    });
}

// Form validation function
function validateProductForm() {
    const errors = [];
    const errorContainer = $('#productFormErrors');
    
    // Clear previous errors
    errorContainer.addClass('d-none').html('');
    $('.form-control').removeClass('is-invalid');
    
    // Validate required fields
    const requiredFields = [
        { id: 'productName', name: 'Product Name' },
        { id: 'productSKU', name: 'SKU' },
        { id: 'unitPrice', name: 'Selling Price' },
        { id: 'costPrice', name: 'Cost Price' },
        { id: 'initialStock', name: 'Initial Stock' }
    ];
    
    requiredFields.forEach(field => {
        const value = $(`#${field.id}`).val().trim();
        if (!value) {
            errors.push(`${field.name} is required`);
            $(`#${field.id}`).addClass('is-invalid');
        }
    });
    
    // Validate numeric fields
    const unitPrice = parseFloat($('#unitPrice').val());
    const costPrice = parseFloat($('#costPrice').val());
    
    if (isNaN(unitPrice) || unitPrice < 0) {
        errors.push('Selling price must be a valid positive number');
        $('#unitPrice').addClass('is-invalid');
    }
    
    if (isNaN(costPrice) || costPrice < 0) {
        errors.push('Cost price must be a valid positive number');
        $('#costPrice').addClass('is-invalid');
    }
    
    // Show errors if any
    if (errors.length > 0) {
        errorContainer.html('<strong>Please fix the following errors:</strong><ul>' + 
            errors.map(error => `<li>${error}</li>`).join('') + 
            '</ul>');
        errorContainer.removeClass('d-none');
        return false;
    }
    
    return true;
}

// Clear form errors when modal is hidden
$('#addProductModal').on('hidden.bs.modal', function() {
    $('#productFormErrors').addClass('d-none').html('');
    $('.form-control').removeClass('is-invalid');
});
    
    // Quick Sale Modal Product Selection
$('#saleProductSelect').change(function() {
    const productId = $(this).val();
    if (productId) {
        // Get product details
        $.ajax({
            url: `/api/product-details/${productId}/`,
            method: 'GET',
            success: function(product) {
                $('#availableStock').text(`Available: ${product.quantity_in_stock} units`);
                $('#saleQuantity').attr('max', product.quantity_in_stock);
                $('#saleQuantity').val(1);
                $('#saleQuantity').attr('data-max', product.quantity_in_stock); // Store max in data attribute
            },
            error: function() {
                $('#availableStock').text('');
                $('#saleQuantity').removeAttr('max');
                $('#saleQuantity').removeAttr('data-max');
            }
        });
    } else {
        $('#availableStock').text('');
        $('#saleQuantity').removeAttr('max');
        $('#saleQuantity').removeAttr('data-max');
    }
});

// Quick Sale Form Submission
function submitQuickSale() {
    const productId = $('#saleProductSelect').val();
    const quantity = $('#saleQuantity').val();
    const paymentMethod = $('#salePaymentMethod').val();
    const customerName = $('#customerName').val();
    const customerPhone = $('#customerPhone').val();
    
    // Validate
    if (!productId || !quantity || !paymentMethod) {
        showNotification('Please fill all required fields', 'warning');
        return;
    }
    
    // Validate quantity
    //const maxQuantity = parseInt($('#saleQuantity').attr('data-max') || 0);
    //if (parseInt(quantity) > maxQuantity) {
    //    showNotification(`Cannot sell more than ${maxQuantity} units (available stock)`, 'danger');
    //    return;
    //}
    
    if (parseInt(quantity) <= 0) {
        showNotification('Quantity must be greater than 0', 'warning');
        return;
    }
    
    // Show loading state
    const submitBtn = $('#submitSaleBtn');
    const originalText = submitBtn.html();
    submitBtn.prop('disabled', true).html('<span class="loading-spinner"></span> Processing...');
    
    $.ajax({
        url: '/api/record-sale/',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
            product_id: productId,
            quantity: parseInt(quantity),
            payment_method: paymentMethod,
            customer_name: customerName || '',
            customer_phone: customerPhone || ''
        }),
        success: function(response) {
            if (response.success) {
                showNotification(`Sale recorded successfully! Total: KSh ${response.total_amount}`, 'success');
                
                // Reset form and close modal
                $('#saleProductSelect').val('');
                $('#saleQuantity').val('');
                $('#salePaymentMethod').val('cash');
                $('#customerName').val('');
                $('#customerPhone').val('');
                $('#availableStock').text('');
                $('#quickSaleModal').modal('hide');
                
                // Reload page after a short delay
                setTimeout(function() {
                    location.reload();
                }, 1500);
                
            } else {
                showNotification('Error: ' + response.error, 'danger');
                submitBtn.prop('disabled', false).html(originalText);
            }
        },
        error: function(xhr, status, error) {
            console.error('Sale Error:', xhr.responseText, error);
            showNotification('An error occurred while recording the sale', 'danger');
            submitBtn.prop('disabled', false).html(originalText);
        }
    });
}

// Quick sale from product list
function quickSale(productId) {
    // Set the product in the dropdown
    $('#saleProductSelect').val(productId);
    $('#saleProductSelect').trigger('change');
    $('#quickSaleModal').modal('show');
}
    
    
    // Category Management Functions
    function showAddCategoryModal() {
        $('#addCategoryModal').modal('show');
    }
    
    // Add Category Form Submission
    $('#addCategoryForm').submit(function(e) {
        e.preventDefault();
        
        const formData = {
            name: $('#newCategoryName').val().trim(),
            description: $('#newCategoryDescription').val().trim()
        };
        
        if (!formData.name) {
            showNotification('Category name is required', 'warning');
            return;
        }
        
        $.ajax({
            url: '/api/add-category/',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(formData),
            success: function(response) {
                if (response.success) {
                    // Add new category to the select dropdown
                    const select = $('#productCategory');
                    select.append(new Option(response.category.name, response.category.id));
                    select.val(response.category.id);
                    
                    // Close modal and reset form
                    $('#addCategoryModal').modal('hide');
                    $('#addCategoryForm')[0].reset();
                    
                    showNotification('Category added successfully!', 'success');
                } else {
                    showNotification('Error: ' + response.message, 'danger');
                }
            },
            error: function(xhr, status, error) {
                showNotification('An error occurred: ' + error, 'danger');
            }
        });
    });
    
    // Product Actions
    function quickSale(productId) {
        $('#saleProductSelect').val(productId);
        $('#saleProductSelect').trigger('change');
        $('#quickSaleModal').modal('show');
    }
    
    function viewProduct(productId) {
        $.ajax({
            url: `/api/product-details/${productId}/`,
            method: 'GET',
            success: function(product) {
                const statusClass = product.quantity_in_stock == 0 ? 'danger' : 
                                  product.quantity_in_stock <= product.minimum_stock_level ? 'warning' : 'success';
                const statusText = product.quantity_in_stock == 0 ? 'Out of Stock' : 
                                 product.quantity_in_stock <= product.minimum_stock_level ? 'Low Stock' : 'In Stock';
                
                const details = `
                    <div class="row">
                        <div class="col-md-4 text-center">
                            <div class="mb-3">
                                <div class="rounded bg-secondary text-white d-flex align-items-center justify-content-center mx-auto" 
                                     style="width: 150px; height: 150px;">
                                    <i class="fas fa-box fa-3x"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <h4>${product.name}</h4>
                            <p class="text-muted">SKU: ${product.sku}</p>
                            
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <h6>Stock Information</h6>
                                    <p><strong>Quantity:</strong> ${product.quantity_in_stock} units</p>
                                    <p><strong>Min Stock Level:</strong> ${product.minimum_stock_level} units</p>
                                    <p><strong>Status:</strong> <span class="badge bg-${statusClass}">${statusText}</span></p>
                                </div>
                                <div class="col-md-6">
                                    <h6>Pricing</h6>
                                    <p><strong>Selling Price:</strong> KSh ${parseFloat(product.unit_price).toFixed(2)}</p>
                                    <p><strong>Cost Price:</strong> KSh ${parseFloat(product.cost_price).toFixed(2)}</p>
                                    <p><strong>Inventory Value:</strong> KSh ${(product.quantity_in_stock * parseFloat(product.cost_price)).toFixed(2)}</p>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <h6>Category</h6>
                                    <p>${product.category || 'Uncategorized'}</p>
                                </div>
                                <div class="col-md-6">
                                    <h6>Location</h6>
                                    <p>${product.location || 'Not specified'}</p>
                                </div>
                            </div>
                            
                            ${product.description ? `
                            <div class="mt-3">
                                <h6>Description</h6>
                                <p>${product.description}</p>
                            </div>
                            ` : ''}
                        </div>
                    </div>
                `;
                
                $('#productDetailsContent').html(details);
                $('#viewProductModal').modal('show');
            },
            error: function() {
                showNotification('Error loading product details', 'danger');
            }
        });
    }
    
    // Edit product
function editProduct(productId) {
    // Load product data and show edit modal
    $.ajax({
        url: `/api/product-details/${productId}/`,
        method: 'GET',
        success: function(product) {
            const editForm = `
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="editProductName" class="form-label">
                            Product Name <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control" id="editProductName" 
                               value="${product.name}" required>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="editProductSKU" class="form-label">
                            SKU <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control" id="editProductSKU" 
                               value="${product.sku}" required readonly>
                        <small class="text-muted">SKU cannot be changed</small>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="editProductCategory" class="form-label">Category</label>
                        <select class="form-select" id="editProductCategory">
                            <option value="">Select Category</option>
                            {% for category in categories %}
                            <option value="{{ category.id }}" ${product.category_id == {{ category.id }} ? 'selected' : ''}>
                                {{ category.name }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="editProductLocation" class="form-label">Location</label>
                        <input type="text" class="form-control" id="editProductLocation" 
                               value="${product.location || ''}">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="editUnitPrice" class="form-label">
                            Selling Price (KSh) <span class="text-danger">*</span>
                        </label>
                        <div class="input-group">
                            <span class="input-group-text">KSh</span>
                            <input type="number" step="0.01" min="0" class="form-control" 
                                   id="editUnitPrice" value="${product.unit_price}" required>
                        </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="editCostPrice" class="form-label">
                            Cost Price (KSh) <span class="text-danger">*</span>
                        </label>
                        <div class="input-group">
                            <span class="input-group-text">KSh</span>
                            <input type="number" step="0.01" min="0" class="form-control" 
                                   id="editCostPrice" value="${product.cost_price}" required>
                        </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="editCurrentStock" class="form-label">
                            Current Stock <span class="text-danger">*</span>
                        </label>
                        <input type="number" min="0" class="form-control" 
                               id="editCurrentStock" value="${product.quantity_in_stock}" required>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="editMinStock" class="form-label">Minimum Stock Level</label>
                        <input type="number" min="0" class="form-control" 
                               id="editMinStock" value="${product.minimum_stock_level || 10}">
                    </div>
                    <div class="col-12 mb-3">
                        <label for="editProductDescription" class="form-label">Description</label>
                        <textarea class="form-control" id="editProductDescription" rows="3">${product.description || ''}</textarea>
                    </div>
                </div>
                <input type="hidden" id="editProductId" value="${productId}">
            `;
            
            $('#editProductContent').html(editForm);
            $('#editProductModal').modal('show');
        },
        error: function() {
            showNotification('Error loading product details for editing', 'danger');
        }
    });
}

// Update product
function updateProduct() {
    const productId = $('#editProductId').val();
    const formData = {
        name: $('#editProductName').val().trim(),
        unit_price: $('#editUnitPrice').val(),
        cost_price: $('#editCostPrice').val(),
        quantity_in_stock: $('#editCurrentStock').val(),
        minimum_stock_level: $('#editMinStock').val() || 10,
        category_id: $('#editProductCategory').val() || null,
        description: $('#editProductDescription').val().trim(),
        location: $('#editProductLocation').val().trim()
    };
    
    // Validate
    if (!formData.name || !formData.unit_price || !formData.cost_price || !formData.quantity_in_stock) {
        showNotification('Please fill all required fields', 'warning');
        return;
    }
    
    // Show loading state
    const updateBtn = $('#updateProductBtn');
    const originalText = updateBtn.html();
    updateBtn.prop('disabled', true).html('<span class="loading-spinner"></span> Updating...');
    
    $.ajax({
        url: `/api/update-product/${productId}/`,
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(formData),
        success: function(response) {
            if (response.success) {
                showNotification('Product updated successfully!', 'success');
                
                // Close modal and reload
                $('#editProductModal').modal('hide');
                
                // Reload page after a short delay
                setTimeout(function() {
                    location.reload();
                }, 1500);
                
            } else {
                showNotification('Error: ' + response.error, 'danger');
                updateBtn.prop('disabled', false).html(originalText);
            }
        },
        error: function(xhr, status, error) {
            console.error('Update Error:', error);
            showNotification('An error occurred while updating the product', 'danger');
            updateBtn.prop('disabled', false).html(originalText);
        }
    });
}
    
    let productToDelete = null;
    let productNameToDelete = '';
    
    function deleteProduct(productId, productName) {
        productToDelete = productId;
        productNameToDelete = productName;
        $('#deleteMessage').html(`Are you sure you want to delete the product "<strong>${productName}</strong>"?`);
        $('#deleteModal').modal('show');
    }
    
    $('#confirmDeleteBtn').click(function() {
        if (!productToDelete) return;
        
        // Show loading state
        $(this).prop('disabled', true).html('<span class="loading-spinner"></span> Deleting...');
        
        $.ajax({
            url: `/api/delete-product/${productToDelete}/`,
            method: 'POST',
            headers: {
                'X-CSRFToken': csrftoken
            },
            success: function(response) {
                if (response.success) {
                    showNotification(response.message, 'success');
                    
                    // Close modal and reload
                    $('#deleteModal').modal('hide');
                    
                    // Reload page after a short delay
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                    
                } else {
                    showNotification(response.message, 'danger');
                    $('#deleteModal').modal('hide');
                }
            },
            error: function(xhr, status, error) {
                showNotification('An error occurred: ' + error, 'danger');
                $('#deleteModal').modal('hide');
            },
            complete: function() {
                // Reset delete button
                $('#confirmDeleteBtn').prop('disabled', false).html('<i class="fas fa-trash me-1"></i> Delete');
            }
        });
    });
    
    // Export products to CSV
    function exportProducts() {
        // Get current filter parameters
        const params = new URLSearchParams(window.location.search);
        
        // Create export URL
        let exportUrl = `/api/product-export/?${params.toString()}`;
        
        // Add timestamp to avoid caching
        exportUrl += `&_=${Date.now()}`;
        
        // Create temporary link and trigger download
        const link = document.createElement('a');
        link.href = exportUrl;
        link.download = `products_export_${new Date().toISOString().split('T')[0]}.csv`;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        
        showNotification('Export started. Your download will begin shortly.', 'info');
    }
    
    // Auto-generate SKU if empty
    $('#productName').on('blur', function() {
        const name = $(this).val().trim();
        const skuField = $('#productSKU');
        
        if (name && !skuField.val()) {
            // Generate a simple SKU from the name
            const prefix = name.substring(0, 3).toUpperCase().replace(/\s/g, '');
            const random = Math.floor(1000 + Math.random() * 9000);
            const sku = `${prefix}-${random}`;
            skuField.val(sku);
        }
    });
    
    // Initialize DataTables
    $(document).ready(function() {
        $('.data-table').DataTable({
            pageLength: 25,
            responsive: true,
            dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>rt<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Search in table...",
                lengthMenu: "Show _MENU_ entries",
                info: "Showing _START_ to _END_ of _TOTAL_ entries",
                infoEmpty: "Showing 0 to 0 of 0 entries",
                infoFiltered: "(filtered from _MAX_ total entries)",
                paginate: {
                    first: "First",
                    last: "Last",
                    next: "Next",
                    previous: "Previous"
                }
            },
            columnDefs: [
                { orderable: false, targets: -1 } // Make actions column not sortable
            ]
        });
    });

    $('#addProductForm').submit(submitProductForm);
    
    // Clear form errors when modal is hidden
    $('#addProductModal').on('hidden.bs.modal', function() {
        $('#productFormErrors').addClass('d-none').html('');
        $('.form-control').removeClass('is-invalid');
        $(this).find('form')[0].reset();
    });
    
    // Debug: Test API endpoint
    function testProductApi() {
        const testData = {
            name: "Test Product",
            sku: "TEST-" + Date.now(),
            unit_price: "99.99",
            cost_price: "50.00",
            quantity: "100"
        };
        
        console.log('Testing API with:', testData);
        
        $.ajax({
            url: '/api/add-product/',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(testData),
            success: function(response) {
                console.log('API Test Response:', response);
                if (response.success) {
                    alert('API test successful! Product added.');
                    location.reload();
                } else {
                    alert('API test failed: ' + response.error);
                }
            },
            error: function(xhr) {
                console.error('API Test Error:', xhr.responseText);
                alert('API test error. Check console.');
            }
        });
    }
    
    // Uncomment to test API directly
    // testProductApi();
</script>
{% endblock %}