@extends('layouts.app')
@section('title', 'Edit Bill of Materials')

@section('content')
<style>
    .bom-card {
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
        border: none;
        margin-top: 20px;
    }
    .bom-card .card-header {
        background: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
        padding: 15px 25px;
        border-radius: 10px 10px 0 0;
    }
    .bom-card .card-body {
        padding: 25px;
    }
    
    .form-group {
        margin-bottom: 18px;
    }
    .form-group label {
        font-weight: 500;
        font-size: 13px;
        color: #495057;
        margin-bottom: 5px;
        display: block;
    }
    .form-group label .text-danger {
        color: #dc3545;
    }
    .form-control {
        border-radius: 8px;
        border: 1px solid #ced4da;
        padding: 10px 14px;
        font-size: 13px;
        transition: all 0.2s ease;
        background: #ffffff;
        color: #495057;
        width: 100%;
        height: 42px;
    }
    .form-control:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
        outline: none;
    }
    .form-control.is-invalid {
        border-color: #dc3545;
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
    }
    .form-control.is-invalid:focus {
        border-color: #dc3545;
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
    }
    .form-control[readonly] {
        background: #e9ecef;
        cursor: not-allowed;
    }
    .form-control optgroup {
        font-weight: 600;
        color: #495057;
    }
    .form-control option {
        padding: 5px 10px;
        height: 30px;
    }
    select.form-control {
        height: 42px;
        line-height: 1.5;
    }
    select.form-control option {
        padding: 8px 12px;
        min-height: 30px;
    }
    .invalid-feedback {
        color: #dc3545;
        font-size: 12px;
        margin-top: 4px;
        display: block;
    }
    .text-muted-small {
        font-size: 11px;
        color: #6c757d;
        margin-top: 3px;
        display: block;
    }
    
    .custom-switch {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .custom-switch input[type="checkbox"] {
        width: 44px;
        height: 22px;
        appearance: none;
        background: #ced4da;
        border-radius: 12px;
        position: relative;
        cursor: pointer;
        transition: all 0.3s ease;
        flex-shrink: 0;
    }
    .custom-switch input[type="checkbox"]:checked {
        background: #007bff;
    }
    .custom-switch input[type="checkbox"]::before {
        content: '';
        position: absolute;
        width: 18px;
        height: 18px;
        background: #fff;
        border-radius: 50%;
        top: 2px;
        left: 2px;
        transition: all 0.3s ease;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
    .custom-switch input[type="checkbox"]:checked::before {
        left: 24px;
    }
    .custom-switch label {
        font-weight: 500;
        font-size: 13px;
        color: #495057;
        margin: 0;
        cursor: pointer;
    }
    
    .btn-submit {
        background: #ffc107;
        color: #212529;
        border-radius: 8px;
        padding: 10px 35px;
        border: none;
        font-weight: 500;
        font-size: 14px;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .btn-submit:hover {
        background: #e0a800;
        color: #212529;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
    }
    .btn-submit svg {
        width: 18px;
        height: 18px;
    }
    
    .btn-cancel {
        background: #6c757d;
        color: #fff;
        border-radius: 8px;
        padding: 10px 35px;
        border: none;
        font-weight: 500;
        font-size: 14px;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .btn-cancel:hover {
        background: #5a6268;
        color: #fff;
        transform: translateY(-1px);
    }
    .btn-cancel svg {
        width: 18px;
        height: 18px;
    }
    
    .btn-add-component {
        background: #28a745;
        color: #fff;
        border-radius: 8px;
        padding: 6px 16px;
        border: none;
        font-size: 13px;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .btn-add-component:hover {
        background: #218838;
        color: #fff;
        transform: translateY(-1px);
    }
    .btn-add-component svg {
        width: 16px;
        height: 16px;
    }
    
    .btn-remove-component {
        background: #dc3545;
        color: #fff;
        border-radius: 6px;
        padding: 4px 8px;
        border: none;
        font-size: 12px;
        transition: all 0.2s ease;
    }
    .btn-remove-component:hover {
        background: #c82333;
        color: #fff;
    }
    
    .btn-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 10px;
    }
    
    .component-row {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 10px;
        border: 1px solid #e9ecef;
        position: relative;
    }
    .component-row .remove-btn {
        position: absolute;
        top: 10px;
        right: 10px;
    }
    .component-row select.form-control {
        height: 38px;
        font-size: 12px;
        padding: 6px 12px;
    }
    .component-row select.form-control option {
        padding: 6px 10px;
        min-height: 28px;
    }
    
    .component-count {
        font-weight: 600;
        color: #007bff;
    }
    
    .unit-badge {
        display: inline-block;
        padding: 2px 8px;
        font-size: 10px;
        font-weight: 600;
        border-radius: 4px;
        background: #e9ecef;
        color: #495057;
        margin-left: 4px;
    }
    .unit-badge-sub {
        background: #d4edda;
        color: #155724;
    }
    .unit-badge-base {
        background: #cce5ff;
        color: #004085;
    }
    
    .component-unit-label {
        font-size: 12px;
        font-weight: 400;
        margin: 0;
    }
    
    @media (max-width: 768px) {
        .bom-card .card-body {
            padding: 15px;
        }
        .btn-actions {
            flex-direction: column;
        }
        .btn-actions .btn {
            width: 100%;
            text-align: center;
            justify-content: center;
        }
        .form-group label {
            font-size: 12px;
        }
        .form-control {
            font-size: 12px;
            padding: 8px 12px;
            height: 38px;
        }
        .component-row {
            padding: 10px;
        }
        .component-row select.form-control {
            height: 34px;
            font-size: 11px;
        }
    }
</style>

<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">
        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 8px;">
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4" />
            <path d="M13.5 6.5l4 4" />
        </svg>
        Edit Bill of Materials
    </h1>
</section>

<section class="content">
    @include('manufacturing.partials.navigation')
    
    <div class="bom-card">
        <div class="card-header">
            <h5 class="mb-0" style="font-weight: 600; color: #212529;">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 6px; color: #ffc107;">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4" />
                    <path d="M13.5 6.5l4 4" />
                </svg>
                Edit BOM: <strong style="color: #007bff;">{{ $model->name }}</strong>
            </h5>
        </div>
        <div class="card-body">
            <form action="{{ route('manufacturing.production.bom.update', $model->id) }}" method="POST" id="bomForm">
                @csrf
                @method('PUT')
                
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>BOM Code <span class="text-danger">*</span></label>
                            <input type="text" name="bom_code" class="form-control" value="{{ $model->bom_code }}" readonly>
                            <span class="text-muted-small">Code cannot be changed</span>
                        </div>
                    </div>
                    
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>BOM Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" 
                                   value="{{ old('name', $model->name) }}" placeholder="Enter BOM name" required>
                            @error('name')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
               
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Product <span class="text-danger">*</span></label>
                            <select name="product_id" class="form-control @error('product_id') is-invalid @enderror" required id="productSelect">
                                <option value="">Select Product</option>
                                @foreach($products ?? [] as $product)
                                    <option value="{{ $product->id }}" {{ old('product_id', $model->product_id) == $product->id ? 'selected' : '' }} data-unit="{{ $product->unit_id }}">
                                        {{ $product->sku }} - {{ $product->name }}
                                        @if($product->unit)
                                            <span class="unit-badge unit-badge-base">{{ $product->unit->actual_name }}</span>
                                        @endif
                                    </option>
                                @endforeach
                            </select>
                            @error('product_id')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Status</label>
                            <select name="status" class="form-control @error('status') is-invalid @enderror">
                                <option value="draft" {{ old('status', $model->status) == 'draft' ? 'selected' : '' }}>Draft</option>
                                <option value="active" {{ old('status', $model->status) == 'active' ? 'selected' : '' }}>Final</option>
                                <option value="inactive" {{ old('status', $model->status) == 'inactive' ? 'selected' : '' }}>Inactive</option>
                                <option value="obsolete" {{ old('status', $model->status) == 'obsolete' ? 'selected' : '' }}>Obsolete</option>
                            </select>
                            @error('status')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Quantity Produced <span class="text-danger">*</span></label>
                            <input type="number" name="quantity" class="form-control @error('quantity') is-invalid @enderror" 
                                   value="{{ old('quantity', $model->quantity) }}" step="0.01" min="0.01" required>
                            @error('quantity')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                            <span class="text-muted-small">Quantity this BOM produces</span>
                        </div>
                    </div>
                    
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Unit of Measure</label>
                            <select name="unit_of_measure" class="form-control @error('unit_of_measure') is-invalid @enderror" id="unitOfMeasureSelect">
                                <option value="">Select Unit</option>
                                @if($model->product && $model->product->unit)
                                    @php
                                        $productUnitId = $model->product->unit_id;
                                        $businessId = $model->business_id;
                                        $relatedUnits = \App\Unit::where('business_id', $businessId)
                                            ->where(function($q) use ($productUnitId) {
                                                $q->where('id', $productUnitId)
                                                  ->orWhere('base_unit_id', $productUnitId);
                                            })
                                            ->get();
                                    @endphp
                                    @foreach($relatedUnits as $unit)
                                        <option value="{{ $unit->id }}" {{ old('unit_of_measure', $model->unit_of_measure) == $unit->id ? 'selected' : '' }}>
                                            {{ is_null($unit->base_unit_id) ? '' : '↳ ' }}{{ $unit->actual_name }}
                                            @if($unit->base_unit_multiplier)
                                                (1 = {{ $unit->base_unit_multiplier }})
                                            @endif
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                            @error('unit_of_measure')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                            <span class="text-muted-small">Units related to the selected product</span>
                        </div>
                    </div>
                    
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Effective Date</label>
                            <input type="date" name="effective_date" class="form-control @error('effective_date') is-invalid @enderror" 
                                   value="{{ old('effective_date', $model->effective_date ? $model->effective_date->format('Y-m-d') : '') }}">
                            @error('effective_date')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Expiry Date</label>
                            <input type="date" name="expiry_date" class="form-control @error('expiry_date') is-invalid @enderror" 
                                   value="{{ old('expiry_date', $model->expiry_date ? $model->expiry_date->format('Y-m-d') : '') }}">
                            @error('expiry_date')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Notes</label>
                            <textarea name="notes" class="form-control @error('notes') is-invalid @enderror" 
                                      rows="2" style="resize: vertical; min-height: 50px;" 
                                      placeholder="Additional notes about this BOM">{{ old('notes', $model->notes) }}</textarea>
                            @error('notes')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <div class="custom-switch">
                                <input type="checkbox" name="is_default" id="isDefault" value="1" {{ old('is_default', $model->is_default) ? 'checked' : '' }}>
                                <label for="isDefault">Set as Default BOM</label>
                            </div>
                            <span class="text-muted-small">Make this the default BOM for the selected product</span>
                        </div>
                    </div>
                </div>
                
                <hr style="margin: 20px 0; border-color: #e9ecef;">
                
                <!-- Components Section -->
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 style="font-weight: 600; margin: 0;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 4px; color: #6f42c1;">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M3 12l3 3l3 -3l-3 -3z" />
                            <path d="M15 12l3 3l3 -3l-3 -3z" />
                            <path d="M9 6l3 3l3 -3l-3 -3z" />
                            <path d="M9 18l3 3l3 -3l-3 -3z" />
                        </svg>
                        Components
                        <span class="component-count" id="componentCount">({{ $model->components->count() }})</span>
                    </h6>
                    <button type="button" class="btn-add-component" id="addComponentBtn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M12 5l0 14" />
                            <path d="M5 12l14 0" />
                        </svg>
                        Add Component
                    </button>
                </div>
                
                <div id="componentsContainer">
                    @foreach($model->components as $index => $component)
                    <div class="component-row" id="componentRow_{{ $index }}">
                        <button type="button" class="btn-remove-component remove-btn" onclick="removeComponent({{ $index }})" title="Remove Component">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                <path d="M18 6l-12 12" />
                                <path d="M6 6l12 12" />
                            </svg>
                        </button>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group" style="margin-bottom: 0;">
                                    <label style="font-size: 12px;">Raw Material <span class="text-danger">*</span></label>
                                    <select name="components[{{ $index }}][raw_material_id]" class="form-control" required onchange="updateUnitOptions({{ $index }}, this)">
                                        <option value="">Select Material</option>
                                        @foreach($rawMaterials ?? [] as $material)
                                            <option value="{{ $material->id }}" {{ old("components.{$index}.raw_material_id", $component->raw_material_id) == $material->id ? 'selected' : '' }} data-unit-id="{{ $material->unit_id }}">
                                                {{ $material->sku }} - {{ $material->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group" style="margin-bottom: 0;">
                                    <label style="font-size: 12px;">Quantity <span class="text-danger">*</span></label>
                                    <input type="number" name="components[{{ $index }}][quantity_required]" class="form-control" 
                                           step="0.001" min="0.001" required value="{{ old("components.{$index}.quantity_required", $component->quantity_required) }}">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group" style="margin-bottom: 0;">
                                    <label style="font-size: 12px;">Unit</label>
                                    <select name="components[{{ $index }}][unit_of_measure]" class="form-control" id="unitSelect_{{ $index }}">
                                        <option value="">Select Unit</option>
                                        @if($component->rawMaterial && $component->rawMaterial->unit)
                                            @php
                                                $productUnitId = $component->rawMaterial->unit_id;
                                                $businessId = $model->business_id;
                                                $relatedUnits = \App\Unit::where('business_id', $businessId)
                                                    ->where(function($q) use ($productUnitId) {
                                                        $q->where('id', $productUnitId)
                                                          ->orWhere('base_unit_id', $productUnitId);
                                                    })
                                                    ->get();
                                            @endphp
                                            @foreach($relatedUnits as $unit)
                                                <option value="{{ $unit->id }}" {{ old("components.{$index}.unit_of_measure", $component->unit_of_measure) == $unit->id ? 'selected' : '' }}>
                                                    {{ is_null($unit->base_unit_id) ? '' : '↳ ' }}{{ $unit->actual_name }}
                                                    @if($unit->base_unit_multiplier)
                                                        (1 = {{ $unit->base_unit_multiplier }})
                                                    @endif
                                                </option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group" style="margin-bottom: 0;">
                                    <label style="font-size: 12px;">Wastage %</label>
                                    <input type="number" name="components[{{ $index }}][wastage_percentage]" class="form-control" 
                                           step="0.01" min="0" max="100" value="{{ old("components.{$index}.wastage_percentage", $component->wastage_percentage) }}">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group" style="margin-bottom: 0;">
                                    <label style="font-size: 12px;">Sequence</label>
                                    <input type="number" name="components[{{ $index }}][sequence_order]" class="form-control" 
                                           value="{{ old("components.{$index}.sequence_order", $component->sequence_order ?? $index + 1) }}" min="0">
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                
                <hr style="margin: 20px 0; border-color: #e9ecef;">
                
                <div class="btn-actions">
                    <button type="submit" class="btn-submit">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2" />
                            <path d="M8 4m0 1a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-6a1 1 0 0 1 -1 -1z" />
                            <path d="M8 15m0 1a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-6a1 1 0 0 1 -1 -1z" />
                            <path d="M16 4v4" />
                        </svg>
                        Update BOM
                    </button>
                    <a href="{{ route('manufacturing.production.bom.index') }}" class="btn-cancel">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M5 12l14 0" />
                            <path d="M5 12l6 6" />
                            <path d="M5 12l6 -6" />
                        </svg>
                        Cancel
                    </a>
                </div>
            </form>
        </div>
    </div>
</section>

<script>
    // =============================================
    // Component Management
    // =============================================
    let componentIndex = {{ $model->components->count() }};
    const rawMaterials = @json($rawMaterials ?? []);
    const unitGroups = @json($unitGroups ?? []);
    
    // Build unit options HTML for a specific product's unit
    function getUnitOptionsForProduct(productId, selectedUnitId = null) {
        let html = '<option value="">Select Unit</option>';
        
        // Find the product
        const product = rawMaterials.find(p => p.id == productId);
        
        if (product && product.unit_id) {
            // Find the unit group that contains this product's unit
            Object.values(unitGroups).forEach(function(group) {
                let containsUnit = false;
                if (group.base_unit && group.base_unit.id == product.unit_id) {
                    containsUnit = true;
                }
                group.sub_units.forEach(function(subUnit) {
                    if (subUnit.id == product.unit_id) {
                        containsUnit = true;
                    }
                });
                
                if (containsUnit) {
                    if (group.base_unit) {
                        const selected = selectedUnitId == group.base_unit.id ? 'selected' : '';
                        html += `<option value="${group.base_unit.id}" ${selected}>${group.base_unit.actual_name}</option>`;
                    }
                    group.sub_units.forEach(function(subUnit) {
                        const selected = selectedUnitId == subUnit.id ? 'selected' : '';
                        const multiplier = subUnit.base_unit_multiplier || 1;
                        html += `<option value="${subUnit.id}" ${selected}>&nbsp;&nbsp;&nbsp;↳ ${subUnit.actual_name} (1 = ${multiplier})</option>`;
                    });
                }
            });
        }
        
        return html;
    }
    
    function getComponentRow(index) {
        let materialOptions = '<option value="">Select Material</option>';
        rawMaterials.forEach(function(material) {
            materialOptions += `<option value="${material.id}" data-unit-id="${material.unit_id}">${material.sku} - ${material.name}</option>`;
        });
        
        return `
            <div class="component-row" id="componentRow_${index}">
                <button type="button" class="btn-remove-component remove-btn" onclick="removeComponent(${index})" title="Remove Component">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M18 6l-12 12" />
                        <path d="M6 6l12 12" />
                    </svg>
                </button>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group" style="margin-bottom: 0;">
                            <label style="font-size: 12px;">Raw Material <span class="text-danger">*</span></label>
                            <select name="components[${index}][raw_material_id]" class="form-control" required onchange="updateUnitOptions(${index}, this)">
                                ${materialOptions}
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group" style="margin-bottom: 0;">
                            <label style="font-size: 12px;">Quantity <span class="text-danger">*</span></label>
                            <input type="number" name="components[${index}][quantity_required]" class="form-control" step="0.001" min="0.001" required placeholder="0.000">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group" style="margin-bottom: 0;">
                            <label style="font-size: 12px;">Unit</label>
                            <select name="components[${index}][unit_of_measure]" class="form-control" id="unitSelect_${index}">
                                <option value="">Select Unit</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group" style="margin-bottom: 0;">
                            <label style="font-size: 12px;">Wastage %</label>
                            <input type="number" name="components[${index}][wastage_percentage]" class="form-control" step="0.01" min="0" max="100" value="0">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group" style="margin-bottom: 0;">
                            <label style="font-size: 12px;">Sequence</label>
                            <input type="number" name="components[${index}][sequence_order]" class="form-control" value="${index + 1}" min="0">
                        </div>
                    </div>
                </div>
            </div>
        `;
    }
    
    // =============================================
    // Update unit options based on selected material
    // =============================================
    function updateUnitOptions(index, selectElement) {
        const selectedOption = selectElement.options[selectElement.selectedIndex];
        const productId = selectedOption ? selectedOption.value : null;
        const unitSelect = document.getElementById('unitSelect_' + index);
        
        if (unitSelect && productId) {
            unitSelect.innerHTML = getUnitOptionsForProduct(productId);
            // Auto-select the first unit option (base unit)
            if (unitSelect.options.length > 1) {
                unitSelect.selectedIndex = 1;
            }
        }
    }
    
    // =============================================
    // Load units for the main product
    // =============================================
    function loadProductUnits(productId, selectedUnitId = null) {
        const unitSelect = document.getElementById('unitOfMeasureSelect');
        
        if (!productId) {
            unitSelect.innerHTML = '<option value="">Select Unit</option>';
            return;
        }
        
        let options = '<option value="">Select Unit</option>';
        
        // Find the product
        const product = @json($products ?? []).find(p => p.id == productId);
        
        if (product && product.unit_id) {
            // Find the unit group that contains this product's unit
            Object.values(unitGroups).forEach(function(group) {
                let containsUnit = false;
                if (group.base_unit && group.base_unit.id == product.unit_id) {
                    containsUnit = true;
                }
                group.sub_units.forEach(function(subUnit) {
                    if (subUnit.id == product.unit_id) {
                        containsUnit = true;
                    }
                });
                
                if (containsUnit) {
                    if (group.base_unit) {
                        const selected = selectedUnitId == group.base_unit.id ? 'selected' : '';
                        options += `<option value="${group.base_unit.id}" ${selected}>${group.base_unit.actual_name}</option>`;
                    }
                    group.sub_units.forEach(function(subUnit) {
                        const selected = selectedUnitId == subUnit.id ? 'selected' : '';
                        const multiplier = subUnit.base_unit_multiplier || 1;
                        options += `<option value="${subUnit.id}" ${selected}>&nbsp;&nbsp;&nbsp;↳ ${subUnit.actual_name} (1 = ${multiplier})</option>`;
                    });
                }
            });
        }
        
        unitSelect.innerHTML = options;
        
        // Auto-select the first unit option if no selection
        if (!selectedUnitId && unitSelect.options.length > 1) {
            unitSelect.selectedIndex = 1;
        }
    }
    
    // =============================================
    // Add Component
    // =============================================
    document.getElementById('addComponentBtn')?.addEventListener('click', function() {
        const container = document.getElementById('componentsContainer');
        const index = componentIndex++;
        container.insertAdjacentHTML('beforeend', getComponentRow(index));
        document.getElementById('componentCount').textContent = `(${componentIndex})`;
        
        // Auto-select unit for the new component
        const newRow = document.getElementById('componentRow_' + index);
        if (newRow) {
            const materialSelect = newRow.querySelector('select[name$="[raw_material_id]"]');
            if (materialSelect && materialSelect.value) {
                setTimeout(function() {
                    updateUnitOptions(index, materialSelect);
                }, 100);
            }
        }
    });
    
    // =============================================
    // Remove Component
    // =============================================
    function removeComponent(index) {
        const row = document.getElementById('componentRow_' + index);
        if (row) {
            row.remove();
            // Re-index remaining components
            const rows = document.querySelectorAll('.component-row');
            rows.forEach(function(row, idx) {
                const inputs = row.querySelectorAll('input, select');
                inputs.forEach(function(input) {
                    const name = input.getAttribute('name');
                    if (name) {
                        input.setAttribute('name', name.replace(/\[\d+\]/, '[' + idx + ']'));
                    }
                });
            });
            componentIndex = rows.length;
            document.getElementById('componentCount').textContent = `(${componentIndex})`;
        }
    }
    
    // =============================================
    // Product selection change - load units
    // =============================================
    document.getElementById('productSelect')?.addEventListener('change', function() {
        const productId = this.value;
        loadProductUnits(productId);
    });
    
    // =============================================
    // Initialize - load units for existing product
    // =============================================
    document.addEventListener('DOMContentLoaded', function() {
        const productSelect = document.getElementById('productSelect');
        if (productSelect && productSelect.value) {
            const currentUnit = document.getElementById('unitOfMeasureSelect').value;
            loadProductUnits(productSelect.value, currentUnit);
        }
        
        // Initialize unit selects for existing components
        document.querySelectorAll('.component-row').forEach(function(row, index) {
            const materialSelect = row.querySelector('select[name$="[raw_material_id]"]');
            if (materialSelect && materialSelect.value) {
                const unitSelect = document.getElementById('unitSelect_' + index);
                if (unitSelect) {
                    const options = getUnitOptionsForProduct(materialSelect.value);
                    unitSelect.innerHTML = options;
                    // Preserve selected value or auto-select first
                    const currentValue = unitSelect.value;
                    if (currentValue) {
                        unitSelect.value = currentValue;
                    } else if (unitSelect.options.length > 1) {
                        unitSelect.selectedIndex = 1;
                    }
                }
            }
        });
    });
</script>

@endsection