@include('front.layouts.old_header')
<style type="text/css">
    #otp_wrap {
        display: none;
    }

    span.selection > span.select2-selection{
        border: none;
        height: 50px;
        border-bottom-style: solid;
        border-bottom-color: #ced4da;
        border-bottom-width: 1px;
        width: 353px;
        padding-top: 11px;
        outline: none;
    }
    span.select2-container{
        color: #696865;
    }

    span.select2-search > .select2-search__field{
        color: #767373;
        font-weight: 400;
        font-size: 15px;
    }

    /* For Firefox */
    input[type='number'] {
        -moz-appearance:textfield;
    }
    /* Webkit browsers like Safari and Chrome */
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    li.select2-results__option.select2-results__message{
        display: none;
    }

    .other_merchant_name{
        display: none;
    }
    .hidden-view{
        display: none;
    }
    .not_eligible_block{
        position: absolute;
        margin-top: -53px;
        margin-left: 100%;
        width: 100%;
        display: none;
        color: red;
    }

    .error_message_age{
        margin-left: 29px;
        color: red;
        font-size: 13px;
    }

    span.select2-selection__arrow{
        top:11px !important;
    }

    .verify_number.verified{
        color: green;
    }

    .required {
        color: red;
    }

    .work_details, .co_applicant_work_details {
        display: none;
    }

    .screen_1 {
        display: none;
    }

    .screen_2 {
        display: none;
    }

    .screen_3 {
        display: none;
    }

    .screen_4 {
        display: none;
    }

    .screen_5 {
        display: none;
    }

    .screen_6 {
        display: none;
    }

    .screen_7 {
        display: none;
    }

    .screen_8 {
        display: none;
    }

    .permanent_address_block {
        display: none;
    }

    .verify_number small {
        display: block;
    }

    @if(!isset($employment_status) || (isset($employment_status) && $employment_status != 'S'))
    .work_address_block {
        display: none;
    }
    @endif

    .screen_7 img, .screen_8 img {
        width: 120px;
        display: table;
        margin: 3em auto;
        margin-bottom: 2em;
    }

    .eligibility_btn
    {
        padding: .24rem 1rem !important;
    }

    @if(isset($application))
        @if( ($application->additional_docs || isset($docs)) && (($application->completed_stage == 2 && $application->co_applicant_required == 0) || $application->completed_stage == 3))
            .screen_6 {
                display: block;
            }
        @elseif( ($application->completed_stage == 2 && $application->co_applicant_required == 0) )
            .screen_5 {
                display: block;
            }

        @elseif( $application->completed_stage == 4 )
            .screen_7 {
                display: block;
            }
        @else
            .screen_{{ ($application->completed_stage + 2) }} {
                display: block;
            }
        @endif
    @else
    .screen_1 {
        display: block;
    }
    @endif
    div.md-form > label.error.active{
        position: absolute;
        top: 52px;
        width: 100%;
        padding-left: 0 !important;
    }
    .view-offer-data{
        padding-top: 17px;
        cursor: pointer;
        padding-left: 16px;
        border-bottom-style: solid;
        border-bottom-color: #bbc3c3;
        border-bottom-width: 1px;
        padding-bottom: 9px;
    }
    input:focus{
        outline:none;
    }
    span.select2-container--default{
        width: auto !important;
    }
</style>
<!--Main Layout-->
<main>
    <div class="container">
        @include('front.application.application-step-0')
        @include('front.application.application-step-1')
        @include('front.application.application-step-2')
        @include('front.application.application-step-3')
        @include('front.application.application-congrats')
        @include('front.application.application-congrats-2')
        @include('front.application.application-congrats-3')
        @include('front.application.application-step-additional')
    </div>
