@php
$scopeOfWorks = \App\Models\ScopeOfWork::all();
$areas = \App\Models\Area::all();
$setting = \App\Models\Setting::where('name', 'IfAddTierManually')->first();
$uoms = \App\Models\Uom::select('id', 'name')->get();

$scopeOfWorkItems = '';
$areaItems = '';

foreach ($scopeOfWorks as $item){
    $scopeOfWorkItems .= '<option value="'.$item->id.'">'.$item->name.'</option>';
}

foreach ($areas as $item){
    $areaItems .= '<option value="'.$item->id.'">'.$item->name.'</option>';
}

@endphp

<div class="bold-labels">
    <div class="card">
        <div class="card-header">
            <h4 class="float-left mt-2 mb-0">Requirement</h4>
        </div>
        <div class="card-body pb-0">
            <div id="requirement-not-found"><h4 class="text-center text-uppercase my-4 pt-4 pb-5">click add new item button below to add new requirement field</h4></div>
            <div id="requirement-table" class="requirement-table tier-1-sortable tier-area-sortable">
                <section>
                </section>
            </div>
        </div>
        <div class="cord-footer border-top p-3">
            <div id="R-TOTAL" class="box-item bg-light p-2 mb-3 m-1">
                <div class="row ml-0 mr-0">
                    <div class="col-9 px-1">
                    </div>
                    <div class="col-3 px-1">
                        <div class="row">
                            <div>

                            </div>
                            <div class="col-12 pl-1">
                                <div class="input-group">
                                    <div class="input-group-prepend text-uppercase">
                                        <span class="input-group-text font-size-15px pl-0" style="background: transparent;border: 0px;">Total</span>
                                    </div>
                                    <input class="form-control amount-total" value="0.00" readonly="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-light rounded border p-3 m-1" id="sales-item-box-manual">
                <div class="accordion" id="accordionBottom">
                    <div class="text-uppercase">
                        <button type="button" class="text-uppercase btn btn-default w-25 mr-2" data-toggle="collapse" data-target="#collapseThree">Add Item from System</button>
                        <button type="button" class="text-uppercase btn btn-default w-25 mr-2" data-toggle="collapse" data-target="#collapseOne" {{$setting->value ? '' : 'disabled'}}>Add Item Manually</button>
                        <button type="button" class="text-uppercase btn btn-default w-25 " data-toggle="collapse" data-target="#collapseTwo">Add Area Section</button>
                    </div>
                    <div id="collapseOne" class="collapse" data-parent="#accordionBottom">
                        <hr/>
                        <div class="row">
                            <div class="form-group col-3 mb-0 pr-1">
                                <label>Tier</label>
                                <select id="select-tier-level" class="form-control" style="height: 42px" required>
                                    <option disabled="" selected="">Select Tier</option>
                                    <option value="1">Tier 1 - Scope Of Work</option>
                                    <option value="2">Tier 2 - Item</option>
                                    <option value="3">Tier 3 - Item Children</option>
                                </select>
                            </div>
                            <div class="form-group col-8 mb-0 pr-1">
                                <label>Description</label>
                                <div class="grow-wrap">
                                    <textarea name="manual-title" id="autoresizing" class="form-control manual-title" onInput="this.parentNode.dataset.replicatedValue = this.value" rows="1" placeholder="Type the item name here.."></textarea>
                                </div>
                            </div>
                            <div class="form-group col-1 mb-0">
                                <div id="add-requirement-manual" class="mt-4 pt-2">
                                    <a href="#" class="btn btn-primary w-100 disabled" id="add-requirement-manual-btn">
                                        <i class="la la-plus"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div id="requirement-manual-info" class="d-none">
                            <div class="alert alert-warning mt-3 mb-0">
                                <b>Notes:</b>
                                <ul class="mb-0">
                                    <li>Amount of Tier 2 Item will auto summed and affecting amount of Tier 1 Scope.</li>
                                    <li>Amount of Tier 3 Item will auto summed and affecting amount of Tier 2 Item and Tier 1 Scope.</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div id="collapseTwo" class="collapse" data-parent="#accordionBottom">
                        <hr/>
                        <div class="row">
                            <div class="form-group col-3 mb-0 pr-1">
                                <label>Tier</label>
                                <select id="select-area" class="form-control" style="height: 42px">
                                    <option disabled="" selected="">Select Tier</option>
                                    {{!! $areaItems !!}}
                                </select>
                            </div>
                            <div class="form-group col-1 mb-0">
                                <div id="add-requirement-area" class="mt-4 pt-2">
                                    <a href="#" class="btn btn-primary w-100 disabled" id="add-requirement-area-btn">
                                        <i class="la la-plus"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="form-group col-2 mb-0 pl-1">
                                <div id="add-requirement-free-text" class="mt-2 pt-4">
                                    <div class="d-inline">OR</div>
                                    <a href="#" class="btn btn-primary ml-3" id="add-requirement-free-text-btn">Use
                                        Free text
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="collapseThree" class="collapse" data-parent="#accordionBottom">
                        <hr/>
                        <div class="row mb-3">
                            <div class="form-group col-md-3 mb-0" element="div">
                                <div class="sticky-selector" data-margin-top="15">
                                    <label>Scope of Work</label>
                                    <select id="select-scope-of-work" class="form-control">
                                        <option disabled selected>Select Scope of Work</option>
                                        {{!! $scopeOfWorkItems !!}}
                                    </select>
                                    <div id="add-requirement" class="mt-3">
                                        <a href="#" class="btn btn-primary w-100 disabled" id="add-requirement-btn">
                                            <i class="la la-plus"></i>
                                            Add New Item
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col mb-0" element="div">
                                <div class="bg-white rounded border p-3" id="sales-item-box">
                                    <picture class="d-block text-center w-100 ">
                                        <img src="{{env('APP_URL')}}/images/loading-sales-item.gif" alt="Loading" class="py-5" id="sales-item-box-img" style="display:none;"/>
                                    </picture>
                                    <span id="item-sales-init"><h5 class="text-center text-uppercase my-4 pt-4 pb-4">Please select the Scope of work first</h5></span>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

    var rowRT1Idx = 1;
    var rowRT2Idx = 1;
    var rowRT3Idx = 1;
    var rowRT4Idx = 1;
    var rowStepNum = 1;
    var pushToHtml = '';
    var tierLevel = 0;
    var area = '';
    var rowStepNumTemp = 0;
    var initTier1Manual = 0;
    var marginIndex = 0;
    var remove = null;
    var cloneId = 1;
    var totalManual3Added = 1;
    var uoms = `{{$uoms}}`;
    uoms = JSON.parse(uoms.replace(/&quot;/g,'"'));

    $(document).ready(function(){

        $(window).on('beforeunload', function(){
            return "Any changes will be lost";
        });

        $(document).on('click', '#remove-requirement-area', function(){
            var r = confirm("Are you sure to remove the item?");
            if (r == true) {
                $(this).closest('div.tier-area').remove();
                updateMarginIndex();
                startSticky();
                updateAmountTotal();
            }
        });

        $(document).on('click', '#remove-requirement-tier-1', function(){
            var r = confirm("Are you sure to remove the item?");
            if (r == true) {
                $(this).closest('section').remove();
                updateMarginIndex();
                startSticky();
                updateAmountTotal();
            }
        });

        $(document).on('click', '#remove-requirement-tier-2', function(){
            var r = confirm("Are you sure to remove the item?");
            if (r == true) {
                checkTier2Delete($(this).closest('figure')[0].parentElement);
                let dataStepId = $(this).closest('figure')[0].dataset.step;
                remove = $(this).closest('figure').remove();
                if (remove){
                    updateAmountItem(dataStepId);
                    updateMarginIndex();
                    startSticky();
                    updateAmountTotal();
                }
            }
        });

        $(document).on('click', '#remove-requirement-tier-3', function(){
            var r = confirm("Are you sure to remove the item?");
            if (r == true) {
                checkTier3Delete($(this).closest('article')[0].parentElement);
                let dataSalesId = $(this).closest('article')[0].dataset.parent;
                let dataStepId = $(this).closest('article')[0].dataset.step;
                remove = $(this).closest('article').remove();
                if (remove){
                    updateAmountItemChildren(dataSalesId, dataStepId);
                    updateAmountItem(dataStepId);
                    updateMarginIndex();
                    startSticky();
                    updateAmountTotal();
                }
            }
        });

        $(document).on('click', '#clone-requirement-tier-2', function(){
            var r = confirm("Are you sure to clone item?");
            if (r == true) {
                checkTier2Delete($(this).closest('figure')[0].parentElement);
                let dataStepId = $(this).closest('figure')[0].dataset.step;
                let dataNumId = parseInt($(this).closest('figure')[0].dataset.num);
                let section = $(this).closest('section')[0];

                let cloneFigure = section.querySelectorAll('figure[data-num]');
                for (i = 0; i < cloneFigure.length; ++i) {
                    if (i === cloneFigure.length - 1) {
                        dataNumId = cloneFigure[i].dataset.num;
                    }
                }

                let rowHtml = $(this).closest('figure')[0];
                let clone = rowHtml.cloneNode(true);

                clone.dataset.num = dataNumId + 1;
                clone.querySelectorAll(`div.tier-3-sortable`)[0].dataset.num = dataNumId + 1;
                clone.querySelectorAll(`button`)[3].dataset.target = clone.querySelectorAll(`button`)[3].dataset.target + `-` + cloneId;
                clone.querySelectorAll('div.collapse')[0].id = clone.querySelectorAll('div.collapse')[0].id + `-` + cloneId;
                clone.querySelectorAll('#autoresizing')[1].dataset.onload = `setTextAreaHeightAuto(this.parentNode, this.value, '#${clone.querySelectorAll('div.collapse')[0].id}')`;
                clone.querySelectorAll('#autoresizing')[1].setAttribute(`oninput`, `return setTextAreaHeightAuto(this.parentNode, this.value, '#${clone.querySelectorAll('div.collapse')[0].id}')`);

                let cloneArticle = clone.querySelectorAll('article[data-parent]');
                if (cloneArticle.length>0) {
                    for (i = 0; i < cloneArticle.length; ++i) {
                        cloneArticle[i].dataset.parent = dataNumId + 1;

                        // change button id
                        cloneArticle[i].querySelectorAll(`button`)[0].dataset.target = cloneArticle[i].querySelectorAll(`button`)[0].dataset.target + `-` + cloneId;
                        cloneArticle[i].querySelectorAll(`button`)[4].dataset.target = cloneArticle[i].querySelectorAll(`button`)[4].dataset.target + `-` + cloneId;

                        // change collapse id
                        cloneArticle[i].querySelectorAll('div.collapse')[0].id = cloneArticle[i].querySelectorAll('div.collapse')[0].id + `-` + cloneId;
                        cloneArticle[i].querySelectorAll('div.collapse')[1].id = cloneArticle[i].querySelectorAll('div.collapse')[1].id + `-` + cloneId;

                        cloneArticle[i].querySelectorAll('#autoresizing')[1].dataset.onload = `setTextAreaHeightAuto(this.parentNode, this.value, '#${cloneArticle[i].querySelectorAll('div.collapse')[1].id}')`;
                        cloneArticle[i].querySelectorAll('#autoresizing')[1].setAttribute(`oninput`, `return setTextAreaHeightAuto(this.parentNode, this.value, '#${cloneArticle[i].querySelectorAll('div.collapse')[1].id}')`);
                    }
                }

                let tryClone = $(this).closest('section div.tier-2-sortable').append(clone);
                if (tryClone){
                    updateAmountItem(dataStepId);
                    updateMarginIndex();
                    startSticky();
                    sequence();
                    updateAmountTotal();
                    ++cloneId;
                }
            }
        });

        $(document).on('click', '#clone-requirement-tier-3', function(){
            var r = confirm("Are you sure to clone item?");
            if (r == true) {
                checkTier3Delete($(this).closest('article')[0].parentElement);
                let dataSalesId = $(this).closest('article')[0].dataset.parent;
                let dataStepId = $(this).closest('article')[0].dataset.step;
                let rowHtml = $(this).closest('article')[0];
                let clone = rowHtml.cloneNode(true);

                // change button id
                clone.querySelectorAll(`button`)[0].dataset.target = clone.querySelectorAll(`button`)[0].dataset.target + `-` + cloneId;
                clone.querySelectorAll(`button`)[4].dataset.target = clone.querySelectorAll(`button`)[4].dataset.target + `-` + cloneId;

                // change collapse id
                clone.querySelectorAll('div.collapse')[0].id = clone.querySelectorAll('div.collapse')[0].id + `-` + cloneId;
                clone.querySelectorAll('div.collapse')[1].id = clone.querySelectorAll('div.collapse')[1].id + `-` + cloneId;

                clone.querySelectorAll('#autoresizing')[1].dataset.onload = `setTextAreaHeightAuto(this.parentNode, this.value, '#${clone.querySelectorAll('div.collapse')[1].id}')`;
                clone.querySelectorAll('#autoresizing')[1].setAttribute(`oninput`, `return setTextAreaHeightAuto(this.parentNode, this.value, '#${clone.querySelectorAll('div.collapse')[1].id}')`);

                let tryClone = $(this).closest('article').after(clone);
                if (tryClone){
                    updateAmountItemChildren(dataSalesId, dataStepId);
                    updateAmountItem(dataStepId);
                    updateMarginIndex();
                    startSticky();
                    sequence();
                    updateAmountTotal();
                    ++cloneId;
                }
            }
        });

        $(document).submit(function(){
            $(window).off('beforeunload');
        });

        $(document).on('click', '.collapseTier', function(e){
            setTimeout(function() { 
                startSticky();
            }, 1000);
        });
        
        $(document).on("change", '.checkbox', function() {
            if ($(this).is(':checked')) {
                $(this).closest('div.btn-checkbox').find('input.is_modified').val(1);
            } else {
                $(this).closest('div.btn-checkbox').find('input.is_modified').val(0);
            }
        });
    });
    

    $('#select-tier-level').on('change', function() {
        tierLevel = $(this).find(':selected')[0].value;
        if (tierLevel == 1 || tierLevel == 2 || tierLevel == 3) {
            $('#add-requirement-manual-btn').removeClass('disabled');
        }

        if (tierLevel == 2 || tierLevel == 3) {
            $('#requirement-manual-info').removeClass('d-none');
            $('#requirement-manual-info').addClass('d-block');
        } else {
            $('#requirement-manual-info').removeClass('d-block');
            $('#requirement-manual-info').addClass('d-none');
        }
    });

    $("#add-requirement-manual").on('click', '#add-requirement-manual-btn', function(){
        tierLevel = $('#select-tier-level').find(':selected')[0].value;

        $("#requirement-not-found").hide();

        let manualTitle = document.getElementsByClassName("manual-title")[0].value;

        let check = null;

        if (tierLevel==2 || tierLevel==3) {
            if (initTier1Manual == 0) {
                $("#requirement-not-found").show();
                alert("Cannot add Tier 2 or Tier 3 without Parent Item Scope, Please add Item Scope First..");
                return null;
            }
        } 

        if (tierLevel==1) {
            rowStepNumTemp = rowStepNum;
            pushToHtml +=`<section id="R-T1" data-num="${rowRT1Idx}" data-step="${rowStepNumTemp}">
                <div class="box-item">
                    <input name="tier_level[]" type="hidden" value="1"/>
                    <input name="master_item_id[]" type="hidden" value="0"/>
                    <input name="quantity[]" type="hidden" value="0"/>
                    <input name="is_area[]" type="hidden" value="0"/>
                    <input name="is_quantity[]" type="hidden" value="1"/>
                    <input name="is_amount[]" type="hidden" value="1"/>
                    <input name="remarks[]" type="hidden" value="0"/>
                    <input name="uom[]" type="hidden" value="0"/>
                    <input name="is_modified[]" type="hidden" value="0">
                    <div id="calculator">
                        <div id="calculatorUnit">
                            <input class="margin" name="margins[${marginIndex}][0]" type="hidden" value="0"/>
                            <input class="marginFromSystem" name="margins[${marginIndex}][0][is_from_system]" type="hidden" value="0"/>
                            <input class="marginName" name="margins[${marginIndex}][0][name]" type="hidden" value="0"/>
                            <input class="marginQuantity" name="margins[${marginIndex}][0][quantity]" type="hidden" value="0"/>
                            <input class="marginPrice" name="margins[${marginIndex}][0][price]" type="hidden" value="0"/>
                            <input class="marginPercentage" name="margins[${marginIndex}][0][percentage]" type="hidden" value="0"/>
                            <input class="marginTotal" name="margins[${marginIndex}][0][total]" type="hidden" value="0"/>
                        </div>
                    </div>
                    <div class="row ml-0 mr-0">
                        <div class="col-7 px-1">
                            <div class="margin-tier-1">
                                <div class="form-group mb-0">
                                    <div class="grow-wrap">
                                        <textarea name="title[]" id="autoresizing" class="form-control input-tier-1" onInput="return setTextAreaHeightAuto(this.parentNode, this.value)" rows="1" data-onload="setTextAreaHeightAuto(this.parentNode, this.value)" required>${manualTitle}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-3 px-1">
                            <div class="row">
                                <div class="col-5 pr-1">
                                </div>
                                <div class="col-7 pl-1">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text font-size-13px pl-0" style="background: transparent;border: 0px;">Amount ($)</span>
                                        </div>
                                        <input name="amount[]" class="form-control item-scope-amount text-right" value="0.00"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-2 px-1 pt-1">
                            <button type="button" class="btn btn-warning btn-sm handle-1" ><i class="la la-arrows-alt"></i> Drag</button>
                            <button type="button" name="remove" class="btn btn-danger btn-sm" id="remove-requirement-tier-1"><i class="la la-trash"></i></button>
                        </div>
                    </div>
                </div>
                <div class="tier-2-sortable tier-area-sortable increase-height-tier-1" data-num="${rowRT1Idx}" data-step="${rowStepNumTemp}">
                <figure id="R-T2"></figure>
                </div>
            </section>`;
            ++rowRT1Idx;
            ++rowStepNum;
            ++initTier1Manual;

            if($('div#requirement-table>div#areaT1:last').is(':visible')){
                $("div#requirement-table>div#areaT1:last").after(`${pushToHtml}`);
            } else {
                $("div#requirement-table section:last").after(`${pushToHtml}`);
            }

        } else if (tierLevel==2) {
            rowStepNumTemp = rowStepNum-1;
            pushToHtml += `<figure id="R-T2" data-num="${rowRT2Idx}" data-step="${rowStepNumTemp}">
                <div class="box-item">
                    <input name="tier_level[]" type="hidden" value="2"/>
                    <input name="master_item_id[]" type="hidden" value="0"/>
                    <input name="is_area[]" type="hidden" value="0"/>
                    <input name="quantity[]" type="hidden" value="0"/>
                    <input name="is_quantity[]" type="hidden" value="1"/>
                    <input name="is_amount[]" type="hidden" value="1"/>
                    <input name="remarks[]" type="hidden" value="0"/>
                    <input name="uom[]" type="hidden" value="0"/>
                    <div id="calculator">
                        <div id="calculatorUnit">
                            <input class="margin" name="margins[${marginIndex}][0]" type="hidden" value="0"/>
                            <input class="marginFromSystem" name="margins[${marginIndex}][0][is_from_system]" type="hidden" value="0"/>
                            <input class="marginName" name="margins[${marginIndex}][0][name]" type="hidden" value="0"/>
                            <input class="marginQuantity" name="margins[${marginIndex}][0][quantity]" type="hidden" value="0"/>
                            <input class="marginPrice" name="margins[${marginIndex}][0][price]" type="hidden" value="0"/>
                            <input class="marginPercentage" name="margins[${marginIndex}][0][percentage]" type="hidden" value="0"/>
                            <input class="marginTotal" name="margins[${marginIndex}][0][total]" type="hidden" value="0"/>
                        </div>
                    </div>
                    <div class="row ml-0 mr-0">
                        <div class="col-7 px-1">
                            <div class="margin-tier-2">
                                <div class="form-group mb-0">
                                    <div class="grow-wrap">
                                        <textarea name="title[]" id="autoresizing" class="form-control input-tier-2" onInput="return setTextAreaHeightAuto(this.parentNode, this.value)" rows="1" data-onload="setTextAreaHeightAuto(this.parentNode, this.value)" required>${manualTitle}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-3 px-1">
                            <div class="row">
                                <div class="col-5 pr-1">
                                </div>
                                <div class="col-7 pl-1">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text font-size-13px pl-0" style="background: transparent;border: 0px;">Amount ($)</span>
                                        </div>
                                        <input name="amount[]" class="form-control item-amount text-right" value="0.00"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-2 px-1 pt-1">
                            <button type="button" class="btn btn-warning btn-sm handle-2" ><i class="la la-arrows-alt"></i> Drag</button>
                            <button type="button" name="remove" class="btn btn-danger btn-sm" id="remove-requirement-tier-2"><i class="la la-trash"></i></button>
                            <button type="button" name="clone" class="btn btn-info btn-sm" id="clone-requirement-tier-2"><i class="la la-copy"></i></button>
                            <button type="button" data-toggle="collapse" data-target="#collapseRemark3-${rowRT2Idx}-${rowRT2Idx+'-manual'}" class="btn btn-dark btn-sm collapseTier">
                                <i class="la la-la la-quote-left"></i>
                            </button>
                            <div class="btn btn-dark btn-checkbox">
                                <input class="is_modified" name="is_modified[]" type="hidden" value="0">
                                <input class="checkbox" type="checkbox" value="0">
                            </div>
                        </div>
                    </div>
                    <div class="collapse" id="collapseRemark3-${rowRT2Idx}-${rowRT2Idx+'-manual'}">
                        <div class="card card-body my-1 mt-2 py-3 px-3 item-tier-2-attemp">
                            <label class="d-block w-100">Add Remark:</label>
                            <div class="grow-wrap">
                                <textarea name="remarks[]" id="autoresizing" class="form-control input-tier-3" onInput="return setTextAreaHeightAuto(this.parentNode, this.value, '#collapseRemark3-${rowRT2Idx}-${rowRT2Idx+'-manual'}')" data-onload="setTextAreaHeightAuto(this.parentNode, this.value, '#collapseRemark3-${rowRT2Idx}-${rowRT2Idx+'-manual'}')" rows="1"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tier-3-sortable tier-area-sortable increase-height-tier-2" data-num="${rowRT2Idx}" data-step="${rowStepNumTemp}">
                    <article id="R-T3"></article>
                </div>
            </figure>`;

            ++rowRT2Idx;

            if($('div#requirement-table section:last div.tier-2-sortable>div#areaT1:last').is(':visible')){
                $("div#requirement-table section:last div.tier-2-sortable>div#areaT1:last").after(`${pushToHtml}`);
            } else {
                $("div#requirement-table section:last div.tier-2-sortable>figure:last").after(`${pushToHtml}`);
            }

        } else if (tierLevel==3) {
            rowStepNumTemp = rowStepNum-1;

            let parentTier3 = $("figure#R-T2:last")[0].querySelectorAll(`div.tier-3-sortable`);

            pushToHtml += `<article id="R-T3" class="R-T3" data-num="${rowRT3Idx}" data-parent="${parentTier3[0].dataset.num}" data-step="${rowStepNumTemp}">
                <div class="box-item">
                    <input name="tier_level[]" type="hidden" value="3"/>
                    <input name="master_item_id[]" type="hidden" value="0"/>
                    <input name="is_area[]" type="hidden" value="0"/>
                    <input name="is_quantity[]" type="hidden" value="1"/>
                    <input name="is_amount[]" type="hidden" value="1"/>
                    <input name="remarks[]" type="hidden" value="0"/>
                    <input name="is_modified[]" type="hidden" value="0">
                    <div class="row ml-0 mr-0">
                        <div class="col-7 px-1">
                            <div class="row">
                                <div class="col-8 pr-1">
                                    <div class="margin-tier-3">
                                        <div class="form-group mb-0">
                                            <div class="grow-wrap">
                                                <textarea name="title[]" id="autoresizing" class="form-control input-tier-3" onInput="return setTextAreaHeightAuto(this.parentNode, this.value)" rows="1" data-onload="setTextAreaHeightAuto(this.parentNode, this.value)" required>${manualTitle}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-1 pl-0">
                                    <button type="button" data-toggle="collapse" data-target="#collapseT3-${rowRT3Idx}-${rowRT3Idx+'-manual'+totalManual3Added}" class="btn btn-dark btn-sm mt-1 collapseTier">
                                        <i class="la la-la la-calculator"></i>
                                    </button>
                                </div>
                                <div class="col-3 pl-0">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text font-size-13px" style="background: transparent;border: 0px;">UOM</span>
                                        </div>
                                        ${mapUomFunc(uoms)}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-3 px-1">
                            <div class="row">
                                <div class="col-5 pr-1">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text font-size-13px pl-0" style="background: transparent;border: 0px;">QTY</span>
                                        </div>
                                        <input name="quantity[]" class="form-control text-right item-quantity decimal" value="1.00"  required/>
                                    </div>
                                </div>
                                <div class="col-7 pl-1">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text font-size-13px pl-0" style="background: transparent;border: 0px;">Amount ($)</span>
                                        </div>
                                        <input name="amount[]" class="form-control item-child-amount text-right" value="0.00"/>
                                        <input type="hidden" class="form-control item-child-amount-hidden" value="0.00" id="quantitySellingPrice-${rowRT3Idx}-${rowRT3Idx+'-manual'+totalManual3Added}" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-2 px-1 pt-1">
                            <button type="button" class="btn btn-warning btn-sm handle-3" ><i class="la la-arrows-alt"></i> Drag</button>
                            <button type="button" name="remove" class="btn btn-danger btn-sm" id="remove-requirement-tier-3"><i class="la la-trash"></i></button>
                            <button type="button" name="clone" class="btn btn-info btn-sm" id="clone-requirement-tier-3"><i class="la la-copy"></i></button>
                            <button type="button" data-toggle="collapse" data-target="#collapseRemark3-${rowRT3Idx}-${rowRT3Idx+'-manual'+totalManual3Added}" class="btn btn-dark btn-sm collapseTier">
                                <i class="la la-la la-quote-left"></i>
                            </button>
                        </div>
                    </div>
                    <item data-num="${rowRT3Idx}" data-id="${rowRT3Idx+'-manual'+totalManual3Added}">
                        <div class="collapse" id="collapseT3-${rowRT3Idx}-${rowRT3Idx+'-manual'+totalManual3Added}">
                            <div class="card card-body my-1 mt-2 py-3 px-3 item-tier-3-attemp">
                                ${mapItemMargin([], rowRT3Idx, rowRT3Idx+'-manual'+totalManual3Added, marginIndex, 1)}
                            </div>
                        </div>
                        <div class="collapse" id="collapseRemark3-${rowRT3Idx}-${rowRT3Idx+'-manual'+totalManual3Added}">
                            <div class="card card-body my-1 mt-2 py-3 px-3 item-tier-3-attemp">
                                <label class="d-block w-100">Add Remark:</label>
                                <div class="grow-wrap">
                                    <textarea name="remarks[]" id="autoresizing" class="form-control input-tier-3 remarks" onInput="return setTextAreaHeightAuto(this.parentNode, this.value, '#collapseRemark3-${rowRT3Idx}-${rowRT3Idx+'-manual'+totalManual3Added}')" data-onload="setTextAreaHeightAuto(this.parentNode, this.value, '#collapseRemark3-${rowRT3Idx}-${rowRT3Idx+'-manual'+totalManual3Added}')" rows="1"></textarea>
                                </div>
                            </div>
                        </div>
                    </item>
                </div>
            </article>`;

            if (parentTier3[0].children.length > 1) {
                $(parentTier3[0].children[parentTier3[0].children.length-1]).after(`${pushToHtml}`);
            } else {
                if($('div#requirement-table section:last div.tier-2-sortable figure:last div.tier-3-sortable>div#areaT1:last').is(':visible')){
                    $("div#requirement-table section:last div.tier-2-sortable figure:last div.tier-3-sortable>div#areaT1:last").after(`${pushToHtml}`);
                } else {
                    $("div#requirement-table section:last div.tier-2-sortable figure:last div.tier-3-sortable>article:last").after(`${pushToHtml}`);
                }
            }

            ++rowRT3Idx;
            ++totalManual3Added;

        }
        pushToHtml = '';

        document.getElementsByClassName("manual-title")[0].value = '';

        if (tierLevel==2) {
            // from select item ajax
            if (initTier1Manual == 0) {
                check = $("section#R-T1")[0].querySelectorAll(`div.tier-2-sortable[data-num="${rowRT1Idx-1}"][data-step="${rowStepNumTemp}"]`);
                checkTier2Manual(check[0]);
                updateAmountItem(rowStepNum);
            } else {
                check = $("section#R-T1:last")[0].querySelectorAll(`div.tier-2-sortable[data-step="${rowStepNumTemp}"]`);
                checkTier2Manual(check[0]);
                updateAmountItem(rowStepNum-1);
            }
        }

        if (tierLevel==3) {
            // from select item ajax
            if (initTier1Manual == 0) {
                check = $("figure#R-T2")[0].querySelectorAll(`div.tier-3-sortable[data-num="${rowRT1Idx-1}"][data-step="${rowStepNumTemp}"]`);
                checkTier3Manual(check[0]);
                updateAmountItemChildren(rowRT2Idx, rowStepNum);
                updateAmountItem(rowStepNum);
            } else {
                let parentTier3 = $("figure#R-T2:last")[0].querySelectorAll(`div.tier-3-sortable`);
                check = $("figure#R-T2:last")[0].querySelectorAll(`div.tier-3-sortable[data-num="${parentTier3[0].dataset.num}"][data-step="${rowStepNumTemp}"]`);
                checkTier3Manual(check[0]);
                updateAmountItemChildren(parentTier3[0].dataset.num, rowStepNum-1);
                updateAmountItem(rowStepNum-1);
            }
        }

        $('html, body').animate({
            scrollTop: $("div#requirement-table").offset().top + $("div#requirement-table").outerHeight()
        }, 1000);

        sequence();
        startSticky();
        updateAmountTotal();
        ++marginIndex;
    });

    $('#select-area').on('change', function() {
        area = $(this).find(':selected')[0].value;
        if (area != null) {
            $('#add-requirement-area-btn').removeClass('disabled');
        }
    });

    $("#add-requirement-area").on('click', '#add-requirement-area-btn', function(){

        $("#requirement-not-found").hide();

        let areaId = area;
        let areaRoute = '{{route("ajax.area.show", ":areaId")}}';
        areaRoute = areaRoute.replace(':areaId', areaId);

        $.ajax({
            type:'GET',
            url: areaRoute,
            success:function(res){
                pushToHtml +=`<div id="areaT1" class="tier-area" data-step="${rowStepNum}">
                    <div class="box-item">
                        <input name="tier_level[]" class="areaLevel" type="hidden" value="1"/>
                        <input name="master_item_id[]" type="hidden" value="0"/>
                        <input name="quantity[]" type="hidden" value="0"/>
                        <input name="amount[]" type="hidden" value="0"/>
                        <input name="is_area[]" type="hidden" value="1"/>
                        <input name="is_quantity[]" type="hidden" value="0"/>
                        <input name="is_amount[]" type="hidden" value="0"/>
                        <input name="remarks[]" type="hidden" value="0"/>
                        <input name="uom[]" type="hidden" value="0"/>
                        <input name="is_modified[]" type="hidden" value="0">
                        <div id="calculator">
                            <div id="calculatorUnit">
                                <input class="margin" name="margins[${marginIndex}][0]" type="hidden" value="0"/>
                                <input class="marginFromSystem" name="margins[${marginIndex}][0][is_from_system]" type="hidden" value="0"/>
                                <input class="marginName" name="margins[${marginIndex}][0][name]" type="hidden" value="0"/>
                                <input class="marginQuantity" name="margins[${marginIndex}][0][quantity]" type="hidden" value="0"/>
                                <input class="marginPrice" name="margins[${marginIndex}][0][price]" type="hidden" value="0"/>
                                <input class="marginPercentage" name="margins[${marginIndex}][0][percentage]" type="hidden" value="0"/>
                                <input class="marginTotal" name="margins[${marginIndex}][0][total]" type="hidden" value="0"/>
                            </div>
                        </div>
                        <div class="row ml-0 mr-0">
                            <div class="col-7 px-1">
                                <div class="margin-tier-area">
                                    <div class="form-group mb-0">
                                        <div class="grow-wrap">
                                            <textarea name="title[]" id="autoresizing" class="form-control input-tier-area" onInput="this.parentNode.dataset.replicatedValue = this.value" rows="1" required readonly>${res.name}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-3 px-1">
                                <div class="row">
                                    <div class="col-12 pr-1">
                                        <span class="input-group-text font-size-13px pl-0 mt-2 text-uppercase" style="background: transparent;border: 0px;">This is Area section</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-2 px-1 pt-1">
                                <button type="button" class="btn btn-warning btn-sm handle-area"><i class="la la-arrows-alt"></i> Drag</button>
                                <button type="button" name="remove" class="btn btn-danger btn-sm" id="remove-requirement-area"><i class="la la-trash"></i></button>
                            </div>
                        </div>
                    </div>
                </div>`;
                // ++rowStepNum;
                ++marginIndex;

                if($('div#requirement-table section:last div.tier-2-sortable figure:last div.tier-3-sortable article:last').is(':visible') || $('div#requirement-table section:last div.tier-2-sortable figure:last div.tier-3-sortable div#areaT1:last').is(':visible')){
                    let areafortier3 = $('div#requirement-table section:last div.tier-2-sortable figure:last div.tier-3-sortable').children().last();
                    if (areafortier3.length>0){
                        if (areafortier3[0].localName == 'article') {
                            $("div#requirement-table section:last div.tier-2-sortable figure:last div.tier-3-sortable article:last").after(`${pushToHtml}`);
                        } else {
                            $("div#requirement-table section:last div.tier-2-sortable figure:last div.tier-3-sortable div#areaT1:last").after(`${pushToHtml}`);
                        }
                    }
                } else if($('div#requirement-table section:last div.tier-2-sortable figure:last').is(':visible') || $('div#requirement-table section:last div.tier-2-sortable div#areaT1:last').is(':visible')){
                    let areafortier2 = $('div#requirement-table section:last div.tier-2-sortable').children().last();
                    if (areafortier2.length>0){
                        if (areafortier2[0].localName == 'figure') {
                            $("div#requirement-table section:last div.tier-2-sortable figure:last").after(`${pushToHtml}`);
                        } else {
                            $("div#requirement-table section:last div.tier-2-sortable div#areaT1:last").after(`${pushToHtml}`);
                        }
                    }
                } else {
                    let areafortier1 = $('div#requirement-table').children().last();
                    if (areafortier1.length>0){
                        if (areafortier1[0].localName == 'section') {
                            $("div#requirement-table section:last").after(`${pushToHtml}`);
                        } else {
                            $("div#requirement-table div#areaT1:last").after(`${pushToHtml}`);
                        }
                    }
                }

                pushToHtml ='';
            }
        });

        $('html, body').animate({
            scrollTop: $("div#requirement-table").offset().top + $("div#requirement-table").outerHeight()
        }, 1000);

        sequence();
        startSticky();
        updateAmountTotal();
    });

    $("#add-requirement-free-text").on('click', '#add-requirement-free-text-btn', function(){

        $("#requirement-not-found").hide();

        pushToHtml +=`<div id="areaT1" class="tier-area" data-step="${rowStepNum}">
                    <div class="box-item">
                        <input name="tier_level[]" class="areaLevel" type="hidden" value="1"/>
                        <input name="master_item_id[]" type="hidden" value="0"/>
                        <input name="quantity[]" type="hidden" value="0"/>
                        <input name="amount[]" type="hidden" value="0"/>
                        <input name="is_area[]" type="hidden" value="1"/>
                        <input name="is_quantity[]" type="hidden" value="0"/>
                        <input name="is_amount[]" type="hidden" value="0"/>
                        <input name="remarks[]" type="hidden" value="0"/>
                        <input name="uom[]" type="hidden" value="0"/>
                        <input name="is_modified[]" type="hidden" value="0">
                        <div id="calculator">
                            <div id="calculatorUnit">
                                <input class="margin" name="margins[${marginIndex}][0]" type="hidden" value="0"/>
                                <input class="marginFromSystem" name="margins[${marginIndex}][0][is_from_system]" type="hidden" value="0"/>
                                <input class="marginName" name="margins[${marginIndex}][0][name]" type="hidden" value="0"/>
                                <input class="marginQuantity" name="margins[${marginIndex}][0][quantity]" type="hidden" value="0"/>
                                <input class="marginPrice" name="margins[${marginIndex}][0][price]" type="hidden" value="0"/>
                                <input class="marginPercentage" name="margins[${marginIndex}][0][percentage]" type="hidden" value="0"/>
                                <input class="marginTotal" name="margins[${marginIndex}][0][total]" type="hidden" value="0"/>
                            </div>
                        </div>
                        <div class="row ml-0 mr-0">
                            <div class="col-7 px-1">
                                <div class="margin-tier-area">
                                    <div class="form-group mb-0">
                                        <div class="grow-wrap">
                                            <textarea name="title[]" id="autoresizing" class="form-control input-tier-area" onInput="this.parentNode.dataset.replicatedValue = this.value" rows="1" required></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-3 px-1">
                                <div class="row">
                                    <div class="col-12 pr-1">
                                        <span class="input-group-text font-size-13px pl-0 mt-2 text-uppercase" style="background: transparent;border: 0px;">This is Area section</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-2 px-1 pt-1">
                                <button type="button" class="btn btn-warning btn-sm handle-area"><i class="la la-arrows-alt"></i> Drag</button>
                                <button type="button" name="remove" class="btn btn-danger btn-sm" id="remove-requirement-area"><i class="la la-trash"></i></button>
                            </div>
                        </div>
                    </div>
                </div>`;
                // ++rowStepNum;
                ++marginIndex;

        if($('div#requirement-table section:last div.tier-2-sortable figure:last div.tier-3-sortable article:last').is(':visible') || $('div#requirement-table section:last div.tier-2-sortable figure:last div.tier-3-sortable div#areaT1:last').is(':visible')){
            let areafortier3 = $('div#requirement-table section:last div.tier-2-sortable figure:last div.tier-3-sortable').children().last();
            if (areafortier3.length>0){
                if (areafortier3[0].localName == 'article') {
                    $("div#requirement-table section:last div.tier-2-sortable figure:last div.tier-3-sortable article:last").after(`${pushToHtml}`);
                } else {
                    $("div#requirement-table section:last div.tier-2-sortable figure:last div.tier-3-sortable div#areaT1:last").after(`${pushToHtml}`);
                }
            }
        } else if($('div#requirement-table section:last div.tier-2-sortable figure:last').is(':visible') || $('div#requirement-table section:last div.tier-2-sortable div#areaT1:last').is(':visible')){
            let areafortier2 = $('div#requirement-table section:last div.tier-2-sortable').children().last();
            if (areafortier2.length>0){
                if (areafortier2[0].localName == 'figure') {
                    $("div#requirement-table section:last div.tier-2-sortable figure:last").after(`${pushToHtml}`);
                } else {
                    $("div#requirement-table section:last div.tier-2-sortable div#areaT1:last").after(`${pushToHtml}`);
                }
            }
        } else {
            let areafortier1 = $('div#requirement-table').children().last();
            if (areafortier1.length>0){
                if (areafortier1[0].localName == 'section') {
                    $("div#requirement-table section:last").after(`${pushToHtml}`);
                } else {
                    $("div#requirement-table div#areaT1:last").after(`${pushToHtml}`);
                }
            }
        }

        pushToHtml ='';

        $('html, body').animate({
            scrollTop: $("div#requirement-table").offset().top + $("div#requirement-table").outerHeight()
        }, 1000);

        sequence();
        startSticky();
        updateAmountTotal();
    });

    $(document).ready(function(){
        $('#select-scope-of-work').on('change', function() {

            var scopeOfWork = $(this);

            $(scopeOfWork).prop('disabled', true);
            $("div#sales-item-box div").empty();
            $("img#sales-item-box-img").show();
            $("#item-sales-init").remove();

            let itemSales = '';
            let salesItemRoute = '{{route("ajax.sales.item.show", ":scopeOfWorkId")}}';
            salesItemRoute = salesItemRoute.replace(':scopeOfWorkId', $(scopeOfWork).find(':selected')[0].value);

            $.ajax({
                type:'GET',
                url: salesItemRoute,
                success:function(res){
                    let combine = res.tier_result.reduce((accum, current, index) => {
                        accum.push({
                            id: current.id,
                            title: current.title,
                            sales_item_children: current.sales_item_children,
                        });

                        return accum;
                    }, []);

                    if (combine.length>0) {

                        itemSales += `<ul class="form-check-main mb-0 pl-0">`;

                        combine.map(function (data) {

                            itemSales +=
                                `<li class="form-check">
                                    <input class="form-check-input" type="checkbox" value="${data.id}-0" name="salesItemId" id="checkboxParent">
                                    <label class="form-check-label" for="checkbox">
                                        ${data.title}
                                    </label>`;

                            if (data.sales_item_children.length > 0) {
                                itemSales += `<ul class="form-check pl-0">`;

                                var children = data.sales_item_children;

                                for(child in children){
                                    itemSales +=
                                        `<li class="form-check">
                                            <input class="form-check-input" type="checkbox" value="${data.id}-${children[child].id}" name="salesItemId" id="checkbox">
                                            <label class="form-check-label label-children" for="checkbox">
                                                ${children[child].title}
                                            </label>
                                        </li>`;
                                }

                                itemSales += `</ul>`;
                            }
                            itemSales += `</li>`;
                        });

                        itemSales += `</ul>`;

                    } else {
                        itemSales += `<h5 class="text-center text-uppercase my-4 pt-4 pb-4">Item not found</h5>`;
                    }
                    $("div#sales-item-box div").html(`${itemSales}`);
                    itemSales = '';
                    $(scopeOfWork).prop('disabled', false);
                },
                error: function(xhr, status, error){
                    var err = eval("(" + xhr.responseText + ")");
                    itemSales += `<h5 class="text-center text-uppercase my-4 pt-4 pb-4">Something wrong, please try again.</h5>`;
                    $(scopeOfWork).prop('disabled', false);
                },
            });

            $(document).ajaxComplete(function () {

                $("img#sales-item-box-img").hide();
                $("input[type='checkbox']").change(function () {
                    $(this).siblings('ul')
                        .find("input[type='checkbox']")
                        .prop('checked', this.checked);
                });
                $('input[type=checkbox]').click(function () {
                    let checked = false;
                    $(this).closest('ul.form-check').children('li.form-check').each(function () {
                        if($('input[type=checkbox]', this).is(':checked')) checked=true;
                    })
                    $(this).parents('ul').parent('li').find('input[id=checkboxParent]').prop('checked',checked);
                });
                
                startSticky();
            });

            $(document).on('change', function() {
                var total=$(this).find('input[name="salesItemId"]:checked');
                if(total.length > 0) {
                    $('#add-requirement-btn').removeClass('disabled');
                } else {
                    $('#add-requirement-btn').addClass('disabled');
                }
            });
        });

        $("#add-requirement").on('click', '#add-requirement-btn', function(){

            $("#requirement-not-found").hide();

            var salesItemId = $('input[name=salesItemId]:checked').map(function() {
                return $(this).val();
            }).get();

            let getSalesItemRoute = '{{route("ajax.sales.item.index")}}';
            pushToHtmlFunc(getSalesItemRoute, salesItemId);

            $('input[type=checkbox]').prop('checked', false);
            $('#add-requirement-btn').addClass('disabled');

            $('html, body').animate({
                scrollTop: $("div#requirement-table").offset().top + $("div#requirement-table").outerHeight()
            }, 1000);

            $(document).ajaxComplete(function () {
                sequence();
                setTextAreaHeight();
                startSticky();
                updateAmountTotal();
            });

        });
    });

    // Calculator
    $(document).on('change keypress keyup', 'div#calculatorUnit', function (e) {
        let calculatorUnitQuantity = $(this).find(`#calculatorUnitQuantity`);
        let calculatorUnitCost = $(this).find(`#calculatorUnitCost`);
        let calculatorUnitMargin = $(this).find(`#calculatorUnitMargin`);
        let calculatorUnitTotal = $(this).find(`#calculatorUnitTotal`);
        let calculated = Math.round(parseFloat(removeComma(calculatorUnitCost.val())).toFixed(2) / (1 - Number(checkUnitMarginPercentage(calculatorUnitMargin.val())) / 100))*calculatorUnitQuantity.val();
        calculatorUnitTotal.val(numberSanitize(calculated?calculated:0, true));
        updateAmountTotal();
    });

    $(document).on('change keypress keyup', 'item div#calculator', function (e) {
        calculatorMargin($(this), true);
        updateAmountTotal();
    });
    // End Calculator

    $(document).on('blur', '.item-child-amount', function() {
        var amount = $(this).val().replace(/^\s+|\s+$/g, '');
        if( ($(this).val() != '') && (!amount.match(/^$/) )){
            amount = parseFloat(amount.replace(/,/g, ''));
            $(this).val( Number(parseFloat(amount).toFixed(2)).toLocaleString(undefined,{minimumFractionDigits: 2, maximumFractionDigits: 2}));
        }
        updateAmountTotal();
    });

    $(document).on('blur', '.item-amount', function() {
        var amount = $(this).val().replace(/^\s+|\s+$/g, '');
        if( ($(this).val() != '') && (!amount.match(/^$/) )){
            amount = parseFloat(amount.replace(/,/g, ''));
            $(this).val( Number(parseFloat(amount).toFixed(2)).toLocaleString(undefined,{minimumFractionDigits: 2, maximumFractionDigits: 2}));
        }
        updateAmountTotal();
    });

    $(document).on('blur', '.item-scope-amount', function() {
        var amount = $(this).val().replace(/^\s+|\s+$/g, '');
        if( ($(this).val() != '') && (!amount.match(/^$/) )){
            amount = parseFloat(amount.replace(/,/g, ''));
            $(this).val( Number(parseFloat(amount).toFixed(2)).toLocaleString(undefined,{minimumFractionDigits: 2, maximumFractionDigits: 2}));
        }
        updateAmountTotal();
    });

    $(document).on('change keypress keyup', 'div#requirement-table article .item-quantity', function (e) {
        let total = 0;
        let quantityTotalPrice = $(this.parentElement.parentElement.parentElement).find(`.item-child-amount`);
        let quantitySellingPrice = $(this.parentElement.parentElement.parentElement).find(`.item-child-amount-hidden`);
        total = numberSanitize(this.value)*numberSanitize(quantitySellingPrice[0].value);
        quantityTotalPrice[0].value = numberSanitize(total, true);

        // from qty parent to qty in box
        let quantityCalculator = $(this.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement).find(`.box-item`);
        let quantityCalculatorChild = quantityCalculator.prevObject[0].querySelectorAll(`input.calculatorQuantity`)
        if (quantityCalculatorChild) {
            quantityCalculatorChild[0].value = numberSanitize(this.value);
        }

        calculatorMargin($(this.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement).find(`item div#calculator`));
        updateAmountTotal();

    }).trigger('change keypress keyup');

    $(document).on('change keypress keyup', 'div#requirement-table article', function (e) {

        let dataSalesId = $(this).attr('data-parent');
        let dataStepId = $(this).attr('data-step');
        updateAmountItemChildren(dataSalesId, dataStepId);
        updateAmountTotal();

    }).trigger('change keypress keyup');

    $(document).on('change keypress keyup', 'div#requirement-table figure', function (e) {
        let dataStepId = $(this).attr('data-step');
        updateAmountItem(dataStepId);
        updateAmountTotal();
    }).trigger('change keypress keyup');

    $(document).ajaxComplete(function () {
        sequence();
        setTextAreaHeight();
        startSticky();
        updateAmountTotal();
    });

    $(document).on('click', '#add-margin', function(e){
        let calculator = $(this)[0].parentElement.parentElement.parentElement;
        let nodes = calculator.querySelectorAll('#calculatorUnit');
        let pushToCalculator = '';

        if (nodes.length > 0) {
            let first = nodes[0];
            let last = nodes[nodes.length- 1];
            let marginIndexOne = null;
            let marginIndexTwo = null;
            var matches = last.children[0].name.match(/\[(.*?)\]\[(.*?)\]/);
            if (matches) {
                marginIndexOne = parseInt(matches[1]);
                marginIndexTwo = parseInt(matches[2]) + 1;
            }

            pushToCalculator += `<div class="row" id="calculatorUnit" data-num="${nodes[0].attributes['data-num'].value}" data-id="${nodes[0].attributes['data-id'].value}">
                <input class="margin" name="margins[${marginIndexOne}][${marginIndexTwo}]" type="hidden" value="1">
                <input class="marginFromSystem" name="margins[${marginIndexOne}][${marginIndexTwo}][is_from_system]" type="hidden" value="0">
                <div class="input-group col-3 mb-2">
                    <label class="d-block w-100">
                        Unit Name
                    </label>
                    <input name="margins[${marginIndexOne}][${marginIndexTwo}][name]" class="form-control marginName" value="" type="text">
                </div>
                <div class="input-group col-2 mb-2">
                    <label class="d-block w-100">
                        Qty
                    </label>
                    <input id="calculatorUnitQuantity" name="margins[${marginIndexOne}][${marginIndexTwo}][quantity]" class="form-control marginQuantity decimal" value="1.00"    required>
                </div>
                <div class="input-group col-2 mb-2">
                    <label class="d-block w-100">
                        Unit Cost ($)
                    </label>
                    <input id="calculatorUnitCost" name="margins[${marginIndexOne}][${marginIndexTwo}][price]" class="form-control marginPrice" value="0.00"    required>
                </div>
                <div class="input-group col-2 mb-2">
                    <label class="d-block w-100">
                        Margin (%)
                    </label>
                    <input id="calculatorUnitMargin" name="margins[${marginIndexOne}][${marginIndexTwo}][percentage]" class="form-control marginPercentage decimal" value="0.00"  required>
                </div>
                <div class="input-group col-2 mb-2">
                    <label class="d-block w-100">
                        Unit Selling Price ($)
                    </label>
                    <input id="calculatorUnitTotal" name="margins[${marginIndexOne}][${marginIndexTwo}][total]" class="form-control marginTotal" value="0.00"    readonly>
                </div>
                <div class="col-1 mb-2">
                    <label class="d-block w-100 text-white">.</label>
                    <button type="button" class="btn btn-danger btn-sm w-100 mt-1" id="remove-margin"><i class="la la-trash"></i></button>
                </div>
            </div>`;
            $(last).after(`${pushToCalculator}`);
        } else {
            let articleMargin = $(this).closest('article[data-index]');
            let calculatorLocation = $(this).closest('div#calculator');
            marginIndexOne = articleMargin[0].attributes[7].value;
            marginIndexTwo = 0;
            pushToCalculator += `<div class="row" id="calculatorUnit" data-num="${articleMargin[0].attributes[2].value}" data-id="0">
                <input class="margin" name="margins[${marginIndexOne}][${marginIndexTwo}]" type="hidden" value="1">
                <input class="marginFromSystem" name="margins[${marginIndexOne}][${marginIndexTwo}][is_from_system]" type="hidden" value="0">
                <div class="input-group col-3 mb-2">
                    <label class="d-block w-100">
                        Unit Name
                    </label>
                    <input name="margins[${marginIndexOne}][${marginIndexTwo}][name]" class="form-control marginName" value="" type="text">
                </div>
                <div class="input-group col-2 mb-2">
                    <label class="d-block w-100">
                        Qty
                    </label>
                    <input id="calculatorUnitQuantity" name="margins[${marginIndexOne}][${marginIndexTwo}][quantity]" class="form-control marginQuantity decimal" value="1.00"    required>
                </div>
                <div class="input-group col-2 mb-2">
                    <label class="d-block w-100">
                        Unit Cost ($)
                    </label>
                    <input id="calculatorUnitCost" name="margins[${marginIndexOne}][${marginIndexTwo}][price]" class="form-control marginPrice" value="0.00"    required>
                </div>
                <div class="input-group col-2 mb-2">
                    <label class="d-block w-100">
                        Margin (%)
                    </label>
                    <input id="calculatorUnitMargin" name="margins[${marginIndexOne}][${marginIndexTwo}][percentage]" class="form-control marginPercentage decimal" value="0.00"  required>
                </div>
                <div class="input-group col-2 mb-2">
                    <label class="d-block w-100">
                        Unit Selling Price ($)
                    </label>
                    <input id="calculatorUnitTotal" name="margins[${marginIndexOne}][${marginIndexTwo}][total]" class="form-control marginTotal" value="0.00"    readonly>
                </div>
                <div class="col-1 mb-2">
                    <label class="d-block w-100 text-white">.</label>
                    <button type="button" class="btn btn-danger btn-sm w-100 mt-1" id="remove-margin"><i class="la la-trash"></i></button>
                </div>
            </div>`;
            $(calculatorLocation).prepend(`${pushToCalculator}`);
        }

        startSticky();
        updateAmountTotal();
    });

    $(document).on('click', '#remove-margin', function(){
        var r = confirm("Are you sure to remove the margin of item?");
        if (r == true) {
            checkTier3Delete($(this).closest('article')[0].parentElement);
            let dataSalesId = $(this).closest('article')[0].dataset.parent;
            let dataStepId = $(this).closest('article')[0].dataset.step;
            let calculator =  $(this)[0].parentElement.parentElement.parentElement;
            let calculatorTotal =  calculator.querySelectorAll(`#calculatorTotal`)[0];
            remove = $(this).closest('div#calculatorUnit').remove();

            if (remove){
                let calculatorQuantity = calculatorTotal.querySelectorAll(`.calculatorQuantity`);
                let calculatorQuantityTotal = calculatorTotal.querySelectorAll(`.calculatorQuantityTotal`);
                let calculatorQuantityTotalTemp = calculatorTotal.querySelectorAll(`.calculatorQuantityTotalTemp`);
                let calculatorQuantityTotalPrice = calculatorTotal.querySelectorAll(`.calculatorQuantityTotalPrice`);

                let sumCost = 0;
                let sumSelling = 0;
                let totalCost = 0;
                let totalSelling = 0;
                let calculatorUnitQuantity = null;
                let calculatorUnitCost = null;
                let calculatorUnitMargin = null;
                let calculatorUnitTotal = null;

                $(calculator.children).each(function( index ) {
                    let elem = $(this);
                    if (elem.attr("id") == 'calculatorUnit') {
                        calculatorUnitQuantity = elem.find(`#calculatorUnitQuantity`);
                        calculatorUnitCost = elem.find(`#calculatorUnitCost`);
                        calculatorUnitMargin = elem.find(`#calculatorUnitMargin`);
                        calculatorUnitTotal = elem.find(`#calculatorUnitTotal`);

                        // Cost
                        sumCost = calculatorUnitQuantity.val()* parseFloat(removeComma(calculatorUnitCost.val())).toFixed(2);
                        totalCost += sumCost;

                        // Selling
                        sumSelling = Math.round(parseFloat(removeComma(calculatorUnitCost.val())).toFixed(2) / (1 - Number(checkUnitMarginPercentage(calculatorUnitMargin.val())) / 100))*calculatorUnitQuantity.val();

                        totalSelling += sumSelling;
                    }
                    
                });

                calculatorQuantityTotal[0].value = numberSanitize(calculatorQuantity[0].value * (totalCost?totalCost:0), true);
                calculatorQuantityTotalPrice[0].value = numberSanitize(calculatorQuantity[0].value * (totalSelling?totalSelling:0), true);

                let calculatorQuantityParent = calculatorQuantity[0].parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.querySelectorAll(`.item-quantity`);
                let calculatorAmountParent = calculatorQuantity[0].parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.querySelectorAll(`.item-child-amount`);
                let calculatorAmountParentHidden = calculatorQuantity[0].parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.querySelectorAll(`.item-child-amount-hidden`);

                calculatorQuantityParent[0].value = calculatorQuantity[0].value;
                calculatorAmountParent[0].value = numberSanitize((calculatorQuantity[0].value * (totalSelling?totalSelling:0)), true);
                calculatorAmountParentHidden[0].value = numberSanitize((totalSelling?totalSelling:0), true);

                updateAmountItemChildren(dataSalesId, dataStepId);
                updateAmountItem(dataStepId);
                updateMarginIndex();
                startSticky();
            }
        }
        updateAmountTotal();
        startSticky();
    });
