@extends('layouts.app')
@section('title', 'New Quotation')
@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('quotations.index') }}">Quotations</a></li>
<li class="breadcrumb-item active">New Quotation</li>
@endsection
@section('content')

<div class="page-header">
    <h1 class="page-title">
        <i class="bi bi-file-earmark-text me-2" style="color:#1d4ed8;"></i>New Quotation
    </h1>
</div>

<form method="POST" action="{{ route('quotations.store') }}" id="quotForm">
@csrf
<div class="row g-3">

    {{-- ── Left Column ──────────────────────────────────────────────────── --}}
    <div class="col-12 col-lg-8">

        {{-- Quotation Details Card --}}
        <div class="card mb-3">
            <div class="card-header fw-semibold">Quotation Details</div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Customer</label>
                        <div class="d-flex gap-2">
                            <select name="customer_id" id="customer_id" class="form-select">
                                <option value="">— Walk-in / No Customer —</option>
                                @foreach($customers as $c)
                                <option value="{{ $c->id }}">{{ $c->name }}{{ $c->phone ? ' — '.$c->phone : '' }}</option>
                                @endforeach
                            </select>
                            @can_permission('customers.create')
                            <button type="button" class="btn btn-outline-primary flex-shrink-0"
                                    data-bs-toggle="modal" data-bs-target="#quickAddCustomerModal">
                                <i class="bi bi-person-plus"></i>
                            </button>
                            @endcan_permission
                        </div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-semibold">Quotation Date <span class="text-danger">*</span></label>
                        <input type="date" name="quotation_date" class="form-control"
                               value="{{ date('Y-m-d') }}" required>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-semibold">Valid Until</label>
                        <input type="date" name="valid_until" class="form-control"
                               value="{{ date('Y-m-d', strtotime('+30 days')) }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Quotation No.</label>
                        <input type="text" class="form-control" value="{{ $quotNo }}" disabled>
                    </div>
                    <div class="col-md-8">
                        <label class="form-label fw-semibold">Terms &amp; Conditions</label>
                        <input type="text" name="terms" class="form-control"
                               placeholder="e.g. Payment within 7 days, prices valid for 30 days">
                    </div>
                </div>
            </div>
        </div>

        {{-- Line Items Card --}}
        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center fw-semibold">
                <span><i class="bi bi-list-ul me-2"></i>Line Items</span>
                <button type="button" class="btn btn-sm btn-success" onclick="addBlankRow()">
                    <i class="bi bi-plus-lg me-1"></i>Add Item
                </button>
            </div>

            {{-- Product Search Bar --}}
            <div class="card-body border-bottom pb-2 pt-3" style="background:#f8fafc;">
                <label class="form-label fw-semibold mb-1" style="font-size:.825rem;">
                    <i class="bi bi-search me-1 text-primary"></i>Search &amp; Add Product
                </label>
                <div class="position-relative">
                    <input type="text" id="productSearchInput" class="form-control"
                           placeholder="Type product name, SKU or barcode to search..."
                           autocomplete="off">
                    <div id="productSearchResults"
                         class="position-absolute w-100 bg-white border rounded shadow-sm"
                         style="top:100%;left:0;z-index:999;max-height:260px;overflow-y:auto;display:none;">
                    </div>
                </div>
                <small class="text-muted">Search করুন এবং result থেকে click করে item যোগ করুন, অথবা উপরে "Add Item" দিয়ে manual row যোগ করুন।</small>
            </div>

            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table mb-0" id="qtTable">
                        <thead>
                            <tr>
                                <th style="min-width:200px;">Item Name</th>
                                <th style="min-width:130px;">Variant</th>
                                <th style="width:75px;">Qty</th>
                                <th style="width:130px;">Unit Price (৳)</th>
                                <th style="width:110px;">Discount (৳)</th>
                                <th style="width:110px;">Total</th>
                                <th style="width:38px;"></th>
                            </tr>
                        </thead>
                        <tbody id="qtBody">
                            {{-- rows injected by JS --}}
                        </tbody>
                    </table>
                </div>
                <div id="qtEmpty" class="text-center py-4 text-muted" style="font-size:.875rem;">
                    <i class="bi bi-box-seam" style="font-size:1.8rem;display:block;margin-bottom:.4rem;opacity:.4;"></i>
                    কোনো item নেই — উপরে search করুন অথবা "Add Item" চাপুন
                </div>
            </div>

            <div class="card-footer py-2" id="qtFooter" style="background:#f8fafc;display:none;">
                <div class="text-end fw-bold" style="font-size:.9rem;">
                    Subtotal: <span id="qtSubtotalFooter" style="color:#059669;">৳0.00</span>
                </div>
            </div>
        </div>

        <div class="mb-3">
            <label class="form-label fw-semibold">Notes</label>
            <textarea name="notes" class="form-control" rows="2"
                      placeholder="Additional notes for the customer"></textarea>
        </div>

    </div>

    {{-- ── Right Column: Summary ────────────────────────────────────────── --}}
    <div class="col-12 col-lg-4">
        <div class="card mb-3" style="position:sticky;top:76px;">
            <div class="card-header fw-semibold">Summary</div>
            <div class="card-body">
                <div class="d-flex justify-content-between mb-2" style="font-size:.875rem;">
                    <span class="text-muted">Subtotal</span>
                    <span id="qtSubtotal" class="fw-bold">৳0.00</span>
                </div>
                <div class="d-flex justify-content-between align-items-center mb-2" style="font-size:.875rem;">
                    <span class="text-muted">Discount</span>
                    <div class="input-group input-group-sm" style="width:130px;">
                        <span class="input-group-text">৳</span>
                        <input type="number" name="discount" id="qtDiscount"
                               class="form-control" value="0" min="0" step="0.01"
                               oninput="qtRecalc()">
                    </div>
                </div>
                <div class="d-flex justify-content-between align-items-center mb-2" style="font-size:.875rem;">
                    <span class="text-muted">VAT</span>
                    <div class="input-group input-group-sm" style="width:130px;">
                        <span class="input-group-text">৳</span>
                        <input type="number" name="vat" id="qtVat"
                               class="form-control" value="0" min="0" step="0.01"
                               oninput="qtRecalc()">
                    </div>
                </div>
                <hr class="my-2">
                <div class="d-flex justify-content-between" style="font-size:1.2rem;font-weight:900;">
                    <span>Total</span>
                    <span id="qtTotal" style="color:#1d4ed8;">৳0.00</span>
                </div>
            </div>
            <div class="card-footer border-0 bg-transparent pt-0">
                <button type="submit" id="saveBtn" class="btn btn-primary w-100 mb-2" style="font-weight:700;" disabled>
                    <i class="bi bi-check-circle me-1"></i>Save Quotation
                </button>
                <a href="{{ route('quotations.index') }}" class="btn btn-outline-secondary w-100">Cancel</a>
            </div>
        </div>
    </div>

