@extends('admin.layout.master')
@section('title','VOUCHER MANAGEMENT')
@section('custom_style')
<style>
    input[type=text],
    input[type=file],
    input[type=date],
    input[type=number] {
        height:24px !important;
        padding: 0;
        line-height: 1.2;
    }
    /* button[type=button] {
        height: 30px !important;
    } */
    /* .select2-container .select2-selection--single{
        height: 30px !important;
    }
    .padding_apply{
        padding-left: 1px;
    }
    .table thead th {
        border: 1px solid black !important;
        text-align: center;
        vertical-align: middle;
    }
    */
    .card-body{
        padding:.25rem !important;
    }
    /* .table th,
    .table td {
        padding: 0;
        color: black;
    }*/

    .table th,.table td {
        padding: 0.15rem 0.35rem !important;
        vertical-align: top !important;
    }  
    .row_secondary th,td{
        padding: 0 !important;
    }
    :root{
        --cl-theme-bg: #f5f2f2;
        --cl-body: #ebf1f5;
        /* accent-color */
        --cl-btn-default-color: rgba(5, 5, 5, 1);
        --cl-black: #000;
        --cl-white: #fff;
        --cl-gray-dark: #343a40;
        --cl-offwhite: #928f8f;
        --cl-gray-50: #faf9f9;
        --cl-gray-100: #f3f5f3;
        --cl-gray-200: #e9ecef;
        --cl-gray-300: #dee2e6;
        --cl-gray-400: #ced4da;
        --cl-gray-500: #adb5bd;
        --cl-gray-600: #6c757d;
        --cl-gray-700: #495057;
        --cl-gray-800: #343a40;
        --cl-gray-900: #212529;
        --cl-red: #fa0935;
        --cl-indigo: #5f10f2;
        --cl-purple: #6f42c1;
        --cl-yellow: #ffd900;
        --cl-green: #14d883;
        --cl-coral: #f76f3e;
        --cl-transparent: transparent;
        --cl-box-shadow-sm: 0 .17rem 0.35rem rgba(0, 0, 0, .25);
        --cl-box-shadow-sm-dark: 0 .17rem 0.35rem rgba(0, 0, 0, .6);

        
        --cl-primary:#14d883;
        --cl-primary-dark:#6f4294;
        --cl-text:#000000;
        --cl-active-text:#ffffff;
        
    }
    .cl-shadow-sm {
    box-shadow: var(--cl-box-shadow-sm) !important;
}

.cl-shadow-sm-dark {
    box-shadow: var(--cl-box-shadow-sm-dark) !important;
}

.cl-shadow-bottom {
    -webkit-box-shadow: 0 0.5rem 0.6rem -0.5rem rgb(0 0 0 / 16%) !important;
    box-shadow: 0 .5rem .6rem -0.5rem rgba(0, 0, 0, .16) !important;
}

.cl-glass-bg {
    background-image: linear-gradient(to right bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.4));
    -webkit-backdrop-filter: blur(0.6rem);
    backdrop-filter: blur(0.4rem);
}

.active-link {
    background-color: var(--cl-primary);
    color: var(--cl-active-text);
}


/*============================================
            PRISM CODE
===================================== */
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
    background: var(--cl-white);
}


/*============================================
            FLATPICKR CSS
===================================== */
.flatpickr-day.today {
    border-color: var(--cl-primary);
}

.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
    cursor: pointer;
    outline: 0;
    background: var(--cl-gray-200);
    border-color: var(--cl-gray-400);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: var(--cl-primary);
    color: var(--cl-white);
    border-color: var(--cl-primary-dark);
}

#main {
    margin-top: 1.2rem;
}

.cl-content {
    width: calc(100% - 15.2rem);
    margin-left: 15.2rem;
    margin-right: 0;
    position: relative;
    transition: 0.35s ease-in-out;
}

.cl-content.full-width {
    width: 100%;
    margin-left: 0;
}

.header-section .header-right .nav-link {
    padding-top: 0;
    padding-bottom: 0;
}

.header-section .navbar-brand {
    max-width: 100px;
    line-height: 0px;
}

.header-user-dropdown {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-user-dropdown-img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 5px;
}

.header-user-dropdown img {
    max-width: 100%;
}


/*============================================
            TABLE
===================================== */
.cl-table i {
    font-size: 1.15rem;
}

