@extends('app')
@section('title', 'Add new user')
@section('link')
<link rel="stylesheet" href="{{asset('bower_components/select2/dist/css/select2.min.css')}}"/>
@endsection
@section('content')
<div class="pcoded-inner-content">
    <div class="main-body">
        <div class="page-wrapper">
            <div class="page-body">
                @include('includes._alert')
                <div class="card">
                    <div class="card-header mt-2 mb-0 pb-0">
                        <div class="d-flex justify-content-between pb-1">                        
                            <h4>{{$user ? 'Edit':'Add'}} User</h4>
                            <span class="form-control-variant">Les champ avec asterisk (<code>*</code>) sont obligatoires.</span>
                            <span>
                                @if (!$user)
                                <button class="btn btn-inverse btn-outline-inverse btn-sm py-1 mx-2" data-toggle="modal" data-target="#upload" title="Import File"> <i class="fas fa-ellipsis-h m-0"></i></button>
                                @endif
                                <a href="{{route('user.index1')}}" class="btn btn-inverse btn-outline-inverse  btn-sm py-1" title="Return Back"><i class="fas fa-reply mx-0"></i></a>
                            </span>
                        </div>
                    </div>
                    <hr class="my-0 mx-3">
                    <div class="card-block mt-3 mx-3">
                        <form action="{{route($user ? 'user.update':'user.store', $user ? $user->id:'')}}" method="post" enctype="multipart/form-data">
                            @csrf
                            @method($user ?  'put':'post')
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label text-right" for="profilUser">Profil User<span class="text-danger">*</span> :</label>
                                <div class="col-sm-10">
                                    <select name="profilUser" id="profilUser" class="form-control @error('profilUser') is-invalid @enderror">
                                        <option value=" ">Choise one option</option>
                                        @foreach ($role as $item)
                                            <option value="{{$item->id}}" {{ (old('profilUser') == $item->id) ? 'selected':($user ? ($user->role_id == $item->id ? 'selected':''):'') }}>{{ucwords($item->role)}}</option>
                                        @endforeach
                                    </select>
                                    @error('profilUser')
                                        <span class="form-bar text-danger" role="alert">
                                            {{$message}}
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label text-right" for="firstNameUser">Nom User<span class="text-danger">*</span> :</label>
                                <div class="col-sm-10">
                                    <input type="text" name="firstNameUser" id="firstNameUser" class="form-control @error('firstNameUser') is-invalid @enderror" value="{{old('firstNameUser', $user ? $user->first_name:'')}}" placeholder="Nom User ...">
                                    @error('firstNameUser')
                                        <span class="form-bar text-danger" role="alert">
                                            {{$message}}
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label text-right" for="latsNameUser">Prénoms User<span class="text-danger">*</span> :</label>
                                <div class="col-sm-10">
                                    <input type="text" name="latsNameUser" id="latsNameUser" class="form-control @error('latsNameUser') is-invalid @enderror" value="{{old('latsNameUser', $user ? $user->last_name:'')}}" placeholder="Prénoms User ...">
                                    @error('latsNameUser')
                                        <span class="form-bar text-danger" role="alert">
                                            {{$message}}
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label text-right" for="sexeUser">Sexe User<span class="text-danger">*</span> :</label>
                                <div class="col-sm-10">
                                    <span class="mr-3">
                                        <input type="radio" name="sexeUser" id="femme" value="F" {{$user ? ($user->sexe == 'F' ? 'checked':null):null}}>
                                        <label for="femme" class="mx-1 form-control-variant">Femme</label>
                                    </span>
                                    <span class="mx-3">
                                        <input type="radio" name="sexeUser" id="homme" value="H" {{$user ? ($user->sexe == 'H' ? 'checked':null):'checked'}}>
                                        <label for="homme" class="mx-1 form-control-variant">Homme</label>
                                    </span> <br>
                                    @error('sexeUser')
                                        <span class="form-bar text-danger" role="alert">
                                            {{$message}}
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label text-right" for="mailUser">E-mail User<span class="text-danger">*</span> :</label>
                                <div class="col-sm-10">
                                    <input type="email" name="mailUser" id="mailUser" class="form-control @error('mailUser') is-invalid @enderror" value="{{old('mailUser', $user ? $user->email:'')}}" placeholder="E-mail User ...">
                                    @error('mailUser')
                                        <span class="form-bar text-danger" role="alert">
                                            {{$message}}
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label text-right" for="numUser">Numéro de téléphone<span class="text-danger">*</span> :</label>
                                <div class="col-sm-10">
                                    <input type="text" name="numUser" id="numUser" class="form-control @error('numUser') is-invalid @enderror" value="{{old('numUser', $user ? $user->telephon:'')}}"  maxlength="10" placeholder="Numéro de téléphone ...">
                                    @error('numUser')
                                        <span class="form-bar text-danger" role="alert">
                                            {{$message}}
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label text-right" for="residence">Lieu de résidence<span class="text-danger">*</span> :</label>
                                <div class="col-sm-10">
                                    <input type="text" name="residence" id="residence" class="form-control @error('residence') is-invalid @enderror" value="{{old('residence', $user ? $user->residence:'')}}" placeholder="Lieu de résidence ...">
                                    @error('residence')
                                        <span class="form-bar text-danger" role="alert">
                                            {{$message}}
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label text-right" for="sexeUser">Situation matrimoniale<span class="text-danger">*</span> :</label>
                                <div class="col-sm-10" title="Situation matrimoniale">
                                    <span class="mr-3">
                                        <input type="radio" name="matrimonialUser" id="celibataire" value="célibataire" {{$user ? ($user->matrimoniale == 'célibataire' ? 'checked':null):null}}>
                                        <label for="celibataire" class="mx-1 form-control-variant">Célibataire</label>
                                    </span>
                                    <span class="mx-3">
                                        <input type="radio" name="matrimonialUser" id="marie" value="marié" {{$user ? ($user->matrimoniale == 'marié' ? 'checked':null):'checked'}}>
                                        <label for="marie" class="mx-1 form-control-variant">Marié(e)</label>
                                    </span> <br>
                                    @error('matrimonialUser')
                                    <span class="form-bar text-danger" role="alert">
                                        {{$message}}
                                    </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group row" id="typeDivEnseig" style="display: none">
                                <label class="col-sm-2 col-form-label text-right" for="typeEnseig">Type d'enseignement<span class="text-danger">*</span> :</label>
                                <div class="col-sm-10">
                                    <select name="type_id" id="typeEnseig" class="form-control @error('typeEnseig') is-invalid @enderror">
                                        <option value="{{$user ? ($user->type_enseignement_id ?? null):''}}" class="option1">
                                            {{$user ? ucfirst($user->typeEnseignement->type_enseignement ?? 'Choise one option'):'Choise one option'}}
                                        </option>
                                    </select>
                                    @error('typeEnseig')
                                    <span class="form-bar text-danger" role="alert">
                                        {{$message}}
                                    </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group row" id="divLevel" style="display: none">
                                <label class="col-sm-2 col-form-label text-right" for="levelUser">Niveau concerné<span class="text-danger">*</span> :</label>
                                <div class="col-sm-10">
                                    <select name="level_id" id="levelUser" class="form-control @error('levelUser') is-invalid @enderror">
                                        <option value="{{$user ? ($user->level_id ?? null):''}}" class="selected">{{$user ? ucfirst($user->level->level ?? 'Choise one option'):'Choise one option'}}</option>
                                    </select>
                                    @error('levelUser')
                                    <span class="form-bar text-danger" role="alert">
                                        {{$message}}
                                    </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label text-right" for="img">Photo d'utilisateur :</label>
                                <div class="col-sm-10">
                                    <input type="file" name="img" id="img" class="form-control">
                                    @error('img')
                                        <span class="form-bar text-danger" role="alert">
                                            {{$message}}
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            @if ($user)
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label" for="img"></label>
                                <div class="col-sm-10">
                                    <input type="checkbox" name="status" id="status" {{$user->status ? 'checked':''}}>
                                    <label for="status" class="mx-1 form-control-variant">{{$user->status ? 'Actif':'Inactif'}}</label>
                                </div>
                            </div>
                            @endif
                            <hr class="text-center" style="margin-top: 30px">
                            <div class="text-center">
                                <button type="submit" class="btn btn-inverse btn-outline-inverse py-2"> <i class="fas fa-check-circle"></i> Valider les informations</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal Import User -->
