@extends('layouts/acc_layout')
@section('title', '| Chart of Accounts Mapping For OLRS')
@section('content')


<style type="text/css">
    .ledgerCode {
        text-align: right
    }

    #autoVouchersTable1 thead tr th,
    #autoVouchersTable2 thead tr th,
    #autoVouchersTable3 thead tr th {
        padding: 5px;
    }
</style>


<div class="row add-data-form" style="padding-bottom: 1%">
    <div class="col-md-12">
        <div class="col-md-2"></div>

        <div class="col-md-8">

            <div class="viewTitle" style="border-bottom: 1px solid white;">

            </div>

            <div class="panel panel-default panel-border">

                <div class="panel-heading">
                    <div class="panel-title">Chart of Accounts Mapping For OLRS</div>
                </div>

                <div class="panel-body">

                    {!! Form::open(array('url' => '', 'id' => 'olrsCoAList', 'role' => 'form', 'class'=>'form-horizontal form-groups')) !!}
                        <div class="form-group col-sm-2" style="margin: 0 .25em;">
                            {!! Form::label('l1_code', 'L1 Code:', ['class' => 'control-label']) !!}                            
                            {!! Form::select('l1_code',$l1_codes, null,['id'=>'l1_code','class'=>'form-control input-sm']) !!}                            
                        </div>
                        <div class="form-group col-sm-2" style="margin: 0 .25em;">
                            {!! Form::label('l2_code', 'L2 Code:', ['class' => 'control-label']) !!}                            
                            {!! Form::select('l2_code',$l2_codes, null,['id'=>'l2_code','class'=>'form-control input-sm']) !!}                            
                        </div>
                        <div class="form-group col-sm-2" style="margin: 0 .25em;">
                            {!! Form::label('l3_code', 'L3 Code:', ['class' => 'control-label']) !!}                            
                            {!! Form::select('l3_code',$l3_codes, null,['id'=>'l3_code','class'=>'form-control input-sm']) !!}                            
                        </div>
                        <div class="form-group col-sm-2" style="margin: 0 .25em;">
                            {!! Form::label('l4_code', 'L4 Code:', ['class' => 'control-label']) !!}                            
                            {!! Form::select('l4_code',$l4_codes, null,['id'=>'l4_code','class'=>'form-control input-sm']) !!}                            
                        </div>
                        <div class="form-group col-sm-2" style="margin: 1.25em .25em;">
                            {!! Form::label('olrsCoAListSubmitBtn', ' ', ['class' => 'col-sm-7 control-label']) !!}
                            {!! Form::submit('Search', ['id' => 'olrsCoAListSubmitBtn', 'class' => 'btn btn-sm btn-info']) !!}
                        </div>
                    {!! Form::close() !!}

                    {!! Form::open(array('url' => '', 'id' => 'olrsCoAForm', 'role' => 'form', 'class'=>'form-horizontal form-groups')) !!}

                        <div class="row">
                            <div class="col-md-12">

                                <table class="table table-striped table-bordered" id="autoVouchersTable1" style="width:100%; color:black;">
                                    <thead>
                                        <tr>
                                            <th colspan="2" rowspan="1">OLRS Chart of Accounts </th>
                                            <th colspan="1" rowspan="2">Acc Ledger Head Code</th>
                                        </tr>
                                        <tr>
                                            <th width="25%">Code</th>
                                            <th width="25%">Name</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tbodyId">

                                        @foreach ($olrsChartOfAccounts as $key => $item)
                                            
                                            @php $identifier = $item->l1_code . '_' . $item->l2_code . '_' . $item->l3_code . '_' . $item->l4_code . '_' . $item->l5_code; @endphp

                                            <tr id="tr_{{ $identifier }}" >
                                                <td class="name"> {{ $item->ac_code }} </td>
                                                <td class="name"> {{ $item->acchead }} </td>
                                                <td>
                                                    
                                                    <input 
                                                        type='text' 
                                                        autocomplete='off' 
                                                        class='form-control input-sm' 
                                                        id="{{ $identifier }}" 
                                                        name="{{ $identifier }}" 
                                                        value='{{ $item->acc_ledgerId }}' 
                                                        onkeyup="filterFunction('{{$identifier}}')" 
                                                    />
                                                    
                                                    <select 
                                                        multiple 
                                                        class="selectClass form-control input-sm" 
                                                        name="select_{{ $identifier }}" 
                                                        id="select_{{ $identifier }}" 
                                                        onchange="selectData('{{$identifier}}', this)"
                                                    ></select> 
                                                    
                                                </td>
                                            </tr>

                                        @endforeach

                                    </tbody>
                                </table>

                            </div>
                        </div>


                        <div class="form-group">
                            {!! Form::label('submit', ' ', ['class' => 'col-sm-7 control-label']) !!}
                            <div class="col-sm-5 text-right">
                                {!! Form::submit('Submit', ['id' => 'submitButton', 'class' => 'btn btn-info']) !!}
                                {{ Form::reset('Reset', ['class' => 'btn btn-warning']) }}
                                <span id="success" style="color:green; font-size:16px;" class="pull-right"></span>
                            </div>
                        </div>
                        
                    {!! Form::close() !!}

                </div>

            </div>

        </div>

        <div class="col-md-2"></div>
    </div>
</div>



