{% extends './stocks.html' %}
{% load static %}

{% block style %}
<style type="text/css">
  select{
    border:none;
  }
</style>
{% endblock %}

{% block navbar_content %}
          <div class="row">
            <div class="px-2"> <a href="/stock/" class="badge text-primary2"><i class="material-icons">subdirectory_arrow_left</i> Retour</a></div>
          </div>
          {% endblock %}

{% block main_content %}
		<form method="POST" id='art_form' action="/stock/add/form/">
		{% csrf_token %}
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-8">
              <div class="card">
                <div class="card-header bg-primary2">
                  {% if product == None %}
                  <h4 class="card-title">Ajout d'un Produit  <span class='category-product text-primary'> </span> </h4>
                  {% else %}
                  <h4 class="card-title">Edition - {{product}}</h4>                  
                  {% endif %}
                </div>
                <div class="card-body">
                    <div class="row">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="bmd-label-floating">Nom du Produit</label>
                          <input name="name" required value="{{product.m_name}}" type="text" class="form-control">
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-6">
                        <div class="form-group">
                          <label class="bmd-label-floating">Prix ( FCFA )</label>
                          <input type="text" {% if product.m_price != None %} value="{{product.m_price}}" {% endif %} name="prix" class="form-control">

                        </div>
                      </div>
                      <div class="col-md-3">
                        <div class="form-group">
                          <label class="bmd-label-floating">Stock initial</label>
                          <input type="number" {% if product.m_qte != None %} value="{{product.m_qte}}" {% endif %} name="qte" class="form-control">
                        </div>
                      </div>
                      <div class="col-md-3">
                        <div class="form-group">
                          <label class="bmd-label-floating">Unite</label>
                          <input type="text" {% if product.m_unite != None %} value="{{product.m_unite}}" {% endif %} name="unite" class="form-control">
                        </div>
                      </div>
                    </div>
                    <input type="hidden" name="attributes" id='att_elt'>
                    <!--
                    <div class="row">
                      <div class="col-md-12">
                        <div class="">
                          <label class="">Adress</label>
                          <input type="file" >
                        </div>
                      </div>
                    </div>
                -->
                    <div class="row" id='descri_div'>

                    </div>
                    <input type="hidden" {% if product != None %} value="{{product.id}}" {% else %} value="0" {% endif %} name="edit_id">
                    <button type="submit" class="btn btn-success pull-right">Enregistrer</button>
                    <!-- <button type="submit" class="btn btn-success pull-right">Enregistrer et Ajouter un Nouveau Produit</button> -->
                    <div class="clearfix"></div>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card card-profile">
                <div class="card-body">
                  <h6 class="card-category text-gray">Sélectionner une Catégorie</h6>
                  <p>
                    <a class="badge badge-success p-2" href="#newTypePrdModal" data-toggle='modal'>Ajouter une Catégorie</a>
                  </p>
                  <p class="card-description">
                    <ul class="list-group" style="max-height: 400px;overflow-y: auto;">
                  	{% for t in types %}
                  	<li class="list-group-item m-0 p-0 text-left"><a href="javascript:;" data-id="{{t.id}}" data-specis="" class="btn btn-white ty_bt w-100">{{t}}</a></li>
                    {% empty %}
                    <li class="list-group-item m-0 p-0 text-center"><span href="javascript:;" data-specis="" class="  ">Aucune Categorie por le Moment</span></li>
                  	{% endfor %}
                  </ul>
                  </p>
                  <input type="hidden" name="typ" id='typ_cat'>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
 	</form>
            <!-- ========== Give a Like Modal ======= -->
            <div class="modal fade" id="newTypePrdModal"  role="dialog" >
                <div class="modal-dialog" role="document">
                     <div class="modal-content">
                      <div class="modal-header bg-white"><h4 class="modal-title"> Ajout d'un Type d'Article </h4>
                    <button type="button" class="text-danger close" data-dismiss="modal" aria-label="Close" id="giLoClose"><span aria-hidden="true">&times;</span></button>
                      </div>
                      <div id="connec-text" style="background:none;" class="modal-body">
                         <div style="padding-top:20px;display:flex;justify-content:center;">
                        <div class="input-group mb-3">
                          <form  action="#" method="POST">
                          <div id='form_saler' style="width:100%;">
                            <div style="width:100%; justify-content:center;" class="d-flex justify-content-center">
                              <div class="input-group-append">
                              	<span class="btn btn-primary2">Nom</span>
                                <input style="border-radius:0%;background:#fff;" id="name_typ" class="code_val btn text-secondary" type="text" required placeholder="Entrez le nom">
                              </div>
                            </div>
                          </div>
                          </form>
                          
                          <div style="max-height:400px;overflow-y: auto;display: none;" id='lines_content'>
                          	<div class="linefm pt-2 d-flex w-100 justify-content-between">
	                          		<div class="form-group">
			                          <label class="bmd-label-floating">Champs</label>
			                          <input type="text" class="linch form-control">
			                        </div>
			                        <div style="width:20px;"></div>
	                          		<div class="form-group" >
			                          <!-- <label class="bmd-label-floating">Type</label> --> 
			                          <select class="  form-control">
                                  <option value="text">Texte</option>
                                  <option value="number">Nombre</option>
                                  <!--
                                  <option value="file">Image</option>
                                  <option value="file">Fichier</option>
                                  <option value="select">Booléen</option>
                                  -->
                                </select>
			                        </div>
			                        <div style="width:20px;"></div>
	                          		<div class="form-group">
			                          <label class="bmd-label-floating">Unité </label>
			                          <input type="text" class="linch form-control">
			                        </div>
                          	</div>
                          </div>

                          <div style="width:100%;">
                            <div>
                              <small class="text-primary2"> Propriétés avancés </span>
                            </div>
                            <div class='add_prop' style="display:none;">
                                  <small style="cursor:pointer;" id="adder_line" class="adders_form badge text-success"><i class="fa fa-plus"></i> Ajouter une Ligne </small>
                            </div>
                          </div>
                          </div>
             
                         </div>
                      </div>
                      
                      <div class="log-description w-100 modal-footer d-block" style="text-align:center;">
                      <div style='text-align: center;'> <span id='enreg_trans' class="btn btn-success"> Enregistrer </span> </div>
                      </div>
                    </div>
                 </div>
              </div>
            </div>
            <!-- ========== Give a Like Modal ======= -->
{% endblock %}
{% block script %}
<script>
$(".ty_bt").click(function(){
	$(".ty_bt").removeClass("btn-primary2");
	$(".ty_bt").addClass("btn-white");
	$(".category-product").text("(" + $(this).text() + ")" );
  $(this).removeClass("btn-white");
  $(this).addClass("btn-primary2");
	$("#typ_cat").val($(this).attr('data-id'));
  specis = $(this).attr('data-specis');
  //alert(specis)
 	$.ajax({
      url: '/ajax/get_type_product/',
      data: {
          'id':parseInt($(this).attr('data-id')), 
      },
      async:true,
      dataType: 'json',
      success: function (data) {
      	//alert(data.desc);
      	var message = data.desc;
      	var alo = message.split('\n');
      	var descri_div = document.getElementById("descri_div");
      	descri_div.innerHTML = " ";
      	var nb_alo = alo.length-1;
        if (specis != "" && specis != " " ){

        specis = specis.split("|");
        nb_specis = specis.length;
        }
        else{
          nb_specis = 0;
        }
      	for (var i=0; i<nb_alo; i++){
        if(i<nb_specis){
          tmp_sp = specis[i]
        }
        else{
          tmp_sp = "";
        }
			var line = alo[i].split('|')
			descri_div.innerHTML +=  "<div class='col-md-12 p-0'><div class='col-md-8'><div class='form-group'><label class='bmd-label-floating'>"+line[0]+"</label><input type='"+line[1]+"' value='"+tmp_sp+"' class='form-control elt_send'></div></div></div>";
      	}
      }
    });
});
num_line = 2;
$("#adder_line").click(function(){
	lines_content = document.getElementById("lines_content");
	lines_content.innerHTML += "<div class='linefm pt-2 d-flex w-100 justify-content-between'><div class='form-group'><label class='bmd-label-floating'>Champs</label><input type='text' class='linch form-control'></div><div style='width:20px;'></div><div class='form-group'> <select class='linch form-control'><option value='text'>Texte</option><option value='number'>Nombre</option> </select> </div><div style='width:20px;'></div><div class='form-group'><label class='bmd-label-floating'>Unité </label><input type='text' class='linch form-control'></div><div><span class='d-none badge btn-danger'>x</span></div></div></div>";
	num_line++;
});