.cl-table-container {
    position: relative;
    width: 100%;
    z-index: 1;
    overflow: auto;
}

.cl-table-container .cl-table {
    min-width: 700px;
}

.cl-table thead,
.cl-table tfoot {
    background: var(--cl-gray-100);
    position: -webkit-sticky;
    position: sticky;
    z-index: 30;
}

.cl-table thead,
.cl-table thead th,
.cl-table thead td {
    top: 0;
    white-space: nowrap;
    padding: 0.25rem 0.35rem;
}

.cl-table-container thead .cl-fixed-cell,
.cl-table-container thead .cl-fixed-cell {
    top: 0;
}

.cl-table-container tfoot,
.cl-table-container tfoot th,
.cl-table-container tfoot td {
    bottom: 0;
}

.cl-table th:first-child,
.cl-table td:first-child {
    background-color: var(--cl-gray-100);
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 1;
}

.cl-table .cl-fixed-cell {
    background-color: var(--cl-gray-100) !important;
    position: -webkit-sticky;
    position: sticky;
    z-index: 1;
}

.cl-fixed-cell.cl-fixed-cell-end.active:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0px;
    height: 100%;
    width: 10px;
    display: block;
    box-shadow: 0.4rem 0 0.45rem -0.15rem #00000066 !important;
    z-index: -1;
}



/*============================================
            INPUT
===================================== */
.cl-table.cl-voucher-table thead {
    background: var(--cl-primary);
}

.cl-table.cl-voucher-table thead td,
.cl-table.cl-voucher-table thead th,
.cl-table.cl-voucher-table tfoot td,
.cl-table.cl-voucher-table tfoot th {
    color: var(--cl-active-text);
}

.cl-table .cl-fixed-cell {
    background: none !important;
}

.cl-voucher-input {
    padding: 0;
    line-height: 1.2;
    height: 1.5rem;
    background-color: transparent;
    border: 0;
    margin: 0;
    font-weight: 500;
}

.cl-voucher-input:focus {
    border: 0;
    box-shadow: none;
    outline: none;
    background-color: var(--cl-white);
}

.cl-voucher-input[type=number]::-webkit-outer-spin-button,
.cl-voucher-input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cl-voucher-input[type=number] {
    -moz-appearance: textfield;
}

.cl-custom-select {
    height: 140px;
    overflow-y: auto;
}

.cl-voucher-input+.select2-container--default .select2-selection--single {
    background-color: transparent;
    border: none;
    outline: none;
    border-radius: 0.2rem;
}

.cl-voucher-input+.select2-container--focus {
    background-color: var(--cl-white);
}

.cl-voucher-input+.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--cl-text);
    line-height: 1.2;
    height: 1.5rem;
    display: flex;
    align-items: center;
}

.cl-voucher-input+.select2-container .select2-selection--single {
    height: 1.5rem;
}

.cl-voucher-input+.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 1.5rem;
    line-height: 1.2;
    width: 1.2rem;
}

.cl-voucher-input+.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
    background-color: var(--cl-white);
}


/*============================================
            DASHBOARD
===================================== */
.dashboard-top {
    height: 160px;
}

.dashboard-icon-container {
    width: 4rem;
    height: 4rem;
}

.dashboard-icon-container i {
    font-size: 2rem;
}

/*============================================
            SIDEBAR WIDGET
===================================== */
.widget-offcanvas-button-holder {
    position: fixed;
    bottom: 2rem;
    right: 0;
    width: 4.5rem;
    padding: 0.3rem;
    border: 1px solid var(--cl-gray-100);
    border-radius: 5rem 0 0 5rem;
    background-color: var(--cl-white);
    opacity: 0.6;
    transition: 0.5s ease-in-out;
    z-index: 90;
}

.widget-offcanvas-button-holder.offcanvas-button-holder-left {
    right: initial;
    left: 0;
    border-radius: 0 5rem 5rem 0;
}

.widget-offcanvas-button {
    height: 2.8rem;
    width: 2.8rem;
    border-radius: 50%;
    padding: 0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cl-primary);
    transition: 0.5s ease-in-out;
}

.widget-offcanvas-button-holder:hover {
    opacity: 1;
}

.widget-offcanvas-button-holder:hover .widget-offcanvas-button {
    background-color: var(--cl-primary);
}

