@extends('layouts.structure')


@section('content')

    <div class="container">

        <div class="row">

            <div class="col-xl-12">
                <div class="card sticky-top" style="z-index: 1040; margin-top: 80px;">
                    <div class="card-header">
                        <h4 class="card-title">Create Plan</h4>
                    </div>
                    <div class="card-body">
                        <form id="planform">
                            <div class="row">
                                <div class="row">

                                    @if (isset($plan))
                                        <input value={{ $plan->id }} type="hidden" id="plan_id" name="plan_id">
                                    @endif



                                    <div class=" col-2">

                                        <label class="form-label font-size-13"> Client Name</label><br>
                                        <select class="form-control" id="client_id" name="client_id[]"
                                            onchange="updateSelectedClientValues(this)" required>
                                            <option value="">Select</option>
                                            @foreach ($clients as $clientall)
                                                <option data-clientid=" "
                                                    data-inwardid=" "
                                                    value="{{ $clientall->client_id }}">
                                                    {{ $clientall->client_name }}
                                                </option>
                                            @endforeach
                                        </select>

                                    </div>
                                    <div class=" col-2">
                                        <label for="choices-single-groups" class="form-label font-size-13 text-muted">CRR
                                            No.</label><br>

                                        <select class="form-control" id="crr_no" name="coil_id[]"
                                            onchange="updateSelectedValues()" required>
                                            <option value="">Select</option>
                                            @foreach ($coils as $in)
                                                <option value="{{ $in->id }}">{{ $in->crr_no }} </option>
                                            @endforeach
                                        </select>

                                        @include('admin.partials.form-errors', [
                                            'field' => 'crr_no',
                                        ])
                                    </div>
                                    <!-- <div class="mb-3 col-3"> -->
                                    <input type="hidden" class="form-control" name="inward_id" value=""
                                        id="inward_id" hidden>
                                    @include('admin.partials.form-errors', [
                                        'field' => 'inward_id',
                                    ])
                                    <div class=" col-2">
                                        <label class="form-label" for="formrow-firstname-input">Grade</label>
                                        <select class="form-control" name="grade_id" id="grade_id"> </select>
                                        @include('admin.partials.form-errors', [
                                            'field' => 'grade_id',
                                        ])
                                    </div>
                                    <div class=" col-2">
                                        <label class="form-label" for="formrow-firstname-input">Thickness</label>
                                        <input type="text" class="form-control" readonly name="thickness" value=""
                                            id="thickness" placeholder="thickness">
                                    </div>
                                    <div class="col-2">
                                        <label class="form-label" for="formrow-firstname-input"> Width</label>
                                        <input type="text" class="form-control" name="coil_width" value=""
                                            id="coil_width" readonly>
                                    </div>

                                </div>
                                <div class="row mt-4">
                                    <div class="col-2">
                                        <label class="form-label " for="formrow-firstname-input">Total Net Weight
                                        </label>
                                        <input type="text" class="form-control net_weight" name="net_weight" value=""
                                            id="net_weight" readonly>
                                    </div>
                                    <div class="col-2">
                                        <label class="form-label" for="used_coil">Used Weight</label>
                                        <input type="text" class="form-control used_coil" name="used_coil" value=""
                                            id="used_coil" oninput="validateWeight()" readonly>
                                    </div>
                                    <div class="col-2">
                                        <label class="form-label" for="formrow-firstname-input"> Balance
                                            Width</label>
                                        <input type="text" class="form-control " name="balanced_width" value=""
                                            id="balanced_width" readonly>
                                    </div>

                                    <div class="col-2">
                                        <label class="form-label" for="formrow-firstname-input"> Balance
                                            Weight</label>
                                        <input type="text" class="form-control" name="balanced_coil" value=""
                                            id="balanced_coil" readonly>
                                            <input type="checkbox" name="Balis_scrap"  onclick="BalScrapSave(this)"> Is This Scrap

                                    </div>
                                    <div class="col-2">

                                    <label class="form-label" for="formrow-firstname-input"> Total Scrap Weight</label>
                                    <input type="text" class="form-control" name="totalscrap_coil" value="" id="totalscrap_coil" readonly>
                                    </div>
                                    <div class="col-2">
                                        <label class="form-label" for="formrow-firstname-input"> Scrap
                                            Weight</label>
                                        <input type="text" class="form-control" name="scrap_coil" value=""
                                            id="scrap_coil" readonly>
                                    </div>


                                </div>
                            </div>
                        </form>

                    </div>
                </div>




                <div class="col-xl-12">

                    <div class="card card-outline-info">

                        <div class="card-header">
                            <h4 class="card-title">{{ __('Process Details') }}</h4>
                        </div>

                        <div class="card-body p-4">
                            <div class="row">
                                <div class="col-lg-12">

                                    <div id="coilDetailsContainer">

                                    </div>
                                    <button type="button" id="addRowBtn" class="btn btn-primary"
                                        onclick="addProcess() ">Add Process</button>

                                    <button type="button" class="btn btn-primary" onclick="deleteProcess() ">Delete
                                        Process</button>



                                </div>
                            </div>
                        </div>






                    </div>


                </div>
                <div class="col-xl-12" style="">
                    <button class="btn btn-success" id="saveplan">Save</button>
                    <a href="{{ route('plan.index') }}" class="btn btn-danger btn-sm px-4">Cancel</a>
                </div>
                <div class="col-xl-12" style="height:40px !important">
                </div>

            </div>

            {{-- <script src="{{ url('/') }}/assets/js/custom.js"></script> --}}
            <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
            <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">

            <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

            <script>
                function validateWidth(dindex) {
                    // Get the default width from the readonly input field
                    var defaultWidth = parseFloat(document.getElementById('coil_width').value);

                    // Get the user-inputted width dynamically based on the dindex
                    var userWidthInput = document.querySelector(`input[name="pd-${dindex}-width"]`);
                    var userWidth = parseFloat(userWidthInput.value);

                    // Check if the user-inputted width is greater than the default width
                    if (userWidth > defaultWidth) {
                        // Display an error message
                        userWidthInput.classList.add('is-invalid');
                        document.getElementById(`width_error_${dindex}`).style.display = 'block';
                    } else {
                        // Hide the error message
                        userWidthInput.classList.remove('is-invalid');
                        document.getElementById(`width_error_${dindex}`).style.display = 'none';
                    }
                }

                function validateWeight() {
                    // Get the total weight from the readonly input field
                    var totalWeight = parseFloat(document.getElementById('total_weight').value);

                    // Get the user-inputted used weight
                    var usedWeightInput = document.getElementById('used_coil');
                    var usedWeight = parseFloat(usedWeightInput.value);

                    // Validate the input
                    if (isNaN(usedWeight)) {
                        alert("Please enter a valid numeric weight.");
                    } else if (usedWeight > totalWeight) {
                        // Show an alert if the used weight exceeds the total weight
                        alert("Used weight is invalid. It cannot exceed the total weight of " + totalWeight);
                        usedWeightInput.classList.add('is-invalid');
                    } else {
                        // Remove invalid styling if the input is valid
                        usedWeightInput.classList.remove('is-invalid');
                        alert("Used weight is valid.");
                    }
                }


                function validateQuantity(event) {
                    let value = event.target.value;
                    const dangerDiv = event.target.nextElementSibling; // Access the danger div

                    // Allow only numbers and one decimal point
                    value = value.replace(/[^0-9.]/g, '');

                    // Ensure only one decimal point is allowed
                    if (value.indexOf('.') !== -1) {
                        let parts = value.split('.');
                        if (parts.length > 2) {
                            value = parts[0] + '.' + parts[1].slice(0, 2); // Limit to two decimals
                        }
                    }

                    // Check for an empty value or invalid quantity (such as negative values)
                    if (value <= 0 || isNaN(value)) {
                        dangerDiv.textContent = "Please enter a valid quantity (positive numbers only).";
                        dangerDiv.style.display = 'block'; // Show error message
                    } else {
                        dangerDiv.textContent = "";
                        dangerDiv.style.display = 'none'; // Hide the error message if input is valid
                    }

                    event.target.value = value; // Set the sanitized value back to the input
                }


                function validateLength(event) {
    let value = event.target.value;
    const dangerDiv = event.target.nextElementSibling; // Access the danger div

    // Allow only numbers and one decimal point
    value = value.replace(/[^0-9.]/g, '');

    // Ensure only one decimal point is allowed
    if (value.indexOf('.') !== -1) {
        let parts = value.split('.');
        if (parts.length > 2) {
            value = parts[0] + '.' + parts[1].slice(0, 2); // Limit to two decimals
        }
    }

    // Check for an empty or invalid value (like zero or negative length)
    if (value <= 0 || isNaN(value)) {
        dangerDiv.textContent = "Please enter a valid length (positive numbers only).";
        dangerDiv.style.display = 'block'; // Show error message
    } else {
        dangerDiv.textContent = "";
        dangerDiv.style.display = 'none'; // Hide the error message if valid input
    }

    event.target.value = value; // Set the sanitized value back to the input
}

            </script>
            <script>
                let selectedValues = [];
                let processes = {};

                function updateSelectedValues() {
                    let selectedOptions = document.getElementById('crr_no').selectedOptions;
                    selectedValues = Array.from(selectedOptions).map(option => option.value);
                    console.log("selectedValues",selectedValues);
                    getInfo(selectedValues[selectedValues.length - 1]); // Pass the last selected value to getInfo
                }

                function getInfo(crr_no) {
                    console.log("getInfo function", crr_no);
                    var url = '{{ route('getCrrinfoInward', [':crr_no']) }}';
                    url = url.replace(':crr_no', crr_no);

                    if (crr_no) {
                        $.ajax({
                            url: url,
                            type: "GET",
                            dataType: "json",
                            success: function(data) {

                                localStorage.setItem("cdetail", JSON.stringify(data.crr_info))
                                console.log("Coil Detail",data);
                                const crrInfo = data.crr_info; // Extract the crr_info object
                                document.getElementById('inward_id').value = crrInfo.inward_id;
                                document.getElementById('thickness').value = crrInfo.thickness;
                                document.getElementById('coil_width').value = crrInfo.width;
                                document.getElementById('net_weight').value = crrInfo.curb_weight;
                                document.getElementById('balanced_coil').value = crrInfo.balanced_coil;
                                document.getElementById('balanced_width').value = crrInfo.width;
                                document.getElementById('totalscrap_coil').value= crrInfo.scrap_wt;
                                var Material_density = data['material_type_density'];



                                var clients = null;
                                // console.log("getInfo clients",clients);
                                // Clear existing options
                                $('#client_id').empty();

                                // Add default option
                                $('#client_id').append('<option value="">Select</option>');

                                // Populate dropdown with client options
                                $.each(clients, function(index, client) {
                                    console.log("client", client, "InwardId", crrInfo.inward_id);
                                    // console.log("clientId", clientId, "client_id", client.client_id);
                                    // Check if client.client_id matches the selected clientName
                                    var selectedAttribute = (client.client_id === data.clientId) ?
                                        'selected' : '';
                                    // console.log("Selected Attribute:", selectedAttribute);
                                    $('#client_id').append(
                                        '<option value="' + client.client_id + '" ' + selectedAttribute +
                                        '>' + client.client_name + '</option>'
                                    );

                                });



                                var grades = null;

                                $('select[name="grade_id"]').empty();
                                $.each(grades, function(index, grade) {
                                    var selectedAttribute = (grade.id == crrInfo.grade_id) ? 'selected' : '';
                                    $('select[name="grade_id"]').append('<option value="' + grade.id + '" ' +
                                        selectedAttribute + '>' + grade.name + '</option>');
                                });

                                // Disable user interaction with the select element
                                $('#grade_id').on('mousedown', function(event) {
                                    event.preventDefault();
                                    return false;
                                });

                                $('#grade_id').on('keydown', function(event) {
                                    event.preventDefault();
                                    return false;
                                });

                                $('#grade_id').on('click', function(event) {
                                    event.preventDefault();
                                    return false;
                                });

                                $('#grade_id').on('focus', function(event) {
                                    this.blur();
                                    return false;
                                });
                            }
                        });
                    }
                }


                function updateSelectedClientValues(selectElement) {
                    console.log("selectElement", selectElement.value);
                    const clientId = selectElement.value;
                    // const selectedOption = selectElement.options[selectElement.selectedIndex];
                    // const clientId = selectedOption.getAttribute('data-clientId');
                    // const inwardId = selectedOption.getAttribute('data-InwardID');
                    // console.log("clientId", clientId, "inwardId", inwardId);
                    var url = '{{ route('getClientinfoInward', [':clientId']) }}';
                    url = url.replace(':clientId', clientId);
                    // url = url.replace(':inwardId', clientselectInawardId);


                    if (crr_no) {
                        $.ajax({
                            url: url,
                            type: "GET",
                            dataType: "json",
                            success: function(data) {
                                // console.log("Coil Detail",data);


                                var crr_noDropdown = $('#crr_no'); // Assuming the dropdown's ID is 'crr_no'
                                crr_noDropdown.empty(); // Clear previous options
                                // Add the default "Select Coil CRR No" option

                                data.forEach(function(coil) {
                                    crr_noDropdown.append(new Option('Select Coil CRR No', ''));

                                    crr_noDropdown.append(new Option(coil.crr_no, coil
                                    .id)); // Add options to dropdown
                                });

                                document.getElementById('thickness').value = '';
                                document.getElementById('coil_width').value = '';
                                document.getElementById('grade_id').value = '';
                                document.getElementById('net_weight').value = '';
                                document.getElementById('balanced_coil').value = '';
                                document.getElementById('scrap_coil').value = '';


                            }

                        });
                    }


                }


                function addProcess() {
                    // localStorage.setItem('balancedweight', $('#balanced_coil').val());
                    // localStorage.setItem('balancedwidth', $('#balanced_width').val());

                    createProcessForm()

                }

                function createProcessForm() {

                    $processcontainer = $("#coilDetailsContainer")
                    let index = Object.keys(processes).length;
                    console.log("createProcessForm function ",index);
                    let dependanthtml = '';

                    if (index != 0) {
                        dependanthtml = `
                    <div class="mb-3">
                        <label class="form-label">Is This Dependant</label>
                        <input class="isdependant" id="is_dependant" type="checkbox" name="is_dependant" value="0">
                    </div>
                   `

                    }


                    let process = `
                <form id="p-${index+1}">
                    <div class="row coil-details-row" data-index=${index+1}>
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title"> Process ${index+1}</h4>
                                </div>
                                <div class="card-body">
                                    ${dependanthtml}
                                    <div class="mb-3">
                                        <label class="form-label" for="formrow-firstname-input">Select Production Line </label>
                                        <select class="form-control selectedline" data-trigger name="line_id" required>
                                            <option value="">Select Process Line</option>
                                            @foreach ($lines as $br)
                                                <option value="{{ $br->id }}">{{ $br->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                     <div class="mb-3">
                                         <div id="dimention-container">

                                         </div>
                                         <button style="display:none" class="adddimention btn btn-primary  mt-3" type="button" onClick="addDimention(this)">Add Dimension</button>
                                     </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </form>`
                    $processcontainer.append(process);

                    processes['p-' + (index + 1)] = {
                        form: $("#p-" + (index + 1)),
                        dimentions: {}
                    };

                    $("#p-" + (index + 1))
                        .find(".isdependant")
                        .on("change", function () {
                            let isdependant = $(this).prop('checked'); // Use .prop('checked') to get the checked state
                            console.log("#p-", isdependant);
                            console.log(" function  createProcessForm");


                            $("#p-" + (index + 1)).find(".dimention-dropdown").each(function () {
                                console.log("Showing/Hiding dropdown", " => ", isdependant);
                                $(this).css({
                                    display: isdependant ? 'block' : 'none'
                                });
                            });
                        });


                }

                function addDimention(ref) {
                    let form = $(ref).closest('form');
                    let $dimentioncontainer = form.find("#dimention-container")
                    let id = form.attr("id");
                    let isdependant = form.find('#is_dependant').is(':checked')
                    console.log("when addDiamension button click that time take isdependant value",isdependant);
                    let index = Object.keys(processes).indexOf(id);
                    let dimentionhtml = '';
                    let dindex = $dimentioncontainer.find(".dimention-row").length;
                    console.log("addDimension function proindex " ,index,"diamindex",dindex,"isdependant",isdependant);

                    let lineId = form.find(".selectedline").val();


                    let flagInputId = `pd-hidden-flag${dindex+1}${index}`;

                    let dimention =
                        `<div class="row dimention-row" id="pd-${dindex+1}${index}">
                    <div class="col-3 dimention-dropdown" style="${(+isdependant ? 'display:block': 'display:none')}">
                        <label>Select Dimension:</label>
                        <select  class="form-control dimentiondropdown" id="dimention-dropdown-${dindex+1}"  data-flag-input="${flagInputId}">
                        </select>
                    </div>

                    <div class="col-2">
                            <label for="pd-0-width">Width:</label>
                            <input
                                type="text"
                                class="form-control width-input"
                                name="pd-0-width"
                                oninput="validateWidth(0)" >
                            <div id="width_error_0" class="invalid-feedback" style="display: none;">
                                Input width cannot exceed the default width.
                            </div>
                        </div>
                    <div class="col-2" style="display: ${[4,5].indexOf(+lineId) !== -1 ? 'block' : 'none'}">
    <label> Length:</label>
    <input type="number" class="form-control length-input" name="pd-${dindex}-length" oninput="validateLength(event)">
    <div class="danger" style="color: red; display: none;"></div>
</div>

                   <div class="col-2">
    <label> Max Quantity:</label>
    <input type="number" class="form-control calculated-quantity-input" name="pd-${dindex}-calculated-quantity" min="1" readonly>
    <input type="text" class="form-control hidden-flag" id="${flagInputId}" name="pd-${dindex}-hidden-flag" readonly value="yes">


</div>


                   <div class="col-2">
    <label>Quantity:</label>
    <input type="number" class="form-control quantity-input" name="pd-${dindex}-quantity" min="1" step="any" oninput="validateQuantity(event)">
        <div class="danger" style="color: red; display: none;"></div>

</div>


                    <div class="col-3">
                        <label> Production Weight:</label>
                        <input type="text" class="form-control p-w" name="pd-${dindex}-pw" readonly>
                    </div>
                    <div class="col-2">
                        <label> Balance weight:</label>
                        <input type="text" class="form-control bw-input" name="pd-${dindex}-bpw" readonly>
                    </div>
                    <div class="col-2">
                        <label> IS Scrap:</label>
                        <div>
                        <input type="checkbox" class="scrap-input" name="is-scrap-${dindex}">
                        </div>

                    </div>
                    <div class="col-2" style="display:none !important">
                        <label>Other process weight:</label>
                        <input type="text" value="0" class="form-control used-w" name="pd-${dindex}-usedw">
                    </div>



                     <div class="col-1" style="display:flex;align-items:center;align-items:center;justify-content: center">
                        <i  onClick="deleteDimention(this)" class="fa fa-trash"></i>
                    </div>
                    <div class="col-sm-12">
                     <div style="display: flex;padding-top:20px">
                        <label class="form-label" for="formrow-firstname-input">Packing Details:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                        <div style="padding:0px 20px 0px 0px;">
                            <input  class="is_packing" type="radio" id=" " name="pd-${dindex}-packageDetail" value="1" >
                            <label for="yes-radio">Yes</label>
                        </div>
                        <div style="padding:0px 20px 0px 0px;">
                            <input class="is_packing" type="radio" id="" name="pd-${dindex}-packageDetail" value="0" checked>
                            <label for="no-radio">No</label>
                            <div class="errr"></div>
                        </div>
                    </div>
                    <div id="" class="packageDetail" style="display:none">
                        <div  class="ctl-narrow"  style="display: ${[4,5].indexOf(+lineId)!=-1 ? 'block':'none'}">
                        <div class="row">
                                <div class="col-md-4 col-sm-6 mb-3">
                                    <label class="form-label" for="formrow-firstname-input">Enter Quantity per Packet </label>
                                    <input type="text" class="form-control qtyperpk" id="qtyperpk-input" name="pd-${dindex}-qty_per_packet" placeholder="Enter Quantity per Packet" data-index="1" rowId="1" readonly>
                                </div>
                                <div class="col-md-4 col-sm-6 mb-3">
                                    <label class="form-label" for="formrow-firstname-input">Enter Packets</label>
                                    <input type="text" class="form-control packet-count" id="" value="1" name="pd-${dindex}-packet_count" placeholder="Enter Packets" data-index="1">
                                </div>
                                <div class="col-md-4 col-sm-6 mb-3">
                                    <label class="form-label" for="formrow-firstname-input">Remark</label>
                                    <input type="text" class="form-control "  id=""   name="pd-${dindex}-remark" placeholder="Enter Packets">
                                </div>
                            </div>


                        </div>
                        <div class="crs"    style="display: ${[3].indexOf(+lineId)!=-1 ? 'block':'none'}">
                        <div class="row">
                            <div class="mb-3 col-sm-6 mb-3">
                                <label class="form-label" for="formrow-firstname-input">Enter OD</label>
                                <input type="text" class="form-control od-input"   id=""  name="pd-${dindex}-od"  placeholder="Enter OD">
                            </div>
                            <div class="mb-3 col-sm-6 mb-3">
                                <label class="form-label" for="formrow-firstname-input">Build Up</label>
                                <input type="text" class="form-control buildup-input"   id=""  name="pd-${dindex}-built_up"  placeholder="Enter Quantity per Packet" readonly>
                            </div>
                            <div class="mb-3 col-sm-6 mb-3">
                                <label class="form-label" for="formrow-firstname-input">Coil Quantity</label>
                                <input type="text" class="form-control coilQty"  id="" data-index="1"  name="pd-${dindex}-coil_qty" placeholder="Enter Packets" readonly>
                            </div>
                            <div class="mb-3 col-sm-6 mb-3">
                                <label class="form-label" for="formrow-firstname-input">Remark</label>
                                <input type="text" class="form-control remark"  id=""   name="pd-${dindex}-remark" placeholder="Enter Packets">
                            </div>
                        </div>

                        </div>
                    </div>
                    </div>

               </div>


               `

                    $dimentioncontainer.append(dimention);
                    let pdid = "#pd-" + (dindex + 1) + (index)
                    processes[id]['dimentions'][pdid] = {
                        ref: $(pdid)
                    };
                    console.log("pdidpdidpdidpdidpdid",pdid);



                    getDimentionList(pdid)


                }


                function getDimentionList(pdid) {
                    let form = $(pdid).closest('form');
                    $ref = $(pdid).find('.dimentiondropdown');
                    let id = form.attr("id");
                    let processkeys = Object.keys(processes)
                    let index = Object.keys(processes).indexOf(id);
                    console.log(`🛠️ Populating dropdown for process: ${id} (index ${index})`);
                    console.log("🔍 Target dropdown element:", $ref);
                    
                    for (let i = 0; i < index; i++) {
                        if (processes[processkeys[i]].form.find('#is_dependant').is(':checked')) {
                            console.log(`🔗 Checking process ${processkeys}`);
                            
                            continue;
                        }
                        let dimentions = Object.keys(processes[processkeys[i]].dimentions);
                        console.log(`📦 Adding dimensions from process ${i + 1} (${processkeys}):`, dimentions);
                        
                        let count = 0;
                        $ref.append('<option value="">Select Dimension</option>');
                        for (let ind in dimentions) {
                            count++;
                            $ref.append(`<option value="${dimentions[ind]}"> Process ${i+1} Dimension${count}</option>`)
                            console.log(`📄 Final dropdown HTML: value="${dimentions[ind]}", label="Process ${i + 1} Dimension ${count}"`);
                        }

                    }


                    // Attach change listener to update flag
let $dropdown = $(pdid).find('.dimentiondropdown');
$dropdown.off('change').on('change', function () {
    let selectedVal = $(this).val();
    let flagInputId = $(this).data('flag-input');
    let $flagInput = $(`#${flagInputId}`);

    $flagInput.val('yes'); // Default to "yes"

    console.log("🔄 Checking if selected value exists in any previous dimension...");
    console.log("Selected Value:", selectedVal);
    console.log("🔍 Trying to update flag input:", flagInputId);
    console.log("📍 Found flag input element:", $flagInput.length ? $flagInput[0] : '❌ Not Found');

    for (let i = 0; i < index; i++) {
        let dimensions = Object.keys(processes[processkeys[i]].dimentions);
        console.log(`Checking process ${i + 1} dimensions:`, dimensions);
        console.log("Selected Value:", selectedVal);

console.log("Checking against:", dimensions);


        if (dimensions.some(dim => dim == selectedVal)) {

            console.log("flagvalue",$flagInput);
            let afterDash = selectedVal.substring(selectedVal.indexOf('-') + 1);
            $(`#pd-hidden-flag${afterDash}`).val("no");

            console.log(`✅ Reused dimension found in process ${i + 1}: ${selectedVal}`);
            // $flagInput.val('no').prop('value', 'no');
            console.log("🏁 Updated flag value to:", $flagInput.val());

            break;
        }
    }
});

                

}


                function showDimentionList(ref) {
                    $(ref).html('')
                    let form = $(ref).closest('form');

                    let id = form.attr("id");
                    let processkeys = Object.keys(processes)
                    let index = Object.keys(processes).indexOf(id);
                    for (let i = 0; i < index; i++) {

                        if (processes[processkeys[i]].form.find('#is_dependant').is(':checked')) {
                            return;
                        }
                        let dimentions = Object.keys(processes[processkeys[i]].dimentions);
                        let count = 0;
                        $(ref).append('<option value="">Select Dimension</option>');
                        for (let ind in dimentions) {
                            count++
                            let remainingwight = $(dimentions[ind]).find('.p-w').val() - $(dimentions[ind]).find('.used-w').val()

                            if (remainingwight > 0) {
                                $(ref).append(`<option value="${dimentions[ind]}"> Process ${i+1} Dimention${count}</option>`)

                            }


                        }


                    }




                }
            </script>



            <script>
                var plan = {!! json_encode(isset($plan) ? $plan : []) !!};




                $(document).ready(function() {
                    //save function
                    let formdata = {};
                    const BASE_URL = "{{ url('/') }}";


                    $('#saveplan').on("click", () => {

                        let pkeys = Object.keys(processes);

                        formdata['processes'] = []
                        console.log(formdata);
                        for (let pkey of pkeys) {
                            let processinfo = {};
                            let pform = processes[pkey].form;
                            processinfo['line_id'] = pform.find('.selectedline').val();
                            // processinfo['is_dependant'] = pform.find(".isdependant").val();
                            processinfo['is_dependant'] = pform.find('.isdependant').prop('checked') ? 1 : 0;
                            console.log(processinfo['is_dependant']);
                            processinfo['dimentions'] = [];
                            pform.find(".dimention-row").each((index, element) => {

                                let widthinput = $(element).find(".width-input").val();
                                let lenghtinput = $(element).find(".length-input").val();
                                let quantityinput = $(element).find(".quantity-input").val();
                                let dimention = {
                                    'widthinput': $(element).find(".width-input").val(),
                                    'lenghtinput': $(element).find(".length-input").val(),
                                    'quantityinput': $(element).find(".quantity-input").val(),
                                    "production_weight": $(element).find(".p-w").val(),
                                    "balance_weight": $(element).find(".bw-input").val(),
                                    "used_weight": $(element).find(".used-w").val(),
                                    'is_packing': $(element).find('input.is_packing').prop('checked') ?
                                        1 : 0,
                                    'd_p_d': $(element).find(".dimentiondropdown").val(),
                                    'is_scrap': $(element).find('input.scrap-input').prop('checked') ?
                                        1 : 0,
                                    'flag':$(element).find(".hidden-flag").val(),
                                };
                                if (dimention['is_packing']) {
                                    dimention['od'] = $(element).find('.od-input').val();
                                    dimention['buildup'] = $(element).find('.buildup-input').val();
                                    dimention['coilQty'] = $(element).find('.coilQty').val();
                                    dimention['remark'] = $(element).find('.remark').val();
                                                                        dimention['qtyperpk'] =$(element).find('.qtyperpk').val();
                                    dimention['packetcount'] =$(element).find('.packet-count').val();




                                }

                                processinfo['dimentions'].push(dimention)

                            })



                            formdata['processes'].push(processinfo)


                        }

                        formdata['metadata'] = $('#planform').serializeArray()
                        $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        });

                        $.ajax({
                            url: BASE_URL + '/plan/save',
                            type: 'POST',
                            data: formdata,
                            success: function(response) {
                                localStorage.removeItem('balancedweight');
                                localStorage.removeItem('balancedwidth');




                                Swal.fire({
                                    title: 'Success!',
                                    text: response.message,
                                    icon: 'success',
                                    confirmButtonText: 'Okay'
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        window.location.href = BASE_URL + '/plan';
                                    }
                                })



                            },
                            error: function(xhr, status, error) {

                                Swal.fire({
                                    title: 'Success!',
                                    text: response.error,
                                    icon: 'error',
                                    confirmButtonText: 'Okay'
                                });
                            }
                        });


                    })



                    $('#crr_no').select2({
                        placeholder: 'Select CRR No',
                        allowClear: true,
                        // dropdownAutoWidth: true,
                        width: '200px'
                    });

                    if (Object.keys(plan).length) {
                        $('#crr_no').val(plan.coil_id).trigger('change');
                    }

                    var dbprocess = {!! json_encode(isset($plan_process_with_dimention) ? $plan_process_with_dimention : []) !!};

                    setTimeout(() => {

                        let dbpkeys = Object.keys(dbprocess)
                        for (let dbpkey of dbpkeys) {
                            let process = dbprocess[dbpkey];
                            addProcess();
                            let keys = Object.keys(processes);
                            currentProcess = processes[keys[keys.length - 1]];
                            currentProcess.form.find(".selectedline").val(process.plan.line_id);
                            currentProcess.form.find(".adddimention").show();
                            if (process.plan.is_dependent) {
                                currentProcess.form.find(".isdependant").trigger("click");
                            }


                            for (let dimention of process.dimentions) {
                                currentProcess.form.find('.adddimention').trigger("click");
                                let pdkeys = Object.keys(currentProcess.dimentions);
                                let dimentionref = currentProcess.dimentions[pdkeys[pdkeys.length - 1]].ref;
                                dimentionref.find(".dimentiondropdown").val(dimention.d_p_d);


                                dimentionref.find(".width-input").val(dimention.width)
                                dimentionref.find(".quantity-input").val(dimention.qty)
                                dimentionref.find(".used-w").val(dimention['used_weight'])
                                if (dimentionref.find(".length-input").is(":visible")) {
                                    dimentionref.find(".length-input").val(dimention.length)
                                }
                                dimentionref.find(".p-w").val(dimention.prod_weight);
                                dimentionref.find(".bw-input").val(dimention.bal_prod_weight);
                                if (dimention.is_scrap) {
                                    dimentionref.find(".scrap-input").trigger("click");
                                }

                                //getDimentionList(pdkeys[pdkeys.length - 1]);

                                if (dimention.is_packing_details == 1) {
                                    dimentionref.find("input.is_packing[value='1']").trigger("click")
                                    dimentionref.find(".od-input").val(dimention.od);
                                    dimentionref.find(".buildup-input").val(dimention.built_up);
                                    dimentionref.find(".coilQty").val(dimention.coil_qty)
                                    dimentionref.find(".remark").val(dimention.remark)

                                } else {
                                    dimentionref.find("input.is_packing[value='0']").trigger("click")
                                    dimentionref.find(".od-input").val('');
                                    dimentionref.find(".buildup-input").val('');
                                    dimentionref.find(".coilQty").val('')
                                    dimentionref.find(".remark").val('')
                                }




                            }


                            totalUsedWeight();

                        }
                        console.log(dbpkeys);


                    }, 1000)





                    $('#client_id').select2({
                        placeholder: "select client name",
                        allowClear: true,
                        width: '200px'
                    })


                    $('body').on("change", 'form .selectedline', (event) => {

                        ///production line when chnaged that time make that one empty
                        let id = $(event.currentTarget).closest('form').attr("id");
                        let index = Object.keys(processes).indexOf(id);
                        processes[id].form.find(".width-input").val('');
                        processes[id].form.find(".length-input").val('');
                        processes[id].form.find(".quantity-input").val('');
                        processes[id].form.find(".p-w").val('');





                    });

                    $('body').on("change", 'form', (event) => {



                        let id = $(event.currentTarget).attr("id");
                        let index = Object.keys(processes).indexOf(id);


                        if (index != -1) {

                            let lineId = processes[id].form.find(".selectedline").val();
                            console.log("lineId",lineId);
                            if (lineId) {
                                processes[id].form.find(".adddimention").show();
                            }

                            if ([4, 5].indexOf(+lineId) == -1) {
                                processes[id].form.find(".length-input").closest('.col-2').hide();
                                processes[id].form.find(".crs").show();
                                processes[id].form.find(".ctl-narrow").hide();
                            } else {
                                processes[id].form.find(".length-input").closest('.col-2').show();
                                processes[id].form.find(".ctl-narrow").show();
                                processes[id].form.find(".crs").hide();
                            }


                            processes[id].form.find(".dimention-row").each((index, element) => {

                            console.log("index",index);

                                let widthinput = $(element).find(".width-input").val();
                                let lenghtinput = $(element).find(".length-input").val();
                                let quantityinput = $(element).find(".quantity-input").val();
                                let cdetail = JSON.parse(localStorage.getItem("cdetail"));
                                // console.log(cdetail);
                                let parent_dimention = $(element).find(".dimentiondropdown").val();
                                if (parent_dimention) {
                                    let width = $(parent_dimention).find(".width-input").val()
                                    $(element).find(".width-input").val(width);
                                }

                                console.log("parent_dimention", parent_dimention,"widthinput",widthinput);
                                let coil_ID = 508;
                                const packetinput = $(element).find(".packet-count").val();
                                let odInput = $(element).find(".od-input").val();
                                let value = $(element).find('input.is_packing').prop('checked');
                                if (!value) {
                                    $(element).find('.packageDetail').hide();
                                } else {
                                    $(element).find('.packageDetail').show();
                                }


                                if (lineId === '4' || lineId === '5') {

let balWeightValue = $('#balanced_coil').val();

//Max Quantity Code for Wide CTL and NarrowCTL
if (widthinput > 0 && lenghtinput > 0) {
    const thickness = parseFloat(cdetail.thickness);
    const width = parseFloat(widthinput);
    const length = parseFloat(lenghtinput);
    const density = parseFloat(cdetail.material_type_density);
    const curbWeight = parseFloat(balWeightValue);

    const intermediateProduct = thickness * width * length * density;
    const productionWeightperUnit = intermediateProduct /
        1000000000;

    // 💡 No need to toFixed yet, use raw number for calculation
    const maxQty = Math.floor(curbWeight /
        productionWeightperUnit);

    $(element).find(".calculated-quantity-input").val(maxQty);
    console.log("Single sheet weight:", productionWeightperUnit);
    console.log("Max quantity from curb weight:", maxQty);

}
//End


if (widthinput && lenghtinput && quantityinput) {
    const intermediateProduct = cdetail.thickness * widthinput *
        lenghtinput * cdetail.material_type_density;
    let productionWeightperUnit = intermediateProduct / 1000000000;
    productionWeightperUnit = productionWeightperUnit;
    let pw = productionWeightperUnit * quantityinput;

    console.log("Production Weight", pw);
    console.log("quantity inputed", quantityinput);
    $(element).find("#qtyperpk-input").val(quantityinput);
    $(element).find(".p-w").val(pw.toFixed(3));

    let qtyperpacketresult = Math.floor(quantityinput / packetinput);
    $(element).find("#qtyperpk-input").val(qtyperpacketresult);

}

} else {


let balWeightValue = $('#balanced_coil').val();
let balWidthValue = $('#balanced_width').val();
let widthinputnew = $(element).find(".width-input").val();
let quantityinputnew = $(element).find(".quantity-input").val();



console.log("balWeightValue", balWeightValue,"balWidthValue",balWidthValue,"widthinput",widthinputnew,"quantityinput",quantityinputnew);
//Max Qty Code
if (widthinputnew > 0 && balWidthValue > 0) {
    console.log("widthinput", widthinputnew);

    const totalWidth = parseFloat(balWidthValue);


    const maxQty = Math.floor(totalWidth /
    widthinputnew); // only whole cuts allowed

    // alert("You can CUT a maximum of " + maxQty + " pieces of width " +
    //     inputWidth + "mm into total width " + totalWidth + "mm.");
    $(element).find(".calculated-quantity-input").val(maxQty);

    console.log("Max quantity from width fit:", maxQty);
    let calWidth= widthinputnew * quantityinputnew;
    let result= totalWidth - calWidth;
    console.log("result",result);
    $('#balanced_width').val(result);



}

if (widthinput && quantityinput) {

    let balWeightValue = $('#balanced_coil').val();

    productionWeight = (balWeightValue / balWidthValue) * (
        widthinput * quantityinput);

    let pw = productionWeight.toFixed(3);
    $(element).find(".p-w").val(pw);
    if (odInput > 0) {
        let Build = ((odInput - coil_ID) / 2).toFixed(2);
        console.log("Build value", Build);
        $(element).find(".buildup-input").val(Build);
        $(element).find(".coilQty").val(quantityinput);
    } else {
        $(element).find(".buildup-input").val('');
    }


}


                                }
                                checkWeightExceed(processes[id]);

                            });


                        }


                    });
                });

                function checkWeightExceed(process) {
                    dimentions_used = {};


                    let flag = process.form.find("#is_dependant").is(':checked');
                    if (flag) {

                        process.form.find(".dimention-row").each((index, element) => {
                            let parent_dimention = $(element).find(".dimentiondropdown").val();
                            if (!dimentions_used[parent_dimention]) {
                                dimentions_used[parent_dimention] = 0
                            }
                            dimentions_used[parent_dimention] = dimentions_used[parent_dimention] + (+$(element).find(
                                ".p-w").val());

                            if ($(parent_dimention).find('.p-w').val() < dimentions_used[parent_dimention]) {
                                $(element).append(
                                    "<div  style='color:red' class='error'>Invalid input , Production weight more than available weight in selected dimention </div>"
                                );
                            } else {
                                $(parent_dimention).find('.used-w').val(dimentions_used[parent_dimention])
                                $(element).find(".error").remove();
                            }



                        })

                    }



                    totalUsedWeight();
                    //checkGrossWeightExceed()

                }

                function totalUsedWeight() {
                    let totalused = 0;
                    let scrapweight = 0
                    for (let key of Object.keys(processes)) {

                        process = processes[key];

                        let flag = process.form.find("#is_dependant").is(':checked');
                        process.form.find(".dimention-row").each((index, element) => {

                            if (!flag) {

                                let usedweight = (+$(element).find(".used-w").val())
                                if (usedweight > 0) {
                                    totalused = totalused + usedweight
                                    $(element).find(".bw-input").val((+$(element).find(".p-w").val() - usedweight))
                                } else {
                                    totalused = totalused + (+$(element).find(".p-w").val())

                                }

                            }
                            let isscraped_dimention = $(element).find(".scrap-input").is(':checked');
                            let bal = $(element).find(".bw-input").val();
                            if (isscraped_dimention && bal != '') {
                                scrapweight = scrapweight + Number(bal);
                            }


                        });
                    }
                    $("#used_coil").val(totalused.toFixed(3))
                    $("#scrap_coil").val(scrapweight.toFixed(3))


                    // let cdetail = JSON.parse(localStorage.getItem("cdetail"));
                    // // $('#balanced_coil').val(cdetail.balanced_coil);

                    // $('#balanced_coil').val(cdetail.balanced_coil - (totalused + scrapweight));
                    // // console.log('balanced weight :' , cdetail)


                    // let balweight=cdetail.curb_weight-totalused
                    // $("#balanced_coil").val(balweight);
                    let cdetail = JSON.parse(localStorage.getItem("cdetail"));
                    // $('#balanced_coil').val(cdetail.balanced_coil - (totalused + scrapweight));
                    // $('#balanced_coil').val(cdetail.curb_weight - (totalused + scrapweight));
                    let balancedCoil = cdetail.curb_weight - (totalused + scrapweight);
                    balancedCoil = balancedCoil.toFixed(2); // Format to 2 decimal places
                    
                    $('#balanced_coil').val(balancedCoil); // Assign the formatted value

                    console.log('balanced weight :' , cdetail)

                }

                function deleteProcess() {
                    let keys = Object.keys(processes)
                    if (keys.length === 0) return; // no process to delete
                    processes[keys[keys.length - 1]].form.remove();
                    delete processes[keys[keys.length - 1]]
                    totalUsedWeight();

                    if (Object.keys(processes).length === 0) 
                    {
                        let crr_no = $('#crr_no option:selected').text();
                        scrapValueValue = $('#totalscrap_coil').val();
                        console.log("All processes deleted. Pass 0 or take appropriate action.","crr_no",crr_no,"scrapValueValue",scrapValueValue);
                }


                }

                function deleteDimention(ref) {
                    let pdid = "#" + $(ref).closest('.dimention-row').attr("id");

                    let keys = Object.keys(processes)
                    for (let key of keys) {
                        let dimentions = processes[key].dimentions
                        let dkeys = Object.keys(dimentions);
                        for (let dkey of dkeys) {

                            let ddropdown = dimentions[dkey].ref.find(".dimentiondropdown");
                            if (ddropdown && pdid == ddropdown.val()) {

                                dimentions[dkey].ref.remove();
                                delete dimentions[dkey]
                            } else if (dkey == pdid) {

                                let usedval = $(ddropdown.val()).closest('.dimention-row').find(".used-w").val()
                                let usedprod = $(ddropdown.val()).closest('.dimention-row').find(".p-w").val()
                                let pw = $(dkey).find(".p-w").val()

                                if (ddropdown.val()) {
                                    usedval = usedval - pw
                                    $(ddropdown.val())
                                        .closest('.dimention-row')
                                        .find(".used-w")
                                        .val(usedval);
                                    let bw = usedval == 0 ? '' : (usedprod - usedval)
                                    $(ddropdown.val())
                                        .closest('.dimention-row')
                                        .find(".bw-input").val(bw)




                                }

                                dimentions[dkey].ref.remove();
                                delete dimentions[dkey]


                            }


                        }

                    }
                    totalUsedWeight();



                }


                // Scrap Script
                function calculateScrapWeight(checkboxElement) {
                    var isChecked = checkboxElement.checked; // Determine checked state

                    if ($(checkboxElement).is(':checked')) {
                        var proceed = confirm("Are you sure you want to mark this as scrap?");
                        if (proceed) {
                            let balWeightValue = $('#balanced_coil').val();
                            let crr_no = $('#crr_no option:selected').text();
                            console.log("balWeightValue:", balWeightValue, "Crr_no", crr_no);

                            console.log("Checkbox is checked. Balanced Coil Weight is: " + balWeightValue, "crr_no:" + crr_no);
                            var url = '{{ route('scrapsave') }}';

                            // Perform an AJAX call to pass both values to the server
                            $.ajax({
                                url: url, // Replace with your actual endpoint URL
                                type: 'POST',
                                data: {
                                    _token: '{{ csrf_token() }}', // Include CSRF token for security
                                    balanced_coil: balWeightValue,
                                    crr_no: crr_no
                                },
                                success: function(response) {
                                    console.log('Data saved successfully:', response);
                                    $('#balanced_coil').val(response.balanced_coil);
                                    // Retrieve the updated text content using jQuery
                                    var updatedBalancedCoil = $('#balanced_coil').text();
                                    console.log('Updated Balanced Coil Value:', updatedBalancedCoil);
                                    // $('#scrap_wt').text(response.scrap_wt);
                                    // Show or hide the scrapDiv based on balanced_coil value
                                    if (updatedBalancedCoil == 0) {
                                        $('#scrap_coil').val(response.scrap_wt);
                                        // Log the updated value of the input to the console
                                        var updatedScrapWt = $('#scrap_coil').val();
                                        console.log('Updated Scrap Weight Value:', updatedScrapWt);
                                    } 
                                    else {
                                    }
                                },
                                error: function(xhr, status, error) {
                                    console.error('Error saving data:', error);
                                }
                            });
                        } else {
                            // If the user clicks "Cancel"
                            checkboxElement.checked = false; // Uncheck the checkbox
                            console.log("User canceled the action.");
                        }
                    } else {
                        console.log("Checkbox is unchecked.");
                    }

                    // Get the value of the balanced weight
                    let balWeightValue = $('#balanced_coil').val();
                    let Crr_no = $('#crr_no').val();
                    console.log("balWeightValue:", balWeightValue, "Crr_no", Crr_no);
                }

