{{-- Sweet Works ERP | app/Modules/Manufacturing/Resources/Views/boms/create.blade.php | v1.7 | 31/08/2026 --}}
{{-- v1.7 — Split components into two sections (Semi-Finished / Raw Material) + help popover. --}}
{{-- v1.6 — Add Type column; components array includes material_type for auto-badge. --}}
{{-- v1.5 — Fix: @push('scripts') → @section('scripts'). --}}
{{-- v1.4 — Show precalculated $nextCode. --}}
{{-- v1.3 — BOM code auto-generated. --}}
{{-- v1.0 — Initial form. --}}
@extends('layouts.vertical')

@section('content')
@php
$popoverContent =
    '<p>' . e(__('manufacturing.boms.components_help_line1')) . '</p>' .
    '<p>' . e(__('manufacturing.boms.components_help_line2')) . '</p>' .
    '<p>' . e(__('manufacturing.boms.components_help_line3')) . '</p>' .
    '<hr><small><em>' . e(__('manufacturing.boms.components_help_example')) . '</em></small>';
@endphp
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h1 class="h4 mb-0"><i class="bi bi-list-nested me-2 text-primary"></i>{{ __('manufacturing.boms.new') }}</h1>
            <nav><ol class="breadcrumb mb-0 small">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">{{ __('manufacturing.common.erp') }}</a></li>
                <li class="breadcrumb-item"><a href="{{ route('manufacturing.boms.index') }}">{{ __('manufacturing.boms.title') }}</a></li>
                <li class="breadcrumb-item active">{{ __('manufacturing.boms.new') }}</li>
            </ol></nav>
        </div>
    </div>

    <form action="{{ route('manufacturing.boms.store') }}" method="POST">
        @csrf
        {{-- BOM Header --}}
        <div class="card mb-3">
            <div class="card-header"><strong>{{ __('manufacturing.boms.new') }}</strong></div>
            <div class="card-body">
                @if($errors->any())
                    <div class="alert alert-danger py-2"><ul class="mb-0 ps-3">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>
                @endif
                <div class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label">{{ __('manufacturing.boms.code') }}</label>
                        <p class="form-control-plaintext fw-bold ps-1">{{ $nextCode }}</p>
                        <div class="form-text"><i class="bi bi-magic me-1"></i>{{ __('manufacturing.boms.code_autogenerated') }}</div>
                    </div>
                    <div class="col-md-5">
                        <label class="form-label">{{ __('manufacturing.boms.name') }} <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control uppercase-input @error('name') is-invalid @enderror"
                               value="{{ old('name') }}" required maxlength="150">
                        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">{{ __('manufacturing.boms.product') }} <span class="text-danger">*</span></label>
                        <select name="product_id" class="form-select @error('product_id') is-invalid @enderror" required>
                            <option value="">{{ __('manufacturing.common.select') }}</option>
                            @foreach($products as $p)
                                <option value="{{ $p->id }}" @selected(old('product_id') == $p->id)>
                                    {{ $p->product_code }} — {{ $p->product_name }}
                                </option>
                            @endforeach
                        </select>
                        @error('product_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">{{ __('manufacturing.boms.type') }} <span class="text-danger">*</span></label>
                        <select name="type" class="form-select @error('type') is-invalid @enderror" required>
                            @foreach($types as $key => $label)
                                <option value="{{ $key }}" @selected(old('type') === $key)>{{ $label }}</option>
                            @endforeach
                        </select>
                        @error('type')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">{{ __('manufacturing.boms.base_qty') }} <span class="text-danger">*</span></label>
                        <input type="number" name="base_quantity" class="form-control @error('base_quantity') is-invalid @enderror"
                               value="{{ old('base_quantity', 1) }}" min="0.0001" step="0.0001" required>
                        @error('base_quantity')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">{{ __('manufacturing.boms.uom') }} <span class="text-danger">*</span></label>
                        <input type="text" name="base_uom" class="form-control uppercase-input @error('base_uom') is-invalid @enderror"
                               value="{{ old('base_uom', 'KG') }}" required maxlength="20">
                        @error('base_uom')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">{{ __('manufacturing.common.version') }}</label>
                        <input type="text" name="version" class="form-control uppercase-input"
                               value="{{ old('version', '1.0') }}" maxlength="10">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">{{ __('manufacturing.common.notes') }}</label>
                        <input type="text" name="notes" class="form-control" value="{{ old('notes') }}" maxlength="255">
                    </div>
                </div>
            </div>
        </div>

        {{-- Components heading + help popover --}}
        <div class="d-flex align-items-center mb-2">
            <strong class="fs-6">{{ __('manufacturing.boms.lines') }}</strong>
            <i class="bi bi-question-circle text-muted ms-2"
               style="cursor:pointer"
               data-bs-toggle="popover"
               data-bs-trigger="hover focus"
               data-bs-placement="right"
               data-bs-html="true"
               data-bs-title="{{ __('manufacturing.boms.components_help_title') }}"
               data-bs-content="{!! $popoverContent !!}"></i>
        </div>

        {{-- Section A: Semi-Finished --}}
        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <strong><i class="bi bi-layers me-1 text-warning"></i>{{ __('manufacturing.boms.semi_finished_components') }}</strong>
                <button type="button" class="btn btn-sm btn-outline-warning" onclick="addSFLine()">
                    {{ __('manufacturing.boms.add_semi_finished') }}
                </button>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-sm mb-0">
                        <thead class="table-light">
                            <tr>
                                <th style="width:32%">{{ __('manufacturing.boms.line_component') }}</th>
                                <th style="width:11%">{{ __('manufacturing.boms.line_type') }}</th>
                                <th style="width:9%">{{ __('manufacturing.boms.line_qty') }}</th>
                                <th style="width:7%">{{ __('manufacturing.boms.line_uom') }}</th>
                                <th style="width:7%">{{ __('manufacturing.boms.line_scrap') }}</th>
                                <th style="width:7%">{{ __('manufacturing.boms.line_yield') }}</th>
                                <th style="width:7%" class="text-center">{{ __('manufacturing.boms.line_critical') }}</th>
                                <th style="width:5%"></th>
                            </tr>
                        </thead>
                        <tbody id="sfBody">
                            <tr id="sfEmptyRow">
                                <td colspan="8" class="text-center text-muted py-3 small">
                                    <i class="bi bi-info-circle me-1"></i>{{ __('manufacturing.boms.add_semi_finished') }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Section B: Raw Materials --}}
        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <strong><i class="bi bi-box me-1 text-secondary"></i>{{ __('manufacturing.boms.raw_material_components') }}</strong>
                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="addRMLine()">
                    {{ __('manufacturing.boms.add_raw_material') }}
                </button>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-sm mb-0">
                        <thead class="table-light">
                            <tr>
                                <th style="width:32%">{{ __('manufacturing.boms.line_component') }}</th>
                                <th style="width:11%">{{ __('manufacturing.boms.line_type') }}</th>
                                <th style="width:9%">{{ __('manufacturing.boms.line_qty') }}</th>
                                <th style="width:7%">{{ __('manufacturing.boms.line_uom') }}</th>
                                <th style="width:7%">{{ __('manufacturing.boms.line_scrap') }}</th>
                                <th style="width:7%">{{ __('manufacturing.boms.line_yield') }}</th>
                                <th style="width:7%" class="text-center">{{ __('manufacturing.boms.line_critical') }}</th>
                                <th style="width:5%"></th>
                            </tr>
                        </thead>
                        <tbody id="rmBody">
                            <tr id="rmEmptyRow">
                                <td colspan="8" class="text-center text-muted py-3 small">
                                    <i class="bi bi-info-circle me-1"></i>{{ __('manufacturing.boms.add_raw_material') }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg me-1"></i>{{ __('manufacturing.common.save') }}</button>
            <a href="{{ route('manufacturing.boms.index') }}" class="btn btn-secondary">{{ __('manufacturing.common.cancel') }}</a>
        </div>
    </form>
</div>
@endsection

@section('scripts')
<script>
const semiFinished = @json($semiFinished->values());
const rawMaterials = @json($rawMaterials->values());
const strSelect    = '{{ __("manufacturing.common.select") }}';
const strRM        = '{{ __("manufacturing.boms.type_rm") }}';
const strSF        = '{{ __("manufacturing.boms.type_sf") }}';
let lineIndex = 0;

const badgeSF = '<span class="badge bg-warning text-dark">' + strSF + '</span>';
const badgeRM = '<span class="badge bg-secondary">' + strRM + '</span>';

function buildLineRow(i, pool, badge, line) {
    const selectedId = line ? line.component_product_id : null;
    const opts = pool.map(p =>
        '<option value="' + p.id + '"' + (selectedId && p.id == selectedId ? ' selected' : '') + '>' +
        p.product_code + ' — ' + p.product_name + '</option>'
    ).join('');
    const row = document.createElement('tr');
    row.id = 'line_' + i;
    row.innerHTML = `
        <td><select name="lines[${i}][component_product_id]" class="form-select form-select-sm" required>
            <option value="">${strSelect}</option>${opts}</select></td>
        <td>${badge}</td>
        <td><input type="number" name="lines[${i}][quantity]" class="form-control form-control-sm"
            value="${line ? line.quantity : 1}" min="0.0001" step="0.0001" required></td>
        <td><input type="text" name="lines[${i}][uom]" class="form-control form-control-sm uppercase-input"
            value="${line ? line.uom : 'KG'}" maxlength="20"></td>
        <td><input type="number" name="lines[${i}][scrap_percent]" class="form-control form-control-sm"
            value="${line ? line.scrap_percent : 0}" min="0" max="100" step="0.01"></td>
        <td><input type="number" name="lines[${i}][yield_percent]" class="form-control form-control-sm"
            value="${line ? line.yield_percent : 100}" min="0.01" max="100" step="0.01"></td>
        <td class="text-center"><input type="checkbox" name="lines[${i}][is_critical]"
            class="form-check-input" value="1" ${line && line.is_critical ? 'checked' : ''}></td>
        <td><button type="button" class="btn btn-sm btn-outline-danger py-0"
            onclick="removeLine(${i}, this)"><i class="bi bi-trash"></i></button></td>
    `;
    return row;
}

function addSFLine() {
    document.getElementById('sfEmptyRow')?.remove();
    document.getElementById('sfBody').appendChild(buildLineRow(lineIndex++, semiFinished, badgeSF, null));
}

function addRMLine() {
    document.getElementById('rmEmptyRow')?.remove();
    document.getElementById('rmBody').appendChild(buildLineRow(lineIndex++, rawMaterials, badgeRM, null));
}

function removeLine(i, btn) {
    const row = document.getElementById('line_' + i);
    if (!row) return;
    const tbody = row.closest('tbody');
    row.remove();
    if (!tbody.children.length) {
        const empty = document.createElement('tr');
        const isSF  = tbody.id === 'sfBody';
        empty.id    = isSF ? 'sfEmptyRow' : 'rmEmptyRow';
        empty.innerHTML = '<td colspan="8" class="text-center text-muted py-3 small">'
            + '<i class="bi bi-info-circle me-1"></i>'
            + (isSF ? '{{ __("manufacturing.boms.add_semi_finished") }}' : '{{ __("manufacturing.boms.add_raw_material") }}')
            + '</td>';
        tbody.appendChild(empty);
    }
}

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('[data-bs-toggle="popover"]').forEach(el => new bootstrap.Popover(el));
});
</script>
@endsection