@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>
                                <div class="row">
                                <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 class="col-2">
                                        <label class="form-label" for="formrow-firstname-input"> Used
                                            Width</label>
                                        <input type="text" class="form-control " name="used_width" value=""
                                            id="used_width" 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"> scrap
                                            Width</label>
                                        <input type="text" class="form-control " name="scrap_width" value=""
                                            id="scrap_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" 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" name="used_coil" value=""
                                            id="used_coil" oninput="validateWeight()" 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>
                                    </div>


                                    <div class="col-2" style="display:none">

                                        <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 px-4" 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>
                document.addEventListener("DOMContentLoaded", function() {
                    document.querySelectorAll(".balance-weight").forEach(function(element) {
                        let line_id = element.getAttribute("data-id");
                        if (line_id === '4' || line_id === '5') {
                            element.style.display = "none";
                        }
                    });
                });
            </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 = {};
                let crsFlag = 0 ;

                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;
                    var url = '{{ route('getClientinfoInward', [':clientId']) }}';
                    url = url.replace(':clientId', clientId);


                    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() {

                    createProcessForm()

                }

                function createProcessForm() {

                    $processcontainer = $("#coilDetailsContainer")
                    let index = Object.keys(processes).length;
                    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);

                            $("#p-" + (index + 1)).find(".dimention-dropdown").each(function() {
                                $(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;

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





                    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}">
                        </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>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)
                    };



                    getDimentionList(pdid)


                }


                function getDimentionList(pdid) {
                    let form = $(pdid).closest('form');
                    $ref = $(pdid).find('.dimentiondropdown');
                    console.log("$ref", $ref);
                    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')) {
                            continue;
                        }
                        let dimentions = Object.keys(processes[processkeys[i]].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>`)
                        }

                    }

                }


            </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,
                                };
                                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) {



                                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();
                            totalbalWidth();
                            // CTLline();


                        }
                        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
                        console.log("line chnages");

                        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);
                        console.log("body chnage form ",index);


                        if (index != -1) {

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

                            // if(index == 0 &&  lineId == '3')
                            // {

                            // let cdetail = JSON.parse(localStorage.getItem("cdetail"));
                            // let stripWidth = 10; // in mm

                            // let balWidth = parseFloat(cdetail.width); // always use original value
                            // let balCoil = parseFloat(cdetail.curb_weight);   // original coil from localStorage

                            // let calbalwidth = balWidth - stripWidth;
                            // let weightInKg = balCoil * 1000;
                            // let stripWeight = (stripWidth / balWidth) * weightInKg;
                            // let exactstrip = stripWeight / 1000;
                            // let exactstripFixed = exactstrip.toFixed(3);
                            // let calbalweight = (balCoil - exactstrip).toFixed(3);

                            // // Logging for debugging
                            // console.log("CRS line balWidth:", balWidth, 
                            //             "calbalwidth:", calbalwidth, 
                            //             "calbalweight:", calbalweight, 
                            //             "stripWeight:", exactstripFixed, 
                            //             "balCoil:", balCoil);

                            // // Update only once
                            // $("#balanced_width").val(calbalwidth);
                            // $("#balanced_coil").val(calbalweight);

                            // }
                            

                            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 of class dimention-row",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);
                                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') {

                                    if (widthinput && lenghtinput && quantityinput) {
                                        const intermediateProduct = cdetail.thickness * widthinput *
                                            lenghtinput * cdetail.material_type_density;
                                        let productionWeightperUnit = intermediateProduct / 1000000000;
                                        productionWeightperUnit = productionWeightperUnit.toFixed(3);
                                        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(2));

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

                                    }

                                } else {
                                    // console.log("CRS Plan Select")
                                    let balWidth = document.getElementById('balanced_width').value;
                                    let balcoil = document.getElementById('balanced_coil').value;
                                    console.log("balWidth" ,balWidth,"balcoil",balcoil);


                                    if (widthinput && quantityinput) {
                                        productionWeight = (cdetail.curb_weight / cdetail.width) * (
                                            widthinput * quantityinput);
                                        // productionWeight = (balcoil / balWidth) * (
                                        //     widthinput * quantityinput);
                                            console.log("CRS productionWeight",productionWeight);

                                        let pw = productionWeight.toFixed(2);
                                        let updatewidth = balWidth - widthinput ;
                                        // $("#balanced_width").val(updatewidth);

                                        $(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();
                    totalbalWidth();
                    // CTLline();
                    //checkGrossWeightExceed()

                }


function totalbalWidth() {
    let totalwidth = 0;
    let firstCRSscrap = 0;
     let firstCRSscrapweight = 0;
    let TotalScrap = 0;
    let totalused = 0;
    let crsFlag = 0;
    let cdetail = JSON.parse(localStorage.getItem("cdetail"));


    for (let key of Object.keys(processes)) {
        let process = processes[key];
        let lineId = process.form.find(".selectedline").val();
        let flag = process.form.find("#is_dependant").is(':checked');

        process.form.find(".dimention-row").each((index, element) => {
            // let cdetail = JSON.parse(localStorage.getItem("cdetail"));
            let usedwidth = +$(element).find(".width-input").val();
            let usedweight = +$(element).find(".used-w").val();
            let pWeight = +$(element).find(".p-w").val();
            let bal = $(element).find(".bw-input").val();
            let isScraped = $(element).find(".scrap-input").is(':checked');

            if (!flag) {
                // Special case for first CRS row
                if (lineId == '3' && crsFlag === 0 && index === 0) {

                    console.log("if part index",index);
                    crsFlag = 1;

                    let stripWidth = 10;
                    let balWidth = parseFloat(cdetail.width);
                    let balCoil = parseFloat(cdetail.curb_weight);

                    let calbalwidth = balWidth - stripWidth;
                    firstCRSscrap += stripWidth;

                    let weightInKg = balCoil * 1000;
                    let stripWeight = (stripWidth / balWidth) * weightInKg;
                    let exactStrip = stripWeight / 1000;
                    firstCRSscrapweight = parseFloat(exactStrip.toFixed(3));
                    let calbalweight = (balCoil - exactStrip).toFixed(3);

                    console.log("CRS Calculation => calbalwidth:", calbalwidth, "calbalweight:", calbalweight, "exactstripFixed:", firstCRSscrapweight);

                    if (pWeight > 0) 
                        {
                            totalwidth += usedwidth;
                        }

                    if (isScraped && bal !== '') 
                    {
                        TotalScrap += Number(bal) + firstCRSscrapweight;
                        console.log("here dependent scrap and crsfirst scrap",TotalScrap)
                    } 
                    else {
                        TotalScrap += firstCRSscrapweight;
                        console.log("here  crsfirst scrap",TotalScrap)

                    }

                    if (usedweight > 0) {
                        totalused += usedweight;
                        $(element).find(".bw-input").val((pWeight - usedweight).toFixed(3));
                    } else {
                        totalused += pWeight;
                    }

                }
                // Normal row
                else if(lineId == '3' && crsFlag === 1 && index != 0)
                 {
                    console.log("else part");
                    let usedwidth = +$(element).find(".width-input").val();

                    if (pWeight > 0) 
                    {
                        totalwidth += usedwidth;
                    }                    

                    if (isScraped && bal !== '') {
                        TotalScrap += Number(bal);
                    }

                    if (usedweight > 0) {
                        totalused += usedweight;
                        $(element).find(".bw-input").val((pWeight - usedweight).toFixed(3));
                    } else {
                        totalused += pWeight;
                    }

                }

                else if(lineId == '3' || lineId == '4')
                 {
                    console.log("else part lineId  3 and 4");
                    let usedwidth = +$(element).find(".width-input").val();


                    if (isScraped && bal !== '') {
                        TotalScrap += Number(bal);
                    }

                    if (usedweight > 0) {
                        totalused += usedweight;
                        $(element).find(".bw-input").val((pWeight - usedweight).toFixed(3));
                    } else {
                        totalused += pWeight;
                    }

                }

            }
        });
    }


                    $("#scrap_coil").val(TotalScrap.toFixed(3));
                    $("#used_coil").val(totalused.toFixed(3));
                    let balancedwidth = cdetail.width - (totalwidth  + firstCRSscrap);

                    $("#balanced_width").val(balancedwidth.toFixed(3));
                    $("#scrap_width").val(firstCRSscrap);
                    $("#used_width").val(totalwidth);
                    console.log("trupti totalused",totalused,"totalwidth",totalwidth,"balancedwidth",balancedwidth);

                    let balancedCoil = cdetail.curb_weight - (totalused + TotalScrap );
                    $("#balanced_coil").val(balancedCoil.toFixed(3));
                    console.log("after foreach  scrap",TotalScrap,"balancedCoil",balancedCoil)


}



function CTLline() {
    console.log("totalUsedWeight");
                    let totalused = 0;
                    let scrapweight = 0;
                    let totalwidth =0;
                    for (let key of Object.keys(processes)) 
                    {

                        process = processes[key];
                        let lineId = process.form.find(".selectedline").val();
                        console.log("totalUsedWeight function lineId",lineId);

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

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

                            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 cdetail = JSON.parse(localStorage.getItem("cdetail"));


                            }
                            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"));
                    let balancedCoil = cdetail.curb_weight - (totalused + scrapweight);
                    balancedCoil = balancedCoil.toFixed(3); // Format to 2 decimal places
                    $('#balanced_coil').val(balancedCoil); // Assign the formatted value

}




                function totalUsedWeight() {

                    console.log("totalUsedWeight");
                    let totalused = 0;
                    let scrapweight = 0;
                    let totalwidth =0;
                    for (let key of Object.keys(processes)) 
                    {

                        process = processes[key];
                        let lineId = process.form.find(".selectedline").val();
                        console.log("totalUsedWeight function lineId",lineId);

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

                            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 cdetail = JSON.parse(localStorage.getItem("cdetail"));


                            }
                            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"));
                    let balancedCoil = cdetail.curb_weight - (totalused + scrapweight);
                    balancedCoil = balancedCoil.toFixed(3); // Format to 2 decimal places
                    $('#balanced_coil').val(balancedCoil); // Assign the formatted value

                

                }

                function deleteProcess() {
                    let keys = Object.keys(processes)
                    processes[keys[keys.length - 1]].form.remove();
                    delete processes[keys[keys.length - 1]]
                    // totalUsedWeight();
                    totalbalWidth();
                    // CTLline();


                }

                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();
                    totalbalWidth();
                    // CTLline();




                }


                // Scrap Script
                function calculateScrapWeight(checkboxElement) {

                    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);
                                        // $('#scrapDiv').show();
                                    } else {
                                        // $('#scrapDiv').hide();
                                    }
                                },
                                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);
                }
            </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