@extends('procurement::layouts.master')
@section('title','Invoice Preview')
@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3 mb-0">Invoice Preview — {{ $parsed['supplier'] }}</h1>
    <a href="{{ route('procurement.import.invoice') }}" class="btn btn-sm btn-outline-secondary">← Upload Different File</a>
</div>

@if(!empty($parsed['parse_errors']))
    <div class="alert alert-warning">
        <strong>Parse warnings:</strong>
        <ul class="mb-0">@foreach($parsed['parse_errors'] as $e)<li>{{ $e }}</li>@endforeach</ul>
    </div>
@endif

<form method="POST" action="{{ route('procurement.import.invoice.import') }}">
@csrf

<!-- Invoice Header -->
<div class="card shadow mb-4">
    <div class="card-header"><h6 class="m-0 font-weight-bold">Invoice Details — Review & Confirm</h6></div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-3">
                <div class="form-group">
                    <label>Invoice Number <span class="text-danger">*</span></label>
                    <input type="text" name="invoice_number" class="form-control" value="{{ $parsed['invoice_number'] }}" required>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label>Supplier</label>
                    @php
                        $matchedSupplier = $suppliers->first(fn($s) => Str::contains(strtolower($parsed['supplier']), strtolower($s->name)) || Str::contains(strtolower($s->name), strtolower($parsed['supplier'])));
                    @endphp
                    <select name="supplier_id" class="form-control">
                        <option value="">— Match manually —</option>
                        @if(!$matchedSupplier && !empty($parsed['supplier']) && $parsed['supplier'] !== 'Unknown')
                        <option value="__new__" selected>+ Create new: {{ $parsed['supplier'] }}</option>
                        @endif
                        @foreach($suppliers as $s)
                        <option value="{{ $s->id }}" {{ $matchedSupplier && $matchedSupplier->id === $s->id ? 'selected' : '' }}>
                            {{ $s->name }}
                        </option>
                        @endforeach
                    </select>
                    <input type="hidden" name="detected_supplier_name" value="{{ $parsed['supplier'] }}">
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label>Invoice Date <span class="text-danger">*</span></label>
                    <input type="date" name="invoice_date" class="form-control" value="{{ $parsed['invoice_date'] }}" required>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label>Due Date</label>
                    <input type="date" name="due_date" class="form-control">
                </div>
            </div>
            <div class="col-md-1">
                <div class="form-group">
                    <label>Currency</label>
                    <select name="currency" class="form-control">
                        @foreach(['USD','CNY','EUR'] as $c)
                        <option value="{{ $c }}" {{ $parsed['currency']==$c?'selected':'' }}>{{ $c }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-2">
                <div class="form-group">
                    <label>Subtotal ($)</label>
                    <input type="number" name="amount" class="form-control" value="{{ $parsed['subtotal'] }}" step="0.01" min="0" required>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label>Shipping ($)</label>
                    <input type="number" name="shipping" class="form-control" value="{{ $parsed['shipping'] }}" step="0.01" min="0">
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label>Tax ($)</label>
                    <input type="number" name="tax" class="form-control" value="{{ $parsed['tax'] }}" step="0.01" min="0">
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label>Tariff ($)</label>
                    <input type="number" name="tariff" class="form-control" value="{{ $parsed['tariff'] }}" step="0.01" min="0">
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label>Total ($)</label>
                    <input type="number" class="form-control bg-light" value="{{ $parsed['total'] }}" readonly>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label>Notes</label>
                    <textarea name="notes" class="form-control" rows="1" placeholder="Auto-imported from PDF"></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 flex-wrap">
        <h6 class="m-0 font-weight-bold" id="line-items-heading">Line Items ({{ count($parsed['lines']) }} extracted)</h6>
        <div class="d-flex align-items-center mt-2 mt-md-0">
            <input type="text" data-pf-filter="invoice-preview-lines-table" class="form-control form-control-sm mr-2" placeholder="Search..." style="width:180px">
            <button type="button" class="btn btn-xs btn-outline-secondary" onclick="toggleAll(true)">Select All</button>
            <button type="button" class="btn btn-xs btn-outline-secondary" onclick="toggleAll(false)">Deselect All</button>
            <button type="button" class="btn btn-xs btn-primary ml-2" id="add-line-btn"><i class="fas fa-plus mr-1"></i> Add Line</button>
            <span class="ml-3 small">
                <span class="badge badge-success">{{ collect($parsed['lines'])->where('component_matched',true)->count() }}</span> matched
                <span class="badge badge-warning ml-1">{{ collect($parsed['lines'])->where('component_matched',false)->count() }}</span> unmatched
            </span>
        </div>
    </div>
    @if(count($parsed['lines']) === 0)
    <div class="alert alert-info small m-3 mb-0">
        <i class="fas fa-info-circle mr-1"></i>
        Nothing could be extracted automatically from this file — a non-standard layout, a scanned image, etc.
        The invoice details above are still usable; click <strong>Add Line</strong> to type in its components by hand.
    </div>
    @endif
    <div class="card-body p-0">
        <div class="table-responsive">
        <table class="table table-sm mb-0" data-pf-table id="invoice-preview-lines-table">
            <thead class="thead-dark">
                <tr>
                    <th style="width:30px"><input type="checkbox" id="check-all" checked></th>
                    <th data-pf-sort="number">Row # <i class="fas fa-sort text-white-50 pf-sort-icon"></i></th>
                    <th data-pf-sort="text">Supplier Part # <i class="fas fa-sort text-white-50 pf-sort-icon"></i></th>
                    <th data-pf-sort="text">MFG Part # <i class="fas fa-sort text-white-50 pf-sort-icon"></i></th>
                    <th data-pf-sort="text">Description <i class="fas fa-sort text-white-50 pf-sort-icon"></i></th>
                    <th data-pf-sort="text">Manufacturer <i class="fas fa-sort text-white-50 pf-sort-icon"></i></th>
                    <th>COO</th>
                    <th>HTS</th>
                    <th class="text-center" data-pf-sort="number">Qty Ord <i class="fas fa-sort text-white-50 pf-sort-icon"></i></th>
                    <th class="text-center" data-pf-sort="number">Qty Ship <i class="fas fa-sort text-white-50 pf-sort-icon"></i></th>
                    <th class="text-right" data-pf-sort="number">Unit $ <i class="fas fa-sort text-white-50 pf-sort-icon"></i></th>
                    <th class="text-right" data-pf-sort="number">Tariff $ <i class="fas fa-sort text-white-50 pf-sort-icon"></i></th>
                    <th class="text-right" data-pf-sort="number">Extended $ <i class="fas fa-sort text-white-50 pf-sort-icon"></i></th>
                    <th data-pf-sort="text">Matched Component <i class="fas fa-sort text-white-50 pf-sort-icon"></i></th>
                    <th></th>
                </tr>
            </thead>
            <tbody id="lines-tbody">
                @foreach($parsed['lines'] as $idx => $line)
                <tr class="{{ $line['component_matched'] ? '' : 'table-warning' }}" data-pf-row>
                    <td>
                        <input type="checkbox" name="import_line_{{ $idx }}" value="1" checked class="line-check">
                    </td>
                    <td>{{ $line['line_no'] }}</td>
                    <td><code class="small">{{ $line['supplier_part_number'] ?: '—' }}</code></td>
                    <td><code class="small font-weight-bold">{{ $line['mfg_part_number'] ?: '—' }}</code></td>
                    <td><small>{{ Str::limit($line['description'],35) }}</small></td>
                    <td><small>{{ $line['manufacturer'] ?: '—' }}</small></td>
                    <td><small>{{ $line['country_of_origin'] ?: '—' }}</small></td>
                    <td><small><code>{{ $line['hs_code'] ?: '—' }}</code></small></td>
                    <td class="text-center" data-pf-value="{{ $line['qty_ordered'] }}">
                        <input type="number" name="line_overrides[{{ $idx }}][qty_ordered]" value="{{ $line['qty_ordered'] }}" min="0" class="form-control form-control-sm qty-input" style="width:65px">
                    </td>
                    <td class="text-center" data-pf-value="{{ $line['qty_shipped'] ?: $line['qty_ordered'] }}">
                        <input type="number" name="line_overrides[{{ $idx }}][qty_shipped]" value="{{ $line['qty_shipped'] ?: $line['qty_ordered'] }}" min="0" class="form-control form-control-sm" style="width:65px">
                    </td>
                    <td class="text-right" data-pf-value="{{ $line['unit_price'] }}">
                        <input type="number" name="line_overrides[{{ $idx }}][unit_price]" value="{{ $line['unit_price'] }}" min="0" step="0.0001" class="form-control form-control-sm price-input" style="width:85px">
                    </td>
                    <td class="text-right" data-pf-value="{{ $line['tariff_amount'] }}">
                        <input type="number" name="line_overrides[{{ $idx }}][tariff_amount]" value="{{ $line['tariff_amount'] }}" min="0" step="0.01" class="form-control form-control-sm" style="width:75px">
                    </td>
                    <td class="text-right font-weight-bold extended-cell" data-pf-value="{{ $line['extended_price'] }}">${{ number_format($line['extended_price'],2) }}</td>
                    <td data-pf-value="{{ $line['component_matched'] ? 'matched' : 'no match' }}">
                        @if($line['component_matched'])
                            @php $comp = \Modules\Procurement\Models\Component::find($line['component_id']) @endphp
                            <span class="badge badge-success"><i class="fas fa-check mr-1"></i>{{ Str::limit($comp?->description ?? 'Matched',25) }}</span>
                        @else
                            <span class="badge badge-warning"><i class="fas fa-exclamation-triangle mr-1"></i>No match</span>
                        @endif
                    </td>
                    <td></td>
                </tr>
                @endforeach
            </tbody>
            <tfoot class="thead-light">
                <tr>
                    <td colspan="12" class="text-right font-weight-bold">Lines Total:</td>
                    <td class="text-right font-weight-bold" id="lines-total">${{ number_format(collect($parsed['lines'])->sum('extended_price'),2) }}</td>
                    <td></td>
                    <td></td>
                </tr>
            </tfoot>
        </table>
        </div>
    </div>
</div>

<!-- Template options for a manually-added line's component-match select — read via JS, never shown itself. -->
<select id="manual-component-options" style="display:none">
    <option value="">— No match —</option>
    @foreach($components as $c)
    <option value="{{ $c->id }}">{{ $c->part_number ? $c->part_number.' — ' : '' }}{{ Str::limit($c->description, 40) }}</option>
    @endforeach
</select>

<div class="alert alert-info small">
    <i class="fas fa-info-circle mr-1"></i>
    <strong>{{ collect($parsed['lines'])->where('component_matched',true)->count() }}</strong> line items were automatically matched to existing components.
    <strong>{{ collect($parsed['lines'])->where('component_matched',false)->count() }}</strong> could not be matched — they will be saved as invoice line items without a component link.
    You can link them manually later from the component page.
</div>

<div class="form-group">
    <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 received quantities to stock</strong> — matched components will be received into inventory with a stock movement record</label>
    </div>
</div>

<button type="submit" class="btn btn-dark btn-lg">
    <i class="fas fa-file-import mr-1"></i> Import Invoice
</button>
<a href="{{ route('procurement.import.invoice') }}" class="btn btn-link">Cancel</a>
</form>
@endsection

@push('scripts')
<script>
document.getElementById('check-all').addEventListener('change', function() {
    document.querySelectorAll('.line-check').forEach(cb => cb.checked = this.checked);
});
function toggleAll(state) {
    document.querySelectorAll('.line-check').forEach(cb => cb.checked = state);
    document.getElementById('check-all').checked = state;
}

// ── Line totals (both parsed and manually-added rows) ───────────────────────
// Parsed rows' qty/price are editable too — a "best-effort" generic-format scan (see
// InvoiceParserService::scanForPartNumberCandidates) can find a part number but never a qty or
// price, so those need filling in here just like a fully manual row does.
function recalcLinesTotal() {
    var total = 0;
    document.querySelectorAll('.extended-cell').forEach(function (el) { total += parseFloat(el.dataset.pfValue) || 0; });
    document.getElementById('lines-total').textContent = '$' + total.toFixed(2);
}

function recalcRowExtended(tr) {
    var qtyEl = tr.querySelector('.qty-input');
    var priceEl = tr.querySelector('.price-input');
    if (!qtyEl || !priceEl) return;
    var qty   = parseFloat(qtyEl.value) || 0;
    var price = parseFloat(priceEl.value) || 0;
    var extended = qty * price;
    var cell = tr.querySelector('.extended-cell');
    cell.textContent = '$' + extended.toFixed(2);
    cell.dataset.pfValue = extended;
    recalcLinesTotal();
}

document.getElementById('lines-tbody').addEventListener('input', function (e) {
    if (e.target.tagName !== 'INPUT') return;
    var td = e.target.closest('td');
    if (td) td.dataset.pfValue = e.target.value; // keep sort/filter reading the live value, not the initial one
    if (e.target.classList.contains('qty-input') || e.target.classList.contains('price-input')) {
        recalcRowExtended(e.target.closest('tr'));
    }
});

// ── Manually-added lines ─────────────────────────────────────────────────────
// For a non-standard invoice the parser has nothing (or missed a line) — these rows carry their
// own manual_lines[n][...] fields and are read separately in ImportController::invoiceImport(),
// alongside whichever parsed rows stayed checked.
var componentOptions = document.getElementById('manual-component-options').innerHTML;
var manualIndex = 0;

document.getElementById('add-line-btn').addEventListener('click', function () {
    var n = manualIndex++;
    var tr = document.createElement('tr');
    tr.setAttribute('data-pf-row', '');
    tr.className = 'table-info';
    tr.innerHTML =
        '<td class="text-center"><span class="badge badge-info" title="Added by hand">M</span></td>' +
        '<td><small class="text-muted">Manual</small></td>' +
        '<td><input type="text" name="manual_lines[' + n + '][supplier_part_number]" class="form-control form-control-sm" style="width:110px"></td>' +
        '<td><input type="text" name="manual_lines[' + n + '][mfg_part_number]" class="form-control form-control-sm" style="width:110px"></td>' +
        '<td><input type="text" name="manual_lines[' + n + '][description]" class="form-control form-control-sm" style="min-width:160px" required></td>' +
        '<td><input type="text" name="manual_lines[' + n + '][manufacturer]" class="form-control form-control-sm" style="width:100px"></td>' +
        '<td><input type="text" name="manual_lines[' + n + '][country_of_origin]" class="form-control form-control-sm" style="width:60px"></td>' +
        '<td><input type="text" name="manual_lines[' + n + '][hs_code]" class="form-control form-control-sm" style="width:90px"></td>' +
        '<td><input type="number" name="manual_lines[' + n + '][qty_ordered]" class="form-control form-control-sm qty-input" style="width:70px" min="0" value="0"></td>' +
        '<td><input type="number" name="manual_lines[' + n + '][qty_shipped]" class="form-control form-control-sm" style="width:70px" min="0" placeholder="= ord."></td>' +
        '<td><input type="number" name="manual_lines[' + n + '][unit_price]" class="form-control form-control-sm price-input" style="width:85px" min="0" step="0.0001" value="0"></td>' +
        '<td><input type="number" name="manual_lines[' + n + '][tariff_amount]" class="form-control form-control-sm" style="width:80px" min="0" step="0.01"></td>' +
        '<td class="text-right font-weight-bold extended-cell" data-pf-value="0">$0.00</td>' +
        '<td><select name="manual_lines[' + n + '][component_id]" class="form-control form-control-sm" style="min-width:160px">' + componentOptions + '</select></td>' +
        '<td><button type="button" class="btn btn-sm btn-outline-danger remove-manual-line" title="Remove">&times;</button></td>';
    document.getElementById('lines-tbody').appendChild(tr);
});

document.getElementById('lines-tbody').addEventListener('click', function (e) {
    if (!e.target.classList.contains('remove-manual-line')) return;
    e.target.closest('tr').remove();
    recalcLinesTotal();
});
</script>
@endpush