@extends('layouts.main')
@push('title')
<title>Register</title>  
@endpush
@section('main-section')
<link rel="stylesheet" href={{asset('assets/css/style.css')}}>

<style>

span.agree-text {
    display: inline-block;
    width: 90%;
    vertical-align: top;
}

input#remember-me {
    margin: 0;
    padding: 0;
}

    .navbar {
    height: 70px;
    left: 0px;
    right: 0px;
}

.shadow-light{
    width:100px;
}

.float-right {
    float: right!important;
}

.form-group label {
    display: inline-block;
}

.form-group input {
    width: auto;
    height: auto;
}

.w-100{
    width:100% !important;
}

/* @media (min-width: 576px) */
@media (min-width: 576px)
{
    .offset-sm-2 {
    margin-left: 16.666667%;
    }

}


@media (min-width: 992px){
    .offset-lg-3 {
        margin-left: 25%;
    }
}


@media (min-width: 1200px){
    .offset-xl-4 {
    margin-left: 33.333333%;
}
}

</style>

<div id="home" class="bg-inner low-back-gradient-inner">
    <div class="text-con-inner low-back-up">
      <div class="container">
        <div class="row">
          <div class="lead col-lg-12 col-xm-12 text-center">
            <h1><span class="top-heading-inner">Register</span> </h1>
            <div class="list-o-i white">
              <p class="white no-p">Unlock your financial potential and pave your path to prosperity through smart investments and strategic decisions. Explore opportunities and embark on your journey to financial freedom today.</p>
                       <div class="pagenation_links"><a href="/" class="yellow">Home</a><i> </i> / Register</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


        <section class="section">
            <div class="container mt-4">

                @if (session()->has('success_message'))
                <div class="alert alert-success">
                    {{ session()->get('success_message') }}
                </div>
                @endif @if(count($errors) > 0)
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                @endif

                <div class="row">
                    {{-- <div
                        class="col-12 col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-6 offset-lg-3 col-xl-4 offset-xl-4"> --}}

                        <div
                        class="col-12 col-sm-8  col-md-6 offset-md-3 col-lg-4 offset-lg-3 col-xl-4 offset-xl-4">

                        <div class="login-brand">
                            <img src={{asset('assets/image/logo_defaultimage.png')}} alt="logo" width="100"
                                class="shadow-light">
                            <div>mywealthfree.com</div>
                        </div>
                        <div class="card card-primary">
                            <div class="card-header">
                                <h4>Member Register</h4>
                            </div>
                            <div class="card-body">

                                <form method="POST" action="/add-user" class="needs-validation" id="letmeinform">
                                    {{ csrf_field() }}

                                    <div class="form-group">
                                        <label for="Name">Name<span class="text-danger">*</span></label>
                                        <input id="name" type="text" class="form-control w-100" name="name" value="{{ old('name') }}" placeholder="Name" required autofocus>
                                    </div>

                                    <div class="form-group">
                                        <label for="Email">Email<span class="text-danger">*</span></label>
                                        <input id="email" type="email" class="form-control w-100" name="email" value="{{ old('email') }}" placeholder="Email" required autofocus>
                                    </div>

                                    <div class="form-group">
                                        <label for="Phone">Phone<span class="text-danger">*</span></label>
                                        <input id="phone" type="tel" class="form-control w-100" name="phone" value="{{ old('phone') }}" placeholder="Phone" required autofocus>
                                    </div>

                                    <input type="hidden" name="referral_id" value="{{$ref_id}}" />

                                    <div class="form-group">
                                        <label for="password">Password<span class="text-danger">*</span></label>

                                        <div class="position-relative">
                                            <input id="password" type="password" class="form-control w-100" name="password" placeholder="Password" placeholder="Password" required>
                                            <span class="view-password" onclick="viewpass()"><i class="eyeone fa fa-eye" aria-hidden="true"></i></span>
                                        </div>

                                    </div>

                                    <div class="form-group">

                                        <div class="position-relative">
                                            <label for="password">Confirm Password<span class="text-danger">*</span></label>
                                            <input id="password-confirm" type="password" class="form-control w-100" name="password_confirmation" placeholder="Confirm Password"
                                            required>
                                            <span class="view-password" onclick="viewconfirmpass()"><i class="eyetwo fa fa-eye" aria-hidden="true"></i></span>
                                        </div>

                                    </div>



                                    <div class="form-group">
                                        <div class="custom-control custom-checkbox">
                                            {{-- <input type="checkbox" name="rememberme" value="1"
                                                class="custom-control-input" tabindex="3" id="remember-me"> --}}

                                                <input type="checkbox" id="remember-me" class="custom-control-input" name="remember" {{ old('remember') ? 'checked' : '' }} required>

                                            {{-- <label class="custom-control-label" for="remember-me">Remember Me</label> --}}
                                            <span class="agree-text">I agree to the <a href="/terms-and-conditions">Terms of service</a> and <a href="/privacy-policy">Privacy policies</a> of myhealthfree.com</span>
                                        </div>
                                    </div>



                                    <div class="form-group">
                                        <button data-sitekey data-callback="onSubmit"
                                            class="btn btn-primary btn-lg btn-block g-recaptcha">
                                            Create Account </button>
                                    </div>
                                </form>
                                <div class="mt-2 text-muted text-center">
                                    Already have an account? <a href="{{ route('login') }}">Login</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        
        <script>
            function viewpass() {
                let temp = document.getElementById("password");
                if (temp.type === "password") {
                    temp.type = "text";
                    $('.eyeone').addClass('fa-eye-slash');
                    $('.eyeone').removeClass('fa-eye');
                }
                else {
                    $('.eyeone').removeClass('fa-eye-slash');
                    $('.eyeone').addClass('fa-eye');
                    temp.type = "password";
                }
            }
    </script>
        
        <script>
            function viewconfirmpass() {
                let temp = document.getElementById("password-confirm");
                if (temp.type === "password") {
                    temp.type = "text";
                    $('.eyetwo').addClass('fa-eye-slash');
                    $('.eyetwo').removeClass('fa-eye');
                }
                else {
                    $('.eyetwo').removeClass('fa-eye-slash');
                    $('.eyetwo').addClass('fa-eye');
                    temp.type = "password";
                }
            }
    </script>

@endsection