@extends('layouts.app')
@section('title', $order?->exists ? 'Edit '.$order->po_number : 'New purchase order')

@section('content')
    <div class="page-head">
        <div>
            <h1>{{ $order?->exists ? 'Edit '.$order->po_number : 'New purchase order' }}</h1>
            <p>Order stock from a supplier; receipts post straight into the warehouse.</p>
        </div>
        <div class="page-actions">
            <a href="{{ route('purchase-orders.index') }}" class="btn secondary">Back</a>
        </div>
    </div>

    <form method="POST"
          action="{{ $order?->exists ? route('purchase-orders.update', $order) : route('purchase-orders.store') }}"
          id="po-form">
        @csrf
        @if ($order?->exists) @method('PUT') @endif

        <div class="card mb-2">
            <div class="card-head"><h3>Header</h3></div>
            <div class="card-body">
                <div class="grid grid-4">
                    <div class="field">
                        <label>Supplier</label>
                        <select name="supplier_id">
                            <option value="">None</option>
                            @foreach ($suppliers as $s)
                                <option value="{{ $s->id }}" @selected(old('supplier_id', $order?->supplier_id) == $s->id)>{{ $s->name }}</option>
                            @endforeach
                        </select>
                        @error('supplier_id')<span class="err">{{ $message }}</span>@enderror
                    </div>
                    <div class="field">
                        <label>Destination warehouse</label>
                        <select name="warehouse_id">
                            <option value="">Choose later</option>
                            @foreach ($warehouses as $w)
                                <option value="{{ $w->id }}" @selected(old('warehouse_id', $order?->warehouse_id) == $w->id)>{{ $w->name }}</option>
                            @endforeach
                        </select>
                        <span class="hint">Required before stock can be received.</span>
                    </div>
                    <div class="field">
                        <label>Order date <span class="req">*</span></label>
                        <input type="date" name="order_date" required
                               value="{{ old('order_date', $order?->order_date?->format('Y-m-d') ?? now()->toDateString()) }}">
                        @error('order_date')<span class="err">{{ $message }}</span>@enderror
                    </div>
                    <div class="field">
                        <label>Expected</label>
                        <input type="date" name="expected_date"
                               value="{{ old('expected_date', $order?->expected_date?->format('Y-m-d')) }}">
                        @error('expected_date')<span class="err">{{ $message }}</span>@enderror
                    </div>
                </div>
                <div class="grid grid-2">
                    <div class="field">
                        <label>Tax amount</label>
                        <input type="number" name="tax_amount" step="0.01" min="0"
                               value="{{ old('tax_amount', $order?->tax_amount ?? '0.00') }}">
                    </div>
                    <div class="field">
                        <label>Notes</label>
                        <input type="text" name="notes" maxlength="5000" value="{{ old('notes', $order?->notes) }}">
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-head">
                <h3>Items</h3>
                <button type="button" class="btn xs secondary" id="add-item">+ Add item</button>
            </div>
            <div class="card-body" style="padding:0;">
                <table class="data" id="items-table">
                    <thead>
                    <tr>
                        <th style="width:26%;">Product</th><th>Description</th>
                        <th class="num" style="width:12%;">Qty</th>
                        <th class="num" style="width:14%;">Unit cost</th>
                        <th class="num" style="width:14%;">Amount</th>
                        <th style="width:6%;"></th>
                    </tr>
                    </thead>
                    <tbody id="items-body"></tbody>
                    <tfoot>
                    <tr>
                        <td colspan="4" class="strong">Subtotal</td>
                        <td class="num strong" id="po-subtotal">0.00</td>
                        <td></td>
                    </tr>
                    </tfoot>
                </table>
            </div>
            <div class="card-foot">
                <button type="submit" class="btn">{{ $order?->exists ? 'Save changes' : 'Create purchase order' }}</button>
                @if (! $order?->exists)
                    <button type="submit" name="send" value="1" class="btn secondary">Create &amp; mark sent</button>
                @endif
                <a href="{{ route('purchase-orders.index') }}" class="btn secondary">Cancel</a>
            </div>
        </div>
    </form>

    <template id="item-template">
        <tr>
            <td>
                <select name="items[__i__][product_id]" class="po-product">
                    <option value="">— Free text —</option>
                    @foreach ($products as $p)
                        <option value="{{ $p->id }}" data-cost="{{ $p->cost_price }}">
                            {{ $p->sku ?? '' }} {{ $p->name }}
                        </option>
                    @endforeach
                </select>
            </td>
            <td><input type="text" name="items[__i__][description]" maxlength="180" class="po-desc"
                       placeholder="Item description"></td>
            <td><input type="number" class="num po-qty" step="0.01" min="0.01" required
                       name="items[__i__][quantity]" value="1"></td>
            <td><input type="number" class="num po-cost" step="0.01" min="0" required
                       name="items[__i__][unit_cost]" value="0.00"></td>
            <td class="num po-amount strong">0.00</td>
            <td class="right"><button type="button" class="btn xs danger po-remove">&times;</button></td>
        </tr>
    </template>

    <script>
        (function () {
            var body = document.getElementById('items-body');
            var tpl = document.getElementById('item-template');
            var subtotal = document.getElementById('po-subtotal');

            function renumber() {
                body.querySelectorAll('tr').forEach(function (row, i) {
                    row.querySelectorAll('[name]').forEach(function (el) {
                        el.name = el.name.replace(/items\[\d+\]/, 'items[' + i + ']');
                    });
                });
            }

            function recalc() {
                var total = 0;
                body.querySelectorAll('tr').forEach(function (row) {
                    var q = parseFloat(row.querySelector('.po-qty').value) || 0;
                    var c = parseFloat(row.querySelector('.po-cost').value) || 0;
                    var amt = Math.round(q * c * 100) / 100;
                    row.querySelector('.po-amount').textContent = amt.toFixed(2);
                    total += amt;
                });
                subtotal.textContent = total.toFixed(2);
            }

            function addRow(data) {
                body.insertAdjacentHTML('beforeend', tpl.innerHTML);
                var row = body.lastElementChild;
                if (data) {
                    row.querySelector('.po-product').value = data.product_id || '';
                    row.querySelector('.po-desc').value = data.description || '';
                    row.querySelector('.po-qty').value = data.quantity || 1;
                    row.querySelector('.po-cost').value = data.unit_cost || '0.00';
                }
                renumber();
                recalc();
            }

            document.getElementById('add-item').addEventListener('click', function () { addRow(); });

            body.addEventListener('click', function (e) {
                if (e.target.closest('.po-remove')) {
                    if (body.querySelectorAll('tr').length > 1) {
                        e.target.closest('tr').remove();
                        renumber();
                        recalc();
                    }
                }
            });

            body.addEventListener('input', recalc);

            // Picking a product fills its description and last known cost.
            body.addEventListener('change', function (e) {
                var sel = e.target.closest('.po-product');
                if (!sel) return;
                var opt = sel.options[sel.selectedIndex];
                var row = sel.closest('tr');
                if (opt && opt.value) {
                    var desc = row.querySelector('.po-desc');
                    if (!desc.value) desc.value = opt.textContent.trim();
                    var cost = opt.getAttribute('data-cost');
                    if (cost) row.querySelector('.po-cost').value = cost;
                }
                recalc();
            });

            @if ($order?->exists)
                @foreach ($order->items as $item)
                    {{-- Blade cannot parse a multi-line @json([...]) inside a directive. --}}
                    @php $row = ['product_id' => $item->product_id, 'description' => $item->description,
                                  'quantity' => (float) $item->quantity, 'unit_cost' => (float) $item->unit_cost]; @endphp
                    addRow(@json($row));
                @endforeach
            @else
                addRow();
            @endif
        })();
    </script>
@endsection