@extends('layouts.app',[
    'class' => '',
    'folderActive' => '',
    'elementActive' => 'new-users'
])

@section('head_supplement')
    <link rel="stylesheet" type="text/css"
          href="https://cdn.jsdelivr.net/npm/spectrum-colorpicker2/dist/spectrum.min.css">
    <style>
        div .form-group > .text-danger {
            text-align: center;
        }

    </style>
@endsection
@section('content')

    <div class="row">
        <div class="col-md-12 col-xl-12">
            <form class="form-horizontal form-label-left" action="{{ route('users.store') }}" method="post" name="form_name"
                  id="form_id" data-select2-id="form_id" autocomplete="off">
                @csrf
                <div class="form-group ">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="last-name">
                        Type d'utilisateur
                    </label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <select class="form-control" name="user_type" required="">
                            <option value="">Choisir un type d'utilisateur</option>
                            @foreach(config('types.type_user') as $key => $role)
                                <option
                                    {{ $key == old('user_type') ? 'selected' : '' }} value="{{ $key }}">{{ $role }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group ">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="last-name">
                        Affecter à un client
                    </label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <select class="form-control select2" name="client_id" tabindex="-1"
                                aria-hidden="true">
                            <option value="0">Choisir un client</option>
                            @foreach($clients as $client)
                                <option
                                    {{ $client->user_id == old('client_id') ? 'selected' : '' }} value="{{ $client->client_id }}">{{ $client->client_title }} </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="last-name">
                        Login
                    </label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <input autocomplete="off" required="true" type="text" name="user_login"
                               value="{{ old('user_login') }}"
                               class="form-control @error('user_login') is-invalid @enderror">
                    </div>
                    <br>
                    @error('user_login')
                    <span class="text-danger" role="alert"
                          style="color: #d92550;margin-left: auto;margin-right: auto;width: auto;display: inherit;">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>

                <div class="form-group ">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="last-name">
                        Nom
                    </label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <input required="" type="text" name="user_lastname" value="{{ old('user_lastname') }}"
                               class="form-control @error('user_lastname') is-invalid @enderror">
                        <br>
                        @error('user_lastname')
                        <span class="text-danger" role="alert"
                              style="color: #d92550;margin-left: auto;margin-right: auto;width: auto;display: inherit;">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>
                </div>
                <div class="form-group ">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="last-name">
                        Prénom
                    </label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <input required="" type="text" name="user_firstname" value="{{ old('user_firstname') }}"
                               class="form-control @error('user_firstname') is-invalid @enderror">
                        <br>
                        @error('user_firstname')
                        <span class="text-danger" role="alert"
                              style="color: #d92550;margin-left: auto;margin-right: auto;width: auto;display: inherit;">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>
                </div>
                <div class="form-group ">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="meta_color">
                        Couleur
                    </label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <input type="text" name="meta_color" id="color-picker" value="{{ old('meta_color') }}" autocomplete="off"
                               class="form-control @error('meta_color') is-invalid @enderror">
                        <br>
                        @error('meta_color')
                        <span class="text-danger" role="alert"
                              style="color: #d92550;margin-left: auto;margin-right: auto;width: auto;display: inherit;">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>
                </div>
                <div class="form-group ">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="last-name">
                        Nouveau mot de passe
                    </label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <input required="" type="password" name="password" id="password" value=""
                               autocomplete="new-password"
                               class="form-control @error('password') is-invalid @enderror"
                               aria-describedby="basic-addon1">
                    </div>
                    @error('password')
                    <span class="text-danger" role="alert"
                          style="color: #d92550;margin-left: auto;margin-right: auto;width: auto;display: inherit;">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                    <label class="control-label col-md-3 col-sm-3 col-xs-12"></label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <div class="alert alert-warning password-alert mt-2" role="alert">
                            <ul>
                                <li class="requirements leng"><i class="fas fa-check green-text"></i><i
                                        class="fas fa-times red-text"></i> Le mot de passe doit faire 8 caractère
                                    minimum.
                                </li>
                                <li class="requirements big-letter"><i class="fas fa-check green-text"></i><i
                                        class="fas fa-times red-text"></i> Le mot de passe doit comprendre une lettre en
                                    majuscule.
                                </li>
                                <li class="requirements num"><i class="fas fa-check green-text"></i><i
                                        class="fas fa-times red-text"></i> Le mot de passe doit contenir un nombre.
                                </li>
                                <li class="requirements special-char"><i class="fas fa-check green-text"></i><i
                                        class="fas fa-times red-text"></i> Le mot de passe doit contenir un caractère
                                    special.
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="form-group ">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="last-name">
                        Confirmation du mot de passe
                    </label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <input required="" type="password" name="password_confirm" id="password_confirm" value=""
                               class="form-control"
                               onkeyup='check();'>
                        <br>
                        @error('password_confirm')
                        <span class="text-danger" role="alert"
                              style="color: #d92550;margin-left: auto;margin-right: auto;width: auto;display: inherit;">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>
                    <span id='confirm_pass'></span>
                </div>
                <div class="">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="last-name">
                    </label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <input type="submit" value="Enregistrer" class="btn btn-primary" id="validation">
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/spectrum-colorpicker2/dist/spectrum.min.js"></script>
    <script src="{{ mix('js/password.js') }}" defer></script>
    <script>
        function check() {
            if (document.getElementById('password').value ===
                document.getElementById('password_confirm').value) {
                document.getElementById('confirm_pass').style.color = 'green';
                document.getElementById('confirm_pass').innerHTML = 'Les mot de passe correspond';
                document.getElementById('validation').disabled = false;
            } else {
                document.getElementById('confirm_pass').style.color = 'red';
                document.getElementById('confirm_pass').innerHTML = 'Les mot de passe ne correspond pas';
                document.getElementById('validation').disabled = true;
            }
        }

        $('#color-picker').spectrum({
            type: "component"
        });
    </script>
@endsection