@extends('layouts.app')

@section('title', $invoice?->exists ? __('Edit Sale') : __('New Sale'))

@section('content')
<form method="POST" action="{{ $invoice?->exists ? route('invoices.update', $invoice) : route('invoices.store') }}" id="sale-form">
    @csrf
    @if($invoice?->exists) @method('PUT') @endif
    <div class="row g-3">
        <div class="col-lg-8">
            <div class="card"><div class="card-body p-3 p-md-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-cart-plus text-success me-2"></i>{{ __('Sale Items') }}</h6>
                        <div class="help-text">{{ __('Search by product name or SKU, click the item, then change quantity if needed.') }}</div>
                    </div>
                    <a href="{{ route('products.create') }}" class="btn btn-outline-success btn-sm"><i class="fa-solid fa-box-open"></i> {{ __('Add New Product') }}</a>
                </div>

                <div class="search-panel mb-3">
                    <input id="product-search" class="form-control form-control-lg" autocomplete="off" placeholder="{{ __('Search products by name or SKU') }}">
                    <div id="product-results" class="search-results d-none"></div>
                </div>

                <div class="table-responsive">
                    <table class="table" id="items-table">
                        <thead><tr><th>{{ __('Product') }}</th><th>{{ __('Stock') }}</th><th>{{ __('Unit') }}</th><th>{{ __('Qty') }}</th><th>{{ __('Price') }}</th><th>{{ __('Total') }}</th><th></th></tr></thead>
                        <tbody></tbody>
                    </table>
                </div>
                <button type="button" id="add-first-product" class="btn btn-light btn-sm"><i class="fa-solid fa-magnifying-glass"></i> {{ __('Search and add item') }}</button>
            </div></div>
        </div>
        <div class="col-lg-4"><div class="card"><div class="card-body p-4">
            <label class="form-label">{{ __('Sale Type') }}</label>
            <select name="sale_type" id="sale-type" class="form-select mb-3"><option value="retail" @selected(old('sale_type', $invoice->sale_type ?? 'retail') === 'retail')>{{ __('Retail') }}</option><option value="wholesale" @selected(old('sale_type', $invoice->sale_type ?? 'retail') === 'wholesale')>{{ __('Wholesale') }}</option></select>

            <div class="d-flex justify-content-between align-items-center mb-1">
                <label class="form-label mb-0">{{ __('Customer') }}</label>
                <button type="button" class="btn btn-outline-success btn-sm" data-mdb-toggle="modal" data-mdb-target="#quickCustomerModal"><i class="fa-solid fa-user-plus"></i> {{ __('Quick Add') }}</button>
            </div>
            <select name="customer_id" id="customer-id" class="form-select mb-2">
                    <option value="">{{ __('Walk-in / No Account') }}</option>
                @foreach($customers as $customer)
                    <option value="{{ $customer->id }}" data-type="{{ $customer->type }}" data-phone="{{ $customer->phone }}" data-balance="{{ $customer->balance }}" @selected(old('customer_id', $invoice->customer_id ?? '') == $customer->id)>{{ $customer->name }} - {{ ucfirst($customer->type) }}</option>
                @endforeach
            </select>
            <div id="walk-in-details" class="row g-2 mb-3"><div class="col-7"><input name="walk_in_name" class="form-control" value="{{ old('walk_in_name', $invoice->walk_in_name ?? '') }}" placeholder="{{ __('Walk-in Name') }}"></div><div class="col-5"><input name="walk_in_phone" class="form-control" value="{{ old('walk_in_phone', $invoice->walk_in_phone ?? '') }}" placeholder="{{ __('Phone') }}"></div></div>

            <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', $invoice->currency_code ?? null) ? old('currency_code', $invoice->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="invoice_date" class="form-control mb-3" value="{{ old('invoice_date', ($invoice->invoice_date ?? now())->toDateString()) }}">
            <label class="form-label">{{ __('Previous Balance') }}</label><input type="number" name="previous_balance" id="previous-balance" class="form-control mb-3" value="{{ old('previous_balance', $invoice->previous_balance ?? 0) }}" min="0" step="0.01" @if(! $invoice?->exists) readonly @endif>
            <label class="form-label">{{ __('Discount') }}</label><input type="number" name="discount" id="discount" class="form-control mb-3" value="{{ old('discount', $invoice->discount ?? 0) }}" min="0" step="0.01">
            <hr><div class="d-flex justify-content-between"><span>{{ __('Subtotal') }}</span><strong id="subtotal">0.00</strong></div><div class="d-flex justify-content-between mt-2"><span>{{ __('Previous Balance') }}</span><strong id="previous-balance-total">0.00</strong></div><div class="d-flex justify-content-between mt-2 fs-5"><strong>{{ __('Total Outstanding Before Payment') }}</strong><strong id="grand-total">0.00</strong></div>
            <label class="form-label mt-3">{{ __('Amount Paid Now') }}</label><input type="number" name="paid_amount" class="form-control" value="{{ old('paid_amount', $invoice->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>
            <label class="form-label mt-3">{{ __('Notes') }}</label><textarea name="notes" class="form-control" rows="2">{{ old('notes', $invoice->notes ?? '') }}</textarea>
            <button class="btn btn-success w-100 mt-4"><i class="fa-solid fa-check me-1"></i>{{ $invoice?->exists ? __('Update Invoice') : __('Create Invoice') }}</button>
        </div></div></div>
    </div>
