@extends('layouts.app')
@section('title', $purchase?->exists ? __('Edit Purchase') : __('New Purchase'))
@section('content')
<form method="POST" action="{{ $purchase?->exists ? route('purchases.update', $purchase) : route('purchases.store') }}" id="purchase-form">
    @csrf
    @if($purchase?->exists) @method('PUT') @endif
    <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 align-items-center mb-3 flex-wrap gap-2">
                    <div>
                        <h6 class="mb-1"><i class="fa-solid fa-dolly text-success me-2"></i>{{ __('Purchase Items') }}</h6>
                        <div class="help-text">{{ __('Choose existing products or type a new product name. Stock is updated automatically.') }}</div>
                    </div>
                    <button type="button" id="add-row" class="btn btn-success btn-sm"><i class="fa-solid fa-plus"></i> {{ __('Add Line') }}</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>{{ __('1 Unit = Base Qty') }}</th><th>{{ __('Cost') }}</th><th>{{ __('Total') }}</th><th></th></tr></thead>
                        <tbody></tbody>
                    </table>
                </div>
                <small class="text-muted">{{ __('For a new product, leave existing product empty and write the new product name.') }}</small>
            </div></div>
        </div>
        <div class="col-lg-4"><div class="card"><div class="card-body p-4">
            <div class="d-flex justify-content-between align-items-center mb-1">
                <label class="form-label mb-0">{{ __('Supplier') }}</label>
                <button type="button" class="btn btn-outline-success btn-sm" data-mdb-toggle="modal" data-mdb-target="#quickSupplierModal"><i class="fa-solid fa-truck-field"></i> {{ __('Quick Add') }}</button>
            </div>
            <select name="supplier_id" id="supplier-id" class="form-select mb-3"><option value="">-</option>@foreach($suppliers as $supplier)<option value="{{ $supplier->id }}" data-phone="{{ $supplier->phone }}" @selected(old('supplier_id', $purchase->supplier_id ?? '') == $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(old('currency_code', $purchase->currency_code ?? null) ? old('currency_code', $purchase->currency_code ?? null) === $currency->code : $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="{{ old('purchase_date', ($purchase->purchase_date ?? now())->toDateString()) }}">
            <label class="form-label">{{ __('Previous Supplier Invoice Balance') }}</label><input type="number" name="previous_balance" id="previous-balance" class="form-control mb-3" value="{{ old('previous_balance', $purchase->previous_balance ?? 0) }}" min="0" step="0.01">
            <label class="form-label">{{ __('Amount Paid Now') }}</label><input type="number" name="paid_amount" class="form-control" value="{{ old('paid_amount', $purchase->paid_amount ?? 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><option value="other">{{ __('Other') }}</option></select>
            <hr><div class="d-flex justify-content-between mt-2"><span>{{ __('Previous Supplier Invoice Balance') }}</span><strong id="previous-balance-total">0.00</strong></div><div class="d-flex justify-content-between fs-5"><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">{{ old('notes', $purchase->notes ?? '') }}</textarea><button class="btn btn-success w-100 mt-4"><i class="fa-solid fa-box-open me-1"></i>{{ $purchase?->exists ? __('Update Purchase') : __('Receive Purchase') }}</button>
        </div></div></div>
    </div>
</form>

<div class="modal fade" id="quickSupplierModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered"><div class="modal-content rounded-6">
        <div class="modal-header"><h5 class="modal-title"><i class="fa-solid fa-truck-field text-success me-2"></i>{{ __('Quick Add Supplier') }}</h5><button type="button" class="btn-close" data-mdb-dismiss="modal"></button></div>
        <form id="quick-supplier-form">
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-md-7"><label class="form-label">{{ __('Supplier Name') }}</label><input name="name" class="form-control" required></div>
                    <div class="col-md-5"><label class="form-label">{{ __('Phone') }}</label><input name="phone" class="form-control"></div>
                    <div class="col-md-6"><label class="form-label">{{ __('Opening Balance') }}</label><input name="opening_balance" type="number" step="0.01" class="form-control" value="0"></div>
                    <div class="col-md-6"><label class="form-label">{{ __('Email') }}</label><input name="email" type="email" class="form-control"></div>
                    <div class="col-12"><label class="form-label">{{ __('Address') }}</label><input name="address" class="form-control"></div>
                </div>
            </div>
            <div class="modal-footer"><button type="button" class="btn btn-light" data-mdb-dismiss="modal">{{ __('Cancel') }}</button><button class="btn btn-success"><i class="fa-solid fa-floppy-disk me-1"></i>{{ __('Save Supplier') }}</button></div>
        </form>
    </div></div>
</div>
@endsection
@push('scripts')
<script>
const products=@json($productsForPurchase), units=@json($unitsForPurchase), initialItems=@json($purchaseItems);
let n=0, body=document.querySelector('#items-table tbody');
function money(x){return (Number(x)||0).toFixed(2)}
function factorFor(product, unit){ if(!product) return 1; if(unit === product.unit) return 1; if(unit === product.purchase_unit) return Number(product.purchase_unit_factor) || 1; return 1; }
function total(){let t=0;body.querySelectorAll('tr').forEach(r=>{let q=+r.querySelector('.qty').value||0,c=+r.querySelector('.cost').value||0,f=+r.querySelector('.factor').value||1,l=q*c;r.querySelector('.base').textContent=money(q*f);r.querySelector('.line').textContent=money(l);t+=l});let previous=+document.querySelector('#previous-balance').value||0;document.querySelector('#previous-balance-total').textContent=money(previous);document.querySelector('#total').textContent=money(t+previous)}
function productOptions(){return ['<option value="">{{ __('New product') }}</option>',...products.map(x=>`<option value="${x.id}">${x.name} (${x.sku})</option>`)].join('')}
function unitOptions(selected=''){return units.map(x=>`<option value="${x.short}" ${x.short===selected?'selected':''}>${x.name}</option>`).join('')}
function row(initial=null){let i=n++;body.insertAdjacentHTML('beforeend',`<tr><td><select name="items[${i}][product_id]" class="form-select product">${productOptions()}</select></td><td><input name="items[${i}][product_name]" class="form-control new-name" placeholder="{{ __('New item name') }}"></td><td><select name="items[${i}][unit]" class="form-select unit">${unitOptions(initial?.unit || '')}</select></td><td><input name="items[${i}][quantity]" class="form-control qty" type="number" value="${initial?.quantity || 1}" min="0.01" step="0.01" required></td><td><input name="items[${i}][unit_factor]" class="form-control factor" type="number" value="${initial?.unit_factor || 1}" min="0.0001" step="0.0001" required><small class="text-muted base d-block">0.00</small></td><td><input name="items[${i}][unit_cost]" class="form-control cost" type="number" value="${initial?.unit_cost || 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;if(initial){r.querySelector('.product').value=initial.product_id || '';r.querySelector('.new-name').value=initial.product_id ? '' : (initial.product_name || '');}r.querySelector('.product').onchange=()=>{let x=products.find(x=>x.id==r.querySelector('.product').value);if(x){let unit=x.purchase_unit||x.unit;r.querySelector('.new-name').value='';r.querySelector('.unit').value=unit;r.querySelector('.factor').value=factorFor(x,unit);r.querySelector('.cost').value=money((Number(x.cost)||0)*(Number(r.querySelector('.factor').value)||1))}total()};r.querySelector('.unit').onchange=()=>{let x=products.find(x=>x.id==r.querySelector('.product').value);r.querySelector('.factor').value=factorFor(x,r.querySelector('.unit').value);if(x)r.querySelector('.cost').value=money((Number(x.cost)||0)*(Number(r.querySelector('.factor').value)||1));total()};r.querySelector('.qty').oninput=total;r.querySelector('.factor').oninput=total;r.querySelector('.cost').oninput=total;r.querySelector('.remove').onclick=()=>{r.remove();total()};total();}
document.querySelector('#add-row').onclick=()=>row();
document.querySelector('#previous-balance').addEventListener('input', total);
if(initialItems.length){initialItems.forEach(item=>row(item));}else{row();}

document.querySelector('#quick-supplier-form').addEventListener('submit', async function(e){
    e.preventDefault();
    const form=e.currentTarget;
    const res=await fetch(@json(route('quick.suppliers.store')), {method:'POST', headers:{'X-CSRF-TOKEN': csrfToken, 'Accept':'application/json'}, body:new FormData(form)});
    if(!res.ok){ showNiceToast('{{ __('Could not save. Please check required fields.') }}','fa-triangle-exclamation'); return; }
    const supplier=await res.json();
    const select=document.querySelector('#supplier-id');
    const option=new Option(supplier.label, supplier.id, true, true); option.dataset.phone=supplier.phone || '';
    select.add(option); select.value=supplier.id;
    closeAppModal(document.getElementById('quickSupplierModal'));
    form.reset(); showNiceToast('{{ __('Supplier added successfully.') }}'); playSuccessSound();
});
</script>
@endpush