@extends('layouts.app')

@section('title', 'Quick Bill')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="page-title mb-0">Quick Bill</h1>
    <a href="{{ route('bills.index') }}" class="btn btn-outline-secondary">Back</a>
</div>

@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show">{{ session('error') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
@endif

<form id="billForm" action="{{ route('bills.store') }}" method="post">
    @csrf
    <input type="hidden" name="invoice_date" id="invoice_date" value="{{ old('invoice_date', date('Y-m-d')) }}">

    <div class="row g-3 mb-4">
        <div class="col-12">
            <label class="form-label">Customer (optional — new customers are added to the list)</label>
            <div class="row g-2">
                <div class="col-md-4">
                    <input type="hidden" name="customer_id" id="customer_id" value="{{ old('customer_id', $preselectedCustomerId ?? '') }}">
                    <div class="position-relative">
                        <input type="text" name="customer_name" id="customer_name" class="form-control" value="{{ old('customer_name', $preselectedCustomerName ?? '') }}" placeholder="Name (or search existing)" autofocus>
                        <div id="customerResults" class="list-group position-absolute top-100 start-0 end-0 mt-1 border shadow d-none" style="z-index: 1000; max-height: 200px; overflow-y: auto;"></div>
                    </div>
                </div>
                <div class="col-md-4">
                    <input type="text" name="customer_phone" id="customer_phone" class="form-control" value="{{ old('customer_phone', $preselectedCustomerPhone ?? '') }}" placeholder="Mobile number">
                </div>
                <div class="col-md-4">
                    <input type="text" name="customer_address" id="customer_address" class="form-control" value="{{ old('customer_address', $preselectedCustomerAddress ?? '') }}" placeholder="Address">
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <label class="form-label">Date</label>
            <input type="date" class="form-control" id="date_display" value="{{ old('invoice_date', date('Y-m-d')) }}" max="{{ date('Y-m-d') }}">
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-body">
            <div class="mb-3">
                <label class="form-label">Add product</label>
                <div class="position-relative" style="max-width: 320px; overflow: visible;">
                    <div class="input-group">
                        <span class="input-group-text"><i class="bi bi-search"></i></span>
                        <input type="text" id="productSearch" class="form-control" placeholder="Search by name or barcode..." autocomplete="off">
                    </div>
                    <div id="productResults" class="list-group position-absolute start-0 mt-1 border shadow bg-dark" style="display: none; z-index: 1050; max-height: 220px; overflow-y: auto; min-width: 100%;"></div>
                </div>
                <small class="text-muted">Type to see product suggestions, then click to add.</small>
            </div>
            <div class="table-responsive">
                <table class="table table-bordered table-hover align-middle">
                    <thead>
                        <tr>
                            <th>Product</th>
                            <th style="width: 100px;">Qty</th>
                            <th style="width: 100px;">Price</th>
                            <th style="width: 100px;">Total</th>
                            <th style="width: 50px;"></th>
                        </tr>
                    </thead>
                    <tbody id="itemsBody">
                        <tr id="placeholderRow" class="text-center text-muted py-4">
                            <td colspan="5">Search and click a product to add.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="row justify-content-end">
        <div class="col-md-5">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-2"><span>Subtotal</span><span id="subtotalDisplay">0.00</span></div>
                    <div class="mb-2">
                        <label class="form-label small text-muted">Discount (₹)</label>
                        <input type="number" name="discount_amount" id="discount_amount" class="form-control form-control-sm" value="{{ old('discount_amount', 0) }}" min="0" step="0.01">
                    </div>
                    <div class="mb-2">
                        <label class="form-label small text-muted">GST (%)</label>
                        <input type="number" name="gst_percent" id="gst_percent" class="form-control form-control-sm" value="{{ old('gst_percent', '') }}" min="0" max="100" step="0.01" placeholder="e.g. 18">
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between fw-bold"><span>Total</span><span id="totalDisplay">0.00</span></div>
                    <div class="mt-3">
                        <label class="form-label small text-muted">Payment type</label>
                        <div class="d-flex gap-2 flex-wrap">
                            <label class="border rounded p-2 text-center mb-0" style="cursor: pointer;">
                                <input type="radio" name="payment_type" value="cash" {{ old('payment_type', 'cash') === 'cash' ? 'checked' : '' }} class="me-1"> Cash
                            </label>
                            <label class="border rounded p-2 text-center mb-0" style="cursor: pointer;">
                                <input type="radio" name="payment_type" value="upi" {{ old('payment_type') === 'upi' ? 'checked' : '' }} class="me-1"> UPI
                            </label>
                            <label class="border rounded p-2 text-center mb-0" style="cursor: pointer;">
                                <input type="radio" name="payment_type" value="card" {{ old('payment_type') === 'card' ? 'checked' : '' }} class="me-1"> Card
                            </label>
                        </div>
                    </div>
                    <div class="mt-2">
                        <label class="form-label small text-muted">Notes</label>
                        <input type="text" name="notes" class="form-control form-control-sm" value="{{ old('notes') }}">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="mt-4">
        <button type="submit" class="btn btn-primary btn-lg">Save Bill</button>
        <a href="{{ route('bills.index') }}" class="btn btn-outline-secondary">Cancel</a>
    </div>