<script type="text/javascript">

    var input_identifier = ''
    var optVal = ''
    
    
    function hideSelectClass()
    {
        $('.selectClass').hide()
        optVal = ''
    }
    
    function selectData(identifier = '', val)
    {
        optVal = ''
        
        for (let i = 0; i < val.options.length; i++) 
        {
            if(val.options[i].selected) optVal += val.options[i].value + ', '
        }
        
        $(`#${identifier}`).val(optVal)  
    }
    
    
    function filterFunction(identifier = '')
    {
        input_identifier = identifier
        optVal = ''
        
        $('.selectClass').hide()
        $(`#select_${identifier}`).show()
        $(`#select_${identifier}`).empty()

        let ledgerCodeEntry =  $(`#${identifier}`).val()

        ledgerCodeEntry = ledgerCodeEntry.split(",")
        
        
        for(let i = 0; i < ledgerCodeEntry.length; i++) 
        {            
            let accAccountLedgerCodes = "{{ $accAccountLedgerCodes }}".split(",")
            
            accAccountLedgerCodes = accAccountLedgerCodes.filter( s => s.includes( ledgerCodeEntry[i].replace(/\D/g,'') ) )       
            $(`#select_${identifier}`).empty()

            for (const [key, value] of Object.entries(accAccountLedgerCodes)) 
            {
                if(value) $(`#select_${identifier}`).append(`<option value="${value}">${value}</option>`)
            }        
        }

    }

    function selectFunction(identifier = '')
    {
        $(`#select_${identifier}`).change( function(event) { 
            let optVal = $(`#select_${identifier} option:selected`).val()
            console.log( optVal )
            $(`#${identifier}`).val(optVal)
            $(`#select_${identifier}`).empty()
            $(`#select_${identifier}`).hide()
        })
    }

    $(document).ready(function() {
        
        $('.selectClass').hide()

        // filter layers

        $("#l1_code").change( function(event) {
            $('#l2_code').empty()
            $('#l3_code').empty()
            $('#l4_code').empty()
            getLayerCodes( 1, $("#l1_code option:selected").val() )
        })

        $("#l2_code").change( function(event) {
            $('#l3_code').empty()
            $('#l4_code').empty()
            getLayerCodes( 2, $("#l2_code option:selected").val() )
        })

        $("#l3_code").change( function(event) {
            $('#l4_code').empty()
            getLayerCodes( 3, $("#l3_code option:selected").val() )
        })
        
        function getLayerCodes(layer, code) {
            let csrf = "{{csrf_token()}}"
            $.ajax({
                type: 'post',
                url:  "{{ URL::to('/acc/olrs/olrsChartofAccounts/getLayerCodes/') }}",
                data: {
                    'csrf' : csrf,
                    'layer' : layer,
                    'code' : code
                },
                dataType: 'json',
                success: function(_response) {
                    for (const [key, value] of Object.entries(_response).sort() ) 
                    {
            			if(layer == 1) $("#l2_code").append('<option value="' + key + '">' + value + "</option>")
            			if(layer == 2) $("#l3_code").append('<option value="' + key + '">' + value + "</option>")
            			if(layer == 3) $("#l4_code").append('<option value="' + key + '">' + value + "</option>")
            		}
                }
            }); //ajax
        }

        // get filtered CoA list

        $('#olrsCoAListSubmitBtn').click(function(event) {
            event.preventDefault()

            $("#tbodyId").empty()
            
            let csrf = "{{csrf_token()}}"
            let l1_code = $("#l1_code option:selected").val()
            let l2_code = $("#l2_code option:selected").val()
            let l3_code = $("#l3_code option:selected").val()
            let l4_code = $("#l4_code option:selected").val()

            // return; 

            $.ajax({
                type: 'post',
                url:  "{{ URL::to('/acc/olrs/olrsChartofAccounts/filter/') }}",
                data: {
                    'csrf' : csrf,
                    'l1_code' : l1_code,
                    'l2_code' : l2_code,
                    'l3_code' : l3_code,
                    'l4_code' : l4_code
                },
                dataType: 'json',
                success: function(_response) {
                    for (const [key, value] of Object.entries(_response)) 
                    {
                        $("#tbodyId").append( generateTableInput(value) )
                        hideSelectClass()
            		}
                }
            }); //ajax

        }); // olrsCoAList submit  

        function generateTableInput(value) {
            let identifier = `${value.l1_code}_${value.l2_code}_${value.l3_code}_${value.l4_code}_${value.l5_code}`
            // <input type='text' id="${identifier}" name="${identifier}" class='form-control input-sm' value='${value.acc_ledgerId}' autocomplete='off'>
            
            let td = `<tr>
                        <td class="name"> ${value.ac_code} </td>
                        <td class="name"> ${value.acchead} </td>
                        <td>
                            <input type='text' id="${identifier}" name="${identifier}" class='form-control input-sm' value='${value.acc_ledgerId}' autocomplete='off' onkeyup="filterFunction('${identifier}')" />
                            <select multiple class="selectClass form-control input-sm" name="select_${identifier}" id="select_${identifier}" onchange="selectData('${identifier}', this)"></select>
                        </td>
                    </tr>`
            
            return td
        }


        // submit acc ledger codes

        $('#olrsCoAForm').submit(function(event) {

            event.preventDefault();
            // $("#submitButton").prop("disabled", true);

            let csrf = "{{csrf_token()}}";
            let serializeValue=$(this).serialize();

            $.ajax({
                type: 'post',
                url:  "{{ URL::to('/acc/olrs/olrsChartofAccounts/store/') }}",
                data: serializeValue,
                dataType: 'json',
                success: function(_response) {
                    if (_response.responseTitle == 'Success!') {
                        toastr.success(_response.responseText, _response.responseTitle, opts);
                        setTimeout(function() {
                            location.reload();
                        }, 3000);
                    } else if (_response.responseTitle == 'Warning!') {
                        toastr.warning(_response.responseText, _response.responseTitle, opts);
                    }
                },
                error: function(_response) {
                    toastr.warning(_response.responseText, _response.responseTitle, opts);
                }
            }); //ajax

        }); // olrsCoAForm submit  

    }); // ready
</script>


@endsection