</div>
</form>

<x-quick-add-customer />

@endsection

@push('scripts')
<x-quick-add-scripts />
<script>
// ── Ajax search URL ──────────────────────────────────────────────────────────
const SEARCH_URL = "{{ route('ajax.products.search') }}";
let   qtIdx      = 0;
let   searchTimer;

// ── Product Search ───────────────────────────────────────────────────────────
const searchInput   = document.getElementById('productSearchInput');
const searchResults = document.getElementById('productSearchResults');

searchInput.addEventListener('input', function () {
    clearTimeout(searchTimer);
    const q = this.value.trim();
    if (q.length < 1) { searchResults.style.display = 'none'; return; }
    searchTimer = setTimeout(() => doSearch(q), 280);
});

searchInput.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') { searchResults.style.display = 'none'; this.value = ''; }
});

document.addEventListener('click', function (e) {
    if (!searchInput.contains(e.target) && !searchResults.contains(e.target)) {
        searchResults.style.display = 'none';
    }
});

function doSearch(q) {
    searchResults.innerHTML = '<div class="px-3 py-2 text-muted" style="font-size:.825rem;"><i class="bi bi-hourglass-split me-1"></i>Searching...</div>';
    searchResults.style.display = 'block';

    fetch(`${SEARCH_URL}?q=${encodeURIComponent(q)}`, {
        headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
    })
    .then(r => r.json())
    .then(products => renderSearchResults(products, q))
    .catch(() => {
        searchResults.innerHTML = '<div class="px-3 py-2 text-danger" style="font-size:.825rem;"><i class="bi bi-exclamation-circle me-1"></i>Search failed. Try again.</div>';
    });
}

