@extends('procurement::layouts.master')
@section('title','New Purchase Order')
@section('content')
<h1 class="h3 mb-4">New Purchase Order</h1>
<form method="POST" action="{{ route('procurement.orders.store') }}" id="po-form">
@csrf
<div class="row">
    <div class="col-lg-8">
        <div class="card shadow mb-4">
            <div class="card-header"><h6 class="m-0 font-weight-bold">Order Details</h6></div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3"><div class="form-group"><label>PO Number <span class="text-danger">*</span></label><input type="text" name="po_number" class="form-control" value="{{ old('po_number',$nextPo) }}" required></div></div>
                    <div class="col-md-4"><div class="form-group"><label>Supplier</label>
                        <select name="supplier_id" class="form-control"><option value="">— None —</option>
                        @foreach($suppliers as $s)<option value="{{ $s->id }}" {{ old('supplier_id')==$s->id?'selected':'' }}>{{ $s->name }}</option>@endforeach</select>
                    </div></div>
                    <div class="col-md-3"><div class="form-group"><label>Project</label>
                        <select name="project_id" class="form-control"><option value="">— None —</option>
                        @foreach($projects as $p)<option value="{{ $p->id }}" {{ old('project_id')==$p->id?'selected':'' }}>{{ $p->name }}</option>@endforeach</select>
                    </div></div>
                    <div class="col-md-2"><div class="form-group"><label>Run</label>
                        <select name="run_id" class="form-control"><option value="">— None —</option>
                        @foreach($runs as $r)<option value="{{ $r->id }}" {{ old('run_id')==$r->id?'selected':'' }}>{{ $r->project->name }} / {{ $r->run_number }}</option>@endforeach</select>
                    </div></div>
                </div>
                <div class="row">
                    <div class="col-md-2"><div class="form-group"><label>Status</label>
                        <select name="status" class="form-control">
                            @foreach(['draft','ordered','partial','received','cancelled'] as $s)<option value="{{ $s }}" {{ old('status','draft')==$s?'selected':'' }}>{{ ucfirst($s) }}</option>@endforeach
                        </select>
                    </div></div>
                    <div class="col-md-2"><div class="form-group"><label>Currency</label>
                        <select name="currency" class="form-control">
                            @foreach(['USD','CNY','EUR','JPY','GBP'] as $c)<option value="{{ $c }}" {{ old('currency','USD')==$c?'selected':'' }}>{{ $c }}</option>@endforeach
                        </select>
                    </div></div>
                    <div class="col-md-2"><div class="form-group"><label>Exch. Rate</label><input type="number" name="exchange_rate" class="form-control" value="{{ old('exchange_rate',1) }}" step="0.000001" min="0"></div></div>
                    <div class="col-md-2"><div class="form-group"><label>Order Date <span class="text-danger">*</span></label><input type="date" name="order_date" class="form-control" value="{{ old('order_date',date('Y-m-d')) }}" required></div></div>
                    <div class="col-md-2"><div class="form-group"><label>Purchase Date</label><input type="date" name="purchase_date" class="form-control" value="{{ old('purchase_date') }}"></div></div>
                    <div class="col-md-2"><div class="form-group"><label>Expected Delivery</label><input type="date" name="expected_delivery" class="form-control" value="{{ old('expected_delivery') }}"></div></div>
                </div>
                <div class="row">
                    <div class="col-md-2"><div class="form-group"><label>Shipping ($)</label><input type="number" name="shipping_cost" class="form-control" id="shipping" value="{{ old('shipping_cost',0) }}" step="0.01" min="0"></div></div>
                    <div class="col-md-2"><div class="form-group"><label>Tax ($)</label><input type="number" name="tax_amount" class="form-control" id="tax" value="{{ old('tax_amount',0) }}" step="0.01" min="0"></div></div>
                    <div class="col-md-2"><div class="form-group"><label>Tariff ($)</label><input type="number" name="tariff_amount" class="form-control" id="po_tariff" value="{{ old('tariff_amount',0) }}" step="0.01" min="0"></div></div>
                    <div class="col-md-3"><div class="form-group"><label>Tracking #</label><input type="text" name="tracking_number" class="form-control" value="{{ old('tracking_number') }}"></div></div>
                    <div class="col-md-3"><div class="form-group"><label>Notes</label><textarea name="notes" class="form-control" rows="1">{{ old('notes') }}</textarea></div></div>
                </div>
            </div>
        </div>

        <!-- Line Items -->
        <div class="card shadow mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h6 class="m-0 font-weight-bold">Line Items</h6>
                <button type="button" class="btn btn-sm btn-outline-dark" id="add-line">+ Add Line</button>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                <table class="table table-sm mb-0">
                    <thead class="thead-light"><tr><th style="width:32%">Component</th><th style="width:8%">Qty</th><th style="width:10%">Unit Price</th><th style="width:8%">MOQ</th><th style="width:8%">Replenish</th><th style="width:8%">Tariff $</th><th style="width:10%">Extended</th><th style="width:8%">Notes</th><th style="width:5%"></th></tr></thead>
                    <tbody id="lines-body">
                        <tr class="line-row">
                            <td><select name="lines[0][component_id]" class="form-control form-control-sm component-select"><option value="">— Free text —</option>@foreach($components as $c)<option value="{{ $c->id }}" data-price="{{ $c->unit_cost }}" data-moq="{{ $c->moq }}" data-replenish="{{ $c->replenish_qty }}">{{ $c->ref_designator ? $c->ref_designator.' — ':'' }}{{ Str::limit($c->description,45) }}</option>@endforeach</select></td>
                            <td><input type="number" name="lines[0][qty_ordered]" class="form-control form-control-sm qty-input" value="1" min="1" required></td>
                            <td><input type="number" name="lines[0][unit_price]" class="form-control form-control-sm price-input" value="0" step="0.0001" min="0" required></td>
                            <td><input type="number" name="lines[0][moq]" class="form-control form-control-sm moq-input" value="1" min="1"></td>
                            <td><input type="number" name="lines[0][replenish_qty]" class="form-control form-control-sm" value="0" min="0"></td>
                            <td><input type="number" name="lines[0][tariff_amount]" class="form-control form-control-sm tariff-input" value="0" step="0.01" min="0"></td>
                            <td class="line-extended align-middle font-weight-bold">$0.00</td>
                            <td><input type="text" name="lines[0][notes]" class="form-control form-control-sm" placeholder="Notes"></td>
                            <td><button type="button" class="btn btn-xs btn-outline-danger remove-line">✕</button></td>
                        </tr>
                    </tbody>
                    <tfoot class="thead-light">
                        <tr><td colspan="6" class="text-right font-weight-bold">Lines Total:</td><td id="lines-total" class="font-weight-bold">$0.00</td><td colspan="2"></td></tr>
                        <tr><td colspan="6" class="text-right font-weight-bold">PO Total (+ ship/tax/tariff):</td><td id="po-grand-total" class="font-weight-bold text-dark">$0.00</td><td colspan="2"></td></tr>
                    </tfoot>
                </table>
                </div>
            </div>
        </div>
    </div>
