{% extends "admin/base.html" %}
{% load static %}

{% block title %} Maketteur | HubStation {% endblock %}
{% block subtitle %}
Edition de Classes 
{% endblock %}

{% block extrastyle %}
    <link rel="stylesheet" href="{% static 'alertify/alertify.min.css' %}">
    <script src="{% static 'alertify/alertify.min.js' %}"></script>
{% endblock %}


{% block content_title %}
<div class="d-flex">
	<div>
		<img style="width:60px;height:60px;border-radius:100%;" src="/static/global/maketteur.jpeg">
		<span class="text-primary"> Maketteur </span>
	</div>
</div>
{% endblock %}

{% block sidebar %}
    {{block.super}}
{% endblock %}

{% block content %}



<div>
	<div class="h3 py-3"> Ajouter un Modele </div>
	<div> <a href="/maketteur/"><i class="fas fa-angle-left"></i> Retour à la liste des Modèles</a> </div>
	<div class="py-2">
		<label> Application </label>
		<select class="form-control">
			{% for app in list_apps %}
			<option> {{app}} </option>
			{% endfor %}
		</select>
	</div>
</div>


<form onsubmit="return makemakette();" method="POST" style="width:100vw;" action="/maketteur/new_class/">
{% csrf_token %}
<div class="col-12 d-flex flex-wrap">
	
	<!--
	<div class="d-flex">
		<div  class="btn btn-light"> <span> Afficher par defaut : </span> <b> Champs 1 <i class="fas fa-angle-down"></i> </b> </div>
	</div>
	-->
</div>
<!--
<div>
	<div> Informations generales sur la Classe </div>
</div>
-->
<div class="d-flex flex-wrap py-1"  style="overflow:auto;width:100%;">

	<div class="col-12 col-lg-4 col-sm-6 p-2">
		<div class="card border">
			<div class="card-body">
				<div>
					<div class="py-2">
						<div>
							<div class="py-2">
								<div class="p-1 h6 text-center"> Nom du Modele </div>
								<div class="p-1">
									<input required name="modele_name" type="text" class="form-control">
								</div>
							</div>
						</div>
						<div>
							<div class="py-2">
								<div class="p-1 h6 text-center"> Type du Modele </div>
								<div class="p-1">
									<select name="modele_type" type="text" class="form-control">
										<option value="objet"> Classe </option>
										<option value="objet"> Interface </option>
									</select>
								</div>
							</div>
						</div>
					</div>
				</div>			
			</div>
		</div>
	</div>
	<div class="col-12 col-lg-4 col-sm-6 p-2">
		<div class="card border">
			<div class="card-body">
				<div>
					<div class="py-2">
						
						<div>
							<div class="py-2">
								<div class="p-1 h6 text-center"> Afficher par Defaut</div>
								<div class="p-1">
									<select name="modele_str_" type="text" class="form-control">
										<option value="objet"> Classe </option>
										<option value="objet"> Interface </option>
									</select>
								</div>
							</div>

							<div class="py-2">
								<div class="p-1 h6 text-center"> Icone </div>
								<div class="p-1">
									<select name="modele_ico_" type="text" class="form-control">
										<option value="objet"> Classe </option>
										<option value="objet"> Interface </option>
									</select>
								</div>
							</div>



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

	<div class="col-12 col-lg-4 col-sm-6 p-2">
		<div class="card border">
			<div class="card-body">
				<div>
					<div class="py-2">
						<div>
							<div class="py-2">
								<div class="p-1 h6 text-center"> Classer Par </div>
								<div class="p-1">
									<select name="modele_sort_" type="text" class="form-control">
										<option value="objet"> Croissant </option>
										<option value="objet"> Decroissant </option>
									</select>
								</div>
							</div>
						</div>
						<div>
							<div class="py-2">
								<div class="p-1 h6 text-center"> Ordre </div>
								<div class="p-1">
									<select name="modele_order_" type="text" class="form-control">
										<option value="objet"> Croissant </option>
										<option value="objet"> Decroissant </option>
									</select>
								</div>
							</div>
						</div>
					</div>
				</div>			
			</div>
		</div>
	</div>


</div>

<div> <span class="btn text-primary" onclick="addAttribute()"> <i class="fas fa-plus"></i> Ajouter un Attribut </span> </div>

