{% extends "base.html" %}

{% block content %}

<div class="container-fluid">

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">

        <div>

            <h2 class="fw-bold">
                <i class="bi bi-bar-chart-line text-primary"></i>
                BOQ Reports
            </h2>

            <p class="text-muted mb-0">
                Track quotations, engineer activity, and performance metrics
            </p>

        </div>

        <div>

            <a href="/boq" class="btn btn-secondary">

                <i class="bi bi-arrow-left"></i>

                Back to BOQ Workspace

            </a>

        </div>

    </div>

    <!-- Filter Bar -->
    <div class="card shadow-sm mb-4">

        <div class="card-header bg-primary text-white">

            <i class="bi bi-funnel"></i>

            Filters & Export

        </div>

        <div class="card-body">

            <form method="get" action="/boq/reports" class="row g-3">

                <div class="col-md-3">

                    <label class="form-label">Period</label>

                    <select class="form-select" name="period">

                        <option value="day" {% if period == 'day' %}selected{% endif %}>Today</option>

                        <option value="week" {% if period == 'week' %}selected{% endif %}>This Week</option>

                        <option value="month" {% if period == 'month' %}selected{% endif %}>This Month</option>

                    </select>

                </div>

                <div class="col-md-3">

                    <label class="form-label">Status</label>

                    <select class="form-select" name="status">

                        <option value="">All Statuses</option>

                        {% for s in statuses %}

                        <option value="{{ s }}" {% if status == s %}selected{% endif %}>{{ s }}</option>

                        {% endfor %}

                    </select>

                </div>

                <div class="col-md-3">

                    <label class="form-label">Engineer</label>

                    <select class="form-select" name="engineer">

                        <option value="">All Engineers</option>

                        {% for eng in engineers %}

                        <option value="{{ eng.username }}" {% if engineer_filter == eng.username %}selected{% endif %}>
                            {{ eng.full_name or eng.username }}
                        </option>

                        {% endfor %}

                    </select>

                </div>

                <div class="col-md-3">

                    <label class="form-label">Search</label>

                    <input type="text" class="form-control" name="search" placeholder="Quotation, Enquiry, Customer..." value="{{ search or '' }}">

                </div>

                <div class="col-12">

                    <button type="submit" class="btn btn-primary">

                        <i class="bi bi-search"></i> Apply Filters

                    </button>

                    <a href="/boq/reports" class="btn btn-secondary">

                        <i class="bi bi-arrow-clockwise"></i> Reset

                    </a>

                    <a href="/boq/reports/export-pdf?period={{ period }}&status={{ status }}&engineer={{ engineer_filter }}" class="btn btn-danger">

                        <i class="bi bi-filetype-pdf"></i> Export PDF

                    </a>

                    <a href="/boq/reports/export-csv?period={{ period }}&status={{ status }}&engineer={{ engineer_filter }}" class="btn btn-success">

                        <i class="bi bi-filetype-csv"></i> Export CSV

                    </a>

                </div>

            </form>

        </div>

    </div>

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

        <div class="col-md-3">

            <div class="card shadow-sm border-0 bg-primary text-white">

                <div class="card-body">

                    <small class="text-white-50">Total Quotations</small>

                    <h2 class="text-white">{{ total_count }}</h2>

                    <small>Value: {{ "%.2f"|format(total_value) }}</small>

                </div>

            </div>

        </div>

        <div class="col-md-3">

            <div class="card shadow-sm border-0 bg-warning text-dark">

                <div class="card-body">

                    <small class="text-dark-50">Draft</small>

                    <h2>{{ draft_count }}</h2>

                </div>

            </div>

        </div>

        <div class="col-md-3">

            <div class="card shadow-sm border-0 bg-info text-white">

                <div class="card-body">

                    <small class="text-white-50">Submitted</small>

                    <h2 class="text-white">{{ submitted_count }}</h2>

                </div>

            </div>

        </div>

        <div class="col-md-3">

            <div class="card shadow-sm border-0 bg-success text-white">

                <div class="card-body">

                    <small class="text-white-50">Approved</small>

                    <h2 class="text-white">{{ approved_count }}</h2>

                </div>

            </div>

        </div>

    </div>

    <!-- Engineer Activity -->
    <div class="card shadow-sm mb-4">

        <div class="card-header bg-dark text-white">

            <i class="bi bi-people"></i>

            Engineer Activity

        </div>

        <div class="card-body p-0">

            <div class="table-responsive">

                <table class="table table-hover mb-0">

                    <thead class="table-light">

                        <tr>

                            <th>Engineer</th>

                            <th>Quotations</th>

                            <th>Total Value</th>

                            <th>Average Value</th>

                        </tr>

                    </thead>

                    <tbody>

                        {% for engineer, data in engineer_activity.items() %}

                        <tr>

                            <td><strong>{{ engineer }}</strong></td>

                            <td>{{ data.count }}</td>

                            <td>{{ "%.2f"|format(data.total_value) }}</td>

                            <td>{{ "%.2f"|format(data.total_value / data.count if data.count > 0 else 0) }}</td>

                        </tr>

                        {% else %}

                        <tr>

                            <td colspan="4" class="text-center text-muted py-3">

                                No activity found for the selected period

                            </td>

                        </tr>

                        {% endfor %}

                    </tbody>

                </table>

            </div>

        </div>

    </div>

    <!-- Quotations List -->
    <div class="card shadow-sm">

        <div class="card-header bg-primary text-white d-flex justify-content-between">

            <span>

                <i class="bi bi-file-earmark-text"></i>

                Quotations ({{ total_count }})

            </span>

            <span class="badge bg-light text-dark">Period: {{ period_label }}</span>

        </div>

        <div class="card-body p-0">

            <div class="table-responsive">

                <table class="table table-hover align-middle mb-0">

                    <thead class="table-light">

                        <tr>

                            <th>Quotation</th>

                            <th>Enquiry</th>

                            <th>Customer</th>

                            <th>Engineer</th>

                            <th>Status</th>

                            <th>Value</th>

                            <th>Created</th>

                            <th></th>

                        </tr>

                    </thead>

                    <tbody>

                        {% for boq in boqs %}

                        <tr>

                            <td><code>{{ boq.quotation_number }}</code></td>

                            <td>{{ boq.enquiry.enquiry_number }}</td>

                            <td>{{ boq.enquiry.customer.company_name|truncate(20) }}</td>

                            <td>{{ boq.enquiry.assigned_to or "-" }}</td>

                            <td>

                                <span class="badge bg-{% if boq.status == 'Draft' %}warning{% elif boq.status == 'Submitted' %}info{% elif boq.status == 'Approved' %}success{% else %}secondary{% endif %}">

                                    {{ boq.status }}

                                </span>

                            </td>

                            <td><strong>{{ "%.2f"|format(boq.grand_total) }}</strong></td>

                            <td>{{ boq.created_at.strftime('%d %b %Y') }}</td>

                            <td>

                                <a href="/boq/view/{{ boq.id }}" class="btn btn-sm btn-outline-primary">

                                    <i class="bi bi-eye"></i>

                                </a>

                            </td>

                        </tr>

                        {% else %}

                        <tr>

                            <td colspan="8" class="text-center text-muted py-4">

                                <i class="bi bi-inbox fs-1 d-block mb-2"></i>

                                No quotations found matching the criteria

                            </td>

                        </tr>

                        {% endfor %}

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>

{% endblock %}