@extends('layouts.dashboard')

@section('title', 'Manage Catalog')

@section('myJS')
   <script src="{{url('/')}}/js/admin/admin.js"></script>
   <link href="{{url('/')}}/css/catalogPlanner.css?v=2.1.1" rel="stylesheet" />
   <script src="{{url('/')}}/js/admin/tree.js"></script>
@endsection

@section('content')
@php // print_r(Session::all()); @endphp
<div class="bs-example">
     <div class="catalog-container">
          <!-- main part-->
        <div class="container-fluid">
           <div class="row" style="margin-bottom: 0px !important;clear: both;">
             <div class="col-md-12" style="padding:0px !important;">
              <nav aria-label="breadcrumb" role="navigation">
                 <ol class="breadcrumb header-breadcrumb">
                <!-- <li class="breadcrumb-item active" aria-current="page">Kitchen storage</li> -->
                 </ol>
              </nav>
            </div>
          </div>
        </div>
      </div>
   <!-- main part-->
   <!-- main part1-->
   <div class="container-fluid catalog-fluid">
      <div class="row">
         <div id="splitter">
            <div>
               <div id="tree">
                  <div class="tree-search-bar">
                       <div class="index-buttons">
                          <button id="btn_drag"  type="button" class="btn btn-default">Drag</button>
                          <button id="drag_no" style="" type="button" class="btn btn-default"><span class="fa fa-remove" style="color:red"></span></button>
                          <button id="drag_yes" style="" type="button" class="btn btn-default"><span class="fa fa-check" style="color:green"></span></button>
                          <!--  <button type="button" class="btn btn-primary">Primary</button>
                             <button type="button" class="btn btn-success">Success</button>-->
                          <button id="category_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#addCategoryModal">Add</button>
                          <button id="category_delete" type="button" class="btn btn-default">Delete</button>
                       </div>
                     <strong></strong><input id="plugins4_q" value="" placeholder="Search" class="input" type="text">
                  </div>
                  <div id="jstree_demo_div"></div>
                  <input type="hidden" id="hid_sel_cat" />
                  <input type="hidden" id="hid_sel_cat_text" />
                  <input type="hidden" id="hid_sel_cat_par" />
               </div>
            </div>
            <div id="nooverflow">
               <div id="exTab1" class="panel panel-default">
                  <ul class="nav nav-pills nav-catalog nav-justified">
                     <li class="active">
                        <a  href="#1a" class="showProducts" data-toggle="tab">Products</a>
                     </li>
                     @if(Session::get('superAdmin') == "1")
                     <li>
                        <a href="#2a" class="mediaDiv" data-toggle="tab">Media</a>
                     </li>
                     @endif
                     <!-- <li>
                        <a href="#3a" class="catTextDiv" data-toggle="tab">Category Text</a>
                     </li> -->
                     <li>
                        <a href="#4a" class="catSetupDiv" data-toggle="tab">Category Setup</a>
                     </li>
                     @if(Session::get('visualDesigner'))
                        <li>
                           <a href="#5a" class="catPlanner" data-toggle="tab">Catalog Planner</a>
                        </li>
                     @endif
                  </ul>
                  <div class="tab-content clearfix" style="">
                     <div class="tab-pane active" id="1a">
                        <div class="row" style="margin: 0px;" id="div_table">
                        </div>
                     </div>


                     <div class="tab-pane" id="2a">
                        <div class="row catalog-padding" style="margin: 0px;">
                           <div class="col-md-12">
                              <div id="categoryImageDiv"></div>
                           </div>
                        </div>
                     </div>

                     <div class="tab-pane" id="3a">
                        <form id="formCategoryText">
                           <div class="row catalog-padding" style="margin: 0px;">
                              <div class="col-md-4"></div>
                                 <div class="col-md-4" >
                                 <!-- <button id="addTextBlocks" type="button" class="btn btn-default" style="float:right;">Add</button> -->
                                    <span class="catTxtsavingGif" style="display:none"> Saving <img src="{{url('/')}}/images/ajax-loader.gif" width="100px" alt="img"> </span>
                                    <span class="catTxtResult"></span>
                                 </div>
                                 <div class="col-md-4" style="">
                                    <!--<input type="buttton" id="saveCategoryText" value="Save" class="btn btn-default catalog-edit" style="float:right;"/>-->
                                    <button id="editCategoryText" type="button" class="btn btn-default set-btn catalog-edit" style="display:none">Edit</button>

                                    <button type="button" id="cancelCategoryText" class="btn btn-cancel btn-danger" style="float:right;display:none;">Cancel</button>

                                    <button type="button"  id="saveCategoryText" class="btn btn-save index-sucess " style="float:right;display:none;">Save</button>

                                 </div>
                              </div>
                              <div id="categoryTextDiv" class="row table-catalog" style="margin: 0px;">
                              </div>
                        </form>
                     </div>
                  
                     <!-- <div class="tab-pane setup-tab" id="4a"> -->
                     <div class="tab-pane" id="4a">
                        <ul class="nav nav-pills nav-setup nav-justified" id="manage-catalogue">
                           <li class="active">
                              <a href="#displaySetupDiv" data-toggle="tab">Category Display Setup</a>
                           </li>
                           <li>
                              <a href="#categoryTextSetupDiv" class="catTextSetupDiv" data-toggle="tab">Category Text Setup</a>
                           </li>
                           <li><a href="#attributeSetupDiv" class="catAttributeSetupDiv" data-toggle="tab">Product Attribute Setup</a>
                           </li>
                        </ul>
                        <div class="tab-content removeScroll clearfix" style="padding-top: 15px;">
                           <div class="tab-pane active" id="displaySetupDiv">
                              <div class="row" style="margin: 0px;">
                                 <div class="col-md-4">
                                 </div>
                                 <div class="col-md-5" >
                                    <!-- <button id="addTextBlocks" type="button" class="btn btn-default" style="float:right;">Add</button> -->
                                    <span class="savingGif" style="display:none"> Saving <img src="{{url('/')}}/images/ajax-loader.gif" width="100px" alt="img"> </span>
                                    <span class="dataResult"></span>
                                 </div>
                                 <div class="col-md-3" style=";padding-left:0px !important;">
                                    <button id="editCategorySetUp" type="button" class="btn btn-default set-btn catalog-edit" style="">Edit</button>
                                    <button type="button" id="catSetUpCancel" class="btn btn-cancel btn-danger" style="float:right;display:none;">Cancel</button>
                                    <button type="button"  id="catSetUpSave" class="btn btn-save index-sucess " style="float:right;display:none;">Save</button>
                                 </div>
                              </div>
                              <br>
                              <div class="row" style="margin: 0px;">
                                 <div class="col-md-12">
                                    <div class="col-md-3">
                                          <div>Category ID</div>
                                    </div>
                                    <div class="col-md-9">
                                       <div id="catID"></div>
                                    </div>
                                 </div>
                                 <br><br><br>
                                 <div class="col-md-12">
                                    <div class="col-md-3">
                                          <div>Category Name</div>
                                    </div>
                                    <div class="col-md-9">
                                       <input type="text" id="catName" readonly="true" class="form-control" placeholder="Text" value="" style="width:35% !important;">
                                       <input type="hidden" id="catNameHidden"  class="form-control"  value="" >
                                       <span class="catError" style="color: red"></span>
                                    </div>
                                 </div>
                                 <br>
                                 <div class="col-md-12" style="margin-top: 3%;">
                                 <div class="col-md-3">
                                       <div>Catalog Planner</div>
                                 </div>
                                 <div class="col-md-9">
                                       <select  class="form-control" id="isPage" disabled="true"  name="textBlock" style="width: 35%;">
                                          <option  value="1">Yes</option>
                                          <option  value="0">No</option>
                                       </select>
                                       <!--<div class="row table-catalog1" style="margin: 0px;">
                                          <div class="col-md-12" style="padding-left:0px !important;padding-right:0px;">
                                             <div class="setup-text">Sort Order in this Category is Linked from Level Above</div>
                                                <div class="unlink-btn"><button type="button" class="btn btn-default index-unlink">Un-Link</button></div>
                                          </div>
                                       </div>-->
                                 </div>
                              </div>
                                 <br>
                                 <div class="col-md-12" style="margin-top: 3%;">
                                 <div class="col-md-3">
                                       <div>Product Collection Sort</div>
                                 </div>
                                 <div class="col-md-9">
                                       <select  class="form-control" id="prodCollectSort" disabled="true"  name="textBlock" style="width: 35%;">
                                          <option value="" >Select Sort Order</option>
                                          <option  value="instance">Sort by Product Instance</option>
                                          <option  value="code">Sort by Attribute - Product Code</option>
                                       </select>
                                       <input type="hidden" id="prodCollectSortHidden"  class="form-control"  value="" >
                                       <!--<div class="row table-catalog1" style="margin: 0px;">
                                          <div class="col-md-12" style="padding-left:0px !important;padding-right:0px;">
                                             <div class="setup-text">Sort Order in this Category is Linked from Level Above</div>
                                                <div class="unlink-btn"><button type="button" class="btn btn-default index-unlink">Un-Link</button></div>
                                          </div>
                                       </div>-->
                                 </div>
                              </div>
                              <br>
                              <div class="col-md-12" style="margin-top: 3%;">
                              <div class="col-md-3">
                                 <div>Template</div>
                              </div>
                              <div class="col-md-9">
                                    <select  class="form-control" id="catTemplate" disabled="true"  name="templateBlock" style="width: 35%;">
                                    </select>
                                    <input type="hidden" id="catTemplateHidden"  class="form-control"  value="" >
                                    <input type="hidden" id="inheritedCatTemplateID"  class="form-control"  value="" >

                                    <div class="row table-catalog1" style="margin: 0px;">
                                       <div class="col-md-12  TempInheritedYes" style="display:none; padding-left:0px !important;padding-right:0px;">
                                       <div class="setup-text btnUnLinkTemp small">Template in this Category is Linked from level above. <br/>Any changes made will not be saved.</div>
                                          <div class="btnUnLinkTemplate">
                                             <button id="unlinkTemplateID" type="button" class="btn btn-default">Un-Link</button>
                                          </div>
                                       </div>
                                       <div class="col-md-12 TempInheritedNo" style="display:none; padding-left:0px !important;padding-right:0px;">
                                       <div class="setup-text btnLinkTemp small">Template in this Category is Not Linked from level above.</div>
                                       <div class="btnLinkTemplate">
                                          <button id="linkTemplateID" type="button" class="btn btn-default ">Link</button></div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                              <div class="col-md-12" style="margin-top: 3%;">
                              <!-- <div class="col-md-3">
                                 <div>Image Source</div>
                              </div>
                              <div class="col-md-9">
                                 <select  class="form-control" id="catImage" disabled="true"  name="imageBlock" style="width: 35%;">
                                 </select>

                                 <div class="row table-catalog1" style="margin: 0px;">
                                    <div class="col-md-12  ImageInheritedYes" style="display:none; padding-left:0px !important;padding-right:0px;">
                                    <div class="setup-text btnUnLinkTemp small">Image Source in this Category is Linked from level above. <br/>Any changes made will not be saved.</div>
                                       <div class="btnUnLinkImage">
                                          <button id="unlinkImageID" type="button" class="btn btn-default">Un-Link</button>
                                       </div>
                                    </div>
                                    <div class="col-md-12 ImageInheritedNo" style="display:none; padding-left:0px !important;padding-right:0px;">
                                    <div class="setup-text btnLinkImage small">Image Source in this Category is Not Linked from level above.</div>
                                    <div class="btnLinkImage">
                                       <button id="linkImageID" type="button" class="btn btn-default ">Link</button></div>
                                    </div>
                                 </div>
                              </div> -->
                              </div>
                              </div>
                           </div>
                           <div class="tab-pane removeScroll" id="categoryTextSetupDiv">
                           </div>

                           <div class="tab-pane removeScroll" id="attributeSetupDiv">
                           </div>
                        </div>
                     </div>



                     <div class="tab-pane" id="5a">
                        <div class="row" style="margin: 0px;">
                           <div class="col-md-12">
                              <div class="catalogPlannerData">
                              </div>
                        </div>
                     </div>

                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- main part2-->
</div>
<div class="modal fade" id="addCategoryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" style="margin-top: 10%;width: 477px !important;">
    <div class="modal-content">
      <div class="modal-header">
          <!-- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> -->
          <h4 class="modal-title" id="myModalLabel">Add New Category / Collection</h4>
      </div>
      <form id="deleteRow" action="" method="post">
          <div class="modal-body ">
              <div class="form-group">
                  <div class="row">
                      <div class="col-md-11" style="padding-top: 2%;">
                          Category Name : <input type="text" name="categoryName" id="addCategoryName" value="">

                      </div>
                      <div class="col-md-10 col-md-offset-2" >
                          <span class="catNameErr" style="padding-left: 3%;color: red"></span>
                      </div>
                      <div class="col-md-11" >
                          Collection : <input type="checkbox" name="isCollection" id="addCategoryIsCollection" >
                      </div>
                  </div>
              </div>
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-default closeAddCat" data-dismiss="modal" aria-hidden="true" style="padding: 4px 20px !important;padding: 4px 20px !important;">Cancel</button>
              <button type="button"  id="submitCategory" class="btn btn-default" data-dismiss="modal">OK</button>
          </div>
        </form>
    </div>
</div>
</div>
@endsection