@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;
  }

  .tabs .tab a:hover, .tabs .tab a.active {
        color: #29b6f6;
        background-color: #eaeff1 !important;
    }

</style>



<div class="row">
<form method="POST" id="send"> 
            @csrf 
<div class="col s12 justify-content-end mt-1">
                    <button type="button" class="btn btn-light">Retour </button>
                    <button type="submit"  class="btn indigo" style="margin-left: 1rem;">Enregistrer</button>
                </div>
  <div class="col s12">
    <div class="container">
      <div class="section">
    
      @if(Session::has('success_message'))

      <div class="card-alert card green">
              <div class="card-content white-text">
                  <p>{!! Session::get('success_message') !!}</p>
              </div>
              <button type="button" class="close white-text" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">×</span>
              </button>
          </div>
                @endif
        
     
            <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 EasyCode
              </h4>
              <div class="row">

                


                <div class="col s12 m12">
                  <div class="row">
                    <div class="col s3 input-field">
                      <input onChange="CapitaliseFirstLetter('projet')" required id="projet" name="projet"  type="text">
                      <label for="projet"> App ID </label>
                    </div>

                    <div class="col s3 input-field">
                        

                    
                    <select name="app_type" id="app_type" class="select2 browser-default">
                            <option value="app">App</option>
                            <option value="workflow">Workflow</option>
                        </select>
                        <label for="type">Type</label>
                    </div>

                    <div class="col s3 input-field">
                        

                    
                    <select name="layout" id="layout" class="select2 browser-default">
                            <option value="back">Standard</option>
                            <option value="base">Base</option>
                        </select>
                        <label for="type">Layout</label>
                    </div>

                    <div class="col s1 input-field">
                        <label>
                        <input type="checkbox" name="serverSide" class="filled-in" checked="checked" />
                        <span>serverSide</span>
                        </label>
                    </div>
                    
                    
                    

                    <div class="row">

                    <div class="col s12" id="tab_container" style="display: none;">
                        <ul class="tabs" style="    margin-bottom: 11px;">
                            <li class="tab col s2" id="component_tab"><a class="active" href="javascript:void(0)" > <i class="material-icons">dashboard</i> Components</a></li>
                            <li class="tab col s2" id="workflow_tab"><a href="javascript:void(0)" class=""><i class="material-icons">loop</i> Workflow</a></li>
                        </ul>
                    </div>

                    
                    
                    
                    <div id="workflow_container" class="col s12 " style="display:none">

                        <div class="subFormWorkfolow_container"></div>

                        <a href="javascript:void(0);" class="newSF_subFormWorkfolow" style="margin-top:10px">
                        <i class="material-icons prefix">add</i> Add step </a> 

                    </div>

                    <div id="component_container" class="col s12 ">
                      <div class="subForm_container"></div>

                      <a href="javascript:void(0);" class="newSF_subForm" style="margin-top:10px">
                      <i class="material-icons prefix">add</i> Add component </a>
                    </div>


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


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

          


          <div class="hide" id="subFormWorkfolow">
          <div class="col s12 m12">
            <div class="row table">
              
              <div class="col s2 input-field">
                <input name="wk_nom[]" type="text" placeholder="">
                <label > Step </label>
              </div>
              <div class="col s2 input-field">
                <x-icon name="wk_icon[]" :options="$icons" selected="add" />
                <label for="type"> Icon</label>
              </div>

              <div class="col s2 input-field">
                <input name="wk_color[]" type="text" placeholder="" class="colorpicker">
                <label > Color </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="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="subForm">
          <div class="col s12 m12">
            <i class="material-icons dp48">drag_handle</i>
            <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="title">Title</option>
                  <option value="primary_key">Primary Key</option>
                  <option value="secondary_key">Relation</option>
                  <option value="text">Text</option>
                  <option value="number">Number</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="wysiwyg">Wysiwyg (Quill)</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">
                <input name="size[]" type="number" value="3" min="1" max="12" placeholder="">
                <label for="size"> Size </label>
              </div>

              <div class="col s1 input-field">
                <label>
                <input type="checkbox" class="filled-in checkHidden" checked="checked" />
                  <span>In List</span>
                  <input type="hidden" name="inGrid[]" value="1" class="hide">
                </label>
              </div>
              <div class="col s1 input-field" >
                <label>
                  <input type="checkbox" class="filled-in checkHidden"   />
                  <span>In Search</span>
                  <input type="hidden" name="inSearch[]" value="0" class="hide">
                </label>
              </div>

              <div class="col s1 input-field" >
                <label>
                  <input type="checkbox" class="filled-in checkHidden" checked="checked" />
                  <span>In Export</span>
                  <input type="hidden" name="inExport[]" value="1" class="hide">
                </label>
              </div>

              <div class="col s1 input-field">
                <label>
                  <input type="checkbox" class="filled-in checkHidden" />
                  <span>Required</span>
                  <input type="hidden" name="required[]" value="0" class="hide">
                </label>
              </div>
              <div class="col s1 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">
                        <select name="skmodel[]" class="skmodel browser-default">
                            <option value=""></option>
                            @foreach($models as $model)
                            <option value="{{$model}}">{{$model}}</option>
                            @endforeach
                        </select>
                      <label for="label"> Model </label>
                    </div>
                    <div class="col s2 input-field">
                     <select name="skkey[]" class=" browser-default">
                     <option value="?"></option>
                     </select>
                      <label for="label"> Key </label>
                    </div>
                    <div class="col s2 input-field">
                    <select name="skvalue[]" class=" browser-default">
                        <option value="?"></option>
                     </select>
                      <label for="label"> Value </label>
                    </div>

                    <div class="col s2 input-field">
                    <select name="skcomponent[]" class=" browser-default">
                        <option value="select">Select (single choice)</option>
                        <option value="select_multiple">Select (multiple choice)</option>
                        <option value="duallistbox">Duallistbox (multiple choice)</option>
                     </select>
                      <label for="label"> Component </label>
                    </div>

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

              <div class="wysiwyg_content" style="display: none;">
                <div class="col s12 m12">
                  <div class="row ">
                  <div class="col s2 input-field">
                    <x-icon name="wysiwyg_icon[]" :options="$icons" selected="textsms" />
                    <label for="type"> Icon</label>
                  </div>
                    
                  </div>
                </div>
              </div>

              <div class="title_content" style="display: none;">
                <div class="col s12 m12">
                  <div class="row ">
                  <div class="col s2 input-field">
                    <x-icon name="title_icon[]" :options="$icons" selected="info" />
                    <label for="type"> Icon</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', '#app_type', function(e) {

          if($(this).val()=="app"){
            $('#tab_container').css('display', 'none');
          }
          else{
            $('#tab_container').css('display', 'block');
          }
        });


        $(document).on('click', '#component_tab', function(e) {

            $('#workflow_tab').find('a').removeClass('active');
            $('#component_tab').find('a').addClass('active');

            $('#component_container').css('display', 'block');
            $('#workflow_container').css('display', 'none');

        });

        $(document).on('click', '#workflow_tab', function(e) {

            $('#workflow_tab').find('a').addClass('active');
            $('#component_tab').find('a').removeClass('active');

            $('#component_container').css('display', 'none');
            $('#workflow_container').css('display', 'block');

        });

        $(document).on('change', '.checkHidden', function(e) {
          ($(this).is(':checked')) ? $(this).next().next().attr('value', 1): $(this).next().next().attr('value', 0);
        });


        $(document).on('change', '.skmodel', function(e) {

            var model = $(this);
            load();
            $.ajax({
                url: '/get-model-columns/'+$(this).val(),
                success: function(response){
                    stopLoad();
                    model.closest('.secondary_key_content').find('select[name="skkey[]"]').empty().append(response);
                    model.closest('.secondary_key_content').find('select[name="skvalue[]"]').empty().append(response);
                },
                error: function(xhr, status, error){
                    stopLoad();
                    console.error(xhr.responseText);
                }
            });

        });


            
        $(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,
            selectOnClose: true,
            width: '100%'
          });


          $('form .icons').select2({
            escapeMarkup: function(markup) {
            return markup;
            },
            templateResult: function(data) {
            if (!data.id) { return data.text; } // Le texte pour l'option de titre sans icône
            var $icon = $(data.element).data('icon');
            var $text = $('<span>' + data.text + '</span>');
            var $option = $('<span>').append($icon).append(' ').append($text);
            return $option;
            },
            templateSelection: function(data) {
            if (!data.id) { return data.text; } // Le texte pour l'option sélectionnée sans icône
            var $icon = $(data.element).data('icon');
            var $text = data.text;
            var $option = $('<span>').append($icon).append(' ').append($text);
            return $option;
            }
        });


        $('form .colorpicker').loads({
            layout: 'hex',
            flat: false,
            enableAlpha: false,
            color: '208EB3',
            onSubmit: function(ev) {
            $(ev.el).css('background-color', '#' + ev.hex);
            $(ev.el).val("#" + ev.hex);
            $(ev.el).hides();
            },
            onHide: function(ev) {
            var color = $(ev.el).getColor("hex", true);
            $(ev.el).setColor(color, false);
            }
        });


        });
        $(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();
        });


        
        $(document).on('keydown', '.select2', function(e) {
          if (e.originalEvent && e.which == 40) {
            e.preventDefault();
            $(this).siblings('select').select2('open');
          }
        });

        
        $(document).ready(function() {
          
    });



      </script> 
      @stop