function renderSearchResults(products, q) {
    if (!products.length) {
        searchResults.innerHTML = `<div class="px-3 py-2 text-muted" style="font-size:.825rem;"><i class="bi bi-search me-1"></i>No results for "<strong>${escHtml(q)}</strong>"</div>`;
        searchResults.style.display = 'block';
        return;
    }

    let html = '';
    products.forEach(p => {
        if (!p.variants || !p.variants.length) return;

        if (p.variants.length === 1) {
            // Single variant — click directly adds the row
            const v = p.variants[0];
            html += `
            <div class="px-3 py-2 border-bottom search-result-item"
                 style="cursor:pointer;font-size:.825rem;"
                 onclick="addRowFromVariant(${JSON.stringify(JSON.stringify(p)).slice(1,-1)}, ${JSON.stringify(JSON.stringify(v)).slice(1,-1)})">
                <div class="fw-semibold text-dark">${escHtml(p.name)}</div>
                <div class="d-flex gap-3 mt-1" style="font-size:.75rem;color:#64748b;">
                    <span><i class="bi bi-upc me-1"></i>${escHtml(v.sku || '—')}</span>
                    <span style="color:#059669;font-weight:600;">৳${parseFloat(v.selling_price).toFixed(2)}</span>
                    <span>Stock: <strong class="${v.current_stock < 1 ? 'text-danger' : ''}">${v.current_stock}</strong></span>
                </div>
            </div>`;
        } else {
            // Multiple variants — show sub-items
            html += `<div class="px-3 pt-2 pb-1" style="background:#f8fafc;font-size:.78rem;font-weight:700;color:#1d4ed8;border-bottom:1px solid #e2e8f0;">
                <i class="bi bi-box-seam me-1"></i>${escHtml(p.name)}
            </div>`;
            p.variants.forEach(v => {
                html += `
                <div class="ps-4 pe-3 py-2 border-bottom search-result-item"
                     style="cursor:pointer;font-size:.812rem;"
                     onclick="addRowFromVariant(${JSON.stringify(JSON.stringify(p)).slice(1,-1)}, ${JSON.stringify(JSON.stringify(v)).slice(1,-1)})">
                    <div class="fw-semibold">${escHtml(v.variant_name)}</div>
                    <div class="d-flex gap-3 mt-1" style="font-size:.75rem;color:#64748b;">
                        <span><i class="bi bi-upc me-1"></i>${escHtml(v.sku || '—')}</span>
                        <span style="color:#059669;font-weight:600;">৳${parseFloat(v.selling_price).toFixed(2)}</span>
                        <span>Stock: <strong class="${v.current_stock < 1 ? 'text-danger' : ''}">${v.current_stock}</strong></span>
                    </div>
                </div>`;
            });
        }
    });

    searchResults.innerHTML = html || '<div class="px-3 py-2 text-muted" style="font-size:.825rem;">No active variants found.</div>';
    searchResults.style.display = 'block';

    // Hover style
    searchResults.querySelectorAll('.search-result-item').forEach(el => {
        el.addEventListener('mouseenter', () => el.style.background = '#eff6ff');
        el.addEventListener('mouseleave', () => el.style.background = '');
    });
}

// ── Add row from search result ────────────────────────────────────────────────
function addRowFromVariant(productJson, variantJson) {
    const p = JSON.parse(productJson);
    const v = JSON.parse(variantJson);

    addQtRow(
        p.name + (p.variants && p.variants.length > 1 ? ' — ' + v.variant_name : ''),
        v.id,
        1,
        parseFloat(v.selling_price) || 0,
        0
    );

    searchInput.value     = '';
    searchResults.style.display = 'none';
    searchInput.focus();
}

// ── Add blank row manually ────────────────────────────────────────────────────
function addBlankRow() {
    addQtRow('', '', 1, 0, 0);
}

