@extends('admin.layout.master')
@section('title',__('accounts.voucher_management'))
@section('custom_style')
<style>
    
    .card-body{
        padding:.25rem !important;
    }
   
    .table tbody th, .table tbody td {
        padding: 0.15rem 0.35rem !important;
        vertical-align: top !important;
    }  
    .row_secondary th,td{
        padding: 0 !important;
    }
</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: 60%;
        left: 0;
        right: 0;
        max-height: 12rem;
        overflow-x: hidden;
        overflow-y: 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);
    }
    .voucher_title{
        border: 2px black solid;
        padding: 4px;
        margin: 0 0 2px 0;
        border-radius: .35rem;
    }
    .fa {
        font-size:0.70rem !important;
    }

    .add_ledger_model_btn {
        /* display:none !important; */
    }
    .vcl-voucher-input {
        border: 1px solid #ced4da;
        box-shadow: none;
        outline: none;
        background-color: #fff;
    }
    .cl-voucher-input:focus,.vcl-voucher-input {
        border: 1px solid #ced4da;
        box-shadow: none;
        outline: none;
        background-color: #fff;
    }
    .cl-table th:first-child, .cl-table td:first-child {
        background-color: var(--cl-primary);
    }
</style>

<style>
            
        /*============================================
                cursor Auto Complete
        ===================================== */
        .cursor-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: hidden auto;
            z-index: 60;
        }

        .cursor-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);
            white-space: nowrap;
        }

        .cursor-autocomplete-container div:hover {
            background-color: var(--cl-primary);
            /* background-color: var(--cl-gray-200); */
        }
        .cursor-autocomplete-active {
            background-color: var(--cl-primary) !important;
            color: var(--cl-white);
        }
        .cl-voucher-input {
            height: 1.75rem;
        }
        .form-control {
            margin-bottom: 0.25rem;
        }
        .select2-container {
            flex: 1;
        }
        .form-label {
            display: inline-flex;
            margin-bottom: 0;
            width: 11rem;
        }
        .form-label::after {
            content: ':' !important,
            
        }
        .cl-btn {
            height: 1.75rem;
        }
        @media (min-width: 992px) {
            #roeLabel {
                width: 2.5rem
            }
        }
</style>
@endsection
@section ('content')
@php
    $cashSl=1000;
    $discountSl=2000;
    $isBankOrCash=in_array($voucher_info['type'],[2,4])?1:0;        
    $isPaymentOrReceipt=in_array($voucher_info['type'],[3,4])?1:0; //check receipt
    $parentId=intval($isBankOrCash?getInitDataWithKeyWord('bank')->group_id:getInitDataWithKeyWord('cash')->group_id);
@endphp   
<div class="card sina-card">
    @include('admin.layout.title_header', ['title'=>__('accounts.'.$voucher_info['name'])])
