<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="{{asset('public/frontend/img/logo.png')}}">
    <title>Login365</title>
    <link href="{{asset('public/frontend/css/bootstrap.min.css')}}" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet">
    <link href="{{asset('public/frontend/css/style.css')}}" rel="stylesheet">
    <link href="{{ captcha_layout_stylesheet_url() }}" type="text/css" rel="stylesheet">
    <style>
        .loader-wrap {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            background: rgba(255,255,255,0.2);
            z-index: 999999;
        }

        .loader {
            position: relative;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            background-color: #4dc6ff ;
            border-radius: 50%;
        }
        .loader:after {
            content: '';
            position: absolute;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            border: 0px solid white;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            -webkit-animation: loading 1000ms ease-out forwards infinite;
            animation: loading 1000ms ease-out forwards infinite;
        }

        @-webkit-keyframes loading {
            0% {
                border: 0px solid white;
            }
            20% {
                border: 8px solid white;
                width: 0%;
                height: 0%;
            }
            100% {
                border: 8px solid white;
                width: 100%;
                height: 100%;
            }
        }

        @keyframes loading {
            0% {
                border: 0px solid white;
            }
            20% {
                border: 8px solid white;
                width: 0%;
                height: 0%;
            }
            100% {
                border: 8px solid white;
                width: 100%;
                height: 100%;
            }
        }
    </style>
    <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
    <style>
        .error{
            color:red !important;
        }
    </style>
</head>

<body>
<?php
$domain= Helper::get_domain(URL::to('/'));
?>
<section>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12">
                <div class="small-container" style="position: relative">
                    <div class="loader-wrap" style="display: none">
                        <div class="loader"></div>
                    </div>
                    <p class="text-center">
                        <a href="{{URL::to('/')}}"><img src="{{asset('public/frontend/img/logo.png')}}" alt="Login365"></a>
                    </p>
                    <h1 class="mt30">90 day free trial</h1>
                    <h3>No credit card required</h3>
                        {!! Form::open(['url'=>'registration','id'=>'client_register']) !!}

                        <div class="form-group">
                                <input type="text" required="true" maxlength="20" name="company_name" class="form-control">
                                <span>Company Title</span>
                            </div>
                            <div class="form-group">
                                <input type="text" id="username" name="username" required="true" class="form-control site_username" maxlength="20">
                                <span>Username (No space or special character allowed)</span>
                                {{--<div class="pull-right" id="subDomainTitle">.login365.co.uk</div>--}}
                            </div>
                            <div class="form-group">
                                <input type="email" required="true" name="email" class="form-control">
                                <span>Email</span>
                            </div>
                            <div class="form-group">
                                <input type="password" required="true" name="password"  class="form-control">
                                <span>Password</span>
                            </div>
                    {!! app('captcha')->display() !!}
                    <p class="error pull-left" id="captchaError"></p>
                        <div class="alert alert-danger" style="text-align: left; display: none;" id="errors">
                        </div>
                            <div class="checkbox">
                                <label>
                                    <br><input type="checkbox" id="agreement" required="true" name="agreement" value="yes"> I have read and agree to the <a href="javascript:;">terms of user</a>, <a href="javascript:;">privacy policy</a> and <a href="javascript:;">offer detailes</a>
                                </label>
                            </div>

                            <button type="submit" class="btn btn-itm mt30 submitBtn">Get started</button>
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <footer>
        <div class="container-fluid copy-right">
            <div class="container">
                <div class="row">
                <div class="col-xs-12">
                    <div class="inline-block"><a href="javascript:;">Contact Us</a>   |  <a href="javascript:;">Privacy Policy</a>  |  <a href="javascript:;">Terms of Service</a></div>
                    <div class="pull-right inline-block">Copyright  2017. All Rights Reserved</div>
                </div>
                
            </div>
            </div>
        </div>
    </footer>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="{{asset('public/frontend/js/bootstrap.min.js')}}"></script>
    <script src="{{asset('public/js/jquery.validate.min.js')}}"></script>
    <script src="{{asset('public/js/jstz.min.js')}}" type="text/javascript"></script>
    <script type="text/javascript">
        $().ready(function() {
            /*$(document).on('keyup change','#username',function () {
                var last='.login365.co.uk';
                $("#subDomainTitle").text($(this).val()+last);
            });*/
            var timezone = jstz.determine();
            $("#client_timezone").val(timezone.name());

            $.validator.addMethod("alpha", function (value, element) {
                return this.optional(element) || /^^[a-zA-Z0-9_]+$/i.test(value);
            }, "Alpha Characters Only.");

            $('#client_register').validate({
                rules: {
                    "username": {
                        required: true,
                        alpha: true,
                        maxlength:20

                    },
                    "company_name": {
                        required: true,
                        maxlength:20
                    }
                },
                messages: {
                    "username": {
                        required: "You must enter a Username",
                        alpha: "Username only contains letter or number!"
                    }
                },
                submitHandler: function () {
                    ajaxSubmit();
                }
            });

            function ajaxSubmit() {
                $.ajax({
                    url: "{{URL::to('registration')}}",
                    data: $("#client_register").serialize(),
                    method: 'POST',
                    dataType: 'json',
                    beforeSend: function (data) {
                        $(".submitBtn").attr('disabled',true);
                        $(".loader-wrap").fadeIn();
                    },
                    success: function (data) {
                        $(".loader-wrap").fadeOut();
                        $("#captchaError").text("");
                        $("#errors").hide();
                        if (data.success) {
                            var username=$(".site_username").val();
                            var url= username+"."+"{{$domain}}";
                            //window.location.href="http://"+url; //This is for wildcard subdomain
                            window.location.href="{{env('DOMAIN')}}/login";
                        } else {
                            grecaptcha.reset();
                            $(".submitBtn").attr('disabled',false);
                            if (data.error == 'invalid') {
                                $("#captchaError").text(" Please verify that you are not robot !");
                            }else{
                                $("#errors").show();
                                $("#errors").html("<li>"+ data.error +"</li>");
                            }
                        }
                    }
                });
            }
        });

    </script>

</body>

</html>