</script>

<script>
    function startSticky() {
        let sticky = new Sticky('.sticky-selector');
    }

    function mapItemMargin(margins, rowRT3Idx, sales_item_children_id, marginIndex, parentQty, fromDuplicate = false, fromTemplate = false) {
        let total = 0;
        let getTotalSum = 0;
        let getTotalSumWithMargin = 0;
        let marginChillIndex = 0;

        margins.map(function (data) {
            getTotalSumWithMargin += Math.round(parseFloat(data.price).toFixed(2) / (1 - Number(data.margin_percentage) / 100)) * data.quantity;
            getTotalSum += data.price*data.quantity;
        });

        let data = margins.map(function (data) {
            total = Math.round(parseFloat(data.price).toFixed(2) / (1 - Number(data.margin_percentage) / 100)) * data.quantity;
            ++marginChillIndex;
            return `
            <div class="row" id="calculatorUnit" data-num="${rowRT3Idx}" data-id="${data.id}">
                <input class="margin" name="margins[${marginIndex}][${marginChillIndex-1}]" type="hidden" value="1"/>
                <input class="marginFromSystem" name="margins[${marginIndex}][${marginChillIndex-1}][is_from_system]" type="hidden" value="${data.is_from_system}"/>
                <div class="input-group col-3 mb-2">
                    <label class="d-block w-100">
                        Unit Name
                    </label>
                    <input name="margins[${marginIndex}][${marginChillIndex-1}][name]" class="form-control marginName" value="${data.name}" type="text" readonly/>
                </div>
                <div class="input-group col-2 mb-2">
                    <label class="d-block w-100">
                        Qty
                    </label>
                    <input id="calculatorUnitQuantity" name="margins[${marginIndex}][${marginChillIndex-1}][quantity]" class="form-control marginQuantity decimal" value="${numberSanitize(data.quantity)}" />
                </div>
                <div class="input-group col-2 mb-2">
                    <label class="d-block w-100">
                        Unit Cost ($)
                    </label>
                    <input id="calculatorUnitCost" name="margins[${marginIndex}][${marginChillIndex-1}][price]" class="form-control marginPrice" value="${numberSanitize(data.price, true)}" />
                </div>
                <div class="input-group col-2 mb-2">
                    <label class="d-block w-100">
                        Margin (%)
                    </label>
                    <input id="calculatorUnitMargin" name="margins[${marginIndex}][${marginChillIndex-1}][percentage]" type="text" required="required" class="form-control marginPercentage decimal" value="${numberSanitize(checkUnitMarginPercentage(data.margin_percentage))}" />
                </div>
                <div class="input-group col-2 mb-2">
                    <label class="d-block w-100">
                        Unit Selling Price ($)
                    </label>
                    <input id="calculatorUnitTotal" name="margins[${marginIndex}][${marginChillIndex-1}][total]" class="form-control marginTotal" value="${numberSanitize(total, true)}"    readonly/>
                </div>
                <div class="col-1 mb-2">
                    <label class="d-block w-100 text-white">.</label>
                    <button type="button" class="btn btn-danger btn-sm w-100 mt-1" id="remove-margin" ${data.is_from_system ? 'title="Can not delete a margin from system" disabled' : ''}><i class="la la-trash"></i></button>
                </div>
            </div>
            `;
        }).join(" ");

        let noData = `<div class="row" id="calculatorUnit" data-num="${rowRT3Idx}" data-id="${0}">
                <input class="margin" name="margins[${marginIndex}][0]" type="hidden" value="1"/>
                <input class="marginFromSystem" name="margins[${marginIndex}][0][is_from_system]" type="hidden" value="${0}"/>
                <div class="input-group col-3 mb-2">
                    <label class="d-block w-100">
                        Unit Name
                    </label>
                    <input name="margins[${marginIndex}][0][name]" class="form-control marginName" value="" type="text"/>
                </div>
                <div class="input-group col-2 mb-2">
                    <label class="d-block w-100">
                        Qty
                    </label>
                    <input id="calculatorUnitQuantity" name="margins[${marginIndex}][0][quantity]" class="form-control marginQuantity decimal" value="1.00"/>
                </div>
                <div class="input-group col-2 mb-2">
                    <label class="d-block w-100">
                        Unit Cost ($)
                    </label>
                    <input id="calculatorUnitCost" name="margins[${marginIndex}][0][price]" class="form-control marginPrice" value="0.00" />
                </div>
                <div class="input-group col-2 mb-2">
                    <label class="d-block w-100">
                        Margin (%)
                    </label>
                    <input id="calculatorUnitMargin" name="margins[${marginIndex}][0][percentage]" class="form-control marginPercentage decimal" value="0.00"  required/>
                </div>
                <div class="input-group col-2 mb-2">
                    <label class="d-block w-100">
                        Unit Selling Price ($)
                    </label>
                    <input id="calculatorUnitTotal" name="margins[${marginIndex}][0][total]" class="form-control marginTotal" value="0.00" readonly/>
                </div>
                <div class="col-1 mb-2">
                    <label class="d-block w-100 text-white">.</label>
                    <button type="button" class="btn btn-danger btn-sm w-100 mt-1" id="remove-margin" title="first item can not deleted" disabled><i class="la la-trash"></i></button>
                </div>
            </div>`;

        let pushToHtml =
            `<div class="div" id="calculator">
                ${data ? data : noData}
                <hr/>
                <div class="row" id="calculatorTotal">
                    <div class="input-group col-3">
                        <label class="d-block w-100">
                            Quantity
                        </label>
                        <input id="calculatorQuantity-${rowRT3Idx}-${sales_item_children_id}" class="form-control calculatorQuantity decimal" value="${parentQty ? numberSanitize(parentQty) : 0}" />
                    </div>
                    <div class="input-group col-3">
                        <label class="d-block w-100">
                            Total Cost
                        </label>
                        <input  type="hidden" value="${parseFloat(getTotalSum).toFixed(2)}" class="calculatorQuantityTotalTemp" id="calculatorQuantitySelling-${rowRT3Idx}-${sales_item_children_id}"/>
                        <input  class="form-control calculatorQuantityTotal" value="${numberSanitize(getTotalSum*parentQty, true)}" id="calculatorQuantityTotal-${rowRT3Idx}-${sales_item_children_id}" type="text" readonly/>
                    </div>
                    <div class="input-group col-4">
                        <label class="d-block w-100">
                            Total (S.P)
                        </label>
                        <input  type="hidden" value="${parseFloat(getTotalSumWithMargin).toFixed(2)}" class="calculatorQuantitySellingPriceTemp" id="calculatorQuantitySellingPrice-${rowRT3Idx}-${sales_item_children_id}"/>
                        <input  class="form-control calculatorQuantityTotalPrice" value="${numberSanitize(getTotalSumWithMargin*parentQty, true)}" id="calculatorQuantityTotalPrice-${rowRT3Idx}-${sales_item_children_id}" type="text" readonly/>
                    </div>
                    <div class="col-2 pt-4">
                        <label class="d-block w-100 text-white"></label>
                        <button type="button" id="add-margin" class="btn btn-info btn-sm w-100 mt-1"><i class="la la-plus"></i> Add Material</button>
                    </div>
                </div>
            </div>`;

        return pushToHtml;
    }

    function mapUomFunc(uoms, selected=false) {
        let oumssss = uoms.map(function(val, index){
            return `<option value="${val.name}" ${selected == val.name ? 'selected' : ''}>${val.name}</option>`;
        }).join(" ");

        return `<select class="form-control" name="uom[]">
                    <option value="">None</option>
                    ${oumssss}
                </select>`;
    }

    function pushToHtmlFunc(getSalesItemRoute, salesItemId) {
        let pushToHtml = '';
        $.ajax({
            url: getSalesItemRoute,
            type: 'GET',
            data: { ids: salesItemId},
                success:function(res){
                    let total = null;
                    let rowRT2IdxTemp = 0;
                    let switchTier = true;
                    let Tier1OnlyOne = false;
                    let iLoop = 0;

                    res.map(function (data) {
                        if (data.tier_level == 1) {
                            pushToHtml +=`<section id="R-T1" data-num="${rowRT1Idx}" data-step="${rowStepNum}" data-paret="0" data-index="${marginIndex}" class="parent-1">`;
                            pushToHtml +=
                            `<div class="box-item">
                                <input name="tier_level[]" type="hidden" value="1"/>
                                <input name="master_item_id[]" type="hidden" value="0"/>
                                <input name="quantity[]" type="hidden" value="0"/>
                                <input name="is_area[]" type="hidden" value="0"/>
                                <input name="is_quantity[]" type="hidden" value="0"/>
                                <input name="is_amount[]" type="hidden" value="1"/>
                                <input name="remarks[]" type="hidden" value="0"/>
                                <input name="uom[]" type="hidden" value="0"/>
                                <input name="is_modified[]" type="hidden" value="0"/>
                                <div id="calculator">
                                    <div id="calculatorUnit">
                                        <input class="margin" name="margins[${marginIndex}][0]" type="hidden" value="0"/>
                                        <input class="marginFromSystem" name="margins[${marginIndex}][0][is_from_system]" type="hidden" value="0"/>
                                        <input class="marginName" name="margins[${marginIndex}][0][name]" type="hidden" value="0"/>
                                        <input class="marginQuantity" name="margins[${marginIndex}][0][quantity]" type="hidden" value="0"/>
                                        <input class="marginPrice" name="margins[${marginIndex}][0][price]" type="hidden" value="0"/>
                                        <input class="marginPercentage" name="margins[${marginIndex}][0][percentage]" type="hidden" value="0"/>
                                        <input class="marginTotal" name="margins[${marginIndex}][0][total]" type="hidden" value="0"/>
                                    </div>
                                </div>
                                <div class="row ml-0 mr-0">
                                    <div class="col-7 px-1">
                                        <div class="margin-tier-1">
                                            <div class="form-group mb-0">
                                                <div class="grow-wrap">
                                                    <textarea name="title[]" id="autoresizing" class="form-control input-tier-1" onInput="return setTextAreaHeightAuto(this.parentNode, this.value)" rows="1" data-onload="setTextAreaHeightAuto(this.parentNode, this.value)" required>${data.title}</textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-3 px-1">
                                        <div class="row">
                                            <div class="col-5 pr-1">

                                            </div>
                                            <div class="col-7 pl-1">
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text font-size-13px pl-0" style="background: transparent;border: 0px;">Amount ($)</span>
                                                    </div>
                                                    <input name="amount[]" class="form-control item-scope-amount text-right" value="${numberSanitize(data.amount, true)}"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-2 px-1 pt-1">
                                        <button type="button" class="btn btn-warning btn-sm handle-1" ><i class="la la-arrows-alt"></i> Drag</button>
                                        <button type="button" name="remove" class="btn btn-danger btn-sm" id="remove-requirement-tier-1"><i class="la la-trash"></i></button>
                                    </div>
                                </div>
                            </div>`;
                            pushToHtml +=`<div class="tier-2-sortable tier-area-sortable" data-num="${rowRT1Idx}" data-step="${rowStepNum}">`;
                            pushToHtml += `<figure id="R-T2" class="R-T2"></figure>`;

                            ++rowRT1Idx;
                            ++initTier1Manual;
                        }

                        if (data.tier_level == 2) {
                            if (rowRT2IdxTemp > 0) {
                                pushToHtml += `</div>`;
                                pushToHtml += `</figure>`;
                                rowRT2IdxTemp = 0;
                            }
                        }

                        if (data.tier_level == 2) {
                            pushToHtml += `<figure id="R-T2" data-num="${rowRT2Idx}" data-step="${rowStepNum}" data-index="${marginIndex}">`;
                            pushToHtml +=
                                `<div class="box-item">
                                    <input name="tier_level[]" type="hidden" value="2"/>
                                    <input name="master_item_id[]" type="hidden" value="0"/>
                                    <input name="is_area[]" type="hidden" value="0"/>
                                    <input name="quantity[]" type="hidden" value="0"/>
                                    <input name="is_amount[]" type="hidden" value=" ${data.is_amount ? 1 : 0}"/>
                                    <input name="is_quantity[]" type="hidden" value=" ${data.is_quantity ? 1 : 0}"/>
                                    <input name="uom[]" type="hidden" value="0"/>
                                    <div id="calculator">
                                        <div id="calculatorUnit">
                                            <input class="margin" name="margins[${marginIndex}][0]" type="hidden" value="0"/>
                                            <input class="marginFromSystem" name="margins[${marginIndex}][0][is_from_system]" type="hidden" value="0"/>
                                            <input class="marginName" name="margins[${marginIndex}][0][name]" type="hidden" value="0"/>
                                            <input class="marginQuantity" name="margins[${marginIndex}][0][quantity]" type="hidden" value="0"/>
                                            <input class="marginPrice" name="margins[${marginIndex}][0][price]" type="hidden" value="0"/>
                                            <input class="marginPercentage" name="margins[${marginIndex}][0][percentage]" type="hidden" value="0"/>
                                            <input class="marginTotal" name="margins[${marginIndex}][0][total]" type="hidden" value="0"/>
                                        </div>
                                    </div>

                                    <div class="row ml-0 mr-0">
                                        <div class="col-7 px-1">
                                            <div class="margin-tier-2">
                                                <div class="form-group mb-0">
                                                    <div class="grow-wrap">
                                                        <textarea name="title[]" id="autoresizing" class="form-control input-tier-2" onInput="return setTextAreaHeightAuto(this.parentNode, this.value)" data-onload="setTextAreaHeightAuto(this.parentNode, this.value)" rows="1"  required>${data.title}</textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-3 px-1">
                                            <div class="row">
                                                <div class="col-5 pr-1">
                                                </div>
                                                <div class="col-7 pl-1">
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text font-size-13px pl-0" style="background: transparent;border: 0px;">Amount ($)</span>
                                                        </div>
                                                        <input name="amount[]" class="form-control item-amount text-right" value="${numberSanitize(data.amount, true)}"/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-2 px-1 pt-1">
                                            <button type="button" class="btn btn-warning btn-sm handle-2" ><i class="la la-arrows-alt"></i> Drag</button>
                                            <button type="button" name="remove" class="btn btn-danger btn-sm" id="remove-requirement-tier-2"><i class="la la-trash"></i></button>
                                            <button type="button" name="clone" class="btn btn-info btn-sm" id="clone-requirement-tier-2"><i class="la la-copy"></i></button>
                                            <button type="button" data-toggle="collapse" data-target="#collapseRemark3-${rowRT2Idx}-${data.sales_item_id}" class="btn btn-dark btn-sm collapseTier">
                                                <i class="la la-la la-quote-left"></i>
                                            </button>
                                            <div class="btn btn-dark btn-checkbox">
                                                <input class="is_modified" name="is_modified[]" type="hidden" value="0">
                                                <input class="checkbox" type="checkbox" value="0">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="collapse" id="collapseRemark3-${rowRT2Idx}-${data.sales_item_id}">
                                        <div class="card card-body my-1 mt-2 py-3 px-3 item-tier-2-attemp">
                                            <label class="d-block w-100">Add Remark:</label>
                                            <div class="grow-wrap">
                                                <textarea name="remarks[]" id="autoresizing" class="form-control input-tier-3" onInput="return setTextAreaHeightAuto(this.parentNode, this.value, '#collapseRemark3-${rowRT2Idx}-${data.sales_item_id}')" data-onload="setTextAreaHeightAuto(this.parentNode, this.value, '#collapseRemark3-${rowRT2Idx}-${data.sales_item_id}')" rows="1"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>`;

                            pushToHtml += `<div class="tier-3-sortable tier-area-sortable ${data.childrenCount == 0 ? 'increase-height-tier-2' : ''}" data-num="${rowRT2Idx}" data-step="${rowStepNum}">`;
                            pushToHtml += `<article id="R-T3" class="R-T3"></article>`;
                            ++rowRT2Idx;

                            if (data.childrenCount == 0) {
                                pushToHtml += `</div>`;
                                pushToHtml += `</figure>`;
                            }
                        }

                        if (data.tier_level == 3) {
                            switchTier = false;
                            total = Math.round(parseFloat(data.price).toFixed / (1 - Number(data.margin_percentage) / 100));
                            pushToHtml +=
                            `<article id="R-T3" class="R-T3" data-num="${rowRT3Idx}" data-parent="${rowRT2Idx-1}" data-step="${rowStepNum}" data-id="${data.sales_item_children_id}"  data-sales-item-id="${data.sales_item_id}" data-index="${marginIndex}">
                                <div class="box-item">
                                    <input name="tier_level[]" type="hidden" value="3"/>
                                    <input name="master_item_id[]" type="hidden" value="${data.master_item_id ? data.master_item_id : 0}"/>
                                    <input name="is_area[]" type="hidden" value="0"/>
                                    <input name="is_amount[]" type="hidden" value=" ${data.is_amount ? 1 : 0}"/>
                                    <input name="is_quantity[]" type="hidden" value=" ${data.is_quantity ? 1 : 0}"/>
                                    <input name="is_modified[]" type="hidden" value="0"/>
                                    <div class="row ml-0 mr-0">
                                        <div class="col-7 px-1">
                                            <div class="row">
                                                <div class="col-8 pr-1">
                                                    <div class="margin-tier-3">
                                                        <div class="form-group mb-0">
                                                            <div class="grow-wrap">
                                                                <textarea name="title[]" id="autoresizing" class="form-control input-tier-3" onInput="return setTextAreaHeightAuto(this.parentNode, this.value)" rows="1" data-onload="setTextAreaHeightAuto(this.parentNode, this.value)" required>${data.title}</textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-1 pl-0">
                                                    <button type="button" data-toggle="collapse" data-target="#collapseT3-${rowRT3Idx}-${data.sales_item_children_id}" class="btn btn-dark btn-sm mt-1 collapseTier">
                                                        <i class="la la-la la-calculator"></i>
                                                    </button>
                                                </div>
                                                <div class="col-3 pl-0">
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text font-size-13px" style="background: transparent;border: 0px;">UOM</span>
                                                        </div>
                                                        ${mapUomFunc(uoms, data.uom)}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-3 px-1">
                                            <div class="row" id="item-list-price" data-id="${data.sales_item_children_id}">
                                                <div class="col-5 pr-1">
                                                    ${data.quantity != null || data.quantity !=0  ? `<div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text font-size-13px pl-0" style="background: transparent;border: 0px;">QTY</span>
                                                        </div>
                                                        <input id="quantity-${rowRT3Idx}-${data.sales_item_children_id}" name="quantity[]" class="form-control text-right item-quantity decimal" value="${numberSanitize(data.quantity)}" data-num="${rowRT3Idx}" data-id="${data.sales_item_children_id}"  required ${data.is_quantity ? '' : 'readonly'}/>
                                                    </div>` : `<input type="hidden" name="quantity[]"  value="0">`}
                                                </div>
                                                <div class="col-7 pl-1">
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text font-size-13px pl-0" style="background: transparent;border: 0px;">Amount ($)</span>
                                                        </div>
                                                        <input name="amount[]" id="quantityTotalPrice-${rowRT3Idx}-${data.sales_item_children_id}" class="form-control item-child-amount text-right" value="${numberSanitize(numberSanitize(data.amount)*data.quantity, true)}" ${data.is_amount ? '' : 'readonly'}/>
                                                        <input type="hidden" class="form-control item-child-amount-hidden" value="${numberSanitize(data.amount)}" id="quantitySellingPrice-${rowRT3Idx}-${data.sales_item_children_id}" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-2 px-1 pt-1">
                                            <button type="button" class="btn btn-warning btn-sm handle-3"><i class="la la-arrows-alt"></i> Drag</button>
                                            <button type="button" name="remove" class="btn btn-danger btn-sm" id="remove-requirement-tier-3"><i class="la la-trash"></i></button>
                                            <button type="button" name="clone" class="btn btn-info btn-sm" id="clone-requirement-tier-3"><i class="la la-copy"></i></button>
                                            <button type="button" data-toggle="collapse" data-target="#collapseRemark3-${rowRT3Idx}-${data.sales_item_children_id}" class="btn btn-dark btn-sm collapseTier">
                                                <i class="la la-la la-quote-left"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <item data-num="${rowRT3Idx}" data-id="${data.sales_item_children_id}">
                                        <div class="collapse" id="collapseT3-${rowRT3Idx}-${data.sales_item_children_id}">
                                            <div class="card card-body my-1 mt-2 py-3 px-3 item-tier-3-attemp">
                                                ${mapItemMargin(data.margin, rowRT3Idx, data.sales_item_children_id, marginIndex, data.quantity)}
                                            </div>
                                        </div>
                                        <div class="collapse" id="collapseRemark3-${rowRT3Idx}-${data.sales_item_children_id}">
                                            <div class="card card-body my-1 mt-2 py-3 px-3 item-tier-3-attemp">
                                                <label class="d-block w-100">Add Remark:</label>
                                                <div class="grow-wrap">
                                                    <textarea name="remarks[]" id="autoresizing" class="form-control input-tier-3 remarks" onInput="return setTextAreaHeightAuto(this.parentNode, this.value, '#collapseRemark3-${rowRT3Idx}-${data.sales_item_children_id}')" data-onload="setTextAreaHeightAuto(this.parentNode, this.value, '#collapseRemark3-${rowRT3Idx}-${data.sales_item_children_id}')" rows="1"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </item>
                                </div>
                            </article>`;

                            ++rowRT3Idx;
                            ++rowRT2IdxTemp;
                        }

                        if (res.length - 1 === iLoop) {
                            pushToHtml += `</div>`;
                            pushToHtml += `</section>`;
                        }
                        ++iLoop;
                        ++marginIndex;

                    });

                    $("div#requirement-table section:last").after(`${pushToHtml}`);
                    ++rowStepNum;
                    pushToHtml = '';
                }
        });

    }

    function sequence(){
        var tier1Sortable = [].slice.call(document.querySelectorAll('.tier-1-sortable'));
        var tier2Sortable = [].slice.call(document.querySelectorAll('.tier-2-sortable'));
        var tier3Sortable = [].slice.call(document.querySelectorAll('.tier-3-sortable'));
        var tierAreaSortable = [].slice.call(document.querySelectorAll('.tier-area-sortable'));

        for (var i = 0; i < tier1Sortable.length; i++) {
            new Sortable(tier1Sortable[i], {
                group: 'tier-1',
                handle: '.handle-1',
                animation: 0,
                ghostClass: 'sequence-hover',
                fallbackOnBody: false,
                removeCloneOnHide: true,
                forceFallback: false,
                delay: 0,
                delayOnTouchOnly: false,
                touchStartThreshold: 0,
                //swapThreshold: 0.65,
                scroll: true,
                forceAutoscrollFallback: false,
                scrollSensitivity: 30,
                scrollSpeed: 10,
                bubbleScroll: true,
                scrollFn: function (offset) {
                    return false;
                },
                onEnd: function (evt) {
                    updateMarginIndex();
                }
            });
        }
        for (var i = 0; i < tier2Sortable.length; i++) {
            new Sortable(tier2Sortable[i], {
                group: 'tier-2',
                handle: '.handle-2',
                animation: 0,
                ghostClass: 'sequence-hover',
                fallbackOnBody: false,
                removeCloneOnHide: true,
                forceFallback: false,
                delay: 0,
                delayOnTouchOnly: false,
                touchStartThreshold: 0,
                //swapThreshold: 0.65,
                scroll: true,
                forceAutoscrollFallback: false,
                scrollSensitivity: 30,
                scrollSpeed: 10,
                bubbleScroll: true,
                scrollFn: function (offset) {
                    return false;
                },
                onEnd: function (evt) {
                    evt.item.setAttribute("data-step", evt.to.dataset.step);
                    evt.item.childNodes[1].setAttribute("data-step", evt.to.dataset.step);
                    evt.item.childNodes[1].querySelectorAll(`article[data-step="${evt.from.dataset.step}"]`).forEach((function(x){ x.setAttribute("data-step",evt.to.dataset.step);}))

                    updateAmountItem(evt.to.dataset.step);
                    updateAmountItem(evt.from.dataset.step);
                    checkTier2(evt);
                    updateMarginIndex();

                }
            });
        }
        for (var i = 0; i < tier3Sortable.length; i++) {
            new Sortable(tier3Sortable[i], {
                group: 'tier-3',
                handle: '.handle-3',
                animation: 0,
                ghostClass: 'sequence-hover',
                fallbackOnBody: false,
                removeCloneOnHide: true,
                forceFallback: false,
                delay: 0,
                delayOnTouchOnly: false,
                touchStartThreshold: 0,
                //swapThreshold: 0.65,
                scroll: true,
                forceAutoscrollFallback: false,
                scrollSensitivity: 30,
                scrollSpeed: 10,
                bubbleScroll: true,
                scrollFn: function (offset) {
                    return false;
                },
                onEnd: function (evt) {
                    evt.item.setAttribute("data-parent", evt.to.dataset.num);
                    evt.item.setAttribute("data-step", evt.to.dataset.step);
                    updateAmountItemChildren(evt.to.dataset.num, evt.to.dataset.step);
                    updateAmountItemChildren(evt.from.dataset.num, evt.from.dataset.step);
                    updateAmountItem(evt.to.dataset.step);
                    updateAmountItem(evt.from.dataset.step);
                    checkTier3(evt.to.parentElement.children[1], evt.from, evt.from.parentElement.children[1]);
                    updateMarginIndex();
                },
            });
        }
        for (var i = 0; i < tierAreaSortable.length; i++) {
            new Sortable(tierAreaSortable[i], {
                group: 'tier-area',
                handle: '.handle-area',
                animation: 0,
                ghostClass: 'sequence-hover',
                fallbackOnBody: false,
                removeCloneOnHide: true,
                forceFallback: false,
                delay: 0,
                delayOnTouchOnly: false,
                touchStartThreshold: 0,
                // swapThreshold: 0.65,
                scroll: true,
                forceAutoscrollFallback: false,
                scrollSensitivity: 30,
                scrollSpeed: 10,
                bubbleScroll: true,
                scrollFn: function (offset) {
                    return false;
                },
                onEnd: function (evt) {
                    let areaLevel = evt.item.children[0].querySelectorAll(`input.areaLevel`)[0];

                    if (evt.to.className == "tier-2-sortable tier-area-sortable" || evt.to.className == "tier-2-sortable tier-area-sortable ") {
                        evt.item.id = "areaT2";
                        areaLevel.setAttribute('value', 2);
                    } else if (evt.to.className == "tier-3-sortable tier-area-sortable " || evt.to.className == "tier-3-sortable tier-area-sortable") {
                        evt.item.id = "areaT3";
                        areaLevel.setAttribute('value', 3);
                    } else {
                        evt.item.id = "areaT1";
                        areaLevel.setAttribute('value', 1);
                    }

                    updateMarginIndex();
                }
            });
        }
    }

    function updateAmountItemChildren(dataSalesId, dataStepId){
        let totalItemChild = 0;
        let itemChildAmount = document.querySelectorAll(`article[data-parent="${dataSalesId}"][data-step="${dataStepId}"] .item-child-amount`);

        for (let ic = 0; ic < itemChildAmount.length; ic++) {
            totalItemChild += parseFloat(itemChildAmount[ic].value.replace(/,/g, '') ? (isNaN(itemChildAmount[ic].value.replace(/,/g, '')) ? 0 : itemChildAmount[ic].value.replace(/,/g, '')) : 0);
        }

        let passToItemAmount = document.querySelectorAll(`figure[data-num="${dataSalesId}"][data-step="${dataStepId}"] .item-amount`);

        passToItemAmount[0].value= Number(parseFloat(totalItemChild).toFixed(2)).toLocaleString(undefined,{minimumFractionDigits: 2, maximumFractionDigits: 2});
    }

    function updateAmountItem(dataStepId) {
        let totalItem = 0;

        let itemAmount = document.querySelectorAll(`figure[data-step="${dataStepId}"] .box-item .item-amount`);
        for (let i = 0; i < itemAmount.length; i++) {
            totalItem += parseFloat(itemAmount[i].value.replace(/,/g, '') ? (isNaN(itemAmount[i].value.replace(/,/g, '')) ? 0 : itemAmount[i].value.replace(/,/g, '')) : 0);
        }
        let passToItemScopeAmount = document.querySelectorAll(`section[data-step="${dataStepId}"] .box-item .item-scope-amount`);
        passToItemScopeAmount[0].value= Number(parseFloat(totalItem).toFixed(2)).toLocaleString(undefined,{minimumFractionDigits: 2, maximumFractionDigits: 2});
    }

    function updateAmountTotal() {
        let totalItem = 0;
        let itemAmount = document.querySelectorAll(`div#requirement-table section .box-item .item-scope-amount`);

        for (let i = 0; i < itemAmount.length; i++) {
            totalItem += parseFloat(itemAmount[i].value.replace(/,/g, '') ? (isNaN(itemAmount[i].value.replace(/,/g, '')) ? 0 : itemAmount[i].value.replace(/,/g, '')) : 0);
        }

        let passToItemScopeAmount = document.querySelectorAll(`div#R-TOTAL .amount-total`);
        passToItemScopeAmount[0].value= Number(parseFloat(totalItem).toFixed(2)).toLocaleString(undefined,{minimumFractionDigits: 2, maximumFractionDigits: 2});
    }

    function setTextAreaHeightAuto(parent, item, target=false) {
        var element = parent.getElementsByTagName("textarea");
        if (element[0].attributes.style !== undefined) {
            element[0].removeAttribute("style");
        }

        if (target) {
            let button = document.querySelectorAll(`button[data-target="${target}"]`);
            if (element[0].value === null || element[0].value.match(/^ *$/) !== null) {
                button[0].removeAttribute("class", "btn-success");
                button[0].setAttribute("class", "btn btn-sm btn-dark");
            } else {
                button[0].removeAttribute("class", "btn-success");
                button[0].setAttribute("class", "btn btn-sm btn-success");
            }
        }

        return parent.dataset.replicatedValue = item;
    }

    function setTextAreaHeight(){
        (function(){
            $('[data-onload]').each(function(e){
                eval($(this).data('onload'));
            });
        })();
    }

    function checkTierDefault() {

        let itemDataTier1 = document.querySelectorAll(`section#R-T1 div.tier-2-sortable`);
        let itemDataTier2 = document.querySelectorAll(`figure#R-T2 div.tier-3-sortable`);
        let item1;
        let item2;

        $(itemDataTier1).each(function (index) {
            item1 = $(this)[0].childNodes;
            if (item1.length > 1) {
                if ($(this)[0].classList.contains("increase-height-tier-1")) {
                    $(this)[0].classList.remove("increase-height-tier-1");
                }
            }
        });

        $(itemDataTier2).each(function (index) {
            item2 = $(this)[0].childNodes;
            if (item2.length > 1) {
                if ($(this)[0].classList.contains("increase-height-tier-2")) {
                    $(this)[0].classList.remove("increase-height-tier-2");
                }
            }
        });
    }

    function checkTier2To(data) {
        let itemData = data.to.parentElement.children[1].querySelectorAll(`figure#R-T2`);
        if (itemData.length > 1) {
            let el = data.to.parentElement.children[1];
            if (el.classList.contains("increase-height-tier-1")) {
                el.classList.remove("increase-height-tier-1");
            }
        }

    }

    function checkTier2From(data) {
        let item = data.from.querySelectorAll(`figure#R-T2`);
        if (item.length == 1) {
            let itemData = data.from.parentElement.children[1].querySelectorAll(`figure#R-T2`);
            if (itemData.length == 1) {
                data.from.parentElement.children[1].className += " increase-height-tier-1";
            }
        }

    }

    function checkTier2Delete(from) {
        let item = from.querySelectorAll(`figure#R-T2`);
        if (item.length == 1) {
            from.classList.add("increase-height-tier-1");
        }
    }

    function checkTier2Manual(data) {
        let itemData = data.parentElement.children[1].querySelectorAll(`figure#R-T2`);
        if (itemData.length > 1) {
            let el = data.parentElement.children[1];
            if (el.classList.contains("increase-height-tier-1")) {
                el.classList.remove("increase-height-tier-1");
            }
        }
    }

    function checkTier2(data) {
        if (data.to != data.from) {
            checkTier2To(data);
            checkTier2From(data);
        }
    }

    function checkTier3To(element) {
        let itemData = element.querySelectorAll(`article#R-T3`);
        if (itemData.length > 1) {
            if (element.classList.contains("increase-height-tier-2")) {
                element.classList.remove("increase-height-tier-2");
            }
        }
    }

    function checkTier3From(data, element) {
        let item = data.querySelectorAll(`article#R-T3`);
        if (item.length == 1) {
            let itemData = element.querySelectorAll(`article#R-T3`);
            if (itemData.length == 1) {
                element.className += " increase-height-tier-2";
            }
        }
    }

    function checkTier3Delete(from) {
        let item = from.querySelectorAll(`article#R-T3`);
        if (item.length == 1) {
            from.classList.add("increase-height-tier-2");
        }
    }

    function checkTier3Manual(data) {
        let itemData = data.parentElement.children[1].querySelectorAll(`article#R-T3`);
        if (itemData.length > 1) {
            let el = data.parentElement.children[1];
            if (el.classList.contains("increase-height-tier-2")) {
                el.classList.remove("increase-height-tier-2");
            }
        }
    }

    function checkTier3(to, from, fromElement) {
        if (to != from) {
            checkTier3To(to);
            checkTier3From(from, fromElement);
        }
    }

    function updateMarginIndex() {
        let itemDataT1 = document.querySelectorAll(`section#R-T1[data-num], div#areaT1`);
        let itemDataT2 = null;
        let itemDataT3 = null;
        let indexInit = 0;
        let tier1Loop = 0;
        let tier2Loop = 0;
        let tier3Loop = 0;
        let boxItem = null;
        let inputboxItem1 = null;
        let inputboxItem2 = null;
        let inputboxItem3 = null;
        let inputboxItem4 = null;
        let inputboxItem5 = null;
        let inputboxItem6 = null;
        let inputboxItem7 = null;
        for (let a=0; a < itemDataT1.length; a++) {
            boxItem = itemDataT1[a].querySelectorAll('.box-item #calculator #calculatorUnit')[0];
            inputboxItem1 = boxItem.querySelectorAll('input.margin')[0];
            inputboxItem2 = boxItem.querySelectorAll('input.marginName')[0];
            inputboxItem3 = boxItem.querySelectorAll('input.marginQuantity')[0];
            inputboxItem4 = boxItem.querySelectorAll('input.marginPrice')[0];
            inputboxItem5 = boxItem.querySelectorAll('input.marginPercentage')[0];
            inputboxItem6 = boxItem.querySelectorAll('input.marginTotal')[0];
            inputboxItem7 = boxItem.querySelectorAll('input.marginFromSystem')[0];
            inputboxItem1.setAttribute("name", `margins[${indexInit}][0]`);
            inputboxItem2.setAttribute("name", `margins[${indexInit}][0][name]`);
            inputboxItem3.setAttribute("name", `margins[${indexInit}][0][quantity]`);
            inputboxItem4.setAttribute("name", `margins[${indexInit}][0][price]`);
            inputboxItem5.setAttribute("name", `margins[${indexInit}][0][percentage]`);
            inputboxItem6.setAttribute("name", `margins[${indexInit}][0][total]`);
            inputboxItem7.setAttribute("name", `margins[${indexInit}][0][is_from_system]`);
            itemDataT2 = itemDataT1[a].querySelectorAll(`figure#R-T2[data-num], div#areaT2`);
            for (let b=0; b < itemDataT2.length; b++) {
                indexInit = indexInit + 1;
                boxItem = itemDataT2[b].querySelectorAll('.box-item #calculator #calculatorUnit')[0];
                inputboxItem1 = boxItem.querySelectorAll('input.margin')[0];
                inputboxItem2 = boxItem.querySelectorAll('input.marginName')[0];
                inputboxItem3 = boxItem.querySelectorAll('input.marginQuantity')[0];
                inputboxItem4 = boxItem.querySelectorAll('input.marginPrice')[0];
                inputboxItem5 = boxItem.querySelectorAll('input.marginPercentage')[0];
                inputboxItem6 = boxItem.querySelectorAll('input.marginTotal')[0];
                inputboxItem7 = boxItem.querySelectorAll('input.marginFromSystem')[0];
                inputboxItem1.setAttribute("name", `margins[${indexInit}][0]`);
                inputboxItem2.setAttribute("name", `margins[${indexInit}][0][name]`);
                inputboxItem3.setAttribute("name", `margins[${indexInit}][0][quantity]`);
                inputboxItem4.setAttribute("name", `margins[${indexInit}][0][price]`);
                inputboxItem5.setAttribute("name", `margins[${indexInit}][0][percentage]`);
                inputboxItem6.setAttribute("name", `margins[${indexInit}][0][total]`);
                inputboxItem7.setAttribute("name", `margins[${indexInit}][0][is_from_system]`);
                itemDataT3 = itemDataT2[b].querySelectorAll(`article#R-T3[data-num], div#areaT3`);
                for (let c=0; c < itemDataT3.length; c++) {
                    indexInit = indexInit + 1;
                    boxItem = itemDataT3[c].querySelectorAll('.box-item #calculator #calculatorUnit');
                    for (let d=0; d < boxItem.length; d++) {
                        inputboxItem1 = boxItem[d].querySelectorAll('input.margin')[0];
                        inputboxItem2 = boxItem[d].querySelectorAll('input.marginName')[0];
                        inputboxItem3 = boxItem[d].querySelectorAll('input.marginQuantity')[0];
                        inputboxItem4 = boxItem[d].querySelectorAll('input.marginPrice')[0];
                        inputboxItem5 = boxItem[d].querySelectorAll('input.marginPercentage')[0];
                        inputboxItem6 = boxItem[d].querySelectorAll('input.marginTotal')[0];
                        inputboxItem7 = boxItem[d].querySelectorAll('input.marginFromSystem')[0];
                        inputboxItem1.setAttribute("name", `margins[${indexInit}][${d}]`);
                        inputboxItem2.setAttribute("name", `margins[${indexInit}][${d}][name]`);
                        inputboxItem3.setAttribute("name", `margins[${indexInit}][${d}][quantity]`);
                        inputboxItem4.setAttribute("name", `margins[${indexInit}][${d}][price]`);
                        inputboxItem5.setAttribute("name", `margins[${indexInit}][${d}][percentage]`);
                        inputboxItem6.setAttribute("name", `margins[${indexInit}][${d}][total]`);
                        inputboxItem7.setAttribute("name", `margins[${indexInit}][${d}][is_from_system]`);
                    }
                    ++tier3Loop;
                }
                tier3Loop = 0;
                ++tier2Loop;
            }
            tier2Loop = 0;
            ++indexInit;
            ++tier1Loop;
        }

        marginIndex = indexInit;
    }

    function calculatorMargin(element, fromChild = false) {
        let calculator = $(element).children();
        let calculatorTotal = $(element).find(`#calculatorTotal`);
        let calculatorQuantity = calculatorTotal.find(`.calculatorQuantity`);
        let calculatorQuantityTotal = calculatorTotal.find(`.calculatorQuantityTotal`);
        let calculatorQuantityTotalTemp = calculatorTotal.find(`.calculatorQuantityTotalTemp`);
        let calculatorQuantityTotalPrice = calculatorTotal.find(`.calculatorQuantityTotalPrice`);
        let calculatorQuantityTotalPriceTemp = calculatorTotal.find(`.calculatorQuantityTotalPriceTemp`);

        let sumCost = 0;
        let sumSelling = 0;
        let totalCost = 0;
        let totalSelling = 0;
        let calculatorUnitQuantity = null;
        let calculatorUnitCost = null;
        let calculatorUnitMargin = null;
        let calculatorUnitTotal = null;

        $(calculator).each(function( index ) {
            let elem = $(this);
            if (elem.attr("id") == 'calculatorUnit') {
                calculatorUnitQuantity = elem.find(`#calculatorUnitQuantity`);
                calculatorUnitCost = elem.find(`#calculatorUnitCost`);
                calculatorUnitMargin = elem.find(`#calculatorUnitMargin`);
                calculatorUnitTotal = elem.find(`#calculatorUnitTotal`);

                // Cost
                sumCost = calculatorUnitQuantity.val()* parseFloat(removeComma(calculatorUnitCost.val())).toFixed(2);
                totalCost += sumCost;

                // Selling
                sumSelling = Math.round(parseFloat(removeComma(calculatorUnitCost.val())).toFixed(2) / (1 - Number(checkUnitMarginPercentage(calculatorUnitMargin.val())) / 100))*calculatorUnitQuantity.val();

                totalSelling += sumSelling;
            }
        });

        calculatorQuantityVal = numberSanitize(calculatorQuantity.val());

        calculatorQuantityTotal[0].value = numberSanitize((calculatorQuantityVal * (totalCost ? totalCost : 0)), true);
        calculatorQuantityTotalPrice[0].value = numberSanitize((calculatorQuantityVal * (totalSelling ? totalSelling : 0)), true);

        let calculatorQuantityParent = calculatorQuantity[0].parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.querySelectorAll(`.item-quantity`);
        let calculatorAmountParent = calculatorQuantity[0].parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.querySelectorAll(`.item-child-amount`);
        let calculatorAmountParentHidden = calculatorQuantity[0].parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.querySelectorAll(`.item-child-amount-hidden`);

        if (fromChild){
            calculatorQuantityParent[0].value = calculatorQuantityVal;
        }

        calculatorAmountParent[0].value = numberSanitize((calculatorQuantityVal * (totalSelling?totalSelling:0)), true);
        calculatorAmountParentHidden[0].value = numberSanitize((totalSelling?totalSelling:0), true);
    }

    function numberSanitize(value, withComma = false) {
        var number = value?.toString().replace(/,/g, '');
        number = parseFloat(number).toFixed(2);
        if (withComma) {
            number = Number(number).toLocaleString(undefined,{minimumFractionDigits: 2, maximumFractionDigits: 2});
        } else {
            if ((isNaN(number))) {
                number = 0;
            }
        }
        return number;
    }

    function removeComma(value) {
        var number = value?.toString().replace(/,/g, '');
        return number;
    }

    function checkUnitMarginPercentage(value) {
        var number = value?.toString().replace(/,/g, '.');
        if (number > 99) {
            number = 99;
        } 
        return number;
    }