@endsection
@section('script')
<script src="{{asset('assets/js/pcoded.min.js')}}"></script>
<script src="{{asset('assets/js/vartical-layout.min.js')}}"></script>
<script src="{{asset('assets/js/jquery.mCustomScrollbar.concat.min.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function(){

        $('#profilUser').on('change', function() {
            $val = $(this).val(); $('.typeEnseig').remove();
            $('#divLevel').slideUp();
            if($.inArray($val, ['5', '7']) !== -1){getTypeEnseignement($val);}
            else{$('#typeDivEnseig').slideUp();}
        });


        $('#typeEnseig').on('change', function() {
            if($('#profilUser').val() == 5){
                $('.level').remove();
                getLevel($(this).val());
            }
        });


        $('#numUser').on('keypress', function(e) {
            var charCode = e.which ? e.which : e.keyCode;
            if (charCode < 48 || charCode > 57) {
                e.preventDefault(); // Empêche la saisie si ce n'est pas un chiffre
            }
        });


        // GET FUNCTIONS
        function getLevel($val){
            $.ajax({
                url: '{{ route('user.ajax') }}',
                method: 'GET',
                data: {
                    val:  $val,
                },
                success: function(data){
                    $('#divLevel').slideDown();
                    $i = 0;
                    while($i < data.length){
                        $('#levelUser').append('<option value="'+data[$i].id+'" class="level">'+capitalizeFirstLetter(data[$i].level)+'</option>');
                        $i++;
                    } 
                }
            });
        }

        function getTypeEnseignement($val){
            $.ajax({
                url: '{{ route('user.searchAjax') }}',
                method: 'GET',
                data: {
                    val: $val,
                },
                success: function(data){
                    if(data['type']){
                        $('#typeDivEnseig').slideDown();
                        $i = 0; 
                        while($i < data['type'].length){
                            $('#typeEnseig').append('<option value="'+data['type'][$i].id+'" class="typeEnseig">'+capitalizeFirstLetter(data['type'][$i].libelle)+'</option>');
                            $i++;
                        }
                    }
                }
            });
        }

        function capitalizeFirstLetter(str) {
            if (!str) return str;
            return str.charAt(0).toUpperCase() + str.slice(1);
        }
    })
</script>
@endsection