@extends('procurement::layouts.master')
@section('title','New Invoice')
@section('content')
@php $invoice = null; @endphp
<h1 class="h3 mb-4">New Invoice</h1>
<form enctype="multipart/form-data" method="POST" action="{{ route('procurement.invoices.store') }}">
@csrf
<div class="card shadow mb-4"><div class="card-body">
    @include('procurement::invoices._form')
</div></div>

<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">Parts on this Invoice <small class="text-muted font-weight-normal">(optional — used for purchase history and inventory)</small></h6>
        <button type="button" class="btn btn-sm btn-outline-dark" id="add-line">+ Add Part</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:45%">Component</th><th style="width:10%">Qty</th><th style="width:13%">Unit Price</th><th style="width:12%">Tariff $</th><th style="width:12%">Extended</th><th style="width:5%"></th></tr></thead>
            <tbody id="lines-body"></tbody>
        </table>
        </div>
    </div>
    <div class="card-footer py-2">
        <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="add_to_stock" name="add_to_stock" value="1" checked>
            <label class="custom-control-label" for="add_to_stock"><strong>Add quantities to stock</strong> — parts will be received into inventory with stock movement records</label>
        </div>
    </div>
</div>

<button type="submit" class="btn btn-dark">Save Invoice</button>
<a href="{{ route('procurement.invoices.index') }}" class="btn btn-link">Cancel</a>
</form>
@endsection

@push('scripts')
<script>
var lineIdx = 0;
var componentOptions = `<option value="">— Select component —</option>@foreach($components as $c)<option value="{{ $c->id }}" data-price="{{ $c->unit_cost }}">{{ addslashes(($c->part_number ? $c->part_number.' — ' : '').Str::limit($c->description,50)) }}</option>@endforeach`;

function addLine() {
    var i = lineIdx++;
    var row = document.createElement('tr');
    row.className = 'line-row';
    row.innerHTML =
        '<td><select name="lines[' + i + '][component_id]" class="form-control form-control-sm component-select">' + componentOptions + '</select></td>' +
        '<td><input type="number" name="lines[' + i + '][qty]" class="form-control form-control-sm qty-input" value="1" min="1"></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"></td>' +
        '<td><input type="number" name="lines[' + i + '][tariff]" 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><button type="button" class="btn btn-xs btn-outline-danger remove-line">&times;</button></td>';
    document.getElementById('lines-body').appendChild(row);
    bindRow(row);
}

function updateRow(row) {
    var qty    = parseFloat(row.querySelector('.qty-input').value) || 0;
    var price  = parseFloat(row.querySelector('.price-input').value) || 0;
    var tariff = parseFloat(row.querySelector('.tariff-input').value) || 0;
    row.querySelector('.line-extended').textContent = '$' + (qty * price + tariff).toFixed(2);
}

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

document.getElementById('add-line').addEventListener('click', addLine);
</script>
@endpush