<div style="overflow:auto;width:100%;" id="content_class" class="d-flex flex-wrap">
	<div class="col-12 col-lg-4 p-2 attr_div" id="attr_template">
		<div class="card">
			<div class="card-body">
				<div>
					<div class="text-secondary champs_nb"> <b>Champs 1</b> </div>
				</div>
				<div class="pt-2">
					<div class="py-2">
						<div> <label> Nom de l'Attribut </label> </div>
						<div> 
							<input required class="form-control champs_name">
						</div>
					</div>
					<div class="py-2">
						<div> <label> Type de l'Attribut </label> </div>
						<div> 
							<select onchange="actualizeAttrDiv(this)" class="form-control champs_type">
								<option class="option_value" value="0"> Chaine de Caracteres </option>
								<option class="option_value" value="1"> Texte </option>
								
								<option class="option_value" value="2"> Nombre </option>
								<option class="option_value" value="3"> Nombre Decimal </option>
								
								<option class="option_value" value="4"> Date </option>
								
								<option class="option_value" value="5"> Fichier </option>
								<option class="option_value" value="6"> Image </option>
								<option class="option_value" value="7"> Oui ou Non </option>
							</select>
						</div>
					</div>
					<div class="py-2">
						<div class="d-flex">
							<div> <input type="checkbox" checked> </div>		
							<div> <label> &nbsp;Champs pouvant etre vide </label> </div>
						</div>
					</div>
					<div id="special_fields" class="py-2">
						<!-- <div> <label> Proprietes de l'Attribut </label> </div> -->

						<!-- SP_CHaine de Caracters -->
						<div class="sp-block">
							<div>
								<div> <label class="text-secondary"> Nombre maximal de Caracteres </label> </div>
								<div> 
									<input class="form-control" min="1" value="128">
								</div>
							</div>							
						</div>

						<!-- SP_Texte -->
						<div class="sp-block">

						</div>

						<!-- SP_Nombre -->
						<div class="sp-block">
							<div>
								<div> <label class="text-secondary"> Valeur Maximale </label> </div>
								<div> 
									<input value="" class="form-control">
								</div>
							</div>
							<div class="my-1">
								<div> <label class="text-secondary"> Valeur Minimale </label> </div>
								<div> 
									<input value="" class="form-control">
								</div>
							</div>
						</div>

						<!-- SP_Nombre Decimal -->
						<div class="sp-block">
							<div>
								<div> <label class="text-secondary"> Nombres apres la virgule </label> </div>
								<div> 
									<input value="4" min="1" class="form-control">
								</div>
							</div>
							<div class="my-1">
								<div> <label class="text-secondary"> Chiffres maximum </label> </div>
								<div> 
									<input value="18" max="50" class="form-control">
								</div>
							</div>
						</div>

						<!-- SP_Date -->
						<div class="sp-block">
							<div>
								<div class="d-flex">
									<div> <input type="checkbox"> </div>		
									<div> <label class="text-secondary"> &nbsp;Date Actuelle </label> </div>
								</div>
							</div>	
						</div>

						<!-- SP_Fichier -->
						<div class="sp-block">

						</div>

						<!-- SP_Image -->
						<div class="sp-block">

						</div>


						<!-- Oui_Non -->
						<div class="sp-block">

						</div>

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



<div class="col-12 d-flex flex-wrap">
	<div> <button type='submit' class="btn btn-success"> Enregistrer le Modele </button></div>
</div>

<div>
	<input type="hidden" name="modele_classes" id="modele_classes">
</div>

<script>

var champs_nb = 1;
var spBlock = document.getElementsByClassName('sp-block');
for (var i=0;i<spBlock.length;i++){
	spBlock[i].style.display = "none";
}

function addAttribute(){
	var attr_template = document.getElementById("attr_template");
	let tmp = document.createElement("div");
	tmp.className = attr_template.className
	tmp.innerHTML = attr_template.innerHTML;
	document.getElementById("content_class").appendChild(tmp);
	spBlock = tmp.getElementsByClassName('sp-block');
	for (var i=0;i<spBlock.length;i++){
		spBlock[i].style.display = "none";
	}
	champs_nb += 1;
	tmp.getElementsByClassName("champs_nb")[0].textContent = " Champs "+champs_nb
}

function actualizeAttrDiv(elt){
	parent = elt.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
	opt_value = parseInt(elt.value);
	spBlock = parent.getElementsByClassName('sp-block');
	for (var i=0;i<spBlock.length;i++){
		spBlock[i].style.display = "none";
	}
	spBlock[opt_value].style.display = "block"
	//if ( opt_value ){}
}

function makemakette(){
// nom_champs !:! type_champs !:! pouvant_etre_vide !:! propriete1 !#! propriete i !$!
champs_nb = document.getElementsByClassName("attr_div");
modele_classes = document.getElementById("modele_classes");
tmp = "";

for (var i = champs_nb.length - 1; i >= 0; i--) {
	champs_name = champs_nb[i].getElementsByClassName("champs_name")[0];
	champs_type = champs_nb[i].getElementsByClassName("champs_type")[0];
	champs_attrs = ""
	spBlock = champs_nb[i].getElementsByClassName('sp-block');
	for (var j = spBlock.length - 1; j >= 0; j--) {
		if ( spBlock[j].style.display != "none" ){
			spBlock_tags = spBlock[j].getElementsByClassName("form-control")
			if (spBlock_tags[0] != null){
				champs_attrs += spBlock[j].getElementsByClassName("form-control")[0].value + "!#!";
			}
		}
	}
	tmp += champs_name.value + "!:!" + champs_type.value + "!:!" + "1" + "!:!" + champs_attrs + "!$!";
}

//alert(tmp);
modele_classes.value = tmp;
return ( confirm("Confirmer la Creation du Modele") );//alertify.confirm("Confirmer la Creation du Modele","",function(){return true;},function(){return false}) );
}

</script>


</form>
{% endblock %}


{% block script %}



{% endblock %}