{% extends 'reports/base_report.html' %}
{% load humanize %}

{% block title %}Suppliers Report{% endblock %}

{% block report_content %}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Suppliers Summary</h5>
        <div class="dropdown">
            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" id="exportDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="fas fa-download"></i> Export
            </button>
            <ul class="dropdown-menu" aria-labelledby="exportDropdown">
                <li><a class="dropdown-item" href="{% url 'reports:export_suppliers' %}?{{ request.GET.urlencode }}">Export as CSV</a></li>
                <li><a class="dropdown-item" href="{% url 'reports:export_suppliers_pdf' %}?{{ request.GET.urlencode }}">Export as PDF</a></li>
            </ul>
        </div>
    </div>
    <div class="card-body">
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="card bg-light">
                    <div class="card-body text-center">
                        <h6 class="card-title text-muted mb-1">Total Suppliers</h6>
                        <h3 class="mb-0">{{ total_suppliers }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card bg-light">
                    <div class="card-body text-center">
                        <h6 class="card-title text-muted mb-1">Active Suppliers</h6>
                        <h3 class="mb-0">{{ active_suppliers }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card bg-light">
                    <div class="card-body text-center">
                        <h6 class="card-title text-muted mb-1">Inactive Suppliers</h6>
                        <h3 class="mb-0">{{ total_suppliers|subtract:active_suppliers }}</h3>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-12">
                <form method="get" class="mb-4">
                    <div class="input-group">
                        <input type="text" name="search" class="form-control" placeholder="Search suppliers..." value="{{ search_query|default:'' }}">
                        <button class="btn btn-primary" type="submit">
                            <i class="fas fa-search"></i> Search
                        </button>
                        {% if search_query %}
                        <a href="{% url 'reports:suppliers' %}" class="btn btn-outline-secondary">
                            <i class="fas fa-times"></i> Clear
                        </a>
                        {% endif %}
                    </div>
                </form>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead class="table-light">
                    <tr>
                        <th>Supplier Name</th>
                        <th>Contact Person</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Total Purchases</th>
                        <th>Total Spent</th>
                        <th>Last Purchase</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for supplier in suppliers %}
                    <tr>
                        <td>{{ supplier.name }}</td>
                        <td>{{ supplier.contact_person|default:"-" }}</td>
                        <td>{{ supplier.email|default:"-" }}</td>
                        <td>{{ supplier.phone|default:"-" }}</td>
                        <td>{{ supplier.purchase_count|default:0 }}</td>
                        <td>Ksh {{ supplier.total_purchased|default:0|intcomma }}</td>
                        <td>{{ supplier.last_purchase_date|date:"M d, Y"|default:"No purchases" }}</td>
                        <td>
                            {% if supplier.is_active %}
                            <span class="badge bg-success">Active</span>
                            {% else %}
                            <span class="badge bg-secondary">Inactive</span>
                            {% endif %}
                        </td>
                        <td>
                            <a href="{% url 'suppliers:supplier_detail' supplier.id %}" class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-eye"></i> View
                            </a>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="9" class="text-center">No suppliers found.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {% if suppliers.has_other_pages %}
        <nav aria-label="Suppliers pagination" class="mt-4">
            <ul class="pagination justify-content-center">
                {% if suppliers.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ suppliers.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <span class="page-link" aria-hidden="true">&laquo;</span>
                </li>
                {% endif %}

                {% for i in suppliers.paginator.page_range %}
                {% if suppliers.number == i %}
                <li class="page-item active"><span class="page-link">{{ i }}</span></li>
                {% else %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ i }}{% if search_query %}&search={{ search_query }}{% endif %}">{{ i }}</a>
                </li>
                {% endif %}
                {% endfor %}

                {% if suppliers.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ suppliers.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <span class="page-link" aria-hidden="true">&raquo;</span>
                </li>
                {% endif %}
            </ul>
        </nav>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
{{ block.super }}
<script>
    // Add any specific JavaScript for the suppliers report here
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize any specific functionality for this report
        console.log('Suppliers report initialized');
    });
</script>
{% endblock %}