@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>';
}

$agreement = \App\Models\Agreement::find(request()->route('id'));
$agreementItem = \App\Models\AgreementItem::where('agreement_id', $agreement->id)
        ->where('revision', 'like', '%REV%')
        ->orderBy('created_at', 'desc')->first();

$agreementItemList = \App\Models\AgreementItemList::where('agreement_id', $agreement->id)->where('agreement_item_id', $agreementItem->id)->orderBy('id', 'asc')->get();

$totalCur = $agreementItemList->count();
$curItems = '';
$rowRT1IdxTemp = 0;
$rowRT2IdxTemp = 0;

$rowRT1Idx = 1;
$rowRT2Idx = 1;
$rowRT3Idx = 1;
$rowRT4Idx = 1;
$rowStepNum = 1;

$itTier1 = 0;
$itTier2 = 0;
$itTier3 = 0;

$endOfTier3 = 0;
$marginIndex = 0;

$amountTotal = 0;

function mapItemMargin($margins, $rowRT3Idx, $sales_item_children_id, $marginIndex, $quantity, $isAmount=false){
    $total = 0;
    $getTotalSum = 0;
    $getTotalSumWithMargin = 0;
    $marginChillIndex = 0;
    $html = null;
    $iMargin = 1;
    $html .= '<div class="div" id="calculator">';
    if ($margins->count() > 0) {
        foreach ($margins as $margin) {
            $getTotalSum += $margin->price * $margin->quantity;
            $getTotalSumWithMargin += ($margin->price / ( 1 - $margin->margin_percentage / 100 )) * $margin->quantity;
            $html .= '<div class="row" id="calculatorUnit" data-num="'.$rowRT3Idx.'">
                    <input class="margin" name="margins['.$marginIndex.']['.$marginChillIndex.']" type="hidden" value="1"/>
                    <input class="marginFromSystem" name="margins['.$marginIndex.']['.$marginChillIndex.'][is_from_system]" type="hidden" value="'.($margin->is_from_system ? 1 : 0).'"/>
                    <div class="input-group col-3 mb-2">
                        <label class="d-block w-100">
                            Unit Name
                        </label>
                        <input name="margins['.$marginIndex.']['.$marginChillIndex.'][name]" class="form-control marginName" value="'.$margin->name.'" type="text" '.($margin->is_from_system ? '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.'][quantity]" class="form-control marginQuantity decimal" value="'.number_format($margin->quantity, 2).'" />
                    </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.'][price]" class="form-control marginPrice" value="'.number_format($margin->price, 2).'" />
                    </div>
                    <div class="input-group col-2 mb-2">
                        <label class="d-block w-100">
                            Margin (%)
                        </label>
                        <input id="calculatorUnitMargin" name="margins['.$marginIndex.']['.$marginChillIndex.'][percentage]" class="form-control marginPercentage decimal" value="'.number_format($margin->margin_percentage, 2).'"/>
                    </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.'][total]" class="form-control marginTotal" value="'.number_format($margin->total, 2).'" />
                    </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" '.($iMargin == 1 ? ($margin->is_from_system ? 'title="Can not item margin from system" disabled' : 'title="Can not delete first item margin" disabled') : ($margin->is_from_system ? 'title="Can not item margin from system" disabled' : '')).'><i class="la la-trash"></i></button>
                    </div>
                </div>';
                $marginChillIndex++;
                $iMargin++;
        }
    } else {
        if ($isAmount) {
            $getTotalSum = $isAmount;
            $getTotalSumWithMargin = $isAmount;
        }
        $html .= '<div id="calculatorUnit" class="no-calculator-unit" data-num="'.$rowRT3Idx.'">
                    <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"/>
                    <input class="marginName" name="margins['.$marginIndex.'][0][name]" value="0" type="hidden"/>
                    <input class="marginQuantity" name="margins['.$marginIndex.'][0][quantity]" value="0" type="hidden"/>
                    <input class="marginPrice" name="margins['.$marginIndex.'][0][price]" value="0" type="hidden"/>
                    <input class="marginPercentage" name="margins['.$marginIndex.'][0][percentage]" value="0" type="hidden"/>
                    <input class="marginTotal" name="margins['.$marginIndex.'][0][total]" value="0" type="hidden"/>
                    <div class="my-5 text-uppercase text-center">
                        <h4>Item not found, please add material first.</h4>
                    </div>
                </div>';
    }
    $getTotalSum = $quantity * round($getTotalSum);
    $getTotalSumWithMargin = $quantity * round($getTotalSumWithMargin);
    $html .= '<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="'.number_format($quantity, 2).'"/>
                    </div>
                    <div class="input-group col-3">
                        <label class="d-block w-100">
                            Total Cost
                        </label>
                        <input  type="hidden" value="'.$getTotalSum.'" class="calculatorQuantityTotalTemp" id="calculatorQuantitySelling-'.$rowRT3Idx.'-'.$sales_item_children_id.'"/>
                        <input  class="form-control calculatorQuantityTotal" value="'.number_format($getTotalSum, 2).'" 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="'.$getTotalSumWithMargin.'" class="calculatorQuantitySellingPriceTemp" id="calculatorQuantitySellingPrice-'.$rowRT3Idx.'-'.$sales_item_children_id.'"/>
                        <input  class="form-control calculatorQuantityTotalPrice" value="'.number_format($getTotalSumWithMargin, 2).'" 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 $html;
}

function mapUomFunc($uoms, $selected=false) {
    $htmlUom = '';
    if ($uoms && $uoms->count() > 0){
        foreach ($uoms as $uom) {
            $htmlUom .= '<option value="'.$uom->name.'" '.($uom->name == $selected ? 'selected' : '').'>'.$uom->name.'</option>';
        }
    }
    return $htmlUom;
}

