@extends('layouts.app')
@section('title', 'New Purchase Order')

@include('inventory.accounting.partials.styles')

@section('content')
<div class="acc-header">
    <div><h1>New Purchase Order</h1><p>Order stock from a vendor. Receiving the PO posts to inventory and accounts payable.</p></div>
    <a href="{{ route('inventory.purchase_orders.index') }}" class="acc-btn"><i class="fas fa-arrow-left"></i> Back</a>
</div>

@if($errors->any())<div class="acc-card" style="color:var(--danger,#ff4757);">@foreach($errors->all() as $e)<div>{{ $e }}</div>@endforeach</div>@endif

<form method="POST" action="{{ route('inventory.purchase_orders.store') }}" class="acc-card" id="po-form">
    @csrf
    <div class="acc-form-row">
        <label>Vendor
            <select name="vendor_id" class="acc-select">
                <option value="">— select vendor —</option>
                @foreach($vendors as $v)<option value="{{ $v->id }}">{{ $v->name }}</option>@endforeach
            </select>
        </label>
        <label>Order Date <input type="date" required name="order_date" value="{{ now()->toDateString() }}" class="acc-input"></label>
        <label>Expected At <input type="date" name="expected_at" class="acc-input"></label>
    </div>

    <h2 style="margin-top:1.5rem;">Line Items</h2>
    <table class="acc-table">
        <thead><tr><th style="width:40%;">Product</th><th>Name on PO</th><th class="num">Qty</th><th class="num">Unit Cost</th><th class="num">Total</th><th></th></tr></thead>
        <tbody id="po-items">
            <tr class="po-line">
                <td>
                    <select name="items[0][product_id]" class="acc-select po-product" style="min-width:100%;">
                        <option value="">— optional —</option>
                        @foreach($products as $p)<option value="{{ $p->id }}" data-name="{{ $p->name }}" data-cost="{{ $p->cost_price }}">{{ $p->name }}</option>@endforeach
                    </select>
                </td>
                <td><input type="text" required name="items[0][product_name]" class="acc-input po-name" style="min-width:180px;"></td>
                <td class="num"><input type="number" required min="1" name="items[0][quantity_ordered]" value="1" class="acc-input po-qty" style="min-width:80px;text-align:right;"></td>
                <td class="num"><input type="number" required step="0.01" min="0" name="items[0][unit_cost]" value="0" class="acc-input po-cost" style="min-width:100px;text-align:right;"></td>
                <td class="num po-linetotal">0.00</td>
                <td><button type="button" class="acc-btn acc-btn-ghost po-remove" style="padding:0.25rem 0.5rem;">×</button></td>
            </tr>
        </tbody>
    </table>

    <div class="acc-form-row" style="margin-top:1rem;">
        <label>Tax Amount <input type="number" step="0.01" min="0" name="tax_amount" value="0" class="acc-input" id="po-tax"></label>
        <label>Shipping Cost <input type="number" step="0.01" min="0" name="shipping_cost" value="0" class="acc-input" id="po-ship"></label>
        <label>Total <input type="text" readonly class="acc-input" id="po-total" value="0.00" style="font-weight:700;"></label>
        <label style="grid-column:1/-1;">Notes <textarea name="notes" rows="2" class="acc-input" style="min-width:100%;"></textarea></label>
    </div>

    <div style="display:flex;gap:0.5rem;margin-top:1rem;">
        <button type="button" id="po-add" class="acc-btn">+ Add Item</button>
        <button class="acc-btn acc-btn-primary">Create PO</button>
    </div>
</form>

<script>
(function() {
    const tbody = document.getElementById('po-items');
    const addBtn = document.getElementById('po-add');
    const taxEl = document.getElementById('po-tax');
    const shipEl = document.getElementById('po-ship');
    const totalEl = document.getElementById('po-total');
    let idx = 1;

    function recalc() {
        let sub = 0;
        tbody.querySelectorAll('tr.po-line').forEach(tr => {
            const q = parseFloat(tr.querySelector('.po-qty').value || 0);
            const c = parseFloat(tr.querySelector('.po-cost').value || 0);
            const lt = q * c;
            tr.querySelector('.po-linetotal').textContent = lt.toFixed(2);
            sub += lt;
        });
        const tax = parseFloat(taxEl.value || 0);
        const ship = parseFloat(shipEl.value || 0);
        totalEl.value = (sub + tax + ship).toFixed(2);
    }

    function attach() {
        tbody.querySelectorAll('tr.po-line').forEach(tr => {
            tr.querySelector('.po-qty').oninput = recalc;
            tr.querySelector('.po-cost').oninput = recalc;
            tr.querySelector('.po-product').onchange = function() {
                const opt = this.options[this.selectedIndex];
                if (opt.value) {
                    tr.querySelector('.po-name').value = opt.dataset.name;
                    tr.querySelector('.po-cost').value = parseFloat(opt.dataset.cost || 0);
                    recalc();
                }
            };
            tr.querySelector('.po-remove').onclick = function() {
                if (tbody.querySelectorAll('tr.po-line').length > 1) {
                    tr.remove();
                    recalc();
                }
            };
        });
    }

    addBtn.onclick = function() {
        const clone = tbody.querySelector('tr.po-line').cloneNode(true);
        clone.querySelectorAll('input, select').forEach(el => {
            el.value = el.name && el.name.includes('quantity') ? '1' : (el.tagName === 'SELECT' ? '' : '');
            el.name = el.name.replace(/\[\d+\]/, '[' + idx + ']');
        });
        tbody.appendChild(clone);
        idx++;
        attach();
    };

    taxEl.oninput = recalc;
    shipEl.oninput = recalc;
    attach();
    recalc();
})();
</script>
@endsection