{% extends '../layouts/default.html' %}


{% block main %}

<div class="container pb-sm-40">
   <h1>{{ title }}</h1>
</div>
 
 {{ section.sectionType }}
{% endblock %}

{% block content %}
  {% if section.isNew %}
    {% set action = '/sections' %}
  {% else %}
    {% set action = '/sections/' + section._id %}
  {% endif %}

 <script type="text/javascript">
  
  var nesneler = document.getElementsByName("check");
      var sayac =nesneler.length +1 ;
      var secililer= new Array();

      var chooserNumber=1;
   
function addFileChooser(divName){
    
     var genelDiv = document.createElement('div');
     genelDiv.setAttribute('id',"chooser");


     var imageDiv = document.createElement('div');
     imageDiv.setAttribute('class','form-group');
     var imageInsideDiv = document.createElement("div");
     imageInsideDiv.setAttribute('class','col-sm-8');
     var imageLabel = document.createElement("label");
     imageLabel.innerHTML = 'Dosya Seçiniz:';
     var image = document.createElement('input');
     image.setAttribute('type',"file");
     image.setAttribute('placeholder',"Dosya seçiniz");
     image.setAttribute('name',"files["+chooserNumber+"]");
     image.setAttribute('id',"imageUrl");
     image.setAttribute('class',"form-control");

     imageInsideDiv.appendChild(imageLabel);
     imageInsideDiv.appendChild(image);
     imageDiv.appendChild(imageInsideDiv);

     genelDiv.appendChild(imageDiv);
    document.getElementById(divName).appendChild(genelDiv);
     
     chooserNumber++; 
}
   function addInput(divName){
    
    console.log(sayac)
     var genelDiv = document.createElement('div');
     genelDiv.setAttribute('id',""+sayac+"");

     var check = document.createElement('input');
     check.setAttribute('id',""+sayac+"");
     check.setAttribute('name',"check");
     check.setAttribute('type',"checkbox");


     var titleDiv = document.createElement('div');
     titleDiv.setAttribute('class','form-group');
     var insideDiv = document.createElement("div");
     insideDiv.setAttribute('class','col-sm-8');
     var titleLabel = document.createElement("label");
     titleLabel.innerHTML = 'Başlık Giriniz:';
     var title = document.createElement('input');
     title.setAttribute('type',"text");
     title.setAttribute('placeholder',"Title giriniz");
     title.setAttribute('name',"items["+sayac+"][title]");
     title.setAttribute('id',"title");
     title.setAttribute('class',"form-control");
     insideDiv.appendChild(titleLabel);
     insideDiv.appendChild(title);
     titleDiv.appendChild(insideDiv);

    
      var subtitleDiv = document.createElement('div');
     subtitleDiv.setAttribute('class','form-group');
     var subtitleInsideDiv = document.createElement("div");
     subtitleInsideDiv.setAttribute('class','col-sm-8');
     var subtitleLabel = document.createElement("label");
     subtitleLabel.innerHTML = 'Açıklama Giriniz:';
     var subtitle = document.createElement('input');
     subtitle.setAttribute('type',"text");
     subtitle.setAttribute('placeholder',"Açıklama giriniz");
     subtitle.setAttribute('name',"items["+sayac+"][subtitle]");
     subtitle.setAttribute('id',"subtitle");
     subtitle.setAttribute('class',"form-control");

     subtitleInsideDiv.appendChild(subtitleLabel);
     subtitleInsideDiv.appendChild(subtitle);
     subtitleDiv.appendChild(subtitleInsideDiv);

    
      var codeDiv = document.createElement('div');
     codeDiv.setAttribute('class','form-group');
     var codeInsideDiv = document.createElement("div");
     codeInsideDiv.setAttribute('class','col-sm-8');
     var codeLabel = document.createElement("label");
     codeLabel.innerHTML = 'Kod Giriniz:';
     var code = document.createElement('input');
     code.setAttribute('type',"text");
     code.setAttribute('placeholder',"Kod giriniz");
     code.setAttribute('name',"items["+sayac+"][code]");
     code.setAttribute('id',"code");
     code.setAttribute('class',"form-control");

     codeInsideDiv.appendChild(codeLabel);
     codeInsideDiv.appendChild(code);
     codeDiv.appendChild(codeInsideDiv);


     var imageDiv = document.createElement('div');
     imageDiv.setAttribute('class','form-group');
     var imageInsideDiv = document.createElement("div");
     imageInsideDiv.setAttribute('class','col-sm-8');
     var imageLabel = document.createElement("label");
     imageLabel.innerHTML = 'Resim Seçiniz:';
     var image = document.createElement('input');
     image.setAttribute('type',"file");
     image.setAttribute('accept',"image/*");
     image.setAttribute('placeholder',"Fotoğraf seçiniz");
     image.setAttribute('name',"items["+sayac+"][imageUrl]");
     image.setAttribute('id',"imageUrl");
     image.setAttribute('class',"form-control");

     imageInsideDiv.appendChild(imageLabel);
     imageInsideDiv.appendChild(image);
     imageDiv.appendChild(imageInsideDiv);

     genelDiv.appendChild(check);
     genelDiv.appendChild(titleDiv);
     genelDiv.appendChild(subtitleDiv);
     genelDiv.appendChild(codeDiv);
     genelDiv.appendChild(imageDiv);
    document.getElementById(divName).appendChild(genelDiv);
     
     sayac=sayac+1; 
}
    function removeInput(parentDiv){
       
        var nesne = document.getElementsByName("check");
        
        
        for(var i=0; i< nesne.length ; i++){
          
          if(nesne[i].checked)
          {
            
            secililer.push(nesne[i].id);
              
          }
          
          
        }
        
        var sayı = secililer.length ;
        for (var k=0; k< sayı ; k++){

          var parent = document.getElementById(parentDiv);
              var child = document.getElementById(secililer[k]);
              parent.removeChild(child);
        }
        secililer=[];
       
}

 </script>