.widget-offcanvas-button:focus {
    background-color: var(--cl-primary);
    outline: none;
    box-shadow: none;
}

.widget-offcanvas-button i {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--cl-white);
    transition: 0.5s ease-in-out;
}

.widget-offcanvas-button:hover i,
.widget-offcanvas-button:focus i {
    transform: rotate(90deg);
}

.widget-offcanvas-button:active {
    outline: none;
}

.offcanvas-item .color-item {
    height: 1.75rem;
    width: 1.75rem;
    display: inline-block;
    cursor: pointer;
}

.color-item.active {
    position: relative;
}

.color-item.active::after {
    content: '';
    height: 0.75rem;
    width: 0.75rem;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--cl-white);
}

.bi.bi-arrows-expand::before {
    transform: rotate(90deg);
}

.row_secondary{
    max-height:20px;
    /* background-color: #212529; */
}


</style>
<style>
    
/*============================================
            AUTOCOMPLETE
===================================== */
.cl-autocomplete {
    position: relative;
    display: block;
}

.cl-autocomplete-container {
    position: absolute;
    border: 1px solid var(--cl-gray-100);
    border-radius: 0.5rem;
    border-bottom: none;
    border-top: none;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 10rem;
    overflow-y: auto;
    overflow-x: scroll;
    z-index: 60;
}

.cl-autocomplete-container div {
    padding: 0.12rem 0.4rem;
    height: 1.75rem;
    cursor: pointer;
    background-color: var(--cl-white);
    border-bottom: 1px solid var(--cl-gray-100);
}

.cl-autocomplete-container div:hover {
    background-color: var(--cl-gray-200);
}

