@extends('layouts.app')

@section('title', 'Create Quotation')
@section('page_title', 'New Quotation')

@section('content')
<form action="{{ route('quotations.store') }}" method="POST" id="quotationForm">
    @csrf
    <div class="row g-4">
        <!-- Left Side: Basic Info & Items List -->
        <div class="col-lg-8">
            <!-- Basic Info Card -->
            <div class="card border-0 shadow-sm p-4 mb-4">
                <h5 class="fw-bold mb-3 text-dark">Quotation Details</h5>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label text-secondary small fw-bold">SELECT CUSTOMER *</label>
                        <select class="form-select" name="client_id" required>
                            <option value="">-- Choose Customer --</option>
                            @foreach($clients as $c)
                                <option value="{{ $c->id }}">{{ $c->full_name }} ({{ $c->client_code }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label text-secondary small fw-bold">EXPIRY DATE *</label>
                        <input type="date" class="form-control" name="expiry_date" required min="{{ date('Y-m-d') }}">
                    </div>
                </div>
            </div>

            <!-- Items Card -->
            <div class="card border-0 shadow-sm p-4">
                <div class="d-flex align-items-center justify-content-between mb-4 border-bottom pb-2">
                    <h5 class="fw-bold mb-0 text-dark">Quotation Line Items</h5>
                    <div>
                        <button type="button" class="btn btn-sm btn-outline-primary me-2" onclick="addItemRow('product')">
                            <i class="bi bi-box-seam"></i> Add Product
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-info" onclick="addItemRow('service')">
                            <i class="bi bi-cpu"></i> Add Service
                        </button>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-hover align-middle" id="itemsTable">
                        <thead>
                            <tr>
                                <th style="width: 45%;">Item / Variant</th>
                                <th style="width: 15%;" class="text-end">Unit Price (UGX)</th>
                                <th style="width: 12%;">Qty</th>
                                <th style="width: 12%;" class="text-end">Discount (UGX)</th>
                                <th style="width: 12%;" class="text-end">Total</th>
                                <th style="width: 4%;"></th>
                            </tr>
                        </thead>
                        <tbody id="itemsContainer">
                            <!-- Items rows appended here -->
                        </tbody>
                    </table>
                </div>

                <div class="text-center py-4 text-muted d-none" id="emptyTableMessage">
                    <i class="bi bi-cart3 fs-1 mb-2 d-block"></i>
                    No items added. Click buttons above to add product or service lines.
                </div>
            </div>
        </div>

        <!-- Right Side: Calculations & Terms -->
        <div class="col-lg-4">
            <!-- Summary Card -->
            <div class="card border-0 shadow-sm p-4 mb-4">
                <h5 class="fw-bold mb-3 text-dark">Summary</h5>
                
                <div class="mb-3">
                    <label class="form-label text-secondary small fw-bold">ADDITIONAL FLAT DISCOUNT (UGX)</label>
                    <input type="number" class="form-control" name="discount" id="flatDiscount" value="0" min="0" oninput="calculateTotals()">
                </div>

                <div class="bg-light p-3 rounded mb-3 border">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-secondary small">Subtotal</span>
                        <span class="fw-bold text-dark" id="summarySubtotal">0 UGX</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-secondary small">Flat Discount</span>
                        <span class="fw-bold text-danger" id="summaryDiscount">-0 UGX</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-secondary small">VAT (18%)</span>
                        <span class="fw-bold text-dark" id="summaryTax">0 UGX</span>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between border-top pt-2">
                        <span class="fw-bold text-dark">Grand Total</span>
                        <span class="fw-bold text-primary fs-5" id="summaryTotal">0 UGX</span>
                    </div>
                </div>

                <div class="d-grid gap-2">
                    <button type="submit" class="btn btn-primary btn-lg">
                        <i class="bi bi-save"></i> Save Quotation
                    </button>
                    <a href="{{ route('quotations.index') }}" class="btn btn-light">Cancel</a>
                </div>
            </div>

            <!-- Notes & Terms Card -->
            <div class="card border-0 shadow-sm p-4">
                <h5 class="fw-bold mb-3 text-dark">Notes & Terms</h5>
                <div class="mb-3">
                    <label class="form-label text-secondary small fw-bold">NOTES</label>
                    <textarea class="form-control" name="notes" rows="3" placeholder="Notes visible to customer..."></textarea>
                </div>
                <div class="mb-3">
                    <label class="form-label text-secondary small fw-bold">TERMS & CONDITIONS</label>
                    <textarea class="form-control" name="terms" rows="3" placeholder="Payment terms, delivery policy..."></textarea>
                </div>
            </div>
        </div>
    </div>
</form>

<!-- Templates for Dropdowns -->
<div class="d-none">
    <select id="productTemplate">
        <option value="">-- Choose Product --</option>
        @foreach($variants as $v)
            <option value="{{ $v->id }}" data-price="{{ (float)$v->selling_price }}">{{ $v->variant_name }} ({{ $v->sku }})</option>
        @endforeach
    </select>
    
    <select id="serviceTemplate">
        <option value="">-- Choose Service --</option>
        @foreach($services as $s)
            <option value="{{ $s->id }}" data-price="{{ (float)$s->default_price }}">{{ $s->service_name }} ({{ $s->service_code }})</option>
        @endforeach
    </select>
</div>
@endsection

@section('scripts')
<script>
    let rowIndex = 0;

    function addItemRow(type) {
        const container = document.getElementById('itemsContainer');
        const emptyMsg = document.getElementById('emptyTableMessage');
        emptyMsg.classList.add('d-none');

        const tr = document.createElement('tr');
        tr.id = `row_${rowIndex}`;
        
        let selectHtml = '';
        if (type === 'product') {
            selectHtml = document.getElementById('productTemplate').innerHTML;
        } else {
            selectHtml = document.getElementById('serviceTemplate').innerHTML;
        }

        tr.innerHTML = `
            <td>
                <span class="badge bg-${type === 'product' ? 'primary' : 'info'} mb-1 text-uppercase small">${type}</span>
                <input type="hidden" name="items[${rowIndex}][item_type]" value="${type}">
                <select class="form-select item-select" name="items[${rowIndex}][item_id]" onchange="onItemChange(${rowIndex}, this)" required>
                    ${selectHtml}
                </select>
            </td>
            <td>
                <input type="number" class="form-control text-end item-price" name="items[${rowIndex}][unit_price]" value="0" min="0" oninput="onRowValueChange(${rowIndex})" required>
            </td>
            <td>
                <input type="number" class="form-control item-qty" name="items[${rowIndex}][quantity]" value="1" min="1" oninput="onRowValueChange(${rowIndex})" required>
            </td>
            <td>
                <input type="number" class="form-control text-end item-discount" name="items[${rowIndex}][discount]" value="0" min="0" oninput="onRowValueChange(${rowIndex})">
            </td>
            <td class="text-end fw-bold text-dark item-row-total" id="row_total_${rowIndex}">
                0 UGX
            </td>
            <td>
                <button type="button" class="btn btn-outline-danger btn-sm border-0" onclick="removeItemRow(${rowIndex})">
                    <i class="bi bi-trash"></i>
                </button>
            </td>
        `;

        container.appendChild(tr);
        rowIndex++;
        calculateTotals();
    }

    function removeItemRow(idx) {
        document.getElementById(`row_${idx}`).remove();
        checkEmptyState();
        calculateTotals();
    }

    function checkEmptyState() {
        const container = document.getElementById('itemsContainer');
        const emptyMsg = document.getElementById('emptyTableMessage');
        if (container.children.length === 0) {
            emptyMsg.classList.remove('d-none');
        } else {
            emptyMsg.classList.add('d-none');
        }
    }

    function onItemChange(idx, select) {
        const selectedOption = select.options[select.selectedIndex];
        const price = selectedOption.getAttribute('data-price') || 0;
        
        const row = document.getElementById(`row_${idx}`);
        row.querySelector('.item-price').value = Math.round(price);
        onRowValueChange(idx);
    }

    function onRowValueChange(idx) {
        const row = document.getElementById(`row_${idx}`);
        const price = parseFloat(row.querySelector('.item-price').value) || 0;
        const qty = parseInt(row.querySelector('.item-qty').value) || 0;
        const discount = parseFloat(row.querySelector('.item-discount').value) || 0;

        const total = (price * qty) - discount;
        document.getElementById(`row_total_${idx}`).innerText = Math.max(0, total).toLocaleString() + ' UGX';
        
        calculateTotals();
    }

    function calculateTotals() {
        let subtotal = 0;
        
        document.querySelectorAll('#itemsContainer tr').forEach(tr => {
            const price = parseFloat(tr.querySelector('.item-price').value) || 0;
            const qty = parseInt(tr.querySelector('.item-qty').value) || 0;
            const discount = parseFloat(tr.querySelector('.item-discount').value) || 0;
            subtotal += (price * qty) - discount;
        });

        const flatDiscount = parseFloat(document.getElementById('flatDiscount').value) || 0;
        const taxable = Math.max(0, subtotal - flatDiscount);
        const tax = Math.round(taxable * 0.18); // 18% VAT
        const total = taxable + tax;

        document.getElementById('summarySubtotal').innerText = subtotal.toLocaleString() + ' UGX';
        document.getElementById('summaryDiscount').innerText = '-' + flatDiscount.toLocaleString() + ' UGX';
        document.getElementById('summaryTax').innerText = tax.toLocaleString() + ' UGX';
        document.getElementById('summaryTotal').innerText = total.toLocaleString() + ' UGX';
    }

    // Initialize with one product row
    document.addEventListener('DOMContentLoaded', () => {
        addItemRow('product');
    });
</script>
@endsection