@extends('procurement::layouts.master')
@section('title','Log Build')
@section('content')
<h1 class="h3 mb-4">Log Build</h1>
<form method="POST" action="{{ route('procurement.production.build.store') }}">
@csrf
<div class="card shadow mb-4"><div class="card-body">
    <div class="row">
        <div class="col-md-3"><div class="form-group"><label>Project <span class="text-danger">*</span></label>
            <select name="project_id" id="project-select" class="form-control" required>
                <option value="">— Select —</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-3"><div class="form-group"><label>Run</label>
            <select name="run_id" class="form-control">
                <option value="">— None —</option>
                @foreach($projects as $p)@foreach($p->runs as $r)
                <option value="{{ $r->id }}" data-project="{{ $p->id }}" {{ old('run_id')==$r->id?'selected':'' }}>{{ $p->name }} / {{ $r->run_number }}</option>
                @endforeach @endforeach
            </select>
        </div></div>
        <div class="col-md-2"><div class="form-group"><label>Boards Built <span class="text-danger">*</span></label>
            <input type="number" name="boards" id="boards-input" class="form-control" value="{{ old('boards',1) }}" min="1" required>
        </div></div>
        <div class="col-md-2"><div class="form-group"><label>Build Date <span class="text-danger">*</span></label>
            <input type="date" name="build_date" class="form-control" value="{{ old('build_date',date('Y-m-d')) }}" required>
        </div></div>
        <div class="col-md-2"><div class="form-group"><label>Notes</label>
            <input type="text" name="notes" class="form-control" value="{{ old('notes') }}" placeholder="First article batch">
        </div></div>
    </div>
</div></div>

@foreach($componentsByProject as $projectId => $components)
<div class="card shadow mb-4 project-bom" id="bom-{{ $projectId }}" style="display:none">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h6 class="m-0 font-weight-bold">Parts to Consume</h6>
        <small class="text-muted">Uncheck parts not used in this build (e.g. fan, heatsink, enclosure)</small>
    </div>
    <div class="card-body p-0">
        <table class="table table-sm mb-0">
            <thead class="thead-dark"><tr><th>Include</th><th>Ref</th><th>Part / Description</th><th class="text-center">Qty/Board</th><th class="text-center">Required</th><th class="text-center">On Hand</th></tr></thead>
            <tbody>
                @foreach($components as $c)
                <tr>
                    <td><input type="checkbox" name="include[{{ $c->id }}]" value="1" class="include-check" checked></td>
                    <td><code class="small">{{ $c->ref_designator ?: '—' }}</code></td>
                    <td><code class="small">{{ $c->part_number ?: '—' }}</code><br><small class="text-muted">{{ Str::limit($c->description,50) }}</small></td>
                    <td class="text-center">{{ $c->qty_per_board }}</td>
                    <td class="text-center required-qty" data-per-board="{{ $c->qty_per_board }}">{{ $c->qty_per_board }}</td>
                    <td class="text-center {{ ($c->stock->qty_on_hand ?? 0) < $c->qty_per_board ? 'text-danger font-weight-bold' : '' }}">{{ $c->stock->qty_on_hand ?? 0 }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endforeach

<button type="submit" class="btn btn-dark btn-lg"><i class="fas fa-industry mr-1"></i> Log Build</button>
<a href="{{ route('procurement.stock.index') }}" class="btn btn-link">Cancel</a>
</form>
@endsection

@push('scripts')
<script>
function refresh() {
    var pid = document.getElementById('project-select').value;
    document.querySelectorAll('.project-bom').forEach(function(el){ el.style.display = 'none'; });
    if (pid) {
        var bom = document.getElementById('bom-' + pid);
        if (bom) bom.style.display = '';
    }
    var boards = parseInt(document.getElementById('boards-input').value) || 1;
    document.querySelectorAll('.required-qty').forEach(function(td){
        td.textContent = (parseInt(td.dataset.perBoard) || 0) * boards;
    });
}
document.getElementById('project-select').addEventListener('change', refresh);
document.getElementById('boards-input').addEventListener('input', refresh);
refresh();
</script>
@endpush