@extends('layouts.mainlayout')
@section('content')
    <!-- Page Content -->
    <div class="content">
        <div class="container">
            <div class="row">
                <div class="col-md-6 offset-md-3">
                    <!-- Register Tab Content -->
                    <div class="account-content">
                        <div class="align-items-center justify-content-center">
                            <div class="login-right">
                                <div class="login-header text-center">
                                    <a href="index"><img src="assets/img/logo-01.png" alt="logo" class="img-fluid"></a>
                                    <h3>Rejoignez-nous</h3>
                                    <p>Tirez le meilleur parti de votre vie professionnelle</p>
                                </div>

                                <div class="tab-content pt-0">
                                    <div role="tabpanel" id="developer" class="tab-pane fade active show">
                                        <form method="POST" action="{{ route('register') }}">
                                            @csrf
                                            <div class="form-group form-focus">
                                                <input type="text" name="first_name" value="{{old('first_name')}}" class="form-control floating">
                                                <label class="focus-label">Prénom</label>
                                            </div>
                                            <div class="form-group form-focus">
                                                <input type="text" class="form-control floating" name="last_name" value="{{old('last_name')}}">
                                                <label class="focus-label">Nom</label>
                                            </div>
                                            <div class="form-group form-focus">
                                                <input type="email" class="form-control floating" name="email" value="{{old('email')}}">
                                                <label class="focus-label">Email </label>
                                            </div>



                                            <div class="form-group form-focus">
                                                <input type="number" class="form-control floating" name="phone" value="{{old('phone')}}">
                                                <label class="focus-label">Numéro de téléphone </label>
                                            </div>


                                            <div class="form-group form-focus">
                                                <input type="text" class="form-control floating" name="address" value="{{old('address')}}">
                                                <label class="focus-label">Adresse </label>
                                            </div>

                                            <div class="form-group form-focus">
                                                <input type="password" class="form-control floating" name="password" value="{{old('password')}}">
                                                <label class="focus-label">Mot de passe</label>
                                            </div>
                                            <div class="form-group form-focus ">
                                                <input type="password" class="form-control floating" name="confirm_password" value="{{old('confirm_password')}}">
                                                <label class="focus-label">Confirmez le mot de passe</label>
                                            </div>

                                            <div class="form-group form-focus">
                                                <select class="form-control floating select" name="role">
                                                    <option value="freelancer" selected>Freelancer</option>
                                                    <option value="client">Client</option>
                                                </select>
                                                <label class="focus-label">Rôle </label>
                                            </div>


                                            <div class="form-group form-focus">
                                                <select class="form-control floating select" name="gender">
                                                    <option value="male" selected>Homme</option>
                                                    <option value="female">Femme</option>
                                                    <option value="others">autre</option>
                                                </select>
                                                <label class="focus-label">Sexe </label>
                                            </div>
                                            <div class="dont-have">
                                                <label class="custom_check">
                                                    <input type="checkbox" name="rem_password">
                                                    <span class="checkmark"></span> Vous acceptez le notre <a
                                                        href="privacy-policy">Contrat d'utilisateur, politique de
                                                        confidentialité,</a> et <a href="privacy-policy">Politique de
                                                        cookie</a>.
                                                </label>
                                            </div>
                                            <button class="btn btn-primary btn-block btn-lg login-btn"
                                                type="submit">Accepter de rejoindre</button>


                                        </form>
                                        <div class="login-or">
                                            <p>Ou connecter avec</p>
                                        </div>
                                        <div class="row social-login">
                                            <div class="col-4">
                                                <a href="#" class="btn btn-twitter btn-block"> Twitter</a>
                                            </div>
                                            <div class="col-4">
                                                <a href="#" class="btn btn-facebook btn-block"> Facebook</a>
                                            </div>
                                            <div class="col-4">
                                                <a href="#" class="btn btn-google btn-block"> Google</a>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-6 text-start">
                                                <a class="forgot-link" href="forgot-password">Mot de passe oublié ?</a>
                                            </div>
                                            <div class="col-6 text-end dont-have">Déjà sur notre plateforme <a
                                                    href="login">Cliquez ici</a></div>
                                        </div>

                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /Register Tab Content -->

                </div>
            </div>
        </div>
    </div>
    <!-- /Page Content -->


    </div>
    <!-- /Main Wrapper -->
@endsection