@extends("layouts.site", ["useJquery" => true])

@section("title", "Test the VvE app for 30 days without obligation via the trial.")
@section("description", "The trial gives you the opportunity to test the Apartment VvE app without any obligation. Save many actions, costs and frustration and switch to a modern alternative.")
@section("keywords", "VvE App Trial")

@section("after_css")
    <link rel="stylesheet" href="{{mix('/css/pages/contact.css')}}">
    
    
      <style type="text/css">
    .iti { width: 100%; }
    </style>
    
    <meta name="csrf-token" content="{{ csrf_token() }}" />
@stop

@php
    $url = "https://customer-api.aprt.app/v2/Trial/";
    $env = Request::get('env');
    if($env === "staging"){
        $url = "https://customer-api-aprt.wb-s.app/v2/Trial/";
    }
@endphp

@section("after_js")
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
    <script src="/js/jquery.validate.min.js"></script>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <link
     rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css"
   />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
    <script>
    var phoneInputField = document.querySelector("#phone");
    var phoneInput = window.intlTelInput(phoneInputField, {
     utilsScript:
       "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
       preferredCountries : ["nl", "be" , "de" , "cw" , "bq"],
       separateDialCode : true
        });
              $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
            
        });
        $(document).ready(function(){
            $.validator.addMethod("count", function(value, element) {
                var n = parseInt(element.value);
                if(!isNaN(n) && n > 0){
                    element.value = n;
                    return true;
                }
                return false;
            }, "Please enter whole numbers");

            $.validator.addMethod("houseNumber", function(value, element){
                value = value.split(" ").join("");
                var regExp = new RegExp('^[0-9]{3,4}[A-Za-z]{1,2}$');
                return regExp.test(value);
            }, "");
             $.validator.addMethod("postCode", function(value, element){
                value = value.split(" ").join("");
                return true;
            }, "");
            $.validator.addMethod("phoneNumber", function(value, element){
            var val2 = phoneInput.getNumber();    
                var regExp = new RegExp("\\+(9[976]\\d|00|8[987530]\\d|6[987]\\d|5[90]\\d|42\\d|3[875]\\d|2[98654321]\\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)([1-9])\\d{7,}$");
                return regExp.test(val2);
            }, "")
        });

    </script>
    

    <script type="text/javascript">
    

        $.fn.serializeFormJSON = function () {

            var o = {};
            var a = this.serializeArray();
            $.each(a, function () {
                if (o[this.name]) {
                    if (!o[this.name].push) {
                        o[this.name] = [o[this.name]];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });
            return o;
        };

        var type = 0;

        function radioClicked(t){
            type = t;
            var burrons = document.querySelectorAll("#gpBtn button");

            for(var i =0; i< burrons.length; i++){
                burrons[i].classList.remove("activeW")
            }
            burrons[t].classList.add("activeW");

        }
        $.validator.addMethod(
            "regex",
            function(value, element, regexp) {
                var re = new RegExp(regexp);
                return this.optional(element) || re.test(value);
            }
        );



        $( document ).ready( function () {

            var validation = $( "#signupForm" ).validate( {
                onfocusout: function(element) {
                    $(element).valid();
                },
                rules: {
                    firstName: "required",
                    lastName: "required",
                    hoaName: "required",
                    "function": "required",
                    email: {
                        required: true,
                        email: true
                    },
                    phone: {
                        required:true,
                        phoneNumber: true,
                    },
                    houseNumber: {
                        required: true
                    },
                    postalCode:{
                        postCode: true
                    },
                    street: {
                        required: true
                    },
                    city: {
                        required: true
                    },
                    country: {
                        required: true
                    },
                    totalUnits: {
                        count: true
                    },
                },
                messages: {
                    firstName: "<p class='aantal'><img src='/img/icons/Icon-material-error.png'> Please enter your first name here.</p>",
                    lastName: "<p class='aantal'><img src='/img/icons/Icon-material-error.png'>Please enter your last name here.</p>",
                    hoaName: "<p class='aantal'><img src='/img/icons/Icon-material-error.png'> Please enter the name of the HOA here.</p>",
                    email: "<p class='aantal'><img src='/img/icons/Icon-material-error.png'> Please enter a valid email address here (e.g. mail@example.com)</p>",
                    phone: "<p class='aantal'><img src='/img/icons/Icon-material-error.png'> Please enter a valid mobile number here</p>",
                    houseNumber: "<p class='aantal'><img src='/img/icons/Icon-material-error.png'> Please enter a valid house number here</p>",
                    postalCode: "<p class='aantal'><img src='/img/icons/Icon-material-error.png'> Please enter a valid zip code here</p>",
                    street: "<p class='aantal'><img src='/img/icons/Icon-material-error.png'> Please enter a valid street name here</p>",
                    country: "<p class='aantal'><img src='/img/icons/Icon-material-error.png'> Please enter your country</p>",
                    city: "<p class='aantal'><img src='/img/icons/Icon-material-error.png'> Please enter the city here</p>",
                    "function": "<p class='aantal'><img src='/img/icons/Icon-material-error.png'>Please enter your position here.</p>",
                    totalUnits: "<p class='aantal'><img src='/img/icons/Icon-material-error.png'> Please specify the quantity</p>"
                },
                errorElement: "em",
                errorPlacement: function ( error, element ) {
                    // Add the `invalid-feedback` class to the error element
                    error.addClass( "invalid-feedback" );

                    if ( element.prop( "type" ) === "checkbox" ) {
                        error.insertAfter( element.next( "label" ) );
                    } else {
                        error.insertAfter( element );
                    }
                },
                highlight: function ( element, errorClass, validClass ) {
                    $( element ).addClass( "is-invalid" ).removeClass( "is-valid" );
                    element.parentElement.classList.remove("parent-valid");
                },
                unhighlight: function (element, errorClass, validClass) {
                    $( element ).addClass( "is-valid" ).removeClass( "is-invalid" );
                    element.parentElement.classList.add("parent-valid");
                },
                submitHandler: function(form){
                    var data = $(form).serializeFormJSON();


                    if(type == 0){
                        data.gender = "Male";
                    } else {
                        data.gender = "Female";
                    }

                    data.hoaAddress = {
                        street: data.street,
                        postalCode: data.postalCode,
                        city: data.city,
                        country: data.country,
                        houseNumber: data.houseNumber,
                        longitude: 0,
                        latitude: 0
                    };
                    data.functionTitle = data.function;
                    delete data.street;
                    delete data.postalCode;
                    delete data.city;
                    delete data.country;
                    delete data.houseNumber;

                                        data.phone =  phoneInput.getNumber();

                    Swal.fire({
                        title: "Even geduld a.u.b.",
                        allowEscapeKey: false,
                        onOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    $.post({
                        url: "{{$url}}",
                        data: JSON.stringify(data),
                        success: (result)=>{
                            window.location = result.redirectUrl;
                            console.log(result);
                            // Swal.fire({
                            //     icon: 'success',
                            //     title: 'Form submitted',
                            //     onClose: ()=>{
                            //         location.href = "/bedankt";
                            //     }
                            // })
                            // location.href = "/bedankt";
                        },
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        error: (err)=> {
                            var errorMessage = "Onbekende fout";
                            if(err.responseJSON.error && err.responseJSON.error.length){
                                var errorCode = err.responseJSON.error[0].code;

                                if(errorCode === "Appartement.Trial.DuplicatePhoneNumber"){
                                    errorMessage = "Er is al een account gekoppeld aan het opgegeven telefoonnummer";
                                }
                                if(errorCode === "Appartement.Trial.DuplicateEmail"){
                                    errorMessage = "Er is al een account gekoppeld aan het opgegeven e-mailadres ";
                                }
                                if(errorCode === "Appartement.Trial.IpLimit"){
                                    errorMessage = "U kunt een nieuwe aanvraag indienen over 09:24 min.";
                                }
                                if(errorCode === "Appartement.Auth.InvalidPhoneFormat"){
                                    errorMessage = "Ongeldig telefoonnummer";
                                }
                            }
                            Swal.fire({
                                icon: "error",
                                title: "",
                                text: errorMessage
                            });
                            // var errors = "";
                            // for (let key in err.responseJSON.errors) {
                            //     errors += err.responseJSON.errors[key] + "<br/>"
                            // }
                            //
                            // var title = "Dit veld is niet correct ingevuld";
                            // if(err.responseJSON.message && !err.responseJSON.message.includes("was invalid")){
                            //     title = err.responseJSON.message
                            // }

                        }
                    });

                    return false

                }

            } );


            $( "#signupForm input" ).on( "input", function( e ) {

                    validation.element(e.target);

                }
            );


        } );

        function recaptchaCallback() {
            $('#submitBtn').removeAttr('disabled');
        }



    </script>


@stop

@section("content")

    <section class="section-contact">
        <div class="box-orange box-blue">
            <img class="mob-size" src="/img/shared/clouds-white.svg" alt="">
            <img class=" bulding-svg" src="/img/shared/city-white.svg" alt="">
            <img class="mob-size-city" src="/img/shared/buildings-white.svg" alt="">
            <div class="container">
                <h1>30 day free trial</h1>
                <p>Start your 30 day free trial by filling out the form below. After that, an account will be created for your private community such as homeowners' association or any other association. After registration you will immediately receive an email with your login details and you can get started right away.
</p>
            </div>
        </div>
        <div class="container">
            <div class="tabs-pri">
                <div id="tab1" class="w3-container city cont-form">
                    <div class="eins-f">
                        <hr>
                        <p>Please fill in the form below <img src="/img/icons/Icon-ionic-ios-arrow-dropdown.png"/> </p>
                        <hr>
                    </div>
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12 offset-sm-2">
                                <div class="border-bottom">
                                    <div class="form-group row">
                                        <div class="col-md-3">
                                            <label>Salutation</label>
                                        </div>
                                        <div class="col-md-9">
                                            <input type="radio" name="gender" value="Male" id="genderMale" checked="checked"> <label for="genderMale" style="margin-right: 14px">Mr.</label>
                                            <input type="radio" name="gender" value="Female" id="genderFemale"> <label for="genderFemale">Mrs.</label>
                                        </div>


                                    </div>
                                </div>
                                <form id="signupForm" class="form-horizontal">
                                    
                                    <input type="hidden" class="form-control" id="language" name="language" value="En" />
                                    
                        
                                    <div class="form-group row">
                                        <label class="col-lg-3 col-form-label" for="firstName">First name <span>*</span></label>

                                        <div class="col-lg-9">
                                            <input type="text" class="form-control" id="firstName" name="firstName" placeholder="" />
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-lg-3 col-form-label" for="lastName">Last name <span>*</span></label>

                                        <div class="col-lg-9">
                                            <input type="text" class="form-control" id="lastName" name="lastName" placeholder="" />
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-lg-3 col-form-label" for="hoaName">Name of association<span>*</span></label>
                                        <div class="col-lg-9">
                                            <input type="text" class="form-control" id="hoaName" name="hoaName" placeholder="" />
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-lg-3 col-form-label" for="vveCount">Number of units <span>*</span></label>
                                        <div class="col-lg-9">
                                            <input type="text" class="form-control" id="vveCount" name="totalUnits" placeholder="" />
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-lg-3 col-form-label" for="function">Function<span>*</span></label>
                                        <div class="col-lg-9">
                                            <input type="text" class="form-control" id="function" name="function" placeholder="" />
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-form-label col-lg-3" for="street">Street name <span>*</span></label>
                                        <div class="col-lg-9">
                                            <input type="text" class="form-control" id="street" name="street"  />
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-form-label col-lg-3" for="houseNumber">House number <span>*</span></label>
                                        <div class="col-lg-9">
                                            <input type="text" class="form-control" id="houseNumber" name="houseNumber"  />
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-lg-3 col-form-label" for="postalCode">Postal code <span>*</span></label>
                                        <div class="col-lg-9">
                                            <input type="text" class="form-control" id="postalCode" name="postalCode" />
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-lg-3 col-form-label" for="city">City <span>*</span></label>
                                        <div class="col-lg-9">
                                            <input type="text" class="form-control" id="city" name="city" />
                                        </div>
                                    </div>
                                    
                                    <div class="form-group row">
                                        <label class="col-lg-3 col-form-label" for="country">Country <span>*</span></label>
                                        <div class="col-lg-9">
                                            <input type="text" class="form-control" id="country" name="country" />
                                        </div>
                                    </div>


                                    <div class="form-group row">
                                        <label class="col-lg-3 col-form-label" for="email">Email <span>*</span></label>
                                        <div class="col-lg-9">
                                            <input type="text" class="form-control" id="email" name="email" placeholder="" />
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-lg-3 col-form-label" for="phone">Mobile number <span>*</span></label>
                                        
                                        <div class="col-lg-9 col-md-12 col-sm-12 col-12">
                                            <input type="tel" class="form-control" id="phone" name="phone" maxlength="13" />
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-lg-3 col-form-label" for="partnerCode">Partner code</label>
                                        <div class="col-lg-9">
                                            <input type="text" class="form-control" id="partnerCode" name="partnerCode" placeholder="" />
                                        </div>
                                    </div>
                                    <div class="form-group form-textarea row">
                                        <label class="col-lg-3 col-form-label" for="comment">Comment</label>
                                        <div class="col-lg-9">
                                            <textarea name="comments" id="comment"  rows="10"></textarea>
                                        </div>
                                    </div>

                                    <div style="display: flex; justify-content: flex-end; margin-bottom: 10px">
                                        <div class="g-recaptcha" data-sitekey="6LckqrUZAAAAAFn19z-h1Cwpubl3Ot44K9Yc8APb" data-callback="recaptchaCallback"></div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-md-9"></div>
                                        <div class="col-md-3">
                                            <button type="submit" class="submit-button goto-button" id="submitBtn" disabled>CREATE <span class="ml-2 fa fa-arrow-circle-right"></span></button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

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

    </section>
    <section class="info">
        <div class="container">
            <div class="middl-content">
                <div class="row">
                    <div class="col-md-4">
                        <div class="middl-txt">
                            <img src="/img/icons/building-circular.png" alt="">
                            <div> Address</div>
                            <ul>
                                <li><h3>Appartement App</h3></li>
                                <li><p>Part of WhiteBoard Studio B.V.</p></li>
                                <li><p>Poort van Uden</p></li>
                                <li><p>Rondweg 55</p></li>
                                <li><p>5406 NK Uden</p></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="middl-txt box-txt">
                            <img src="/img/icons/message-circular.png" alt="">
                            <div>Contact</div>
                            <ul>
                                <li><p>info@app-artement.nl</p></li>
                                <li><p>www.app-artement.nl</p></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="middl-txt">
                            <img src="/img/icons/briefcase-circular.png" alt="">
                            <div> Business details</div>
                            <ul>
                                <li><p>KvK: 67189334</p></li>
                                <li><p>BTW: NL856867858B01</p></li>
                            </ul>
                        </div>
                    </div>
                </div>

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


@stop