@extends($layout)

@section('content')
<form method="POST" action="{{ route('user_create') }}"  enctype="multipart/form-data">

    <div class="row">
        <div class="col s10">
            <div class="container" style="padding-right: 5px; padding-left: 5px;">
                <div class="section">

                        @csrf
                        <div class="card">
                            <div class="card-panel">
                                <div class="row">

                                    <div class="col s12 m12">
                                        <div class="row">
                                            <div class="col s4 input-field">
                                                <input id="first_name" name="first_name" type="text"
                                                    value="{{ old('first_name') }}">

                                                <label for="first_name">Prénom</label>
                                                @error('first_name')
                                                    <span class="helper-text materialize-red-text">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="col s4 input-field">
                                                <input id="name" value="{{ old('name') }}" name="name" type="text">
                                                <label for="name">Nom </label>
                                                @error('name')
                                                    <span class="helper-text materialize-red-text">{{ $message }}</span>
                                                @enderror
                                            </div>

                                            <div class="col s4 input-field">
                                                <select style="width: 100%;" name="role" id="role"
                                                    class="select2 browser-default">
                                                    @foreach ($roles as $role)
                                                        <option class="option"
                                                            {{ $role->id == old('role') ? 'selected' : '' }}
                                                            value="{{ $role->id }}"> {{ $role->label }}</option>
                                                    @endforeach
                                                </select>
                                                <label>Role</label>
                                                @error('role')
                                                    <span class="helper-text materialize-red-text">{{ $message }}</span>
                                                @enderror
                                            </div>

                                        </div>
                                    </div>

                                    

                                    <div class="col s12 m12">
                                        <div class="row">

                                        <div class="col s4 input-field">
                                                <input id="login" name="login" value="{{ old('login') }}"
                                                    autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"
                                                    type="text">
                                                <label for="login">Login </label>
                                                @error('login')
                                                    <span class="helper-text materialize-red-text">{{ $message }}</span>
                                                @enderror
                                            </div>


                                            <div class="col s4 input-field">
                                                <input id="password" name="password" autocomplete="off" type="password">
                                                <label for="password">Mot de passe </label>
                                                @error('password')
                                                    <span class="helper-text materialize-red-text">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="col s4 input-field">
                                                <input id="password_confirmation" name="password_confirmation"
                                                    type="password" class="validate">
                                                <label for="password_confirmation"> Confirmation mot de passe</label>
                                                @error('password_confirmation')
                                                    <span class="helper-text materialize-red-text">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>



                                    <div class="col s12 input-field" style="height:auto">
                                    <select multiple="multiple" size="10" name="fonctionnalites_ajoutees[]" class="listbox">
                                        @foreach ($fonctionnalites as $fonctionnalite)
                                        <option
                                            {{ in_array($fonctionnalite->id, old('fonctionnalites_ajoutees', [])  ) ? "selected" : '' }}
                                            value="{{ $fonctionnalite->id }}">{{ $fonctionnalite->name }}
                                        </option>
                                        @endforeach
                                    </select>
                                    <label for="label" style="font-size: 1rem;"> Liste des fonctionnalités à ajouter au rôle :
                                    </label>
                                </div>


                                <div class="col s12 input-field" style="height:auto">
                                    <select multiple="multiple" size="10" name="fonctionnalites_retirees[]" class="listbox">
                                        @foreach ($fonctionnalites as $fonctionnalite)
                                        <option

                                        {{ in_array($fonctionnalite->id, old('fonctionnalites_retirees', [])  ) ? "selected" : '' }}
                                            value="{{ $fonctionnalite->id }}">{{ $fonctionnalite->name }}

                                           
                                        </option>
                                        @endforeach
                                    </select>
                                    <label for="label" style="font-size: 1rem;"> Liste des fonctionnalités à retirer du rôle :
                                    </label>
                                </div>






                                </div>
                                <div class="row">
                                    <div class="col s12 m12">
                                        <div class="col s12 display-flex justify-content-end mt-3">


                                            <a onclick="load()" href="{{ route('user_list') }}"><button type="button"
                                                    class="btn btn-light">Retour </button></a>
                                            <button onclick="load()" type="submit" class="btn indigo" style="margin-left: 1rem;">
                                                Enregistrer</button>

                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                </div>
            </div>
           
        </div>
    
    <div class="col s2" style="padding:0px; ">
                            <div class="container" style="padding-left: 0px;">
                                <div class="section">
                                    <div class="card">
                                        <div class="card-panel">
                                            <div class="row">
                                                    <div class="col s12 m12">
                                                        <div class="row">
                                                            </div>
                                                            <img width="90%" src="{{\App\Models\Util::getphoto(null, null)}}" style="width: 70%; margin: 0% 16%; height: 120px; ">
                                                        
                                                        
                                                            <div class="col s12 input-field" style="margin: 0px; padding: 0px;">
                                                                <div class="file-field input-field" style="width: 100%; float: left;">
                                                                    <div class="btn">
                                                                        <span>Photo</span>
                                                                        <input name="file" type="file">
                                                                    </div>
                                                                <div class="file-path-wrapper">
                                                                    <input class="file-path" type="text">
                                                                </div>
                                                            </div>
                                                        
                                                        
                                                        </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                            </div>
                        </div>


</div></div>
</form>
@stop

@section('js')
<link rel="stylesheet" type="text/css" href="/assets/vendors/duallistbox/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/assets/vendors/duallistbox/bootstrap-duallistbox.css">
<script src="/assets/vendors/duallistbox/jquery.bootstrap-duallistbox.js"></script>

<style>
.select-dropdown {
    display: none !important;
}

.info {
    display: none !important;
}

.info-container {
    display: none !important;
}
</style>
<script>
$(document).ready(function() {
    $('.listbox').bootstrapDualListbox();
});
</script>
@stop