@extends('procurement::layouts.master')
@section('title','Purchase Planner')
@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3 mb-0">Purchase Planner</h1>
    <a href="{{ route('procurement.purchase-planner.create') }}" class="btn btn-outline-secondary btn-sm"><i class="fas fa-arrow-left mr-1"></i> Start Over</a>
</div>
<p class="text-muted">Nothing here is saved — adjust quantities freely and the totals below update live. Reload or leave the page and it resets. <strong>To Purchase</strong> already nets out what's on hand.</p>

@if($scope !== 'custom')
    @foreach($sections as $i => $section)
    <div class="card shadow mb-4 plan-section">
        <div class="card-header d-flex justify-content-between align-items-center flex-wrap">
            <div>
                <h6 class="m-0 font-weight-bold">{{ $section['project']->name }}{{ $section['project']->code ? ' ('.$section['project']->code.')' : '' }}</h6>
                @if($section['run'])
                    <small class="text-muted">Run {{ $section['run']->run_number }} — target qty {{ $section['run']->target_qty }}</small>
                @else
                    <small class="text-muted">Custom quantity</small>
                @endif
            </div>
            <div class="d-flex align-items-center mt-2 mt-md-0">
                <input type="text" data-pf-filter="plan-table-{{ $i }}" class="form-control form-control-sm mr-3" placeholder="Search parts..." style="width:160px">
                <label class="mr-2 mb-0 font-weight-bold">Project Quantity</label>
                <input type="number" class="form-control form-control-sm project-qty-input" style="width:110px" data-section="{{ $i }}" value="{{ $section['qty'] }}" min="0">
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
            <table class="table table-sm mb-0 plan-table" data-pf-table data-section="{{ $i }}" id="plan-table-{{ $i }}">
                <thead class="thead-dark"><tr>
                    <th data-pf-sort="text">Ref <i class="fas fa-sort text-white-50 pf-sort-icon"></i></th>
                    <th data-pf-sort="text">Part / Description <i class="fas fa-sort text-white-50 pf-sort-icon"></i></th>
                    <th class="text-center" data-pf-sort="text">Category <i class="fas fa-sort text-white-50 pf-sort-icon"></i></th>
                    <th class="text-center" data-pf-sort="number">Qty / Unit <i class="fas fa-sort text-white-50 pf-sort-icon"></i></th>
                    <th class="text-center" data-pf-sort="number">Base Qty <i class="fas fa-sort text-white-50 pf-sort-icon"></i></th>
                    <th class="text-center" style="width:120px">Additional Qty</th>
                    <th class="text-center" data-pf-sort="number">Total Qty <i class="fas fa-sort text-white-50 pf-sort-icon"></i></th>
                    <th class="text-center" data-pf-sort="number">On Hand <i class="fas fa-sort text-white-50 pf-sort-icon"></i></th>
                    <th class="text-center" data-pf-sort="number">To Purchase <i class="fas fa-sort text-white-50 pf-sort-icon"></i></th>
                    <th class="text-right" data-pf-sort="number">Unit Cost <i class="fas fa-sort text-white-50 pf-sort-icon"></i></th>
                    <th class="text-right" data-pf-sort="number">Extended Cost <i class="fas fa-sort text-white-50 pf-sort-icon"></i></th>
                </tr></thead>
                <tbody>
                    @forelse($section['components'] as $c)
                    <tr data-pf-row data-qty-per-unit="{{ $c['qty_per_unit'] }}" data-on-hand="{{ $c['on_hand'] }}">
                        <td data-pf-value="{{ $c['ref_designator'] }}"><code class="small">{{ $c['ref_designator'] ?: '—' }}</code></td>
                        <td data-pf-value="{{ $c['part_number'] }} {{ $c['description'] }}"><code class="small">{{ $c['part_number'] ?: '—' }}</code><br><small class="text-muted">{{ Str::limit($c['description'], 60) }}</small></td>
                        <td class="text-center" data-pf-value="{{ $c['category'] }}"><span class="badge badge-light">{{ $c['category'] }}</span></td>
                        <td class="text-center">{{ $c['qty_per_unit'] }}</td>
                        <td class="text-center base-qty" data-pf-value="0">0</td>
                        <td class="text-center"><input type="number" class="form-control form-control-sm additional-qty" value="0" min="0"></td>
                        <td class="text-center font-weight-bold total-qty" data-pf-value="0">0</td>
                        <td class="text-center on-hand-cell" data-pf-value="{{ $c['on_hand'] }}">{{ $c['on_hand'] }}</td>
                        <td class="text-center font-weight-bold to-purchase" data-pf-value="0">0</td>
                        <td class="text-right" data-pf-value="{{ $c['unit_cost'] }}"><input type="number" class="form-control form-control-sm unit-cost-input text-right" value="{{ $c['unit_cost'] }}" min="0" step="0.0001" style="width:90px"></td>
                        <td class="text-right font-weight-bold extended-cost" data-value="0" data-pf-value="0">$0.00</td>
                    </tr>
                    @empty
                    <tr><td colspan="11" class="text-center text-muted py-3">This project has no active BOM lines.</td></tr>
                    @endforelse
                </tbody>
                <tfoot>
                <tr class="bg-light">
                    <th colspan="10" class="text-right">Section Subtotal</th>
                    <th class="text-right section-subtotal">$0.00</th>
                </tr>
                <tr class="bg-light">
                    <th colspan="10" class="text-right">Cost / Board</th>
                    <th class="text-right section-cost-per-board">$0.00</th>
                </tr>
                </tfoot>
            </table>
            </div>
        </div>
    </div>
    @endforeach

