@section('myJS')
  <!-- <script src="{{url('/')}}/js/admin/admin.js"></script> -->
  <script src="{{url('/')}}/js/admin/output.js"></script>
@endsection

<div class="row" style="margin: 0px;">
  <div class="col-md-4"></div>
  <div class="col-md-6">
    <!-- <button id="addTextBlocks" type="button" class="btn btn-default" style="float:right;">Add</button> -->
 
  </div>
  <div class="col-md-12">
      <div class="row">
        <div class="col-md-8">
        </div>
        <div class="col-md-4">
          <input type="text" name="schemaName" class="form-control schemaName" value="{{ $schemaName }}" />
          <br>
          <button id="editSchemaAttributes" type="button" class="btn btn-default set-btn" style="">Edit</button> 
        </div>
      </div>
      <div class="index-save-cancel">

         <button type="button"  id="saveProductAttr" class="btn btn-save index-sucess " style="float:left;display:none;">Save</button>
         <button type="button" id="cancelProductAttr" class="btn btn-cancel btn-danger" style="float:left;display:none;" onclick="$('.editCatalogAttributeSchemaList').click()">Cancel</button>

         <button type="button"  id="saveAttrWdthSrt" class="btn btn-save index-sucess " style="float:left;display:none;">Save</button>
         <button type="button" id="cancelAttrWdthSrt" class="btn btn-cancel btn-danger" style="float:left;display:none;" onclick="$('.editCatalogAttributeSchemaList').click()">Cancel</button>
       </div>
    </div>
  </div>
      <div id="div_table" class="row table-catalog" style="margin: 0px;">
          <input type="hidden" name="schemaID" class="schemaID" value="{{ $schemaID }}" />
          <table id="AttributeSchemaTables" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
               <tr>
                  <th scope="col" class="col3" style="width:12%;">Attribute ID</th>
                  <th scope="col" class="col3" style="width:48%;">Attribute Name</th>
                  <th scope="col" class="col3" style="width:25%;">Width (mm)</th>
                  <th scope="col" class="col3" style="width:12%;">Sort</th>
                  <th scope="col" class="col4" style="width:15%;">Delete</th>
               </tr>
            </thead>
            <tbody>
               @php
                $attWidth = 0;
                $aW = array(0);
               @endphp                                          
               @if(!$categoryAttributes->isEmpty())
                   @foreach($categoryAttributes as $attribute)
                     @if($categoryDetails->InheritAttribute == 1)
                        @php
                          $disabled = 'disabled = "disabled"';
                        @endphp
                     @else
                         @php $disabled = ''; @endphp
                     @endif

                     @if($attribute->ColumnWidth > 0)
                        @php
                          $attWidth = $attribute->ColumnWidth;
                          $aW[] = $attribute->ColumnWidth;
                        @endphp
                     @else
                        @php
                          $attWidth = 0;
                          $aW[] = 0;
                        @endphp
                     @endif
                    
                      <tr class="addedAttr" class="allow_reorder" id="attr_{{$attribute->AttributeID}}" productAttributesTables>
                          <td class="allow_reorder">
                            {{$attribute->AttributeID}}
                            @if($attribute->isVirtualAttribute == "1" && $attribute->isCatalogAttribute != "1")
                                <div class="grayBg" style="display: inline-block; float: right; width: 20px; height: 20px; vertical-align: middle;" data-toggle="tooltip" data-placement="top" title="Virtual attribute"></div>
                            @elseif($attribute->isCatalogAttribute == "1")
                                @if($attribute->isVirtualAttribute == "1")
                                    <div class="cyanBg" style="display: inline-block; float: right; width: 20px; height: 20px; vertical-align: middle;" data-toggle="tooltip" data-placement="top" title="Virtual Catalog attribute"></div>
                                @else
                                    <div class="tealBg" style="display: inline-block; float: right; width: 20px; height: 20px; vertical-align: middle;" data-toggle="tooltip" data-placement="top" title="Catalog attribute"></div>
                                @endif
                            @elseif($attribute->InstanceAttribute == "1")
                                <div class="blueBg" style="display: inline-block; float: right; width: 20px; height: 20px; vertical-align: middle;" data-toggle="tooltip" data-placement="top" title="Instance attribute"></div>
                            @else
                                <div style="background-color: none transparent; display: inline-block; float: right; width: 20px; height: 20px; vertical-align: middle;"></div>
                            @endif
                          </td>
                          <td class="allow_reorder">{{$attribute->AttributeName}}</td>

                          <td><span class="allow_reorder toggleInfo">{{ $attWidth }}</span><input type="text" name="{{$attribute->AttributeID}}" style="display:none;"   name="attrWidth" class = "attrWidth" value="{{$attribute->ColumnWidth}}"  class="allow_reorder"/></td>
                          <td><span class="allow_reorder toggleInfo">{{$attribute->SortOrder}}</span><input type="text" name="{{$attribute->AttributeID}}" style="width: 35px;display:none;"  name="attrSort" class = "attrSort" value="{{$attribute->SortOrder}}" class="allow_reorder"/><span class="glyphicon glyphicon-triangle-top sortInc" style="font-size: 24px;padding-left: 5%;vertical-align: middle;cursor:pointer;display:none;"></span><span class="glyphicon glyphicon-triangle-bottom sortDec" style="font-size: 24px;vertical-align: middle;cursor:pointer;display:none;" ></span></td>

                          <td><button type="button" {{$disabled}} value="{{$attribute->AttributeID}}" class="btn btn-default deleteSchemattribute">Delete</button></td>
                       </tr>
                   @endforeach
               @else
                       <tr class = "noDataAttr">
                          <td></td>
                          <td>No Data Found</td>
                          <td></td>
                          <td></td>
                          <td></td>
                       </tr>
               @endif

            </tbody>
            <tfoot>
              <tr class="addedAttrWidthSum">
                  <th></th>
                  <th></th>

                  <th>
                    <span class="colWidth">
                      <b>
                        {{ array_sum($aW) }}
                      </b>
                    </span>
                  </th>
                  <th></th>

                  <th></th>
               </tr>
            </tfoot>
         </table>
      </div>
      <div class="row table-catalog" style="margin: 0px;">
        <div class="col-md-2">
          <select id="attribute"  name="attribute" class="form-control">
              <option  value="">Add Attribute</option>
                @foreach($attributes as $attribute)
                  <option  value="{{$attribute->AttributeID}}">{{ $attribute->AttributeName }}</option>
                @endforeach
          </select>
        </div>
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
      </div>

    <script>

      $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      });
      var AttributeSchemaTables = $('#AttributeSchemaTables').DataTable({
                  "paging": false,
                  "scrollX": false, //set to true for scrollbar
                  "rowReorder":{
                      // selector: 'tr',
                      selector: '.allow_reorder',
                      update: false,
                  }, 
                  "aaSorting": [[1, 'asc']],
                  "bSort" : false,
                  "bAutoWidth" : false,
                  "bInfo" : false
               });

          AttributeSchemaTables.on( 'row-reorder', function ( e, details, edit ) {

            var arr = new Array();


            var ids = AttributeSchemaTables.columns(0).data().eq( 0 );


            // Swap data
            $.each(details, function(o,p){
              // console.log(p);
              // var temp = ids[p.oldPosition];
              // ids[p.oldPosition] = ids[p.newPosition];
              // ids[p.newPosition] = temp;
              ids[p.newPosition] = p.oldData;
            });


            //getting productIDs in new order
            $.each(ids, function(i, v){
              // console.log(v);           
                arr.push(v);
            });

            console.log(arr);

            $.ajax({
                type: "POST",
                url: base_url + 'schemaAttributesSortOrder',
                data: {"schemaID": $('.schemaID').val(), "productsArray":arr},
                success: function(response){
                  console.log(response);
                    // $( "#"+ selectedCategoryID + "_anchor" ).trigger( "click" );
                },
                error: function()
                {
                  // $( "#"+ selectedCategoryID + "_anchor" ).trigger( "click" );
                }
            });
          });

          AttributeSchemaTables.iDisplayLength = 50;
          AttributeSchemaTables.bLengthChange = true;
          AttributeSchemaTables.bFilter = false;
          // Get the column API object
         //table.column(7).visible( false );


          var arrAttributeIDs    =   [];
          $('#attribute').on('change', function() {
              $('#saveProductAttr').css('display', 'block');
              $('#cancelProductAttr').css('display', 'block');
              $('#editSchemaAttributes').css('display', 'none');
             var id = ($(this).val());
             var text =$("#attribute option[value='"+id+"']").text();

             if(id){
                 $(".noDataAttr").remove();
                  var html = '<tr id="tr_attr_'+ id +'">\n\
                 <td>'+ id +'</td>\n\
                 <td>'+ text +'</td>\n\
                 <td><input type="text" name="'+ id +'" name="attrWidth" class = "attrWidth" value="" /></td>\n\
                 <td><input type="hidden" onkeypress="return isNumberKey(event)" name="'+ id +'" style="width: 35px;"  name="attrSort" class = "attrSort" value="" /></td>\n\
                 <td><button id="' + id + '" value="' + id +'" type="button" class="btn btn-default deleteSchemattribute">Delete</button></td></tr>';
                 $('#AttributeSchemaTables tbody').append(html);
                 arrAttributeIDs.push(id);
                 setAttributeDelButtonActive(id);
             }

        });

        $('#saveProductAttr').bind('click', function (){

              var schemaID = ($('.schemaID').val());
              var schemaName = ($('.schemaName').val());
              var parentProductAttr = [];
              var addProductAttr = [];
              var i = 0;
              var ids = [];
              var parentID ;
              var addedID;
              var attrWidthArray = {};
              var attrSortArray = {};

              $(".addedAttr").each(function() {
                  addedID = this.id;
                  addProductAttr.push(addedID.slice(5));
                });

              $(".attrWidth").each(function(){
                  attrWidthArray[$(this).attr("name")] = $(this).val();

              });

              $(".attrSort").each(function(){
                  attrSortArray[$(this).attr("name")] = $(this).val();

              });

               $.ajax({
                        type: "POST",
                        url: base_url + 'addAttributesToSchema',
                        data: { "schemaName": schemaName, "schemaID": schemaID, "arrAttributeIDs" : arrAttributeIDs, "addedProductAttr": addProductAttr, "attrWidthArray":attrWidthArray,"attrSortArray":attrSortArray},
                        success: function(response){
                            $('.editCatalogAttributeSchemaList').click();
                        }
                    });

          });

          $("#editSchemaAttributes").click(function(){
            // var productAttributesTablestable = $('#productAttributesTables').DataTable();
            // productAttributesTablestable.rowReorder.disable();

            $(".colWidth").siblings("input").css("display","block");
            $(".colWidth").css("display","none");

            $(".toggleInfo").css("display","none");
            $(".attrWidth, .attrSort").css("display","block");

            $(".sortOrd").siblings("input").css("display","inline-block");
            $(".sortOrd").siblings("span").css("display","inline-block");
            $(".sortOrd").css("display","none");

            $("#saveAttrWdthSrt").css("display","block");
            $("#cancelAttrWdthSrt").css("display","block");
            $('#editSchemaAttributes').css('display', 'none');
            $("#attribute").prop("disabled","true");

        });

        $("#saveAttrWdthSrt").click(function(){
          var params = $("#AttributeSchemaTables :input").serializeArray();
          var schemaID = ($('.schemaID').val());
          var schemaName = ($('.schemaName').val());

          $.ajax({
             type:'post',
             url : base_url + 'updateSchemaAttribute',
             data: {
                  "data": params, "schemaID":schemaID, "schemaName" : schemaName
              },
              success: function(response) {
                $('.editCatalogAttributeSchemaList').click();
              }
          });
        });

        $('.deleteSchemattribute').bind('click', function (){
          var attributeID = ($(this).val());
          var schemaID = ($('.schemaID').val());
          $.confirm({
              title: 'Do you want to delete ?',
              content: 'This attribute will be removed for this schema permanently.',
          //    icon: 'fa fa-question-circle',
              animation: 'scale',
              closeAnimation: 'scale',
              opacity: 0.5,
              buttons: {
                  'confirm': {
                      text: 'Yes',
                      btnClass: 'btn-blue',
                      action: function () {

                          $.ajax({
                              type: "POST",
                              url: base_url + 'removeAttributeFromSchema',
                              data: {"schemaID": schemaID, "attributeID" : attributeID},
                              success: function(response){
                                  $('.editCatalogAttributeSchemaList').click();
                              }
                          });
                      }
                  },
                 cancel:  {
                                  text: 'No',
                                  btnClass: 'btn-blue'
                              },
              }
          });
        });

        function setAttributeDelButtonActive(id){
            $('#'+id+'.deleteSchemattribute').bind('click', function (){
                var attributeID = ($(this).val());
                var schemaID = ($('.schemaID').val());
                $.confirm({
                    title: 'Do you want to delete ?',
                    content: 'This attribute will be removed for this schema permanently.',
                 //   icon: 'fa fa-question-circle',
                    animation: 'scale',
                    closeAnimation: 'scale',
                    opacity: 0.5,
                    buttons: {
                        'confirm': {
                            text: 'Yes',
                            btnClass: 'btn-blue',
                            action: function () {

                                $.ajax({
                                    type: "POST",
                                    url: base_url + 'removeAttributeFromSchema',
                                    data: {"schemaID": schemaID, "attributeID" : attributeID},
                                    success: function(response){
                                        $('#tr_attr_'+attributeID).remove();
                                        $('.editCatalogAttributeSchemaList').click();
                                    }
                                });
                            }
                        },
                        cancel:  {
                                        text: 'No',
                                        btnClass: 'btn-blue'
                                    },
                    }
                });
            });
        }
    </script>