@include('microfin.loan.stack')
@stack('memberInformation')
@stack('savingsInformation')
@stack('prevLoanInformation')


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

    @if (isset($member))
    <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',
                    ]) !!}Yes
                </label>

                <label class="radio-inline">
                    {!! Form::radio('isMortgage', 0, $loanApplication->isMortgage == 0 ? true : false, ['class' => 'control-label']) !!}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',
            ]) !!}
        </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',
            ]) !!}
        </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>
    @else
        <div class="col-md-12 text-center">
            <br>
            Please at first choose a member!
        </div>
    @endif
</div>

<div id="newLoanInformation">
    <div class="col-md-12">
        <br>
        <div class="panel-heading partTitle">
            New Loan Requirement
        </div>
    </div>

    @if (isset($member))
        <div class="col-md-12" style="margin: 5px 0px 10px">
            <div class="row">
                {!! Form::label('loanTypeId', 'Loan Type:', ['class' => 'col-md-2 control-label required']) !!}
                <div class="col-sm-7">
                    @foreach ($loanProductTypes as $loanProductType)
                        <label class="radio-inline">
                            {!! Form::radio(
                                'loanTypeId',
                                $loanProductType->id,
                                $loanProductType->id == $loanApplication->loanTypeId ? true : false,
                                ['class' => 'control-label', 'id' => 'loanTypeId']
                            ) !!} {{ $loanProductType->name }}
                        </label>
                    @endforeach

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

        <div id="newLoanField">
            {{-- <div class="col-md-3">
                {!! Form::label('productCategoryId', 'Loan Product:', ['class' => 'control-label required']) !!}
                {!! Form::select(
                    'productCategoryId',
                    ['' => 'Select Product'] + $loanCategories,
                    $loanApplication->categoryIdFk,
                    ['class' => 'form-control', 'id' => 'productCategoryId']
                ) !!}
            </div> --}}
            <div class="col-md-3">
                {!! Form::label('productIdFk', 'Loan Product:', ['class' => 'control-label']) !!}
                {!! Form::select('productIdFk', $eligibleProduct, $loanApplication->productIdFk ?  $loanApplication->productIdFk : $member->primaryProductId, [
                    'class' => 'form-control',
                    'disabled' => false,
                ]) !!}
            </div>

            <div class="col-md-3">
                {!! Form::label('loanAmount', 'Loan Amount:', ['class' => 'control-label required']) !!}
                {{-- <i style="font-size:8px;">min: <span id="minLoanAmount">{{ $minLoanAmount }}</span>/-,
                    max: <span id="maxLoanAmount">{{ $maxLoanAmount }}</span>/-</i> --}}
                {!! Form::number('loanAmount', $loanApplication->loanAmount, [
                    'class' => 'form-control',
                    'id' => 'loanAmount',
                    'autocomplete' => 'off',
                ]) !!}
            </div>

            <div class="col-md-3">
                {!! Form::label('loanPeriod', 'Loan Period:', ['class' => 'control-label required']) !!}
                {!! Form::select('loanPeriod', ['' => 'Select Period'] + $periods, $loanApplication->loanPeriod, [
                    'class' => 'form-control',
                    'id' => 'loanPeriod',
                ]) !!}
            </div>

            <div class="col-md-3">
                {!! Form::label('purposeId', 'Loan Perpose:', ['class' => 'control-label required']) !!}
                {!! Form::select('purposeId', ['' => 'Select Perpose'] + $getEconomicPurposes, $loanApplication->purposeId, [
                    'class' => 'form-control',
                    'id' => 'purposeId',
                ]) !!}
            </div>


        </div>
    @else
        <div class="col-md-12 text-center">
            <br>
            Please at first choose a member!
        </div>
    @endif


</div>


<script type="text/javascript">
    var memberId = "{{ $memberId }}";
    $("#mortgageDate").datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: "c-5:c+5",
        dateFormat: 'dd-mm-yy',
        onSelect: function() {
            $(this).closest('div').find('.error').remove();
        }
    });

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

    $('input[name="loanTypeId"]').on('change', function() {
        if (!$(this).is(':checked')) return false;
        $("#loanPeriod").html("<option value=''>Select Period</option>");
        $("#productIdFk").empty();
        loanTypeId = $(this).val();
        $.ajax({
                url: "{{ url('mfn/application/loanTypeData') }}",
                type: 'get',
                dataType: 'json',
                data: {
                    loanTypeId: $(this).val(),
                    memberId: {{ $memberId }},
                },
            })
            .done(function(data) {
                $.each(data.periods, function(index, period) {
                    $("#loanPeriod").append("<option value=" + index + ">" + period + "</option>");
                });
                periodsObject = Object.keys(data.periods);
                if (periodsObject.length == 1) $("#loanPeriod").val(periodsObject[0]);

                $.each(data.eligibleProduct, function(index, product) {
                    $("#productIdFk").append("<option value=" + index + ">" + product + "</option>");
                });
                productObject = Object.keys(data.eligibleProduct);
                if (productObject.length == 1) {
                    $("#productIdFk").val(productObject[0]);
                }else{
                    if("{{@$loanApplication->productIdFk}}" > 0 && loanTypeId == "{{@$loanApplication->loanTypeId}}"){
                        $("#productIdFk").val("{{@$loanApplication->productIdFk}}");
                    }else{
                        $("#productIdFk").val("{{@$member->primaryProductId}}");
                    }
                }

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

    $('#loanAmount').on('blur', function() {
        let amount = $(this).val();

        if(amount) {
            $.ajax({
                url: "{{url('mfn/applicatio/checkFirstTimeLoanAmount')}}", 
                method: 'get',
                data: {
                    memberId: {{ $memberId }},
                    amount: amount,
                    _token: '{{ csrf_token() }}' // if you’re in Laravel
                },
                success: function(response) {
                    if (response.responseTitle == 'Warning!') {
                        $('#loanAmount').val('');
                        toastr.warning(response.responseText, response.responseTitle);
                    }
                },
                error: function(xhr) {
                    console.error('Error:', xhr.responseText);
                }
            });
        }
    });

    /*Form*/
    $('form').off().submit(function(event) {
        event.preventDefault();
        $("#submit").prop('disabled', true);
        $("#loadingModal").show();
        var formData = new FormData(this);
        $.ajax({
            type: 'post',
            url: "{{ url('mfn/application/store') }}",
            data: formData,
            contentType: false,
            cache: false,
            dataType: 'json',
            processData: false,
            success: function(_response) {
                $("#loadingModal").hide();
                $("#submit").prop('disabled', false);
                $(".error").remove();
                if (_response.errors) {
                    $.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() {
                            location.reload();
                        }, 3000);
                    }
                }
            },
            error: function(_response) {
                $("#loadingModal").hide();
                $("#submit").prop('disabled', false);
                alert('Response Error');
            }
        });

    });
    /* End Form*/
    $('#mortgageTypeId').on('change', function(){
        if($(this).val() == 1){
            $('#mortgageAmount').prop('disabled', true).closest('div').hide('slow');
        }else if($(this).val() > 0){
            $('#mortgageAmount').prop('disabled', false).closest('div').show('slow');
        }
    })
    $('input[name="isMortgage"]').trigger('click');
    $('#mortgageTypeId').trigger('change');
</script>