</div>
<button type="submit" class="btn btn-dark btn-lg">Create Purchase Order</button>
<a href="{{ route('procurement.orders.index') }}" class="btn btn-link">Cancel</a>
</form>
@endsection

@push('scripts')
<script>
let idx = 1;

function buildLineRow(i) {
    return `<tr class="line-row">
        <td><select name="lines[${i}][component_id]" class="form-control form-control-sm component-select">
            <option value="">— Free text —</option>
            @foreach($components as $c)
            <option value="{{ $c->id }}" data-price="{{ $c->unit_cost }}" data-moq="{{ $c->moq }}" data-replenish="{{ $c->replenish_qty }}">{{ addslashes(($c->ref_designator ? $c->ref_designator.' — ':'').Str::limit($c->description,45)) }}</option>
            @endforeach
        </select></td>
        <td><input type="number" name="lines[${i}][qty_ordered]" class="form-control form-control-sm qty-input" value="1" min="1" required></td>
        <td><input type="number" name="lines[${i}][unit_price]" class="form-control form-control-sm price-input" value="0" step="0.0001" min="0" required></td>
        <td><input type="number" name="lines[${i}][moq]" class="form-control form-control-sm moq-input" value="1" min="1"></td>
        <td><input type="number" name="lines[${i}][replenish_qty]" class="form-control form-control-sm" value="0" min="0"></td>
        <td><input type="number" name="lines[${i}][tariff_amount]" class="form-control form-control-sm tariff-input" value="0" step="0.01" min="0"></td>
        <td class="line-extended align-middle font-weight-bold">$0.00</td>
        <td><input type="text" name="lines[${i}][notes]" class="form-control form-control-sm" placeholder="Notes"></td>
        <td><button type="button" class="btn btn-xs btn-outline-danger remove-line">✕</button></td>
    </tr>`;
}

function updateTotals() {
    let linesTotal = 0;
    document.querySelectorAll('.line-row').forEach(row => {
        const qty    = parseFloat(row.querySelector('.qty-input').value)   || 0;
        const price  = parseFloat(row.querySelector('.price-input').value) || 0;
        const tariff = parseFloat(row.querySelector('.tariff-input').value)|| 0;
        const ext    = qty * price + tariff;
        row.querySelector('.line-extended').textContent = '$' + ext.toFixed(2);
        linesTotal += ext;
    });
    const ship   = parseFloat(document.getElementById('shipping').value)  || 0;
    const tax    = parseFloat(document.getElementById('tax').value)       || 0;
    const tariff = parseFloat(document.getElementById('po_tariff').value) || 0;
    document.getElementById('lines-total').textContent    = '$' + linesTotal.toFixed(2);
    document.getElementById('po-grand-total').textContent = '$' + (linesTotal + ship + tax + tariff).toFixed(2);
}

function bindRow(row) {
    row.querySelector('.component-select').addEventListener('change', function() {
        const opt = this.options[this.selectedIndex];
        if (opt.dataset.price) row.querySelector('.price-input').value = opt.dataset.price;
        if (opt.dataset.moq)   row.querySelector('.moq-input').value   = opt.dataset.moq;
        updateTotals();
    });
    row.querySelectorAll('.qty-input,.price-input,.tariff-input').forEach(el => el.addEventListener('input', updateTotals));
    row.querySelector('.remove-line').addEventListener('click', function() {
        if (document.querySelectorAll('.line-row').length > 1) { row.remove(); updateTotals(); }
    });
}

document.getElementById('add-line').addEventListener('click', () => {
    const tbody = document.getElementById('lines-body');
    tbody.insertAdjacentHTML('beforeend', buildLineRow(idx++));
    bindRow(tbody.lastElementChild);
    updateTotals();
});

document.querySelectorAll('.line-row').forEach(bindRow);
document.querySelectorAll('#shipping,#tax,#po_tariff').forEach(el => el.addEventListener('input', updateTotals));
updateTotals();
</script>
@endpush