<div class="wrapper m-4 mt-0">
    <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="voucher" role="tabpanel" tabindex="0">
            <div class="row d-flex justify-content-start">
                <div class="col-lg-4 col-md-6">
                    <div class="d-flex">
                        <strong class="me-2 text-left form-label">{{__('obs.branch')}} :</strong>
                        @include('admin.inputs.warehouse_select')
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="d-flex">
                        <strong class="me-2 text-left form-label">{{__('obs.note_type')}}</strong>
                        @if(in_array($voucher_info['type'],[1,3]))
                            <div class="form-check cl-form-check mr-2 me-2">
                                <input class="form-check-input cl-form-check-input" type="radio" name="radioInput" id="radioInput1" value="1" @if($voucher_info['type']==1) checked @endif>
                                <label class="me-2 form-check-label cl-form-check-label" for="radioInput1">
                                    {{__('obs.debit_note')}}
                                </label>
                            </div>
                            <div class="form-check cl-form-check me-2">
                                <input class="form-check-input cl-form-check-input" type="radio" name="radioInput" id="radioInput2" value="3" @if($voucher_info['type']==3) checked @endif>
                                <label class="form-check-label cl-form-check-label" for="radioInput2">
                                    {{__('obs.vendor_note')}}
                                </label>
                            </div>
                        @else
                            <div class="form-check cl-form-check mr-2 me-2">
                                <input class="form-check-input cl-form-check-input" type="radio" name="radioInput" id="radioInput1" value="2" @if($voucher_info['type']==2) checked @endif>
                                <label class="me-2 form-check-label cl-form-check-label" for="radioInput1">
                                    {{__('obs.credit_note')}}
                                </label>
                            </div>
                            <div class="form-check cl-form-check me-2">
                                <input class="form-check-input cl-form-check-input" type="radio" name="radioInput" id="radioInput2" value="4" @if($voucher_info['type']==4) checked @endif>
                                <label class="form-check-label cl-form-check-label" for="radioInput2">
                                    {{__('obs.customer_note')}}
                                </label>
                            </div>
                        @endif
                    </div>
                </div>
                <div class="col-lg-4 col-md-6"></div>
                <div class="col-lg-4 col-md-6">
                    <div class="d-flex">
                        <strong class="d-flex me-2 text-left form-label" >{{__('obs.note_no')}}</strong>
                        <input type="text" name="voucher_no" style="flex: 1;" id="voucher_no" class="form-control voucher_no" value="{{isset($transactions)?$transactions->voucher_no:1}}"/>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="d-flex">
                        <strong class="d-flex me-2 text-left form-label">{{__('obs.voucher_date')}} : </strong>
                        <input type="hidden" id="voucher_type" value="{{$voucher_info['type']}}">
                        <input type="hidden" id="modified_voucher_type" value="{{$voucher_info['type']}}">
                        <input type="hidden" id="voucher_id" value="{{isset($transactions)?$transactions->id:''}}">
                        @if(isset($transactions))
                            <input type="date" name="date" id="voucher_date" style="flex: 1;" class="form-control" min="{{getAllowedPostDate()}}" max="{{getAllowedPostDate(1)}}" value="{{$transactions->date?date('Y-m-d',strtotime($transactions->date)):date('Y-m-d')}}" />
                        @else
                            <input type="date" name="date" id="voucher_date" style="flex: 1;" class="form-control" min="{{getAllowedPostDate()}}" max="{{getAllowedPostDate(1)}}" value="{{session('voucher_date')?date('Y-m-d',strtotime(session('voucher_date'))):date('Y-m-d')}}" />
                        @endif    
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="d-flex">
                        <strong class="me-2 text-left form-label">{{__('obs.currency')}}</strong>
                        <select name="currency" style="flex: 1;" onchange="currencyChange(-1)" id="currency" class="select_2 form-control">
                            @forelse ($currency as $item)
                                <option value="{{$item->id}}" {{$item->is_primary == 1 ? 'selected' : ''}} roe="{{$item->roe}}">{{$item->name}}</option>
                                @empty
                            @endforelse
                        </select>
                    </div>
                </div>

                <div class="col-lg-1 col-md-6 ps-lg-1">
                    <div class="d-flex">
                        <strong id="roeLabel" class="me-2 text-right form-label" title="RateOfExchange">{{__('obs.rate_of_exchange')}} : </strong>
                        <input step=".000000000000000001" style="flex: 1;" onchange="currencyChange(this.value)" type="text" name="roe" id="roe" class="form-control roe" value="{{isset($transactions)?$transactions->roe:1}}"/>
                        <input class="form-control" style="flex: 1;" step=".000000000000000001" type="hidden" id="currency_id" name="currency_id" value="{{$currency->where('is_primary',1)->first() ? $currency->where('is_primary',1)->first()->id : 1}}" required>
                    </div>
                </div>
            </div>


            @if($voucher_info['type']<5)
                <div class="row d-flex justify-content-start">
                    <div class="col-lg-4 col-md-6">
                        <div class="d-flex">
                            <strong class="me-2 text-left form-label">{{__('obs.accounts_code')}}</strong>
                            <input id="group_row-{{$cashSl}}" style="flex: 1;" type="text" class="form-control cursor-autocomplete">
                            <button type="button" class="search_group_by_modal btn cl-btn cl-btn-primary ms-1" onclick="openAccountsLedgerDetailsModal({{$cashSl}})"><i class="fa fa-download"></i></button>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="d-flex" style="flex: 1;">
                            <strong class="me-2 text-left form-label">{{__('obs.accounts_ledger')}} :</strong>
                            <div class="position-relative" style="flex: 1;" id="parent-{{$cashSl}}">
                                <input type="text" style="flex: 1;" onkeydown="selectionOnkeyMovement(event)" class="vcl-voucher-input form-control cl-voucher-input cl-autocomplete cl-autocomplete-{{$cashSl}}" id="ledger_id-{{$cashSl}}" data-id="{{$cashSl}}" data-ledger_id="" data-balance_limit="" data-reference_type="" data-balance_setting="" value="">
                            </div>
                            <button type="button" class="search_ledger_by_modal btn cl-btn cl-btn-primary ms-1" onclick="openAccountsLedgerDetailsModal({{$cashSl}})"><i class="fa fa-download"></i></button>
                            <button type="button" class="add_ledger_model_btn btn cl-btn ms-1" onclick="openSlideModal({{$cashSl}})"><i class="fa fa-plus"></i></button>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                       
                    </div>
                </div>
            @endif
            
            <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="" scope="col" style="width: 40px">#</th>
                            <th scope="col">{{__('obs.particulars')}}</th>
                            <th class="text-end align-middle" scope="col" style="width: 200px">{{__('obs.ref_invoice')}}</th>
                            <th class="text-end align-middle" scope="col" style="width: 120px">{{__('obs.amount')}}</th>
                            <th class="text-end align-middle" scope="col" style="width: 10px">
                                <button type="button" class="add_ledger_model_btn btn cl-btn btn-warning" onclick="getNewRow()"><i class="fa fa-plus"></i></button>
                            </th>
                        </tr>
                        <tr></tr>
                    </thead>
                    <tbody>
                        <tr style="height: 0.5rem"></tr>
                   
                        @for ($i =1 ; $i <2; $i++)
                            <tr id="row_id-{{$i}}" data-row_id="{{$i}}" class="cl-voucher-row row-{{$i}}">
                                <th scope="row" class="cl-fixed-cell voucher-sl">{{$i}}</th>
                                <td>
                                    <div class="position-relative">
                                        <div class="position-relative d-flex align-items-center">
                                            <div class="col flex-grow-1 second-col">
                                                <input type="text" id="note-{{$i}}" onchange="updateObjectForSubmit({{$i}})" class="form-control cl-voucher-input row_secondary">
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                
                                <td>
                                    <div class="d-flex">
                                        <div class="d-flex" id="voucher_input{{$i}}">
                                            <div class="position-relative" id="parent-{{$i}}">
                                                <input type="text" style="flex: 1;" onchange="updateObjectForSubmit({{$i}})" class="vcl-voucher-input form-control cl-voucher-input" id="reff_voucher_id-{{$i}}" data-id="" value="" readonly>
                                            </div>
                                            <button type="button" class="btn cl-btn btn-primary" onclick="showSearchForm({{$i}})"><i class="bi bi-search"></i></button>
                                        </div>
                                        <div class="d-flex d-none" id="voucher_input_search{{$i}}">
                                            <input type="text" class="date-picker form-control mx-1" id="start_date{{$i}}" value="{{date('Y-m-d')}}">
                                            <input type="text" class="date-picker form-control mx-1" id="end_date{{$i}}" value="{{date('Y-m-d')}}">
                                            <button type="button" class="search_ledger_by_modal btn cl-btn cl-btn-primary ms-1" onclick="install_invoice({{$i}})"><i class="fa fa-download"></i></button>
                                        </div>
                                        {{-- <button type="button" class="add_ledger_model_btn btn cl-btn ms-1" onclick="openSlideModal({{$i}},{{$parentId}},{{$isBankOrCash}})"><i class="fa fa-plus"></i></button> --}}
                                    </div>
                                </td>
                                <td class="text-end">
                                    <input step="0.00001" type="number" class="currency_conversion amount form-control cl-form-control cl-voucher-input text-end" id="amount-{{$i}}" onkeyup="updateObjectForSubmit({{$i}})">
                                </td>
                                <td></td>
                            </tr>
                        @endfor
                    {{-- @endif    --}}
                    </tbody>
                </table>
            </div>

            <div class="d-flex justify-content-end mt-3">
                    {{-- <div style="width: 120px" class="text-end border-top border-bottom border-dark">
                        <input type="number" class="form-control cl-form-control vcl-voucher-input text-end"
                        id="dr_total_amount" readonly>
                    </div> --}}
                    <div style="width: 130px" class="text-end border-top border-bottom border-dark">
                        <input type="number" class="form-control cl-form-control vcl-voucher-input text-end"
                        id="total_amount" readonly>
                    </div>
                    <br>
            </div>
            <div class="d-flex align-items-start justify-content-end mt-3">
                <div class="input-group-append">
                    <div class="hidden_content hidden_input">
                        <button class="btn-sina-title-add hidden_content hidden_input btn cl-btn" style="min-width: 50px;" id="submit_buttom" onclick="setSubmitableData()"><i class="fa fa-save"></i> {{__('obs.save')}}</button>
                    </div>
                </div>
            </div>
    </div>

    <div class="tab-pane fade" id="invoice" role="tabpanel" tabindex="0"> 
    </div>
