{{-- create.blade.php --}}
@extends('layouts.app')
@section('title', 'Create Production Order')

@section('content')
<style>
    .form-section {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        border: 1px solid #e9ecef;
    }
    .form-section .section-title {
        font-weight: 600;
        font-size: 16px;
        color: #212529;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .ingredient-row {
        background: #ffffff;
        border-radius: 6px;
        padding: 12px;
        margin-bottom: 10px;
        border: 1px solid #dee2e6;
        position: relative;
    }
    .ingredient-row .remove-btn {
        position: absolute;
        top: 8px;
        right: 8px;
    }
    
    .auto-calc-btn {
        background: #6f42c1;
        color: #fff;
        border: none;
        border-radius: 6px;
        padding: 6px 16px;
        font-size: 13px;
        transition: all 0.2s ease;
    }
    .auto-calc-btn:hover {
        background: #5a32a3;
        color: #fff;
    }
    
    .auto-calc-btn-success {
        background: #198754;
        color: #fff;
        border: none;
        border-radius: 6px;
        padding: 6px 16px;
        font-size: 13px;
        transition: all 0.2s ease;
    }
    .auto-calc-btn-success:hover {
        background: #157347;
        color: #fff;
    }
    
    .expected-production {
        background: #d1e7dd;
        border-radius: 8px;
        padding: 12px 16px;
        border-left: 4px solid #198754;
        margin-top: 10px;
        display: none;
    }
    .expected-production .label {
        font-weight: 600;
        color: #0f5132;
    }
    .expected-production .value {
        font-size: 18px;
        font-weight: 700;
        color: #0f5132;
    }

    .btn-remove-component {
        background: none;
        border: none;
        color: #dc3545;
        font-size: 18px;
        padding: 0 8px;
        cursor: pointer;
    }
    .btn-remove-component:hover {
        color: #c82333;
    }

    .text-muted-small {
        font-size: 12px;
        color: #6c757d;
    }

    .ingredient-row .form-group label {
        font-size: 12px;
        font-weight: 600;
        color: #495057;
        margin-bottom: 4px;
    }

    .toast-container {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
    }
    .toast-message {
        padding: 15px 20px;
        border-radius: 8px;
        margin-bottom: 10px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        max-width: 400px;
        font-size: 14px;
        animation: slideIn 0.3s ease;
    }
    .toast-success {
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }
    .toast-danger {
        background: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }
    .toast-warning {
        background: #fff3cd;
        color: #856404;
        border: 1px solid #ffc107;
    }
    .toast-info {
        background: #d1ecf1;
        color: #0c5460;
        border: 1px solid #bee5eb;
    }

    @keyframes slideIn {
        from { transform: translateX(100%); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }
    @keyframes slideOut {
        from { transform: translateX(0); opacity: 1; }
        to { transform: translateX(100%); opacity: 0; }
    }

    .spinner-border-sm {
        width: 16px;
        height: 16px;
        border-width: 2px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 6px;
    }
</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="M12 5l0 14" />
            <path d="M5 12l14 0" />
        </svg>
        {{ isset($order) ? 'Edit' : 'Create' }} Production Order
    </h1>
</section>

<section class="content">
    @include('manufacturing.partials.navigation')
    
    <div class="card production-card">
        <div class="card-body">
            <form action="{{ isset($order) ? route('manufacturing.production.orders.update', $order->id) : route('manufacturing.production.orders.store') }}" 
                  method="POST" id="productionForm">
                @csrf
                @if(isset($order))
                    @method('PUT')
                @endif
                
                {{-- Production Details --}}
                <div class="form-section">
                    <div class="section-title">
                        <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="M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" />
                            <path d="M16 3l0 4" />
                            <path d="M8 3l0 4" />
                            <path d="M4 11l16 0" />
                        </svg>
                        Production Details
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Production Number</label>
                                <input type="text" name="production_order_number" class="form-control" 
                                       value="{{ $orderNumber ?? (isset($order) ? $order->production_order_number : '') }}" readonly>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Schedule <span class="text-danger">*</span></label>
                                <select name="schedule_id" id="scheduleSelect" class="form-control @error('schedule_id') is-invalid @enderror">
                                    <option value="">Select Schedule (Optional)</option>
                                    @foreach($schedules ?? [] as $schedule)
                                        <option value="{{ $schedule->id }}" 
                                            data-bom="{{ $schedule->bom_id }}"
                                            data-product="{{ $schedule->product_id }}"
                                            data-quantity="{{ $schedule->quantity_to_produce }}"
                                            data-unit="{{ $schedule->unit_of_measure }}"
                                            data-start="{{ $schedule->planned_start_date }}"
                                            data-end="{{ $schedule->planned_end_date }}"
                                            data-priority="{{ $schedule->priority }}"
                                            data-shift="{{ $schedule->shift }}"
                                            {{ (old('schedule_id') ?? (isset($order) ? $order->schedule_id : $prefilledData['schedule_id'] ?? '')) == $schedule->id ? 'selected' : '' }}>
                                            {{ $schedule->schedule_code }} - {{ $schedule->product->name ?? 'N/A' }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('schedule_id') <span class="invalid-feedback">{{ $message }}</span> @enderror
                                <span class="text-muted-small">Select a schedule to auto-fill details</span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>BOM <span class="text-danger">*</span></label>
                                <select name="bom_id" id="bomSelect" class="form-control @error('bom_id') is-invalid @enderror" required>
                                    <option value="">Select BOM</option>
                                    @foreach($boms ?? [] as $bom)
                                        <option value="{{ $bom->id }}" 
                                            data-product="{{ $bom->product_id }}"
                                            data-unit="{{ $bom->unit_of_measure }}"
                                            data-quantity="{{ $bom->quantity }}"
                                            {{ (old('bom_id') ?? (isset($order) ? $order->bom_id : $prefilledData['bom_id'] ?? '')) == $bom->id ? 'selected' : '' }}>
                                            {{ $bom->bom_code }} - {{ $bom->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('bom_id') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="row mt-2">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Product <span class="text-danger">*</span></label>
                                <select name="product_id" id="productSelect" class="form-control @error('product_id') is-invalid @enderror" required>
                                    <option value="">Select Product</option>
                                    @foreach($products ?? [] as $product)
                                        <option value="{{ $product->id }}" 
                                            {{ (old('product_id') ?? (isset($order) ? $order->product_id : $prefilledData['product_id'] ?? '')) == $product->id ? 'selected' : '' }}>
                                            {{ $product->sku }} - {{ $product->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('product_id') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Planned Quantity <span class="text-danger">*</span></label>
                                <input type="number" name="planned_quantity" id="plannedQuantity" 
                                       class="form-control @error('planned_quantity') is-invalid @enderror" 
                                       value="{{ old('planned_quantity') ?? (isset($order) ? $order->planned_quantity : $prefilledData['planned_quantity'] ?? 1) }}" 
                                       step="0.001" min="0.001" required>
                                @error('planned_quantity') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Unit of Measure</label>
                                <select name="unit_of_measure" id="unitSelect" class="form-control @error('unit_of_measure') is-invalid @enderror">
                                    <option value="KG" {{ (old('unit_of_measure') ?? (isset($order) ? $order->unit_of_measure : $prefilledData['unit_of_measure'] ?? '')) == 'KG' ? 'selected' : '' }}>KG</option>
                                    <option value="G" {{ (old('unit_of_measure') ?? (isset($order) ? $order->unit_of_measure : $prefilledData['unit_of_measure'] ?? '')) == 'G' ? 'selected' : '' }}>G</option>
                                    <option value="L" {{ (old('unit_of_measure') ?? (isset($order) ? $order->unit_of_measure : $prefilledData['unit_of_measure'] ?? '')) == 'L' ? 'selected' : '' }}>L</option>
                                    <option value="ML" {{ (old('unit_of_measure') ?? (isset($order) ? $order->unit_of_measure : $prefilledData['unit_of_measure'] ?? '')) == 'ML' ? 'selected' : '' }}>ML</option>
                                    <option value="PCS" {{ (old('unit_of_measure') ?? (isset($order) ? $order->unit_of_measure : $prefilledData['unit_of_measure'] ?? '')) == 'PCS' ? 'selected' : '' }}>PCS</option>
                                </select>
                                @error('unit_of_measure') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>
                        </div>
                    </div>
                </div>
                
                {{-- Dates & Assignment --}}
                <div class="form-section">
                    <div class="section-title">
                        <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="M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" />
                            <path d="M16 3l0 4" />
                            <path d="M8 3l0 4" />
                            <path d="M4 11l16 0" />
                            <path d="M8 15h8" />
                        </svg>
                        Scheduling & Assignment
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Planned Start Date <span class="text-danger">*</span></label>
                                <input type="datetime-local" name="planned_start_date" 
                                       class="form-control @error('planned_start_date') is-invalid @enderror" 
                                       value="{{ old('planned_start_date') ?? (isset($order) ? $order->planned_start_date->format('Y-m-d\TH:i') : $prefilledData['planned_start_date'] ?? '') }}" required>
                                @error('planned_start_date') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Planned End Date</label>
                                <input type="datetime-local" name="planned_end_date" 
                                       class="form-control @error('planned_end_date') is-invalid @enderror" 
                                       value="{{ old('planned_end_date') ?? (isset($order) ? $order->planned_end_date?->format('Y-m-d\TH:i') : $prefilledData['planned_end_date'] ?? '') }}">
                                @error('planned_end_date') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Status</label>
                                <select name="status" class="form-control @error('status') is-invalid @enderror">
                                    @foreach(\App\Models\Manufacturing\Production\ProductionOrder::STATUSES as $key => $label)
                                        <option value="{{ $key }}" 
                                            {{ (old('status') ?? (isset($order) ? $order->status : 'draft')) == $key ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('status') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="row mt-2">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Priority</label>
                                <select name="priority" class="form-control @error('priority') is-invalid @enderror">
                                    @foreach(\App\Models\Manufacturing\Production\ProductionOrder::PRIORITIES as $key => $label)
                                        <option value="{{ $key }}" 
                                            {{ (old('priority') ?? (isset($order) ? $order->priority : $prefilledData['priority'] ?? 'medium')) == $key ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('priority') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Shift</label>
                                <input type="text" name="shift" class="form-control @error('shift') is-invalid @enderror" 
                                       value="{{ old('shift') ?? (isset($order) ? $order->shift : $prefilledData['shift'] ?? '') }}" 
                                       placeholder="Morning, Evening, Night">
                                @error('shift') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Assigned To</label>
                                <select name="assigned_to" class="form-control @error('assigned_to') is-invalid @enderror">
                                    <option value="">Select Operator</option>
                                    @foreach($operators ?? [] as $operator)
                                        <option value="{{ $operator->id }}" 
                                            {{ (old('assigned_to') ?? (isset($order) ? $order->assigned_to : '')) == $operator->id ? 'selected' : '' }}>
                                            {{ $operator->username ?? $operator->name ?? $operator->first_name ?? '' }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('assigned_to') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Machine</label>
                                <select name="machine_id" class="form-control @error('machine_id') is-invalid @enderror">
                                    <option value="">Select Machine</option>
                                    @foreach($machines ?? [] as $machine)
                                        <option value="{{ $machine->id }}" 
                                            {{ (old('machine_id') ?? (isset($order) ? $order->machine_id : '')) == $machine->id ? 'selected' : '' }}>
                                            {{ $machine->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('machine_id') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>
                        </div>
                    </div>
                </div>
                
                {{-- Ingredients --}}
                <div class="form-section">
                    <div class="section-title d-flex justify-content-between align-items-center">
                        <div>
                            <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;">
                                <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>
                            Raw Materials (Ingredients)
                            <span class="badge bg-secondary" id="ingredientCount">0</span>
                        </div>
                        <div class="d-flex gap-2">
                            <button type="button" class="auto-calc-btn" id="autoCalculateIngredients">
                                <i class="bi bi-calculator"></i> Auto-Calculate from BOM
                            </button>
                            <button type="button" class="btn btn-primary btn-sm" id="addIngredientBtn">
                                <i class="bi bi-plus-circle"></i> Add Ingredient
                            </button>
                        </div>
                    </div>
                    
                    <div id="ingredientsContainer">
                        <!-- Ingredients will be added here -->
                    </div>
                    
                    <!-- Expected Production -->
                    <div class="expected-production" id="expectedProduction">
                        <span class="label">Expected Production from Current Ingredients:</span>
                        <span class="value" id="expectedQuantity">0.00</span>
                        <button type="button" class="btn btn-sm btn-success ms-2" id="applyExpectedProduction">
                            <i class="bi bi-check2"></i> Apply
                        </button>
                    </div>
                </div>
                
                {{-- Notes --}}
                <div class="form-section">
                    <div class="section-title">Notes</div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <textarea name="notes" class="form-control @error('notes') is-invalid @enderror" 
                                          rows="3" placeholder="Additional notes about this production">{{ old('notes') ?? (isset($order) ? $order->notes : $prefilledData['notes'] ?? '') }}</textarea>
                                @error('notes') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>
                        </div>
                    </div>
                </div>
                
                {{-- Actions --}}
                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-success">
                        <i class="bi bi-check2-circle"></i> {{ isset($order) ? 'Update' : 'Create' }} Production
                    </button>
                    <a href="{{ route('manufacturing.production.orders.index') }}" class="btn btn-secondary">
                        <i class="bi bi-x-circle"></i> Cancel
                    </a>
                </div>
            </form>
        </div>
    </div>
</section>

<script>
// ============================================
// TOAST NOTIFICATION SYSTEM
// ============================================
function showToast(message, type = 'success') {
    const container = document.getElementById('toastContainer') || (function() {
        const div = document.createElement('div');
        div.id = 'toastContainer';
        div.className = 'toast-container';
        document.body.appendChild(div);
        return div;
    })();
    
    const toast = document.createElement('div');
    toast.className = `toast-message toast-${type}`;
    toast.textContent = message;
    container.appendChild(toast);
    
    setTimeout(() => {
        toast.style.animation = 'slideOut 0.3s ease';
        setTimeout(() => toast.remove(), 300);
    }, 4000);
}

// ============================================
// INGREDIENTS MANAGEMENT
// ============================================
let ingredientIndex = 0;
const rawMaterials = @json($rawMaterials ?? []);

function getIngredientRow(index, data = null) {
    let materialOptions = '<option value="">Select Material</option>';
    rawMaterials.forEach(function(material) {
        const selected = data && data.raw_material_id == material.id ? 'selected' : '';
        const materialName = material.name || '';
        const materialSku = material.sku || '';
        materialOptions += `<option value="${material.id}" ${selected}>${materialSku} - ${materialName}</option>`;
    });
    
    // If this is the first row and no data, set default wastage to 0
    const wastage = data && data.wastage_percentage !== undefined ? data.wastage_percentage : 0;
    const plannedQty = data && data.planned_quantity ? data.planned_quantity : '';
    const usedQty = data && data.used_quantity ? data.used_quantity : 0;
    const unit = data && data.unit_of_measure ? data.unit_of_measure : 'KG';
    
    return `
        <div class="ingredient-row" id="ingredientRow_${index}">
            <button type="button" class="btn-remove-component remove-btn" onclick="removeIngredient(${index})">
                <i class="bi bi-x-circle"></i>
            </button>
            <div class="row g-2">
                <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="ingredients[${index}][raw_material_id]" class="form-control form-control-sm ingredient-material" required>
                            ${materialOptions}
                        </select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group" style="margin-bottom: 0;">
                        <label style="font-size: 12px;">Planned Qty <span class="text-danger">*</span></label>
                        <input type="number" name="ingredients[${index}][planned_quantity]" class="form-control form-control-sm ingredient-qty" 
                               step="0.001" min="0.001" value="${plannedQty}" required>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group" style="margin-bottom: 0;">
                        <label style="font-size: 12px;">Used Qty</label>
                        <input type="number" name="ingredients[${index}][used_quantity]" class="form-control form-control-sm" 
                               step="0.001" min="0" value="${usedQty}">
                    </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="ingredients[${index}][wastage_percentage]" class="form-control form-control-sm" 
                               step="0.01" min="0" max="100" value="${wastage}">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group" style="margin-bottom: 0;">
                        <label style="font-size: 12px;">Unit</label>
                        <select name="ingredients[${index}][unit_of_measure]" class="form-control form-control-sm">
                            <option value="KG" ${unit == 'KG' ? 'selected' : ''}>KG</option>
                            <option value="G" ${unit == 'G' ? 'selected' : ''}>G</option>
                            <option value="L" ${unit == 'L' ? 'selected' : ''}>L</option>
                            <option value="ML" ${unit == 'ML' ? 'selected' : ''}>ML</option>
                            <option value="PCS" ${unit == 'PCS' ? 'selected' : ''}>PCS</option>
                            <option value="UNIT" ${unit == 'UNIT' ? 'selected' : ''}>UNIT</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    `;
}

function addIngredient(data = null) {
    const container = document.getElementById('ingredientsContainer');
    const index = ingredientIndex++;
    container.insertAdjacentHTML('beforeend', getIngredientRow(index, data));
    updateIngredientCount();
}

function removeIngredient(index) {
    const row = document.getElementById('ingredientRow_' + index);
    if (row) {
        row.remove();
        updateIngredientCount();
        calculateExpectedProduction();
    }
}

function updateIngredientCount() {
    const count = document.querySelectorAll('.ingredient-row').length;
    document.getElementById('ingredientCount').textContent = count;
}

function clearIngredients() {
    document.getElementById('ingredientsContainer').innerHTML = '';
    ingredientIndex = 0;
    updateIngredientCount();
}

// ============================================
// AUTO-CALCULATE FROM BOM
// ============================================
document.getElementById('autoCalculateIngredients')?.addEventListener('click', function() {
    const bomId = document.getElementById('bomSelect').value;
    const quantity = document.getElementById('plannedQuantity').value;
    
    if (!bomId) {
        showToast('Please select a BOM first.', 'warning');
        return;
    }
    
    if (!quantity || parseFloat(quantity) <= 0) {
        showToast('Please enter a valid planned quantity.', 'warning');
        return;
    }
    
    // Show loading
    const originalText = this.innerHTML;
    this.disabled = true;
    this.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Calculating...';
    
    fetch('{{ route("manufacturing.production.orders.get-bom-ingredients") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ 
            bom_id: bomId, 
            quantity: parseFloat(quantity) 
        })
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            // Clear existing ingredients
            clearIngredients();
            
            // Add new ingredients
            if (data.ingredients && data.ingredients.length > 0) {
                data.ingredients.forEach(function(ingredient) {
                    addIngredient(ingredient);
                });
                showToast(`Ingredients auto-calculated successfully! (${data.ingredients.length} items)`, 'success');
            } else {
                showToast('No ingredients found in this BOM.', 'warning');
                addIngredient();
            }
            
            // Calculate expected production
            calculateExpectedProduction();
        } else {
            showToast('Error: ' + (data.message || 'Unknown error'), 'danger');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('An error occurred while calculating ingredients: ' + error.message, 'danger');
    })
    .finally(() => {
        this.disabled = false;
        this.innerHTML = originalText;
    });
});

// ============================================
// CALCULATE EXPECTED PRODUCTION
// ============================================
function calculateExpectedProduction() {
    const orderId = {{ isset($order) ? $order->id : 'null' }};
    if (!orderId) {
        // For new productions, we can't calculate expected production from backend yet
        document.getElementById('expectedProduction').style.display = 'none';
        return;
    }
    
    fetch('{{ route("manufacturing.production.orders.auto-calculate-production", isset($order) ? $order->id : 0) }}')
    .then(response => response.json())
    .then(data => {
        if (data.success && data.expected_quantity > 0) {
            const el = document.getElementById('expectedProduction');
            document.getElementById('expectedQuantity').textContent = data.expected_quantity.toFixed(2);
            el.style.display = 'block';
        } else {
            document.getElementById('expectedProduction').style.display = 'none';
        }
    })
    .catch(() => {
        document.getElementById('expectedProduction').style.display = 'none';
    });
}

// ============================================
// APPLY EXPECTED PRODUCTION
// ============================================
document.getElementById('applyExpectedProduction')?.addEventListener('click', function() {
    const value = document.getElementById('expectedQuantity').textContent;
    if (value && parseFloat(value) > 0) {
        document.getElementById('plannedQuantity').value = parseFloat(value);
        document.getElementById('expectedProduction').style.display = 'none';
        
        // Recalculate ingredients with new quantity
        const bomId = document.getElementById('bomSelect').value;
        if (bomId) {
            setTimeout(() => {
                document.getElementById('autoCalculateIngredients').click();
            }, 300);
        }
    }
});

// ============================================
// SCHEDULE SELECTION
// ============================================
document.getElementById('scheduleSelect')?.addEventListener('change', function() {
    const selected = this.options[this.selectedIndex];
    if (!selected.value) {
        // If schedule is deselected, clear pre-filled fields but keep current BOM selection
        return;
    }
    
    // Auto-fill fields from schedule
    const bomId = selected.dataset.bom;
    const productId = selected.dataset.product;
    const quantity = selected.dataset.quantity;
    const unit = selected.dataset.unit;
    const start = selected.dataset.start;
    const end = selected.dataset.end;
    const priority = selected.dataset.priority;
    const shift = selected.dataset.shift;
    
    if (bomId) {
        document.getElementById('bomSelect').value = bomId;
        // Trigger BOM change to populate product and ingredients
        setTimeout(() => {
            const bomChangeEvent = new Event('change');
            document.getElementById('bomSelect').dispatchEvent(bomChangeEvent);
        }, 100);
    }
    
    if (productId) document.getElementById('productSelect').value = productId;
    if (quantity) document.getElementById('plannedQuantity').value = quantity;
    if (unit) document.getElementById('unitSelect').value = unit;
    if (start) document.querySelector('[name="planned_start_date"]').value = start.replace(' ', 'T');
    if (end) document.querySelector('[name="planned_end_date"]').value = end.replace(' ', 'T');
    if (priority) document.querySelector('[name="priority"]').value = priority;
    if (shift) document.querySelector('[name="shift"]').value = shift;
});

// ============================================
// BOM SELECTION (UPDATED - FIXED)
// ============================================
document.getElementById('bomSelect')?.addEventListener('change', function() {
    const selected = this.options[this.selectedIndex];
    if (!selected.value) {
        // If BOM is deselected, clear product but keep existing ingredients
        document.getElementById('productSelect').value = '';
        return;
    }
    
    const productId = selected.dataset.product;
    const unit = selected.dataset.unit;
    const quantity = selected.dataset.quantity;
    
    // Auto-fill product
    if (productId) {
        document.getElementById('productSelect').value = productId;
    }
    
    // Auto-fill unit if available
    if (unit) {
        document.getElementById('unitSelect').value = unit;
    }
    
    // Auto-fill quantity if available and not already set or if it's the default
    if (quantity) {
        const currentQuantity = document.getElementById('plannedQuantity').value;
        if (!currentQuantity || parseFloat(currentQuantity) <= 0 || currentQuantity == 1) {
            document.getElementById('plannedQuantity').value = quantity;
        }
    }
    
    // Trigger auto-calculation of ingredients
    const plannedQuantity = document.getElementById('plannedQuantity').value;
    if (plannedQuantity && parseFloat(plannedQuantity) > 0) {
        setTimeout(() => {
            document.getElementById('autoCalculateIngredients').click();
        }, 400);
    } else {
        // If quantity is not set, set a default and trigger calculation
        document.getElementById('plannedQuantity').value = 1;
        setTimeout(() => {
            document.getElementById('autoCalculateIngredients').click();
        }, 400);
    }
});

// ============================================
// QUANTITY CHANGE - RECALCULATE INGREDIENTS
// ============================================
document.getElementById('plannedQuantity')?.addEventListener('change', function() {
    const bomId = document.getElementById('bomSelect').value;
    if (bomId && this.value && parseFloat(this.value) > 0) {
        // Recalculate ingredients with new quantity
        setTimeout(() => {
            document.getElementById('autoCalculateIngredients').click();
        }, 400);
    }
});

// Debounce quantity change to avoid multiple API calls
let quantityTimeout = null;
document.getElementById('plannedQuantity')?.addEventListener('input', function() {
    clearTimeout(quantityTimeout);
    const bomId = document.getElementById('bomSelect').value;
    if (bomId && this.value && parseFloat(this.value) > 0) {
        quantityTimeout = setTimeout(() => {
            document.getElementById('autoCalculateIngredients').click();
        }, 800);
    }
});

// ============================================
// ADD INGREDIENT BUTTON
// ============================================
document.getElementById('addIngredientBtn')?.addEventListener('click', function() {
    addIngredient();
});

// ============================================
// INITIALIZE
// ============================================
document.addEventListener('DOMContentLoaded', function() {
    // Check if we have existing ingredients (edit mode)
    @if(isset($order) && $order->ingredients->count() > 0)
        @foreach($order->ingredients as $ingredient)
            addIngredient({
                raw_material_id: {{ $ingredient->raw_material_id }},
                planned_quantity: {{ $ingredient->planned_quantity }},
                used_quantity: {{ $ingredient->used_quantity }},
                wastage_percentage: {{ $ingredient->wastage_percentage }},
                unit_of_measure: '{{ $ingredient->unit_of_measure }}'
            });
        @endforeach
        // Calculate expected production for edit mode
        setTimeout(() => {
            calculateExpectedProduction();
        }, 500);
    @elseif(isset($prefilledData) && isset($prefilledData['bom_id']) && $prefilledData['bom_id'])
        // Auto-calculate if BOM is pre-filled (from schedule selection)
        setTimeout(() => {
            document.getElementById('autoCalculateIngredients').click();
        }, 800);
    @else
        // Add one empty ingredient row for new production
        addIngredient();
    @endif
    
    // If BOM is pre-selected and no ingredients are loaded, trigger auto-calculate
    const bomSelect = document.getElementById('bomSelect');
    if (bomSelect && bomSelect.value) {
        const hasIngredients = document.querySelectorAll('.ingredient-row').length > 0;
        if (!hasIngredients) {
            setTimeout(() => {
                document.getElementById('autoCalculateIngredients').click();
            }, 1000);
        }
    }
});

// ============================================
// FORM VALIDATION BEFORE SUBMIT
// ============================================
document.getElementById('productionForm')?.addEventListener('submit', function(e) {
    // Validate that at least one ingredient exists
    const ingredientRows = document.querySelectorAll('.ingredient-row');
    if (ingredientRows.length === 0) {
        e.preventDefault();
        showToast('Please add at least one ingredient.', 'warning');
        return false;
    }
    
    // Validate that all ingredient rows have a material selected
    let hasEmptyMaterial = false;
    ingredientRows.forEach(function(row) {
        const select = row.querySelector('.ingredient-material');
        if (select && !select.value) {
            hasEmptyMaterial = true;
        }
    });
    
    if (hasEmptyMaterial) {
        e.preventDefault();
        showToast('Please select a raw material for all ingredients.', 'warning');
        return false;
    }
    
    // Validate that all ingredient rows have a planned quantity
    let hasEmptyQuantity = false;
    ingredientRows.forEach(function(row) {
        const qtyInput = row.querySelector('.ingredient-qty');
        if (qtyInput && (!qtyInput.value || parseFloat(qtyInput.value) <= 0)) {
            hasEmptyQuantity = true;
        }
    });
    
    if (hasEmptyQuantity) {
        e.preventDefault();
        showToast('Please enter a planned quantity for all ingredients.', 'warning');
        return false;
    }
});

console.log('Production Form initialized successfully!');
console.log('Raw Materials available:', rawMaterials.length);
</script>
@endsection