@extends('../../master_layout/website_master')

@section('title')
<title>{{env('APP_NAME')}} :: Register User</title>
@endsection


@section('heading')
<section class="page-heading">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="content">
                    <a href="javascript:history.back()" class="btn btn-link">
                        <i class="fa fa-angle-left"></i> Back
                    </a>
                    <h1>Register as User</h1>
                    <a href="#" class="btn btn-link hidden">
                        Next <i class="fa fa-angle-right"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('content')

@if (session('errors'))
<div class="alert alert-danger alert-dismissible">
    @foreach($errors->all() as $message)
    <li class="text-danger">{{$message}}</li>
    @endforeach
</div>
@endif


<!-- Section: Signup Block -->
<section class="overflow-hidden login-page">
<div class="container px-4 px-md-5 text-lg-start ">
    <div class="row gx-lg-5 mb-5">
        <!-- Message-->
        @if (session('message'))
        <div class="col-12">
            <div class="alert alert-{{session('message.type')}} alert-dismissible fade show" role="alert">
                @if(session('message.type')=='danger')
                <strong>Oops!</strong> {!! session('message.text') !!}
                @else
                <strong>Success!</strong> {!! session('message.text') !!}
                @endif
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
        @endif
        <!--end message--> 
        <div class="col-lg-6 mb-5 mb-lg-0 position-relative">
            <div class="card bg-glass">                
                <div class="card-body px-4 py-5 px-md-5">
                    <h3 class="mb-4">Register now, it's free!</h3>
                    
                    <div class="mb-4">                        
                        <a href="{{ route('google.signup-user') }}" class="btn btn-main auth-form-btn flex-grow w-100">
                            <img src="{{asset('public/frontend_assets/images/icon/google.svg')}}" class="mr-2" width="18" height="18"> Sign up with Google
                        </a>
                    </div> 
                    <div class="py-2">
                        <small class="btn-block text-center my-1 text-uppercase or">or</small>
                    </div>
                    <form id="addCustomer" action="{{route('register.user.process')}}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <label for="">Display name</label>
                            <input type="text" class="form-control" name="username" id="username" placeholder="Enter name you want to display" />
                        </div>
                        <div class="form-group">
                            <label for="">Email</label>
                            <input type="text" class="form-control" name="login_username" id="login_username" placeholder="Enter your email" />
                        </div>
                        <div class="form-group">
                            <label for="">Password</label>
                            <input type="password" class="form-control" name="login_password" id="login_password" placeholder="Password" />
                        </div>
                        <div class="form-group">
                            <div>
                                <label class="checkbox-one">I accept the <a href="{{route('cms.content',['slug'=>'terms-conditions'])}}">Terms and Conditions</a> of use
                                    <input type="checkbox" name="term_accept" id="term_accept" />
                                    <span class="checkmark"></span>
                                </label>
                            </div>
                        </div>
                        <div class="text-center">
                            <button class="btn btn-block btn-main" type="submit">Register Now</button>
                        </div>
                        <div class="extra-links mt-2">
                            <a href="{{route('login')}}">Already have an account? Sign In</a>
                        </div>
                    </form>                                   
                </div>
            </div>
        </div>
        <div class="col-lg-6 mb-lg-0 text-center" style="z-index: 10">
            <h5 class="my-5 mb-1 font-italic" style="color: #ffdf87">"Unlock your fantasies with our stunning escorts."</h5>
            <img class="img-fluid" src="{{asset('public/frontend_assets/images/girls.png')}}" alt="">
        </div>
        
    </div>
</div>
</section>
<!-- Section: Signup Block -->

@endsection

@section('custom_js')
<script>
    $(function() {
        $('#addCustomer').validate({
            rules: {
                login_username: {
                    required: true,
                    email: true,
                    remote: {
                        url: "{{ route('user.check.email')}}",
                        type: "get",
                        data: {
                            login_username: function() {
                                return $("#login_username").val();
                            }
                        },
                        dataType: 'json'
                    }
                },

                login_password: {
                    required: true,
                },

                username: {
                    required: true,
                    alphanumeric: true,
                    remote: {
                        url: "{{ route('user.check.display.name')}}",
                        type: "get",
                        data: {
                            display_name: function() {
                                return $("#username").val();
                            }
                        },
                        dataType: 'json'
                    }
                },

                term_accept: {
                    required: true,
                }



            },
            messages: {
                login_username: {
                    required: "Please enter email",
                    remote: "This email is already registered. Please try with another one"

                },
                login_password: {
                    required: "Please enter password",
                },
                username: {
                    required: "Please enter username",
                    remote: "This username is already registered. Please try with another one"
                },

                term_accept: {
                    required: "Please accept the terms and conditions",
                }
            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function(element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });

    });
</script>
@endsection