@extends('layouts.app')
@section('meta-title', 'Inscrivez-vous et lancez votre projet | Pipcke')
@section('meta')

    <meta property="og:url" content="{{ request()->url() }}" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Inscrivez-vous et lancez votre projet | Pipcke" />
    <meta property="og:description"
        content="Inscrivez-vous pour découvrir votre style, lancer votre projet, consulter notre communauté d’architectes et de décorateurs d’intérieur et bien plus encore !" />
    <meta name="description"
        content="Inscrivez-vous pour découvrir votre style, lancer votre projet, consulter notre communauté d’architectes et de décorateurs d’intérieur et bien plus encore !" />
    <meta property="fb:app_id" content="730800570418065">

@endsection

@section('body-class', 'bg-light login-page')
@section('content')
    <div class="text-center mt-20">
        @if (session('consulter-un-designer_bricorama_id'))
            <img width="150" class="mr-3" src="{{ asset('img/logo_bricorama.png') }}" alt="Pipcke">
            <small class="text-login mr-2">partenaire de</small>
        @endif
        <a href="{{ route('home') }}">
            <img width="150" src="{{ asset('img/logo_pipcke.png') }}" alt="Pipcke">
        </a>
    </div>

    <div class="row justify-content-center mt-10">
        <div class="login main-register">
            <div>
                @if (session('quiz_id'))
                    <div class="text-center">
                        <h5 class="text-login poppins">{!! lang('Nous avons les résultats de votre Quiz !') !!}</h5>
                        <h6 class="text-login poppins">{!! lang('Inscrivez-vous pour découvrir votre style') !!}</h6>
                    </div>
                @else
                    <h1 style="letter-spacing: 2px"
                        class="font-size-20 text-uppercase font-weight-bold text-login text-center mb-4">
                        {!! lang('Inscription') !!}</h1>
                @endif

                <div class="panel-body">
                    <div>
                        <a href="{{ route('auth.facebook') }}" class="btn btn-sm btn_facebook">
                            {!! lang('Utiliser un compte Facebook') !!}
                        </a>
                    </div>
                    <div>

                        <a href="{{ route('auth.google') }}" class="btn btn-sm btn_google">
                            {!! lang('Utiliser un compte Google') !!}
                        </a>
                    </div>
                    <div class="divider"><span>Ou</span></div>
                    <div class="panel-body">
                        <form class="form-horizontal" method="POST" action="{{ route('register') }}" id="register-form">
                            {{ csrf_field() }}
                            <input type="hidden" name="type" value="client">
                            <input type="text" name="age" style="display:none;">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group{{ $errors->has('prenom') ? ' has-error' : '' }}">
                                        <input id="prenom" placeholder="Prénom" type="text" class="form-control"
                                            name="prenom" value="{{ old('prenom') }}" required autofocus>
                                        @if ($errors->has('prenom'))
                                            <span class="help-block">
                                                <strong>{{ $errors->first('prenom') }}</strong>
                                            </span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group{{ $errors->has('nom') ? ' has-error' : '' }}">
                                        <input id="nom" placeholder="Nom" type="text" class="form-control"
                                            name="nom" value="{{ old('nom') }}" required>
                                        @if ($errors->has('nom'))
                                            <span class="help-block">
                                                <strong>{{ $errors->first('nom') }}</strong>
                                            </span>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                                <input id="email" placeholder="Adresse email" type="email" class="form-control"
                                    name="email" value="{{ old('email') }}" required>
                                @if ($errors->has('email'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('email') }}</strong>
                                    </span>
                                @endif

                            </div>
                            <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                                <div style="position: relative;">
                                    <input id="password" placeholder="Mot de passe" type="password" class="form-control"
                                        name="password" required>

                                    <i id="togglePassword" class="fa fa-eye"
                                        style="position: absolute; top: 50%; right: 10px; transform: translateY(-50%);cursor: pointer; color: #000000;"></i>

                                    @if ($errors->has('password'))
                                        <span class="help-block">
                                            <strong>{{ $errors->first('password') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group">
                                <div style="position: relative;">
                                    <input id="password-confirm" placeholder="Confirmer mot de passe" type="password"
                                        class="form-control" name="password_confirmation" required>
                                    <i id="toggleConfirmPassword" class="fa fa-eye"
                                        style="position: absolute; top: 50%; right: 10px; transform: translateY(-50%);cursor: pointer; color: #000000;"></i>

                                </div>
                            </div>

                            <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">

                                <select class="form-control" name="question">
                                    <option value="">{!! lang('Comment avez-vous entendu parler de nous ? (Optionnel)') !!}</option>
                                    <option>{!! lang('Amis ou famille') !!}</option>
                                    <option>{!! lang('Facebook') !!}</option>
                                    <option>{!! lang('Instagram') !!}</option>
                                    <option>{!! lang('Pinterest') !!}</option>
                                    <option>{!! lang('Médias') !!}</option>
                                    <option>{!! lang('Blogs') !!}</option>
                                    <option>{!! lang('Presse') !!}</option>
                                    <option>{!! lang('Recherche internet') !!}</option>
                                    <option>{!! lang('Autres') !!}</option>
                                </select>
                            </div>

                            <div class="form-group text-left  mb-0">
                                <div class="checkbox">
                                    <label class="font-size-14">
                                        <input type="checkbox" name="condition_general" required="">
                                        {!! lang("J'ai lu et accepte ") !!}
                                        <a class="text-login text-underline" target="_blank"
                                            href="{{ route('conditions') }}">
                                            {!! lang("les conditions générales de vente et d'utilisation.") !!}
                                        </a>
                                    </label>
                                </div>
                            </div>
                            <div class="form-group text-left mt-0">
                                <div class="checkbox">
                                    <label class="font-size-14">
                                        <input type="checkbox" name="newsletter">
                                        {!! lang("J'accepte de recevoir des conseils de Pipcke.") !!}
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-12 text-left ">
                                {!! NoCaptcha::display() !!}
                            </div>
                            @if ($errors->any())
                                <div class="alert alert-danger mt-1" style="font-size: 15px;padding: 0.5rem !important;">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <div class="form-group mt-2">
                                <button type="submit" class="btn btn-sm btn2 rounded w-100">
                                    {!! lang('Valider mon inscription') !!} @if (session('quiz_id'))
                                        {!! lang('pour découvrir mon style') !!}
                                    @endif
                                </button>
                            </div>
                            <div class="text-login font-size-14">
                                {!! lang('Vous avez déjà un compte ?') !!}

                                @if (request('redirectTo'))
                                    <a ref="nofollow" class="btn-link text-underline"
                                        href="{{ route('login', 'redirectTo=' . request('redirectTo')) }}">
                                        {!! lang('Connectez-vous !') !!}
                                    </a>
                                @else
                                    <a class="btn-link text-underline" href="{{ route('login') }}">
                                        {!! lang('Connectez-vous !') !!}
                                    </a>
                                @endif
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            @if (session('quiz_id'))
                <div style="min-height: 10px; margin-top: 10px; height: auto; padding: 10px 50px">
                    <small class="text-login poppins font-weight-bold"> {!! lang('Les résultats de votre quiz ne seront pas sauvegardés si vous quittez cette page.') !!}</s>
                </div>
            @endif
        </div>
        {{-- <div class="p-0 ml-1 steppers-register">
            @if (!session('consulter-un-designer_bricorama_id'))
                <div class="vc_column-inner mt-150 steppers vc_steppers">
                    <div class="wpb_wrapper">
                        <div class="wpb_wrapper-inner">
                            <div
                                class="iconbox iconbox-side iconbox-circle iconbox-md iconbox-heading-sm iconbox-icon-linked">
                                <div class="iconbox-icon-wrap">
                                    <span class="iconbox-icon-container" style="background: black !important">

                                        <span class="font-weight-bold text-marron">1</span>
                                    </span>
                                </div>
                                <div class="contents pt-2">
                                    <b class="font-weight-bold text-marron">Je m’inscris</b>

                                </div>
                            </div>
                            <div
                                class="iconbox iconbox-side iconbox-circle iconbox-md iconbox-heading-sm iconbox-icon-linked">
                                <div class="iconbox-icon-wrap">
                                    <span class="iconbox-icon-container">

                                        <span class="font-weight-bold">2</span>
                                    </span>
                                </div>
                                <div class="contents pt-2">
                                    <b class="font-weight-bold text-white">Je découvre mon style</b>

                                </div>
                            </div>
                            <div
                                class="iconbox iconbox-side iconbox-circle iconbox-md iconbox-heading-sm iconbox-icon-linked">
                                <div class="iconbox-icon-wrap">
                                    <span class="iconbox-icon-container">

                                        <span class="font-weight-bold">3</span>
                                    </span>
                                </div>
                                <div class="contents pt-2">
                                    <b class="font-weight-bold text-white">Je choisis mon offre</b>

                                </div>
                            </div>

                            <div
                                class="iconbox iconbox-side iconbox-circle iconbox-md iconbox-heading-sm iconbox-icon-linked">
                                <div class="iconbox-icon-wrap">
                                    <span class="iconbox-icon-container">

                                        <span class="font-weight-bold">4</span>
                                    </span>
                                </div>
                                <div class="contents pt-2">
                                    <b class="font-weight-bold text-white">Je sélectionne mes architectes</b>

                                </div>
                            </div>

                            <div
                                class="iconbox iconbox-side iconbox-circle iconbox-md iconbox-heading-sm iconbox-icon-linked">
                                <div class="iconbox-icon-wrap">
                                    <span class="iconbox-icon-container">

                                        <span class=" font-weight-bold">5</span>
                                    </span>
                                </div>
                                <div class="contents pt-2">
                                    <b class="font-weight-bold text-white">Je lance mon projet</b>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div> --}}

    </div>
@endsection