</form>

@php
    $productsList = $products->map(function ($p) {
        $barcode = trim((string) ($p->barcode ?? ''));
        return [
            'id' => $p->id,
            'name' => $p->name,
            'price' => (float) $p->selling_price,
            'stock' => $p->quantity,
            'barcode' => $barcode,
            'search' => strtolower($p->name . ' ' . $barcode),
        ];
    });
@endphp
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const products = @json($productsList);
    const searchCustomersUrl = '{{ route("bills.customers.search") }}';
    let rowIndex = 0;

    const invoiceDate = document.getElementById('invoice_date');
    const dateDisplay = document.getElementById('date_display');
    if (dateDisplay) dateDisplay.addEventListener('change', function() { invoiceDate.value = this.value; });

    const customerName = document.getElementById('customer_name');
    const customerPhone = document.getElementById('customer_phone');
    const customerAddress = document.getElementById('customer_address');
    const customerIdInput = document.getElementById('customer_id');
    const customerResults = document.getElementById('customerResults');

    let customerSearchTimeout = null;
    function showCustomerResults(term) {
        const t = (term || '').trim();
        if (t.length < 1) { customerResults.classList.add('d-none'); customerResults.innerHTML = ''; return; }
        clearTimeout(customerSearchTimeout);
        customerSearchTimeout = setTimeout(function() {
            fetch(searchCustomersUrl + '?q=' + encodeURIComponent(t))
                .then(r => r.json())
                .then(list => {
                    if (list.length === 0) customerResults.innerHTML = '<div class="p-3 text-muted small">No matching customer</div>';
                    else {
                        customerResults.innerHTML = list.map(c => {
                            const line = c.name + (c.phone ? ' · ' + c.phone : '') + ((c.address || '').substring(0, 40) ? ' · ' + (c.address || '').substring(0, 40) : '');
                            return '<button type="button" class="list-group-item list-group-item-action list-group-item-dark border-0 customer-pick" data-id="' + c.id + '" data-name="' + (c.name || '') + '" data-phone="' + (c.phone || '') + '" data-address="' + (c.address || '') + '">' + line + '</button>';
                        }).join('');
                    }
                    customerResults.classList.remove('d-none');
                }).catch(() => { customerResults.innerHTML = '<div class="p-3 text-danger small">Search failed</div>'; customerResults.classList.remove('d-none'); });
        }, 200);
    }
    if (customerName) {
        customerName.addEventListener('input', function() { customerIdInput.value = ''; showCustomerResults(this.value); });
        customerName.addEventListener('focus', function() { showCustomerResults(this.value); });
    }
    [customerPhone, customerAddress].forEach(el => { if (el) el.addEventListener('input', () => customerIdInput.value = ''); });
    document.addEventListener('click', e => { if (!e.target.closest('#customer_name') && !e.target.closest('#customerResults')) customerResults.classList.add('d-none'); });
    if (customerResults) {
        customerResults.addEventListener('click', function(e) {
            const btn = e.target.closest('.customer-pick');
            if (!btn) return;
            customerIdInput.value = btn.dataset.id;
            customerName.value = btn.dataset.name || '';
            customerPhone.value = btn.dataset.phone || '';
            customerAddress.value = btn.dataset.address || '';
            customerResults.classList.add('d-none');
        });
    }

    const productSearch = document.getElementById('productSearch');
    const productResults = document.getElementById('productResults');
    const itemsBody = document.getElementById('itemsBody');
    const placeholderRow = document.getElementById('placeholderRow');

    function escapeHtml(s) {
        if (s == null) return '';
        const div = document.createElement('div');
        div.textContent = s;
        return div.innerHTML;
    }
    function showProductResults(term) {
        const t = (term || '').trim().toLowerCase();
        if (!t) {
            productResults.style.display = 'none';
            productResults.innerHTML = '';
            return;
        }
        if (!products || products.length === 0) {
            productResults.innerHTML = '<div class="p-3 text-muted small">No products in catalog. Add products first.</div>';
            productResults.style.display = 'block';
            return;
        }
        const filtered = products.filter(function(p) {
            const searchStr = (p.search || '').toLowerCase();
            const barcodeStr = (p.barcode != null) ? String(p.barcode).toLowerCase().trim() : '';
            const nameMatch = searchStr.indexOf(t) !== -1;
            const barcodeMatch = barcodeStr && barcodeStr.indexOf(t) !== -1;
            return nameMatch || barcodeMatch;
        });
        if (filtered.length === 0) {
            productResults.innerHTML = '<div class="p-3 text-muted small">No matching products. Try name or barcode.</div>';
        } else {
            productResults.innerHTML = filtered.slice(0, 15).map(function(p) {
                const stock = parseInt(p.stock, 10) || 0;
                const name = escapeHtml(p.name || '');
                const price = parseFloat(p.price) || 0;
                return '<button type="button" class="list-group-item list-group-item-action list-group-item-dark border-0 product-pick" data-id="' + p.id + '" data-name="' + name + '" data-price="' + price + '" data-stock="' + stock + '">' + name + ' — ₹' + price.toFixed(2) + ' (Stock: ' + stock + ')</button>';
            }).join('');
        }
        productResults.style.display = 'block';
    }
    if (productSearch) {
        productSearch.addEventListener('input', function() { showProductResults(this.value); });
        productSearch.addEventListener('focus', function() { showProductResults(this.value); });
        productSearch.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') { productResults.style.display = 'none'; this.blur(); }
        });
    }
    document.addEventListener('click', function(e) {
        if (!e.target.closest('#productSearch') && !e.target.closest('#productResults')) {
            productResults.style.display = 'none';
        }
    });

    if (productResults) {
        productResults.addEventListener('click', function(e) {
            const btn = e.target.closest('.product-pick');
            if (!btn) return;
            const id = btn.dataset.id;
            const name = btn.dataset.name || '';
            const price = parseFloat(btn.dataset.price) || 0;
            const stock = parseInt(btn.dataset.stock, 10) || 0;
            if (placeholderRow) placeholderRow.remove();
            const tr = document.createElement('tr');
            tr.className = 'item-row';
            const qtyVal = stock > 0 ? 1 : 0;
            tr.innerHTML = '<td>' + name + '<input type="hidden" name="items[' + rowIndex + '][product_id]" value="' + id + '"></td>' +
                '<td><input type="number" name="items[' + rowIndex + '][quantity]" class="form-control form-control-sm qty-input" min="0" value="' + qtyVal + '" max="' + stock + '" data-price="' + price + '"></td>' +
                '<td><span class="price-display">' + price.toFixed(2) + '</span></td>' +
                '<td><span class="total-display fw-medium">' + (price * qtyVal).toFixed(2) + '</span></td>' +
                '<td><button type="button" class="btn btn-sm btn-outline-danger remove-row"><i class="bi bi-trash"></i></button></td>';
            itemsBody.appendChild(tr);
            rowIndex++;
            productSearch.value = '';
            productResults.style.display = 'none';
            updateTotals();
        });
    }

    function updateRow(row) {
        const qtyInput = row.querySelector('.qty-input');
        if (!qtyInput) return 0;
        const price = parseFloat(qtyInput.dataset.price || qtyInput.getAttribute('data-price') || 0);
        const qty = parseInt(qtyInput.value, 10) || 0;
        const total = price * qty;
        const totalEl = row.querySelector('.total-display');
        if (totalEl) totalEl.textContent = total.toFixed(2);
        return total;
    }
    function updateTotals() {
        let subtotal = 0;
        document.querySelectorAll('#itemsBody .item-row').forEach(row => subtotal += updateRow(row) || 0);
        const discount = parseFloat(document.getElementById('discount_amount').value) || 0;
        const gstPct = parseFloat(document.getElementById('gst_percent').value) || 0;
        const afterDiscount = Math.max(0, subtotal - discount);
        const gstAmount = afterDiscount * (gstPct / 100);
        const total = afterDiscount + gstAmount;
        document.getElementById('subtotalDisplay').textContent = subtotal.toFixed(2);
        document.getElementById('totalDisplay').textContent = total.toFixed(2);
        if (placeholderRow && document.querySelectorAll('#itemsBody .item-row').length === 0) itemsBody.appendChild(placeholderRow);
    }

    itemsBody.addEventListener('input', e => { if (e.target.classList.contains('qty-input')) { updateRow(e.target.closest('.item-row')); updateTotals(); } });
    document.getElementById('discount_amount').addEventListener('input', updateTotals);
    document.getElementById('gst_percent').addEventListener('input', updateTotals);

    itemsBody.addEventListener('click', function(e) {
        if (!e.target.closest('.remove-row')) return;
        const row = e.target.closest('.item-row');
        row.remove();
        document.querySelectorAll('#itemsBody .item-row').forEach((r, i) => {
            const hid = r.querySelector('input[name*="product_id"]'), qty = r.querySelector('.qty-input');
            if (hid) hid.name = 'items[' + i + '][product_id]';
            if (qty) qty.name = 'items[' + i + '][quantity]';
        });
        rowIndex = document.querySelectorAll('#itemsBody .item-row').length;
        updateTotals();
        if (document.querySelectorAll('#itemsBody .item-row').length === 0 && placeholderRow && !itemsBody.contains(placeholderRow)) itemsBody.appendChild(placeholderRow);
    });

    document.getElementById('billForm').addEventListener('submit', function() {
        document.querySelectorAll('#itemsBody .item-row').forEach((row, i) => {
            const hid = row.querySelector('input[name*="product_id"]'), qty = row.querySelector('.qty-input');
            if (hid) hid.name = 'items[' + i + '][product_id]';
            if (qty) qty.name = 'items[' + i + '][quantity]';
        });
    });
    updateTotals();
});
</script>
@endpush
@endsection