{% 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-pencil-square text-warning"></i>
                Edit Quotation
            </h2>

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

        </div>

        <div>

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

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

                Cancel

            </a>

        </div>

    </div>

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

        <div class="row">

            <!-- Main Edit Area -->
            <div class="col-lg-8">

                <!-- Currency & Settings -->
                <div class="card shadow-sm mb-4">

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

                        <i class="bi bi-currency-dollar"></i> Currency & Settings

                    </div>

                    <div class="card-body">

                        <div class="row">

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

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

                                <select class="form-select" name="currency" id="currency">

                                    <option value="KES" {% if boq.currency == 'KES' %}selected{% endif %}>🇰🇪 KES</option>

                                    <option value="USD" {% if boq.currency == 'USD' %}selected{% endif %}>🇺🇸 USD</option>

                                    <option value="ZAR" {% if boq.currency == 'ZAR' %}selected{% endif %}>🇿🇦 ZAR</option>

                                    <option value="EUR" {% if boq.currency == 'EUR' %}selected{% endif %}>🇪🇺 EUR</option>

                                    <option value="GBP" {% if boq.currency == 'GBP' %}selected{% endif %}>🇬🇧 GBP</option>

                                </select>

                            </div>

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

                                <label class="form-label">Exchange Rate</label>

                                <input type="number" step="0.01" class="form-control" name="exchange_rate" value="{{ boq.exchange_rate }}">

                            </div>

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

                                <label class="form-label">VAT %</label>

                                <input type="number" step="0.01" class="form-control" name="vat_percent" value="{{ boq.vat_percent }}" oninput="calculateTotals()">

                            </div>

                        </div>

                    </div>

                </div>

                <!-- ✅ NEW: Assign Engineer Section -->
                <div class="card shadow-sm mb-4">

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

                        <i class="bi bi-person-badge"></i>

                        Assign Engineer

                    </div>

                    <div class="card-body">

                        <div class="mb-3">

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

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

                                <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">Select the engineer responsible for this quotation</small>

                        </div>

                    </div>

                </div>

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

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

                        <span><i class="bi bi-list-check"></i> BOQ Items</span>

                        <button type="button" class="btn btn-primary btn-sm" onclick="addItem()">

                            <i class="bi bi-plus-circle"></i> Add Item

                        </button>

                    </div>

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

                        <div class="table-responsive">

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

                                <thead class="table-light">

                                    <tr>

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

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

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

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

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

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

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

                                    </tr>

                                </thead>

                                <tbody id="boqBody">

                                    {% for item in boq.items %}

                                    <tr>

                                        <td class="text-center">{{ item.line_number }}</td>

                                        <td>

                                            <input type="text" class="form-control form-control-sm desc-input" name="description[]" value="{{ item.description }}" required>

                                        </td>

                                        <td>

                                            <input type="number" step="0.01" class="form-control form-control-sm qty-input" name="qty[]" value="{{ item.qty }}" min="0" oninput="calculateRowAmount(this.closest('tr')); calculateTotals();">

                                        </td>

                                        <td>

                                            <input type="text" class="form-control form-control-sm" name="unit[]" value="{{ item.unit }}">

                                        </td>

                                        <td>

                                            <input type="number" step="0.01" class="form-control form-control-sm rate-input" name="rate[]" value="{{ item.rate }}" min="0" oninput="calculateRowAmount(this.closest('tr')); calculateTotals();">

                                        </td>

                                        <td>

                                            <input type="text" class="form-control form-control-sm amount-input" readonly value="{{ "%.2f"|format(item.amount) }}">

                                        </td>

                                        <td class="text-center">

                                            <button type="button" class="btn btn-danger btn-sm" onclick="removeRow(this)">

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

                                            </button>

                                        </td>

                                    </tr>

                                    {% endfor %}

                                </tbody>

                            </table>

                        </div>

                    </div>

                </div>

            </div>

            <!-- Right Panel -->
            <div class="col-lg-4">

                <!-- Additional Costs -->
                <div class="card shadow-sm mb-4">

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

                        <i class="bi bi-plus-circle"></i> Additional Costs

                    </div>

                    <div class="card-body">

                        <div class="mb-3">

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

                            <input type="number" step="0.01" class="form-control" name="labour" id="labour" oninput="calculateTotals()" value="{{ boq.labour_total }}">

                        </div>

                        <div class="mb-3">

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

                            <input type="number" step="0.01" class="form-control" name="consumables" id="consumables" oninput="calculateTotals()" value="{{ boq.consumables_total }}">

                        </div>

                        <div class="mb-3">

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

                            <input type="number" step="0.01" class="form-control" name="equipment" id="equipment" oninput="calculateTotals()" value="{{ boq.equipment_total }}">

                        </div>

                        <div class="mb-3">

                            <label class="form-label">Other Charges</label>

                            <input type="number" step="0.01" class="form-control" name="other" id="other" oninput="calculateTotals()" value="{{ boq.other_total }}">

                        </div>

                    </div>

                </div>

                <!-- Cost Summary -->
                <div class="card shadow-sm mb-4">

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

                        <i class="bi bi-calculator"></i> Cost Summary

                    </div>

                    <div class="card-body">

                        <table class="table table-sm">

                            <tr>

                                <td>Materials</td>

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

                            </tr>

                            <tr>

                                <td>Labour</td>

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

                            </tr>

                            <tr>

                                <td>Consumables</td>

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

                            </tr>

                            <tr>

                                <td>Equipment</td>

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

                            </tr>

                            <tr>

                                <td>Other</td>

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

                            </tr>

                            <tr class="table-light">

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

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

                            </tr>

                            <tr>

                                <td>VAT (<span id="vatPercentDisplay">{{ boq.vat_percent }}</span>%)</td>

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

                            </tr>

                            <tr class="table-success">

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

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

                            </tr>

                        </table>

                    </div>

                </div>

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

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

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

                    </div>

                    <div class="card-body">

                        <textarea class="form-control" name="engineer_comments" rows="4">{{ boq.engineer_comments or "" }}</textarea>

                    </div>

                </div>

                <!-- Save Button -->
                <div class="card shadow-sm">

                    <div class="card-body">

                        <div class="d-grid gap-2">

                            <button type="submit" class="btn btn-success btn-lg">

                                <i class="bi bi-save"></i> Update Quotation

                            </button>

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

                                <i class="bi bi-x-circle"></i> Cancel

                            </a>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </form>

</div>

<script>

    let itemCount = parseInt("{{ boq.items|length }}") || 0;

    // ==========================================================
    // Add Item
    // ==========================================================

    function addItem() {

        const tbody = document.getElementById('boqBody');

        const row = document.createElement('tr');

        itemCount++;

        row.innerHTML = `

            <td class="text-center">${itemCount}</td>

            <td>

                <input type="text" class="form-control form-control-sm desc-input" name="description[]" placeholder="Enter description..." required>

            </td>

            <td>

                <input type="number" step="0.01" class="form-control form-control-sm qty-input" name="qty[]" value="1" min="0" oninput="calculateRowAmount(this.closest('tr')); calculateTotals();">

            </td>

            <td>

                <input type="text" class="form-control form-control-sm" name="unit[]" placeholder="Unit">

            </td>

            <td>

                <input type="number" step="0.01" class="form-control form-control-sm rate-input" name="rate[]" value="0" min="0" oninput="calculateRowAmount(this.closest('tr')); calculateTotals();">

            </td>

            <td>

                <input type="text" class="form-control form-control-sm amount-input" readonly value="0.00">

            </td>

            <td class="text-center">

                <button type="button" class="btn btn-danger btn-sm" onclick="removeRow(this)">

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

                </button>

            </td>

        `;

        tbody.appendChild(row);

        calculateRowAmount(row);

        calculateTotals();

    }

    // ==========================================================
    // Remove Row
    // ==========================================================

    function removeRow(button) {

        button.closest('tr').remove();

        renumberRows();

        calculateTotals();

    }

    // ==========================================================
    // Renumber Rows
    // ==========================================================

    function renumberRows() {

        const rows = document.querySelectorAll('#boqBody tr');

        itemCount = 0;

        rows.forEach(row => {

            itemCount++;

            row.querySelector('td:first-child').textContent = itemCount;

        });

    }

    // ==========================================================
    // Calculate Row Amount
    // ==========================================================

    function calculateRowAmount(row) {

        const qty = parseFloat(row.querySelector('.qty-input').value) || 0;

        const rate = parseFloat(row.querySelector('.rate-input').value) || 0;

        const amount = qty * rate;

        row.querySelector('.amount-input').value = amount.toFixed(2);

        return amount;

    }

    // ==========================================================
    // Calculate Totals
    // ==========================================================

    function calculateTotals() {

        let materialsTotal = 0;

        const rows = document.querySelectorAll('#boqBody tr');

        rows.forEach(row => {

            const amount = parseFloat(row.querySelector('.amount-input').value) || 0;

            materialsTotal += amount;

        });

        const labour = parseFloat(document.getElementById('labour').value) || 0;

        const consumables = parseFloat(document.getElementById('consumables').value) || 0;

        const equipment = parseFloat(document.getElementById('equipment').value) || 0;

        const other = parseFloat(document.getElementById('other').value) || 0;

        const subtotal = materialsTotal + labour + consumables + equipment + other;

        const vatPercent = parseFloat(document.querySelector('[name="vat_percent"]').value) || 0;

        const vatAmount = subtotal * (vatPercent / 100);

        const grandTotal = subtotal + vatAmount;

        document.getElementById('summaryMaterials').textContent = materialsTotal.toFixed(2);

        document.getElementById('summaryLabour').textContent = labour.toFixed(2);

        document.getElementById('summaryConsumables').textContent = consumables.toFixed(2);

        document.getElementById('summaryEquipment').textContent = equipment.toFixed(2);

        document.getElementById('summaryOther').textContent = other.toFixed(2);

        document.getElementById('summarySubtotal').textContent = subtotal.toFixed(2);

        document.getElementById('summaryVat').textContent = vatAmount.toFixed(2);

        document.getElementById('summaryGrandTotal').textContent = grandTotal.toFixed(2);

        document.getElementById('vatPercentDisplay').textContent = vatPercent;

    }

    // Auto-calculate on load
    document.addEventListener('DOMContentLoaded', function() {

        calculateTotals();

    });

</script>

{% endblock %}