{% extends 'base.html.twig' %}
{% block title %}DIGIStack - Nouvel utilisateur{% endblock %}
{% block body %}
<script>
    document.addEventListener('DOMContentLoaded', e => {
        $('#input-skills').autocomplete()
    }, false);
</script>
<script>
    $(document).ready(function () {
        $.ajax({
            url: '/stacks/ajax-list/',
            method: "get",
            dataType: "json",
            data: {},
            success: {

            }
            }).done(function (response) {
                var data = response.data;

                console.log('data = ' + data);

                for (var index = 0; index <= data.length-1; index++) {
                    var stack = data[index].stackLabel;
                    console.log("stack => " + data[index].stackLabel);
                    $('#list-skills').append('<option value="' + stack + '">' + stack + '</option>');
                }

            }).fail(function (response) {
                alert("Une erreur est survenue à l'insertion du tag. Veuillez réessayer plus tard.");
            });


        $('#user_skills').select2({
            placeholder: 'Associer des compétences',
            allowClear: true,
            ajax: true,
            multiple: true,
            tags: true,
            ajax: {
                url: "/stacks/ajax-list",
                cache: true
            },
            tokenSeparators: [';']
        });

        /*$('#user_skills').on("select2:select", function(e) {
            //var tag = $('#ticket_tags :selected +1').text();
            //var tag = $('#ticket_tags :selected').text();
            var data = e.params.data;
            var stack = data['text'];
            console.log("Stack à insérer : " + stack);

            var idUser = '{#{ userID }#}';
            console.log('userID = ' + idUser);

            $.ajax({
                url: '/stack/ajax-add/',
                method: "get",
                dataType: "json",
                data: {
                    tagName: tag,
                    idTicket: idTicket
                }
            }).done(function (response) {
                console.log('Le tag ' + tag + ' a bien été inséré dans la base.');
            }).fail(function (response) {
                alert("Une erreur est survenue à l'insertion du tag. Veuillez réessayer plus tard.");
            });
            
        });*/
    })