.cl-autocomplete-active {
    background-color: var(--cl-primary) !important;
    color: var(--cl-white);
}
</style>
@endsection
@section ('content')
<div class="wrapper mb-4">
    <nav class="mb-3">
        <div class="nav nav-tabs" id="nav-tab" role="tablist">
            <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#voucher" type="button"
                role="tab" aria-controls="voucher" aria-selected="true">
                Voucher
            </button>
            <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#invoice"
                type="button" role="tab" aria-controls="invoice" aria-selected="false">
                Install Invoice
            </button>
        </div>
    </nav>

    <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="voucher" role="tabpanel" tabindex="0">
            <div class="d-flex justify-content-between mb-4">
                <div>
                    <div class="d-flex">
                        <strong class="me-2 text-center cl-bg-primary cl-text-primary cl-text-primary-active"
                            style="width: 8rem">Voucher Type :</strong>
                        <span><strong>{{strtoupper(str_replace('_',' ',$voucher_type['name']))}}</strong></span>
                    </div>
                    <div class="d-flex">
                        <div class="input-group">
                            <strong class="me-2 text-center cl-bg-primary cl-text-primary cl-text-primary-active"
                                style="width: 8rem">Voucher Date :</strong>
                            <input type="date" style="max-width:100px;text-align:center" name="date" id="voucher_date"  class="form-control" min="{{getAllowedPostDate()}}" max="{{getAllowedPostDate(1)}}" value="{{session('voucher_date')?date('Y-m-d',strtotime(session('voucher_date'))):date('Y-m-d')}}" />
                        </div>
                    </div>
                </div>
                <div>
                    <div class="d-flex justify-content-start">
                        {{-- <strong class="text-right">02 Nov 2022, Thursday</strong> --}}
                        <div class="input-group">
                            <strong class="me-2 text-left" style="width: 8rem">Reference</strong>
                            <input type="text" name="reff" id="reff"
                                class="form-control reff" />
                        </div>
                        
                    </div>
                    <div class="d-flex justify-content-start">
                        <div class="input-group">
                            <strong class="me-2 text-left" style="width: 8rem">CostCenter</strong>
                            <select name="cost_center_id" width="100%" id="cost_center_id" class="select_2 form-control">
                                <option value="0">{{'ALL'}}</option>
                                @forelse ($cost_centers as $cost_center)
                                <option value="{{$cost_center->id}}">
                                    {{$cost_center->name}}</option>
                                @empty

                                @endforelse
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            {{-- @include('accounts.voucher.voucher_header') --}}

            <div class="cl-table-container rounded-2" style="height: 50vh">
                <table class="table mb-0 rounded-2 cl-bg-transparent cl-table cl-voucher-table table-borderless"
                    style="min-width: 992px">
                    <thead>
                        <tr>
                            <th class="cl-fixed-cell" scope="col" style="width: 40px">#</th>
                            <th scope="col text-center" style="width: 15%">Group</th>
                            <th scope="col">Particulars</th>
                            <th class="text-end" scope="col" style="width: 200px">Debit</th>
                            <th class="text-end" scope="col" style="width: 200px">Credit</th>
                        </tr>
                        <tr></tr>
                    </thead>
                    <tbody>
                        <tr style="height: 0.5rem"></tr>
                        <tr class="cl-voucher-row row-1">
                            <th scope="row" class="cl-fixed-cell voucher-sl">1</th>
                            <td>
                                <div class="position-relative">
                                    <input type="text" class="form-control">
                                </div>
                            </td>
                            <td>
                                <div class="position-relative">
                                    <div>
                                        <input type="text" id="ledger_id-1" data-id="1" data-ledger_id="" data-balance_limit="" data-reference_type="" data-balance_setting="" class="form-control cl-voucher-input cl-autocomplete cl-autocomplete-1">
                                    </div>
                                    <div class="position-relative d-flex align-items-center">
                                        <div class="col">
                                            <span id="msg-1" class="d-flex"></span><span id="show_bal-1"></span>
                                        </div>
                                        <div class="col">
                                            <input type="text" id="note-1" class="form-control cl-voucher-input row_secondary">
                                        </div>
                                        <div class="col">
                                            <input type="text" id="note-1" class="form-control cl-voucher-input row_secondary">
                                        </div>
                                        <div class="col">
                                            <input type="text" id="note-1" class="form-control cl-voucher-input row_secondary">
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td class="text-end">
                                <input type="number" class="dr_amount form-control cl-form-control cl-voucher-input text-end"
                                    id="dr_amount-1" onkeyup="updateObjectForSubmit(1,0)">
                            </td>
                            <td class="text-end">
                                <input type="number" class="cr_amount form-control cl-form-control cl-voucher-input text-end"
                                id="cr_amount-1" onkeyup="updateObjectForSubmit(1,1)">
                            </td>
                        </tr>
                        {{-- <tr class="row_secondary row-1">
                            <td colspan="2"></td>
                            <td id="others_info-1">
                                <div class="position-relative d-flex">
                                    <label id="msg-1">CurrentBalance:</label><span id="show_bal-1"></span>
                                    <input type="text" id="note-1" class="form-control cl-voucher-input row_secondary">
                                </div>
                            </td>
                            <td id="cheque_date-1"></td>
                            <td id="cheque_number-1"></td>
                        </tr> --}}
                    </tbody>
                </table>
            </div>

            <div class="d-flex justify-content-between mt-3">
                <div class="me-3">
                    <div>
                        <strong>Narration</strong>
                    </div>

                    <div>
                        <textarea name="" id="" class="form-control cl-form-control cl-voucher-input voucher-narration" cols="50"></textarea>
                    </div>
                </div>

                <div class="d-flex align-items-start justify-content-end">
                    <div style="width: 200px" class="text-end border-top border-bottom border-dark">
                        <input type="number" class="form-control cl-form-control cl-voucher-input text-end"
                            id="dr_total_amount" readonly>
                    </div>
                    <div style="width: 200px" class="text-end border-top border-bottom border-dark">
                        <input type="number" class="form-control cl-form-control cl-voucher-input text-end"
                            id="cr_total_amount" readonly>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="invoice" role="tabpanel" tabindex="0">
            
        </div>
    </div>
</div>

@include('accounts.voucher.modal_accounts_ledger')
@include('accounts.voucher.modal_head_accounts_code')
@include('accounts.voucher.modal_previous_voucher')
{{-- @include('accounts.voucher.madal_cost_center') --}}

@endsection
@section('script')
<!-- page script -->
<script type="text/javascript">
$('.select_2').select2();   
let rawData=[];