// ── Core row builder ──────────────────────────────────────────────────────────
function addQtRow(name = '', variantId = '', qty = 1, price = 0, disc = 0) {
    const idx = qtIdx++;
    const tr  = document.createElement('tr');
    tr.id     = `qtrow_${idx}`;

    tr.innerHTML = `
        <td>
            <input type="text"
                   name="items[${idx}][item_name]"
                   class="form-control form-control-sm"
                   value="${escAttr(name)}"
                   required
                   placeholder="Item name">
        </td>
        <td>
            <input type="hidden"
                   name="items[${idx}][product_variant_id]"
                   id="qtvariant_${idx}"
                   value="${escAttr(variantId)}">
            <span id="qtvariant_label_${idx}"
                  class="badge bg-light text-dark border"
                  style="font-size:.7rem;cursor:pointer;"
                  title="Variant ID: ${escAttr(variantId)}">
                ${variantId ? 'Variant #' + variantId : '—'}
            </span>
        </td>
        <td>
            <input type="number"
                   name="items[${idx}][qty]"
                   id="qtqty_${idx}"
                   class="form-control form-control-sm"
                   value="${qty}"
                   min="1"
                   oninput="qtCalcRow(${idx})"
                   required>
        </td>
        <td>
            <div class="input-group input-group-sm">
                <span class="input-group-text">৳</span>
                <input type="number"
                       name="items[${idx}][unit_price]"
                       id="qtprice_${idx}"
                       class="form-control"
                       value="${parseFloat(price).toFixed(2)}"
                       min="0"
                       step="0.01"
                       oninput="qtCalcRow(${idx})"
                       required>
            </div>
        </td>
        <td>
            <div class="input-group input-group-sm">
                <span class="input-group-text">৳</span>
                <input type="number"
                       name="items[${idx}][discount]"
                       id="qtdisc_${idx}"
                       class="form-control"
                       value="${parseFloat(disc).toFixed(2)}"
                       min="0"
                       step="0.01"
                       oninput="qtCalcRow(${idx})">
            </div>
        </td>
        <td id="qttotal_${idx}" class="fw-bold" style="white-space:nowrap;">
            ৳${(qty * price - disc).toFixed(2)}
        </td>
        <td>
            <button type="button"
                    class="btn btn-sm"
                    style="color:#dc2626;background:none;border:none;"
                    onclick="removeRow(${idx})"
                    title="Remove">
                <i class="bi bi-x-circle-fill"></i>
            </button>
        </td>`;

    document.getElementById('qtBody').appendChild(tr);
    updateEmptyState();
    qtRecalc();

    // Focus item name if blank row
    if (!name) {
        setTimeout(() => tr.querySelector('input[type="text"]')?.focus(), 50);
    }
}

function removeRow(idx) {
    const row = document.getElementById(`qtrow_${idx}`);
    if (row) row.remove();
    updateEmptyState();
    qtRecalc();
}

function updateEmptyState() {
    const hasRows = document.getElementById('qtBody').children.length > 0;
    document.getElementById('qtEmpty').style.display  = hasRows ? 'none' : 'block';
    document.getElementById('qtFooter').style.display = hasRows ? 'block' : 'none';
    document.getElementById('saveBtn').disabled       = !hasRows;
}

// ── Row calculation ───────────────────────────────────────────────────────────
function qtCalcRow(idx) {
    const qty   = parseFloat(document.getElementById(`qtqty_${idx}`)?.value)   || 0;
    const price = parseFloat(document.getElementById(`qtprice_${idx}`)?.value) || 0;
    const disc  = parseFloat(document.getElementById(`qtdisc_${idx}`)?.value)  || 0;
    const tot   = Math.max(0, qty * price - disc);
    const el    = document.getElementById(`qttotal_${idx}`);
    if (el) el.textContent = '৳' + tot.toFixed(2);
    qtRecalc();
}

function qtRecalc() {
    let sub = 0;
    document.querySelectorAll('[id^="qttotal_"]').forEach(el => {
        sub += parseFloat(el.textContent.replace('৳', '')) || 0;
    });
    const disc = parseFloat(document.getElementById('qtDiscount').value) || 0;
    const vat  = parseFloat(document.getElementById('qtVat').value)      || 0;
    const tot  = Math.max(0, sub - disc + vat);

    ['qtSubtotal', 'qtSubtotalFooter'].forEach(id => {
        const el = document.getElementById(id);
        if (el) el.textContent = '৳' + sub.toFixed(2);
    });
    document.getElementById('qtTotal').textContent = '৳' + tot.toFixed(2);
}

// ── Helpers ───────────────────────────────────────────────────────────────────
function escHtml(str) {
    return String(str ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}
function escAttr(str) {
    return String(str ?? '').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
}

// ── Form submit guard ─────────────────────────────────────────────────────────
document.getElementById('quotForm').addEventListener('submit', function (e) {
    const rows = document.getElementById('qtBody').children.length;
    if (rows === 0) {
        e.preventDefault();
        alert('কমপক্ষে একটি item যোগ করুন।');
        return;
    }
    document.getElementById('saveBtn').disabled = true;
    document.getElementById('saveBtn').innerHTML = '<i class="bi bi-hourglass-split me-1"></i>Saving...';
});

// Init empty state
updateEmptyState();
</script>
@endpush