<div class="container pb-sm-40">
  <div class="section-title">
      <form  action="/sections" method="post" role="form" enctype="multipart/form-data"  class="form-horizontal">
    <input type="hidden" name="_csrf" value="{{ csrf_token }}">
    
<div id="dynamicInput">

    <div class="form-group">
      <div class="col-sm-8">
      <label for="title">Section Tipi Seçiniz: </label>
      <div class="styled-select">
        <select id="sectionType" name="sectionType" class="form-control" required aria-required="true">
         {% for sectionType in sectionTypes %}
          <option >{{ sectionType.sectionType }}</option>
          {% endfor %}
        </select>
        </div>
      </div>
    </div>

    <div class="form-group">
    <div class="col-sm-8">
      <label for="title">Section Grup Seçiniz: </label>
        <div class="styled-select">
          <select id="sectionType" name="sectionGrup" class="form-control" required aria-required="true">
            
            {% for sectionGrup in sectionGrups %}
              <option >{{ sectionGrup.sectionGrup }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
    </div>
  
    <div id ="index" class="form-group">
      <div class="col-sm-8">
        <label for="title">Section Index Giriniz: </label>
        <input type="text" placeholder="Sıra" name="sectionIndex" id="index" class="form-control">
      </div>
    </div>
    <div id ="title" class="form-group">
     <div class="col-sm-8">
        <label for="tag" >Tag Giriniz: </label>
        <input type="text" placeholder="Tag" name="tag"   id="tag" class="form-control">
      </div>
    </div>
    <div id="chooser">
       <div id="files" class="form-group">
          <div class="col-sm-8">
            <label for="title">Dosya Seçiniz: </label>
            <input type="file" name="files" class="form-control" id="files">
          </div>
        </div>
      </div> 
    <input class="btn btn-outline btn-success" type="button" value="Dosya Ekle"  onclick="addFileChooser('chooser');">
    <div id="0">
   <input type="checkbox" name="check" visibility="hidden" id="0" />
    <div id ="title" class="form-group">
     <div class="col-sm-8">
        <label for="title" >Başlık Giriniz: </label>
        <input type="text" placeholder="Başlık" name="items[0][title]"   id="title" class="form-control">
      </div>
    </div>
    
    <div id="subtitle" class="form-group">
      <div class="col-sm-8">
        <label for="title">Açıklama Giriniz: </label>
        <textarea id="subtitle" placeholder="Açıklama" class="form-control"  type="text" name="items[0][subtitle]" rows="5" ></textarea>
      </div>
    </div>
     <div id="code" class="form-group">
      <div class="col-sm-8">
        <label for="title">Kod Giriniz: </label>
        <textarea id="code" placeholder="Örnek Kod" class="form-control"  type="text" name="items[0][code]" rows="10" ></textarea>
      </div>
    </div>
      <div id="image" class="form-group">
        <div class="col-sm-8">
          <label for="title">Resim Seçiniz: </label>
          <input type="file" accept="image/*" name="items[0][imageUrl]" class="form-control" id="imageUrl">
        </div>
    </div>   
   </div>
  </div>

  <div class="form-group">
    <div class="col-sm-8">
      <button class="btn btn-success" type="submit">Save</button>
      &nbsp;
     <a href="/sections" class="btn btn-danger">Cancel</a>
      &nbsp;
      <input class="btn btn-outline btn-success" type="button" value="İtem Ekle"  onclick="addInput('dynamicInput');">
      <input class="btn btn-outline btn-danger" type="button" value="item Sil"  onclick="removeInput('dynamicInput');">
    </div>
  </div>
</div>
</form>     
  </div>
</div>
{% endblock %}
