@extends("front.layout")

@section("content")
<style>
.input-error {
    color: red !important;
}
.input-group-text {
    background-color: {{getSetting('primary_color').'!important'}};
}    
</style>
<div class="px-4 px-lg-5 py-4">
    <div class="container-fluid">
        <div class="row g-5 align-items-center">
            <div class="col-lg-6">
                <img class="img-fluid" src="{{asset('assets/img/mortgage.png')}}" alt="">
            </div>
            <div class="col-lg-6">
                <div class="h-100">
                    <h4 class="display-4 pb-3">Mortgage Information </h4>

                    <form method="post" name="frmMortgageInfo" id="frmMortgageInfo">
                        @csrf
                        <input type="hidden" id="property_id" name="property_id" value="{{$property->id}}">
                        <div class="row g-3">
                            <div class="col-lg-6">
                                <label for="">Current Interest Rate</label>
                                <div class="input-group" id="cir1">
                                    <input type="text" class="form-control input-money-format-prct property-mortage-fields" id="current_interest_rate_1" name="current_interest_rate_1" placeholder="Current Interest Rate" required>
                                    <span class="input-group-text current-icon-radious" id="basic-addon1">%</span>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <label for="">Current Loan Balance</label>
                                <div class="input-group" id="clb1">
                                    <span class="input-group-text" id="basic-addon1">$</span>
                                    <input type="text" class="form-control property-mortage-fields input-money-format" id="current_loan_balance_1" name="current_loan_balance_1" placeholder="Current Loan Balance" required>

                                </div>
                            </div>
                            <div class="col-lg-6">
                                {{-- <input type="text" class="form-control property-mortage-fields" id="loan_term_1" name="loan_term_1" placeholder="Loan Term" required> --}}
                                <label for="">Initial Loan Term</label>
                                <select class="form-select property-mortage-fields" name="loan_term_1" id="loan_term_1" aria-label="" required>
                                    <option value="">Loan Term</option>
                                    @foreach (getLoanTermOptions() as $loan_term)
                                    <option value="{{$loan_term}}">{{monthToYear($loan_term)}}</option>
                                    @endforeach
                                </select>

                            </div>
                            <div class="col-lg-6">
                                {{-- <input type="text" class="form-control property-mortage-fields" id="loan_program_1" name="loan_program_1" placeholder="Loan Program" required> --}}
                                <label for="">Loan Program</label>
                                <select class="form-select property-mortage-fields" name="loan_program_1" id="loan_program_1" aria-label="" required>
                                    <option value="">Loan Program</option>
                                    @foreach (getLoanProgramOptions() as $loan_program)
                                    <option value="{{$loan_program}}">{{$loan_program}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-6">
                                <label for="">Loan Type</label>
                                <select class="form-select property-mortage-fields" name="loan_type_1" id="loan_type_1" aria-label="" required>
                                    <option value="">Loan Type</option>
                                    @foreach (getLoanTypeOptions() as $loan_type)
                                    <option value="{{$loan_type}}">{{$loan_type}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-6">
                                <label for="">Original Loan Balance</label>

                                <div class="input-group" id="olb1">
                                    <span class="input-group-text" id="basic-addon1">$</span>
                                    <input type="text" class="form-control property-mortage-fields input-money-format" id="original_loan_balance_1" name="original_loan_balance_1" placeholder="Original Loan Balance" required>

                                </div>
                            </div>
                            <div class="col-lg-6">
                                <label for="">PMI</label>
                                <select id="pmi_1" name="pmi_1" class="form-select property-mortage-fields" required>
                                    <option value="">Select PMI</option>
                                    <option value="Y">Y</option>
                                    <option value="N">N</option>
                                </select>
                            </div>
                            <div class="col-lg-6">
                                <label for="">Mortage Start Date</label>
                                <input type="text" class="form-control property-mortage-fields" style="background-color: #ffffff;" id="mortgage_start_date_1" name="mortgage_start_date_1" placeholder="Mortage Start Date" required readonly>

                            </div>
                            <div class="col-lg-6 mppbox_1" style="display: none;">
                                <label for="">Monthly PMI Payment</label>
                                <div class="input-group" id="mpp1">
                                    <span class="input-group-text" id="basic-addon1">$</span>
                                    <input type="text" class="form-control property-mortage-fields input-money-format" id="monthly_pmi_payment_1" name="monthly_pmi_payment_1" placeholder="Monthly PMI Payment">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <label for="">Estimated Credit Score</label>
                                <input type="text" class="form-control property-mortage-fields" id="estimated_credit_score_1" name="estimated_credit_score_1" placeholder="Estimated Credit Store" required>
                            </div>
                            <div class="col-lg-6">
                                <div class="py-2 right">
                                    <a href="#" id="btn_display_2nd_mortgage">Do you have 2nd mortgage?</a>
                                </div>
                            </div>

                            <div class="col-lg-12" >
                                <div class="row py-2">
                                    <div class="col-lg-12 pb-4" id="display_2nd_mortgage" style="display: none;">
                                        <div class="border py-3 px-3">
                                            <div class="row g-3 position-relative">
                                                <div class="close-mortgage"><a href="#" id="remove_display_2nd_mortgage"><i class="bi bi-x-circle-fill"></i></a></div>
                                                <div class="col-lg-6">
                                                    <label for="">Current Interest Rate</label>
                                                    <div class="input-group" id="cir2">
                                                        <input type="text" class="form-control input-money-format-prct property-mortage-fields" id="current_interest_rate_2" name="current_interest_rate_2" placeholder="Current Interest Rate" required>
                                                        <span class="input-group-text" id="basic-addon1">%</span>
                                                    </div>

                                                </div>
                                                <div class="col-lg-6">
                                                    <label for="">Current Loan Balance</label>
                                                    <div class="input-group" id="clb2">
                                                        <span class="input-group-text property-home-icon" id="basic-addon1">$</span>
                                                        <input type="text" class="form-control property-mortage-fields input-money-format" id="current_loan_balance_2" name="current_loan_balance_2" placeholder="Current Loan Balance" required>

                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    {{-- <input type="text" class="form-control property-mortage-fields" id="loan_term_2" name="loan_term_2" placeholder="Loan Term" required> --}}
                                                    <label for="">Loan Term</label>
                                                    <select class="form-select property-mortage-fields" name="loan_term_2" id="loan_term_2" aria-label="" required>
                                                        <option value="">Loan Term</option>
                                                        @foreach (getLoanTermOptions() as $loan_term)
                                                        <option value="{{$loan_term}}">{{monthToYear($loan_term)}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-lg-6">
                                                    {{-- <input type="text" class="form-control property-mortage-fields" id="loan_program_2" name="loan_program_2" placeholder="Loan Program" required> --}}
                                                    <label for="">Loan Program</label>
                                                    <select class="form-select property-mortage-fields" name="loan_program_2" id="loan_program_2" aria-label="" required>
                                                        <option value="">Loan Program</option>
                                                        @foreach (getLoanProgramOptions() as $loan_program)
                                                        <option value="{{$loan_program}}">{{$loan_program}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-lg-6">
                                                    <label for="">Loan Type</label>
                                                    <select class="form-select property-mortage-fields" name="loan_type_2" id="loan_type_2" aria-label="" required>
                                                        <option value="">Loan Type</option>
                                                        @foreach (getLoanTypeOptions() as $loan_type)
                                                        <option value="{{$loan_type}}">{{$loan_type}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-lg-6">
                                                    <label for="">Original Loan Balance</label>
                                                    <div class="input-group" id="olb2">
                                                        <span class="input-group-text property-home-icon" id="basic-addon1">$</span>
                                                        <input type="text" class="form-control property-mortage-fields input-money-format" id="original_loan_balance_2" name="original_loan_balance_2" placeholder="Original Loan Balance" required>

                                                    </div>

                                                </div>
                                                <div class="col-lg-6">
                                                    <label for="">PMI</label>
                                                    <select id="pmi_2" name="pmi_2" class="form-select property-mortage-fields" required>
                                                        <option value="">Select PMI</option>
                                                        <option value="Y">Y</option>
                                                        <option value="N">N</option>
                                                    </select>
                                                </div>
                                                <div class="col-lg-6">
                                                    <label for="">Mortage Start Date</label>
                                                    <input type="text" class="form-control property-mortage-fields" style="background-color: #ffffff;" id="mortgage_start_date_2" name="mortgage_start_date_2" placeholder="Mortage Start Date" required readonly>

                                                </div>
                                                <div class="col-lg-6 mppbox_2" style="display: none;">
                                                    <label for="">Monthly PMI Payment</label>
                                                    <div class="input-group" id="mpp2">
                                                        <span class="input-group-text" id="basic-addon1">$</span>
                                                        <input type="text" class="form-control property-mortage-fields input-money-format" id="monthly_pmi_payment_2" name="monthly_pmi_payment_2" placeholder="Monthly PMI Payment" >

                                                    </div>

                                                </div>
                                                <div class="col-lg-6">
                                                    <label for="">Estimated Credit Score</label>
                                                    <input type="text" class="form-control property-mortage-fields" id="estimated_credit_score_2" name="estimated_credit_score_2" placeholder="Estimated Credit Store" required>
                                                </div>
                                                <div class="col-lg-6">
                                                    &nbsp;
                                                </div>
                                            </div>
                                        </div>
                                    </div>



                                    <div class="d-grid gap-2">
                                        {{-- <button class="btn btn-primary">Submit</button> --}}

                                        <div class="alert alert-info" style="display: none;" id="resmessage"></div>
                                        <div id="btnloader" class="text-center" style="display: none;"><i class="fa fa-spinner fa-spin fa-2x"></i></div>
                                        <button class="btn btn-primary" id="btnsave">Submit</button>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div><!-- About End -->
@endsection

@push("scripts")
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
<script type="text/javascript" src="{{asset('assets/js/custom-validations.js')}}"></script>
<script>
$(document).ready(function(){
    // $( "#mortgage_start_date_1" ).datepicker({ dateFormat: "mm-dd-yy", changeYear: true, changeMonth:true});
    // $( "#mortgage_start_date_2" ).datepicker({ dateFormat: "mm-dd-yy", changeYear: true, changeMonth:true});

    let current_year = {{date("Y")}};
    let start_year = {{date("Y")-35}}
    $( "#mortgage_start_date_1" ).datepicker({ dateFormat: "mm-dd-yy", changeYear: true, changeMonth:true, yearRange: (start_year + ":" + current_year)});
    $( "#mortgage_start_date_2" ).datepicker({ dateFormat: "mm-dd-yy", changeYear: true, changeMonth:true, yearRange: (start_year + ":" + current_year)});


    $("#pmi_1").change(function(){
        if($(this).val() == "Y") {
            $(".mppbox_1").show();
            $("#monthly_pmi_payment_1").prop("readonly", false);
        } else {
            $(".mppbox_1").hide();
            $("#monthly_pmi_payment_1").val("");
            $("#monthly_pmi_payment_1").prop("readonly", true);
        }
    });

    $("#pmi_2").change(function(){
        if($(this).val() == "Y") {
            $(".mppbox_2").show();
            $("#monthly_pmi_payment_2").prop("readonly", false);
        } else {
            $(".mppbox_2").hide();
            $("#monthly_pmi_payment_2").val("");
            $("#monthly_pmi_payment_2").prop("readonly", true);
        }
    });



    $("#btn_display_2nd_mortgage").click(function(e){
        e.preventDefault();
        $("#btn_display_2nd_mortgage").hide();
        $("#display_2nd_mortgage").show();
    });

    $("#remove_display_2nd_mortgage").click(function(e){
        e.preventDefault();
        $("#btn_display_2nd_mortgage").show();
        $("#display_2nd_mortgage").hide();
    });

    $("#frmMortgageInfo").validate({
        errorClass: "input-error",
        errorPlacement: function(error, element) {
            if (element.attr("name") == "current_interest_rate_1" ) {
                error.insertAfter("#cir1");
            } else if (element.attr("name") == "current_loan_balance_1" ) {
                error.insertAfter("#clb1");
            } else if (element.attr("name") == "monthly_pmi_payment_1" ) {
                error.insertAfter("#mpp1");
            } else if (element.attr("name") == "original_loan_balance_1" ) {
                error.insertAfter("#olb1");
            } else if (element.attr("name") == "current_interest_rate_2" ) {
                error.insertAfter("#cir2");
            } else if (element.attr("name") == "current_loan_balance_2" ) {
                error.insertAfter("#clb2");
            } else if (element.attr("name") == "monthly_pmi_payment_2" ) {
                error.insertAfter("#mpp2");
            } else if (element.attr("name") == "original_loan_balance_2" ) {
                error.insertAfter("#olb2");
            } else {
                error.insertAfter(element);
            }
        },
        rules: {
            "current_interest_rate_1": {
                required: true,
                number: true
            },
            "current_loan_balance_1": {
                required: true,
                number: true
            },
            "loan_term_1": "required",
            "loan_program_1": "required",
            "loan_type_1": "required",
            "original_loan_balance_1": {
                required: true,
                number: true,
                // Applying the custom validation rule
                greaterThanEqualToCurrentLoan: "#current_loan_balance_1"
            },
            "pmi_1": "required",
            "mortgage_start_date_1": "required",
            "monthly_pmi_payment_1": {
                required: function () {
                    return $("#pmi_1").val() == "Y";
                }
            },
            "estimated_credit_score_1": {
                required: true,
                number: true
            },
            "current_interest_rate_2": {
                required: true,
                number: true
            },
            "current_loan_balance_2": {
                required: true,
                number: true
            },
            "loan_term_2": "required",
            "loan_program_2": "required",
            "loan_type_2": "required",
            "original_loan_balance_2": {
                required: true,
                number: true,
                // Applying the custom validation rule
                greaterThanEqualToCurrentLoan: "#current_loan_balance_2"
            },
            "pmi_2": "required",
            "mortgage_start_date_2": "required",
            "monthly_pmi_payment_2": {
                required: function () {
                    return $("#pmi_2").val() == "Y";
                }
            },
            "estimated_credit_score_2": {
                required: true,
                number: true
            }
        },
        submitHandler: function(){
            let formdata = $("#frmMortgageInfo").serialize();

            if($("#display_2nd_mortgage").is(":not(:hidden)")) {
                formdata = formdata + "&secondmortgage=yes";
            }

            $.ajax({
                method: "post",
                url: "{{route('save-mortage-information')}}",
                data: formdata,
                beforeSend() {
                    $("#btnloader").show();
                    $("#btnsave").hide();
                },
                success: function(response) {
                    $("#btnloader").hide();

                    if(response.success == 1) {
                        location.href = response.redirectTo;
                    } else {
                        $("#btnsave").show();
                        $("#resmessage").html(response.message).removeClass("alert-info").removeClass("alert-success").addClass("alert-danger").show();
                    }


                },
                error: function (xhr, ajaxOptions, thrownError) {
                    $("#btnloader").hide();
                    $("#btnsave").show();
                    let jsonValue = jQuery.parseJSON( xhr.responseText );

                    let obj = jsonValue.errors;
                    let errHtml = ''
                    Object.keys(obj).forEach(key => {
                        // console.log(key, obj[key]);
                        errHtml = errHtml + obj[key] + "<br/>";
                    });

                    $("#resmessage").html(errHtml).removeClass("alert-info").removeClass("alert-success").addClass("alert-danger").show();

                }
            });
        }
    });

});
</script>
@endpush