@extends ("front.layout", ['component' => "customerCreate"])

@section('explication')
    <div class="explication" v-if="explication">
        <div class="wrapper">
            <div class="disclaimer">
                {!!nl2br(trans('customers.disclaimer')) !!}
            </div>

            <div class="close" @click="explication=false">{{trans('customers.close')}}</div>
        </div>
    </div>
@endsection

@section('content')
    @yield('explication')

    <div class="page" id="create-customer">
        <div class="container">
            @component('front.app.titre-page')
                @slot('title')
                    {{trans('customers.create')}}
                @endslot

                @slot('subtitle')
                    {{trans('customers.punchline')}}
                @endslot
            @endcomponent


            <div class="formulaire">
                <div class="input">
                    <input type="text" autofocus name="first_name" @keydown="form.errors.clear('first_name')" v-model="form.first_name" placeholder="{{trans('customers.first-name')}}">

                    <span class="help is-danger" v-if="form.errors.has('first_name')" v-text="form.errors.get('first_name')"></span>
                </div>


                <div class="input">
                    <input type="text" name="last_name" @keydown="form.errors.clear('last_name')" v-model="form.last_name" placeholder="{{trans('customers.last-name')}}">

                    <span class="help is-danger" v-if="form.errors.has('last_name')" v-text="form.errors.get('last_name')"></span>
                </div>

                <div class="control">
                    <div class="select">
                        <select v-model="form.pays" @change="form.errors.clear('pays')">
                            <option disabled value="">{{trans('customers.pays')}}</option>
                            <option v-for="pays in {{$pays}}" :value="pays.id" v-text="pays.name"></option>
                        </select>
                    </div>

                    <span class="help is-danger" v-if="form.errors.has('pays')" v-text="form.errors.get('pays')"></span>
                </div>

                <div class="radio-container">
                    <div>
                        <input id="particulier" class="square" type="radio" name="type" value="particulier" :checked="form.type=='particulier'" v-model="form.type">
                        <label for="particulier" class="radio">{{trans('customers.particulier')}}</label>
                    </div>

                    <div>
                        <input id="professionnel" class="square" type="radio" name="type" value="professionnel" :checked="form.type=='professionnel'" v-model="form.type">
                        <label for="professionnel" class="radio">{{trans('customers.professionnel')}}</label>
                    </div>
                </div>

                <div class="control" v-if="isPro">
                    <div class="select">
                        <select v-model="form.metier" @change="form.errors.clear('metier')">
                            <option disabled value="">{{trans('customers.metier')}}</option>
                            <option v-for="metier in {{$metiers}}" :value="metier.id" v-text="trans('metiers.'+metier.key)"></option>
                        </select>
                    </div>

                    <span class="help is-danger" v-if="form.errors.has('metier')" v-text="form.errors.get('metier')"></span>
                </div>

                <div class="input">
                    <input type="text" @keydown="form.errors.clear('email')" v-model="form.email" name="email" placeholder="{{trans('customers.email')}}">

                    <span class="help is-danger" v-if="form.errors.has('email')" v-text="form.errors.get('email')"></span>

                    <span class="icon">
                        <i class="fa fa-at"></i>
                    </span>
                </div>

                <div class="input">
                    <input :type="password" @keydown="form.errors.clear('password')" v-model="form.password" name="password" placeholder="{{trans('customers.password')}}">
                    <span class="help is-danger" v-if="form.errors.has('password')" v-text="form.errors.get('password')"></span>

                    <span class="icon">
                        <i class="fa fa-lock"></i>
                    </span>

                    <span class="icon" @click.prevent="switchVisibility('password')">
                        <i class="fa" :class="{'fa-eye': !passwordIsVisible , 'fa-eye-slash': passwordIsVisible}"></i>
                    </span>
                </div>

                <div class="input">
                    <input :type="password_confirmation" @keydown="form.errors.clear('password_confirmation')" v-model="form.password_confirmation" name="password_confirmation" placeholder="{{trans('customers.password-confirmation')}}">
                    <span class="help is-danger" v-if="form.errors.has('password')" v-text="form.errors.get('password')"></span>

                    <span class="icon">
                        <i class="fa fa-lock"></i>
                    </span>

                    <span class="icon" @click.prevent="switchVisibility('password_confirmation')">
                        <i class="fa" :class="{'fa-eye': !passwordConfirmationIsVisible , 'fa-eye-slash': passwordConfirmationIsVisible}"></i>
                    </span>
                </div>

                <div class="consentement">
                    <input class="square" id="consentement" v-model="form.consentement" :checked="form.consentement"  type="checkbox">
                    <label for="consentement">{{trans('customers.consentement')}}</label>
                </div>

                <div class="subscribe">
                    <input class="square" id="subscribe" v-model="form.subscribe" :checked="form.subscribe" type="checkbox">
                    <label for="subscribe">{{trans('contact.sabonner')}}</label>
                </div>

                <button type="submit" class="button submit" @click.prevent="submit">
                    <span v-if="!sending" v-text="buttonMessage"></span>
                    <span v-if="sending">
                        <span class="icon"><i class="fa fa-refresh fa-spin fa-fw"></i></span>
                        <span v-text="buttonMessage"></span>
                    </span>
                </button>

                <article class="message is-success" v-if="created">
                    <div class="message-body">
                        <p>{{trans('customers.account-created')}}</p>

                        <p>
                            <a class="black" href="/customers/login">{{trans('customers.account-access')}}</a>
                        </p>
                    </div>

                </article>
            </div>
        </div>
    </div>
@endsection