@extends('admin.layout.master')
@section('title',__('obs.chart_of_accounts'))
@section('custom_style')
<style>
    /* input[type=text],input[type=file], input[type=number] {
        height: 30px !important;
    }
    .table th {
            background: var(--tableHeader);
            padding: 5px !important;
            color: white !important;
    }
    .table th, .table td {
        border: 1px solid #c1c1c1 !important;
    }
    .table th, .table td {
                padding: 0px 5px;
                color: black;
            } */
    thead th { position: sticky; top: 75px;z-index: 1000 }
    /* .hidden_row{
        display: none;
    } */
    /* treee */
    ul.tree, ul.tree ul {
    list-style: none;
     margin: 0;
     padding: 0;
   } 
   ul.tree ul {
     margin-left: 20px;
   }
   ul.tree li {
     margin: 0;
     padding: 0 7px;
     line-height: 20px;
     /* color: #369; */
     /* font-weight: bold; */
     border-left:1px solid rgb(100,100,100);
   }
   ul.tree li:last-child {
       border-left:none;
   }
   ul.tree li:before {
      position:relative;
      top:-0.3em;
      height:1em;
      width:12px;
      color:white;
      border-bottom:1px solid rgb(100,100,100);
      content:"";
      display:inline-block;
      left:-7px;
   }
   ul.tree li:last-child:before {
      border-left:1px solid rgb(100,100,100);   
   }
   /* treee */
   /* show hide by caret */
   .nested {display: none;}
   .nested_show { display: block;}
   .nested_active {display: block;}
   .caret {
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    .caret::before {
        content: "\25B6";
        color: black;
        display: inline-block;
        margin-right: 6px !important;
    }

    .caret-down::before {
        -ms-transform: rotate(90deg);/* IE 9 */
        -webkit-transform: rotate(90deg);/* Safari */'
        transform: rotate(90deg);
    }
   /* show hide by caret */
   /* for opening */
   /* .hidden_input,{
    display: none;
   } */

   /* for opening */
   
   /* toggle input */
   .tgl,.hidden_input,.hidden_row {
       display: none;
   }

   .tgl,
   .tgl:after,
   .tgl:before,
   .tgl *,
   .tgl *:after,
   .tgl *:before,
   .tgl+.tgl-btn {
       box-sizing: border-box;
   }
   .tgl-btn{
    height: 22px !important;
   }

   .tgl::selection,
   .tgl:after::selection,
   .tgl:before::selection,
   .tgl *::selection,
   .tgl *:after::selection,
   .tgl *:before::selection,
   .tgl+.tgl-btn::selection {
       background: none;
   }

   .tgl+.tgl-btn {
       outline: 0;
       display: block;
       width: 4em;
       height: 2em;
       position: relative;
       cursor: pointer;
       user-select: none;
   }

   .tgl+.tgl-btn:after,
   .tgl+.tgl-btn:before {
       position: relative;
       display: block;
       content: &#34;
       &#34;
       ;
       width: 50%;
       height: 100%;
   }

   .tgl+.tgl-btn:after {
       left: 0;
   }

   .tgl+.tgl-btn:before {
       display: none;
   }

   .tgl:checked+.tgl-btn:after {
       left: 50%;
   }

   /* jjj */
   .tgl-skewed + .tgl-btn {
        overflow: hidden;
        /* transform: skew(-10deg); */
        /* z-index: 2000; */
        backface-visibility: hidden;
        transition: all 0.2s ease;
        font-family: sans-serif;
        background: #888;
    }
    .tgl-skewed + .tgl-btn:after, .tgl-skewed + .tgl-btn:before {
        /* transform: skew(10deg); */
        /* z-index: 2000; */
        display: inline-block;
        transition: all 0.2s ease;
        width: 100%;
        text-align: center;
        position: absolute;
        line-height: 2em;
        font-weight: bold;
        color: #fff;
        text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
    }
    .tgl-skewed + .tgl-btn:after {
        left: 100%;
        content: attr(data-tg-on);
    }
    .tgl-skewed + .tgl-btn:before {
        left: 0;
        content: attr(data-tg-off);
    }
    .tgl-skewed + .tgl-btn:active {
        background: #888;
    }
    .tgl-skewed + .tgl-btn:active:before {
        left: -10%;
    }
    .tgl-skewed:checked + .tgl-btn {
        background: #86d993;
    }
    .tgl-skewed:checked + .tgl-btn:before {
        left: -100%;
    }
    .tgl-skewed:checked + .tgl-btn:after {
        left: 0;
    }
    .tgl-skewed:checked + .tgl-btn:active:after {
        left: 10%;
    }
    ..swal2-container{
        /* z-index: 1300000 !important; */
    }
    .table_type_btn0,.table_type_btn1{
        background-color: var(--card_header_font);
        color: var(--card_header);
    }
    .table_type_active{
        background-color: var(--card_header);
        color: var(--card_header_font);
    }
    .table_view0,.table_view1{
        display:none;
    }
    .table_view_show{
        display:block;
    }
    .swal2-container{
        z-index: 1300000 !important;
    }
   
   /* toggle input */
</style> 
@endsection
@section ('content')
<div class="card sina-card">
    @include('admin.layout.title_header', ['title'=>__('obs.chart_of_accounts')])
    <div class="card-body" style="padding-bottom:0">
        <div class="row justify-content-end">
            <div class="col-md-4 col-sm-12"></div>
            <div class="col-md-8 col-sm-12">
                <div class="row">
                    <div class="col ps-0 pe-0">
                        <select id="is_sub" style="height: 30px;" class="select_2 form-control">
                            <option value="3">{{__('obs.ledger')}} {{__('obs.only')}}</option>
                            <option value="1">{{__('obs.sub')}} {{__('obs.ledger')}} {{__('obs.only')}}</option>
                            <option value="2">{{__('obs.request')}} {{__('obs.ledger')}} {{__('obs.only')}}</option>
                            <option value="0">{{__('obs.all')}}</option>
                        </select>
                    </div>
                    <div class="col ps-0 pe-0">
                        <select id="group_id" style="height: 30px;" class="select_2 form-control">
                            <option value="0">{{__('obs.all')}}</option>
                            @forelse ($accountsHeadsOptions as $accGroup)
                                <option value="{{$accGroup->auto_code}}">{{$accGroup->auto_code}} - {{$accGroup->name}}</option>
                            @empty   
                            @endforelse
                        </select>   
                    </div>
                    <div class="col ps-0 pe-0">
                        <ul class="nav nav-tabs d-inline-flex">
                            <li class="nav-item">
                                <a class="btn-xs nav-link account_type table_type_btn0 hidden_content" style="height: 25px;" onclick="getChart(0,this)">{{__('obs.tree')}} {{__('obs.view')}}</a>
                            </li>
                            <li class="nav-item">
                                    <a class="btn-xs nav-link account_type table_type_btn1 hidden_content" style="height: 25px;" onclick="getChart(1,this)">{{__('obs.table')}} {{__('obs.view')}}</a>
                            </li>
                        </ul>
                    </div>
                        {{-- <button id="lol">+ AddNew</button> --}}
                </div>
            </div>
        </div>
    </div>
    <div class="card-body" style="padding-bottom:0" id="divTableDataHolder">
        @php
            $routeName=Route::currentRouteName();   
            $printData=getPrintData($routeName,[]);
        @endphp
        {!!$printData['head']!!}
        <div class="col-md-12 table-responsive-sm" style="padding-bottom: 15px;">
            
            <div class="pro_trans_table">
                <div class="input-group row justify-content-between" style="position: sticky; top: 75px;z-index:1040">
                    <div class="d-flex justify-content-between">
                        <div class="input-group-append d-flex">
                            <button type="button" class="btn-xs btn-dark hidden_content" onclick="showButton(1)"><i class="fa fa-plus"></i></button>
                            <button type="button" class="btn-xs btn-warning hidden_content" onclick="showButton(2)"><i class="fa fa-wrench"></i></button>
                            <button type="button" class="btn-xs btn-warning hidden_content" onclick="showButton(5)"><i class="fa fa-receipt"></i></button>
                            <button type="button" class="btn-xs btn-secondary hidden_content" onclick="showButton(3)"><i class="fa fa-eraser"></i></button>
                            @if(checkAuthPermission('accounts_head.bulk_update'))
                                <button type="button" class="btn-xs btn-danger hidden_content" onclick="showHiddenRow()"><i class="fa fa-check"></i></button>
                            @endif
                            <button type="button" class="table_view0 btn-xs btn-info hidden_content" id="toggle_input_button" onclick="showChild()"><i class=""></i>{{__('obs.all')}}</button>
                            <button type="button" class="table_view1 btn-xs btn-primary hidden_content" onclick="showButton(4)"><i class="fa fa-calendar"></i></button>
                        </div>
                        <div class="input-group-append">
                            <div class="hidden_content hidden_input">
                                <button type="button" class="hidden_content hidden_input btn btn-xs btn-primary" style="min-width: 50px;"  onclick="setSubmitableData()"><i class="fa fa-save me-2"></i>{{__('obs.save')}}</button>
                            </div>
                        </div>
                    </div>
                </div>
                @if(checkAuthPermission('accounts_head.bulk_update'))
                    <div class="hidden_row" style="background-color: rgba(0, 0, 0, .4)">
                        <div class="row hidden_content m-2">
                                <div class="col-3">
                                    <label for="">{{__('obs.group')}} {{__('obs.name')}}</label>
                                    <select name="bulk_parent_id" class="select_2 form-select" id="bulk_parent_id" style="width:100%">
                                        <option value="0">{{__('obs.n_o')}} {{__('obs.change')}}</option>
                                        @forelse ($accountsHeadsOptions as $item)
                                            <option value="{{$item->id}}">{{$item->name}}</option>
                                        @empty
                                            
                                        @endforelse
                                    </select>
                                </div>
                                <div class="col-1">
                                    <label for="">{{__('obs.status')}}</label>
                                    <select name="bulk_status" class="select_2 form-select" id="bulk_status" style="width:100%">
                                        <option value="0">{{__('obs.n_o')}} {{__('obs.change')}}</option>
                                        <option value="1">{{__('obs.active')}}</option>
                                        <option value="2">{{__('obs.inactive')}}</option>
                                    </select>
                                </div>
                                <div class="col-1">
                                    <label for="">{{__('obs.type')}}</label>
                                    <select name="bulk_type" class="select_2 form-select" id="bulk_type" style="width:100%">
                                        <option value="0">{{__('obs.n_o')}} {{__('obs.change')}}</option>
                                        <option value="1">{{__('obs.ledger')}}</option>
                                        <option value="2">{{__('obs.group')}}</option>
                                    </select>
                                </div>
                                <div class="col-2">
                                    <label for="">{{__('obs.balance')}}</label>
                                    <select name="bulk_balance_setting" class="select_2 form-select" id="bulk_balance_setting" style="width:100%">
                                        <option value="0">{{__('obs.n_o')}} {{__('obs.change')}}</option>
                                        <option value="1">{{__('obs.show')}}</option>
                                        <option value="2">{{__('obs.hide')}}</option>
                                        <option value="3">{{__('obs.show')}} {{__('obs.and')}} {{__('obs.restrict')}}</option>
                                        <option value="4">{{__('obs.hide')}} {{__('obs.and')}} {{__('obs.restrict')}}</option>
                                    </select>
                                </div>
                                @if(active_user()==1)
                                    <div class="col-3">
                                        <label for="bulk_warehouse_id">{{__('obs.warehouses')}}</label>
                                        <select class="select_2 form-select" style="width: 100%" name="bulk_warehouse_id" id="bulk_warehouse_id">
                                            <option value="0">{{__('obs.n_o')}} {{__('obs.change')}}</option>
                                            @foreach (adminAsignedWarehouseList() as $wh)
                                                <option value="{{$wh->id}}">{{ $wh->name_eng }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                @endif
                                <div class="col-1">
                                    <br>
                                    <button class="hidden_content btn-xs btn-warning" style="min-width: 50px;" id="submit_buttom" onclick="bulkUpdate()"><i class="fa fa-save"></i>{{__('obs.bulk')}} {{__('obs.update')}}</button>
                                </div>
                        </div>
                    </div>
                @endif
                <div id="_branch" class="container tab-pane active">
                    <div class="cl-table-container" id="report_html" style="max-height:72vh">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@include('admin.global.loader')
@include('admin.slider.global_slider')
@include('accounts.reports.chart_of_accounts.sub_ledger_modal')
@endsection
@section('script')
<script>
   
    const master_voucher = {
        id: null,
        voucher_no: null,
        warehouse_id: @json(current_store()),
        date: @json(date('Y-m-d')),
        cost_center_id: null,
        currency: null,
        roe: 1,
        voucher_group: null,
        note: 'Voucher From Chart Of Accounts', // text
        reff_no: '', // text
        journals: [],
        type: 5,
        attachment: null,
        reff_ledger_id: null,
        is_request: 0,
        request_id: null,
        recurrent_info: null
    };
    const master_journal = {
        sl: null,
        id: null,
        group_id: null,
        group: {},
        ledger_id: null,
        ledger: {},
        cost_center_id: null,
        type: 0,
        amount: 0,
        pre_amount: 0, // Signed amount, - for credit, + for debit
        note: '',
        sub_ledgers: [],
        balance: 0,
        is_loading_info: false,
        cheque_info: { check_number	: null, check_date: null }
    };



    const bulkUpdate=()=> {
        let currentUser=@json(active_user());
        var accounts_head_ids = [];
        $.each($("input[name='bluk_item']:checked"), function() {
            accounts_head_ids.push($(this).val());
        });
        if (accounts_head_ids.length > 0) {
            let link="{{route('accounts_head.bulk_update')}}";
            let c=null;
            let int_data_param={
                parent_id:$('#bulk_parent_id').val(),
                status:Number($('#bulk_status').val()),
                type:Number($('#bulk_type').val()),
                balance_setting:Number($('#bulk_balance_setting').val()),
                ids:accounts_head_ids,
            }
            if(currentUser==1){
                int_data_param.warehouse_id=Number($('#bulk_warehouse_id').val());
            }
            const showResponse=()=>{
                Swal.fire('Update Successfull', '', 'success');
                $('#loader').hide();
            }
            ajaxCall(link,'POST',int_data_param, showResponse);
        } else {
            alert('Please Select Order');
        }
    }
   


    $('.select_2').select2();
    
    const showButton=(type)=>{
        $('.hidden_create_btn').hide();
        $('.hidden_edit_btn').hide();
        $('.hidden_input').hide();
        $('.hidden_create_sub_ledger').hide();
        if(type==4){
            $('.hidden_input_text').hide();
            $('.hidden_input').show();
            $('#submit_buttom').hide();
        }else if(type==1){
            $('.hidden_create_btn').show();
        }else if(type==2){
            $('.hidden_edit_btn').show();
        } else if(type==5){
            $('.hidden_create_sub_ledger').show();
        }
    }
    const getChart=(t,This)=>
    {
        $('.account_type').removeClass('active');
        let type=Number(t);
        $('.hidden_row').hide();//.slow();
        $('.table_type_btn'+type).addClass('table_type_active');
        $('.table_type_btn'+(type==1?0:1)).removeClass('table_type_active');
        let link="{{route('reports.chart_of_accounts')}}";
        let c=null;
        let int_data_param={
            table_view:t,
            group_id:$('#group_id').val(),
            is_sub:$('#is_sub').val(),
            ajax_call:1
        }
        const setReportHtml = data => {
            if(type==1){
                let str=`<table class="table cl-table" style="width: 100%" id="">
                        <thead>
                            <tr style="border:1px solid;">
                                <th class="text-right hidden_content" style="border-right:1px solid;width:20px;"><strong></strong></th>
                                <th class="text-center" style="border-right:1px solid;">
                                    <strong class="">ACCOUNTS HEAD</strong>
                                </th>
                                <th>DETAILS CODE</th>
                                <th class="text-center" style="border-right:1px solid;"><strong class="hidden_input_text">ACCOUNT CODE</strong>
                                    <div class="hidden_content hidden_input">
                                        <div class="d-flex">
                                            <input id="amount-0" type="number" min=".01" step=".01" value="0" class="form-control" readonly/>
                                            <input class="tgl tgl-skewed" type="checkbox" value="0" id="type-0" readonly>
                                            <label class="tgl-btn" data-tg-off="DR" data-tg-on="CR" for="type-0"></label>
                                        </div>
                                    </div>
                                </th>


                            </tr>
                        </thead>
                        <tbody>`+data+`</tbody>
                    </table>`;
                    console.log(str);
                $('#report_html').html(str);
                $('#datatable_apply').dataTable({
                    "paging": false,
                    "ordering": false,
                });
            }else{
                $('#report_html').html(data);
                initToggle();
            }
            $(This).addClass('active');
            $('#loader').hide();
        }
        ajaxCall(link,'GET',int_data_param, setReportHtml);

        $('.table_view'+type).addClass('table_view_show');
        $('.table_view'+(type==1?0:1)).removeClass('table_view_show');
    }
    const showHiddenRow=(type)=>{
        $('#bulk_parent_id').val(0).trigger('change')
        $('.hidden_row').toggle().slow();
    }
    
    // show hide nested row
    const initToggle=()=>{
        var toggler = document.getElementsByClassName("caret");
        var i;
        
        for (i = 0; i < toggler.length; i++) {
            toggler[i].addEventListener("click", function() {
                this.parentElement.querySelector(".nested").classList.toggle("nested_active");
                this.classList.toggle("caret-down");
            });
        }
    }
    const showChild=()=>{
        var toggler = document.getElementsByClassName("caret");
        var toggle_input_button = document.getElementById("toggle_input_button");
        let showCls=toggle_input_button.classList;
        showCls.toggle("toggle_input_button_active");
        var p=0;
        for (p = 0; p < toggler.length; p++) {
            if(showCls.contains('toggle_input_button_active')){
                if(toggler[p].parentElement.querySelector(".nested")){
                    toggler[p].parentElement.querySelector(".nested").classList.add("nested_active");
                    toggler[p].classList.add("caret-down");
                }
            }else{
                if(toggler[p].parentElement.querySelector(".nested")){
                    toggler[p].parentElement.querySelector(".nested").classList.remove("nested_active");
                    toggler[p].classList.remove("caret-down");
                }
            }
        }
    }
    let rawData=[];
    let submitableData=[];
    let ledger_id=@json(getInitDataWithKeyWord('opening')->ledger_id);
    const updateObjectForSubmit=(id)=>{
        var amount=Number($('#amount-'+id).val());
        var type=$('#type-'+id).attr('checked')?1:0;
        console.log(type);
        if(amount>0){
            // let data_pass={'id':id,'ledger_id':id,'amount':amount,'note':'','type':type}
            let data_pass = JSON.parse(JSON.stringify(master_journal));
            data_pass.ledger_id = id;
            data_pass.amount = amount;
            data_pass.type = type;
            let item = rawData.find( t  => t.ledger_id == id);
            if (item) {
                item.amount=amount;
                item.type=type;
            } else {
                rawData.push(data_pass);
            }            
        }else{
            rawData=rawData.filter( t  => t.id != id);
        }
        setDataForSubmit();
    }
    const updateType=(id)=>{
        if($('#type-'+id).attr('checked')){
            $('#type-'+id).attr('checked',false);
        }else{
            $('#type-'+id).attr('checked',true);
        }
        updateObjectForSubmit(id);
    }
    const setDataForSubmit=()=>{
        if(rawData.length){
            let dTotal=0;
            let cTotal=0;
            for (let index = 0; index < rawData.length; index++) {
                if(rawData[index].type==0){
                    dTotal+=Number(rawData[index].amount);
                }else{
                    cTotal+=Number(rawData[index].amount);
                }
            }
            // $('#cart-data').show();
            if(dTotal>cTotal){
                $('#amount-0').val(parseFloat(dTotal-cTotal).toFixed(2));
                $('#type-0').attr('checked',true);
            }else if(dTotal<cTotal){
                $('#amount-0').val(parseFloat(cTotal-dTotal).toFixed(2));
                $('#type-0').attr('checked',false);
            }else if(rawData.length && (dTotal==cTotal)){
                $('#amount-0').val(0);
                $('#type-0').attr('checked',true);
            }
            $('#submit_buttom').show();
        }else{
            $('#submit_buttom').hide();
        }
    }
    const setSubmitableData=()=>{
        Swal.fire({
            icon: 'info',
            title: 'Confirmation',
            html: 'Are You Sure?',
            showConfirmButton: true,
            position: 'center',
            timer: null,
        }).then(() => {
            let total_amount=Number($('#amount-0').val());
            let type=$('#type-0').attr('checked')?1:0;
            if(ledger_id>0){
                submitableData=[];
                // let obj = {id:ledger_id,ledger_id:ledger_id,amount:total_amount,type:type,note:''}
                let obj = JSON.parse(JSON.stringify(master_journal));
                obj.ledger_id = ledger_id;
                obj.amount = total_amount;
                obj.type = type;
                
                submitableData= [...rawData];
                submitableData.push(obj);
                console.log('before submit',submitableData,rawData);
                saveVoucher();
            }else{
                Swal.fire('Please Select Cash Bank!', '', 'danger');
            }
        });
    }
    const saveVoucher=()=>{
        let link="{{route('voucher.voucher_posting_store')}}";
        let c=null;
        master_voucher.journals = submitableData;
        let payload={
            voucher: JSON.stringify(master_voucher),
            version: 3
        }
        const setReloadtHtml = data => {
            callSweetAlert('success','<p class="text-success">Saved Successfully!</p>','',1,()=>{window.location.reload();});
        }
        ajaxCallV2(link,'POST',payload, setReloadtHtml);
    }
    
    const updateStatus=(id)=>{
        let link="{{route('accounts_head.update')}}";
        let int_data_param={
            edit_id:id,
            status_update:1
        }
        const setCallBackData = data => {
            console.log(data);
            let msg='';
            let msgType='';
            if(data.length){
                msg='Saved Successfully!';
                msgType='success';
            }else{
                msg=data;
                msgType='danger';
            }
            Swal.fire(msg, '', msgType);
            if(data.status){
                $('#status_active_btn'+id).addClass('btn-success').removeClass('btn-danger');
                $('#status_active_text'+id).addClass('text-dark').removeClass('text-danger');
            }else{
                $('#status_active_btn'+id).addClass('btn-danger').removeClass('btn-success');
                $('#status_active_text'+id).addClass('text-danger').removeClass('text-dark');
            }
            $('#loader').hide();
        }
        ajaxCall(link,'POST',int_data_param, setCallBackData);
    }
    const approvedRequest=(ele,id)=>{
        let int_data_param={
            edit_id:id,
        }
        if(ele.checked){
            int_data_param.status_update=1;
            int_data_param.is_sub=3;
        }else{
            int_data_param.status_update=0;
            int_data_param.is_sub=2;
        }
        let link="{{route('accounts_head.request_update')}}";
        const setCallBackData = data => {
            console.log(data);
            let msg='';
            let msgType='';
            if(data.length){
                msg='Saved Successfully!';
                msgType='success';
            }else{
                msg=data;
                msgType='danger';
            }
            Swal.fire(msg, '', msgType);
            // if(data.status){
            //     $('#status_active_btn'+id).addClass('btn-success').removeClass('btn-danger');
            //     $('#status_active_text'+id).addClass('text-dark').removeClass('text-danger');
            // }else{
            //     $('#status_active_btn'+id).addClass('btn-danger').removeClass('btn-success');
            //     $('#status_active_text'+id).addClass('text-danger').removeClass('text-dark');
            // }
            $('#loader').hide();
        }
        ajaxCall(link,'POST',int_data_param, setCallBackData);
    }
    var row;
    const start=()=>{
        row = event.target;
    }
    const dragover=()=>{
        var e = event;
        e.preventDefault();
        // e.target;
        row.style.backgroundColor='red';
        etp=e.target.parentNode;
        let children= Array.from(etp.parentNode.children);
        if(children.indexOf(etp)>children.indexOf(row)){
            etp.after(row);
        }else{
            etp.before(row);
        }
    }
    const dragend=(t,n)=>{
        var e = event;
        e.preventDefault();
        row.style.backgroundColor='lightblue';
        let nrow=e.target;
        const target = $(".item-head").eq($(".item-head").index($(row))-1)[0];
        // etp=n.target.parentNode;
        // console.log('parent',target);
        if(t!=1){
            $('#status_active_text'+target.dataset.id).css('background-color','yellow');
        }else{
            target.style.backgroundColor='yellow';
        }
        // let children= Array.from(etp.parentNode.children);
        // if(children.indexOf(etp)>children.indexOf(row)){
        //     etp.after(row).slow();
        // }else{
        //     etp.before(row).slow();
        // }
    }
    $(document).ready(function() {
        select2ModalV1('slider_select_2', 'side_modal');
    })

    const showSubLedger = (id) => {
        let link = "{{ route('accounts_head.sub_ledger_create') }}";
        let int_data_param = {
            id: id
        }
        $('#sub_ledger_modal_ledger_id').val(id);
        ajaxCall(link, 'GET', int_data_param, function(data) {
            $('#loader').hide();
            $('#subLedgerModalLabel').html('Sub Ledger of ' + data.ledger_name);
            $('#sub_ledger_table_body').html('');
            data.sub_ledgers.forEach(function(sub_ledger) {
                addNewSubLedgerRow(sub_ledger);
            })
            if(data.sub_ledgers.length==0){
                addNewSubLedgerRow();
            }
            $('#subLedgerModal').modal('show');
        });
    }

    $(document).ready(function() {
       $(document).on('submit', '#sub_ledger_form', function(event) {
           event.preventDefault();
            let link = "{{ route('accounts_head.sub_ledger_store') }}";
            let int_data_param = new FormData(this);
            ajaxCallV2(link, 'POST', int_data_param, function(data) {
                $('#loader').hide();
                $('#subLedgerModal').modal('hide');
                Swal.fire('Sub Ledger Saved Successfully!', '', 'success');
            }, function(data) {
                $('#loader').hide();
            }, 3);
       });
    });

    const addNewSubLedgerRow = (sub_ledger = null) => {
        let html = '';
        html += '<tr>';
        html += `<td><input type="text" class="form-control" name="sub_ledger_name[]" value="${sub_ledger ? sub_ledger.name_eng : ''}"></td>`;
        html += '<input type="hidden" class="form-control" name="sub_ledger_id[]" value="'+(sub_ledger ? sub_ledger.id : '')+'">';
        html += `<td><button type="button" class="btn btn-sm btn-danger rounded ${ sub_ledger ? 'd-none' : ''}" onclick="removeSubLedgerRow(this)"><i class="bi bi-trash"></i></button></td>`;
        html += '</tr>';
        $('#sub_ledger_table_body').append(html);
    }
    const removeSubLedgerRow = (ele) => {
        $(ele).parent().parent().remove();
    }
</script>
@stop