@extends('layouts.admin.main')

@section('content')
<div class="col-md-12">
    <div class="card">
        <div class="card-header">
            <strong class="card-title">Ajouter un utilisateur <a href="#"><i class="fa fa-question-circle" aria-hidden="true"></i>
            </a></strong>
        </div>
        <div class="card-body">
            <form action="/admin/user/add" method="post">
                @csrf
                <div class="row">
                    <div class="col-6">
                        <div class="form-group">
                            <label for="firstname">Prénom</label>
                            <input type="text" class="form-control" name="firstname" id="firstname" aria-describedby="helpId" placeholder="John" required>
                            <small id="helpId" class="form-text text-muted"><span class="badge badge-warning">Requis</span></small>
                        </div>  
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label for="lastname">Nom de famille</label>
                            <input type="text" class="form-control" name="lastname" id="lastname" aria-describedby="helpId" placeholder="Doe" required>
                            <small id="helpId" class="form-text text-muted"><span class="badge badge-warning">Requis</span></small>
                        </div>  
                    </div>
                </div>
                <div class="alert alert-warning" id="email_alert" role="alert" style="display:none;">
                    Les adresses email doivent être identique
                </div>
                <div class="row">
                    <div class="col-6">
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" class="form-control" name="email" id="email" aria-describedby="emailHelp" placeholder="exemple@c-cms.cf" onkeyup="checkEmail()" required>
                            <small id="emailHelp" class="form-text text-muted"><span class="badge badge-warning">Requis</span></small>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label for="email">Confirmer l'addresse email</label>
                            <input type="email" class="form-control" name="emailc" id="emailc" aria-describedby="emailHelp" placeholder="exemple@c-cms.cf" onkeyup="checkEmail()" required>
                            <small id="emailHelp" class="form-text text-muted"><span class="badge badge-warning">Requis</span></small>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-6">
                        <div class="form-group">
                          <label for="adresse">Adresse</label>
                          <input type="text" class="form-control" name="adresse" id="adresse" aria-describedby="helpId" placeholder="14 ave Des Rue, Rimouski">
                          <small id="helpId" class="form-text text-muted"></small>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                          <label for="telephone">Telephone</label>
                          <input type="tel"
                            class="form-control" name="telephone" id="telephone" aria-describedby="helpId" placeholder="(XXX) XXX-XXXX">
                          <small id="helpId" class="form-text text-muted"><span class="badge badge-info">Si vous souhaiter recevoir des notifications par SMS</span></small>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-3">
                        <div class="form-group">
                          <label for="sexe">Sexe</label>
                          <select class="form-control" name="sexe" id="sexe" required>
                            <option value="m">Homme</option>
                            <option value="f">Femme</option>
                            <option value="a">Autre</option>
                          </select>
                          <small id="helpId" class="form-text text-muted"><span class="badge badge-warning">Requis</span></small>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="form-group">
                          <label for="age">Age</label>
                          <input type="number" class="form-control" name="age" id="age" aria-describedby="helpId" placeholder="Age" min="0" max="100">
                          <small id="helpId" class="form-text text-muted"></small>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="form-group">
                          <label for="rank">Grade</label>
                          <select class="form-control" name="rank" id="rank" required>
                            @foreach ($RankList as $rank)
                                <option value="{{$rank->id}}">{{$rank->name}}</option>                                   
                            @endforeach    
                          </select>
                          <small id="helpId" class="form-text text-muted"><span class="badge badge-warning">Requis</span></small>
                        </div>    
                    </div>
                    <div class="col-3">
                        <div class="form-group">
                        <label for="job">Poste</label>
                        <select class="form-control" name="job" id="job" required>
                            @foreach ($JobsList as $job)
                                <option value="{{$job->id}}">{{$job->name}}</option>                                   
                            @endforeach    
                        </select>
                        <small id="helpId" class="form-text text-muted"><span class="badge badge-warning">Requis</span></small>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="alert alert-warning" id="psw_alert" role="alert" style="display:none;">
                    Les mot de passe doivent être identique
                </div>
                <div class="row">
                    <div class="col-6">
                        <div class="form-group">
                          <label for="psw">Mot de passe</label>
                          <input type="password" class="form-control" name="psw" id="psw" placeholder="Supermotdepasse" onkeyup="checkPassword()">
                          <small id="helpId" class="form-text text-muted"><span class="badge badge-warning">Requis</span></small>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                          <label for="pswc">Confirmer le mot de passe</label>
                          <input type="password" class="form-control" name="pswc" id="pswc" placeholder="Supermotdepasse" onkeyup="checkPassword()">
                          <small id="helpId" class="form-text text-muted"><span class="badge badge-warning">Requis</span></small>
                        </div>
                    </div>
                </div>
                <button type="submit" id="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
    </div>
</div>
@endsection

@section('breadcrumb')
    <div class="breadcrumbs">
        <div class="col-sm-4">
            <div class="page-header float-left">
                <div class="page-title">
                    <h1>Ajouter un utilisateur</h1>
                </div>
            </div>
        </div>
        <div class="col-sm-8">
            <div class="page-header float-right">
                <div class="page-title">
                    <ol class="breadcrumb text-right">
                        <li class="active">utilisateur/Ajouter</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('custom_scripts')
<script src="/assets/admin/assets/js/user.js"></script>
@endsection