@extends('layouts/microfin_layout')
@section('title', $title)
@section('content')
    @include('microfin.loan.stack')
    @stack('formStyleScript')

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css">

    <script type="text/javascript">
        $("#loadingModal").show();
    </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/application') }}" class="btn btn-info pull-right addViewBtn">
                        <i class="glyphicon glyphicon-th-list viewIcon"></i>
                        Loan Application List
                    </a>
                </div>
                <div class="panel panel-default panel-border">
                    <div class="panel-heading">
                        <div class="panel-title">
                            {{ $title }}
                        </div>
                    </div>


                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-12">
                                {!! Form::open(['url' => '#', 'role' => 'form', 'class' => 'form-horizontal form-groups', 'id' => 'rootwizard']) !!}
                                {!! Form::hidden('edit_id', $loanApplication->id) !!}
                                {!! Form::hidden('applicationId', $loanApplication->id) !!}

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="panel-heading partTitle">
                                            Member Information
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        {!! Form::label('member', 'Member:', ['class' => 'control-label required']) !!}
                                        {!! Form::text('memberIdFk', $loanApplication->memberName, [
                                            'class' => 'form-control',
                                            'id' => 'member',
                                            'type' => 'text',
                                            'data-validate' => 'required',
                                            'autocomplete' => 'off',
                                            'disabled' => true,
                                        ]) !!}
                                    </div>
                                    <div id="memberData">
                                        @stack('memberInformation')
                                        @stack('savingsInformation')
                                        @stack('prevLoanInformation')

                                        <div id="mortgageInformation">
                                            <div class="col-md-12">
                                                <br>
                                                <div class="panel-heading partTitle">
                                                    Mortgage Information
                                                </div>
                                            </div>

                                            <div class="col-md-12" style="margin: 5px 0px 10px">
                                                <div class="row">
                                                    {!! Form::label('isMortgage', 'Is Mortgage Allowed?:', ['class' => 'col-md-2 control-label required']) !!}
                                                    <div class="col-sm-7">
                                                        <label class="radio-inline">
                                                            {!! Form::radio('isMortgage', 1, $loanApplication->isMortgage == 1 ? true : false, [
                                                                'class' => 'control-label',
                                                                'id' => 'isMortgage',
                                                                'disabled' => true,
                                                            ]) !!}Yes
                                                        </label>

                                                        <label class="radio-inline">
                                                            {!! Form::radio('isMortgage', 0, $loanApplication->isMortgage == 0 ? true : false, [
                                                                'class' => 'control-label',
                                                                'disabled' => true,
                                                            ]) !!}No
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="mortgageFields">
                                                <div class="col-md-3">
                                                    {!! Form::label('mortgageTypeId', 'Mortgage Type:', ['class' => 'control-label required']) !!}
                                                    {!! Form::select('mortgageTypeId', $mortgageTypes, $loanApplication->mortgageTypeId, [
                                                        'class' => 'form-control',
                                                        'id' => 'mortgageTypeId',
                                                        'disabled' => true,
                                                    ]) !!}
                                                </div>

                                                <div class="col-md-3">
                                                    {!! Form::label('mortgageDate', 'Mortgage Date:', ['class' => 'control-label required']) !!}
                                                    {!! Form::text('mortgageDate', $loanApplication->mortgageDate, [
                                                        'class' => 'form-control',
                                                        'id' => 'mortgageDate',
                                                        'autocomplete' => 'off',
                                                        'readonly',
                                                        'style' => 'cursor:pointer;',
                                                    ]) !!}
                                                </div>

                                                <div class="col-md-3">
                                                    {!! Form::label('mortgageAmount', 'Mortgage Amount:', ['class' => 'control-label required']) !!}
                                                    {!! Form::number('mortgageAmount', $loanApplication->mortgageAmount, [
                                                        'class' => 'form-control',
                                                        'id' => 'mortgageAmount',
                                                        'autocomplete' => 'off',
                                                        'disabled' => true,
                                                    ]) !!}
                                                </div>

                                                {{-- <div class="col-md-3">
                                                    {!! Form::label('mortgageDoc', 'Mortgage Document:', ['class' => 'control-label required']) !!}
                                                    <div class="">
                                                        @if ($loanApplication->mortgageDoc)
                                                            <a class="btn btn-success"
                                                                style="height: 28px; padding:5px; width:100%;"
                                                                target="_blank"
                                                                href="{{ url('uploads/images/mortgageDoc/' . $loanApplication->mortgageDoc) }}">Show
                                                                Uploaded Document</a>
                                                        @else
                                                            <small>N.B: Not yet upload</small>
                                                        @endif
                                                    </div>
                                                </div> --}}

                                                <div class="col-md-3">
                                                    {!! Form::label('mortgageDoc', 'Mortgage Document:', ['class' => 'control-label']) !!}
                                                    <div class="">
                                                        {!! Form::file('mortgageDoc', ['class' => 'form-control', 'id' => 'mortgageDoc']) !!}
                                                        @if ($loanApplication->mortgageDoc)
                                                            <a target="_blank" class="text-info"
                                                                href="{{ url('uploads/images/mortgageDoc/' . $loanApplication->mortgageDoc) }}">Show
                                                                Uploaded
                                                                Document</a>
                                                        @endif
                                                    </div>
                                                </div>

                                                <div class="col-md-12 mortgageSavingsAccounts">
                                                    {!! Form::label('mortgageSavingsAccounts', 'Mortgage Savings Account(s):', [
                                                        'class' => 'control-label required',
                                                    ]) !!}
                                                    {!! Form::text('mortgageSavingsAccounts', $loanApplication->mortgageSavingsCodes, [
                                                        'class' => 'form-control',
                                                        'id' => 'mortgageSavingsAccounts',
                                                        'autocomplete' => 'off',
                                                        'style' => 'height:0px;',
                                                        'placeholder' => $isNewLoanEditable ?? 'Type account code and select from dropdown.',
                                                    ]) !!}
                                                </div>
                                            </div>
                                        </div>

                                        @stack('newLoanInformation')



                                        @if($action_type == 'forward')  
                                            <div class="col-md-12">
                                                {!! Form::label('remarks', 'Remarks:', ['class' => 'control-label']) !!} <small class="muted">(Optional)</small>
                                                {!! Form::textarea('remarks', null, [
                                                    'class' => 'form-control mini_textarea',
                                                    'placeholder' => 'Write something here...',
                                                ]) !!}
                                            </div>
                                        @endif
                                        
                                        <div class="col-md-12 text-right">
                                            <div id="customError">
                                            </div>
                                        </div>
                                        
                                    </div>
                                </div>
                                @if($action_type == 'forward')   
                                    <ul class="pager wizard pull-right">
                                        {!! Form::button('Reject', ['id' => 'reject', 'class' => 'btn btn-danger']) !!}
                                        @if ($loanApplication->originStepNo != $loanApplication->currenStepNo && $loanApplication->currenStepNo > 1)
                                            {!! Form::button('Return', ['id' => 'return', 'class' => 'btn btn-warning']) !!}
                                        @endif
                                        {!! Form::submit('Approve', ['id' => 'submit', 'class' => 'btn btn-info']) !!}
                                    </ul>
                                @endif
                                
                                {!! Form::close() !!}
                                @include('gnr.tools.approvalConfig.approvalLogs')

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.js"></script>

    
    <script type="text/javascript">
        $(document).ready(function() {
            $('#mortgageSavingsAccounts').tokenfield({
                autocomplete: {
                    source: function(request, response) {
                        savingsCode = request.term;
                        if (savingsCode == '') savingsCode = "{{ $member->memberCode }}";
                        memberId = "{{ $member->id }}";
                        if (savingsCode.length >= 8) {
                            takenCodes = $('#mortgageSavingsAccounts').val();
                            jQuery.get("{{ url('mfn/disburse/loanMortgage') }}", {
                                savingsCode: savingsCode,
                                memberId: memberId,
                                takenCodes: takenCodes
                            }, function(data) {
                                response(data);
                            });
                        }
                    },
                    delay: 100
                },
                showAutocompleteOnFocus: true,
                createTokensOnBlur: true,
            });
        });


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

            if ("{{ $isNewLoanEditable }}" == 1 && "{{ $action_type }}" == 'forward') {
                $('#productIdFk, #loanAmount, #loanPeriod, #purposeId, input[name="isMortgage"]').removeAttr('disabled',
                    'disabled');
            }

        $("#mortgageDate").datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: "c-5:c+5",
            dateFormat: 'dd-mm-yy',
            onSelect: function() {
                $(this).closest('div').find('.error').remove();
            }
        });

            function num(argument) {
                return argument.toLocaleString('en-US', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
            }

            $('#productIdFk').on('change', function() {
                $("#loanPeriod").html("<option value=''>Select Period</option>");
                $("#purposeId").html("<option value=''>Select Perpose</option>");
                $.ajax({
                        url: "{{ url('mfn/application/loanTypeData') }}",
                        type: 'get',
                        dataType: 'json',
                        data: {
                            loanTypeId: {{ $loanApplication->loanTypeId }},
                            memberId: {{ $loanApplication->memberIdFk }},
                            productIdFk: $(this).val(),
                        },
                    })
                    .done(function(data) {
                        $('#minLoanAmount').text(num(data.minLoanAmount));
                        $('#maxLoanAmount').text(num(data.maxLoanAmount));

                        $.each(data.periods, function(index, period) {
                            if ("{{ $loanApplication->repaymentFrequencyIdFk }}_{{ $loanApplication->numberOfInstallment }}" ==
                                index) {
                                $("#loanPeriod").append("<option selected='selected' value=" +
                                    index + ">" + period +
                                    "</option>");
                            } else {
                                $("#loanPeriod").append("<option value=" + index + ">" +
                                    period +
                                    "</option>");
                            }
                        });
                        periodsObject = Object.keys(data.periods);
                        if (periodsObject.length == 1) $("#loanPeriod").val(periodsObject[0]);

                        $.each(data.getEconomicPurposes, function(index, economicPurpose) {
                            if ("{{ $loanApplication->purposeId }}" == index) {
                                $("#purposeId").append("<option selected='selected' value=" +
                                    index + ">" +
                                    economicPurpose +
                                    "</option>");
                            } else {
                                $("#purposeId").append("<option value=" +
                                    index + ">" +
                                    economicPurpose +
                                    "</option>");
                            }
                        });

                    })
                    .fail(function() {
                        alert("response error");
                    });
            });


            /*Form*/
            $('form').submit(function(event) {
                event.preventDefault();
                x = confirm('Are you sure to approve/forward this transaction?');
                if (x === false) return false;
                $("#submit").prop('disabled', true);
                var formData = new FormData(this);
                $.ajax({
                    type: 'post',
                    url: "{{ url('mfn/application/forward/store') }}",
                    data: formData,
                    contentType: false,
                    cache: false,
                    dataType: 'json',
                    processData: false,
                    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);
                                $("#submit").prop('disabled', false);
                            } else {
                                toastr.success(_response.responseText, _response.responseTitle,
                                    opts);
                                setTimeout(function() {
                                    // location.reload();
                                    window.location.href =
                                        "{{ url('mfn/application') }}";
                                }, 3000);
                            }
                        }
                    },
                    error: function(_response) {
                        $("#submit").prop('disabled', false);
                        alert('Response Error');
                    }
                });

            });
            /* End Form*/

            $('#return').on('click', function(event) {
                event.preventDefault();
                x = confirm('Are you sure to return this transaction?');
                if (x === false) return false;
                $("button").prop('disabled', true);
                var formData = new FormData(this.closest('form'));
                $.ajax({
                    type: 'post',
                    url: "{{ url('mfn/application/return') }}",
                    data: formData,
                    contentType: false,
                    cache: false,
                    dataType: 'json',
                    processData: false,
                    success: function(_response) {
                        if (_response.responseTitle == 'Warning!') {
                            toastr.warning(_response.responseText, _response.responseTitle,
                                opts);
                            $("button").prop('disabled', false);
                        } else {
                            toastr.success(_response.responseText, _response.responseTitle,
                                opts);
                            setTimeout(function() {
                                // location.reload();
                                window.location.href =
                                    "{{ url('mfn/application') }}";
                            }, 3000);
                        }
                    },
                    error: function(_response) {
                        $("button").prop('disabled', false);
                        alert('Response Error');
                    }
                });

            });

            $('#reject').on('click', function(event) {
                event.preventDefault();
                x = confirm('Are you sure to return this transaction?');
                if (x === false) return false;
                $("button").prop('disabled', true);
                var formData = new FormData(this.closest('form'));
                $.ajax({
                    type: 'post',
                    url: "{{ url('mfn/application/reject') }}",
                    data: formData,
                    contentType: false,
                    cache: false,
                    dataType: 'json',
                    processData: false,
                    success: function(_response) {
                        if (_response.responseTitle == 'Warning!') {
                            toastr.warning(_response.responseText, _response.responseTitle,
                                opts);
                            $("button").prop('disabled', false);
                        } else {
                            toastr.success(_response.responseText, _response.responseTitle,
                                opts);
                            setTimeout(function() {
                                // location.reload();
                                window.location.href =
                                    "{{ url('mfn/application') }}";
                            }, 3000);
                        }
                    },
                    error: function(_response) {
                        $("button").prop('disabled', false);
                        alert('Response Error');
                    }
                });

            });
        });


        $('input[name="isMortgage"]').on('click', function() {
            if (!$(this).is(':checked')) return false;
            var isMortgage = $(this).val();
            if (isMortgage == 1) {
                if ("{{ $isNewLoanEditable }}" == 1) {
                    $('#mortgageFields').find('div').show('slow').find('select, input').prop('disabled', false);
                }else{
                    $('#mortgageDate, #mortgageDoc, #mortgageSavingsAccounts').prop('disabled', true);
                }
            } else {
                $('#mortgageFields').find('div').hide('slow').find('select, input').prop('disabled', true);
            }
            $('#mortgageTypeId').trigger('change');
        });

        $('#mortgageTypeId').on('change', function(){
            var isMortgage = $('input[name="isMortgage"]:checked').val();
            if($(this).val() == 1){
                $('#mortgageAmount').prop('disabled', true).closest('div').hide('slow');
                if(isMortgage == 1) $('.mortgageSavingsAccounts').show('slow');
            }else{
                $('#mortgageAmount').prop('disabled', false).closest('div').show('slow');
                $('.mortgageSavingsAccounts').hide('slow');
            }
        })

        $('input[name="isMortgage"]').trigger('click');
        $('#mortgageTypeId').trigger('change');

        $('#paymentMode').on('change', function(){
            var paymentMode = $('#paymentMode').val();
            $('#bankAccountId').prop('disabled', true).val(null);
            if (paymentMode == 'Cash' || !paymentMode) return false;
            var memberId = "{{$loanApplication->memberIdFk}}";
            $('#bankAccountId').prop('disabled', false);

            $.ajax({
                    url: "{{ url('mfn/member/bank/accountsWithPending') }}/"+memberId+"/"+paymentMode,
                    type: 'GET',
                    dataType: 'json'
            })
            .done(function(data) {
                $("#bankAccountId").find("option:gt(0)").remove();
                var accountsLength = data.memberBankAccounts.length;
                $.each(data.memberBankAccounts, function(index, account) {
                    $("#bankAccountId").append("<option value='" + account.id +
                        "'>" + account.accountNumber + "</option>");
                    if(accountsLength == 1) $('#bankAccountId').val(account.id);
                });
            })
            .fail(function() {
                alert("error");
            });
        });



    </script>
@endsection