</div>
</div>
@include('admin.global.loader')
@include('admin.slider.global_slider')
@include('accounts.voucher.modal_accounts_ledger')
@include('accounts.voucher.modal_head_accounts_code')
@include('accounts.voucher.modal_previous_voucher')
@endsection
@section('script')
<!-- page script -->
<script type="text/javascript">
$('.select_2').select2();   
  
let rawData=[];
let preSearch='';
let preItems=[];
let voucher_type=@json($voucher_info['type']);
let voucher=@json(isset($transactions)?$transactions:[]);
let isPaymentOrReceipt=[3,4].includes(voucher_type)?1:0;
let sl = @json($i>2?($i):1);
let cashSl=1000;
let discountSl=2000;
let voucher_edit_id=@json(Request()->voucher_id??0);
$(document).ready(function(){
    //    resetForm(1);
    //    if(voucher_type<5){
    //        resetForm(cashSl);
    //        resetForm(discountSl);
    //    }
        if(voucher_edit_id){
            setDataToPreviousVoucher(voucher_edit_id);
        }
});
    function setDataToPreviousVoucher(edit_id) {
        var data=voucher;
        let journals=data.journals;
        $('#voucher_date').val(getFormatedDateCustom(data.date));
        $('#voucher_id').val(data.id);
        $('#ledger_id-1000').attr('data-id',data.reff_ledger_id).val(data.reff_ledger.name);
        $('#group_row-1000').val(data.reff_ledger.auto_code).attr('data-auto_code',data.reff_ledger.auto_code);
        $('#currency').val(data.currency_id);
        $('#roe').val(data.roe);
        $('#total_amount').val(data.transaction_amount);
        let delails=JSON.parse(data.note);
        console.log(delails,'delails');
        for (let m = 0; m < delails.length; m++) {
            if(m>0){
                console.log('getNewRow',sl);
                getNewRow();    
            }
            $(`#amount-${sl}`).val(delails[m].amount);
            $(`#note-${sl}`).val(delails[m].note);
            updateObjectForSubmit(sl);
        }
        // setDataForSubmit();
    }
