{% extends "base.html" %}

{% block content %}

<div class="container-fluid">

    <!-- Header - Fixed Layout with Buttons in Straight Line -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold">
                <i class="bi bi-calculator"></i>
                BOQ & QUOTATION WORKSPACE
            </h2>
            <p class="text-muted mb-0">
                Prepare Bills of Quantities, estimates and quotations.
            </p>
        </div>
        <div class="d-flex gap-2 flex-nowrap">
            <!-- ✅ All buttons in one straight line - no wrapping -->
            <a href="/boq/create-quotation" class="btn btn-success" style="white-space: nowrap;">
                <i class="bi bi-plus-circle"></i> Create Quotation
            </a>
            <a href="/boq/reports" class="btn btn-info" style="white-space: nowrap;">
                <i class="bi bi-bar-chart-line"></i> Reports
            </a>
            <a href="/enquiries" class="btn btn-primary" style="white-space: nowrap;">
                <i class="bi bi-plus-circle"></i> New Quotation From Enquiry
            </a>
        </div>
    </div>

    <!-- KPI Cards -->
    <div class="row g-4 mb-4">

        <div class="col">
            <div class="card shadow-sm">
                <div class="card-body">
                    <small class="text-muted">Draft Quotations</small>
                    <h2 class="text-warning">{{ draft_count }}</h2>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card shadow-sm">
                <div class="card-body">
                    <small class="text-muted">Submitted</small>
                    <h2 class="text-success">{{ submitted_count }}</h2>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card shadow-sm">
                <div class="card-body">
                    <small class="text-muted">Approved</small>
                    <h2 class="text-primary">{{ approved_count }}</h2>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card shadow-sm">
                <div class="card-body">
                    <small class="text-muted">Suspended</small>
                    <h2 class="text-danger">{{ suspend_count }}</h2>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card shadow-sm">
                <div class="card-body">
                    <small class="text-muted">Total Quotations</small>
                    <h2 class="text-dark">{{ total_count }}</h2>
                </div>
            </div>
        </div>

    </div>

    <!-- Recent Quotations -->
    <div class="card shadow-sm">
        <div class="card-header bg-primary text-white">
            <div class="d-flex justify-content-between align-items-center">
                <strong>Recent Quotations</strong>
                <button class="btn btn-light btn-sm" onclick="location.reload()">
                    <i class="bi bi-arrow-clockwise"></i> Refresh
                </button>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Quotation No</th>
                            <th>Enquiry</th>
                            <th>Customer</th>
                            <th>Status</th>
                            <th>Date</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for boq in recent_boqs %}
                        <tr>
                            <td>{{ boq.quotation_number }}</td>
                            <td>
                                {% if boq.enquiry %}
                                    {{ boq.enquiry.enquiry_number }}
                                {% else %}
                                    <span class="text-danger">
                                        <i class="bi bi-exclamation-triangle"></i> Deleted Enquiry
                                    </span>
                                {% endif %}
                            </td>
                            <td>
                                {% if boq.enquiry %}
                                    {{ boq.enquiry.customer.company_name }}
                                {% else %}
                                    <span class="text-danger">
                                        <i class="bi bi-trash"></i> Deleted
                                    </span>
                                {% endif %}
                            </td>
                            <td>
                                {% if boq.status == "Draft" %}
                                    <span class="badge bg-warning text-dark">Draft</span>
                                {% elif boq.status == "Submitted" %}
                                    <span class="badge bg-success">Submitted</span>
                                {% elif boq.status == "Approved" %}
                                    <span class="badge bg-primary">Approved</span>
                                {% elif boq.status == "Suspended" %}
                                    <span class="badge bg-danger">Suspended</span>
                                {% else %}
                                    <span class="badge bg-secondary">{{ boq.status }}</span>
                                {% endif %}
                            </td>
                            <td>{{ boq.created_at.strftime("%d %b %Y") }}</td>
                            <td>
                                <a href="/boq/view/{{ boq.id }}" class="btn btn-outline-primary btn-sm">
                                    <i class="bi bi-eye"></i> Open
                                </a>
                                <!-- ✅ DELETE BUTTON - ADMIN ONLY -->
                                {% if current_user.role == "Admin" %}
                                <button class="btn btn-outline-danger btn-sm" 
                                        onclick="confirmDelete('/boq/delete/{{ boq.id }}', 'Quotation: {{ boq.quotation_number }}')">
                                    <i class="bi bi-trash"></i>
                                </button>
                                {% endif %}
                            </td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="6" class="text-center text-muted py-4">
                                <i class="bi bi-inbox fs-1 d-block"></i>
                                No quotations found.
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Planned Features -->
    <div class="row mt-4">
        <div class="col-lg-6">
            <div class="card shadow-sm">
                <div class="card-header bg-secondary text-white">
                    Pending Approvals
                </div>
                <div class="card-body">
                    <p class="text-muted">
                        This section will display quotations awaiting approval by management.
                    </p>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card shadow-sm">
                <div class="card-header bg-dark text-white">
                    Engineer Activity
                </div>
                <div class="card-body">
                    <p class="text-muted">
                        Recent BOQ updates, revisions and quotation activity will appear here.
                    </p>
                </div>
            </div>
        </div>
    </div>

</div>

{% endblock %}