</form>

<div class="modal fade" id="quickCustomerModal" 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-user-plus text-success me-2"></i>{{ __('Quick Add Customer') }}</h5><button type="button" class="btn-close" data-mdb-dismiss="modal"></button></div>
        <form id="quick-customer-form">
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-md-7"><label class="form-label">{{ __('Customer 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">{{ __('Type') }}</label><select name="type" class="form-select"><option value="retail">{{ __('Retail') }}</option><option value="wholesale">{{ __('Wholesale') }}</option></select></div>
                    <div class="col-md-6"><label class="form-label">{{ __('Credit Limit') }}</label><input name="credit_limit" type="number" step="0.01" min="0" class="form-control" value="0"></div>
                    <div class="col-md-6"><label class="form-label">{{ __('Opening Balance') }}</label><input name="opening_balance" type="number" step="0.01" min="0" class="form-control" value="0"></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 Customer') }}</button></div>
        </form>
    </div></div>
</div>
@endsection

@push('scripts')
<script>
const products = @json($productsForSale);
const units = @json($unitsForSale);
const initialItems = @json($invoiceItems);
const invoiceExists = @json((bool) $invoice?->exists);
let rowNo = 0;
const tbody = document.querySelector('#items-table tbody');
const typeSelect = document.querySelector('#sale-type');
const searchInput = document.querySelector('#product-search');
const resultsBox = document.querySelector('#product-results');