if($agreementItemList->count()>0){
    $i = 0;
    foreach ($agreementItemList as $key => $current){

        if ($current->tier_level==1 && $current->is_area != true) {
            $rowStepNum++;
            if ($rowRT1IdxTemp > 0) {
                $curItems .= '</div>';
                $curItems .= '</section>';
                $rowRT1IdxTemp = 0;
            }
            if ($rowRT2IdxTemp > 0) {
                $curItems .= '</div>';
                $curItems .= '</figure>';
                $rowRT2IdxTemp = 0;
            }
        }

        if ($current->tier_level==1 && $current->is_area != true) {
            $amountTotal += $current->amount;
            $curItems .= '<section id="R-T1" data-num="'.$rowRT1Idx.'" data-step="'.$rowStepNum.'" data-paret="0" class="parent-1">';
            $curItems .= '
                    <div class="box-item bg-tier-one">
                        <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="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-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>'.$current->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="'.number_format((float)$current->amount,2).'"/>
                                        </div>
                                        <span class="input-group-text p-0 font-size-10px pl-0 last-price" style="background: transparent;border: 0px; font-size: 12px;display:none;">Last Price : $ '.number_format((float)$current->amount,2).'</span>
                                        <span class="input-group-text p-0 font-size-10px pl-0" style="background: transparent;border: 0px; font-size: 12px;">Total Cost   : <span class="R-T1-total-cost" data-num="'.$rowRT1Idx.'"></span></span>
                                        <span class="input-group-text p-0 font-size-10px pl-0" style="background: transparent;border: 0px; font-size: 12px;">Total Profit : <span class="R-T1-total-profit" data-num="'.$rowRT1Idx.'"></span></span>
                                        <span class="input-group-text p-0 font-size-10px pl-0" style="background: transparent;border: 0px; font-size: 12px;">Total Margin %  : <span class="R-T1-total-margin" data-num="'.$rowRT1Idx.'"></span></span>
                                    </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>';
            $curItems .= '<div class="tier-2-sortable tier-area-sortable increase-height-tier-1" data-num="'.$rowRT1Idx.'" data-step="'.$rowStepNum.'">';
            $curItems .= '<figure id="R-T2" class="R-T2"></figure>';
            $rowRT1IdxTemp++;
            $rowRT1Idx++;
        }

        if ($current->tier_level==2 && $current->is_area != true) {
            if ($rowRT2IdxTemp > 0) {
                $curItems .= '</div>';
                $curItems .= '</figure>';
                $rowRT2IdxTemp = 0;
            }
        }

        if ($current->tier_level==2 && $current->is_area != true) {
            $curItems .= '<figure id="R-T2" data-num="'.$rowRT2Idx.'" data-step="'.$rowStepNum.'">';
            $curItems .= '
                        <div class="box-item bg-tier-two">
                            <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="is_quantity[]" type="hidden" value="0"/>
                            <input name="is_amount[]" type="hidden" value="0"/>
                            <input name="uom[]" type="hidden" value="0"/>
                            <div class="row ml-0 mr-0">
                                <div class="col-6 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>'.$current->title.'</textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-1 pl-0">
                                    <button type="button" data-toggle="collapse" data-target="#collapseT2-'.$rowRT2Idx.'-'.$current->agreement_item_id.'" class="btn btn-dark btn-sm mt-1 collapseTier">
                                        <i class="la la-la la-calculator"></i>
                                    </button>
                                </div>
                                <div class="col-3 px-1">
                                    <div class="row">
                                        <div class="col-10 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="'.number_format((float)$current->amount,2).'"/>
                                                <input type="hidden" id="quantity-'.$rowRT2Idx.'-'.$current->agreement_item_id.'" name="quantity[]" class="form-control text-right item-quantity decimal" value="'.$current->quantity.'" data-num="'.$rowRT2Idx.'"/>
                                                <input type="hidden" class="form-control item-amount-hidden" value="'.(\App\Helpers\Helper::divnum($current->amount, 1)).'" id="quantitySellingPrice-'.$rowRT2Idx.'-'.$current->agreement_item_id.'" />
                                            </div>
                                            <span class="input-group-text mt-1 p-0 font-size-10px pl-0 last-price" style="background: transparent;border: 0px; font-size: 12px; display: none;">Last Price s: $ '.number_format((float)$current->amount,2).'</span>
                                            <span class="input-group-text p-0 font-size-10px pl-0" style="background: transparent;border: 0px; font-size: 12px;">Total Cost   : <span class="R-T2-total-cost" data-num="'.$rowRT2Idx.'"></span></span>
                                            <span class="input-group-text p-0 font-size-10px pl-0" style="background: transparent;border: 0px; font-size: 12px;">Total Profit : <span class="R-T2-total-profit" data-num="'.$rowRT2Idx.'"></span></span>
                                            <span class="input-group-text p-0 font-size-10px pl-0" style="background: transparent;border: 0px; font-size: 12px;">Total Margin %  : <span class="R-T2-total-margin"  data-num="'.$rowRT2Idx.'"></span></span>
                                        </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="#collapseRemark2-'.$rowRT2Idx.'-'.$current->agreement_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="'.($current->is_modified? 1 : 0).'">
                                        <input class="checkbox" type="checkbox" value="0" '.($current->is_modified? 'checked' : '').'>
                                    </div>
                                </div>
                                <item data-num="'.$rowRT2Idx.'">
                                    <div class="collapse" id="collapseT2-'.$rowRT2Idx.'-'.$current->agreement_item_id.'">
                                        <div class="card card-body my-1 mt-2 py-3 px-3 item-tier-3-attemp">
                                            '.mapItemMargin(\App\Models\AgreementItemMargin::where('agreement_item_list_id', $current->id)->get(), $rowRT2Idx, $current->agreement_item_id, $marginIndex, $current->quantity, $current->amount).'
                                        </div>
                                    </div>
                                    <div class="collapse" id="collapseRemark2-'.$rowRT2Idx.'-'.$current->agreement_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-2" onInput="return setTextAreaHeightAuto(this.parentNode, this.value, \'#collapseRemark2-'.$rowRT2Idx.'-'.$current->agreement_item_id.'\')" data-onload="setTextAreaHeightAuto(this.parentNode, this.value, \'#collapseRemark2-'.$rowRT2Idx.'-'.$current->agreement_item_id.'\')" rows="1">'.$current->remarks.'</textarea>
                                            </div>
                                        </div>
                                    </div>
                                </item>
                            </div>
                        </div>';
            $curItems .= '<div class="tier-3-sortable tier-area-sortable increase-height-tier-2" data-num="'.$rowRT2Idx.'" data-step="'.$rowStepNum.'">';
            $curItems .= '<article id="R-T3" class="R-T3"></article>';

            $rowRT2IdxTemp++;
            $rowRT2Idx++;
        }

        if ($current->tier_level==3 && $current->is_area != true) {
            $curItems .= '<article id="R-T3" data-num="'.$rowRT3Idx.'" data-parent="'.($rowRT2Idx-1).'" data-step="'.$rowStepNum.'">
                <div class="box-item bg-tier-three">
                    <input name="tier_level[]" type="hidden" value="3"/>
                    <input name="master_item_id[]" type="hidden" value="'.($current->master_item_id ? $current->master_item_id : 0).'"/>
                    <input name="is_area[]" type="hidden" value="0"/>
                    <input name="is_quantity[]" type="hidden" value="1"/>
                    <input name="is_amount[]" 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>'.$current->title.'</textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-1 pl-0">
                                    <button type="button" data-toggle="collapse" data-target="#collapseT3-'.$rowRT3Idx.'-'.$current->agreement_item_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>
                                        <select class="form-control" name="uom[]">
                                            <option value="">None</option>
                                            '.mapUomFunc($uoms, $current->uom).'
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-3 px-1">
                            <div class="row" id="item-list-price">
                                <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 id="quantity-'.$rowRT3Idx.'-'.$current->agreement_item_id.'" name="quantity[]" class="form-control text-right item-quantity decimal" value="'.$current->quantity.'" data-num="'.$rowRT3Idx.'" 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[]" id="quantityTotalPrice-'.$rowRT3Idx.'-'.$current->agreement_item_id.'" class="form-control item-child-amount text-right" value="'.number_format((float)$current->amount,2).'"/>
                                        <input type="hidden" class="form-control item-child-amount-hidden" value="'.(\App\Helpers\Helper::divnum($current->amount, $current->quantity)).'" id="quantitySellingPrice-'.$rowRT3Idx.'-'.$current->agreement_item_id.'" />
                                        <span class="input-group-text font-size-10px pl-0 last-price" style="background: transparent;border: 0px; font-size: 12px; display: none;">Last Price : $ '.number_format((float)$current->amount,2).'</span>
                                    </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.'-'.$current->agreement_item_id.'" class="btn btn-dark btn-sm collapseTier">
                                <i class="la la-la la-quote-left"></i>
                            </button>
                        </div>
                    </div>
                    <item data-num="'.$rowRT3Idx.'">
                        <div class="collapse" id="collapseT3-'.$rowRT3Idx.'-'.$current->agreement_item_id.'">
                            <div class="card card-body my-1 mt-2 py-3 px-3 item-tier-3-attemp">
                                '.mapItemMargin(\App\Models\AgreementItemMargin::where('agreement_item_list_id', $current->id)->get(), $rowRT3Idx, $current->agreement_item_id, $marginIndex, $current->quantity, $current->amount).'
                            </div>
                        </div>
                        <div class="collapse" id="collapseRemark3-'.$rowRT3Idx.'-'.$current->agreement_item_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.'-'.$current->agreement_item_id.'\')" data-onload="setTextAreaHeightAuto(this.parentNode, this.value, \'#collapseRemark3-'.$rowRT3Idx.'-'.$current->agreement_item_id.'\')" rows="1">'.$current->remarks.'</textarea>
                                </div>
                            </div>
                        </div>
                    </item>
                </div>
            </article>';

            $rowRT3Idx++;
        }

        if ($current->is_area && empty($current->title)) {
            $attrIdArea = ($current->tier_level == 1 ? 'areaT1' : ($current->tier_level == 2 ? 'areaT2' : 'areaT3'));
            $curItems .= '<div id="'.$attrIdArea.'" class="tier-area" data-step="'.$rowStepNum.'">';
            $curItems .= '<div class="box-item">
                        <input name="tier_level[]" class="areaLevel" type="hidden" value="'.$current->tier_level.'"/>
                        <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-10 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 BLANK SPACE SECTION</span>
                                        <input type="hidden" name="title[]" onInput="this.parentNode.dataset.replicatedValue = this.value" >
                                    </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>
                                <button type="button" name="clone" class="btn btn-info btn-sm" id="clone-requirement-area"><i class="la la-copy"></i></button>
                            </div>
                        </div>
                    </div>';
            $curItems .= '</div>';
        }

        if ($current->is_area && !empty($current->title)){
            $attrIdArea = ($current->tier_level == 1 ? 'areaT1' : ($current->tier_level == 2 ? 'areaT2' : 'areaT3'));
            $curItems .= '<div id="'.$attrIdArea.'" class="tier-area" data-step="'.$rowStepNum.'">';
            $curItems .= '<div class="box-item">
                        <input name="tier_level[]" class="areaLevel" type="hidden" value="'.$current->tier_level.'"/>
                        <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>'.$current->title.'</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 NOTE 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>
                                <button type="button" name="clone" class="btn btn-info btn-sm" id="clone-requirement-area"><i class="la la-copy"></i></button>
                            </div>
                        </div>
                    </div>';
            $curItems .= '</div>';
        }

        if(++$i === $agreementItemList->count()) {

            $curItems .= '</div>';
            $curItems .= '</figure>';
            $rowRT2IdxTemp = 0;

            $curItems .= '</div>';
            $curItems .= '</section>';
            $rowRT1IdxTemp = 0;

            $rowStepNum++;
        }

        $marginIndex++;
    }
} else {
    $curItems .= '<div id="requirement-not-found" class="text-center my-4 pt-4 pb-5"><h4 class="text-uppercase">Item Not Found</h4><h5>click add new item button below to add new requirement field</h6></div>';
}
@endphp