</script>

<style type="text/css">
    .box-item {
        border: 1px solid rgb(221, 221, 221);
        background: rgb(238, 238, 238);
        margin-bottom: 5px;
        padding: 5px;
        border-radius: 5px;
    }
    .requirement-table section:last-child {
        margin-bottom: 20px;
    }
    .grow-wrap {
        display: grid;
    }
    .margin-tier-3 .grow-wrap {
        font-size: 14px;
    }
    .grow-wrap::after {
        content: attr(data-replicated-value) " ";
        white-space: pre-wrap;
        visibility: hidden;
    }
    .grow-wrap > textarea {
        resize: none;
        overflow: hidden;
    }
    .grow-wrap > textarea,
    .grow-wrap::after {
        padding: 0.5rem;
        font: inherit;
        grid-area: 1 / 1 / 2 / 2;
    }

    .label-children {
        font-weight: 400!important;
    }

    .input-tier-1 {
        font-weight: bold!important;
        font-size: 16px!important;
        color: #000000;
    }
    .input-tier-2 {
        font-size: 16px!important;
        color: #000000;
    }
    .input-tier-3 {
        color: grey;
        font-size: 14px!important;
    }
    .input-tier-area {
        font-weight: bold!important;
        font-size: 15px!important;
        color: #000000;
    }
    .margin-tier-1 {

    }
    .margin-tier-2 {
        margin-left: 25px!important;
    }
    .margin-tier-3 {
        margin-left: 50px!important;
    }
    .margin-tier-area {
        margin-left: 25px!important;
    }

    .font-size-13px {
        font-size : 13px!important;
    }
    hr {
        margin-top: 0.7em;
        margin-bottom: 0.7rem;
    }
    figure {
        margin-bottom: 0px;
    }
    .sequence-hover {
        padding: 10px;
        background-color: rgb(221, 221, 221);
        border-radius: 5px;
        margin-bottom: 10px;
    }
    .increase-height-tier-1::before {
        height: 25px;
        display: block;
        content: "🡱 This tier 1 scope without tier 2 item";
        font-size: 12px;
        color: #aa8000;
        margin-left: 10px;
    }
    .increase-height-tier-2::before {
        height: 25px;
        display: block;
        content: "🡱 This tier 2 item without tier 3 item";
        font-size: 12px;
        color: #e0a800;
        margin-left: 35px;
    }
    .item-tier-3-attemp {
        margin-left: 54px;
    }

    .item-tier-2-attemp {
        margin-left: 29px;
    }
    #sales-item-box-img {
        width: 40px;
    }
    .btn-checkbox {
        padding: 0px 7px 0px;
    }
    .checkbox {
        padding: 5px;
        margin-top: 6px;
        bottom: 0;
        margin-left: 0px;
        top: 0;
        width: 1rem;
        height: 1rem;
    }
</style>