@extends('layouts/microfin_layout')
@section('title', '| Add Loan Adjustment')
@section('content')

@php
use \App\Http\Controllers\microfin\savings\MfnSavingsDepositTypeController as createForm;
@endphp

<script type="text/javascript">
//   $("#loadingModal").show();
  $(document).keydown(function(e) {
    if (e.keyCode == 27) return false;
  });
</script>

<div class="row add-data-form">
	<div class="col-md-12">
        <div class="col-md-10 col-md-offset-1 fullbody">
            <div class="viewTitle" style="border-bottom:1px solid white;">
                <a href="{{ url('mfn/viewLoanCollectionAdjustment/') }}" class="btn btn-info pull-right addViewBtn">
                    <i class="glyphicon glyphicon-th-list viewIcon"></i>
                    Loan Adjustment List
                </a>
            </div>
            <div class="panel panel-default panel-border">
                <div class="panel-heading">
                    <div class="panel-title">New Loan Adjustment</div>
                </div>
                <div class="panel-body">
                    <div class="row">

                    


                        <div class="tab-content no-margin">
                            <div class="tab-pane with-bg active" id="fwv-1">
                                <div class="panel panel-default" style="padding:0!important;">

                                    <div class="panel-body" style="padding:5px 10px;">
                                        <div class="row">
                                            <div class="col-xs-6">

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

                                                {!! Form::hidden('memberId',null,['id'=>'memberId']) !!}
                                                {!! Form::hidden('branchId',null,['id'=>'branchId']) !!}
                                                {!! Form::hidden('samityId',null,['id'=>'samityId']) !!}
                                                {!! Form::hidden('workingAreaId',null,['id'=>'workingAreaId']) !!}

                                                @if ($userBranchId==1)
                                                {!! createForm::select('filBranch',$branchList,null,'Branch:',['id'=>'filBranch','autocomplete'=>'off']) !!}
                                                @endif

                                                {!! createForm::select('filSamity',$samity,null,'Samity:',['id'=>'filSamity','autocomplete'=>'off']) !!}				

                                                

                                                <div class="ui-widget">
                                                    {{-- {!! createForm::text('member','','Member:',['id'=>'member','autocomplete'=>'off']) !!} --}}
                                                    {!! createForm::select('member',[],null,'Member:',['id'=>'member','autocomplete'=>'off']) !!}
                                                </div>

                                                {!! createForm::select('loanId',[''=>'Select'],null,'Loan Id:',['id'=>'loanId','autocomplete'=>'off']) !!}

                                                @if ($userBranchId==1)
                                                {!! createForm::text('softwareDate',null,'software Date:',['id'=>'softwareDate','autocomplete'=>'off','readonly'=>'readonly','style'=>'cursor:pointer']) !!}
                                                @else
                                                {!! createForm::text('softwareDate',$softwareDate,'Date:',['id'=>'softwareDate','autocomplete'=>'off','readonly'=>'readonly','style'=>'cursor:pointer']) !!}
                                                @endif

                                                {!! createForm::text('dueAmount','','Due Amount:',['id'=>'dueAmount','autocomplete'=>'off','readonly'=>'readonly']) !!}
                                                
                                                {!! createForm::select('savingsId',[''=>'Select'],null,'Savings Id:',['id'=>'savingsId','autocomplete'=>'off']) !!}
                                                
                                                <div class="form-group">
                                                    <div class="col-sm-12">
                                                        <table id="adjustmentInfoTable" class="table table-striped table-bordered">
                                                            <thead>
                                                                <tr>
                                                                    <th>Savings Code</th>
                                                                    <th>Adjusted Amount</th>
                                                                    <th></th>
                                                                </tr>
                                                            </thead>

                                                            <tbody id="adjustmentTable">
                                                                
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    {!! Form::label('notes', 'Notes:', ['class' => 'col-sm-4 control-label']) !!}
                                                    <div class="col-sm-8">
                                                    {!! Form::textarea('notes','',['class'=>'form-control','rows'=>4]) !!}
                                                </div>                                            
                                                </div>

                                                <ul class="pager wizard pull-right">                                        
                                                {!! Form::submit('Submit', ['id' => 'submit', 'class' => 'btn btn-info']) !!}
                                                </ul>


                                            </div>{{-- End First Column --}}

                                            {{-- Second Coloum --}}
                                            <div class="col-xs-6" >

                                                <div class="row">
                                                    <div class="col-md-12">
                                                        
                                                        @php
                                                        $tableRows = ['Payable','Transaction','Outstanding','Installment','Advance','Due'];
                                                        @endphp

                                                        <h4 id="loanInfoTableHeading">Loan Information</h4>
                                                        <table id="loanInfoTable" class="table table-striped table-bordered">
                                                            <thead>
                                                            <tr>
                                                                <th>Loan Code</th>
                                                                <th>Disbursed Amount</th>
                                                                <th>Installment Amount</th>
                                                                <th>Payable Amount</th>
                                                                <th>Paid Amount</th>
                                                                <th>Due Amount</th>
                                                                <th>Advance Amount</th>
                                                                <th>Outstanding</th>
                                                            </tr>
                                                            </thead>

                                                            <tbody id="loanTable">
                                                                
                                                            </tbody>
                                                        </table>

                                                    </div>
                                                </div>

                                                <div class="row">
                                                    <div class="col-md-12">
                                                        @php
                                                        $tableRows = ['Payable','Transaction','Outstanding','Installment','Advance','Due'];
                                                        @endphp

                                                        <h4 id="loanInfoTableHeading">Savings Information</h4>
                                                        <table id="savingsInfoTable" class="table table-striped table-bordered">
                                                            <thead>
                                                            <tr>
                                                                <th>Savings Code</th>
                                                                <th>Opening Date</th>
                                                                <th>Deposite Amount</th>
                                                                <th>Withdraw Amount</th>
                                                                <th>Balance</th>
                                                            </tr>
                                                            </thead>

                                                            <tbody id="savingsTable">
                                                                {{-- @foreach ($tableRows as $tableRow)
                                                                    <tr class="{{$tableRow}}">
                                                                        <td class="name">{{$tableRow}}</td>
                                                                        <td class="amount"></td>
                                                                        <td class="amount"></td>
                                                                        <td class="amount"></td>
                                                                    </tr>
                                                                @endforeach --}}
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>

                                            </div>
                                            {{-- End Second Coloum --}}

                                        </div>

                                        

                                    </div>
                                </div>


                            </div>


                        </div>
                    {!! Form::close() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<style>
   .ui-autocomplete {
        max-height: 200px;
        overflow-y: auto;
        /* prevent horizontal scrollbar */
        overflow-x: hidden;
        /* add padding to account for vertical scrollbar */
        padding-right: 20px;
    } 

    .amout {
        text-align: right;
    }

    .name {
        text-align: center;
    }
</style>

<script>
    $(document).ready(function() {
        $("#loadingModal").hide();

        var loanDetails = [];
        var savingsDetails = [];
        var dueAmount = 0;
        var onClickedValue = 0;
        var checkOnClicked = 0;
        var checkPrevOnClicked = 0;
        var globalDue = 0;
        var globalAdjustmentArray = [];
        // var globalWeeklySavingsBalance = 0;
        var dotCount='';
        
        var isSavingsAccountSelectedOrNot = false;

        $(document).on('change', '#filBranch', function() {
            
            $.ajax({
                type: 'post',
                url: './reqSamityAccordingToBranch',
                dataType: 'json',
                data: {
                'branchId': $('#filBranch').val(),
                },
                success: function(_response) {
                    console.log('Success')
                    if(_response.errors) {
                        alert(_response.errors);
                    } else {
                        $('#member').empty();
                        $('#filSamity').empty();
                        $('#filSamity').append('<option value="" selected="selected">Select</option>');

                        $.each(_response.samity, function(index, value) {
                            // console.log(value)
                        $('#filSamity').append('<option value="'+ index +'">' + value + '</option>');
                        });
                    }
                },
                error: function(_response) {
                    alert(_response.errors);
                }
            });
        });

        $(document).on('change', '#filSamity', function() {
            $('#member').empty();
            $('#member').html('');
            $('#member').val('');

            $('#loanId').empty();
            $('#softwareDate').empty();
            $('#loanTable tr').remove();
            $('#savingsTable tr').remove();
            $('#adjustmentTable tr').remove();
            console.log('member is empty now!')

            $.ajax({
                type: 'post',
                url: './reqMemberAccordingToSamity',
                dataType: 'json',
                data: {
                    'samityId': $('#filSamity').val(),
                    // 'memberValue': $('#member').val(),
                },
                success: function(_response) {
                    console.log('Success');
                    
                    if (_response.errors) {
                        alert(_response.errors);
                    } else {
                        console.log(_response);

                        // Clear the existing options in the select box
                        $('#member').empty();

                        // Add a placeholder option
                        $('#member').append('<option value="">Select Member</option>');

                        // Iterate over the response and add each result as an option
                        $.each(_response, function(key, value) {
                            $('#member').append('<option value="' + key + '">' + value + '</option>');
                        });
                    }
                },
                error: function(_response) {
                    alert('An error occurred');
                }
            });
        });

        // $(document).on('keyup', '#member', function() {
        //     console.log('got it', $('#member').val());

        //     $.ajax({
        //         type: 'post',
        //         url: './reqMemberAccordingToSamity',
        //         dataType: 'json',
        //         data: {
        //         'samityId': $('#filSamity').val(),
        //         'memberValue': $('#member').val(),
        //         },
        //         success: function(_response) {
        //             console.log('Success')
        //             if(_response.errors) {
        //                 alert(_response.errors);
        //             } else {
                        
        //                 console.log(_response);

        //                 var _result = Object.keys(_response).map(function(key) {
        //                     return _response[key];
        //                 });

        //                 console.log(_result);

        //                 $( "#member" ).autocomplete({
        //                     source: _result,
        //                     minLength:2
        //                 });
        //             }
        //         },
        //         error: function(_response) {
        //             alert(_response.errors);
        //         }
        //     });
        // });

        // $(document).on('click', '.ui-menu-item-wrapper', function() {
        $(document).on('change', '#member', function() {
            console.log('Member : ', $('#member').val());

            $.ajax({
                type: 'post',
                url: './reqMemberInfo',
                dataType: 'json',
                data: {
                'samityId': $('#filSamity').val(),
                'memberValue': $('#member').val(),
                },
                success: function(_response) {
                    console.log('Success');
                    console.log(_response);

                    $('#loanId').empty();
                    $('#softwareDate').empty();
                    $('#loanTable tr').remove();
                    $('#savingsTable tr').remove();
                    $('#adjustmentTable tr').remove();

                    if(_response.success == false) {
                        alert('Loan collection adjustment exist for this member ! Please wait until it get approved !');
                    } else {
                        
                        setTimeout(function(){
                            $('#loanId').append('<option value="" selected="selected">Select</option>');
                            $.each(_response.loanIds, function(index, value) {
                                $('#loanId').append('<option value="'+ index +'">' + value + '</option>');
                            });
                            
                            $('#softwareDate').val(_response.softwareDate);

                            savingsDetails = _response.savingsDetails;
                            
                            $.each(_response.savingsDetails, function(index, value) {
                                var newBalance = Number(value.balance);

                                $('#savingsTable').append('<tr> <td class="name">'+value.code+'</td> <td>'+value.openingDate+'</td> <td class="amount">'+Number(value.deposite).toFixed(2)+'</td> <td class="amount">'+Number(value.withdraw).toFixed(2)+'</td> <td class="amount"> '+Number(newBalance).toFixed(2)+' </td> </tr>');
                            });

                            loanDetails = _response.loanDetails;
                            
                            $.each(_response.loanDetails, function(index, value) {
                                $('#loanTable').append('<tr> <td class="name">'+value.code+'</td> <td class="amount">'+Number(value.loan_amount).toFixed(2)+'</td> <td class="amount">'+Number(value.loan_installment_amount).toFixed(2)+'</td> <td class="amount">'+Number(value.payable_amount).toFixed(2)+'</td> <td class="amount">'+Number(value.paid_amount).toFixed(2)+'</td> <td class="amount">'+Number(value.due_amount).toFixed(2)+'</td> <td class="amount">'+Number(value.advance_amount).toFixed(2)+'</td> <td class="amount">'+Number(value.outstanding).toFixed(2)+'</td> </tr>');
                            });
                        }, 50);
                        

                    }
                },
                error: function(_response) {
                    alert(_response.errors);
                }
            });
        });

        $(document).on('change', '#loanId', function() {
            console.log('Loan datails : ', loanDetails);
            console.log('Savings datails : ', savingsDetails);
            console.log('Loan id : ', $('#loanId').val());

            $('#adjustmentTable tr').remove();

            $.each(loanDetails, function(index, value) {
                if ($('#loanId').val() == index) {
                    $('#dueAmount').val(value.outstanding);

                    if (value.outstanding > 0) {
                        dueAmount = value.outstanding;

                        globalDue = value.outstanding;

                        console.log('savingsDetails : ', savingsDetails);

                        $.each(savingsDetails, function(index, value) {
                            if (value.loanCollectionAdjust == 1 || value.loanCollectionAdjust == 2) { // according to the company rules
                                $('#savingsId').append('<option value="'+ index +'" id="'+index+'">' + value.code + '</option>');
                                
                                // globalWeeklySavingsBalance = value.balance;
                            }
                            
                        });
                    }
                    else {
                        alert('Nothing to adjust');
                    }
                }
                
            });
        });

        $(document).on('change', '#savingsId', function() {
            $.each(savingsDetails, function(index, value) {
                if($('#savingsId').val() == index){
                    var balanceReduces = 0;
                    
                    if (dueAmount < value.balance) {
                        if(savingsDetails[index].loanCollectionAdjust == 2){
                            alert('Savings balance is greater than the current due !');
                            // document.getElementById("submit").disabled = true;
                            return false;
                        }
                        balanceReduces = dueAmount;
                        dueAmount -= balanceReduces;
                    }
                    else {
                        balanceReduces = value.balance;
                        dueAmount -= value.balance;
                    }

                    // globalAdjustmentArray.push(balanceReduces);
                    
                    $('#dueAmount').val(dueAmount);

                    if(savingsDetails[index].loanCollectionAdjust == 1){
                        $('#adjustmentTable').append('<tr> <td><input type="hidden" name="adjustedSavingsId[]" value="'+index+'"> '+value.code+'</td> <td><input name="amount[]" value="'+balanceReduces+'" class="adjustmentedValues"> </td> <td> <i class="fas fa-times remove" style="color: red !important; cursor: pointer !important;"></i> </td> </tr>'); 
                    }else{
                        $('#adjustmentTable').append('<tr> <td><input type="hidden" name="adjustedSavingsId[]" value="'+index+'"> '+value.code+'</td> <td><input type="hidden" name="amount[]" value="'+balanceReduces+'" class="adjustmentedValues"> <input value="'+balanceReduces+'" disabled="disabled" > </td> <td> <i class="fas fa-times remove" style="color: red !important; cursor: pointer !important;"></i> </td> </tr>'); 
                    }
                
                    document.getElementById($('#savingsId').val()).disabled = true;
                }
                console.log(index);
            });
            
            isSavingsAccountSelectedOrNot = true;

            $('#savingsId').val('');
        });

        $("body").on("click", ".adjustmentedValues", function () {
            console.log('Adjustment edit onClicked : ', $(this).closest('tr').find('.adjustmentedValues').val());

            onClickedValue = $(this).closest('tr').find('.adjustmentedValues').val();

            // $.each(globalAdjustmentArray, function(index, value) {
            //     if (value == onClickedValue) {
            //         checkOnClicked = index;
            //         checkPrevOnClicked = value;
            //     }
            // });

            console.log('checkOnClicked : ', checkOnClicked);
            console.log('checkPrevOnClicked : ', checkPrevOnClicked);
            // console.log('globalAdjustmentArray : ', globalAdjustmentArray);
        });

        $("body").on("keyup", ".adjustmentedValues", function () {
            var tr = $(this).closest("tr");
            console.log('adjust dot count');
        	if ($(this).val().replace(/[^.]/g, "").length > 0){
        	    console.log('adjust dot count if');
        		$(this).val(dotCount); 
        	}else{
        	    console.log('adjust dot count else');
        		dotCount = $(this).val();
        	}
            console.log('Adjustment edit : ', $(this).closest('tr').find('.adjustmentedValues').val());

            // console.log('globalAdjustmentArray : ', globalAdjustmentArray);
            console.log('globalDue : ', globalDue);

            var sumAmount = 0;
            var adjustmentValue = $(this).closest('tr').find('.adjustmentedValues').val();
            
            console.log('sum value : '+sumAmount);

            // sumAmount += Number($(this).closest('tr').find('.adjustmentedValues').val());

            // $.each(globalAdjustmentArray, function(index, value) {
            //     if (index != checkOnClicked) {
            //         console.log('index : '+index+' checkOnClicked : '+checkOnClicked+' Value : '+value);
            //         sumAmount += Number(value);
            //     }
            // });

            var adjustedSavingsId = tr.find('input[name="adjustedSavingsId[]"]').val();
            if (adjustmentValue > savingsDetails[adjustedSavingsId].balance) { // 
                alert('Can not greater than the current savings balance !');
                tr.find('.adjustmentedValues').val(savingsDetails[adjustedSavingsId].balance);
                document.getElementById("submit").disabled = true;
            }

            $('.adjustmentedValues').each(function (index, el) {
                sumAmount += +$(el).val();
            });

            console.log('Sum Amount is : ', sumAmount);

            if (sumAmount <= globalDue) {
                dueAmount = globalDue - sumAmount;
                $('#dueAmount').val(dueAmount);

                // $.each(globalAdjustmentArray, function(index, value) {
                //     if (index == checkOnClicked) {
                //         globalAdjustmentArray[index] = adjustmentValue;
                //     }
                // });
                document.getElementById("submit").disabled = false;
            }
            else {
                alert('Can not greater than the current due !');
                document.getElementById("submit").disabled = true;
            }
            
            
            if (adjustmentValue > 0) {
                
            }
            else {
                alert('Adjustment value can not be less than or equal to zero !');
                document.getElementById("submit").disabled = true;
            }
            // sumAmount = 0;
        });

        $("body").on("click", ".remove", function () {
            var tr = $(this).closest("tr");
            var adjustedSavingsId = tr.find('input[name="adjustedSavingsId[]"]').val();
            // console.log('Remove click : ', $(this).closest('tr td:first-child').html);

            // console.log('find 1 : ', $(this).closest('tr').find('td:first-child').html());
            console.log('find 2 : ', $(this).closest('tr').find('td').eq(0).text());
            console.log('find 2A : ', $(this).closest('tr').find('.adjustmentedValues').val());
            // console.log('find 3 : ', $(this).closest('tr').find('td:first').html());

            // console.log('parent 1 : ', $(this).parent().siblings(":second").text());

            dueAmount += Number($(this).closest('tr').find('.adjustmentedValues').val());

            $('#dueAmount').val('');
            $('#dueAmount').val(dueAmount);
            
            $(this).closest("tr").remove();
            
            if ($('.adjustmentTable tr').length == 0) {
                isSavingsAccountSelectedOrNot = false;
                // globalAdjustmentArray = [];
            }

            $.each(savingsDetails, function(index, value) {
                if (value.accountId == adjustedSavingsId) { // according to the company rules
                    document.getElementById(index).disabled = false;
                }
                
            });
            
            console.log('globalDue : '+globalDue);
        });
        
        // $('.adjustmentedValues').on('input', function() {
        //     console.log('adjust dot count');
        // 	if ($(this).val().replace(/[^.]/g, "").length > 0){
        // 	    console.log('adjust dot count if');
        // 		$(this).val(dotCount); 
        // 	}else{
        // 	    console.log('adjust dot count else');
        // 		dotCount = $(this).val();
        // 	}
        // });

        /*Form*/
		$('form').submit(function(event){
            event.preventDefault();

            $("#submit").prop('disabled',true);
            
            if (isSavingsAccountSelectedOrNot == true){
                $.ajax({
                    type: 'post',
                    url: './storeMfnLoanAdjustment',
                    data: $('form').serialize(),
                    dataType: 'json',
                    success: function(_response) {
    
                        $(".error").remove();
                        if(_response.errors) {
                            $("#submit").prop('disabled',false);
                            $.each(_response.errors, function(name, error) {
                                $("#"+name).after("<p class='error'>* "+_response.errors[name]+"</p>");
                            });
                        } 
                        else { 
                            if (_response.responseTitle=='Warning!') {
                                toastr.warning(_response.responseText, _response.responseTitle, opts);
                            }
                            else{
                                toastr.success(_response.responseText, _response.responseTitle, opts);
    
                                setTimeout(function(){
                                window.location.href = '{{ url('mfn/viewLoanCollectionAdjustment/') }}';
                                }, 3000);
    
                            }
                        }
                    },
                    error: function(_response) {
                        $("#submit").prop('disabled',false);
                        alert('Response Error');
                    }
                });
            }
            else {
                alert('Please select an account and assign some vlaue in the adjustment!');
            }

            
        });
        /* End Form*/

    }); /*End Ready*/
</script>

@endsection