@extends('layouts.app')
@section('title','New Purchase')@section('page-title','New Purchase Order')
@section('content')
<div class="page-header"><nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="{{ route('purchases.index') }}">Purchases</a></li><li class="breadcrumb-item active">New</li></ol></nav><h1>New Purchase Order</h1></div>
<form action="{{ route('purchases.store') }}" method="POST" id="poForm">
@csrf
<div class="row g-4">
<div class="col-12 col-xl-8">
    <div class="card mb-4"><div class="card-body p-4">
        <h6 class="fw-700 mb-3" style="font-family:'Space Grotesk',sans-serif;">Add Products</h6>
        <div class="row g-2 mb-3">
            <div class="col-md-8"><div class="search-bar"><i class="bi bi-search"></i><input type="text" id="productSearch" class="form-control" placeholder="Search product..."></div></div>
            <div class="col-md-4"><button type="button" class="btn btn-brand w-100" onclick="addSelectedProduct()"><i class="bi bi-plus-lg me-1"></i>Add Item</button></div>
        </div>
        <div id="productDropdown" class="list-group mb-3" style="display:none;max-height:200px;overflow-y:auto;border-radius:12px;border:1px solid var(--border-c)"></div>
        <div id="poSection" style="display:none"><div class="table-responsive"><table class="table mb-0"><thead><tr><th>Product</th><th>Qty</th><th>Cost (LRD)</th><th>Cost (USD)</th><th>Subtotal</th><th></th></tr></thead><tbody id="poBody"></tbody></table></div></div>
        <div id="emptyPo" class="text-center py-4 text-muted"><i class="bi bi-truck" style="font-size:32px"></i><p class="mt-2 mb-0">Add products to this purchase order</p></div>
    </div></div>
    <div class="card"><div class="card-body p-4"><label class="form-label">Notes</label><textarea name="notes" class="form-control" rows="2" placeholder="Delivery info, reference numbers..."></textarea></div></div>
</div>
<div class="col-12 col-xl-4">
    <div class="card mb-4"><div class="card-body p-4">
        <h6 class="fw-700 mb-4" style="font-family:'Space Grotesk',sans-serif;">Order Details</h6>
        @if(auth()->user()->isAdmin())
        <div class="mb-3"><label class="form-label">Branch *</label><select name="branch_id" class="form-select" required><option value="">— Select Branch —</option>@foreach($branches as $b)<option value="{{ $b->id }}">{{ $b->code }} — {{ $b->name }}</option>@endforeach</select></div>
        @else
        <input type="hidden" name="branch_id" value="{{ auth()->user()->branch_id }}">
        <div class="mb-3 p-3 rounded-3" style="background:rgba(46,196,182,.08);font-size:13px;"><i class="bi bi-building me-2" style="color:var(--accent)"></i><strong>{{ auth()->user()->branch?->name }}</strong></div>
        @endif
        <div class="mb-3"><label class="form-label">Supplier</label><select name="supplier_id" class="form-select"><option value="">— No Supplier —</option>@foreach($suppliers as $s)<option value="{{ $s->id }}">{{ $s->name }}</option>@endforeach</select></div>
        <div class="mb-4"><label class="form-label">Receive Status</label>
            <select name="status" class="form-select">
                <option value="received">✅ Received — Update Stock Now</option>
                <option value="pending">⏳ Pending — Not Yet Received</option>
                <option value="partial">⚠️ Partial Delivery</option>
            </select>
        </div>
        <div style="border-top:1px solid var(--border-c);padding-top:16px;">
            <div class="d-flex justify-content-between mb-2" style="font-size:14px;"><span class="text-muted">Total (LRD)</span><span id="poTotalLocal" class="fw-600">LRD 0.00</span></div>
            <div class="d-flex justify-content-between" style="font-size:20px;font-weight:800;"><span>Total (USD)</span><span id="poTotalUsd" style="color:var(--accent)">$0.00</span></div>
        </div>
    </div></div>
    <button type="submit" class="btn btn-brand w-100 py-3" id="submitBtn" disabled><i class="bi bi-check-circle me-2"></i>Submit Purchase Order</button>
