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

<!-- Ackosoft-->
<head>
    <meta charset="utf-8" />

    <link rel="icon" href="{{asset("public/img/logo.png")}}">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>AckoSoft :: Office Management:: Login</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />
    <link href="{{asset('public/css/bootstrap.min.css')}}" rel="stylesheet" />
    <link href="{{asset('public/css/style.css')}}" rel="stylesheet"/>
    <link href="{{asset('public/css/pe-icon-7-stroke.css')}}" rel="stylesheet" />
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>

</head>
<body>

<div class="wrapper wrapper-full-page">
    <div class="full-page" data-color="blue" data-image="{{asset('public/img/full-screen-image-1.jpg')}}">
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-sm-6 col-md-offset-3 col-sm-offset-3">
                        <div style="padding-top:10px; margin: 0 0 50px 40%;"><img src="{{asset("public/img/ackosoft-w.png")}}" height="60"></div>
                    {!! Form::open(['url'=>'registration','id'=>'client_register']) !!}
                        <div class="card card-hidden">
                            <div class="header text-center">Company Registration</div>
                            <div class="content">
                                <div class="row">
                                <div class="col-md-12">
                                <div class="form-group">
                                    <label>Company Name</label>
                                    <input type="text" required="true" name="company_name" placeholder="Ackosoft Limited" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label>User Name</label>
                                    <input type="text" name="username" required="true" placeholder="ackosoft(No space and special character allowed)" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label>Email</label>
                                    <input type="email" required="true" name="email" placeholder="Enter email" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label>Password</label>
                                    <input type="password" required="true" name="password" placeholder="Password" class="form-control">
                                </div>
                                </div>
                            </div>
                            <div class="footer text-center">
                                <button type="submit" class="btn btn-fill btn-info btn-wd">Registration</button>
                            </div>
                            </div>
                        </div>
                        {!! Form::hidden('timezone',null,['id'=>'client_timezone']) !!}

                        {!! Form::close() !!}

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

        <footer class="footer footer-transparent">
            <div class="container">
                <p class="copyright pull-right">
                    <a href="http://www.ackosoft.com">&copy; {{date('Y')}}  Ackosoft Limited</a>
                </p>
            </div>
        </footer>

    </div>

</div>


</body>

<!--   Core JS Files and PerfectScrollbar library inside jquery.ui   -->
<script src="{{asset('public/js/jquery.min.js')}}" type="text/javascript"></script>
<script src="{{asset('public/js/jquery-ui.min.js')}}" type="text/javascript"></script>
<script src="{{asset('public/js/bootstrap.min.js')}}" type="text/javascript"></script>
<script src="{{asset('public/js/jquery.validate.min.js')}}"></script>
<!--  Notifications Plugin    -->
<script src="{{asset('public/js/bootstrap-notify.js')}}"></script>
<!-- Light Bootstrap Dashboard Core javascript and methods -->
<script src="{{asset('public/js/light-bootstrap-dashboard.js')}}"></script>
<script src="{{asset('public/js/jstz.min.js')}}" type="text/javascript"></script>




<script type="text/javascript">
    $().ready(function(){
        var timezone = jstz.determine();
        $("#client_timezone").val(timezone.name());
        lbd.checkFullPageBackgroundImage();

        setTimeout(function(){
            // after 1000 ms we add the class animated to the login/register card
            $('.card').removeClass('card-hidden');
        }, 600);
        @if(Session::get('error'))
                $.notify({
            icon: 'pe-7s-bell',
            message: "{{Session::get('error')}}"

        },{
            type: 'warning',
            timer: 4000
        });
        @endif
    });
    $.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

            }
        },
        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',
            success: function(data) {
                if(data.success){
                    $.notify({
                        icon: 'pe-7s-bell',
                        message: data.success

                    },{
                        type: 'success',
                        timer: 10000
                    });
                }else{
                    $.notify({
                        icon: 'pe-7s-bell',
                        message: data.error

                    },{
                        type: 'warning',
                        timer: 10000
                    });
                }
            }
         });
    }



</script>




<!-- Ackosoft-->
</html>