@extends('layouts.main')

  @section('content')
    
    <div class="container mt-xxl-4" id="main-wrapper-1">
        <div class="row justify-content-center ms-lg-0 me-lg-0">
            <div class="col-xl-10 col-xxl-12">
                <div class="card border-0">
                    <div class="card-body p-0">
                        <div class="row no-gutters ms-lg-0 me-lg-0">
                            <div class="col-lg-6 col-xxl-5">
                                <div class="p-5 mb-xl-0 pb-xl-3">
                                    <div class="mb-5 text-center mb-xl-4">
                                        <h2 class="h4 font-weight-bold text-theme"><strong><span style="color: rgb(32, 33, 36);">Join NOVELFLEX</span></strong></h2>
                                    </div>
                                  <form method="POST" action="{{ route('registeration') }}">
                                   @csrf
                                        <div class="form-group">
                                        
                                        <input class="form-control form-control mb-4" type="text" id="yourName-1" placeholder="Your name" name="username" required autofocus>
                                        </div>
                                        
                                        <div class="form-group">
                                        
                                        <input class="form-control form-control mt-xl-4 mt-2 mb-4" type="email" 
                                        name="email" id="exampleInputEmail-1" placeholder="Your email">
                                        
                                        </div>
                                        <div class="form-group mb-xl-4 mb-4">
                                        
                                        <input class="form-control form-control mt-xl-4" type="password" name="password" id="exampleInputPassword-1" placeholder="Create Password">
                                        
                                        </div>
                                        <div class="form-group mb-xl-4">
                                            
                                        <select class="form-select" name="type">
                                     
                                        <option value="Writer">Writer</option>
                                        <option value="Reader">Reader</option>
                                        
                                        </select>
                                        
                                        </div>
                                        <p class="text-center text-muted mt-3 mb-0 mb-xl-4">By signing up, you confirm that you’ve read<br>.and accepted our? <a href="#" class="text-primary ml-1">
                                        <span style="color: rgb(37, 109, 133);">Terms
                                        </span>
                                        </a>&nbsp;and&nbsp;
                                        <a href="privacy-policy" class="text-primary ml-1">
                                        <span style="color: rgb(37, 109, 133);">Privacy Policy</span>
                                        </a></p>
                                        
                                        <button class="btn btn-theme w-100 mt-3" type="submit" >Register</button>
                                        </form>
                                        <h5 class="mt-xl-3 mb-xl-4 text-center mt-2"><span style="color: rgb(146, 146, 157);">OR</span></h5><button class="btn w-100" type="submit">Continue with Google<img class="me-xl-4 me-3" src="/public/img/icons8-google.svg"></button><button class="btn w-100" type="submit">Continue with Apple<img class="me-xl-4 me-3" src="/public/img/icons8-apple-logo-30.png"></button><button class="btn w-100" type="submit">Continue with Apple<img class="me-xl-4 me-3" src="/public/img/icons8-facebook-36.png"></button>
                             
                                </div>
                                <p class="text-center text-muted mt-3 mb-0 mb-xl-0 pb-xl-3 pt-xl-3 mt-xl-0 mb-md-0 mt-md-0 pt-md-4 pb-md-4">Already have an account? <a href="{{route('login')}}" class="text-primary ml-1">login</a></p>
                            </div>
                            <div class="col-lg-6 col-xxl-7 d-none d-lg-inline-block">
                                <div class="account-block rounded-right">
                                    <div class="overlay rounded-right"></div>
                                    <div class="account-testimonial">
                                        <div class="row">
                                            <div class="col">
                                                <h4 class="mb-4"><strong>Download&nbsp;Novelflex App</strong></h4>
                                                <ul>
                                                    <li>In at iaculis lorem. Praesent tempor dmagna laoreet.</li>
                                                    <li>Praesent eu dolor eu orci vehicula<br></li>
                                                    <li>Duis rhoncus dui venenatis consequat porttitor. Etiam<br></li>
                                                    <li>Sed a magna semper, porta purus eu, ullamcorper<br></li>
                                                </ul><!-- Start: Button-thib --><a class="btn btn-primary btn-dark mt-xxl-2" role="button" href="#"> Available on the App Store<i class="fa fa-apple me-xxl-2"></i></a><!-- End: Button-thib -->
                                                <!-- Start: Button-thib --><a class="btn btn-primary btn-dark mt-xl-4 mt-xxl-4 mt-lg-4" role="button" href="#"> Get it on Google play<i class="fab fa-google-play me-xxl-3"></i></a><!-- End: Button-thib -->
                                            </div>
                                            <div class="col"><img class="img-fluid" src="/public/img/Group%2014756.png"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- Start: Bold BS4 Footer Big Logo -->
@include('layouts.footer')
@endsection