@extends('layouts.app')

@section('title', 'New Purchase')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="page-title mb-0">New Purchase</h1>
    <a href="{{ route('purchases.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="purchaseForm" action="{{ route('purchases.store') }}" method="post">
    @csrf
    <div class="row g-3 mb-4">
        <div class="col-md-4">
            <label class="form-label">Vendor <span class="text-danger">*</span></label>
            <select name="vendor_id" id="vendor_id" class="form-select" required>
                <option value="">Select vendor</option>
                @foreach($vendors as $v)
                    <option value="{{ $v->id }}" {{ old('vendor_id', $preselectedVendorId) == $v->id ? 'selected' : '' }}>{{ $v->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-4">
            <label class="form-label">Date <span class="text-danger">*</span></label>
            <input type="date" name="purchase_date" class="form-control" value="{{ old('purchase_date', date('Y-m-d')) }}" max="{{ date('Y-m-d') }}" required>
        </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: 360px;">
                    <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" autofocus>
                    </div>
                    <div id="productResults" class="list-group position-absolute top-100 start-0 end-0 mt-1 border shadow d-none" style="z-index: 1000; max-height: 220px; overflow-y: auto;"></div>
                </div>
            </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: 120px;">Unit 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. Edit qty and unit price as needed.</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-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 Purchase</button>
        <a href="{{ route('purchases.index') }}" class="btn btn-outline-secondary">Cancel</a>
    </div>
</form>

@php
    $productsList = $products->map(fn($p) => [
        'id' => $p->id,
        'name' => $p->name,
        'purchase_price' => (float) $p->purchase_price,
        'barcode' => trim((string) ($p->barcode ?? '')),
        'search' => strtolower($p->name . ' ' . trim((string) ($p->barcode ?? ''))),
    ]);
@endphp
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const products = @json($productsList);
    let rowIndex = 0;
    const productSearch = document.getElementById('productSearch');
    const productResults = document.getElementById('productResults');
    const itemsBody = document.getElementById('itemsBody');
    const placeholderRow = document.getElementById('placeholderRow');

    function escapeHtml(s) { const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
    function showResults(term) {
        const t = (term || '').trim().toLowerCase();
        if (!t) { productResults.classList.add('d-none'); productResults.innerHTML = ''; return; }
        const filtered = products.filter(p => (p.search && p.search.indexOf(t) !== -1) || (p.barcode && String(p.barcode).toLowerCase().indexOf(t) !== -1));
        productResults.innerHTML = filtered.slice(0, 15).map(p =>
            '<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="' + escapeHtml(p.name) + '" data-price="' + p.purchase_price + '">' + escapeHtml(p.name) + ' — ₹' + p.purchase_price.toFixed(2) + '</button>'
        ).join('') || '<div class="p-3 text-muted small">No matching products</div>';
        productResults.classList.remove('d-none');
    }
    productSearch.addEventListener('input', () => showResults(productSearch.value));
    productSearch.addEventListener('focus', () => showResults(productSearch.value));
    document.addEventListener('click', e => { if (!e.target.closest('#productSearch') && !e.target.closest('#productResults')) productResults.classList.add('d-none'); });

    productResults.addEventListener('click', function(e) {
        const btn = e.target.closest('.product-pick');
        if (!btn) return;
        const id = btn.dataset.id, name = btn.dataset.name, price = parseFloat(btn.dataset.price) || 0;
        if (placeholderRow) placeholderRow.remove();
        const tr = document.createElement('tr');
        tr.className = 'item-row';
        tr.innerHTML = '<td><span class="product-name">' + name + '</span><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="1" value="1"></td>' +
            '<td><input type="number" name="items[' + rowIndex + '][unit_price]" class="form-control form-control-sm price-input" min="0" step="0.01" value="' + price.toFixed(2) + '"></td>' +
            '<td><span class="total-display fw-medium">' + price.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.classList.add('d-none');
        updateTotals();
    });

    function updateRow(row) {
        const qty = parseInt(row.querySelector('.qty-input')?.value, 10) || 0;
        const price = parseFloat(row.querySelector('.price-input')?.value) || 0;
        const total = price * qty;
        const td = row.querySelector('.total-display');
        if (td) td.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') || e.target.classList.contains('price-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'), price = r.querySelector('.price-input');
            if (hid) hid.name = 'items[' + i + '][product_id]';
            if (qty) qty.name = 'items[' + i + '][quantity]';
            if (price) price.name = 'items[' + i + '][unit_price]';
        });
        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('purchaseForm').addEventListener('submit', function() {
        document.querySelectorAll('#itemsBody .item-row').forEach((row, i) => {
            const hid = row.querySelector('input[name*="product_id"]'), qty = row.querySelector('.qty-input'), price = row.querySelector('.price-input');
            if (hid) hid.name = 'items[' + i + '][product_id]';
            if (qty) qty.name = 'items[' + i + '][quantity]';
            if (price) price.name = 'items[' + i + '][unit_price]';
        });
    });
    updateTotals();
});
</script>
@endpush
@endsection