$("#art_form").submit(function(){
	var elt_send = document.getElementsByClassName('elt_send');
	var message ="";
	var E_L = elt_send.length;
	for (var i=0; i<E_L; i++){
		message += elt_send[i].value + "|";
	}
	att_elt = document.getElementById("att_elt");
	att_elt.value = message;
});

$("#enreg_trans").click(function(){
  //name_typ = document.getElementById("name_typ")
  //name_typ.value = name_typ.upper()
  
	var lines = document.getElementsByClassName("linefm");
	var nb_lines = lines.length;
	var message = "";
	for (var i=0;i<nb_lines;i++){
		az = lines[i].getElementsByClassName("linch");
		for (var j=0;j<3;j++){
			message += az[j].value+"|"
		}
		message += "\n";
	}
 	$.ajax({
      url: '/ajax/save_type_product/',
      data: {
          'name_typ':$("#name_typ").val(), 
          'message':message
      },
      async:true,
      dataType: 'json',
      success: function (data) {
		window.location.href = '/stock/add/';
      }
    });
});

ty_bt = document.getElementsByClassName("ty_bt");

{% if product != None %}
for(var i=0;i<ty_bt.length;i++){
  if (ty_bt[i].getAttribute("data-id") == {{typeproduct.id}}){
    ty_bt[i].setAttribute("data-specis","{{product.m_description}}")
    ty_bt[i].click();
    break;
  }
}
{% else %}
ty_bt[0].click();
{% endif %}
</script>
{% endblock %}
