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

{% block title %}Product Inventory{% endblock %}

{% block content %}
<div class="container">
    <h2 class="my-4">Products</h2>

    <!-- Filter Card -->
    
    <form method="get" class="mb-3">
        <div class="input-group">
        <div class="col-md-5">
            <input type="text" class="form-control" name="search" 
                    placeholder="Search products..." value="{{ search_query }}">
        </div>
        <div class="col-md-2">
            <select class="form-select" name="category">
                <option value="">All Categories</option>
                {% for category in categories %}
                <option value="{{ category.id }}" 
                        {% if selected_category == category.id|stringformat:"s" %}selected{% endif %}>
                    {{ category.name }}
                </option>
                {% endfor %}
            </select>
        </div>
        <div class="col-md-2">
            <select class="form-select" name="material">
                <option value="">All Materials</option>
                {% for material in material_types %}
                <option value="{{ material.id }}" 
                        {% if selected_material == material.id|stringformat:"s" %}selected{% endif %}>
                    {{ material.name }}
                </option>
                {% endfor %}
            </select>
        </div>
        <div class="col-md-3 d-flex gap-2">
            <button type="submit" class="btn btn-primary">
                <i class="bi bi-funnel"></i> Search
            </button>
            <a href="{% url 'product_list' %}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-counterclockwise"></i> Reset
            </a>
        </div>
        </div>
    </form>
        
    <!-- Products Table -->
    
        
     <!-- Add new Button -->
     <a href="{% url 'add_product' %}" class="btn btn-success mb-3">Add New Job</a>
     <!-- Product Table -->        
    <table class="table table-striped table-bordered">
        <thead class="table-dark" >
            <tr>
                <th>Code</th>
                <th>Product Name</th>
                <th>Material</th>
                <th >Stock</th>
                <th>Avg Purchase Price</th>
                <th >Min Level</th>
                <!-- <th>Unit</th>                             -->
                <th >Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for product in page_obj %}
            <tr class="{% if product.current_stock <= product.min_stock_level %}table-warning{% endif %}">
                <td><strong>{{ product.product_code }}</strong></td>
                <td>
                    {{ product.name }}
                    {% if product.description %}
                    <small class="text-muted d-block">{{ product.description|truncatechars:50 }}</small>
                    {% endif %}
                </td>
                <td>{{ product.material_type.name|default:"-" }}</td>
                <td class="text-center" {% if product.current_stock <= product.min_stock_level %}text-danger fw-bold{% endif %}">
                    {{ product.current_stock }}
                </td>
                <td class="text-center">{{ product.avg_purchase_price }}</td>
                <td class="text-center">{{ product.min_stock_level }}</td>
                <!-- <td>{{ product.get_unit_display }}</td> -->
                <td >
                    <a href="{% url 'edit_product' product.id %}" class="btn btn-sm btn-primary">Edit</a>
                    
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="9" class="text-center py-4">
                    <div class="text-muted">
                        <i class="bi bi-box-seam" style="font-size: 2rem;"></i>
                        <p class="mt-2">No products found</p>
                        <a href="{% url 'add_product' %}" class="btn btn-primary mt-2">
                            Create Your First Product
                        </a>
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
            
            
     <!-- Pagination Controls -->
     <nav>
        <ul class="pagination">
            {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?q={{ query }}&page=1">First</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?q={{ query }}&page={{ page_obj.previous_page_number }}">Previous</a>
                </li>
            {% endif %}

            <li class="page-item active">
                <span class="page-link">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
            </li>

            {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?q={{ query }}&page={{ page_obj.next_page_number }}">Next</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?q={{ query }}&page={{ page_obj.paginator.num_pages }}">Last</a>
                </li>
            {% endif %}
        </ul>
    </nav>
        
    
</div>

<!-- Bootstrap Tooltip Initialization -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    })
})
</script>

<style>
    .table td, .table th {
        vertical-align: middle;
    }
    .badge {
        font-size: 0.85em;
    }
    .btn-group .btn {
        padding: 0.25rem 0.5rem;
    }
</style>
{% endblock %}