@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></li>
                        </ul>
                    </div>

                    <h6 class="display-6 pb-3">
                        Personal 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="frmRegister" id="frmRegister" method="post">
                        @csrf
                        <div class="row g-3">
                            <div class="col-lg-12">
                                <label for="name">Your Name</label>
                                <input type="text" class="form-control" id="name" name="name" placeholder="Your Name">
                            </div>
                            <div class="col-lg-6">
                                <label for="mobile">Your Cell Phone</label>
                                <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Your Cell Phone">
                            </div>
                            <div class="col-lg-6">
                                <label for="email">Your Email Address</label>
                                <input type="email" class="form-control" id="email" name="email" placeholder="Your Email Address">
                            </div>
                            <div class="col-lg-12">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="1" id="consent_to_receive_message" name="consent_to_receive_message">
                                    <label class="form-check-label" for="consent_to_receive_message">
                                        I consent to receive text messages
                                    </label>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <label for="address">Address</label>
                                <input type="text" class="form-control"  id="location-input" name="address" placeholder="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="City, State">
                            </div>
                            {{-- <div class="col-lg-6">
                                <input type="text" class="form-control" id="state" name="state" placeholder="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="Zip Code" maxlength="5">
                            </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>Save and Continue</strong></button>

                            </div>
                        </div>
                    </form>
                    <p class="pt-2">
                        Already have an account? <a href="{{route('login')}}"><u>click here</u></a> to login
                    </p>
                </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(){
    $("#frmRegister").validate({
        errorClass: "input-error",
        rules: {
            name: "required",
            email: {
                required: true,
                email: true
            },
            mobile: {
                required: true,
                number: true
            },
            address: "required",
            city: "required",
            // state: "required",
            zipcode: {
                required: true,
                number: true
            },
        },
        submitHandler: function() {
            let formdata = $("#frmRegister").serialize();

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

@include("inc-google-place")

@endpush