{% extends "base.html.twig" %}
{% block title %}
	Reglage
{% endblock %}

{% block stylesheets %}
	<link rel="stylesheet" href="{{ asset('css/dashboard.css')}}">
{% endblock %}
{% block body %}
    
<section
	id="contents" class="container-fluid">
	<!-- entete content -->
	<div id="top-content">
        <div id="entete_fixed">
            <ul>
                <li>
                    <a href="#" id="btn_drop_side_menu">
                        <i data-show="show-side-navigation1" class="fa fa-bars show-side-btn"></i>
                    </a>
                </li>
                <li
								{% if hotel == "royal_beach" %}
									class="logo_active"
								{% endif %}
							>
								<a href="{{ path('royal_beach', {'current_page' : current_page }) }}">
									<div>
										<img src="{{asset('images/hazo1.png')}}" alt="logo1">
									</div>
								</a>
							</li>
							<li
								{% if hotel == "calypso" %}
									class="logo_active"
								{% endif %}
							>
								<a href="{{ path('calypso', {'current_page' : current_page }) }}">
									<div>
										<img src="{{ asset('images/hazo2.png') }}" alt="logo2">
									</div>
								</a>
							</li>
							<li 
								{% if hotel == "baobab_tree" %}
									class="logo_active"
								{% endif %}
							>
								<a href="{{ path('baobab_tree', {'current_page' : current_page }) }}">
									<div>
										<img src="{{ asset('images/hazo3.png') }}" alt="logo3">
									</div>
								</a>
							</li>
							<li
								{% if hotel == "vanila_hotel" %}
									class="logo_active"
								{% endif %}
							>
								<a href="{{ path('vanila_hotel', {'current_page' : current_page }) }}">
									<div>
										<img src="{{ asset('images/hazo4.png') }}" alt="logo4">
									</div>
								</a>
							</li>
                <li id="log_out_entete">
                    <div>
                         <a href="{{ path('app_logout') }}">
                            <span aria-hidden="true" class="fa fa-power-off fa-2x"></span>
                        </a>
                    </div>
                </li>
            </ul>
        </div>

	</div>
	<!-- / entete content -->

	<!-- contenue nouveau client -->
	<div id="settings_content">
		<div class="col-lg-12 col-md-12 col-sm-12 col-sm-12 col-xs-12">
			<section class="section_part" id="section_part_top">
				<div class="sous_titre">
					<h3>ESPACE DE TRAVAIL</h3>
				</div>
				<div class="sous_titre_2">
					<h4>Gestion des équipes et espace de travail</h4>
				</div>
			</section>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
			<div class="inside_content">
				<div class="sous_titre_2">
					<h4>Mon profil</h4>
				</div>
				<form action="" id="form-owner" enctype="multipart/form-data">
					<div class="form-group pdp_profil">
						<div class="pdp_image" style="/*background-image: url(images/directeur.jpg);*/">
							<input type="file" name="fichier" id="fichier">
							<span class="icone_upload fa fa-plus"></span>
						</div>
						<div class="pdp_profil_n_p">
							<p class="p_nom">Mon nom</p>
							<p class="p_prenom">Mon prénom</p>
							<p class="p_prenom">Mon identifiant</p>
						</div>
					</div>
					<div class="form-group">
						<span class="span__label"></span>
						<input type="text" name="" data-placeholder="Adresse mail" class="form-control" id="username" placeholder="Adresse mail" value="Unadresse@gmail.com">
					</div>
					<div class="form-group">
						<span class="span__label"></span>
						<input type="password" name="" data-placeholder="Mot de passe" class="form-control" id="passsword" placeholder="Mot de passe" value="un mot de passe">
						<a href="#" class="show_password">
							<span class="fa fa-eye"></span>
						</a>
						<a href="#" class="edit_pass">
							<span class="fa fa-edit"></span>
						</a>
					</div>
					<div class="infos_pass form-group">
						<span class="span__label"></span>
						<input type="password" name="" data-placeholder="Nouveau Mot de passe" class="form-control" id="n_passsword" placeholder="Nouveau Mot de passe">
					</div>
					<div class="infos_pass form-group">
						<span class="span__label"></span>
						<input type="password" name="" data-placeholder="Confirmer le mot de passe" class="form-control" id="c_passsword" placeholder="Confirmer le mot de passe">
					</div>
					<div class="form-group">
						<button type="submit" class="form-control btn btn-warning" id="btn_register">Enregistrer</button>
					</div>
				</form>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"
		
		{% if is_granted('ROLE_ADMIN') %}
					style =" display:block; "
		{% else %}
			style = "display : none;"
				{% endif %}
		>
			<div class="equipe_content inside_content">
				<div class="sous_titre_2">
					<h4>Liste des équipes</h4>
				</div>
				<ul id="ul_liste_equipe">
					
				</ul>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"

			{% if is_granted('ROLE_ADMIN') %}
				style =" display:block; "
			{% else %}
				style = "display : none;"
			{% endif %}
		
		>
			<div class="inside_content">
				<div class="sous_titre_2">
					<h4>Gestion des équipes</h4>
				</div>
				<form action="" id="form_register_user">
					<div class="form-group">
						<label for="choix_role">Type de l'administrateur :</label>
						<select name="" id="choix_role" class="form-control">
							<option value="administrateur">Administrateur</option>
							{# <option selected = "selected" value="editeur">Editeur</option> #}
							<option value="editeur">Editeur</option>
						</select>
					</div>
					<div class="form-group nom_hotel">
						<label for="choix_hotel">Nom de l'hotel</label>
						<select name="" id="choix_hotel" class="form-control">
							<option value="tous">Tous</option>
							<option value="Royal Beach">Royal Beach</option>
							<option value="Calypso">Calypso</option>
							<option value="Baobab Tree">Baobab Tree</option>
							<option value="Vanila Hotel">Vanila Hotel</option>
						</select>
					</div>

					<div class="form-group">
						<span class="span__label"></span>
						<input type="text" name="" data-placeholder="Nom" class="form-control" id="nom_pers" placeholder="Nom">
					</div>
					<div class="form-group">
						<span class="span__label"></span>
						<input type="text" name="" data-placeholder="Prénom" class="form-control" id="prenom_pers" placeholder="Prénom">
					</div>
					<div class="form-group">
						<span class="span__label"></span>
						<input type="text" name="" data-placeholder="Adresse mail" class="form-control" id="username_pers" placeholder="Adresse mail" unadresse@gmail.com>
					</div>
					<div class=" form-group">
						<span class="span__label"></span>
						<input type="text" name="" data-placeholder="Son mot de passe" class="form-control" id="n_passsword_pers" placeholder="Son mot de passe">
					</div>
					<div class="infos">
						<p>lorem ipsum hhh kkk</p>
					</div>
					<div class="form-group">
						<button type="submit" class="form-control btn btn-warning" id="admin_register"><span>Enregistrer</span></button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- / contenue nouveau client -->

	<!-- Modal suppr  -->
	<div class="modal fade" id="modal_form_confirme_pers" tabindex="-1" role="dialog"  aria-hidden="true">
		<div class="modal-dialog opacity-animate4">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h3 class="modal-title" style="text-align: center;">Voulez-vous vraiment retirer cette personne ?</h3>
				</div>
				<div class="modal-body">
					<div class="footer_modal">
					
						<a href="#" class="btn btn-warning retirer" data-id = "" data-dismiss="modal" id="suppr_user_model">Supprimer</a>
						<a href ="#" class="btn btn-warning annuler" data-dismiss="modal">Annuler</a>
					</div>
				</div>

			</div>
		</div>
	</div>
	<!-- fin Modal suppr  -->

	<!-- Modal modif  -->
	<div class="modal fade" id="modal_form_modif_admin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog opacity-animate4">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h3 class="modal-title" style="text-align: center;">Modification</h3>
				</div>
				<div class="modal-body" id = "modal_modif_user">
					
				</div>

			</div>
		</div>
	</div>
	<!-- fin Modal modif  -->
</section>


{% endblock %}

{% block javascripts %}
<script>

	$(document).ready(function () { /* animation des input type text */

			$("input[placeholder]").on({
				focus: function () {
					$(this).parent().children(".span__label").text($(this).attr('placeholder'));
					$(this).attr('placeholder', ' ');
					$(this).css("border-color", "#d29e00");
				},
				blur: function () {
					var t = $(this).attr('data-placeholder');
					$(this).attr('placeholder', t);
					$(this).parent().children(".span__label").text("");
					$(this).css("border-color", "#e2e3e6");
				}
			})

			/* / annimation input */

			/* animation password show hide */

			$(".show_password").click(function (e) {
				e.preventDefault();
				if ($(this).children('span').hasClass('fa-eye')) {
					$(this).children('span').removeClass('fa-eye');
					$(this).children('span').addClass('fa-eye-slash');
					$(this).prev().attr("type", "text");
				} 
				else if ($(this).children('span').hasClass('fa-eye-slash')) {
					$(this).children('span').removeClass('fa-eye-slash');
					$(this).children('span').addClass('fa-eye');
					$(this).prev().attr("type", "password");
				}
			})

			$(".edit_pass").click(function (e) {
					e.preventDefault();
					$(".infos_pass").toggle();
			})

			/*  / animation password show hide */

			/* ajax pour l'affichage de tous les users */

			{% if is_granted('ROLE_ADMIN') %} 
				print_all_users();
			{% endif %}
			
			function print_all_users(){
				$.ajax({
					url : "/admin/print_all_users",
					type : "POST",
					success : function(response){
						if(response){
							$('#ul_liste_equipe').html(response);
						}
					},
					error : function(error){
						alert('erreur dans le code server print_all_users');
					}
				})
			}
			


			/* / fin affichage de tous les users */

			// ajax adminRegister
			// routeName = admin.register

		$('#admin_register').on('click', function(e){
				e.preventDefault();
				var role = $('#choix_role').val();
				var hotel = $('#choix_hotel').val();
				var nom = $("#nom_pers").val();
				var prenom = $("#prenom_pers").val();
				var email = $("#username_pers").val();
				var password = $('#n_passsword_pers').val();
				// par défaut son username est la prem partie de son nom
				var f = nom.split(" ");
				var username = f[0];
				var data = {
					"role":role,
					"hotel":hotel,
					"nom":nom,
					"prenom":prenom,
					"password":password,
					"email": email,
					"username":username
				}
			
				$.ajax({
					url : "{{ path('admin.register') }}",
					type : "POST",
					data : data,
					beforeSend : function(){
						$('#admin_register').html('<span>Patienter...</span>');
					},
					success : function(response){
						if(response == "ok"){
							print_all_users();
						}
						else{
							$(".infos p").text(response);
							$(".infos").fadeIn();
							setTimeout(() => {
								$(".infos").fadeOut();
							}, 2000);
						}
					},
					error : function(er){

						alert('erreur ajax');
					},
					complete : function(){
						$('#admin_register').html('<span>Enregistrer</span>');
					}
				})

		})
		
		// ajax suuprimer user 

		$(document).on('click', '.delete_user', function(ev){
			ev.preventDefault();
			var id = $(this).attr('data-id');
			// alert(id);
			$('#suppr_user_model').attr('data-id', id);
		})
		
		$('#suppr_user_model').click(function(ev){
			ev.preventDefault();
			var id = $(this).attr('data-id');
		
			$.ajax({
				url : "/security/delete_user/"+id,
				type : "POST",
				success : function(response){
					if(response == "ok"){
						print_all_users();
					}
				},
				error : function(error){
					alert('erreur au serveur delete user');
				}
			})
		})

		/* debut modif  */

		// pick up user for modif
		$(document).on('click', '.edit_user', function(ev){
			ev.preventDefault();
			var id = $(this).attr('data-id');
			 //alert(id);
			 $.ajax({
				 url : "/admin/pick_up/"+id,
				 type : "POST",
				 success : function(response){
					$('#modal_modif_user').html(response);
					$('#modal_form_modif_admin').modal('show');
				 },
				 error : function(error){
					 alert('erreur server pick up user for modif');
				 }
			 })
		})
		// modif

		$(document).on('click', '#btn_modif_admin', function(ev){
			ev.preventDefault();
			//alert('alefa');
			var id = $(this).attr('data-id');
			$.ajax({
				url : "/admin/edit_user",
				data : {
					'choix_role' : $('#modal_choix_role').val(),
					'choix_hotel' : $('#modal_choix_hotel').val(),
					'nom_pers' : $('#modal_nom_pers').val(),
					'prenom_pers' : $('#modal_prenom_pers').val(),
					'username_pers' : $('#modal_username_pers').val(),
					'user_id' : id,
				}, 
				success : function(response){
					if(response == "ok"){
						print_all_users();
						$('#modal_form_modif_admin').modal('hide');
					}
				},
				error : function(error){
					alert('erreur server au niveau de modal modif user');
				}

			})
		})



		/* fin modif  */

		/* pdp */

		$('.pdp_image input').on('change', function(){
			// alefa le sary 
			var id_user = "{{ app.user.id }}";
			var val = $(this).val();
			var form = $('form')[0] ;
			var data = new FormData(form) ;
			var files = $('#fichier')[0].files[0] ;
			data.append("file",files) ;
			//alert(val);
			$.ajax({
				url : '/profile/add_pdp/'+ id_user,
				type : 'POST',
				data: data,
				contentType: false,
				cache: false,
				processData:false,
				success : function(response){
					alert(response);
				},
				error: function(){
					alert('erreur pendant le telechargement de pdp');
				}
			})
		})

	



	})
</script>


{% endblock %}