@extends('dashboard.Boutique.auth.register._blank')
@section('content')
<div style="background: rgba(000,000,000,0.5);height: 100%">

    @php
        // Fill Input with Data When user create a commande
        $firstname='';
        $lastname='';
        $sex='';
        $customer_phone='';
        $email='';
        if(\Illuminate\Support\Facades\Session::has('user_command')){
            $comd=\Illuminate\Support\Facades\Session::get('user_command');
            $firstname=$comd['first_name'];
            $lastname=$comd['last_name'];
            $sex=$comd['sex'];
            $customer_phone=$comd['customer_phone'];
            $email=$comd['email'];
        }
    @endphp

    <div class="col-xs-12 col-lg-12"
        style="background: url('{{asset('images/h2.jpg')}}') center no-repeat;background-size: cover;padding-bottom: 20px;padding-top: 20px">
        <!-- form starts here -->
        <div class="row">
            <div class="col-sm-3"></div>
            <form class="col-sm-6 col-xs-12"
                onsubmit="return check_error(['username','lastname','firstname','phone','email','myInput','cpassword','privilege']);"
                action="{{route('register')}}" method="post" id="register_form">
                <div class="row">
                    <div class="col-sm-1"></div>

                    <div class="col-sm-10"
                        style="background: #fff;padding: 5%;border-left: 5px solid #88b121;border-radius:20px">

                        <div class=" col-sm-12 text-center" style="margin-bottom: 30px;">
                            <a href="{{url('/')}}"> <img src="{{asset('images/logo.png')}}" alt=""
                                    width="300px"></a>
                        </div>

                        <div class=" col-sm-12 text-center" style="margin-bottom: 30px;">
                            Ce compte utilisateur vous permettra de créer et gérer autant de boutique que vous le
                            désirez.
                        </div>

                        <div style="margin-bottom: 15px;">
                            @if ($errors->any())
                            <div class="alert alert-danger" style="border-radius: 0px;color: red;">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                            @endif
                            @if(session("success"))
                            <div class="alert alert-success" style="border-radius: 0px;color: red;">
                                {{session('success')}}
                            </div>

                            @elseif(session("error"))
                            <div class="alert alert-danger"
                                style="border-radius: 0px;color: red;text-align: justify;">
                                {!! session('error') !!}
                            </div>

                            @endif
                        </div>
                        @csrf

                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                                <label for="pays">Votre pays <span style='color:red'>*</span></label></label>
                                <select name="country" data-placeholder="Choisissez le pays"
                                    class="form-control pays choosen"
                                    @if(Illuminate\Support\Facades\Session::has('country'))
                                    data-country="{{Illuminate\Support\Facades\Session::get('country')}}" @endif>
                                    @foreach ($pays as $country)
                                    <option value="{{$country->id}}"
                                        @if(Illuminate\Support\Facades\Session::has('country') &&
                                        Illuminate\Support\Facades\Session::get('country')==$country->name) selected
                                        @endif>{{$country->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="regions-container col-sm-12 col-md-4 col-lg-4">
                                <div style="text-align: center;display: none" class="regions-loader text-center">
                                    <img style="width: 50px;" src="{{asset('images/loader2.gif')}}">
                                    <br> chargement régions
                                </div>
                            </div>
                            <div class="villes-container col-sm-12 col-md-4 col-lg-4">
                                <div style="text-align: center;display: none" class="villes-loader text-center">
                                    <img style="width: 50px;" src="{{asset('images/loader2.gif')}}">
                                    <br> chargement des villes
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label> Type de compte : <span style='color:red'>*</span></label>
                            <select name="privilege" data-placeholder="Choisissez un type de compte"
                                    class="form-control pays choosen">
                                    <option value="utilisateur">Marchand</option>
                                    <option value="producteur">Producteur</option>
                                </select>
                            <span id="errorusername" style="color: red;"></span>
                        </div>

                        <div class="form-group">
                            <label> Nom d'utilisateur : <span style='color:red'>*</span></label>
                            <input type="text" name="username" id="username"
                                data-input_name=" email ou nom d'utilisateur" onblur="check_error(['username'])"
                                placeholder="Votre nom d'utilisateur" class="form-control" required="required" />
                            <span id="errorusername" style="color: red;"></span>
                        </div>

                        <div class="form-group">
                            <label> Nom : <span style='color:red'>*</span></label>
                            <input type="text" name="last_name" id="lastname" value="{{$lastname}}"
                                data-input_name="nom" onblur="check_error(['lastname'])"
                                placeholder="Votre nom de famille" class="form-control" required="required" />
                            <span id="errorlastname" style="color: red;"></span>
                        </div>

                        <div class="form-group">
                            <label> Prénom : <span style='color:red'>*</span></label>
                            <input type="text" name="first_name" id="firstname" value="{{$firstname}}"
                                data-input_name="prenom" onblur="check_error(['firstname'])"
                                placeholder="Votre prénom" class="form-control" required="required" />
                            <span id="errorfirstname" style="color: red;"></span>
                        </div>

                        <div class="form-group">
                            <label> Sexe : <span style='color:red'>*</span></label>&nbsp; &nbsp; &nbsp; &nbsp;
                            <input type="radio" name="sexe" value="Homme" id="homme"
                                @if(\Illuminate\Support\Facades\Session::has('user_command')) @if($sex=='Homme' )
                                checked @endif @else checked @endif />&nbsp;<label for="homme"> Homme</label> &nbsp;
                            &nbsp; &nbsp; &nbsp;
                            <input type="radio" name="sexe" id="femme" value="Femme"
                                @if(\Illuminate\Support\Facades\Session::has('user_command')) @if($sex=='Homme' )
                                checked @endif @endif />&nbsp;
                            <label for="femme">Femme</label>
                        </div>
                        <input type="hidden" name="type" value="user">
                        <div class="form-group">
                            <label> Numéro de téléphone : <span style='color:red'>*</span></label>
                            <input type="number" id="phone" class="form-control" name="telephone"
                                value="{{$customer_phone}}" data-input_name="numéro de téléphone"
                                onblur="check_error(['phone'])" placeholder="Téléphone"
                                oninput="this.value=this.value.replace(/(?![0-9])./gmi,'')" />
                            <span id="valid-msg" class="hide" style="display: none;color: green;">✓ Valid</span>
                            <span id="error-msg" class="hide" style="color: red;"></span>
                            <span id="errorphone" style="color: red;"></span>

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

                            <label> Votre email : <span style='color:red'>*</span></label>
                            <input type="email" name="email" value="{{$email}}" id="email" data-input_name="email"
                                onblur="check_error(['email'])" placeholder="Votre adresse mail"
                                class="form-control" required="required" />
                            <span id="erroremail" style="color: red;"></span>
                        </div>
                        <div class="form-group">
                            <label> Mot de passe : <span style='color:red'>*</span></label>

                            <div class="input-group mb-3">
                                <input type="password" name="password" data-input_name="mot de passe"
                                    placeholder="Votre mot de passe" onblur="check_error(['myInput'])"
                                    class="form-control" required="required" id="myInput"
                                    aria-label="Recipient's username" aria-describedby="basic-addon2">
                                <div class="input-group-append">
                                    <button class="btn btn-outline-secondary" type="button" id="check3"
                                        value="show password" onclick="myFunction()"><i
                                            class="fa fa-eye"></i></button>
                                </div>
                            </div>
                            <span id="errormyInput" style="color: red;"></span>

                        </div>

                        <div class="form-group">
                            <label> Confirmé le mot de passe : <span style='color:red'>*</span></label>
                            <input type="password" name="cpassword" id="cpassword" data-imite="myInput"
                                data-input_name="confirmation de mot de passe" onblur="check_error(['cpassword'])"
                                placeholder="Votre mot de passe de confirmation" class="form-control"
                                required="required" />
                            <span id="errorcpassword" style="color: red;"></span>
                        </div>
                        <!-- script for show password -->
                        <!-- //end script -->
                        <button type="submit" id="new_account" class="btn btn-primary btn-sm">CRÉER MON COMPTE
                            MAINTENANT</button>
                        <p class="form-group" style="padding-top: 10px;">
                            <a href="{{route('login')}}">J'ai déjà un compte utilisateur.</a>
                        </p>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- //form ends here -->
    <!--copyright-->
    <div class="copy-wthree">

    </div>
    <!--//copyright-->
</div>
@endsection