@extends($layout) 
@section('content') 
<style type="text/css">
  select {
    margin-bottom: 0px !important;
  }

  .subFormBox {
    padding: 6px;
    border: #e4e4e4 1px solid;
    box-shadow: 0 0px 10px #DDD;
    -moz-box-shadow: 0 0px 10px #DDD;
    -webkit-box-shadow: 0 0px 10px #DDD;
    -moz-border-radius: 6px;
    border-radius: 6px;
    margin-right: 6px;
    margin-left: 6px;
  }
</style>


<div class="row">
  <div class="col s12">
    </select>
    <div class="container">
      <div class="section">
        <form method="POST"> @csrf <div class="card">
            <div class="card-panel">
              <h4 class="card-title" style="margin-bottom: 15px; font-size: 25px;">
                <i class="material-icons prefix">add</i> New application QKY
              </h4>







              <div class="row">
                <div class="col s12 m12">
                  <div class="row">
                    <div class="col s12 input-field">
                      <input onChange="CapitaliseFirstLetter('projet')" id="projet" name="projet" value="{{old('projet')}}" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" type="text">
                      <label for="projet"> App ID </label>
                    </div>
                    
                    
                    

                    <div class="col s12">
                        <ul class="tabs">
                            <li class="tab col s3"><a class="active" href="#general"> <i class="material-icons">info</i> Informations générales</a></li>
                            <li class="tab col s3"><a  href="#rapport"><i class="material-icons">insert_drive_file</i> Rapport d'intervention</a></li>
                            <li class="tab col s2"><a  href="#localisation"><i class="material-icons">map</i> Localisation</a></li>
                            <li class="tab col s2"><a  href="#photos"><i class="material-icons">insert_photo</i> Photos</a></li>
                            <li class="tab col s2"><a  href="#workflow"><i class="material-icons">loop</i> Workflow </a></li>
                        </ul>
                        </div>

                    
                    
                    
                    <div id="rapport" class="col s12 "></div>
                    <div id="general" class="col s12 ">
                      <div class="subForm_container"></div>
                      <a href="javascript:void(0);" class="newSF_subForm">
                        <i class=" cus-add"></i> Ajouter un composant </a>
                    </div>



                  </div>
                </div>
              </div>
            </div>
          </div>
          </div>
          </div>
        </form>
        <div class="hide" id="subForm">
          <div class="col s12 m12">
            <div class="row table">
              <div class="col s2 input-field">
                <input name="Identifiant[]" type="text" placeholder="">
                <label for="label"> ID </label>
              </div>
              <div class="col s2 input-field">
                <input name="Label[]" type="text" placeholder="">
                <label for="label"> Label </label>
              </div>
              <div class="col s2 input-field">
                <select name="formElement[]" class=" browser-default">
                  <option value="?"></option>
                  <option value="primary_key">Primary Key</option>
                  <option value="secondary_key">Secondary Key</option>
                  <option value="text">Text</option>
                  <option value="select">Select</option>
                  <option value="select">Basic Select</option>
                  <option value="select">Select Multiple</option>
                  <option value="select">Basic Select Multiple</option>
                  <option value="textarea">Textarea</option>
                  <option value="ckeditor">Wysiwyg (CKEditor)</option>
                  <option value="radio">Radio</option>
                  <option value="checkbox">Checkbox</option>
                  <option value="datepicker">Datepicker</option>
                  <option value="timepicker">Timepicker</option>
                  <option value="colorpicker">Colorpicker</option>
                  <option value="file">File</option>
                  <option value="phone">Phone</option>
                  <option value="hidden">Hidden</option>
                </select>
                <label for="type"> Choisir un type</label>
              </div>
              <div class="col s1 input-field">
                <label>
                  <input type="checkbox" class="filled-in inGrid" checked="checked" />
                  <input type="hidden" name="inGrid[]" value="1" class="hide">
                  <span>In List</span>
                </label>
              </div>
              <div class="col s1 input-field">
                <label>
                  <input type="checkbox" name="required[]" class="filled-in" checked="checked" />
                  <span>Required</span>
                </label>
              </div>
              <div class="col s2 input-field">
                <i class="material-icons block-remove delBlock" style="color:red;     margin-top: 10px;    cursor: pointer;">delete</i>
              </div>
              <!--<td><input type='text' name="size[]" size='50' placeholder="size" style="width:30px;"></td><td>
                                 : <input type='checkbox' name="visible[]" checked="checked"></td><td style="cursor: pointer;"><a class="delBlock"><i class=" cus-delete"></i></a><input type="hidden" name="del[]" value="0" class="hide"></td></tr></table>-->
            </div>
            <div>
              <div class="secondary_key_content" style="display: none;">
                <div class="col s12 m12">
                  <div class="row ">
                    <div class="col s2 input-field">
                      <input name="skmodel[]" type="text" placeholder="">
                      <label for="label"> Model </label>
                    </div>
                    <div class="col s2 input-field">
                      <input name="skkey[]" type="text" placeholder="">
                      <label for="label"> Key </label>
                    </div>
                    <div class="col s2 input-field">
                      <input name="skvalue[]" type="text" placeholder="">
                      <label for="label"> Value </label>
                    </div>
                  </div>
                </div>
              </div>
              <div class="select_content" style="display: none;">
                <div></div>
                <a href="javascript:void(0);" class="newSF_subFormSelect">
                  <i class=" cus-add"></i> Ajouter un element de la liste Select </a>
              </div>
              <div class="select_basic_content" style="display: none;">
                <div></div>
                <a href="javascript:void(0);" class="newSF_subFormSelectBasic">
                  <i class=" cus-add"></i> Ajouter un element de la liste Basic Select </a>
              </div>
              <div class="select_multiple_content" style="display: none;">
                <div></div>
                <a href="javascript:void(0);" class="newSF_subFormSelectMultiple">
                  <i class=" cus-add"></i> Ajouter un element de la liste Select Multiple </a>
              </div>
              <div class="select_multiple_basic_content" style="display: none;">
                <div></div>
                <a href="javascript:void(0);" class="newSF_subFormSelectMultipleBasic">
                  <i class=" cus-add"></i> Ajouter un element de la liste Select Multiple Basic </a>
              </div>
              <div class="radio_content" style="display: none;">
                <div></div>
                <a href="javascript:void(0);" class="newSF_subFormRadio">
                  <i class=" cus-add"></i> Ajouter un element de la liste Radio </a>
              </div>
              <div class="checkbox_content" style="display: none;">
                <div></div>
                <a href="javascript:void(0);" class="newSF_subFormCheckbox">
                  <i class=" cus-add"></i> Ajouter un element de la liste Checkbox </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="hide" id="subFormSelect">
        <div class="subFormItems" style="margin-bottom: 10px; display: flow-root;">
          <div class="col s12 m12">
            <div class="row ">
              <div class="col s1 input-field">
                <input type='text' placeholder="" name="Select_cle[{i}][]">
                <label for="label"> key </label>
              </div>
              <div class="col s2 input-field">
                <input type='text' placeholder="" name="Select_valeur[{i}][]">
                <label for="label"> Value </label>
              </div>
              <div class="col s2 input-field">
                <i class="material-icons block-remove delBlock" style="color:red;     margin-top: 10px;    cursor: pointer;">delete</i>
                <a class="delBlock">
                  <i class=" cus-delete"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="hide" id="subFormSelectBasic">
        <div class="subFormItems" style="margin-bottom: 10px;">
          <table>
            <tr>
              <td>
                <input type='text' size='50' name="Select_basic_cle[{i}][]" placeholder="Clé" style="width:30px;">
              </td>
              <td>
                <input type='text' size='50' name="Select_basic_valeur[{i}][]" placeholder="Valeur">
              </td>
              <td style="cursor: pointer;">
                <a class="delBlock">
                  <i class=" cus-delete"></i>
                </a>
                <input type="hidden" name="Select_basic_del[{i}][]" value="0" class="hide">
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="hide" id="subFormSelectMultipleBasic">
        <div class="subFormItems" style="margin-bottom: 10px;">
          <table>
            <tr>
              <td>
                <input type='text' size='50' name="Select_multiple_basic_cle[{i}][]" placeholder="Clé" style="width:30px;">
              </td>
              <td>
                <input type='text' size='50' name="Select_multiple_basic_valeur[{i}][]" placeholder="Valeur">
              </td>
              <td style="cursor: pointer;">
                <a class="delBlock">
                  <i class=" cus-delete"></i>
                </a>
                <input type="hidden" name="Select_multiple_basic_del[{i}][]" value="0" class="hide">
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="hide" id="subFormSelectMultiple">
        <div class="subFormItems" style="margin-bottom: 10px;">
          <table>
            <tr>
              <td>
                <input type='text' size='50' name="Select_multiple_cle[{i}][]" placeholder="Clé" style="width:30px;">
              </td>
              <td>
                <input type='text' size='50' name="Select_multiple_valeur[{i}][]" placeholder="Valeur">
              </td>
              <td style="cursor: pointer;">
                <a class="delBlock">
                  <i class=" cus-delete"></i>
                </a>
                <input type="hidden" name="Select_multiple_del[{i}][]" value="0" class="hide">
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="hide" id="subFormRadio">
        <div class="subFormItems" style="margin-bottom: 10px;">
          <table>
            <tr>
              <td>
                <input type='text' size='50' name="Radio_cle[{i}][]" placeholder="Clé" style="width:30px;">
              </td>
              <td>
                <input type='text' size='50' name="Radio_valeur[{i}][]" placeholder="Valeur">
              </td>
              <td style="cursor: pointer;">
                <a class="delBlock">
                  <i class=" cus-delete"></i>
                </a>
                <input type="hidden" name="Radio_del[{i}][]" value="0" class="hide">
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="hide" id="subFormCheckbox">
        <div class="subFormItems" style="margin-bottom: 10px; display: flow-root;">
          <div class="col s12 m12">
            <div class="row ">
              <div class="col s1 input-field">
                <input type='text' placeholder="" name="Checkbox_cle[{i}][]">
                <label for="label"> key </label>
              </div>
              <div class="col s2 input-field">
                <input type='text' placeholder="" name="Checkbox_valeur[{i}][]">
                <label for="label"> Value </label>
              </div>
              <div class="col s2 input-field">
                <i class="material-icons block-remove delBlock" style="color:red;     margin-top: 10px;    cursor: pointer;">delete</i>
                <a class="delBlock">
                  <i class=" cus-delete"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div> 
      
      @stop @section('js')
      <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
      <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
      <script type="text/javascript" charset="utf-8">

        $(document).on('change', '.inGrid', function(e) 
          ($(this).is(':checked')) ? $(this).next().attr('value', 1): $(this).next().attr('value', 0);
        });
        
        $(document).on('click', '[class*="newSF"]', function(e) {
          if ($(this).attr('class').lastIndexOf("_") == $(this).attr('class').indexOf("_")) {
            //alert('oui');
            var classe = $(this).attr('class').substr($(this).attr('class').lastIndexOf("_") + 1);
          }
          //alert($(this).prev().attr('id'));
          //alert($(this).prev().children().length);
          //var indice=$(this).prev().children().length;
          //alert(indice);
          $("#" + classe + " div:first").clone().appendTo($(this).prev());
          //$(this).prev().children().last().css('background-color', 'red');
          var indice1 = $(this).prev().children().length - 1;
          var newClassName = 'card-panel subFormItems_' + indice1;
          $(this).prev().children().last().attr('class', newClassName);
          if ($(this).closest('[class*="subFormItems"]').attr('class') != undefined) {
            var indice = $(this).closest('[class*="subFormItems"]').attr('class').substr($(this).closest('[class*="subFormItems"]').attr('class').lastIndexOf("_") + 1);
          }
          //var indice=.($(this).closest('[class*="subFormItems"]').attr('class').lastIndexOf("_")+1);
          //alert(indice);
          //$(this).prev().children().last().css('background-color', 'red');
          //alert(classe);	
          $(this).prev().children().last().find("*").each(function() {
            if ($(this).attr('name') != undefined) {
              //alert($(this).attr('name'));
              $(this).attr('name').replace("{i}", "" + indice);
              //alert($(this).attr('name').replace("{i}", ""+indice));
              var newName = $(this).attr('name').replace("{i}", "" + indice);
              $(this).attr('name', newName);
            }
          });
          $('form select').select2({
            dropdownAutoWidth: true,
            width: '100%'
          });
        });
        $(document).on('click', '.delBlock', function(e) {
          $(this).next().attr('value', 1);
          $(this).closest('[class*="subFormItems"]').remove();
          //knt dayer flwal parents o apres bdeltha l closest  parents tatjib lik ga3 les elements parents li jayn m3a lfiltre closest tat3tek rir awal wahd
          //$(this).parents('.subFormItems ').css('display','none');				
        });
        $(document).on('change', 'select', function(e) {
          //alert( this.value );
          //$(this).parents('table .subFormTable').next().append(this.value);
          var selected = this.value;
          //$(this).parents('table .subFormTable').next().children().each(function () {
          $(this).closest('.table').next().children().each(function() {
            //alert($(this).attr('id'));
            if ($(this).attr('class') == selected + '_content') $(this).css('display', 'flow-root');
            else $(this).css('display', 'none');
          });
        });

        function CapitaliseFirstLetter(elementId) {
          var txt = $("#" + elementId).val().toLowerCase();
          $("#" + elementId).val(txt.replace(/^(.)|\s(.)/g, function($1) {
            return $1.toUpperCase();
          }));
        }

        

        function showcontroller() {
          ($("#controllerName").css("display") == "none") ? $("#controllerName").css("display", "inline-block"): $("#controllerName").css("display", "none");
        }
        $(function() {
          $(".subForm_container").sortable();
        });
      </script> 
      @stop