function BalScrapSave(checkboxElement) {
    var isChecked = checkboxElement.checked;
    console.log("isChecked",isChecked);

    var confirmationMessage = isChecked 
        ? "Are you sure you want to mark this as scrap?"
        : "Are you sure you want to undo scrap marking?";

    var proceed = confirm(confirmationMessage);
    if (!proceed) {
        checkboxElement.checked = !isChecked; // Restore previous state
        return;
    }


    let existingbalWeightValue;
    let crr_no = $('#crr_no option:selected').text();

    if (isChecked) {
        // ✅ Save the current balanced coil in localStorage against this CRR No.
        existingbalWeightValue = $('#balanced_coil').val();
        let existscrap = $('#scrap_coil').val() || 0;
        console.log("existscrap", existscrap);
        let balWeightValue= existingbalWeightValue + existscrap ;
        localStorage.setItem(`balanced_coil_${crr_no}`, balWeightValue);
    } 
    else 
    {
        balWeightValue = localStorage.getItem(`balanced_coil_${crr_no}`) || 0;
    }

    console.log("Sending to server:", balWeightValue, "CRR No:", crr_no);
    console.log("balWeightValue:", balWeightValue, "Crr_no:", crr_no);

    var url = '{{ route('scrapsave') }}';

    $.ajax({
        url: url,
        type: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            balanced_coil: balWeightValue,
            crr_no: crr_no,
            is_checked: isChecked ? 1 : 0
        },
        success: function(response) {
            console.log('Data saved successfully:', response);
            $('#balanced_coil').val(response.balanced_coil);

            let updatedBalancedCoil = $('#balanced_coil').val();
            console.log('Updated Balanced Coil Value:', updatedBalancedCoil);

            if (updatedBalancedCoil == 0) {
                $('#scrap_coil').val(response.scrap_wt);
                let updatedScrapWt = $('#totalscrap_coil').val();
                console.log('Updated Scrap Weight Value:', updatedScrapWt);
            }
        },
        error: function(xhr, status, error) {
            console.error('Error saving data:', error);
        }
    });
}
            
            </Script>
            
            
            <script>
    document.addEventListener("DOMContentLoaded", function() {
        let balancedCoilInput = document.getElementById('balanced_coil');
        let saveButton = document.getElementById('saveplan');
        let alertShown = false;

        function checkNegativeBalance() {
            let balanceWeight = parseFloat(balancedCoilInput.value) || 0;

            if (balanceWeight < 0) {
                balancedCoilInput.style.color = "red";
                balancedCoilInput.style.border = "2px solid red";

                // Disable save button
                saveButton.disabled = true;

                // Show alert only once per negative value
                if (!alertShown) {
                    alert("⚠ Warning: Balance Weight is negative! Please correct it before saving.");
                    console.error("⚠ Warning: Balance Weight is negative!", balanceWeight);
                    alertShown = true;
                }
            } else {
                balancedCoilInput.style.color = "black";
                balancedCoilInput.style.border = "";

                // Enable save button if value is valid
                saveButton.disabled = false;
                alertShown = false;
            }
        }

        // Check for changes every 500ms
        setInterval(checkNegativeBalance, 500);

        // Also check when the user manually updates the field
        balancedCoilInput.addEventListener("input", checkNegativeBalance);

        // Prevent form submission if error is present
        saveButton.addEventListener('click', function(event) {
            let balanceWeight = parseFloat(balancedCoilInput.value) || 0;
            if (balanceWeight < 0) {
                event.preventDefault();
                alert("Error: Balance Weight is negative. Please correct it before saving.");
            }
        });
    });
</script>
       
        @endsection