@extends('frontend.include.layout')

@section('content')

    <section class="mt-50 mb-50">
        <div class="container">
            <div class="row">
                <div class="col-md-3"></div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h3>Choose to register as</h3>
                        </div>
                        <div class="card-body">
                            <p>Already have an account? <a href="{{ url('profilelogin') }}" style="color: #1775c1;">Log in instead!</a></p><br>

                            <form method="POST" action="{{ route('profileregister.store')  }}" enctype="multipart/form-data" id="registerformdetailsstore">
                                @csrf

                            <div class="row" id="registerformsection1">

                                <div class="col-md-6">
                                    <label for="actorregisterusertype2">
                                    <div class="card registerlookdesign p-3 mb-2">
                                        <div class="d-flex justify-content-between">
                                            <div class="d-flex flex-row align-items-center">
                                                <div class="icon"><i class="fa fa-user" aria-hidden="true"></i></div>
                                            </div>
                                            <div class="badge"> <span><input id="actorregisterusertype2" class="registerusertypedesign" value="2" type="radio" name="registertypeuser"></span> </div>
                                        </div>
                                        <div class="mt-5">
                                            <h3 class="heading">
                                                I’m a actor, looking for work</h3>
                                        </div>
                                    </div>
                                    </label>
                                </div>

                                <div class="col-md-6">
                                    <label for="actorregisterusertype3">
                                        <div class="card registerlookdesign p-3 mb-2">
                                            <div class="d-flex justify-content-between">
                                                <div class="d-flex flex-row align-items-center">
                                                    <div class="icon"><i class="fa fa-user" aria-hidden="true"></i></div>
                                                </div>
                                                <div class="badge"> <span><input id="actorregisterusertype3" class="registerusertypedesign" value="3" type="radio" name="registertypeuser"></span> </div>
                                            </div>
                                            <div class="mt-5">
                                                <h3 class="heading">
                                                    I’m a client, hiring for a project</h3>
                                            </div>
                                        </div>
                                    </label>
                                </div>

                                <div class="col-md-12">
                                    <br>
                                    <button type="button" class="btn btn-fill-out submit btn1" id="registerformclicktoshowformdetails">Next</button>
                                </div>

                            </div>

                            <div class="row" id="registerformsection2" style="display:none">

                                <div class="form-group">
                                    <a href="{{ route('auth.google') }}">
                                        <img src="https://developers.google.com/identity/images/btn_google_signin_dark_normal_web.png">
                                    </a>
                                </div>

                                <div class="form-group">
                                    <br>

                                    <div class="row">
                                        <div class="col-md-5"><hr></div>
                                        <div class="col-md-2 text-center">or</div>
                                        <div class="col-md-5"><hr></div>
                                    </div>

                                </div>

                                <div class="form-group">
                                    <label for="signin-name" class="control-label">Name  <span class="required">*</span></label>
                                    <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" placeholder="Name" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
                                    @error('name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="signin-email" class="control-label">Email  <span class="required">*</span></label>
                                    <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" placeholder="Email Id" name="email"  value="{{ old('email') }}" required autocomplete="email" autofocus>
                                    @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="signin-password" class="control-label">Password  <span class="required">*</span></label>
                                    <input id="password" type="password" class="form-control border-right-0 @error('password') is-invalid @enderror" placeholder="Password" name="password" required autocomplete="current-password">

                                    @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror

                                </div>

                                <div class="col-md-12">
                                    <button type="submit" class="btn btn-fill-out submit btn1" name="submit" value="Submit">Register</button> &nbsp;
                                    <button type="button" class="btn btn-fill-out submit btn1" id="clicktoshowhideregisterusertype">Back</button>
                                </div>

                            </div>

                            </form>

                        </div>
                    </div>
                </div>
                <div class="col-md-3"></div>
            </div>
        </div>
    </section>


@endsection