<div class="bold-labels">
    <div class="card">
        <div class="card-header">
            <h4 class="float-left mt-2 mb-0">Requirement</h4>
            <span class="float-right mt-2 mb-0">{{$agreement->status != 'draft' ? 'Current Version: '.$agreementItem->revision : ''}}</span>
        </div>
        <div class="card-body pb-0" id="requirement">
            <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="{{number_format((float) $amountTotal, 2, '.', '')}}" 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 Note Or Blank Space</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">
                                    <button type="button" class="btn btn-primary w-100 disabled" id="add-requirement-manual-btn">
                                        <i class="la la-plus"></i>
                                    </button>
                                </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 justify-align-center">
                            <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">
                                    <button type="button" class="btn btn-primary w-100 disabled" id="add-requirement-area-btn">
                                        <i class="la la-plus"></i>
                                    </button>
                                </div>
                            </div>
                             <div class="form-group col-2 mb-0 pl-1">
                                <div id="add-requirement-free-text" class="mt-4 pt-2">
                                    <button type="button" class="btn btn-primary w-100 " id="add-requirement-free-text-btn">
                                     Free Text
                                    </button>
                                </div>
                            </div>
                            <div class="form-group col-2 mb-0 pl-1">
                                <div id="add-requirement-blank-space" class="mt-4 pt-2">
                                    <button type="button" class="btn btn-primary w-100 " id="add-requirement-blank-space">
                                     Blank Space
                                    </button>
                                </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">
                                        <button type="button" class="btn btn-primary w-100 disabled" id="add-requirement-btn">
                                            <i class="la la-plus"></i>
                                            Add New Item
                                        </button>
                                    </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>
<div class="loading-overlay">
    <div class="spinner-square">
        <div class="square-1 square"></div>
        <div class="square-2 square"></div>
        <div class="square-3 square"></div>
    </div>
</div>
<style>

    .spinner-square {
        display: flex;
        flex-direction: row;
        width: 90px;
        height: 120px;
    }

    .spinner-square>.square {
        width: 17px;
        height: 80px;
        margin: auto auto;
        border-radius: 4px;
    }

    .square-1 {
        animation: square-anim 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s infinite;
    }

    .square-2 {
        animation: square-anim 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 200ms infinite;
    }

    .square-3 {
        animation: square-anim 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 400ms infinite;
    }

    @keyframes square-anim {
        0% {
            height: 80px;
            background-color: rgb(111, 163, 240);
        }

        20% {
            height: 80px;
        }

        40% {
            height: 120px;
            background-color: rgb(111, 200, 240);
        }

        80% {
            height: 80px;
        }

        100% {
            height: 80px;
            background-color: rgb(111, 163, 240);
        }
    }

    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99999;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #0000004b;
    }
</style>
<script>
    var cloneId = 1;

    $(document).ready(function(){
        $('.loading-overlay').hide();
        // Auto Fillup project info
        $('#project').on('change', function() {
            var projectId = $(this).find(':selected')[0].value;
            let projectRoute = '{{route("ajax.project.show", ":projectId")}}';
            projectRoute = projectRoute.replace(':projectId', projectId);
            $.ajax({
                type:'GET',
                url: projectRoute,
                success:function(res){
                    document.getElementById("client-name").value = res.project.client_name;
                    document.getElementById("client-email").value = res.project.email;
                    document.getElementById("client-contact").value = res.project.contact_number.replace('-', '').replace(' ', '');
                    document.getElementById("client-ic").value = res.project.ic_number;
                    document.getElementById("road-no").value = res.project.road_no;
                    document.getElementById("road-name").value = res.project.road_name;
                    document.getElementById("block-no").value = res.project.block_no;
                    document.getElementById("residence").value = res.project.residence;
                    document.getElementById("postal-code").value = res.project.postal_code;
                    $("select#client-county-code").val(res.project.country_code).change();
                    $("select#country-name").val(res.project.country_name).change();
                    $("select#company").val(res.project.company_id).change();
                }
            });
        });

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

        //BEFORE ON SUBMIT
        $("form").submit(function (e) {

            e.preventDefault(); // Prevent the default form submission
            updateAttributeAreaSection();
            updateAttributeStepNumParent();
            updateMarginIndex();
            var $form = $(this); // Cache the form jQuery object

            // Disable the form submit button while the AJAX request is in progress
            $form.find("button[type='submit']").prop("disabled", true);

            // Create a deferred object for the AJAX request
            var ajaxDeferred = $.ajax({
                type: 'POST',
                url: "{{route('ajax.items-before-submit')}}",
                data: $(this).serialize(), // Serialize form data
            });

            // Handle the success or failure of the AJAX request
            ajaxDeferred.done(function (res) {

                // Now you can submit the form programmatically
                $("form")[0].submit();
                // Re-enable the form submit button
                $form.find("button[type='submit']").prop("disabled", false);
            }).fail(function (e) {
                console.log('e',e)
                let errorMsg = e.responseJSON.message;
                if(e.status == 422){
                    let errors = e.responseJSON.errors;
                    for (const key in errors) {
                        if (errors[key].length > 0) {
                            errorMsg = errors[key][0];
                        break; // Exit the loop after finding the first error message
                        }
                    }
                }
                swal({
                    icon: 'error',
                    title: `${errorMsg}`,
                    showConfirmButton: false,
                });
            $form.find("button[type='submit']").prop("disabled", false);
                // Handle failure of the AJAX request
                console.error("Something went wrong.");
            });
        });


        let remove;
        var rowReqIdx = {{$totalCur}} + 1;
        $(window).on('beforeunload', function(){
            return "Any changes will be lost";
        });

        if ({{$totalCur}}){
            $('div#requirement-table').append(`{!! $curItems !!}`);
            sequence();
            setTextAreaHeight();
            checkTierDefault();
            updateAmountTotal();
        } else {
            $('div#requirement').append(`{!! $curItems !!}`);
        }

        $(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();
                updateAttributeStepNumParent()
                startSticky();

                updateSummary();
                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();
                    updateMarginIndex();
                    updateAttributeStepNumParent()
                    startSticky();

                    updateSummary();
                    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();
                updateSummary("tier3",$(this), "delete");
                updateAmountItem(false, false, false);
                updateMarginIndex();
                updateAttributeStepNumParent()
                startSticky();
                updateAmountItem();
                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 = parseInt(dataNumId) + 1;
                clone.querySelectorAll(`div.tier-3-sortable`)[0].dataset.num = parseInt(dataNumId) + 1;

                clone.querySelectorAll(`button`)[3].dataset.target = clone.querySelectorAll(`button`)[3].dataset.target + `-` + 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}')`);

                // 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;


                let cloneArticle = clone.querySelectorAll('article[data-parent]');
                if (cloneArticle.length>0) {
                    for (i = 0; i < cloneArticle.length; ++i) {
                        cloneArticle[i].dataset.parent = parseInt(dataNumId) + 1;
                        // change button input amount id
                        cloneArticle[i].querySelectorAll(`input[name="amount[]"]`)[0].id =  cloneArticle[i].querySelectorAll(`input[name="amount[]"]`)[0].id + `-` + cloneId;

                        // 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();
                    updateMarginIndex();
                    updateAttributeStepNumParent()
                    startSticky();
                    sequence();

                    updateSummary();
                    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){
                    updateSummary('tier3',$(this),'duplicate');
                    updateAmountItem();
                    updateMarginIndex();
                    updateAttributeStepNumParent();
                    startSticky();
                    sequence();

                    updateAmountTotal();
                    ++cloneId;
                }
            }
        });

         //clone area /blank space
         $(document).on('click', '#clone-requirement-area', function(){
            var r = confirm("Are you sure to clone item?");
            if (r == true) {

                let dataSalesId = $(this).closest('.tier-area')[0].dataset.parent;
                let dataStepId = $(this).closest('.tier-area')[0].dataset.step;
                let rowHtml = $(this).closest('.tier-area')[0];
                let clone = rowHtml.cloneNode(true);

                let parentElement = $(this).closest('.tier-area').parent();
                let tryClone = $(clone).insertAfter(rowHtml);
                if (tryClone){
                    updateAttributeStepNumParent();
                    startSticky();
                    updateMarginIndex();
                    ++cloneId;
                }
            }
        });

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

        //BEFORE ON SUBMIT
        $("form").submit(function(e) {
            updateAttributeStepNumParent();
        });

        $(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);
            }
        });
    });