</div>
</div>
</form>
@endsection
@push('scripts')
<script>
const PRODUCTS = @json($productsJson);
let cart = [], selectedProduct = null;
const searchInput = document.getElementById('productSearch');
const dropdown    = document.getElementById('productDropdown');

searchInput.addEventListener('input', function() {
    const q = this.value.toLowerCase().trim();
    if (!q) { dropdown.style.display='none'; selectedProduct=null; return; }
    const matches = PRODUCTS.filter(p => p.name.toLowerCase().includes(q) || p.sku.toLowerCase().includes(q)).slice(0,8);
    if (!matches.length) { dropdown.style.display='none'; return; }
    dropdown.innerHTML = matches.map(p => `<button type="button" class="list-group-item list-group-item-action py-2" onclick="selectProduct(${p.id})" style="font-size:13px;background:var(--card-bg);border-color:var(--border-c)"><div class="d-flex justify-content-between"><strong>${p.name}</strong><small class="text-muted">${p.stock} in stock</small></div><small class="text-muted">${p.sku} — $${parseFloat(p.cost_usd).toFixed(4)} cost</small></button>`).join('');
    dropdown.style.display = 'block';
});
document.addEventListener('click', e => { if (!searchInput.contains(e.target) && !dropdown.contains(e.target)) dropdown.style.display='none'; });

function selectProduct(id) { selectedProduct = PRODUCTS.find(p=>p.id===id); searchInput.value=selectedProduct.name; dropdown.style.display='none'; }
function addSelectedProduct() {
    if (!selectedProduct) { alert('Please select a product first.'); return; }
    const existing = cart.find(i=>i.id===selectedProduct.id);
    if (existing) { existing.qty++; } else { cart.push({...selectedProduct, qty:1, price_local:selectedProduct.cost_local, price_usd:selectedProduct.cost_usd}); }
    searchInput.value=''; selectedProduct=null; renderCart();
}
function renderCart() {
    const tbody = document.getElementById('poBody');
    document.getElementById('poSection').style.display = cart.length?'block':'none';
    document.getElementById('emptyPo').style.display   = cart.length?'none':'block';
    document.getElementById('submitBtn').disabled = cart.length===0;
    tbody.innerHTML = cart.map((item,i) => `<tr>
        <td><input type="hidden" name="items[${i}][product_id]" value="${item.id}"><div style="font-size:13px;font-weight:600">${item.name}</div><div style="font-size:11px;color:var(--text-muted-c)">${item.sku}</div></td>
        <td style="width:80px"><input type="number" name="items[${i}][quantity]" class="form-control form-control-sm" value="${item.qty}" min="1" oninput="updateQty(${i},this.value)" style="width:70px"></td>
        <td style="width:110px"><input type="number" name="items[${i}][unit_price_local]" class="form-control form-control-sm" value="${item.price_local}" step="0.01" min="0" oninput="updatePL(${i},this.value)" style="width:100px"></td>
        <td style="width:110px"><input type="number" name="items[${i}][unit_price_usd]" class="form-control form-control-sm" value="${item.price_usd}" step="0.0001" min="0" oninput="updatePU(${i},this.value)" style="width:100px"></td>
        <td style="font-size:13px;font-weight:600">$${(item.price_usd*item.qty).toFixed(2)}</td>
        <td><button type="button" class="btn btn-sm btn-icon btn-outline-danger" onclick="removeItem(${i})"><i class="bi bi-trash"></i></button></td>
    </tr>`).join('');
    updateTotals();
}
function updateQty(i,v){cart[i].qty=Math.max(1,parseInt(v)||1);renderCart();}
function updatePL(i,v){cart[i].price_local=parseFloat(v)||0;updateTotals();}
function updatePU(i,v){cart[i].price_usd=parseFloat(v)||0;updateTotals();}
function removeItem(i){cart.splice(i,1);renderCart();}
function updateTotals(){
    const tL=cart.reduce((s,i)=>s+i.price_local*i.qty,0);
    const tU=cart.reduce((s,i)=>s+i.price_usd*i.qty,0);
    document.getElementById('poTotalLocal').textContent='LRD '+tL.toFixed(2);
    document.getElementById('poTotalUsd').textContent='$'+tU.toFixed(2);
}
</script>
@endpush