@extends('layouts.app')
@section('title', __('manufacturing::lang.production'))

@section('content')
@include('manufacturing::layouts.nav')

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">@lang('manufacturing::lang.production')</h1>
</section>

<!-- Main content -->
<section class="content">

    {!! Form::open(['url' => action([\Modules\Manufacturing\Http\Controllers\ProductionController::class, 'store']), 'method' => 'post', 'id' => 'production_form', 'files' => true ]) !!}

    @component('components.widget', ['class' => 'box-solid'])
        <div class="row">
            <div class="col-sm-3">
                <div class="form-group">
                    {!! Form::label('ref_no', __('purchase.ref_no').':') !!} @show_tooltip(__('manufacturing::lang.ref_no_tooltip'))
                    {!! Form::text('ref_no', null, ['class' => 'form-control']); !!}
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group">
                    {!! Form::label('transaction_date', __('manufacturing::lang.mfg_date') . ':*') !!}
                    <div class="input-group">
                        <span class="input-group-addon">
                            <i class="fa fa-calendar"></i>
                        </span>
                        {!! Form::text('transaction_date', @format_datetime('now'), ['class' => 'form-control', 'readonly', 'required']); !!}
                    </div>
                </div>
            </div>
            
            <!-- Business Location Dropdown -->
<!-- Business Location Dropdown -->
<div class="col-sm-3">
    <div class="form-group">
        {!! Form::label('location_id', __('purchase.business_location') . ':*') !!}
        {!! Form::select('location_id', 
            $business_locations, 
            null, 
            ['class' => 'form-control select2', 'required']
        ) !!}
    </div>
</div>


            <div class="col-sm-3">
                <div class="form-group">
                    {!! Form::label('variation_id', __('sale.product').':*') !!}
                    {!! Form::select('variation_id', $recipe_dropdown, null, ['class' => 'form-control select2', 'placeholder' => __('messages.please_select'), 'required', 'id' => 'variation_id']); !!}
                </div>
            </div>
        </div>

        <!-- Placeholder for dynamically added product divs -->
        <div id="product-container"></div>
        <br>
        <div class="row">
            <div class="col-md-3 col-md-offset-9">
                <div class="form-group">
                    <br>
                    <div class="checkbox">
                        <label>
                        {!! Form::checkbox('finalize', 1, false, ['class' => 'input-icheck', 'id' => 'finalize']); !!} @lang('manufacturing::lang.finalize')
                        </label> @show_tooltip(__('manufacturing::lang.finalize_tooltip'))
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <button type="submit" class="tw-dw-btn tw-dw-btn-primary tw-text-white pull-right">@lang('messages.submit')</button>
            </div>
        </div>
    @endcomponent

    {!! Form::close() !!}
</section>

@endsection

@section('javascript')