function getCheckField(row_id){
    var type=  $('#row-'+row_id+' option:selected').attr('data-type');
    if(type==2){
        // $('#cheque_date_field-'+row_id).show('slow');
        // $('#cheque_no_field-'+row_id).show('slow');
        $('#cheque_tr'+row_id).show('slow');
        getAvailaibleChequeNo(row_id);
        $('.cheque_no').select2();

    }else{
        // $('#cheque_date_field-'+row_id).hide('slow');
        // $('#cheque_no_field-'+row_id).hide('slow');
        $('#cheque_tr'+row_id).hide('slow');
    }
}
</script>
{{-- @include('accounts.voucher.voucher_js') --}}
<script>
    // AUTOCOMPLETE INPUT
    const closeAllLists = () => {
        const allOption = document.querySelector('.cl-autocomplete-container');

        if (allOption)
            allOption.remove()
    }

    const filterOption = (inputField, dataArray) => {
        const inputValue = inputField.value;
        return dataArray.filter((el) => (el.auto_code+'--'+el.name).toLowerCase().includes(inputValue.toLowerCase()))
        // return dataArray.filter(data => data.name.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1)
    }

    const createOptions = (inputField, dataArray) => {
        let currentFocus ,innerEl, parentEl, inputValue = inputField.value;
        //currentFocus = -1;
        closeAllLists()
        if (!inputValue) {
            return false;
        }
        const boldString=(str, substr)=> {
            var strRegExp = new RegExp(substr, 'gi');
            return str.replace(strRegExp, '<strong>'+substr+'</strong>');
        }
        currentFocus = -1;
        parentEl = document.createElement("DIV");
        parentEl.setAttribute("class", "cl-autocomplete-container");
        inputField.parentNode.appendChild(parentEl);


        dataArray.map(item => {
            innerEl = document.createElement("DIV");
            let textel=boldString(item.auto_code+'--'+item.name,inputValue);
            innerEl.innerHTML = textel;
            innerEl.innerHTML += "<input type='hidden' class='cl-autocomplete-hidden-input' data-balance_limit='"+item.balance_limit+"' data-balance_setting='"+item.balance_setting+"' data-reference_type='"+item.reference_type+"' data-ledger_id='"+item.id+"' value='" + item.name + "'>";
            innerEl.addEventListener("click", function () {
                let d=this.querySelector(".cl-autocomplete-hidden-input");
                inputField.value = d.value;
                inputField.dataset.ledger_id = d.dataset.ledger_id;
                inputField.dataset.balance_setting = d.dataset.balance_setting;
                inputField.dataset.reference_type = d.dataset.reference_type;
                inputField.dataset.balance_limit = d.dataset.balance_limit;
                
                showCurrentBalance(inputField.dataset.id,d.dataset.ledger_id,d.dataset.balance_setting,d.dataset.reference_type,d.dataset.balance_limit);
                closeAllLists();
            });
            parentEl.appendChild(innerEl);
        })

        const removeActive = (options) => {
            for (const item of options) {
                item.classList.remove("cl-autocomplete-active")
            }
        }

        const addActive = (options,c) => {
            if (!options) return false;
            removeActive(options);
            if (currentFocus >= options.length) currentFocus = 0;
            if (currentFocus < 0) currentFocus = (options.length - 1);
            console.log(currentFocus,c);
            options[currentFocus].classList.add("cl-autocomplete-active");
        }
        
        // const selectionOnkeyMovement = (e) => {
        //     let options = document.querySelector('.cl-autocomplete-container');
        
        //     if (options) options = options.getElementsByTagName("div");
        //     if (e.keyCode == 40) {
        //         currentFocus++;
        //         addActive(options,40);
        //         // options.scrollTo(window.scrollX, window.scrollY + 1);
        //     } else if (e.keyCode == 38) {
        //         currentFocus--;
        //         addActive(options,38);
        //         // options.scrollTo(window.scrollX, window.scrollY - 1);
        //     } else if (e.keyCode == 13) {
        //         e.preventDefault();
        //         if (currentFocus > -1) {
        //             console.log('selected',currentFocus);
        //             if (options) options[currentFocus].click();
        //         }
        //     }
        // }

        // inputField.addEventListener('keydown', selectionOnkeyMovement);
    }

    const getJournalVoucherData = async (inputField) => {
        let selectData = [];

        await $.ajax({
            url: "{{route('accounts_settings.ledger_search')}}",
            type: "GET",
            data: function (term) {
                var group_code=$('#group_row-'+rrow_id).val();
                return {
                    _token: $('meta[name="csrf-token"]').attr("content"),
                    search_type: 2,
                    group_code:null,
                    name: term
                };
            },
            success: function (response) {
                console.log(response);
                selectData = response;
                selectData =  filterOption(inputField, selectData);
                createOptions(inputField, selectData)
            },
            error: function (response) {
                console.log(response);
            },
        });

    }


    // ADD/REMOVE CLASS ON INPUT FOCUS
    const cl_inputs = '.cl-voucher-input';

    $(document).on('focus', cl_inputs, function () {
        $(this).parents('tr').addClass('cl-bg-primary-transparent');
        // autocomplete(document.querySelectorAll(".cl-autocomplete"), selectData);
    })

    $(document).on('blur', cl_inputs, function () {
        $(this).parents('tr').removeClass('cl-bg-primary-transparent');
        if ($(this).parent().find('.popup-msg')) {
            $(this).parent().find('.popup-msg').remove();
        }
    })

    let sl = 1;
    let currentFocus=0;
    const initialRow =(i,amt=0,t=0)=>{ //t=1 for dr t=2 for cr
        let returnStr=`<tr class="cl-voucher-row row-${i}">
                            <th scope="row" class="cl-fixed-cell voucher-sl">${(i==0?(sl+1):i)}</th>
                            <td>
                                <div class="position-relative">
                                    <input type="text" class="form-control">
                                </div>
                            </td>
                            <td>
                                <div class="position-relative">
                                    <div>
                                        <input type="text" id="ledger_id-${i}" data-id="${i}" data-ledger_id="" data-reference_type="" data-balance_setting="" class="form-control cl-voucher-input cl-autocomplete cl-autocomplete-${i}">
                                    </div>
                                    <div class="position-relative d-flex align-items-center">
                                        <div class="col">
                                            <span id="msg-${i}"></span><span id="show_bal-${i}"></span>
                                        </div>
                                        <div class="col">
                                            <input type="text" id="note-${i}" class="form-control cl-voucher-input row_secondary">
                                        </div>
                                        <div class="col">
                                            <input type="text" id="note-${i}" class="form-control cl-voucher-input row_secondary">
                                        </div>
                                        <div class="col">
                                            <input type="text" id="note-${i}" class="form-control cl-voucher-input row_secondary">
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td class="text-end">
                                <input type="number" class="dr_amount form-control cl-form-control cl-voucher-input text-end"
                                    id="dr_amount-${i}" onkeyup="updateObjectForSubmit(${i},0)" value="${t==1?amt:0}">
                            </td>
                            <td class="text-end">
                                <input type="number" class="cr_amount form-control cl-form-control cl-voucher-input text-end"
                                id="cr_amount-${i}" onkeyup="updateObjectForSubmit(${i},1)" value="${t==2?amt:0}">
                            </td>
                        </tr>`;
            return returnStr;
    }
    const removeRow=(id)=>{
        $('#row-'+id).remove();
        if(id>0){
            rawData=rawData.filter( t  => t.id != id);
        }
    } 
    //$('.cl-voucher-row');

    $(document).on('keydown', cl_inputs, function (e) {
        const This = $(this);

        if (This.is(":focus") && e.which === 13) {
            const target = This.parents('td, th').next().find('.cl-voucher-input');
            const availableRows = This.parents('tr').siblings();

            // console.log(rawData);
            if (target.length === 0) {
                sl++;
                // removeRow(0);
                let newRow = initialRow(sl);
                // console.log(newRow);
                // const newRow = initialRow.clone();
                // newRow.find('.voucher-sl').text(sl);
                // newRow.find('.cl-voucher-input').val('');
                // newRow.find('.cl-voucher-input').val('');
                // newRow.find('.cl-voucher-input').val('');
                $(newRow).appendTo('.cl-voucher-table tbody');
                
                initiatAutoComplete(sl);
                This.parents('tr').next().find('.cl-voucher-input').first().focus();
                setDataForSubmit();
            } else {
                target.focus()
            }
        }
    })


    //  KEYBOARD SHORTCUTS 
    $(window).on('keyup', function (e) {
        if (e.shiftKey && e.which === 78) {
            const target = $('.voucher-narration');

            if (target.length > 0) {
                target.focus();
            }
        }
    })
    function initiatAutoComplete(id){
        var clautocom = document.getElementsByClassName("cl-autocomplete-"+id);
        Array.from(clautocom).forEach(function(el) {
          el.addEventListener("input", function (e) {
              const target = e.target;
              const isAutocompleteInput = target.classList.contains('cl-autocomplete-'+id);
              const inputLength = target.value.length;
              
              if (isAutocompleteInput && inputLength > 2) {

                getJournalVoucherData(target)
              } else {
                  closeAllLists();
              }
          })
        });
    }
    initiatAutoComplete(1);


    const updateObjectForSubmit=(id,type)=>{
        let amount=Number($((type?'#cr_amount-':'#dr_amount-')+id).val());
        let ledger_id=$('#ledger_id-'+id).attr('data-ledger_id');
        let against_amt=$((type?'#dr_amount-':'#cr_amount-')+id).val();
        console.log(ledger_id);
        if(amount>0 && id>0){
            $((type?'#dr_amount-':'#cr_amount-')+id).val(0);
            let data_pass={'id':id,'ledger_id':ledger_id,'amount':amount,'note':'','type':type}
            let item = rawData.find( t  => t.id == id);
            if (item) {
                item.amount=amount;
                item.type=type;
            } else {
                rawData.push(data_pass);
            }            
        }else{
            if(!(against_amt>0)){
                rawData=rawData.filter( t  => t.id != id);
            }
        }
        console.log(rawData);
        // setDataForSubmit();
        setSumForTransactionTotal();
    }
    const setSumForTransactionTotal=()=>{
        var dsum=0;
        var csum=0;
        $('.dr_amount').each(function(){
            dsum += parseFloat(this.value);
        });
        $('.cr_amount').each(function(){
            csum += parseFloat(this.value);
        });
        $('#dr_total_amount').val(parseFloat(dsum).toFixed(2));
        $('#cr_total_amount').val(parseFloat(csum).toFixed(2));
    }
    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);
                }
            }
            if(dTotal>cTotal){
                $('#cr_amount-'+sl).val(parseFloat(dTotal-cTotal).toFixed(2));
                updateObjectForSubmit(sl,1);
            }else if(dTotal<cTotal){
                $('#dr_amount-'+sl).val(parseFloat(cTotal-dTotal).toFixed(2));
                updateObjectForSubmit(sl,0);
            }else if(rawData.length && (dTotal==cTotal)){
                
            }
            $('#submit_buttom').show();
        }else{
            $('#submit_buttom').hide();
        }
    }

    const showCurrentBalance=(id,ledger_id,balance_setting,reference_type,balance_limit)=>{
        let link="{{route('api.get_ledger_balance')}}";
        if(balance_setting!=2){
            let data_param={
                end_date:$('#voucher_date').val(),
                cost_center_id:$('#cost_center_id').val(),
                ledger_id:ledger_id
            }
            const setBalance = html => {
                let balance=parseFloat(html.closing?html.closing:0).toFixed(2);
                if(balance_setting!=4){
                    $('#show_bal-'+id).html("balance:<b>**"+(balance<0?((-1)*balance)+'**(CR)':balance+'**(DR)')+"</b>");
                }
                if(balance_setting>2){
                    let restrict_balance=(balance-parseFloat(balance_limit));
                    if(restrict_balance>0){
                        $('#cr_amount-'+id).attr('max',restrict_balance);
                    }else{
                        $('#dr_amount-'+id).attr('max',restrict_balance*(-1));
                    }
                    //$('#dr_amount':'#cr_amount')
                }
                console.log('balance:',html);
                $('#loader').hide();
            }
            ajaxCall(link,'GET',data_param, setBalance);
        }
    }
    function getCheckField(row_id){
        var type=  $('#row-'+row_id+' option:selected').attr('data-type');
        if(type==2){
            // $('#cheque_date_field-'+row_id).show('slow');
            // $('#cheque_no_field-'+row_id).show('slow');
            $('#cheque_tr'+row_id).show('slow');
            getAvailaibleChequeNo(row_id);
            $('.cheque_no').select2();

        }else{
            // $('#cheque_date_field-'+row_id).hide('slow');
            // $('#cheque_no_field-'+row_id).hide('slow');
            $('#cheque_tr'+row_id).hide('slow');
        }
    }
</script>
@stop