</script>

{{-- Items --}}
<script type="text/javascript">
    var rowRT1Idx = {{$rowRT1Idx}};
    var rowRT2Idx = {{$rowRT2Idx}};
    var rowRT3Idx = {{$rowRT3Idx}};
    var rowRT4Idx = {{$rowRT4Idx}};
    var rowStepNum = {{$rowStepNum}};
    var pushToHtml = '';
    var tierLevel = 0;
    var area = '';
    var rowStepNumTemp = 0;
    var initTier1Manual = 0;
    var marginIndex = {{$marginIndex}};
    var totalManual3Added = 1;
    var totalManual2Added = 1;
    var uoms = `{{$uoms}}`;
    uoms = JSON.parse(uoms.replace(/&quot;/g,'"'));

    if (rowRT1Idx>0) {
        initTier1Manual = 1;
    }

    $('#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;
        pushToHtml = "";
        $("#requirement-not-found").hide();

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

        let check = null;

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

        if (tierLevel==1) {
            rowStepNumTemp =  $("section#R-T1:last").data("step") ? $("section#R-T1:last").data("step") + 1 : 0 ;
            rowRT1Idx =  $("section#R-T1:last").data("num") ? $("section#R-T1:last").data("num") + 1 : 0;
            pushToHtml +=`<section id="R-T1" data-num="${rowRT1Idx}" data-step="${rowStepNumTemp}">
                <div class="box-item bg-tier-one">
                    <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="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-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-2 pr-1">
                                </div>
                                <div class="col-10 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>
                                    <span class="input-group-text p-0 font-size-10px pl-0" style="background: transparent;border: 0px; font-size: 12px;">Total Cost   : <span class="R-T1-total-cost" data-num="${rowRT1Idx}"></span></span>
                                    <span class="input-group-text p-0 font-size-10px pl-0" style="background: transparent;border: 0px; font-size: 12px;">Total Profit : <span class="R-T1-total-profit" data-num="${rowRT1Idx}"></span></span>
                                    <span class="input-group-text p-0 font-size-10px pl-0" style="background: transparent;border: 0px; font-size: 12px;">Total Margin %  : <span class="R-T1-total-margin"data-num="${rowRT1Idx}"></span></span>
                                </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;

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

        } else if (tierLevel==2) {
            //check if any parent tier 2
            let parentTier1 = $("section#R-T1:last")[0]?.querySelectorAll(`div.tier-1-sortable`) ?? null;
            if(!parentTier1){
                alert("Cannot add Tier 2 without Tier 1 , Please add First..");
                return null;
            }

            let rowNumParent =  $("section#R-T1:last").data("num");
            rowStepNumTemp = $("section#R-T1:last").data("step");
            rowRT2Idx =  $("figure#R-T2:last").data("num") ? $("figure#R-T2:last").data("num") + 1 : 0;
            pushToHtml += `<figure id="R-T2" data-num="${rowRT2Idx}" data-step="${rowStepNumTemp}" data-parent="${rowNumParent}">
                <div class="box-item bg-tier-two">
                    <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="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"/>
                    <div class="row ml-0 mr-0">
                        <div class="col-6 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-1 pl-0">
                            <button type="button" data-toggle="collapse"  data-target="#collapseT2-${rowRT2Idx}-${rowRT2Idx+'-manual'+totalManual2Added}" class="btn btn-dark btn-sm mt-1 collapseTier">
                                <i class="la la-la la-calculator"></i>
                            </button>
                        </div>
                        <div class="col-3 px-1">
                            <div class="row">
                                <div class="col-10 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"/>
                                        <input type="hidden" name="quantity[]" class="form-control text-right item-quantity decimal" value="0"  required/>
                                        <input type="hidden" class="form-control item-amount-hidden" value="0" id="quantitySellingPrice-${rowRT2Idx}-${rowRT2Idx+'-manual'+totalManual2Added}" />
                                    </div>
                                    <span class="input-group-text p-0 font-size-10px pl-0" style="background: transparent;border: 0px; font-size: 12px;">Total Cost   : <span class="R-T2-total-cost" data-num="${rowRT2Idx}"></span></span>
                                    <span class="input-group-text p-0 font-size-10px pl-0" style="background: transparent;border: 0px; font-size: 12px;">Total Profit : <span class="R-T2-total-profit" data-num="${rowRT2Idx}"></span></span>
                                    <span class="input-group-text p-0 font-size-10px pl-0" style="background: transparent;border: 0px; font-size: 12px;">Total Margin %  : <span class="R-T2-total-margin" data-num="${rowRT2Idx}"></span></span>
                                </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>
                    <item data-num="${rowRT2Idx}">
                        <div class="collapse" id="collapseT2-${rowRT2Idx}-${rowRT2Idx+'-manual'+totalManual2Added}">
                            <div class="card card-body my-1 mt-2 py-3 px-3 item-tier-3-attemp">
                                ${mapItemMargin([], rowRT2Idx, rowRT2Idx+'-manual'+totalManual2Added, marginIndex, 1)}
                            </div>
                        </div>
                        <div class="collapse" id="collapseRemark3-${rowRT2Idx}-${rowRT2Idx+'-manual'+totalManual2Added}">
                            <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-2 remarks" onInput="return setTextAreaHeightAuto(this.parentNode, this.value, '#collapseRemark3-${rowRT2Idx}-${rowRT2Idx+'-manual'+totalManual2Added}')" data-onload="setTextAreaHeightAuto(this.parentNode, this.value, '#collapseRemark3-${rowRT2Idx}-${rowRT2Idx+'-manual'+totalManual3Added}')" rows="1"></textarea>
                                </div>
                            </div>
                        </div>
                    </item>
                </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;
            ++totalManual2Added;
            $("div#requirement-table section:last div.tier-2-sortable>figure:last").after(`${pushToHtml}`);

        } else if (tierLevel==3) {
            //check if any parent tier 3
            let parentTier2 = $("figure#R-T2:last")[0]?.querySelectorAll(`div.tier-3-sortable`) ?? null;
            if(isEmpty(parentTier2)){
                alert("Cannot add Tier 3 without Tier 2, Please add First..");
                return null;
            }
            let rowNumParent =  $("figure#R-T2:last").data("num");
            let parentTier3 = $("figure#R-T2:last")[0].querySelectorAll(`div.tier-3-sortable`);
            rowRT3Idx =  $("article#R-T3:last").data("num") ? $("article#R-T3:last").data("num") + 1 : 0 ;
            rowStepNumTemp = $("figure#R-T2:last").data("step");
            pushToHtml += `<article id="R-T3" class="R-T3" data-num="${rowRT3Idx}" data-parent="${rowNumParent}" data-step="${rowStepNumTemp}">
                <div class="box-item bg-tier-three">
                    <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="0"/>
                    <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[]" id="quantityTotalPrice-${rowRT3Idx}-${rowRT3Idx+'-manual'+totalManual3Added}" class="form-control item-child-amount text-right" value="0.00"/>
                                        <input type="hidden" class="form-control item-child-amount-hidden" value="0" 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}">
                        <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 {
                $("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) {
            updateAttributeStepNumParent();
            // 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();  --}}
            } else {
                check = $("section#R-T1:last")[0].querySelectorAll(`div.tier-2-sortable[data-step="${rowStepNumTemp}"]`);
                checkTier2Manual(check[0]);
                {{--  updateAmountItem();  --}}
            }
        }

        if (tierLevel==3) {
            updateAttributeStepNumParent();
            // 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]);
                {{--  updateAmountItem();  --}}
            } 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]);
                {{--  updateAmountItem();  --}}
            }
        }
        sequence();
        startSticky();
        updateAttributeStepNumParent();
        updateMarginIndex();
        {{--  updateAmountItem();
        updateAmountTotal();  --}}
        updateSummary();

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

        $("#requirement-not-found").hide();
        evt.preventDefault(); // prevent default click action

        let areaId = area;
        let areaRoute = '{{route("ajax.area.show", ":areaId")}}';
        areaRoute = areaRoute.replace(':areaId', areaId);
        //GET LAST SECTION WITHOUT AREA TIER
        let lastSection = $("div#requirement-table textarea:not(.input-tier-area):last").attr('class');
        let areaTier = '1';
        if(lastSection?.includes('input-tier-3')){
            areaTier = '3';
        }else if(lastSection?.includes('input-tier-2')){
            areaTier = '2';
        }else{
            areaTier = '1';
        }

        $.ajax({
            type:'GET',
            url: areaRoute,
            success:function(res){
                pushToHtml +=`<div id="areaT${areaTier}" class="tier-area" data-step="${rowStepNum}">
                    <div class="box-item">
                        <input name="tier_level[]" class="areaLevel" type="hidden" value="${areaTier}"/>
                        <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>${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 NOTE 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>
                                <button type="button" name="clone" class="btn btn-info btn-sm" id="clone-requirement-area"><i class="la la-copy"></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.tier-area: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.tier-area: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.tier-area: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.tier-area: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.tier-area:last").after(`${pushToHtml}`);
                        }
                    }
                }

                pushToHtml ='';
            }
        });


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

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

        $("#requirement-not-found").hide();
        let lastSection = $("div#requirement-table textarea:not(.input-tier-area):last").attr('class');
        let areaTier = '1';
        if(lastSection?.includes('input-tier-3')){
            areaTier = '3';
        }else if(lastSection?.includes('input-tier-2')){
            areaTier = '2';
        }else{
            areaTier = '1';
        }
        pushToHtml +=`<div id="areaT${areaTier}" class="tier-area" data-step="${rowStepNum}">
                    <div class="box-item">
                        <input name="tier_level[]" class="areaLevel" type="hidden" value="${areaTier}"/>
                        <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 NOTE 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>
                                <button type="button" name="clone" class="btn btn-info btn-sm" id="clone-requirement-area"><i class="la la-copy"></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.tier-area: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.tier-area: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.tier-area: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.tier-area: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.tier-area:last").after(`${pushToHtml}`);
                }
            }
        }
        pushToHtml ='';

        sequence();
        startSticky();
        updateAmountTotal();
    });
    $("#add-requirement-blank-space").on('click', '#add-requirement-blank-space', function(){
        let lastSection = $("div#requirement-table textarea:not(.input-tier-area):last").attr('class');
        let areaTier = '1';
        if(lastSection?.includes('input-tier-3')){
            areaTier = '3';
        }else if(lastSection?.includes('input-tier-2')){
            areaTier = '2';
        }else{
            areaTier = '1';
        }
        $("#requirement-not-found").hide();

        pushToHtml +=`<div id="areaT${areaTier}" class="tier-area" data-step="${rowStepNum}">
                    <div class="box-item">
                        <input name="tier_level[]" class="areaLevel" type="hidden" value="${areaTier}"/>
                        <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-10 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 BLANK SPACE SECTION</span>
                                        <input type="hidden" name="title[]"  onInput="this.parentNode.dataset.replicatedValue = this.value" >
                                    </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>
                                <button type="button" name="clone" class="btn btn-info btn-sm" id="clone-requirement-area"><i class="la la-copy"></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.tier-area: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.tier-area: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.tier-area: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.tier-area: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.tier-area:last").after(`${pushToHtml}`);
                        }
                    }
                }

        pushToHtml ='';

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

    $(document).ready(function(){
        //TEXT EDITOR FOR AREA/NOTE
        updateSummary();
        $('#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();
                updateAmountTotal();
            });

            $(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');

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

        });
        //FOR LAST SAVED PRICE
        $('[name="amount[]"]').keypress(function() {
            $(`.last-price`).css("display", "none");
            let boxItem =  $(this).closest('.box-item').find(".last-price").css("display", "unset")
            $(boxItem).closest('.last-price')
        });
    });

    //Calculator
    $(document).on('change', '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 = ( parseFloat(removeComma(calculatorUnitCost.val()|| "0.00")) / (1 - Number(checkUnitMarginPercentage(calculatorUnitMargin.val()|| "0.00")) / 100)*calculatorUnitQuantity.val()|| "0.00").toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).replace(/,/g, '');
        calculatorUnitTotal.val(numberSanitize(calculated?calculated:0, true));
        updateSummary();
        updateAmountTotal();
    });




    $(document).on('change', 'item div#calculator', function (e) {
        calculatorMargin($(this), true);
        updateAmountItem();
        updateSummary();
        updateAmountItem();
        updateAmountTotal();
    });

    $(document).on('keydown','input', function(event) {
        if (event.keyCode === 13) {
        var inputElement = $(this);
        setTimeout(function() {
            inputElement.blur();
            inputElement.change();
        }, 0);
        // Perform your action here
        }
    });

    // End Calculator

    $(document).on('change', '.item-child-amount', function() {
        var amount = $(this).val().toString().replace(/(?!^-)[^0-9.]/g, "");
        const formatter = new Intl.NumberFormat('en-US');
        amount = formatter.format(amount);
        $(this).val(amount);
        updateAmountItem(false,false,false);
        updateSummary("tier3", $(this));
        updateAmountItem(false,false,false);
        updateAmountTotal();
    });

    $(document).on('change', '.item-amount', function() {
        var amount = $(this).val().toString().replace(/(?!^-)[^0-9.]/g, "");
        const formatter = new Intl.NumberFormat('en-US');
        amount = formatter.format(amount);
        $(this).val(amount);
        updateAmountItem(false,false,false);
        updateSummary()
        updateAmountItem(false,false,false);
        updateAmountTotal();

    });

    $(document).on('change', '.item-scope-amount', function() {

        var amount = $(this).val().toString().replace(/(?!^-)[^0-9.]/g, "");
        const formatter = new Intl.NumberFormat('en-US');
        amount = formatter.format(amount);
        $(this).val(amount);

        updateSummary()
        updateAmountTotal();
    });

    $(document).on('change', '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`));

        updateSummary();
        updateAmountTotal();

    }).trigger('change');

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

        updateSummary()
        updateAmountTotal();
    });

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

        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;
            }

            var findNoCalculatorUnit = calculator.querySelectorAll(`.no-calculator-unit[data-num="${nodes[0].attributes['data-num'].value}"]`);
            if (findNoCalculatorUnit.length > 0) {
                noCalculatorUnit = true;
                $(`.no-calculator-unit[data-num="${nodes[0].attributes['data-num'].value}"]`).empty();
                $(`.no-calculator-unit[data-num="${nodes[0].attributes['data-num'].value}"]`).attr('id', 'noCalculatorUnit');
                $(`.no-calculator-unit[data-num="${nodes[0].attributes['data-num'].value}"]`).removeClass('no-calculator-unit');
                if (marginIndexTwo > 0) {
                    marginIndexTwo = marginIndexTwo - 1;
                }
            }

            pushToCalculator += `<div class="row" id="calculatorUnit" data-num="${nodes[0].attributes['data-num'].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"  >
                </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"  >
                </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" >
                </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>`;

            if (noCalculatorUnit) {
                noCalculatorUnitNode = calculator.querySelectorAll('#noCalculatorUnit');
                if (noCalculatorUnitNode[0]) {
                    $(noCalculatorUnitNode[0]).after(`${pushToCalculator}`);
                }
            } else {
                $(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}">
                <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"  >
                </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"  >
                </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" >
                </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();

        updateSummary();
        updateAmountTotal();
    });

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

            }else{
                //TIER 2
                checkTier2Delete($(this).closest('figure')[0].parentElement);
                let dataSalesId = $(this).closest('figure')[0].dataset.parent;
                let dataStepId = $(this).closest('figure')[0].dataset.step;
                calculator =  $(this)[0].parentElement.parentElement.parentElement;
                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() || "0.00")).toFixed(2);
                        totalCost += sumCost;

                        // Selling
                        sumSelling = (parseFloat(removeComma(calculatorUnitCost.val() || "0.00")) / (1 - Number(checkUnitMarginPercentage(calculatorUnitMargin.val() || "0.00")) / 100)*calculatorUnitQuantity.val()|| "0.00").toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).replace(/,/g, '');

                        totalSelling += parseFloat(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;
                let calculatorAmountParent;
                let calculatorAmountParentHidden;

                if($(this).closest('article').length !== 0){
                    //TIER 3
                    calculatorQuantityParent = calculatorQuantity[0].parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.querySelectorAll(`.item-quantity`);
                    calculatorAmountParent = calculatorQuantity[0].parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.querySelectorAll(`.item-child-amount`);
                    calculatorAmountParentHidden = calculatorQuantity[0].parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.querySelectorAll(`.item-child-amount-hidden`);
                    console.log('calculatorQuantityParent',calculatorQuantityParent);
                    console.log('calculatorAmountParent',calculatorAmountParent);
                    console.log('calculatorAmountParentHidden',calculatorAmountParentHidden);
                }else{
                    //TIER 2
                    calculatorQuantityParent = calculatorQuantity[0].parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.querySelectorAll(`.item-quantity`);
                    calculatorAmountParent = calculatorQuantity[0].parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.querySelectorAll(`.item-amount`);
                    calculatorAmountParentHidden = calculatorQuantity[0].parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.querySelectorAll(`.item-amount-hidden`);
                    console.log('calculatorQuantityParent',calculatorQuantityParent);
                    console.log('calculatorAmountParent',calculatorAmountParent);
                    console.log('calculatorAmountParentHidden',calculatorAmountParentHidden);
                }

                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);

                updateAttributeStepNumParent();
                updateMarginIndex();
                updateAmountItem();
                startSticky();
            }
        }

        startSticky();
        updateSummary()
        updateAmountTotal();
    });
