{% extends 'base.html' %}

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

{% block content %}
<div class="container-fluid">
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Quotations</h1>
        <a href="{% url 'quotations:quotation_create' %}" class="btn btn-primary">
            <i class="fas fa-plus"></i> New Quotation
        </a>
    </div>

    <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex justify-content-between align-items-center">
            <h6 class="m-0 font-weight-bold text-primary">All Quotations</h6>
            <div class="dropdown no-arrow">
                <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
                    <a class="dropdown-item" href="#">Export to Excel</a>
                    <a class="dropdown-item" href="#">Print List</a>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>Quote #</th>
                            <th>Customer</th>
                            <th>Date</th>
                            <th>Expiry Date</th>
                            <th>Status</th>
                            <th>Total Amount</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for quotation in object_list %}
                        <tr>
                            <td>{{ quotation.quote_number }}</td>
                            <td>{{ quotation.customer.name|default:"Walk-in Customer" }}</td>
                            <td>{{ quotation.issue_date|date:"M d, Y" }}</td>
                            <td>{{ quotation.expiry_date|date:"M d, Y"|default:"-" }}</td>
                            <td>
                                <span class="badge 
                                    {% if quotation.status == 'draft' %}badge-secondary
                                    {% elif quotation.status == 'sent' %}badge-info
                                    {% elif quotation.status == 'accepted' %}badge-success
                                    {% elif quotation.status == 'rejected' %}badge-danger
                                    {% elif quotation.status == 'expired' %}badge-warning
                                    {% else %}badge-secondary{% endif %}">
                                    {{ quotation.get_status_display }}
                                </span>
                            </td>
                            <td>KSh {{ quotation.total_amount|floatformat:2 }}</td>
                            <td>
                                <a href="{% url 'quotations:quotation_detail' quotation.pk %}" class="btn btn-sm btn-info" title="View">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{% url 'quotations:quotation_edit' quotation.pk %}" class="btn btn-sm btn-primary" title="Edit">
                                    <i class="fas fa-edit"></i>
                                </a>
                                {% if quotation.status == 'draft' or quotation.status == 'sent' %}
                                <a href="{% url 'quotations:quotation_status' quotation.pk %}" class="btn btn-sm btn-success" title="Change Status">
                                    <i class="fas fa-exchange-alt"></i>
                                </a>
                                {% endif %}
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="7" class="text-center">No quotations found.</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            
            {% if is_paginated %}
            <div class="d-flex justify-content-between align-items-center mt-4">
                <div class="text-muted">
                    Showing page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
                </div>
                <nav aria-label="Page navigation">
                    <ul class="pagination mb-0">
                        {% if page_obj.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        {% endif %}
                        
                        {% for num in page_obj.paginator.page_range %}
                            {% if page_obj.number == num %}
                            <li class="page-item active">
                                <a class="page-link" href="#">{{ num }}</a>
                            </li>
                            {% else %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ num }}">{{ 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 }}" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}