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

{% block title %}Quotations Report{% endblock %}

{% block report_content %}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Quotations 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_quotations' %}?{{ request.GET.urlencode }}">Export as CSV</a></li>
                <li><a class="dropdown-item" href="{% url 'reports:export_quotations_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-3">
                <div class="card bg-light">
                    <div class="card-body text-center">
                        <h6 class="card-title text-muted mb-1">Total Quotations</h6>
                        <h3 class="mb-0">{{ quotations.paginator.count }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-light">
                    <div class="card-body text-center">
                        <h6 class="card-title text-muted mb-1">Total Amount</h6>
                        <h3 class="mb-0">Ksh {{ total_amount|intcomma }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card bg-light">
                    <div class="card-body">
                        <h6 class="card-title text-muted mb-2">Status Overview</h6>
                        <div class="row">
                            {% for status in status_counts %}
                            <div class="col-4">
                                <div class="text-center">
                                    <div class="h5 mb-1">{{ status.status|title }}</div>
                                    <div class="text-muted small">{{ status.count }} quotations</div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead class="table-light">
                    <tr>
                        <th>Date</th>
                        <th>Quotation #</th>
                        <th>Customer</th>
                        <th>Items</th>
                        <th class="text-end">Total Amount</th>
                        <th>Status</th>
                        <th>Created By</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for quote in quotations %}
                    <tr>
                        <td>{{ quote.created_at|date:"M d, Y" }}</td>
                        <td>{{ quote.quotation_number }}</td>
                        <td>{{ quote.customer.name|default:"Walk-in Customer" }}</td>
                        <td>{{ quote.items.count }}</td>
                        <td class="text-end">Ksh {{ quote.total_amount|intcomma }}</td>
                        <td>
                            <span class="badge bg-{% if quote.status == 'accepted' %}success{% elif quote.status == 'pending' %}warning{% elif quote.status == 'rejected' %}danger{% else %}secondary{% endif %}">
                                {{ quote.get_status_display }}
                            </span>
                        </td>
                        <td>{{ quote.created_by.get_full_name|default:quote.created_by.username }}</td>
                        <td>
                            <a href="{% url 'quotations:quotation_detail' quote.id %}" class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-eye"></i> View
                            </a>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="8" class="text-center">No quotations found for the selected period.</td>
                    </tr>
                    {% endfor %}
                </tbody>
                <tfoot class="table-light">
                    <tr>
                        <th colspan="4" class="text-end">Total:</th>
                        <th class="text-end">Ksh {{ total_amount|intcomma }}</th>
                        <th colspan="3"></th>
                    </tr>
                </tfoot>
            </table>
        </div>

        {% if quotations.has_other_pages %}
        <nav aria-label="Quotations pagination" class="mt-4">
            <ul class="pagination justify-content-center">
                {% if quotations.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ quotations.previous_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}" 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 quotations.paginator.page_range %}
                {% if quotations.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 }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">{{ i }}</a>
                </li>
                {% endif %}
                {% endfor %}

                {% if quotations.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ quotations.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}" 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 quotations report here
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize any specific functionality for this report
        console.log('Quotations report initialized');
    });
</script>
{% endblock %}