@else
    <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">Custom Parts List</h6>
            <div class="d-flex align-items-center mt-2 mt-md-0">
                <input type="text" data-pf-filter="custom-table" class="form-control form-control-sm mr-3" placeholder="Search parts..." style="width:160px">
                <select id="add-component-select" class="form-control form-control-sm mr-2" style="width:340px;max-width:100%">
                    <option value="">+ Add a component…</option>
                    @foreach($allComponents as $c)
                    <option value="{{ $c->id }}"
                        data-description="{{ $c->description }}"
                        data-part="{{ $c->part_number }}"
                        data-category="{{ $c->category }}"
                        data-cost="{{ $c->unit_cost }}"
                        data-on-hand="{{ $c->stock->qty_on_hand ?? 0 }}">
                        {{ $c->part_number ? $c->part_number.' — ' : '' }}{{ Str::limit($c->description, 50) }}
                    </option>
                    @endforeach
                </select>
                <button type="button" class="btn btn-sm btn-primary" id="add-component-btn"><i class="fas fa-plus mr-1"></i> Add</button>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
            <table class="table table-sm mb-0" data-pf-table id="custom-table">
                <thead class="thead-dark"><tr>
                    <th data-pf-sort="text">Part / Description <i class="fas fa-sort text-white-50 pf-sort-icon"></i></th>
                    <th class="text-center" data-pf-sort="text">Category <i class="fas fa-sort text-white-50 pf-sort-icon"></i></th>
                    <th class="text-center" style="width:120px">Quantity</th>
                    <th class="text-center" data-pf-sort="number">On Hand <i class="fas fa-sort text-white-50 pf-sort-icon"></i></th>
                    <th class="text-center" data-pf-sort="number">To Purchase <i class="fas fa-sort text-white-50 pf-sort-icon"></i></th>
                    <th class="text-right" data-pf-sort="number">Unit Cost <i class="fas fa-sort text-white-50 pf-sort-icon"></i></th>
                    <th class="text-right" data-pf-sort="number">Extended Cost <i class="fas fa-sort text-white-50 pf-sort-icon"></i></th>
                    <th></th>
                </tr></thead>
                <tbody id="custom-tbody">
                    <tr id="custom-empty-row"><td colspan="8" class="text-center text-muted py-3">No parts added yet — use the picker above.</td></tr>
                </tbody>
            </table>
            </div>
        </div>
    </div>
@endif

<div class="card shadow mb-4 border-left-primary">
    <div class="card-body d-flex justify-content-between align-items-center">
        <h5 class="m-0">Grand Total</h5>
        <h3 class="m-0 text-primary" id="grand-total">$0.00</h3>
    </div>
</div>
@endsection

@push('scripts')
<script>
function fmt(n) { return '$' + n.toFixed(2); }

function recalcGrandTotal() {
    var total = 0;
    document.querySelectorAll('.extended-cost').forEach(function (el) { total += parseFloat(el.dataset.value) || 0; });
    var el = document.getElementById('grand-total');
    if (el) el.textContent = fmt(total);
}

function recalcSection(table) {
    var qtyInput = document.querySelector('.project-qty-input[data-section="' + table.dataset.section + '"]');
    var projectQty = parseInt(qtyInput ? qtyInput.value : 0) || 0;
    var subtotal = 0;
    var boardCost = 0; // one board's BOM at full cost, including what's already on hand — see below

    table.querySelectorAll('tbody tr[data-pf-row]').forEach(function (row) {
        var perUnit    = parseFloat(row.dataset.qtyPerUnit) || 0;
        var unitCost   = parseFloat(row.querySelector('.unit-cost-input').value) || 0;
        var onHand     = parseFloat(row.dataset.onHand) || 0;
        var additional = parseInt(row.querySelector('.additional-qty').value) || 0;
        var base       = perUnit * projectQty;
        var total      = base + additional;
        var toPurchase = Math.max(total - onHand, 0);
        var extended   = toPurchase * unitCost;

        setCell(row.querySelector('.base-qty'), base);
        setCell(row.querySelector('.total-qty'), total);
        setCell(row.querySelector('.to-purchase'), toPurchase);
        var cell = row.querySelector('.extended-cost');
        cell.textContent = fmt(extended);
        cell.dataset.value = extended;
        cell.dataset.pfValue = extended;

        subtotal += extended;
        boardCost += perUnit * unitCost;
    });

    var subtotalCell = table.closest('.plan-section').querySelector('.section-subtotal');
    if (subtotalCell) subtotalCell.textContent = fmt(subtotal);

    // The actual cost of one board's worth of parts: qty-per-unit × unit cost for every BOM line.
    // It ignores Additional Qty (spares/attrition aren't part of a board) and doesn't net out
    // stock on hand, so a component you already have still counts toward the board's cost
    // instead of making the board look artificially cheaper because nothing needs buying for it.
    var perBoardCell = table.closest('.plan-section').querySelector('.section-cost-per-board');
    if (perBoardCell) perBoardCell.textContent = fmt(boardCost);

    recalcGrandTotal();
}