</script>
<!--begin::Main-->
<div class="app-main flex-column flex-row-fluid " id="kt_app_main">
	<!--begin::Content wrapper-->
	<div class="d-flex flex-column flex-column-fluid">       
		<!--begin::Toolbar-->
		<div id="kt_app_toolbar" class="app-toolbar  py-3 py-lg-6 ">
            <!--begin::Toolbar container-->
        	<div id="kt_app_toolbar_container" class="app-container  container-xxl d-flex flex-stack ">
				<!--begin::Page title-->
				<div class="page-title d-flex flex-column justify-content-center flex-wrap me-3 ">
					<!--begin::Title-->
					<h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Création d'un utilisateur</h1>
					<!--end::Title-->
					<!--begin::Breadcrumb-->
					<ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
							<a href="/" class="text-muted text-hover-primary">
                                Accueil                            
							</a>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
						<li class="breadcrumb-item">
							<span class="bullet bg-gray-500 w-5px h-2px"></span>
						</li>
                    	<!--end::Item--> 
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
                            <a href="/users" class="text-muted text-hover-primary">
                                Utilisateurs                            
							</a>                              
						</li>
                        <!--end::Item-->  
                        <!--begin::Item-->
						<li class="breadcrumb-item">
							<span class="bullet bg-gray-500 w-5px h-2px"></span>
						</li>
                    	<!--end::Item--> 
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
                            Création d'un utilisateur
						</li>
                        <!--end::Item-->            
                    </ul>
        			<!--end::Breadcrumb-->
    			</div>
				<!--end::Page title-->
				<!--begin::Actions-->
				<!--div class="d-flex align-items-center gap-2 gap-lg-3">
            		<a href="/uploads/projects/digistack-logo-6599e5052c381.png#" class="btn btn-sm fw-bold btn-secondary" data-bs-toggle="modal" data-bs-target="#kt_modal_create_app">Rollover</a>
					<a href="/user/add" class="btn btn-sm fw-bold btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_new_target">
						Ajouter un utilisateur
					</a>
				</div-->
			<!--end::Actions-->
			</div>
		<!--end::Toolbar container-->
		</div>
		<!--end::Toolbar-->                                        
                    
		<!--begin::Content-->
		<div id="kt_app_content" class="app-content  flex-column-fluid ">
			<!--begin::Content container-->
			<div id="kt_app_content_container" class="app-container  container-xxl ">
                <div class="digi-card card-flush">
                    <div class="card-header align-items-center py-5 gap-2 gap-md-1">    
                    </div>
                    <div class="card-body pt-0">
                        
                            {{ form_start(userForm) }}
                                <!-- Photo de l'utilisateur -->
                                <div class="mb-3">
                                    <label for="formFile" class="form-label">Photo de l'utilisateur</label>
                                    <input class="form-control" type="file" name="{{ field_name(userForm.userPhoto) }}" id="formFile">
                                    <div id="userInfoHelp" class="form-text">Sélectionnez une photo de format carré pour un meilleur affichage</div>
                                </div>
                                
                                <!-- Nom de l'utilisateur -->
                                <div class="mb-3">
                                    <label for="user_userName" class="form-label">Nom</label>
                                    <input type="text" name="{{ field_name(userForm.nom) }}" class="form-control" id="user_userName" placeholder="Nom de l'utilisateur">
                                </div>

                                <!-- Prénom de l'utilisateur -->
                                <div class="mb-3">
                                    <label for="user_userPrenom" class="form-label">Prénom</label>
                                    <input type="text" name="{{ field_name(userForm.prenom) }}" class="form-control" id="user_userPrenom" placeholder="Prénom de l'utilisateur">
                                </div>

                                <!-- Nom affiché -->
                                <div class="mb-3">
                                    <label for="user_userDisplayName" class="form-label">Nom affiché</label>
                                    <input type="text" name="{{ field_name(userForm.displayName) }}" class="form-control" id="user_userDisplayName" placeholder="Nom affiché dans l'application">
                                </div>

                                <!-- Mail de l'utilisateur -->
                                <div class="mb-3">
                                    <label for="user_userEmail" class="form-label">Mail</label>
                                    <input type="text" name="{{ field_name(userForm.email) }}" class="form-control" id="user_userEmail" placeholder="Mail de l'utilisateur">
                                </div> 

                                <!-- Métier -->
                                <div class="mb-3 choice-object">
                                    <label for="user_userJob" class="form-label">Métier</label>
                                    <select name="{{ field_name(userForm.job) }}" class="form-control" id="user_userJob">
                                        {% for label, value in field_choices(userForm.job) %}
                                            {% set selected = '' %}
                                                {% if label == '' %}
                                                    {% set selected = 'selected' %}
                                                {% endif %}
                                                <option value="{{ value }}" {{ selected }}>{{ label }}</option>
                                        {% endfor %}
                                    </select>
                                </div>

                                <!-- Téléphone de l'utilisateur -->
                                <div class="mb-3">
                                    <label for="user_userPhone" class="form-label">Téléphone</label>
                                    <input type="text" name="{{ field_name(userForm.telephone) }}" class="form-control" id="user_userPhone" placeholder="Téléphone de l'utilisateur">
                                </div> 

                                <!-- TJM de l'utilisateur -->
                                <div class="mb-3">
                                    <label for="user_userTJM" class="form-label">TJM (Taux Journalier Moyen)</label>
                                    <input type="text" name="{{ field_name(userForm.TJM) }}" class="form-control" id="user_userTJM" placeholder="TJM de l'utilisateur">
                                </div> 

                                <!-- Commentaires -->
                                <div class="mb-3">
                                    <label for="user_userComments" class="form-label">Commentaires</label>
                                    <textarea id="user_userComments" class="form-control" name="{{ field_name(userForm.comments) }}" placeholder="Commentaires" rows="2" cols="33"></textarea>
                                    <div id="userInfoHelp" class="form-text">Quelques commentaires sur l'utilisateur (visible uniquement aux managers)</div>
                                </div>

                                <!-- Compétences de l'utilisateur -->
                                <div class="mb-3">
                                    <label for="input-datalist">Compétences, hard skills, soft skills</label>
                                    <input type="text" class="form-control" placeholder="Compétences, hard skills, soft skills" list="list-timezone" id="input-skills">
                                    <datalist id="list-skills">
                                        <option></option>
                                    </datalist>
                                </div>

                                <button type="submit" class="btn btn-glossy">Enregistrer</button>

                                {{ form_rest(userForm) }}
                        {{ form_end(userForm) }}
                    </div>
                </div>
			</div>
		</div>
	</div>
</div>
<!--end::Row-->  
{% endblock %}