function money(n){ return (Number(n)||0).toFixed(2); }
function basePriceFor(product){ return typeSelect.value === 'wholesale' ? Number(product.wholesale) : Number(product.retail); }
function factorFor(product, unit){ if(!product || typeSelect.value === 'wholesale') return 1; const saleUnit = (product.sale_units || []).find(item => item.unit === unit); return Number(saleUnit?.factor) || 1; }
function defaultPriceFor(product, unit){ return product ? basePriceFor(product) * factorFor(product, unit) : 0; }
function unitName(short){ const unit = units.find(item => item.short === short); return unit ? unit.name : short; }
function unitOptions(product, selected){ const saleUnits = product?.sale_units?.length ? product.sale_units : [{unit: product?.unit, factor: 1}]; const hasSelected = saleUnits.some(item => item.unit === selected); const options = saleUnits.map(item => `<option value="${item.unit}" ${item.unit === selected ? 'selected' : ''}>${unitName(item.unit)}</option>`); if(selected && !hasSelected) options.push(`<option value="${selected}" selected>${unitName(selected)}</option>`); return options.join(''); }
function updateTotals() {
    let subtotal = 0;
    document.querySelectorAll('#items-table tbody tr').forEach((row) => {
        const product = products.find((item) => item.id == row.dataset.productId);
        const quantity = Number(row.querySelector('.quantity').value) || 0;
        if(product && typeSelect.value === 'wholesale') {
            row.querySelector('.sale-unit').value = product.unit;
        }
        const priceInput = row.querySelector('.unit-price');
        if(product && priceInput.dataset.custom !== '1') {
            priceInput.value = money(defaultPriceFor(product, row.querySelector('.sale-unit').value));
        }
        const price = Number(priceInput.value) || 0;
        row.querySelector('.stock').textContent = product ? `${product.stock} ${product.unit || ''}` : '-';
        row.querySelector('.sale-unit').classList.toggle('bg-light', typeSelect.value === 'wholesale');
        const lineTotal = quantity * price;
        row.querySelector('.line-total').textContent = money(lineTotal);
        subtotal += lineTotal;
    });
    const previousBalance = Number(document.querySelector('#previous-balance').value) || 0;
    const total = Math.max(0, subtotal + previousBalance - (Number(document.querySelector('#discount').value) || 0));
    document.querySelector('#subtotal').textContent = money(subtotal);
    document.querySelector('#previous-balance-total').textContent = money(previousBalance);
    document.querySelector('#grand-total').textContent = money(total);
}
function addProduct(productId, initial = null){
    const product = products.find(p=>p.id==productId);
    if(!product) return;
    const existing = [...tbody.querySelectorAll('tr')].find(r=>r.dataset.productId==productId);
    if(existing && !initial){ existing.querySelector('.quantity').value = Number(existing.querySelector('.quantity').value || 0) + 1; updateTotals(); return; }
    const index = rowNo++;
    const selectedUnit = initial?.unit || product.unit || (units[0] ? units[0].short : '');
    const selectedQuantity = initial?.quantity || 1;
    const selectedPrice = initial?.unit_price ?? defaultPriceFor(product, selectedUnit);
    tbody.insertAdjacentHTML('beforeend', `<tr data-product-id="${product.id}"><td><input type="hidden" name="items[${index}][product_id]" value="${product.id}"><strong>${product.name}</strong><small class="d-block text-muted">${product.sku || ''}</small></td><td class="stock text-muted">${product.stock} ${product.unit || ''}</td><td><select name="items[${index}][unit]" class="form-select sale-unit">${unitOptions(product, selectedUnit)}</select></td><td><input name="items[${index}][quantity]" class="form-control quantity" type="number" step="0.01" min="0.01" value="${selectedQuantity}" required></td><td><input name="items[${index}][unit_price]" class="form-control unit-price" type="number" step="0.01" min="0" value="${money(selectedPrice)}" data-custom="${initial ? '1' : '0'}" required></td><td class="line-total">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>`);
    const row = tbody.lastElementChild;
    row.querySelector('.sale-unit').addEventListener('change', (event) => { row.querySelector('.unit-price').value = money(defaultPriceFor(product, event.target.value)); row.querySelector('.unit-price').dataset.custom = '0'; updateTotals(); });
    row.querySelector('.quantity').addEventListener('input', updateTotals);
    row.querySelector('.unit-price').addEventListener('input', (event) => { event.target.dataset.custom = '1'; updateTotals(); });
    row.querySelector('.remove').addEventListener('click', () => { row.remove(); updateTotals(); });
    searchInput.value=''; resultsBox.classList.add('d-none'); updateTotals();
}
function renderResults(){
    const term = searchInput.value.trim().toLowerCase();
    const filtered = products.filter(p => `${p.name} ${p.sku}`.toLowerCase().includes(term)).slice(0, 20);
    if(!term || filtered.length===0){ resultsBox.classList.add('d-none'); resultsBox.innerHTML=''; return; }
    resultsBox.innerHTML = filtered.map(p => `<div class="search-item" data-id="${p.id}"><div><strong>${p.name}</strong><small class="d-block text-muted">${p.sku || ''} - ${p.stock} ${p.unit || ''}</small></div><div class="text-end"><span class="badge badge-soft">${money(basePriceFor(p))}</span><small class="d-block text-muted">{{ __('Click to add') }}</small></div></div>`).join('');
    resultsBox.classList.remove('d-none');
}
searchInput.addEventListener('input', renderResults);
searchInput.addEventListener('focus', renderResults);
resultsBox.addEventListener('click', e=>{ const item=e.target.closest('.search-item'); if(item) addProduct(item.dataset.id); });
document.addEventListener('click', e=>{ if(!e.target.closest('.search-panel')) resultsBox.classList.add('d-none'); });
typeSelect.addEventListener('change', updateTotals);
document.querySelector('#discount').addEventListener('input', updateTotals);
document.querySelector('#previous-balance').addEventListener('input', updateTotals);
document.querySelector('#add-first-product').addEventListener('click', ()=>searchInput.focus());

document.querySelector('#customer-id').addEventListener('change', (event) => {
    document.querySelector('#walk-in-details').style.display = event.target.value ? 'none' : 'flex';
    const opt = event.target.selectedOptions[0];
    if(!invoiceExists) {
        document.querySelector('#previous-balance').value = opt && opt.value ? money(opt.dataset.balance) : '0.00';
    }
    if(opt && opt.dataset.type === 'wholesale'){ typeSelect.value='wholesale'; updateTotals(); }
    updateTotals();
});
document.querySelector('#walk-in-details').style.display = document.querySelector('#customer-id').value ? 'none' : 'flex';
if(!invoiceExists) {
    const selectedCustomer = document.querySelector('#customer-id').selectedOptions[0];
    document.querySelector('#previous-balance').value = selectedCustomer && selectedCustomer.value ? money(selectedCustomer.dataset.balance) : money(document.querySelector('#previous-balance').value);
}
initialItems.forEach(item => addProduct(item.product_id, item));
updateTotals();

document.querySelector('#quick-customer-form').addEventListener('submit', async function(e){
    e.preventDefault();
    const form = e.currentTarget;
    const res = await fetch(@json(route('quick.customers.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 customer = await res.json();
    const select = document.querySelector('#customer-id');
    const option = new Option(customer.label, customer.id, true, true);
    option.dataset.type = customer.type; option.dataset.phone = customer.phone || '';
    select.add(option); select.value = customer.id;
    document.querySelector('#walk-in-details').style.display = 'none';
    if(customer.type === 'wholesale'){ typeSelect.value='wholesale'; updateTotals(); }
    closeAppModal(document.getElementById('quickCustomerModal'));
    form.reset(); showNiceToast('{{ __('Customer added successfully.') }}'); playSuccessSound();
});
</script>
@endpush