{% 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-rulers text-primary"></i>
                BOQ Builder
            </h2>

            <p class="text-muted mb-0">
                {{ enquiry.enquiry_number }} - {{ enquiry.subject }}
            </p>

        </div>

        <div>

            <a href="/enquiries/{{ enquiry.id }}" class="btn btn-secondary">

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

                Back to Enquiry

            </a>

        </div>

    </div>

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

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

            <span><i class="bi bi-info-circle"></i> Enquiry Summary</span>

            <span class="badge bg-light text-dark">{{ enquiry.customer.company_name }}</span>

        </div>

        <div class="card-body">

            <div class="row">

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

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

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

                </div>

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

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

                    <p><strong>{{ enquiry.subject }}</strong></p>

                </div>

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

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

                    <p><span class="badge bg-{% if enquiry.priority == 'Urgent' %}danger{% elif enquiry.priority == 'High' %}warning{% else %}secondary{% endif %}">{{ enquiry.priority }}</span></p>

                </div>

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

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

                    <p><span class="badge bg-primary">{{ enquiry.status }}</span></p>

                </div>

            </div>

        </div>

    </div>

    <!-- BOQ Form -->
    <form id="boqForm" method="POST" action="/boq/save/{{ enquiry.id }}">

        <div class="row">

            <!-- Main BOQ Builder -->
            <div class="col-lg-8">

                <!-- Currency & Exchange -->
                <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">🇰🇪 KES - Kenyan Shilling</option>

                                    <option value="USD" selected>🇺🇸 USD - US Dollar</option>

                                    <option value="ZAR">🇿🇦 ZAR - South African Rand</option>

                                    <option value="EUR">🇪🇺 EUR - Euro</option>

                                    <option value="GBP">🇬🇧 GBP - British Pound</option>

                                    <option value="BWP">🇧🇼 BWP - Botswana Pula</option>

                                    <option value="UGX">🇺🇬 UGX - Uganda Shilling</option>

                                    <option value="TZS">🇹🇿 TZS - Tanzania Shilling</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="1.00">

                            </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="15">

                            </div>

                        </div>

                    </div>

                </div>

                <!-- Material Library Search -->
                <div class="card shadow-sm mb-4">

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

                        <span><i class="bi bi-search"></i> Material Library</span>

                        <button type="button" class="btn btn-light btn-sm" onclick="clearSearch()">

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

                        </button>

                    </div>

                    <div class="card-body">

                        <div class="input-group">

                            <span class="input-group-text"><i class="bi bi-search"></i></span>

                            <input type="text" id="materialSearch" class="form-control" placeholder="Search materials by name, code, or category..."

                                   onkeyup="searchMaterials(this.value)">

                            <button class="btn btn-outline-secondary" type="button" onclick="searchMaterials(document.getElementById('materialSearch').value)">

                                Search

                            </button>

                        </div>

                        <div id="materialResults" class="mt-3" style="max-height: 200px; overflow-y: auto;">

                            <p class="text-muted small">Start typing to search for materials...</p>

                        </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>

                        <div>

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

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

                            </button>

                            <button type="button" class="btn btn-success btn-sm" onclick="addFromLibrary()">

                                <i class="bi bi-box"></i> Add from Library

                            </button>

                        </div>

                    </div>

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

                        <div class="table-responsive">

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

                                <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">

                                    <!-- Items added here -->

                                </tbody>

                            </table>

                        </div>

                    </div>

                    <div class="card-footer">

                        <div class="row text-end">

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

                                <strong>Total Materials:</strong>

                                <span id="materialsTotalDisplay" class="text-primary fw-bold">0.00</span>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

            <!-- Right Panel - Summary & Justification -->
            <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="0">

                        </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="0">

                        </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="0">

                        </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="0">

                        </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">0.00</span></td>

                            </tr>

                            <tr>

                                <td>Labour</td>

                                <td class="text-end"><span id="summaryLabour">0.00</span></td>

                            </tr>

                            <tr>

                                <td>Consumables</td>

                                <td class="text-end"><span id="summaryConsumables">0.00</span></td>

                            </tr>

                            <tr>

                                <td>Equipment</td>

                                <td class="text-end"><span id="summaryEquipment">0.00</span></td>

                            </tr>

                            <tr>

                                <td>Other</td>

                                <td class="text-end"><span id="summaryOther">0.00</span></td>

                            </tr>

                            <tr class="table-light">

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

                                <td class="text-end"><strong><span id="summarySubtotal">0.00</span></strong></td>

                            </tr>

                            <tr>

                                <td>VAT (<span id="vatPercentDisplay">15</span>%)</td>

                                <td class="text-end"><span id="summaryVat">0.00</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">0.00</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="6" placeholder="Add your justification, assumptions, exclusions, and clarifications here...

Example:
- All prices are based on current market rates
- Excludes VAT where applicable
- Materials sourced from approved suppliers
- Labour rates based on union agreements"></textarea>

                    </div>

                </div>

                <!-- Save Buttons -->
                <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> Save BOQ

                            </button>

                            <button type="button" class="btn btn-outline-primary" onclick="previewBOQ()">

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

                            </button>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </form>

</div>

<!-- Hidden inputs for totals -->
<input type="hidden" id="materialsTotal" name="materials_total" value="0">
<input type="hidden" id="subtotal" name="subtotal" value="0">
<input type="hidden" id="grand_total" name="grand_total" value="0">

<script>

    let itemCount = 0;

    // ==========================================================
    // Material Library Search
    // ==========================================================

    let selectedMaterial = null;

    function searchMaterials(query) {

        const resultsDiv = document.getElementById('materialResults');

        if (query.length < 2) {

            resultsDiv.innerHTML = '<p class="text-muted small">Start typing to search for materials...</p>';

            return;

        }

        resultsDiv.innerHTML = '<p class="text-muted small"><i class="bi bi-hourglass-split"></i> Searching...</p>';

        fetch(`/boq/search-materials?q=${encodeURIComponent(query)}`)

            .then(response => response.json())

            .then(data => {

                if (data.results.length === 0) {

                    resultsDiv.innerHTML = '<p class="text-muted small">No materials found. Add a new material in the Materials module.</p>';

                    return;

                }

                let html = '<div class="list-group">';

                data.results.forEach(material => {

                    html += `

                        <div class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"

                             onclick="addMaterialToBOQ(${material.id}, '${material.description.replace(/'/g, "\\'")}', '${material.unit}', ${material.rate})"

                             style="cursor:pointer;">

                            <div>

                                <strong>${material.description}</strong>

                                <br>

                                <small class="text-muted">${material.code} | ${material.category} | ${material.supplier}</small>

                            </div>

                            <div class="text-end">

                                <span class="badge bg-primary">${material.unit}</span>

                                <br>

                                <small class="text-success">${material.rate.toFixed(2)}</small>

                            </div>

                        </div>

                    `;

                });

                html += '</div>';

                resultsDiv.innerHTML = html;

            })

            .catch(error => {

                resultsDiv.innerHTML = '<p class="text-muted small text-danger">Error searching materials.</p>';

                console.error(error);

            });

    }

    function clearSearch() {

        document.getElementById('materialSearch').value = '';

        document.getElementById('materialResults').innerHTML = '<p class="text-muted small">Start typing to search for materials...</p>';

    }

    // ==========================================================
    // Add Material from Library
    // ==========================================================

    function addMaterialToBOQ(id, description, unit, rate) {

        // Check if this material already exists in the BOQ
        const existingItems = document.querySelectorAll('#boqBody tr');

        for (let row of existingItems) {

            const descInput = row.querySelector('.desc-input');

            if (descInput && descInput.value === description) {

                // Increment quantity
                const qtyInput = row.querySelector('.qty-input');

                if (qtyInput) {

                    qtyInput.value = parseFloat(qtyInput.value) + 1;

                    calculateRowAmount(row);

                    calculateTotals();

                }

                return;

            }

        }

        // Add new item
        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[]" value="${description}" required>

                <small class="text-muted material-id" style="display:none;">${id}</small>

            </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[]" value="${unit}" placeholder="Unit">

            </td>

            <td>

                <input type="number" step="0.01" class="form-control form-control-sm rate-input" name="rate[]" value="${rate}" 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();

        // Close search results
        document.getElementById('materialResults').innerHTML = '<p class="text-muted small">Material added! Search again or continue adding.</p>';

        document.getElementById('materialSearch').value = '';

    }

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

    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();

    }

    // ==========================================================
    // Add from Library (opens search)
    // ==========================================================

    function addFromLibrary() {

        document.getElementById('materialSearch').focus();

        document.getElementById('materialSearch').scrollIntoView({ behavior: 'smooth' });

    }

    // ==========================================================
    // 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() {

        // Calculate materials total
        let materialsTotal = 0;

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

        rows.forEach(row => {

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

            materialsTotal += amount;

        });

        // Get additional costs
        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;

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

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

        const vatAmount = subtotal * (vatPercent / 100);

        const grandTotal = subtotal + vatAmount;

        // Update displays
        document.getElementById('materialsTotalDisplay').textContent = materialsTotal.toFixed(2);

        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;

        // Update hidden fields
        document.getElementById('materialsTotal').value = materialsTotal;

        document.getElementById('subtotal').value = subtotal;

        document.getElementById('grand_total').value = grandTotal;

    }

    // ==========================================================
    // Preview BOQ
    // ==========================================================

    function previewBOQ() {

        alert('BOQ Preview will be available soon!');

        // This will be connected to a preview modal or PDF generation

    }

    // ==========================================================
    // Initialize
    // ==========================================================

    // Auto-calculate when VAT changes
    document.querySelector('[name="vat_percent"]').addEventListener('input', calculateTotals);

    // Auto-calculate when currency changes
    document.getElementById('currency').addEventListener('change', function() {

        const currency = this.value;

        // Update currency symbols in display if needed

    });

    // Initialize with one empty row
    addItem();

</script>

{% endblock %}