@extends('layouts.app')
@section('title', __('New Purchase'))
@section('content')<form method="POST" action="{{ route('purchases.store') }}">@csrf<div class="row g-3"><div class="col-lg-8"><div class="card"><div class="card-body p-4"><div class="d-flex justify-content-between mb-3"><h6>{{ __('Purchase Items') }}</h6><button type="button" id="add-row" class="btn btn-light btn-sm"><i class="fa-solid fa-plus"></i> {{ __('Add Item') }}</button></div><div class="table-responsive"><table class="table" id="items-table"><thead><tr><th>{{ __('Existing Product') }}</th><th>{{ __('New Product Name') }}</th><th>{{ __('Unit') }}</th><th>{{ __('Qty') }}</th><th>{{ __('Cost') }}</th><th>{{ __('Total') }}</th><th></th></tr></thead><tbody></tbody></table></div><small class="text-muted">{{ __('Select an existing product, or type a new product name. New products are created and stock is received automatically.') }}</small></div></div></div><div class="col-lg-4"><div class="card"><div class="card-body p-4"><label class="form-label">{{ __('Supplier') }}</label><select name="supplier_id" class="form-select mb-3"><option value="">—</option>@foreach($suppliers as $supplier)<option value="{{ $supplier->id }}">{{ $supplier->name }}</option>@endforeach</select><label class="form-label">{{ __('Currency') }}</label><select name="currency_code" class="form-select mb-3">@foreach($currencies as $currency)<option value="{{ $currency->code }}" @selected($currency->is_default)>{{ $currency->code }} — {{ $currency->name }}</option>@endforeach</select><label class="form-label">{{ __('Date') }}</label><input type="date" name="purchase_date" class="form-control mb-3" value="{{ now()->toDateString() }}"><label class="form-label">{{ __('Amount Paid Now') }}</label><input type="number" name="paid_amount" class="form-control" value="0" min="0" step="0.01"><select name="payment_method" class="form-select mt-2"><option value="cash">{{ __('Cash') }}</option><option value="bank">{{ __('Bank') }}</option><option value="mobile">{{ __('Mobile Money') }}</option></select><hr><div class="d-flex justify-content-between"><span>{{ __('Total') }}</span><strong id="total">0.00</strong></div><label class="form-label mt-3">{{ __('Notes') }}</label><textarea name="notes" class="form-control" rows="2"></textarea><button class="btn btn-success w-100 mt-4"><i class="fa-solid fa-box-open me-1"></i>{{ __('Receive Purchase') }}</button></div></div></div></div></form>@endsection
@push('scripts')<script>const products=@json($productsForPurchase),units=@json($unitsForPurchase);let n=0,body=document.querySelector('#items-table tbody');function total(){let t=0;body.querySelectorAll('tr').forEach(r=>{let q=+r.querySelector('.qty').value||0,c=+r.querySelector('.cost').value||0,l=q*c;r.querySelector('.line').textContent=l.toFixed(2);t+=l});document.querySelector('#total').textContent=t.toFixed(2)}function row(){let i=n++,p=['<option value="">{{ __('New product') }}</option>',...products.map(x=>`<option value="${x.id}">${x.name} (${x.sku})</option>`)].join(''),u=units.map(x=>`<option value="${x.short}">${x.name}</option>`).join('');body.insertAdjacentHTML('beforeend',`<tr><td><select name="items[${i}][product_id]" class="form-select product">${p}</select></td><td><input name="items[${i}][product_name]" class="form-control new-name"></td><td><select name="items[${i}][unit]" class="form-select unit">${u}</select></td><td><input name="items[${i}][quantity]" class="form-control qty" type="number" value="1" min="0.01" step="0.01" required></td><td><input name="items[${i}][unit_cost]" class="form-control cost" type="number" value="0" min="0" step="0.01" required></td><td class="line">0.00</td><td><button type="button" class="btn btn-light btn-sm remove text-danger"><i class="fa-solid fa-xmark"></i></button></td></tr>`);let r=body.lastElementChild;r.querySelector('.product').onchange=()=>{let x=products.find(x=>x.id==r.querySelector('.product').value);if(x){r.querySelector('.new-name').value='';r.querySelector('.unit').value=x.unit;r.querySelector('.cost').value=x.cost}total()};r.querySelector('.qty').oninput=total;r.querySelector('.cost').oninput=total;r.querySelector('.remove').onclick=()=>{r.remove();total()}}document.querySelector('#add-row').onclick=row;row()</script>@endpush