function setCell(el, value) {
    el.textContent = value;
    el.dataset.pfValue = value;
}

document.querySelectorAll('.plan-table').forEach(recalcSection);

document.addEventListener('input', function (e) {
    // Keep the Unit Cost column's sort value in step with whatever the user typed, not the
    // page's original price — same convention as the other live-computed columns.
    if (e.target.classList.contains('unit-cost-input')) {
        var td = e.target.closest('td');
        if (td) td.dataset.pfValue = e.target.value;
    }

    var planTable = e.target.closest('table.plan-table');
    if (planTable && (e.target.classList.contains('additional-qty') || e.target.classList.contains('unit-cost-input'))) {
        recalcSection(planTable);
    } else if (e.target.classList.contains('project-qty-input')) {
        var table = document.querySelector('.plan-table[data-section="' + e.target.dataset.section + '"]');
        if (table) recalcSection(table);
    } else if (e.target.closest('#custom-table') && (e.target.classList.contains('custom-qty') || e.target.classList.contains('unit-cost-input'))) {
        recalcCustomRow(e.target.closest('tr'));
    }
});

// ── Custom parts list ───────────────────────────────────────────────────────

function recalcCustomRow(tr) {
    var qty        = parseInt(tr.querySelector('.custom-qty').value) || 0;
    var cost       = parseFloat(tr.querySelector('.unit-cost-input').value) || 0;
    var onHand     = parseFloat(tr.dataset.onHand) || 0;
    var toPurchase = Math.max(qty - onHand, 0);
    var extended   = toPurchase * cost;

    setCell(tr.querySelector('.to-purchase'), toPurchase);
    var cell = tr.querySelector('.extended-cost');
    cell.textContent = fmt(extended);
    cell.dataset.value = extended;
    cell.dataset.pfValue = extended;
    recalcGrandTotal();
}

document.getElementById('add-component-btn')?.addEventListener('click', function () {
    var sel = document.getElementById('add-component-select');
    var opt = sel.options[sel.selectedIndex];
    if (!opt.value) return;

    document.getElementById('custom-empty-row')?.remove();

    var cost   = parseFloat(opt.dataset.cost) || 0;
    var onHand = parseFloat(opt.dataset.onHand) || 0;
    var tr = document.createElement('tr');
    tr.setAttribute('data-pf-row', '');
    tr.dataset.onHand = onHand;
    tr.innerHTML =
        '<td data-pf-value="' + (opt.dataset.part || '') + ' ' + opt.dataset.description + '"><code class="small">' + (opt.dataset.part || '—') + '</code><br><small class="text-muted">' + opt.dataset.description + '</small></td>' +
        '<td class="text-center" data-pf-value="' + opt.dataset.category + '"><span class="badge badge-light">' + opt.dataset.category + '</span></td>' +
        '<td class="text-center"><input type="number" class="form-control form-control-sm custom-qty" value="1" min="0"></td>' +
        '<td class="text-center" data-pf-value="' + onHand + '">' + onHand + '</td>' +
        '<td class="text-center font-weight-bold to-purchase" data-pf-value="0">0</td>' +
        '<td class="text-right" data-pf-value="' + cost + '"><input type="number" class="form-control form-control-sm unit-cost-input text-right" value="' + cost + '" min="0" step="0.0001" style="width:90px"></td>' +
        '<td class="text-right font-weight-bold extended-cost" data-value="0" data-pf-value="0">$0.00</td>' +
        '<td><button type="button" class="btn btn-sm btn-outline-danger remove-row">&times;</button></td>';
    document.getElementById('custom-tbody').appendChild(tr);
    recalcCustomRow(tr);
    sel.value = '';
});

document.addEventListener('click', function (e) {
    if (!e.target.classList.contains('remove-row')) return;
    e.target.closest('tr').remove();
    recalcGrandTotal();
    if (!document.querySelector('#custom-tbody tr')) {
        document.getElementById('custom-tbody').innerHTML =
            '<tr id="custom-empty-row"><td colspan="8" class="text-center text-muted py-3">No parts added yet — use the picker above.</td></tr>';
    }
});
</script>
@endpush