</script>
{{-- @include('admin.utilities.cursor_autocomplete') --}}
<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()))
    }

    const getJournalVoucherData = (id,inputField) => {
        let selectData = [];
        let inVal={};
        inVal.term=inputField.value;
        let link="{{route('accounts_settings.ledger_search')}}";
        let data_param={
            search_type:(id==1000)?5:2,
            group_code:(id==1000)?([1,3].includes(voucher_type)?3:3):null,
            name: inVal
        }
        const setBalance = response => {
            selectData = response;
            preItems=selectData;
            selectData =  filterOption(inputField, selectData);
            closeAllLists()
            currentFocus = -1;
            $(setOption(inputField, selectData)).appendTo('#parent-'+id);
            $('#loader').hide();
        }
        ajaxCall(link,'GET',data_param, setBalance);
    }
    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 boldString=(str, substr)=> {
        var strRegExp = new RegExp(substr, 'gi');
        return str.replace(strRegExp, '<strong>'+substr+'</strong>');
    }
    const setOption=(inputField,dataArray)=>{
        let inputValue = inputField.value;
        let html=`<div class="cl-autocomplete-container">`;
            dataArray.map(item => {
                let textel=boldString(item.auto_code+'--'+item.name,inputValue);
                html+=`<div class='' onclick="showCurrentBalance(${inputField.dataset.id},${item.id},${item.balance_setting},'${item.reference_type}',${item.balance_limit},${item.auto_code},'${item.name.replace(/'/g, '&lsquo;')}')">${textel}</div>`;
                // html+=`<div class='' onclick="showCurrentBalance(${inputField.dataset.id},${item.id},${item.balance_setting},'${item.reference_type}',${item.balance_limit},'${item.name.replace(/'/g, '&lsquo;')}')">${textel}</div>`;
            });
            
            html+=`</div>`;
            return html;
    }
    let currentFocus=0;
    const selectionOnkeyMovement = (e) => {
        // console.log('e:',e);
        let options = document.querySelector('.cl-autocomplete-container');
        if (options) options = options.getElementsByTagName("div");
        if (e.keyCode == 40) {
            currentFocus++;
            addActive(options,currentFocus);
        } else if (e.keyCode == 38) {
            currentFocus--;
            addActive(options,currentFocus);
        } else if (e.keyCode == 13) {
            e.preventDefault();
            if (currentFocus > -1) {
                // console.log('selected',currentFocus);
                if (options){
                    options[currentFocus].click();
                } 
            }
        }
    }
    const initiatAutoComplete=(id,cls)=>{
        var cl_autocom = document.getElementsByClassName(cls);
        Array.from(cl_autocom).forEach(function(el) {
          el.addEventListener("input", function (e) {
              const target = e.target;
              const isAutocompleteInput = target.classList.contains(cls);
              const inputLength = target.value.length;
              const inputV = target.value;
              
              if (isAutocompleteInput && inputLength > 2) {
                  const regexp = new RegExp('^'+preSearch, 'i');
                  if(preSearch && regexp.test(inputV)){
                    selectData =  filterOption(target, preItems);
                    closeAllLists();
                    currentFocus = -1;
                    $(setOption(target, selectData)).appendTo('#parent-'+id);
                }else{
                    getJournalVoucherData(id,target)
                }
                preSearch=inputV;
                //   closeAllLists();
              } else {
                closeAllLists();
              }
          })
        });
    }


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

    
    const initialRow =(i,amt=0,t=0)=>{ //t=1 for dr t=2 for cr
        let returnStr=`<tr id="row_id-${i}" data-row_id="${i}" class="cl-voucher-row row-${i}">
                            <th scope="row" class="cl-fixed-cell voucher-sl">${(i==0?(sl):i)}</th>
                            <td>
                                <div class="position-relative">
                                        <div class="col">
                                            <input type="text" id="note-${i}" class="form-control cl-voucher-input row_secondary"  onchange="updateObjectForSubmit(${i})">
                                        </div>
                                </div>
                            </td>
                            <td>
                                <div class="d-flex">
                                    <div class="d-flex" id="voucher_input${i}">
                                        <div class="position-relative" id="parent-${i}">
                                            <input type="text" style="flex: 1;"  onchange="updateObjectForSubmit(${i})" class="vcl-voucher-input form-control cl-voucher-input" id="reff_voucher_id-${i}" data-id="" value="" readonly>
                                        </div>
                                        <button type="button" class="btn cl-btn btn-primary" onclick="showSearchForm(${i})"><i class="bi bi-search"></i></button>
                                    </div>
                                    <div class="d-flex d-none" id="voucher_input_search${i}">
                                        <input type="text" class="date-picker form-control mx-1" id="start_date${i}" value="{{date('Y-m-d')}}">
                                        <input type="text" class="date-picker form-control mx-1" id="end_date${i}" value="{{date('Y-m-d')}}">
                                        <button type="button" class="search_ledger_by_modal btn cl-btn cl-btn-primary ms-1" onclick="install_invoice(${i})"><i class="fa fa-download"></i></button>
                                    </div>
                                </div>

                            </td>
                            <td class="text-end">
                                <input step="0.00001" type="number" class="currency_conversion amount form-control cl-form-control cl-voucher-input text-end" id="amount-${i}" onkeyup="updateObjectForSubmit(${i})" value="">
                            </td>`;
                            returnStr+=`<td><button class="btn cl-btn btn-danger" onclick="removeRow(${i})"> <u>X</u> </button></td>
                        </tr>`;
            return returnStr;
    }
    const removeRow=(id)=>{
        $('#row_id-'+id).remove();
        if(id>0){
            rawData=rawData.filter( t  => t.id != id);
        }
        setSumForTransactionTotal();
    } 
    //$('.cl-voucher-row');

    $(document).on('keydown', cl_inputs, function (e) {
        const This = $(this);
        if (This.is(":focus") && e.which === 13) {
            const target = $(".cl-voucher-input").eq($(".cl-voucher-input").index($(This))+1);
            if (target.length === 0) {
                 getNewRow(This);
            } else {
                target.focus();
            }
        }
    })
    const getNewRow=(This=0)=>{
        sl++;
        let newRow = initialRow(sl);
        $(newRow).appendTo('.cl-voucher-table tbody');
        // initiatAutoComplete(sl,'cl-autocomplete-'+sl);
        // cursorAutoComplete('cursor-autocomplete');
        $('.jr_select_2').select2();
        if(This){
            This.parents('tr').next().find('.cl-voucher-input').first().focus();
        }
    }

    //  KEYBOARD SHORTCUTS 
    $(window).on('keydown', function (e) {
        if (e.ctrlKey && e.which === 32) {//ctrl+Space
            const target = $('.voucher-narration');
            if (target.length > 0) {
                target.focus();
            }
        }
        if(e.ctrlKey && e.which === 83) {//ctrl+S
            e.preventDefault();
            $('#submit_buttom').trigger('click');
        }
        if(e.ctrlKey && e.which === 88) {//ctrl+X
            e.preventDefault();
            var row_id = e.target.closest('tr').dataset.row_id;
            if(row_id>1){
                Swal.fire({
                    icon: 'warning',
                    title: 'DELETE ROW',
                    html: 'Are You Sure?',
                    showConfirmButton: true,
                    showDenyButton: true,
                    position: 'center',
                    timer: null,
                }).then((res) => {
                    console.log(res);
                    if(res.isConfirmed){
                        removeRow(row_id);
                    }
                });
            }
            console.log(row_id);
            // $('#submit_buttom').trigger('click');
        }
    })
    // for (let index = 1; index <= (sl+1); index++) {
    //     initiatAutoComplete(index,'cl-autocomplete-'+index);
    //     console.log(index);
    // }
    if(voucher_type<5){
        initiatAutoComplete(cashSl,'cl-autocomplete-'+cashSl);
    }
    
    // cursorAutoComplete('cursor-autocomplete');
    // cursorAutoComplete('voucher_cost_center',['name','name'],cost_centers);
    const updateObjectForSubmit=(id,This=null)=>{
        let amount=Number($('#amount-'+id).val());
        let note=$('#note-'+id).val();
        // let cost_center_journal=$(id==1000?'#cost_center_id':('#cost_center_journal-'+id)).val();
        let reff_voucher_id=Number($('#reff_voucher_id-'+id).attr('data-id'));
        
        if(amount>0){
            let data_pass={'id':id,'reff_voucher_id':reff_voucher_id,'amount':amount,'note':note}
            let item = rawData.find( t  => t.id == id);
            if(item){
                item.reff_voucher_id=reff_voucher_id;
                item.amount=amount;
                item.note=note;
            }else{
                rawData.push(data_pass);
            }            
        }else{
            rawData=rawData.filter( t  => t.id != id);
        }
        setSumForTransactionTotal();
    }
    const setSumForTransactionTotal=()=>{
        var dsum=0;
        $('.amount').each(function(){
            dsum += Number(this.value);//==''?0:this.value);
        });
        $('#total_amount').val(parseFloat(dsum).toFixed(2));
    }
   
    
    const showCurrentBalance=(id,ledger_id,balance_setting,reference_type,balance_limit,auto_code,name,shouldNotUpdate=1)=>{
        inputField=document.getElementById('ledger_id-'+id);
        inputField.value = name;
        inputField.dataset.ledger_id = ledger_id;
        inputField.dataset.balance_setting = balance_setting;
        inputField.dataset.reference_type = reference_type;
        inputField.dataset.balance_limit = balance_limit;
        if(id==1000){
            $('#group_row-'+id).val(auto_code).attr('data-auto_code',auto_code)
        }
        
        //close all dropdown options click event
        closeAllLists();
        //focus next input on dropdown option click event
        const targetedInputField = $(".cl-voucher-input").eq($(".cl-voucher-input").index($(inputField))+1);
        targetedInputField.focus();
    }
    const getAvailaibleChequeNo=(row_id,ledger_id,cn=null)=>{
        var chequeOptions='';
        let link="{{route('cheque.search')}}";
        let data_param={
            ledger_id:ledger_id,
        }
        const setBalance = data => {
            if(data.length>0){
                for (let index = 0; index < data.length; index++) {
                    chequeOptions+=`<option value="`+data[index].check_number+`">`;
                }
            }
            if(cn){
                chequeOptions+=`<option value="`+cn+`" selected>`;
            }
            $('#cheque_list-'+row_id).html(chequeOptions);
            $('#loader').hide();
        }
        ajaxCall(link,'GET',data_param, setBalance);
    }
    const validationChecked=()=>{
        let error=0;

        if(rawData.length){
            let typeError=1;
            for (let index = 0; index < rawData.length; index++) {
                let dataUpdate=rawData[index];
                if(dataUpdate.amount<1){
                    error=1;
                }else{
                    rawData[index].note=$('#note-'+dataUpdate.id).val();
                }
            }   
        }else{
            error='Please Add Some Data';
        }
        
        return error;
    }
    const setSubmitableData=()=>{
        let errorMsg=validationChecked();
        if(!errorMsg){
            Swal.fire({
                icon: 'success',
                title: 'Confirmation',
                html: 'Are You Sure?',
                showConfirmButton: true,
                showDenyButton: true,
                position: 'center',
                timer: null,
            }).then((res) => {
                if(res.isConfirmed){
                    saveVoucher();
                }
            });
        }else{
            Swal.fire(errorMsg, '', 'warning');
            return;
        }
    }
    const saveVoucher=()=>{
        let link="{{route('notes.voucher_notes_store')}}";
        let c=null;
        let int_data_param={
            date:$('#voucher_date').val(),
            type:$('#voucher_type').val(),
            transaction_type:'',//$('#voucher_type').val(),//for opening
            voucher_id:$('#voucher_id').val(),
            reff_ledger_id:$('#ledger_id-1000').attr('data-id'),
            // reff:$('#reff').val(),
            currency_id:$('#currency').val(),
            roe:$('#roe').val(),
            transaction_amount:$('#total_amount').val(),
            notes_data:rawData
        }
        const setReloadtHtml = data => {
            console.log(data);
            location.href=data;
        }
        console.log('Save Data',int_data_param);
        ajaxCall(link,'POST',int_data_param, setReloadtHtml);
    }
    var prev_curr_val = 1;
    var price=[];
    const currencyChange=(current_roe)=> { 
        if (current_roe == -1) {
            current_roe = $('#currency option:selected').attr('roe');
            currency_id = $('#currency').val();
            $('#currency_id').val(parseFloat(currency_id));
        }
        $('#roe').val(parseFloat(current_roe));
        $('.currency_conversion').each(function(i) {
            if(this.value>0){
                let id=(this.id).replace(/[^0-9]/g,'');
                let item = rawData.find( t  => t.id == id);
                price[i] = parseFloat((item.amount*prev_curr_val)/current_roe);
                item.amount=price[i];
                this.value=(item.amount).toFixed(2);
            }
        });
        prev_curr_val = current_roe; 
        setSumForTransactionTotal(); 
    }
    let groupData=[];
    $(document).ready(function() {
        let int_data_param={
            search_type:1
        }
        const setGroupData=(data)=>{
            groupData=data;
            $('#loader').hide();
        }
        ajaxCall("{{route('accounts_settings.ledger_search')}}",'GET',int_data_param, setGroupData);
    });
    
    const setGroupDataToSelector=(row_id,id,auto_code,name)=>{
        // $('#group_row-'+row_id).val(auto_code);
        $('#group_row-'+row_id).val(row_id==1000?auto_code:name);
        $('#group_row-'+row_id).attr('data-auto_code',auto_code);
        $("#accounts_group_model").modal("hide");
        openAccountsLedgerDetailsModal(row_id);
    }
    const openAccountsLedgerDetailsModal=(id)=>{
        $('#load_table_modal_accounts_ledger').dataTable().fnDestroy();
        // var group_code=$('#group_row-'+id).val();
        var group_code=$('#group_row-'+id).attr('data-auto_code');
        var returnData=``;
        let int_data_param={};
        if(id==1000){
            let inVal={};
            inVal.term='';
            int_data_param.search_type=5;
            int_data_param.group_code=[1,3].includes(voucher_type)?3:3;
            int_data_param.name= inVal;
        }else{
            int_data_param.group_code=group_code;
        }
        const setLedgerData=(data)=>{
            if(data.length>0){
                for (let index = 0; index < data.length; index++) {
                    returnData+='<tr onclick="setDataToSelector(`'+id+'`,`'+data[index].id+'`,`'+data[index].balance_setting+'`,`'+data[index].reference_type+'`,`'+data[index].balance_limit+'`,`'+data[index].auto_code+'`,`'+data[index].name+'`)" role="row" class="odd">';
                    returnData+='<td class="sorting_1">'+(index+1)+'</td>';
                    returnData+='<td>'+(data[index].parent?data[index].parent.auto_code:'')+'</td>';
                    returnData+='<td>'+(data[index].parent?data[index].parent.name:'')+'</td>';
                    returnData+='<td><b>'+data[index].auto_code+'</b></td>';
                    returnData+='<td><b>'+data[index].name+'</b></td></tr>';
                }
            }
            $('#load_tbody_modal_accounts_ledger').html(returnData);
            $("#accounts_ledger_model").modal("show");
            $('#load_table_modal_accounts_ledger').DataTable({
                "destroy": true,
            });
            $('#loader').hide();
        }
        ajaxCall("{{route('accounts_settings.ledger_search')}}",'GET',int_data_param, setLedgerData);
    }
    const setDataToSelector=(row_id,id,balance_setting,reference_type,balance_limit,auto_code,name)=>{
        showCurrentBalance(row_id,id,balance_setting,reference_type,balance_limit,auto_code,name);
        $("#accounts_ledger_model").modal("hide");
    }
    // const setCostCenterForAll=(cost_id)=>{
    //     $('.cost_center_journal').each(function(){
    //         $(this).val(cost_id).trigger('change');
    //     });
    // }
    // install from ............
    const showSearchForm=(id)=>{
        $('#voucher_input'+id).toggleClass('d-none');
        $('#voucher_input_search'+id).toggleClass('d-none');
    }
    const install_invoice=(id)=>{
        showSearchForm(id);
        var returnData=``;
        $('#previous_voucher_model_table').dataTable().fnDestroy();
        let int_data_param={
            type:5,
            install_type:0,
            start:$('#start_date'+id).val(),
            end:$('#end_date'+id).val()
        }
        const setGroupData=(data)=>{
            if(data.length>0){
                let html=``;
                html+=`<th>SL</th><th>Date</th><th>Voucher No</th><th>Amount</th>`;
                $('#install_table_header').html(html);
                for (let index = 0; index < data.length; index++) {
                    returnData+=`<tr onclick="setVoucherForReference(${id},${data[index].id},'${data[index].voucher_no}')" role="row" class="odd">
                                    <td>${(index+1)}</td>
                                    <td>${data[index].date}</td>
                                    <td><b>${data[index].voucher_no}</b></td>
                                    <td><b>${data[index].transaction_amount}</b></td></tr>`;
                }
            }
            $('#load_tbody_previous_voucher_model').html(returnData);
            $("#previous_voucher_model").modal("show");
            $('#previous_voucher_model_table').DataTable({
                "destroy": true,
            });
            $('#loader').hide();
        }
        ajaxCall("{{route('voucher.voucher_search')}}",'GET',int_data_param, setGroupData);
        
    }
    function setVoucherForReference(row_id,voucher_id,voucher_no) {
        $('#reff_voucher_id-'+row_id).val(voucher_no).attr('data-id',voucher_id);
        $("#previous_voucher_model").modal("hide");   
    }
    const clearFormAndObject=()=>{
        for (let index = 0; index < rawData.length; index++) {
            $(`#ledger_id-${rawData[index].id}`).val('')
            .attr('data-ledger_id','')
            .attr('data-balance_limit','')
            .attr('data-reference_type','')
            .attr('data-balance_setting','');
            $(`#show_bal-${rawData[index].id}`).val('');
            $(`#note-${rawData[index].id}`).val('');
            $(`#${rawData[index].type?'cr':'dr'}_amount-${rawData[index].id}`).val('');
            if([1000,2000,1].includes(rawData[index].id)){
                $('#row_id-'+index).remove();
            }
            rawData=rawData.filter( t  => t.id != rawData[index].id);
        }
        sl=1;
    }
</script>
@stop