@extends("front.layout")

@section("content")
<style>
.input-error {
    color: red !important;
}
</style>
<div class="container-xxl py-5">
    <div class="container">
        <div class="row g-5 align-items-center">
            <div class="col-lg-6">
                <img class="img-fluid" src="{{ asset(session('logo', getSetting('logo'))) }}" alt="Loancamp"  style="height:40px;">
            </div>
            <div class="col-lg-6">
                <div class="h-100">
                    <h4 class="display-4">Create an Account </h4>

                    <div class="progress-steps py-5">
                        <ul class="progress_bar">
                            <li class="active"></li>
                            <li class="active"></li>
                        </ul>
                    </div>

                    <h6 class="display-6 pb-3">
                        Property Information
                    </h6>
                    <div class="card-container d-none">
                        <div class="panel">
                          <div>
                            <img class="sb-title-icon" src="https://fonts.gstatic.com/s/i/googlematerialicons/location_pin/v5/24px.svg" alt="">
                            <span class="sb-title">Address Selection</span>
                          </div>
                          <input type="text" placeholder="Address"/>
                          <input type="text" placeholder="Apt, Suite, etc (optional)"/>
                          <input type="text" placeholder="City"/>
                          <div class="half-input-container">
                            <input type="text" class="half-input" placeholder="State/Province" id="administrative_area_level_1-input"/>
                            <input type="text" class="half-input" placeholder="Zip/Postal code"/>
                          </div>
                          <input type="text" placeholder="Country" id="country-input"/>
                          <button class="button-cta">Checkout</button>
                        </div>
                      </div>
                    <form name="frmRegisterProperty" id="frmRegisterProperty" method="post">
                        @csrf
                        <input type="hidden" name="key" id="key" value="{{request('key')}}">
                        <div class="row g-3">
                            <div class="col-lg-12">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="1" id="same_as_contact">
                                    <label class="form-check-label" for="same_as_contact">
                                        My property address is same as my current address
                                    </label>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <label for="address">Enter Your Address</label>
                                <input type="text" class="form-control"  id="location-input" name="address" placeholder="Enter Your Address">
                            </div>
                            <div class="col-lg-6">
                                <label for="city">City, State</label>
                                <input type="text" class="form-control" id="locality-input" name="city" placeholder="Enter Your City, State">
                            </div>
                            {{-- <div class="col-lg-6">
                                <input type="text" class="form-control" id="state" name="state" placeholder="Enter Your State">
                            </div> --}}
                            <div class="col-lg-6">
                                <label for="zipcode">Zip Code</label>
                                <input type="text" class="form-control" id="postal_code-input" name="zipcode" placeholder="Enter your Zip Code" maxlength="5">
                            </div>
                            <div class="col-lg-6">
                                <label for="property_type">Property Type</label>
                                <select class="form-select" name="property_type" id="property_type" aria-label="Default select example">
                                    <option value="">Property Type</option>
                                    @foreach (getPropertyTypeOptions() as $property_type)
                                    <option value="{{$property_type}}">{{$property_type}}</option>
                                    @endforeach

                                </select>
                            </div>
                            <div class="col-lg-6 mort-info d-none " id="prop_other_display">
                                <label for="property_type_other">Other Property Type</label>
                                <input type="text" class="form-control" id="property_type_other" name="property_type_other" value="" placeholder="Other Property Type" required>
                            </div>
                            <div class="col-lg-6">
                                <label for="occupancy">Occupancy</label>
                                <select class="form-select" name="occupancy" id="occupancy" aria-label="Default select example">
                                    <option value="">Occupancy</option>
                                    @foreach (getOccupancyOptions() as $occupancy)
                                    <option value="{{$occupancy}}">{{$occupancy}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-6">
                                <label for="property_tax">Property Tax Payment (Annual)</label>
                                <input type="text" class="form-control" id="property_tax" name="property_tax" placeholder="Property Tax Payment (Annual)">
                            </div>
                            <div class="col-lg-6">
                                <label for="home_insurance">Home Insurance Payment (Annual)</label>
                                <input type="text" class="form-control" id="home_insurance" name="home_insurance" placeholder="Home Insurance Payment (Annual)">
                            </div>
                            <div class="d-grid gap-2">
                                <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"><strong>Register</strong></button>
                            </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>
$(document).ready(function(){
    $("#property_type").change(function(){

        if($(this).val() == "Other") {
            $("#prop_other_display").removeClass("d-none");
        } else {
            $("#prop_other_display").addClass("d-none");
            $("#property_type_other").val("");
        }
    });

    $("#same_as_contact").click(function(){
        if($(this).is(":checked")) {
            // $("#address").val('{{$user->address}}');
            // $("#city").val('{{$user->city}}');
            // $("#zipcode").val('{{$user->zipcode}}');
            $("input[name=address]").val('{{$user->address}}');
            $("input[name=city]").val('{{$user->city}}');
            $("input[name=zipcode]").val('{{$user->zipcode}}');
        }
    });

    $("#frmRegisterProperty").validate({
        errorClass: "input-error",
        rules: {
            address: "required",
            city: "required",
            // state: "required",
            zipcode: {
                required: true,
                number: true
            },
            property_type: "required",
            occupancy: "required",
            "property_type_other": {
                required: function() {
                    if($("#property_type").val() == "Other") {
                        return true;
                    } else {
                        return false;
                    }
                }
            }
        },
        submitHandler: function() {

            let formdata = $("#frmRegisterProperty").serialize();

            $.ajax({
                method: "post",
                url: "{{route('register-step2-submit')}}",
                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(errHtml).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>

@include("inc-google-place")

@endpush