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


{% block main %}

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

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

<div class="container pb-sm-40">
      <div class="section-title">

  <form  action="{{ action }}" 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">
    <label for="title" class="col-sm-2 control-label">Section Tipi seçiniz </label>
      <div class="col-sm-10">
        <div class="styled-select">
          <select id="sectionType" name="sectionType"  class="form-control" required aria-required="true">
            <option >{{ section.sectionType }}</option>
            {% for sectionType in sectionTypes %}
              <option >{{ sectionType.sectionType }}</option>
            {% endfor %}
          </select>
          <i class="fa fa-caret-down"></i>
        </div>
      </div>
    </div>

    <div class="form-group">
    <label for="title" class="col-sm-2 control-label">Section Grup seçiniz </label>
      <div class="col-sm-10">
        <div class="styled-select">
          <select id="sectionType" name="sectionGrup"  class="form-control" required aria-required="true">
            <option >{{ section.sectionGrup }}</option>
            {% for sectionGrup in sectionGrups %}
              <option value="sectionGrup " >{{ sectionGrup.sectionGrup }}</option>
            {% endfor %}
          </select>
          <i class="fa fa-caret-down"></i>
        </div>
      </div>
    </div>

   <div id ="index" class="form-group">
   <label for="title" class="col-sm-2 control-label">Section Index giriniz </label>
      <div class="col-sm-10">
        <input type="text" name="sectionIndex" placeholder="Index giriniz" value="{{ section.sectionIndex }}"  id="index" class="form-control">
      </div>
    </div>
   
    
   
    {% for item in section.items %}
    <div id="{{  loop.key }}">
    <input type="checkbox" name="check" id="{{  loop.key }}" />
    <div class="form-group">
    <label for="title" class="col-sm-2 control-label">Title yazı rengi seçiniz </label>
      <div class="col-sm-10">
      
        <div class="styled-select">
          <select id="titleRenk" name="items[0][titleRenk]" class="form-control" required aria-required="true">
           
              <option >light</option>
              <option >dark</option>
            
          </select>
          <i class="fa fa-caret-down"></i>
        </div>
      </div>
    </div>


    <div class="form-group">
    <label for="subtitleRenk" class="col-sm-2 control-label">Subtitle yazı rengi seçiniz </label>
      <div class="col-sm-10">
      
        <div class="styled-select">
          <select id="subtitleRenk" name="items[0][subtitleRenk]" class="form-control" required aria-required="true">
           
              <option >light</option>
              <option >dark</option>
            
          </select>
          <i class="fa fa-caret-down"></i>
        </div>
      </div>
    </div>
    <div id ="title" class="form-group">
    <label for="title" class="col-sm-2 control-label">Title giriniz </label>
      <div class="col-sm-10">
        <input type="text" name="{{'items[' + loop.key + '][title]'}}" placeholder="Title giriniz" value="{{ item.title }}"  id="title" class="form-control">
      </div>
    </div>

    <div id="subtitle" class="form-group">
      <label for="title" class="col-sm-2 control-label">Subtitle giriniz </label>
      <div class="col-sm-10">
        <textarea id="subtitle" class="form-control"  placeholder="Subtitle giriniz" type="text" name="{{'items[' + loop.key + '][subtitle]'}}" rows="5" >{{ item.subtitle }}</textarea>   
      </div>
    </div>

     <div id="image" class="form-group">
     <label for="title" class="col-sm-2 control-label">Resim  seçiniz </label>
        <div class="col-sm-10">
          <input type="file" name="{{'items[' + loop.key + '][imageUrl]'}}" value="{{ item.imageUrl }}" class="form-control" id="imageUrl">
        </div>
    </div>
    </div>
    {% endfor %}
    </div>
    
    
    <script type="text/javascript">
      
      var nesneler = document.getElementsByName("check");
      var sayac =nesneler.length +1 ;
      var secililer= new Array();
   function addInput(divName){
    
     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 titleRenkDiv = document.createElement('div');
     titleRenkDiv.setAttribute('id',"titleRenk");
     titleRenkDiv.setAttribute('class',"form-group");
     var titleRenkLabel = document.createElement('label');
     titleRenkLabel.setAttribute('class',"col-sm-2 control-label");
     titleRenkLabel.innerHTML="Title yazı rengi seciniz ";
     var titleRenkDiv2 = document.createElement('div');
     titleRenkDiv2.setAttribute('class',"col-sm-10");
     var titleRenkDiv3 = document.createElement('div');
     titleRenkDiv3.setAttribute('class',"styled-select");
     var titleSelect = document.createElement("select");
     titleSelect.setAttribute('id',"titleRenk");
     titleSelect.setAttribute('name',"items["+sayac+"][titleRenk]");
     titleSelect.setAttribute('class',"form-control");
   
     var titleOption1= document.createElement("option");
     titleOption1.innerHTML="dark";
     var titleOption2= document.createElement("option");
     titleOption2.innerHTML="light";

     titleSelect.appendChild(titleOption1);
     titleSelect.appendChild(titleOption2);
     titleRenkDiv3.appendChild(titleSelect);
     titleRenkDiv2.appendChild(titleRenkDiv3);
     titleRenkDiv.appendChild(titleRenkLabel);
     titleRenkDiv.appendChild(titleRenkDiv2);



     var subtitleRenkDiv = document.createElement('div');
     subtitleRenkDiv.setAttribute('id',"titleRenk");
     subtitleRenkDiv.setAttribute('class',"form-group");
     var subtitleRenkLabel = document.createElement('label');
     subtitleRenkLabel.setAttribute('class',"col-sm-2 control-label");
     subtitleRenkLabel.innerHTML="Subtitle yazı rengi seciniz ";
     var subtitleRenkDiv2 = document.createElement('div');
     subtitleRenkDiv2.setAttribute('class',"col-sm-10");
     var subtitleRenkDiv3 = document.createElement('div');
     subtitleRenkDiv3.setAttribute('class',"styled-select");
     var subtitleSelect = document.createElement("select");
     subtitleSelect.setAttribute('id',"titleRenk");
     subtitleSelect.setAttribute('name',"items["+sayac+"][subtitleRenk]");
     subtitleSelect.setAttribute('class',"form-control");
    
     var subtitleOption1= document.createElement("option");
     subtitleOption1.innerHTML="dark";
     var subtitleOption2= document.createElement("option");
     subtitleOption2.innerHTML="light";

     subtitleSelect.appendChild(subtitleOption1);
     subtitleSelect.appendChild(subtitleOption2);
     subtitleRenkDiv3.appendChild(subtitleSelect);
     subtitleRenkDiv2.appendChild(subtitleRenkDiv3);
     subtitleRenkDiv.appendChild(subtitleRenkLabel);
     subtitleRenkDiv.appendChild(subtitleRenkDiv2);


     var titleDiv = document.createElement('div');
     titleDiv.setAttribute('id',"title");
     titleDiv.setAttribute('class',"form-group");
      var titleLabel = document.createElement('label');
     titleLabel.setAttribute('class',"col-sm-2 control-label");
     titleLabel.innerHTML="Title giriniz ";
     var titleDiv2 = document.createElement('div');
     titleDiv2.setAttribute('class',"col-sm-10");
     var title = document.createElement("input"); //input element, text
     title.setAttribute('type',"text");
     title.setAttribute('placeholder',"Title giriniz");
     title.setAttribute('name',"items["+sayac+"][title]");
     title.setAttribute('id',"title");
     title.setAttribute('class',"form-control");
     titleDiv2.appendChild(title);
     titleDiv.appendChild(titleLabel);
     titleDiv.appendChild(titleDiv2);

     
     var subtitleDiv = document.createElement('div');
     subtitleDiv.setAttribute('id',"subtitle");
     subtitleDiv.setAttribute('class',"form-group");
     var subtitleLabel = document.createElement('label');
     subtitleLabel.setAttribute('class',"col-sm-2 control-label");
     subtitleLabel.innerHTML="Subtile giriniz ";
     var subtitleDiv2 = document.createElement('div');
     subtitleDiv2.setAttribute('class',"col-sm-10");
     var subtitle = document.createElement("textarea"); //input element, text
     subtitle.setAttribute('type',"textarea");
     subtitle.setAttribute('rows',"5");
     subtitle.setAttribute('placeholder',"Subtitle giriniz");
     subtitle.setAttribute('name',"items["+sayac+"][subtitle]");
     subtitle.setAttribute('id',"subtitle");
     subtitle.setAttribute('class',"form-control");
     subtitleDiv2.appendChild(subtitle);
     subtitleDiv.appendChild(subtitleLabel);
     subtitleDiv.appendChild(subtitleDiv2);


     var imageDiv = document.createElement('div');
     imageDiv.setAttribute('id',"image");
     imageDiv.setAttribute('class',"form-group");
     var imageLabel = document.createElement('label');
     imageLabel.setAttribute('class',"col-sm-2 control-label");
     imageLabel.innerHTML="Resim seçiniz ";
     var imageDiv2 = document.createElement('div');
     imageDiv2.setAttribute('class',"col-sm-10");
     var image = document.createElement("input"); //input element, text
     image.setAttribute('type',"file");
     image.setAttribute('name',"items["+sayac+"][imageUrl]");
     image.setAttribute('id',"imageURL");
     image.setAttribute('class',"form-control");
     imageDiv2.appendChild(image);
      imageDiv.appendChild(imageLabel);
     imageDiv.appendChild(imageDiv2);
     
     genelDiv.appendChild(check);
     genelDiv.appendChild(titleRenkDiv);
     genelDiv.appendChild(subtitleRenkDiv);
     genelDiv.appendChild(titleDiv);
     genelDiv.appendChild(subtitleDiv);
     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="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button class="btn btn-primary" type="submit">Save</button>
            &nbsp;
            <a href="/sections" class="btn btn-link">Cancel</a>
            &nbsp;
            <input class="btn btn-primary" type="button" value="item Ekle"  onclick="addInput('dynamicInput');">
            &nbsp;
            <input class="btn btn-primary" type="button" value="item Sil"  onclick="removeInput('dynamicInput');">
            
          </div>
        </div>

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

  
{% endblock %}