</script>

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

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

        margins.map(function (data) {
            getTotalSumWithMargin += (parseFloat(data.price) / (1 - Number(data.margin_percentage) / 100) * data.quantity).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).replace(/,/g, '');
            getTotalSum += data.price*data.quantity;
        });

        let data = margins.map(function (data) {
            total = (parseFloat(data.price || 0) / (1 - Number(data.margin_percentage) / 100) * data.quantity).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).replace(/,/g, '');
            ++marginChillIndex;
            return `
            <div class="row" id="calculatorUnit" data-num="${rowRT3Idx}">
                <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]" 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)}" />
                </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}">
                <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"  step="any"/>
                </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" />
                </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-parent="0" data-index="${marginIndex}" class="parent-1">`;
                            pushToHtml +=
                            `<div class="box-item bg-tier-one">
                                <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-2 pr-1">

                                            </div>
                                            <div class="col-10 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>
                                                <span class="input-group-text p-0 font-size-10px pl-0" style="background: transparent;border: 0px; font-size: 12px;">Total Cost   : <span class="R-T1-total-cost" data-num="${rowRT1Idx}"></span></span>
                                                <span class="input-group-text p-0 font-size-10px pl-0" style="background: transparent;border: 0px; font-size: 12px;">Total Profit : <span class="R-T1-total-profit" data-num="${rowRT1Idx}"></span></span>
                                                <span class="input-group-text p-0 font-size-10px pl-0" style="background: transparent;border: 0px; font-size: 12px;">Total Margin %  : <span class="R-T1-total-margin" data-num="${rowRT1Idx}"></span></span>
                                            </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 bg-tier-three">
                                    <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="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 class="row ml-0 mr-0">
                                        <div class="col-6 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-1 pl-0">
                                            <button type="button" data-toggle="collapse"  data-target="#collapseT2-${rowRT2Idx}-${data.sales_item_id}" class="btn btn-dark btn-sm mt-1 collapseTier">
                                                <i class="la la-la la-calculator"></i>
                                            </button>
                                        </div>
                                        <div class="col-3 px-1">
                                            <div class="row">
                                                <div class="col-2 pr-1">
                                                </div>
                                                <div class="col-10 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 type="hidden" id="quantity-${rowRT2Idx}-${data.sales_item_id}"  name="quantity[]" value="0" class="item-quantity decimal">
                                                        <input name="amount[]" class="form-control item-amount text-right" value="${numberSanitize(data.amount, true)}"/>
                                                        <input type="hidden" class="form-control item-amount-hidden" value="${numberSanitize(data.amount)}" id="quantitySellingPrice-${rowRT2Idx}-${data.sales_item_id}" />
                                                    </div>
                                                    <span class="input-group-text p-0 font-size-10px pl-0" style="background: transparent;border: 0px; font-size: 12px;">Total Cost   : <span class="R-T2-total-cost" data-num="${rowRT2Idx}"></span></span>
                                                    <span class="input-group-text p-0 font-size-10px pl-0" style="background: transparent;border: 0px; font-size: 12px;">Total Profit : <span class="R-T2-total-profit" data-num="${rowRT2Idx}"></span></span>
                                                    <span class="input-group-text p-0 font-size-10px pl-0" style="background: transparent;border: 0px; font-size: 12px;">Total Margin %  : <span class="R-T2-total-margin" data-num="${rowRT2Idx}"></span></span>
                                                </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>
                                    <item data-num="${rowRT2Idx}">
                                        <div class="collapse" id="collapseT2-${rowRT2Idx}-${data.sales_item_id}">
                                            <div class="card card-body my-1 mt-2 py-3 px-3 item-tier-3-attemp">
                                                ${mapItemMargin(data.margin, rowRT2Idx, data.sales_item_id, marginIndex, data.quantity)}
                                            </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>
                                    </item>
                                </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 = (parseFloat(data.price).toFixed / (1 - Number(data.margin_percentage) / 100)).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).replace(/,/g, '');
                            pushToHtml +=
                            `<article id="R-T3" class="R-T3" data-num="${rowRT3Idx}" data-parent="${rowRT2Idx-1}" data-step="${rowStepNum}" data-sales-item-id="${data.sales_item_id}" data-index="${marginIndex}">
                                <div class="box-item bg-tier-three">
                                    <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">
                                                <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}" 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}">
                                        <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: async function (evt) {
                    $('.loading-overlay').show();
                    await updateAttributeStepNumParent();
                    await updateMarginIndex();
                    await updateAmountItem();
                    await updateSummary();
                    await updateAmountTotal();
                    $('.loading-overlay').hide();
                },
            });
        }
        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: async function (evt) {
                    $('.loading-overlay').show();
                    await checkTier2(evt);
                    await updateAttributeStepNumParent();
                    await updateMarginIndex();
                    await updateAmountItem();
                    await updateSummary();
                    await updateAmountTotal();
                    $('.loading-overlay').hide();
                },
            });
        }
        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: async function (evt) {
                    $('.loading-overlay').show();
                    var itemElement = evt.item;
                    var targetFigure = itemElement.closest('figure#R-T2').querySelector(".item-amount");

                    var originElement = evt.from;
                    var originFigure = originElement.closest('figure#R-T2').querySelector(".item-amount");

                    await checkTier3(evt.to.parentElement.children[1], evt.from, evt.from.parentElement.children[1]);
                    await updateAttributeStepNumParent();
                    await updateMarginIndex();
                    await updateAmountItem(false,false,false,true, targetFigure, originFigure);
                    await updateSummary();
                    await updateAmountItem(false,false,false,false);
                    await updateAmountTotal();
                    $('.loading-overlay').hide();
                }
            });
        }
        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: async  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);
                    }
                    await updateAttributeStepNumParent();
                    await updateMarginIndex();
                }
            });
        }
    }



    function updateAmountItem(Tier1Change = false,Tier2Change = false, Tier3Change = false, onDrag = false, targetFigure = null, originFigure = null) {

        if(onDrag == false)
        {
            let T1 = document.querySelectorAll(`section#R-T1[data-num]`);
            T1?.forEach( (T2) => {
                let stepT2 = T2.getAttribute('data-step');
                let itemAmount = document.querySelectorAll(`figure[data-step="${stepT2}"] .box-item .item-amount`);
                let totalItem = 0;

                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="${stepT2}"] .box-item .item-scope-amount`);
                passToItemScopeAmount[0].value= Number(parseFloat(totalItem).toFixed(2)).toLocaleString(undefined,{minimumFractionDigits: 2, maximumFractionDigits: 2});

                //UPDATE AMOUNT FOR CHILDREN
                let T3 = T2.querySelectorAll(`article[data-parent]`);
                T3?.forEach( (T4) => {
                    let stepT3 = T4.getAttribute('data-step');
                    let parentT3 = T4.getAttribute('data-parent');

                    let totalItemChild = 0;
                    let itemChildAmount = document.querySelectorAll(`article[data-parent="${parentT3}"][data-step="${stepT3}"] .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="${parentT3}"][data-step="${stepT3}"] .item-amount`);

                    let lastItemAmount = parseFloat(passToItemAmount[0].value.replace(/,/g, ''));
                    //NOT UPDATE VALUE TIER 2 IF == 0
                    if( lastItemAmount == 0 && totalItemChild != 0 ){
                        passToItemAmount[0].value = Number(parseFloat(totalItemChild).toFixed(2)).toLocaleString(undefined,{minimumFractionDigits: 2, maximumFractionDigits: 2});
                    }

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

                    // item-child-amount

                    // parent figure T2



                })

            })
        }
        else{
                // ONLY UPDATE SECTION OF FIGURE ITEM AMOUNT
                var totalSummedOriginAmount = 0;

                $(originFigure).closest('figure#R-T2').find('[id*="quantityTotalPrice"]').map(function(){
                    let amount = removeComma($(this).val()|| "0.00");
                    totalSummedOriginAmount += parseFloat(amount);
                });

                $(originFigure).val(totalSummedOriginAmount);
                $(originFigure).change();
                var totalSummedtargetAmount = 0;

                $(targetFigure).closest('figure#R-T2').find('[id*="quantityTotalPrice"]').map(function(){
                    let amount = removeComma($(this).val()|| "0.00");
                    totalSummedtargetAmount += parseFloat(amount);
                });

                $(targetFigure).val(totalSummedtargetAmount);
                $(targetFigure).change();

                updateAmountTotal();

        }



    }

    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 isEmpty(str) {
        return (!str || str.length === 0 );
    }

    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]`);
                boxItem = itemDataT2[b].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]`);
                }
                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 updateAttributeAreaSection() {
        // Select all elements with class "tier-1-sortable" and "tier-area"
        $(".tier-1-sortable .tier-area").each(function() {
            // Change the id attribute to "Tier1"
            $(this).attr("id", "areaT1");

            // Find the input element with class "areaLevel" and change its value to 1
            $(this).find("input.areaLevel").val(1);
        });

        $(".tier-2-sortable .tier-area").each(function() {
            // Change the id attribute to "Tier1"
            $(this).attr("id", "areaT2");

            // Find the input element with class "areaLevel" and change its value to 1
            $(this).find("input.areaLevel").val(2);
        });

        $(".tier-3-sortable .tier-area").each(function() {
            // Change the id attribute to "Tier1"
            $(this).attr("id", "areaT3");

            // Find the input element with class "areaLevel" and change its value to 1
            $(this).find("input.areaLevel").val(3);
        });
    }

    function updateAttributeStepNumParent(){
        let itemDataT1 = document.querySelectorAll(`section#R-T1[data-num], div#areaT1`);
        if(itemDataT1.length > 0){
            let dataNumberT1 = 0;
            let dataStepT1 = 0;

            itemDataT1.forEach((function(x){

                x.setAttribute("data-step",dataStepT1);
                x.setAttribute("data-num",dataNumberT1);
                x.setAttribute("data-parent",0);
                //want set id
                //SET FOR SUMMARY MARGIN PROFIT

                x.querySelector('.R-T1-total-cost')?.setAttribute("data-num",dataNumberT1);
                x.querySelector('.R-T1-total-profit')?.setAttribute("data-num",dataNumberT1);
                x.querySelector('.R-T1-total-margin')?.setAttribute("data-num",dataNumberT1);


                let dataNumberT2 = 0;
                x.querySelectorAll(`figure#R-T2[data-num], div#areaT2`)?.forEach((function(x){
                    let dataParentT2 = x.closest('section#R-T1[data-num]').getAttribute('data-num');
                    let dataStepParentT2 =  x.closest('section#R-T1[data-num]').getAttribute('data-step');

                    //SET DIVIDER TIER 2 SORTABLE ATTRIBUTE
                    x.closest('.tier-2-sortable').setAttribute("data-step",dataStepParentT2);
                    x.closest('.tier-2-sortable').setAttribute("data-parent",dataParentT2);
                    //SET FOR ALL TIER 2
                    x.setAttribute("data-step",dataStepParentT2);
                    x.setAttribute("data-num",dataNumberT2);
                    x.setAttribute("data-parent",dataParentT2);
                    dataNumberT2++
                    //SET FOR SUMMARY MARGIN PROFIT
                    x.querySelector('.R-T2-total-cost')?.setAttribute("data-num",dataNumberT2);
                    x.querySelector('.R-T2-total-profit')?.setAttribute("data-num",dataNumberT2);
                    x.querySelector('.R-T2-total-margin')?.setAttribute("data-num",dataNumberT2);

                    let dataNumberT3 = 0;
                    x.querySelectorAll(`article#R-T3[data-num], div#areaT3`)?.forEach((function(x, index){

                        let dataParentT3 = x.closest('figure#R-T2[data-num]').getAttribute('data-num');
                        let dataStepParentT3 =  x.closest('figure#R-T2[data-num]').getAttribute('data-step');
                        let indexEl = index;

                        // Change the IDs of elements with class "item-child-amount"
                        let itemChildAmountElements = x.querySelectorAll('.item-child-amount');
                        itemChildAmountElements.forEach((item) => {
                            console.log('chnge id tier,3')
                            item.setAttribute("id", `item-child-amount-${dataParentT3}-${dataStepParentT3}-${indexEl}`);
                        });

                        // Change the IDs of elements with class "item-child-amount-hidden"
                        let itemChildAmountHiddenElements = x.querySelectorAll('.item-child-amount-hidden');
                        itemChildAmountHiddenElements.forEach((item) => {
                            item.setAttribute("id", `item-child-amount-hidden-${dataParentT3}-${indexEl}`);
                        });

                        // Change the IDs of elements with class ".iten-quantity"
                        let itemQuantityElements = x.querySelectorAll('.item-quantity');
                        itemQuantityElements.forEach((item) => {
                            item.setAttribute("id", `quantity-${dataParentT3}-${indexEl}`);
                        });
                        // Change the IDs of elements with class "calculatorQuantity"
                        let itemCalculatorQuantityElements = x.querySelectorAll('.calculatorQuantity');
                        itemCalculatorQuantityElements.forEach((item) => {
                            item.setAttribute("id", `calculatorQuantity-${dataParentT3}-${indexEl}`);
                        });

                        // Change the IDs of elements with class "calculatorQuantityTotalPrice"
                        let itemCalculatorQuantityTotalElements = x.querySelectorAll('.calculatorQuantityTotal');
                        itemCalculatorQuantityTotalElements.forEach((item) => {
                            item.setAttribute("id", `calculatorQuantityTotal-${dataParentT3}-${indexEl}`);
                        });

                         // Change the IDs of elements with class "calculatorQuantityTotalPrice"
                         let itemCalculatorQuantityTotalPriceElements = x.querySelectorAll('.calculatorQuantityTotalPrice');
                         itemCalculatorQuantityTotalPriceElements.forEach((item) => {
                             item.setAttribute("id", `calculatorQuantityTotalPrice-${dataParentT3}-${indexEl}`);
                         });
                        // Change the IDs of elements with class "calculatorQuantityTotalPrice"
                        let calculatorQuantitySellingPriceTemp = x.querySelectorAll('.calculatorQuantitySellingPriceTemp');
                        calculatorQuantitySellingPriceTemp.forEach((item) => {
                            item.setAttribute("id", `calculatorQuantitySellingPrice-${dataParentT3}-${indexEl}`);
                        });

                        //SET DIVIDER TIER 3 SORTABLE ATTRIBUTE
                        x.closest('.tier-3-sortable').setAttribute("data-step",dataStepParentT3);
                        x.closest('.tier-3-sortable').setAttribute("data-parent",dataParentT3);
                        //SET FOR ALL TIER 3
                        x.setAttribute("data-step",dataStepParentT3);
                        x.setAttribute("data-num",dataNumberT3);
                        x.setAttribute("data-parent",dataParentT3);
                        dataNumberT3++
                    }))
                }))

                dataNumberT1++;
                dataStepT1++;
            }))
        }
    }

    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()|| "0.00")).toFixed(2);
                totalCost += sumCost;

                // Selling
                sumSelling = (parseFloat(removeComma(calculatorUnitCost.val()|| "0.00")) / (1 - Number(checkUnitMarginPercentage(calculatorUnitMargin.val()|| "0.00")) / 100)*calculatorUnitQuantity.val()|| "0.00").toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).replace(/,/g, '');

                totalSelling += parseFloat(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){
            if(calculatorQuantityParent[0]){
                calculatorQuantityParent[0].value = calculatorQuantityVal;
            }

        }

        if(calculatorAmountParent[0]){
            //CALCULATOR FOR TIER 3
            calculatorAmountParent[0].value = numberSanitize((calculatorQuantityVal * (totalSelling?totalSelling:0)), true);
            calculatorAmountParentHidden[0].value = numberSanitize((totalSelling?totalSelling:0), true);

            // updateAmountItem(false,false,true);
            calculatorQuantity.parent().parent().parent().parent().parent().parent().parent().find('.item-child-amount').map(function(){
                updateSummary("tier3",$(this),"edit");
            });

        }else{

            let totalSPCalculatorT2 = numberSanitize((calculatorQuantityVal * (totalSelling ? totalSelling : 0)), true);
            //CALCULATOR FOR TIER 2
            calculatorAmountParent = calculatorQuantity[0].parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.querySelectorAll(`.item-amount`);
            calculatorAmountParentHidden = calculatorQuantity[0].parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.querySelectorAll(`.item-amount-hidden`);
            calculatorAmountParent[0].value = numberSanitize(((totalSPCalculatorT2?totalSPCalculatorT2:0)), true);
            calculatorAmountParentHidden[0].value = numberSanitize((totalSPCalculatorT2?totalSPCalculatorT2:0), true);
        }

    }

    function updateSummary(type = "", elementTagging = null, action = "edit"){
        let itemDataT1 = document.querySelectorAll(`section#R-T1[data-num]`);

        // IF ANY TIER 3 ITEM EDITED
        // INVOKED IN EVENT HANDLER
        if(type == "tier3" && action == "edit")
        {
            var dynamicID = elementTagging.attr("id");
            var parentElement = $('#' + dynamicID).closest('figure[id="R-T2"]');

            var totalTier3 = 0;

            parentElement.find('[id*="quantityTotalPrice"]').map(function(){
                let amount = removeComma($(this).val()|| "0.00");
                totalTier3 += parseFloat(amount);
            });


            // HERE SHOULD UPDATE THE TIER 2 AMOUNT USING TOTAL TIER3
            var item2amount = totalTier3;
            parentElement.find('.item-amount').map(function(){
                $(this).val(Number(parseFloat(item2amount)).toLocaleString(undefined,{minimumFractionDigits: 0, maximumFractionDigits: 2}).replace(/,/g, ''));
                $(this).trigger("change");
            });

        }

        if (type == "tier3" && action == "delete") {

            var parentElement = $(elementTagging).closest('figure[id="R-T2"]');
            $(elementTagging).closest('article').remove();

            var totalTier3 = 0;

            parentElement.find('[id*="quantityTotalPrice"]').map(function() {
                let amount = removeComma($(this).val() || "0.00");
                totalTier3 += parseFloat(amount);
            });

            // HERE SHOULD UPDATE THE TIER 2 AMOUNT USING TOTAL TIER3
            var item2amount = totalTier3;
            parentElement.find('.item-amount').map(function() {
                $(this).val(Number(parseFloat(item2amount)).toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2 }).replace(/,/g, ''));
            });
        }

        if (type == "tier3" && action == "duplicate") {

            var parentElement = $(elementTagging).closest('figure[id="R-T2"]');
            console.log(parentElement);

            var totalTier3 = 0;

            parentElement.find('[id*="quantityTotalPrice"]').map(function() {
                let amount = removeComma($(this).val() || "0.00");
                totalTier3 += parseFloat(amount);
            });


            // HERE SHOULD UPDATE THE TIER 2 AMOUNT USING TOTAL TIER3
            var item2amount = totalTier3;
            parentElement.find('.item-amount').map(function() {
                $(this).val(Number(parseFloat(item2amount)).toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2 }).replace(/,/g, ''));
            });
        }


        if(itemDataT1.length > 0){
            itemDataT1.forEach((function(x){

                let dataStepT1 = x.closest('section#R-T1[data-step]').getAttribute('data-step');
                let dataNumT1 = x.closest('section#R-T1[data-num]').getAttribute('data-num');

                let tier1Amount = document.querySelector(`section[data-num="${dataNumT1}"][data-step="${dataStepT1}"] .item-scope-amount`).value;
                tier1Amount = parseFloat(removeComma(tier1Amount|| "0.00"));
                let totalItemChildCostT1 = 0;
                let itemChildTotalCostT1 = document.querySelectorAll(`section[data-num="${dataNumT1}"][data-step="${dataStepT1}"] .calculatorQuantityTotal`);
                for (let tc = 0; tc < itemChildTotalCostT1.length; tc++) {
                    totalItemChildCostT1 += parseFloat(itemChildTotalCostT1[tc].value.replace(/,/g, '') ? (isNaN(itemChildTotalCostT1[tc].value.replace(/,/g, '')) ? 0 : itemChildTotalCostT1[tc].value.replace(/,/g, '')) : 0);
                }

                let totalProfitT1 = tier1Amount - totalItemChildCostT1;

                totalProfitT1 = Number(parseFloat(totalProfitT1)).toLocaleString(undefined,{minimumFractionDigits: 2, maximumFractionDigits: 2}).replace(/,/g, '');
                totalItemChildCostT1 = Number(parseFloat(totalItemChildCostT1)).toLocaleString(undefined,{minimumFractionDigits: 2, maximumFractionDigits: 2}).replace(/,/g, '');
                let totalProfitMarginPercentageT1 = parseFloat (( tier1Amount - totalItemChildCostT1) / tier1Amount) *100;
                totalProfitMarginPercentageT1 = Number(parseFloat(totalProfitMarginPercentageT1)).toLocaleString(undefined,{minimumFractionDigits: 0, maximumFractionDigits: 0}).replace(/,/g, '');
                //APPEND TO HTML
                $(`section[data-num="${dataNumT1}"] .R-T1-total-cost`).text(` $ ${totalItemChildCostT1}`)
                $(`section[data-num="${dataNumT1}"] .R-T1-total-profit`).text(` $ ${totalProfitT1}`)
                $(`section[data-num="${dataNumT1}"] .R-T1-total-margin`).text(`${isNaN(totalProfitMarginPercentageT1) ? 0 : totalProfitMarginPercentageT1 }`)

                x.querySelectorAll(`figure#R-T2[data-num]`)?.forEach((function(x){
                    let dataStepT2 = x.closest('figure#R-T2[data-step]').getAttribute('data-step');
                    let dataNumT2 = x.closest('figure#R-T2[data-num]').getAttribute('data-num');
                    let dataParentT2 = x.closest('figure#R-T2[data-num]').getAttribute('data-parent');
                    let totalItemChildT2 = 0;
                    let itemChildAmountT2 = document.querySelectorAll(`figure[data-num="${dataNumT2}"][data-step="${dataStepT2}"] article .item-child-amount`);

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

                    //SHOWING COST AND MARGIN PERCENTAGE
                    let Tier2Amount = document.querySelector(`figure[data-num="${dataNumT2}"][data-step="${dataStepT2}"] .item-amount`).value;
                    Tier2Amount = parseFloat(removeComma(Tier2Amount|| "0.00"));

                    let totalItemChildCostT2 = 0;
                    let itemChildTotalCostT2 = document.querySelectorAll(`figure[data-num="${dataNumT2}"][data-step="${dataStepT2}"] .calculatorQuantityTotal`);
                    for (let tc = 0; tc < itemChildTotalCostT2.length; tc++) {
                        totalItemChildCostT2 += parseFloat(itemChildTotalCostT2[tc].value.replace(/,/g, '') ? (isNaN(itemChildTotalCostT2[tc].value.replace(/,/g, '')) ? 0 : itemChildTotalCostT2[tc].value.replace(/,/g, '')) : 0);
                    }

                    let totalProfitT2 = Tier2Amount - totalItemChildCostT2;

                    //PARSING TO FLOAT
                    totalProfitT2 = Number(parseFloat(totalProfitT2)).toLocaleString(undefined,{minimumFractionDigits: 2, maximumFractionDigits: 2}).replace(/,/g, '');
                    totalItemChildCostT2 = Number(parseFloat(totalItemChildCostT2)).toLocaleString(undefined,{minimumFractionDigits: 2, maximumFractionDigits: 2}).replace(/,/g, '');
                    let totalProfitMarginPercentageT2 =  (( totalProfitT2 ) / Tier2Amount) *100;

                    totalProfitMarginPercentageT2 = Number(parseFloat(totalProfitMarginPercentageT2)).toLocaleString(undefined,{minimumFractionDigits: 0, maximumFractionDigits: 0}).replace(/,/g, '');
                    //APPEND TO HTML
                    $(`figure[data-num="${dataNumT2}"][data-step="${dataStepT2}"] .R-T2-total-cost`).text(` $ ${totalItemChildCostT2}`);
                    $(`figure[data-num="${dataNumT2}"][data-step="${dataStepT2}"] .R-T2-total-profit`).text(` $ ${totalProfitT2}`);
                    $(`figure[data-num="${dataNumT2}"][data-step="${dataStepT2}"] .R-T2-total-margin`).text(`${isNaN(totalProfitMarginPercentageT2) ? 0 : totalProfitMarginPercentageT2 }`);

                }))
            }))
        }


    }



    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>