{% 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-file-earmark-text text-primary"></i>
                QUOTATION DETAILS
            </h2>

            <p class="text-muted">
                {{ boq.quotation_number }} - {{ boq.enquiry.enquiry_number }}
            </p>

        </div>

        <div class="d-flex gap-2 flex-wrap">

            <a href="/boq/edit/{{ boq.id }}" class="btn btn-warning">

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

                Edit

            </a>

            <a href="/boq/print/{{ boq.id }}" target="_blank" class="btn btn-info">

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

                Preview

            </a>

            <a href="/boq/download-pdf/{{ boq.id }}" class="btn btn-danger">

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

                PDF

            </a>

            <a href="/boq/download-word/{{ boq.id }}" class="btn btn-primary">

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

                Word

            </a>

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

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

                Back

            </a>

        </div>

    </div>

    <!-- Quotation Header -->
    <div class="card shadow-sm mb-4">

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

            <div class="row">

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

                    <h5 class="mb-0">{{ boq.quotation_number }}</h5>

                </div>

                <div class="col-md-6 text-end">

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

                        {{ boq.status }}

                    </span>

                </div>

            </div>

        </div>

        <div class="card-body">

            <div class="row">

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

                    <small class="text-muted">Customer</small>

                    <p><strong>{{ boq.enquiry.customer.company_name }}</strong></p>

                </div>

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

                    <small class="text-muted">Enquiry</small>

                    <p><strong>{{ boq.enquiry.enquiry_number }}</strong></p>

                </div>

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

                    <small class="text-muted">Currency</small>

                    <p><strong>{{ boq.currency }}</strong></p>

                </div>

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

                    <small class="text-muted">Date</small>

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

                </div>

            </div>

        </div>

    </div>

    <!-- BOQ Items -->
    <div class="card shadow-sm mb-4">

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

            <h5 class="mb-0">BOQ Items</h5>

        </div>

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

            <div class="table-responsive">

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

                    <thead class="table-light">

                        <tr>

                            <th width="5%">#</th>

                            <th width="40%">Description</th>

                            <th width="10%">Qty</th>

                            <th width="10%">Unit</th>

                            <th width="15%">Rate</th>

                            <th width="20%">Amount</th>

                        </tr>

                    </thead>

                    <tbody>

                    {% for item in boq.items %}

                        <tr>

                            <td>{{ item.line_number }}</td>

                            <td>{{ item.description }}</td>

                            <td>{{ item.qty }}</td>

                            <td>{{ item.unit or "-" }}</td>

                            <td>{{ "%.2f"|format(item.rate) }}</td>

                            <td class="fw-bold">{{ "%.2f"|format(item.amount) }}</td>

                        </tr>

                    {% endfor %}

                    </tbody>

                </table>

            </div>

        </div>

    </div>

    <!-- Cost Summary -->
    <div class="row">

        <div class="col-lg-8">

            <!-- Engineer Comments -->
            <div class="card shadow-sm">

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

                    <h5 class="mb-0"><i class="bi bi-chat-left-text"></i> Engineer Justification</h5>

                </div>

                <div class="card-body">

                    <p style="white-space: pre-wrap;">{{ boq.engineer_comments or "No justification provided." }}</p>

                </div>

            </div>

        </div>

        <div class="col-lg-4">

            <div class="card shadow-sm">

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

                    <h5 class="mb-0">Cost Summary</h5>

                </div>

                <div class="card-body">

                    <table class="table table-sm">

                        <tr>

                            <td>Materials</td>

                            <td class="text-end">{{ "%.2f"|format(boq.materials_total) }}</td>

                        </tr>

                        <tr>

                            <td>Labour</td>

                            <td class="text-end">{{ "%.2f"|format(boq.labour_total) }}</td>

                        </tr>

                        <tr>

                            <td>Consumables</td>

                            <td class="text-end">{{ "%.2f"|format(boq.consumables_total) }}</td>

                        </tr>

                        <tr>

                            <td>Equipment</td>

                            <td class="text-end">{{ "%.2f"|format(boq.equipment_total) }}</td>

                        </tr>

                        <tr>

                            <td>Other</td>

                            <td class="text-end">{{ "%.2f"|format(boq.other_total) }}</td>

                        </tr>

                        <tr class="table-light">

                            <td><strong>Subtotal</strong></td>

                            <td class="text-end"><strong>{{ "%.2f"|format(boq.subtotal) }}</strong></td>

                        </tr>

                        <tr>

                            <td>VAT ({{ boq.vat_percent }}%)</td>

                            <td class="text-end">{{ "%.2f"|format(boq.subtotal * boq.vat_percent / 100) }}</td>

                        </tr>

                        <tr class="table-success">

                            <td><strong>Grand Total</strong></td>

                            <td class="text-end"><strong class="text-success fs-4">{{ "%.2f"|format(boq.grand_total) }}</strong></td>

                        </tr>

                    </table>

                </div>

            </div>

            <!-- Update Status -->
            <div class="card shadow-sm mt-3">

                <div class="card-header bg-warning">

                    <h5 class="mb-0"><i class="bi bi-arrow-right-circle"></i> Update Status</h5>

                </div>

                <div class="card-body">

                    <form method="POST" action="/boq/status/{{ boq.id }}">

                        <div class="row">

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

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

                                    <option value="Draft" {% if boq.status=="Draft" %}selected{% endif %}>Draft</option>

                                    <option value="Submitted" {% if boq.status=="Submitted" %}selected{% endif %}>Submitted</option>

                                    <option value="Approved" {% if boq.status=="Approved" %}selected{% endif %}>Approved</option>

                                    <option value="Suspended" {% if boq.status=="Suspended" %}selected{% endif %}>Suspended</option>

                                </select>

                            </div>

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

                                <button type="submit" class="btn btn-success w-100">Update</button>

                            </div>

                        </div>

                    </form>

                </div>

            </div>

            <!-- ✅ NEW: Reassign Quotation - Admin Only -->
            {% if current_user.role == "Admin" %}

            <div class="card shadow-sm mt-3 border-danger">

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

                    <h5 class="mb-0"><i class="bi bi-arrow-repeat"></i> Reassign Quotation</h5>

                </div>

                <div class="card-body">

                    <form method="POST" action="/boq/reassign/{{ boq.id }}">

                        <div class="row">

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

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

                                    <option value="">Select Engineer...</option>

                                    {% for engineer in engineers %}

                                    <option value="{{ engineer.username }}" {% if boq.enquiry.assigned_to == engineer.username %}selected{% endif %}>

                                        {{ engineer.full_name or engineer.username }} ({{ engineer.role }})

                                    </option>

                                    {% endfor %}

                                </select>

                                <small class="text-muted">Current: <strong>{{ boq.enquiry.assigned_to or "Unassigned" }}</strong></small>

                            </div>

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

                                <button type="submit" class="btn btn-danger w-100">

                                    <i class="bi bi-arrow-repeat"></i> Reassign

                                </button>

                            </div>

                        </div>

                    </form>

                </div>

            </div>

            {% endif %}

        </div>

    </div>

</div>

{% endblock %}