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

{% block title %}Products - Inventory{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="fas fa-tags"></i> Product Management</h2>
    <div>
        <a href="{% url 'product_create' %}" class="btn btn-primary">
            <i class="fas fa-plus-circle"></i> Add Product
        </a>
        <a href="{% url 'barcode_scan' %}" class="btn btn-success">
            <i class="fas fa-barcode"></i> Barcode Scan
        </a>
        <a href="{% url 'transfer_list' %}" class="btn btn-info">
            <i class="fas fa-truck"></i> Transfers
        </a>
    </div>
</div>

<!-- Filters and Search -->
<div class="card mb-4">
    <div class="card-body">
        <form method="get" class="row">
            <div class="col-md-4 mb-2">
                <input type="text" class="form-control" name="q" value="{{ search_query }}" 
                       placeholder="Search by name, SKU or barcode">
            </div>
            <div class="col-md-3 mb-2">
                <select class="form-select" name="category">
                    <option value="">All Categories</option>
                    {% for category in categories %}
                    <option value="{{ category.id }}" {% if category.id|stringformat:"s" == selected_category %}selected{% endif %}>
                        {{ category.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-3 mb-2">
                <div class="btn-group w-100">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-filter"></i> Filter
                    </button>
                    <a href="{% url 'product_list' %}" class="btn btn-outline-secondary">
                        <i class="fas fa-times"></i> Clear
                    </a>
                </div>
            </div>
            <div class="col-md-2 mb-2">
                <a href="{% url 'export_products_csv' %}" class="btn btn-outline-success w-100">
                    <i class="fas fa-file-export"></i> Export
                </a>
            </div>
        </form>
    </div>
</div>

<!-- Products Table -->
<div class="card">
    <div class="card-header d-flex justify-content-between">
        <h5>All Products</h5>
        <span class="badge bg-primary">{{ page_obj.paginator.count }} products</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th>SKU</th>
                        <th>Product</th>
                        <th>Category</th>
                        <th>Warehouse Stock</th>
                        <th>Cost Price</th>
                        <th>Selling Price</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for product in page_obj %}
                    <tr>
                        <td>
                            <strong>{{ product.sku }}</strong>
                            {% if product.barcode %}
                            <br><small class="text-muted">{{ product.barcode }}</small>
                            {% endif %}
                        </td>
                        <td>
                            <strong>{{ product.name }}</strong>
                            <br><small class="text-muted">{{ product.unit|title }}</small>
                        </td>
                        <td>
                            {% if product.category %}
                            <span class="badge bg-info">{{ product.category.name }}</span>
                            {% else %}
                            <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td>
                            <span class="badge bg-{% if product.temp_warehouse_stock == 0 %}danger{% elif product.temp_warehouse_low_stock %}warning{% else %}success{% endif %}">
                                {{ product.temp_warehouse_stock }}
                            </span>
                            {% if product.temp_warehouse_low_stock %}
                            <br><small class="text-danger">Low Stock</small>
                            {% endif %}
                        </td>
                        <td>GH₵ {{ product.cost_price|floatformat:2 }}</td>
                        <td>
                            <strong>GH₵ {{ product.selling_price|floatformat:2 }}</strong>
                            {% if product.wholesale_price %}
                            <br><small class="text-muted">Wholesale: GH₵ {{ product.wholesale_price|floatformat:2 }}</small>
                            {% endif %}
                        </td>
                        <td>
                            {% if product.is_active %}
                            <span class="badge bg-success">Active</span>
                            {% else %}
                            <span class="badge bg-secondary">Inactive</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="{% url 'product_detail' product.pk %}" class="btn btn-outline-info" 
                                   title="View Details">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{% url 'product_update' product.pk %}" class="btn btn-outline-warning"
                                   title="Edit">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <a href="#" class="btn btn-outline-success" 
                                   title="Quick Transfer" data-bs-toggle="modal" data-bs-target="#transferModal{{ product.pk }}">
                                    <i class="fas fa-truck"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    
                    <!-- Quick Transfer Modal (for each product) -->
                    <div class="modal fade" id="transferModal{{ product.pk }}" tabindex="-1">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Transfer {{ product.name }}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <form method="post" action="{% url 'simple_transfer' %}">
                                    {% csrf_token %}
                                    <input type="hidden" name="product_id" value="{{ product.id }}">
                                    <div class="modal-body">
                                        <div class="alert alert-info">
                                            <i class="fas fa-info-circle"></i> Quick Transfer
                                        </div>
                                        
                                        <div class="mb-3">
                                            <label class="form-label">Quantity</label>
                                            <input type="number" class="form-control" name="quantity" value="1" min="1" 
                                                   max="{{ product.warehouse_stock }}" required>
                                            <small class="text-muted">
                                                Available in warehouse: <strong>{{ product.warehouse_stock }}</strong>
                                                {% if product.reorder_level and product.warehouse_stock <= product.reorder_level %}
                                                <span class="text-danger"> (Low Stock!)</span>
                                                {% endif %}
                                            </small>
                                        </div>
                                        
                                        <div class="mb-3">
                                            <label class="form-label">From Shop</label>
                                            <select class="form-select" name="from_shop" required>
                                                {% if warehouse %}
                                                <option value="{{ warehouse.id }}" selected>
                                                    {{ warehouse.name }} (Warehouse)
                                                </option>
                                                {% endif %}
                                                {% for shop in shops %}
                                                {% if shop.id != warehouse.id %}
                                                <option value="{{ shop.id }}">
                                                    {{ shop.name }} - {{ shop.get_shop_type_display }}
                                                </option>
                                                {% endif %}
                                                {% endfor %}
                                            </select>
                                        </div>
                                        
                                        <div class="mb-3">
                                            <label class="form-label">To Shop</label>
                                            <select class="form-select" name="to_shop" required>
                                                <option value="">Select destination shop</option>
                                                {% for shop in shops %}
                                                {% if shop.shop_type != 'warehouse' %}
                                                <option value="{{ shop.id }}">
                                                    {{ shop.name }} - {{ shop.get_shop_type_display }}
                                                </option>
                                                {% endif %}
                                                {% endfor %}
                                            </select>
                                        </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-primary">
                                            <i class="fas fa-truck"></i> Create Transfer
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    {% empty %}
                    <tr>
                        <td colspan="8" class="text-center py-4">
                            <i class="fas fa-box-open fa-3x text-muted mb-3"></i>
                            <p class="text-muted">No products found</p>
                            <a href="{% url 'product_create' %}" class="btn btn-primary">
                                <i class="fas fa-plus"></i> Add Your First Product
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    
    <!-- Pagination -->
    {% if page_obj.has_other_pages %}
    <div class="card-footer">
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center mb-0">
                {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page=1{% if search_query %}&q={{ search_query }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}">
                        <i class="fas fa-angle-double-left"></i>
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}">
                        <i class="fas fa-angle-left"></i>
                    </a>
                </li>
                {% endif %}
                
                {% for num in page_obj.paginator.page_range %}
                    {% if page_obj.number == num %}
                    <li class="page-item active">
                        <span class="page-link">{{ num }}</span>
                    </li>
                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ num }}{% if search_query %}&q={{ search_query }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}">{{ num }}</a>
                    </li>
                    {% endif %}
                {% endfor %}
                
                {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}">
                        <i class="fas fa-angle-right"></i>
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if search_query %}&q={{ search_query }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}">
                        <i class="fas fa-angle-double-right"></i>
                    </a>
                </li>
                {% endif %}
            </ul>
        </nav>
    </div>
    {% endif %}
</div>

<!-- Quick Stats -->
<div class="row mt-4">
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <h6 class="text-muted">Total Products</h6>
                <h3>{{ page_obj.paginator.count }}</h3>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <h6 class="text-muted">Active Products</h6>
                <h3 class="text-success">{{ page_obj.paginator.count }}</h3>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <h6 class="text-muted">Low Stock</h6>
                <h3 class="text-warning">0</h3>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <h6 class="text-muted">Out of Stock</h6>
                <h3 class="text-danger">0</h3>
            </div>
        </div>
    </div>
</div>
{% endblock %}