<script type="text/javascript">
    // Function to fetch ingredients for the selected product and create the div
    $('#variation_id').on('change', function () {
        var variationId = $(this).val();

        if (variationId) {
            // Fetch the ingredients from the database for the selected variation_id
            $.ajax({
                url: '/manufacturing/get-ingredients', // Make sure you set the correct URL for this endpoint
                method: 'GET',
                data: { variation_id: variationId },
                success: function (response) {
                    if (response.error) {
                        alert(response.error);
                        return;
                    }
                
                    // Create the new product div with unit field
                    var productDiv = `
                    <hr>
                    <div class="product-div" id="product-div-${variationId}">
                        <div class="row">
                        <div class="col-sm-2"></div>
                            <div class="col-sm-2">
                                <input type="hidden" name="variation_ids[]" value="${variationId}" />
                                <span class="product-name" style="font-weight:bold;">${response.product_name}</span>
                            </div>
                            <div class="col-sm-2">
                                <div class="form-group">
                                    <label for="quantity-${variationId}">@lang('Quantity:*'):</label>
                                    <input type="number" id="quantity-${variationId}" class="form-control" name="quantities[]" min="0.01" step="0.01" required />
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="form-group">
                                    <label>@lang('Unit:'):</label>
                                    <input type="text" class="form-control" value="${response.unit_name || 'N/A'}" readonly />
                                </div>
                            </div>
                        </div>

                            <table class="table table-bordered" id="ingredients-table-${variationId}">
                                <thead style="background:#44a933 ; font-weight:bold; font-size:16px; color:white;">
                                    <tr>
                                        <th>@lang('Ingredient')</th>
                                        <th>@lang('Input Quantity')</th>
                                        <th>@lang('Wastage Percent')</th>
                                        <th>@lang('Final Quantity')</th>
                                        <th>@lang('Total Price')</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    ${response.ingredients.map(function(ingredient) {
                                        return `
                                            <tr>
                                                <td>${ingredient.name}</td>
                                                
                                                <td>
                                                    <input type="hidden" class="initial-ingredient-quantity" data-ingredient-id="${ingredient.id}" value="${ingredient.quantity}" />
<input type="number" 
       class="form-control ingredient-quantity" 
       data-ingredient-id="${ingredient.id}" 
       name="ingredient_quantities[${ingredient.id}]" 
       value="${ingredient.quantity}" 
       min="0.01" 
       step="0.01" />

                                                </td>
                                                
                                                <td><input type="number" class="form-control wastage-percentage" data-ingredient-id="${ingredient.id}" name="wastage_percentages[${ingredient.id}]" value="${ingredient.waste_percent}" min="0" /></td>
                                                
                                                <td><input type="number" class="form-control final-quantity" value="${ingredient.quantity}" readonly /></td>

                                                <td><span class="total-price">${(ingredient.quantity * ingredient.dpp_inc_tax).toFixed(2)}</span></td>
                                            </tr>
                                        `;
                                    }).join('')}
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="4" style="font-weight:bold; text-align:right;">@lang('Ingredients Cost') KSh</td>
                                        <td><span class="total-cost">0.00</span></td>
                                    </tr>
                                </tfoot>
                            </table>
                            
                            <div class="row">
                                <div class="col-sm-3">
                                    <th style="text-align:left;">@lang('Wasted Quantity'):</th>
                                    <td><input type="number" class="form-control wasted-quantity" name="wasted_quantities[]" min="0" value="0" /></td>
                                </div> 
                                
                                <div class="col-sm-3">
                                    <th style="text-align:left;">@lang('Production Cost'):</th>
                                    <td><input type="number" class="form-control production-cost" id="production-cost-${variationId}" name="production_costs[]" min="0" value="0" /></td>
                                </div>
                                
                                <div class="col-sm-3">
                                    <th style="text-align:left;">@lang('Total Cost') KSh:</th>
                                    <td><input type="text" class="form-control total-cost-readonly" id="total-cost-${variationId}" name="total_costs[]" readonly /></td>
                                </div>     
                                
                                <div class="col-sm-3"></div>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="final_total" id="final_total" value="0" />`;

                    // Append the product div to the container
                    $('#product-container').append(productDiv);
                    
                    function checkIngredientStock(ingredientId, quantity, locationId, callback) {
                        $.ajax({
                            url: '/manufacturing/check-ingredient-stock',
                            method: 'GET',
                            data: {
                                variation_id: ingredientId,
                                location_id: locationId
                            },
                            success: function(response) {
                                callback(null, response.available_qty);
                            },
                            error: function() {
                                callback('Error checking stock');
                            }
                        });
                    }

                    // Recalculate the final quantities and total prices whenever an input changes
                    function recalculate() {
                        var mainQuantity = parseFloat($('#quantity-' + variationId).val()) || 0;  // Main quantity input field
                        var totalCost = 0;  // Initialize the total cost

                        $('#ingredients-table-' + variationId + ' .ingredient-quantity').each(function () {
                            var ingredientId = $(this).data('ingredient-id');
                            var ingredientQuantity = parseFloat($(this).val()) || 0;  // Ingredient quantity
                            var initialIngredientQuantity = parseFloat($(this).closest('td').find('.initial-ingredient-quantity').val()) || 0; // Get the initial value
                            var wastagePercentage = parseFloat($('#ingredients-table-' + variationId + ' .wastage-percentage[data-ingredient-id="' + ingredientId + '"]').val()) || 0;
                            var unitPrice = response.ingredients.find(ingredient => ingredient .id === ingredientId).dpp_inc_tax; // Get the unit price from the response

                            // Calculate ingredient quantity based on main quantity
                            var newIngredientQuantity = mainQuantity * initialIngredientQuantity; // Use the initial value for calculations

                            // Update the input field for ingredient quantity without subtracting wastage
                            $(this).val(newIngredientQuantity.toFixed(2)); // Update the input field with the new quantity

                            // Calculate wastage
                            var wastage = (wastagePercentage / 100) * newIngredientQuantity;

                            // Calculate final quantity
                            var finalQuantity = newIngredientQuantity - wastage;

                            // Calculate total price
                            var totalPrice = finalQuantity * unitPrice;

                            // Update the final quantity and total price for the specific row
                            $('#ingredients-table-' + variationId + ' .final-quantity').filter(function() {
				    return $(this).closest('tr').find('.ingredient-quantity').data('ingredient-id') === ingredientId;
				}).val(finalQuantity.toFixed(2));


                            $('#ingredients-table-' + variationId + ' .total-price').filter(function() {
                                return $(this).closest('tr').find('.ingredient-quantity').data('ingredient-id') === ingredientId;
                            }).text(totalPrice.toFixed(2));  // Keep it to 2 decimal places

                            // Add the total price to the total cost
                            totalCost += totalPrice;
                            
                                // ✅ Moved inside .each block
    var locationId = $('#location_id').val();
    var inputField = $('#ingredients-table-' + variationId + ' .ingredient-quantity[data-ingredient-id="' + ingredientId + '"]');
    var warningClass = 'ingredient-warning-' + ingredientId;

    checkIngredientStock(ingredientId, newIngredientQuantity, locationId, function (err, availableQty) {
        $('.' + warningClass).remove();

        if (err) {
            console.error(err);
            return;
        }

        if (newIngredientQuantity > availableQty) {
            inputField.after('<div class="' + warningClass + '" style="color:red; font-size:13px;">Exceeds available stock (' + availableQty + ')</div>');
            inputField.addClass('is-invalid');
            $('button[type="submit"]').prop('disabled', true);
        } else {
            inputField.removeClass('is-invalid');
            if ($('.is-invalid').length === 0) {
                $('button[type="submit"]').prop('disabled', false);
            }
        }
    });
                        });

                        // Update the total cost in the footer
                        $('#ingredients-table-' + variationId + ' .total-cost').text(totalCost.toFixed(2));  // Keep it to 2 decimal places

                        // Calculate the total cost including production cost
                        var productionCost = parseFloat($('#production-cost-' + variationId).val()) || 0; // Use the unique ID
                        var totalCostIncludingProduction = totalCost + productionCost;

                        // Update the external "Total Cost" field
                        $('#product-div-' + variationId + ' .total-cost-readonly').val(totalCostIncludingProduction.toFixed(2)); // Keep it to 2 decimal places

                        // Update the final total field
                        var currentFinalTotal = parseFloat($('#final_total').val()) || 0;
                        $('#final_total').val(currentFinalTotal + totalCostIncludingProduction); // Update the final total
                    }

                    // Trigger recalculation on input change
                    $('#quantity-' + variationId).on('input', recalculate);
                    $('#ingredients-table-' + variationId + ' .ingredient-quantity').on('input', recalculate);
                    $('#ingredients-table-' + variationId + ' .wastage-percentage').on('input', recalculate);
                    $('#production-cost-' + variationId).on('input', recalculate); // Updated line
                }
            });
        }
    });

    // Handle form submission
    $('#production_form').on('submit', function(e) {
        e.preventDefault(); // Prevent the default form submission

        // Reset final total before submission
        $('#final_total').val($('#final_total').val());

        // Serialize the form data
        var formData = $(this).serialize();

        // Send the data to the backend
        $.ajax({
            url: $(this).attr('action'), // Use the form's action attribute
            method: 'POST',
            data: formData,
            success: function(response) {
                // Handle success response
                if (response.success) {
                // Redirect to the production index page
                window.location.href = '/manufacturing/production'; // Adjust the URL as necessary
            } else {
                //alert(response.msg);
                window.location.href = '/manufacturing/production'; 
                }
            },
            error: function(xhr) {
            // Handle error response
            alert('An error occurred.'); // Display a generic error message
            }
        });
    });
</script>

@endsection