</main>
<div class="modal fade" id="emi_offer_list" role="dialog" data-queue="0" style="z-index: 2061;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div>
                <div class="modal-body" style="padding-bottom: 0;">

                </div>
            </div>
            <div class="modal-footer" style="padding: 0;">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="error_message" role="dialog" style="padding-top: 85px;">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-body">
                <p>It seems like it has been less than 3 months since you applied to Credit Fair . We'll be happy to serve you after 1 Month</p>
            </div>
            <div class="modal-footer" style="padding: 1px;">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="consent_message_view" data-id="0" role="dialog" style="padding-top: 85px;">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-body">
                <p>I hereby consent to K.M.Global Credit Pvt Ltd. and its affiliate lending partners (https://bit.ly/3TwDeS2) to receive my bureau and other financial /KYC details for financing purpose for purchase made. Regards, Credit fair</p>
            </div>
            <div class="modal-footer" style="padding: 1px;">
                <button type="button" class="btn btn-default" id="consent_message_view_agree">I Agree</button>
            </div>
        </div>
    </div>
</div>

@include('front.layouts.old_footer')

<script>

    $('.field_validation').keyup(function () {
        var maxChars = 2;
        if ($(this).val().length > maxChars) {
            $(this).val($(this).val().substr(0, maxChars));
        }
    });

    $('.field_validation1').keyup(function () {
        var maxChars = 10;
        if ($(this).val().length > maxChars) {
            $(this).val($(this).val().substr(0, maxChars));
        }
    });

    $("select[name='purpose']").on('change', function () {
        let category_id = $(this).val();
        if (category_id === '6' || category_id === '7') {
            $("#product_id_block").css({'display': 'flex'});
        } else {
            $("#product_id_block").css({'display': 'none'});
        }
    });


    $(".view-offer-data").click(function(){

        <?php if(isset($offer_id) && ($offer_id > 0)){ ?>
                return false;
        <?php } ?>
        let amountEvent = $("input[name='loan_amount']");
        let loan_amount = amountEvent.val();
        let _this = $(this);

        if(loan_amount >= 10000 && loan_amount <= 2000000){

            $("#loan_amount-error").remove();
            _this.find('span > img').css({display:'block'});
            getOffersData(loan_amount, function(response){
                if (response.status == 'OK'){
                    let event = $("#emi_offer_list");
                    event.find('.modal-body').html(response.data);
                    event.modal('show');
                }

                _this.find('span > img').css({display:'none'});
            })
        }else{
            let _error = '<label id="loan_amount-error" class="error active" for="check_aadhaar_card">Please enter a valid number.</label>';
            amountEvent.after(_error);
        }
    });

    let selectedMID = '<?php echo (isset($selectedMerchantID) && ($selectedMerchantID > 0)) ? $selectedMerchantID : 0 ?>';
    if(selectedMID){
        getCentreLists(selectedMID, function (response) {
            $("#src_merchant_center_name").html(response.data);
            if(!$('.merchant_location_id').length){
                $("#src_merchant_center_name").removeAttr('disabled');
            }
        });
    }

    $("select[name='merchant_id']").on('change', function() {
       let id = $(this).find('option:selected').val();
       getCentreLists(id, function (response) {
           $("#src_merchant_center_name").html(response.data);
           $("#src_merchant_center_name").removeAttr('disabled');
       });
    });

    function getCentreLists(id, callback){
        if (id){
            $.ajax({
                url: site_url + "api/get-centres",
                method: 'POST',
                data: {id: id}

            }).done(function(data) {
                callback(data);
            });
        }
    }

    $(document).on('click','tr.choose-emi-plan', function () {
        triggerOfferSelection($(this));
    });

    <?php if(isset($offer_id) && ($offer_id > 0)){ ?>
        getOffersData($("input[name='loan_amount']").val(), function(response){
            if (response.status == 'OK'){
                let event = $("#emi_offer_list");
                event.find('.modal-body').html(response.data);
                $('tr.choose-emi-plan[data-offer-id="<?php echo $offer_id; ?>"]').get(0).click();
            }
        });
    <?php } ?>

    function triggerOfferSelection(eventOffer){
        $(".appended-offer-id").remove();
        $("section.screen_1 > form#creditfairForm").append('<input type="hidden" name="offer_id" value="'+eventOffer.attr('data-offer-id')+'" class="appended-offer-id"/>');
        $('tr.choose-emi-plan').find('input').removeAttr('checked');
        eventOffer.find('input').attr('checked', 'checked');
        let event = $("#emi_offer_list");
        event.modal('hide');
        $(".view-offer-data").find('span.v-title').html(eventOffer.attr('data-tenure')+' Months');

        $("select[name='tenure']").find('option[value=' + eventOffer.attr('data-tenure') + ']')
            .attr('selected',true);
    }

    function getOffersData(loan_amount, callback){
        let id = <?php echo (isset($selectedMerchantID) && ($selectedMerchantID > 0)) ? $selectedMerchantID : 0 ?>;
        let offer_id = <?php echo (isset($offer_id) && ($offer_id > 0)) ? $offer_id : 0 ?>;
        let appended_offer_id = $(".appended-offer-id").val();
        if(!appended_offer_id){
            appended_offer_id = offer_id;
        }
        if (id){
            $.ajax({
                url: site_url + "api/get-offers",
                method: 'POST',
                data: {id: id, loan_amount:loan_amount, appended_offer_id:appended_offer_id}

            }).done(function(data) {
                callback(data);
            });
        }
    }
    <?php if(isset($selectedMerchantID) & in_array($selectedMerchantID, [5983, 5984, 5980, 5803])){ ?>
    $(".co-app-st").remove();
    $(".co-app-t").html("We are almost finished! Just upload the document then submit your application.");
    <?php } ?>
    var purposeName = <?php echo env('APP_CONNECTION') ? 24 : 6; ?>;
    $(document).ready(function() {
        var purposeSelected = <?php echo isset($selectedMerchantCategoryID) ? $selectedMerchantCategoryID : 0;?>;
        if(purposeSelected == 0){
            $('#other_inverter').css({'display':'none'});
            $('#inverter').css({'display':'none'});
            $('#other_panel').css({'display':'none'});
            $('#panel').css({'display':'none'});
            $('#model_description').css({'display':'none'});
            $('#KW_installation').css({'display':'none'});
            $('#type_of_customer').css({'display':'none'});
            $('#type_of_solar_power').css({'display':'none'});
            $('#monthly_power_bill').css({'display':'none'});
            $('#gross_project_amount').css({'display':'none'});
            $('#subsidy_amount').css({'display':'none'});
            $('#power_savings').css({'display':'none'});
            /* $("select[name='inverter']").removeAttr('data-required');
            $("input[name='KW_installation']").removeAttr('data-required');
            $("input[name='monthly_power_bill']").removeAttr('data-required');
            $("input[name='gross_project_amount']").removeAttr('data-required');
            $("input[name='subsidy_amount']").removeAttr('data-required');
            $("input[name='power_savings']").removeAttr('data-required'); */
        }else if(purposeSelected == purposeName){
            $('#inverter').css({'display':''});
            $('#panel').css({'display':''});
            $('#model_description').css({'display':''});
            $('#type_of_customer').css({'display':''});
            $('#type_of_solar_power').css({'display':''});
            $('#KW_installation').css({'display':''});
            $('#monthly_power_bill').css({'display':''});
            $('#gross_project_amount').css({'display':''});
            $('#subsidy_amount').css({'display':''});
            $('#power_savings').css({'display':''});
            /* $("select[name='inverter']").attr('data-required', '1');
            $("input[name='KW_installation']").attr('data-required','1');
            $("input[name='monthly_power_bill']").attr('data-required','1');
            $("input[name='gross_project_amount']").attr('data-required','1');
            $("input[name='subsidy_amount']").attr('data-required','1');
            $("input[name='power_savings']").attr('data-required','1'); */
        }else{
            $('#other_inverter').css({'display':'none'});
            $('#inverter').css({'display':'none'});
            $('#other_panel').css({'display':'none'});
            $('#panel').css({'display':'none'});
            $('#model_description').css({'display':'none'});
            $('#KW_installation').css({'display':'none'});
            $('#type_of_customer').css({'display':'none'});
            $('#type_of_solar_power').css({'display':'none'});
            $('#monthly_power_bill').css({'display':'none'});
            $('#gross_project_amount').css({'display':'none'});
            $('#subsidy_amount').css({'display':'none'});
            $('#power_savings').css({'display':'none'});
        }

        if($("select[name='inverter'] option:selected").val() == 'other'){
            $('#other_inverter').css({'display':''});
            /* $("input[name='other_inverter']").attr('data-required','1'); */
        }else{
            $('#other_inverter').css({'display':'none'});
            /* $("input[name='other_inverter']").removeAttr('data-required'); */
        }

        if($("select[name='panel'] option:selected").val() == 'other'){
            $('#other_panel').css({'display':''});
            /* $("input[name='other_inverter']").attr('data-required','1'); */
        }else{
            $('#other_panel').css({'display':'none'});
            /* $("input[name='other_inverter']").removeAttr('data-required'); */
        }
    });

    $("body").on('change', 'select[name="purpose"]', function(){
        var categoryName = <?php echo env('APP_CONNECTION') ? 24 : 6; ?>;
        if(this.value == categoryName){
            $('#inverter').css({'display':''});
            $('#panel').css({'display':''});
            $('#model_description').css({'display':''});
            $('#KW_installation').css({'display':''});
            $('#type_of_customer').css({'display':''});
            $('#type_of_solar_power').css({'display':''});
            $('#monthly_power_bill').css({'display':''});
            $('#gross_project_amount').css({'display':''});
            $('#subsidy_amount').css({'display':''});
            $('#power_savings').css({'display':''});
            /* $("select[name='inverter']").attr('data-required', '1');
            $("input[name='KW_installation']").attr('data-required','1');
            $("input[name='monthly_power_bill']").attr('data-required','1');
            $("input[name='gross_project_amount']").attr('data-required','1');
            $("input[name='subsidy_amount']").attr('data-required','1');
            $("input[name='power_savings']").attr('data-required','1'); */
        }else{
            $('#other_inverter').css({'display':'none'});
            $('#inverter').css({'display':'none'});
            $('#other_panel').css({'display':'none'});
            $('#panel').css({'display':'none'});
            $('#model_description').css({'display':'none'});
            $('#KW_installation').css({'display':'none'});
            $('#type_of_customer').css({'display':'none'});
            $('#type_of_solar_power').css({'display':'none'});
            $('#monthly_power_bill').css({'display':'none'});
            $('#gross_project_amount').css({'display':'none'});
            $('#subsidy_amount').css({'display':'none'});
            $('#power_savings').css({'display':'none'});
            /* $("select[name='inverter']").removeAttr('data-required');
            $("input[name='KW_installation']").removeAttr('data-required');
            $("input[name='monthly_power_bill']").removeAttr('data-required');
            $("input[name='gross_project_amount']").removeAttr('data-required');
            $("input[name='subsidy_amount']").removeAttr('data-required');
            $("input[name='power_savings']").removeAttr('data-required'); */
        }
    });

    $("body").on('change', 'input[name="KW_installation"]', function(){
        var calpowersaving = this.value * 1000;
        $('input[name="power_savings"]').val(calpowersaving);
    });

    $("select[name='inverter']").on('change', function(){
        /* console.log($("select[name='inverter']").val()); */
        if(this.value == 'other'){
            $('#other_inverter').css({'display':''});
            /* $("input[name='other_inverter']").attr('data-required','1'); */
        }else{
            $('#other_inverter').css({'display':'none'});
            /* $("input[name='other_inverter']").removeAttr('data-required'); */
        }
    });

    $("select[name='panel']").on('change', function(){
        /* console.log($("select[name='inverter']").val()); */
        if(this.value == 'other'){
            $('#other_panel').css({'display':''});
            /* $("input[name='other_inverter']").attr('data-required','1'); */
        }else{
            $('#other_panel').css({'display':'none'});
            /* $("input[name='other_inverter']").removeAttr('data-required'); */
        }
    });

</script>


@if(Auth::check() && trim(Auth::user()->mobile_number))
<script type="text/javascript">
    otpStatus = true;
    resendStatus = null;
</script>
@endif