<!-- <head>
  <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
</head> -->
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
  <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
  <script>
    window.googletag = window.googletag || {cmd: []};
    googletag.cmd.push(function() {
      googletag.defineSlot('/2780290/Dir_Leaderboard', [728, 90], 'div-gpt-ad-1571941927118-0').addService(googletag.pubads());
      googletag.pubads().enableSingleRequest();
      googletag.enableServices();
    });
  </script>
</head>
<body>
  <!-- /2780290/Dir_Leaderboard -->
<div id="google_image_div">
  <!-- /2780290/Leaderboard -->
  <div id='div-gpt-ad-1571858509814-0' style='width: 728px; height: 90px; margin-left:auto; margin-right:auto;'>
  	<script>
      googletag.cmd.push(function() { googletag.display('div-gpt-ad-1571858509814-0'); });
    </script>
  </div>
</div>
<div class="mobileShow" id="directory" style="float:left;width:30%;">
  <div id="search">
    <!-- <div id="categoriesSearchSelect">
      Filter:
      <input type="checkbox" class="categoryType" value="RM"> Ingredients
      <input type="checkbox" class="categoryType" value="EQ"> Equipment
      <input type="checkbox" class="categoryType" value="PK"> Packaging
    </div> -->
    <div>
      <span style="font-weight:bold;">Search by Company Name</span><input type="text" class="search" id="searchCompany"/>
      <div id="searchCompany_auto" class="autocomplete" style="width:100%;">

      </div>
    </div>
      <hr class="hr-text" data-content="OR">
    <div>
      <span style="font-weight:bold;">Search by Category</span><input type="text" class="search" id="searchCategory"/>
      <div id="searchCategory_auto" class="autocomplete" style="width:100%;">

      </div>
    </div>
    <hr class="hr-text" data-content="OR">
    <div id="categories">
      <div id="browserType">
        <p style="padding-top:20px;"><span style="font-weight:bold;">Browse by Category</span>
        <select style="color:black;" name="productType" id="productType" onchange="getCategoryList()">
          <option value=""></option>
          <option value="RM">Ingredients</option>
          <option value="EQ">Equipment</option>
          <option value="PK">Packaging</option>
          <option value="MA">Machinery Agents</option>
        </select></p>
      </div>
      <div id="categoriesList">
        <!-- PHP inserts based on Producttype selection default: Ingredients (RM)-->
      </div>
    </div>
  </div>


</div>
<a class="screenHide fusion-button button-flat fusion-button-round button-small button-default button-1" href="javascript:mobileSwitch()">Back</a>
<div class="mobileHide" style="float:right;min-height:100px;width:60%;border:1px solid grey;" id="companies">
  <!-- PHP inserts based on subcategory selection default: empty-->
  <p style="text-align:center;margin-top:35px;">Search results will display here.</p>
</div>

<script>
var C_PLUGIN = '/wp-content/plugins/gomc/';



  function loadSubCategoriesList(data)
  {
    jQuery("#subcategories").empty();
    jQuery("#subcategories").append(data);
  }
  function loadCategoriesList(data)
  {
    //console.log(data);

    jQuery("#categoriesList").empty();
    jQuery("#categoriesList").append(data);
    assignCollapsibleListListener();
  }
  function loadCompanyList(data)
  {
    jQuery("#searchCategory_auto").empty();
    jQuery("#searchCategory").val("");
    jQuery("#searchCompany_auto").empty();
    jQuery("#searchCompany").val("");
    jQuery("#companies").empty();
    document.getElementById("google_image_div").scrollIntoView(true);
    window.scrollBy(0, -120);
    jQuery("#companies").append(data);
    assignCollapsibleListener();
    mobileSwitch();
  }
  jQuery(document).ready(function(){

    //getCategoryList();
    assignCollapsibleListListener();
    //listCompanies('RM2a','Acetic','Acid');
    // jQuery(".categoryClick").click(function()
    // {
    //   console.log("test");
    //     jQuery("#companies").empty();
    //     jQuery.post({
    //       url: C_PLUGIN + 'ajax.php',
    //       data: {command:"printCompany",payload:{"search":this.data("id")}}
    //
    //
    //     })
    //     .done(function(result)
    //     {
    //
    //     })
    // });

  })

  function assignCollapsibleListListener()
  {
    var coll = document.querySelectorAll(".collapsible_list");
    //coll.concat(document.getElementsByClassName("collapsible_list"))
    console.log(coll);
    var i;

    for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        console.log(content);
        if (content.style.display === "block") {
          content.style.display = "none";
        } else {
          content.style.display = "block";
        }
      });
    }
  }

  function assignCollapsibleListener()
  {
    var coll = document.querySelectorAll(".collapsible");
    //coll.concat(document.getElementsByClassName("collapsible_list"))
    console.log(coll);
    var i;

    for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        console.log(content);
        if (content.style.display === "block") {
          content.style.display = "none";
        } else {
          content.style.display = "block";
        }
      });
    }
  }

  function getCategoryList()
  {
    let arr = {command: "loadProductType", data: jQuery("#productType").val()}
    console.log(arr);
    jQuery.post({
      url: C_PLUGIN + 'ajax.php',
      data: arr
    }).done(function(result){
      //console.log(result);
      loadCategoriesList(result)
    });
  }
  function listCompanies(id,desc,parent)
  {
    //console.log(id)
    jQuery.post({
        url: C_PLUGIN + 'ajax.php',
        data: {command:"printCompany",payload:{"search":id,"name":desc,"parent":parent}}


      })
      .done(function(result)
      {
        //console.log(result);
        loadCompanyList(result);
      })
  }
  function listMACompanies(id)
  {
    jQuery.post({
        url: C_PLUGIN + 'ajax.php',
        data: {command:"printMACompany",payload:{"search":id}}


      })
      .done(function(result)
      {
        //console.log(result);
        loadCompanyList(result);
      })
  }

  function printCompanyCard(id)
  {
    //console.log(id)
    jQuery.post({
        url: C_PLUGIN + 'ajax.php',
        data: {command:"printCompanyCard",payload:{"search":id}}


      })
      .done(function(result)
      {
        //console.log(result);
        loadCompanyList(result);
      })
  }

  jQuery("#searchCompany").on('keyup', function()
  {
    console.log(jQuery("#searchCompany").val());
    if(!jQuery("#searchCompany").val())
    {
      jQuery("#searchCompany_auto").empty();
      return;
    }
    let cb = [];
    jQuery.each(jQuery('.categoryType:checked'), function() {
      cb.push(jQuery(this).val());
    });
    jQuery.post({
      url: C_PLUGIN + 'ajax.php',
      data: {command:"searchCompany",payload:{"search":jQuery("#searchCompany").val(),"filter":cb}}


    })
    .done(function(result)
    {
      if(result)
      {

        result = JSON.parse(result);
        console.log(result);
        let eq = result["EQ"];
        //console.log(org);
        let pk = result["PK"];
        //console.log(grants);
        let rm = result["RM"];
        if(eq.length == 0 && pk.length == 0 && rm.length == 0)
        {
          jQuery("#searchCompany_auto").empty();
          return;
        }
        jQuery("#searchCompany_auto").empty();
        if(eq.length > 0)
        {
          jQuery("#searchCompany_auto").append("<span class=\"autocomplete_Title\">Equipment</span>");
          jQuery("#searchCompany_auto").append("<ul>");

          for(let i=0; i < eq.length ; i++)
          {
            jQuery("#searchCompany_auto").append("<a href=\"javascript:printCompanyCard('"+ eq[i]["id"] +"');\"><li class=\"autocomplete-items\">"+eq[i]["CompanyName"]+"</li></a>");
          }
          jQuery("#searchCompany_auto").append("</ul>");
        }
        if(pk.length > 0)
        {
          jQuery("#searchCompany_auto").append("<span class=\"autocomplete_Title\">Packaging</span>");
          jQuery("#searchCompany_auto").append("<ul>");

          for(let i=0; i < pk.length ; i++)
          {
            jQuery("#searchCompany_auto").append("<a href=\"javascript:printCompanyCard('"+ pk[i]["id"] +"');\"><li class=\"autocomplete-items\">"+pk[i]["CompanyName"]+"</li></a>");
          }
          jQuery("#searchCompany_auto").append("</ul>");
        }
        if(rm.length > 0)
        {
          jQuery("#searchCompany_auto").append("<span class=\"autocomplete_Title\">Ingredients</span>");
          jQuery("#searchCompany_auto").append("<ul>");

          for(let i=0; i < rm.length ; i++)
          {
            jQuery("#searchCompany_auto").append("<a href=\"javascript:printCompanyCard('"+ rm[i]["id"] +"');\"><li class=\"autocomplete-items\">"+rm[i]["CompanyName"]+"</li></a>");
          }
          jQuery("#searchCompany_auto").append("</ul>");
        }
      }
    })

    .fail(function(result)
    {
      console.log("Failure!");
      console.log(result);
    })
  });


  jQuery("#searchCategory").on('keyup', function()
  {
    console.log(jQuery("#searchCategory").val());
    if(!jQuery("#searchCategory").val())
    {
      jQuery("#searchCategory_auto").empty();
      return;
    }
    let cb = [];
    jQuery.each(jQuery('.categoryType:checked'), function() {
      cb.push(jQuery(this).val());
    });
    jQuery.post({
      url: C_PLUGIN + 'ajax.php',
      data: {command:"searchCategory",payload:{"search":jQuery("#searchCategory").val(),"filter":cb}}


    })
    .done(function(result)
    {
      if(result)
      {
        result = JSON.parse(result);
        console.log(result);

        let eq = result["eq"];
        //console.log(org);
        let pk = result["pk"];
        //console.log(grants);
        let rm = result["rm"];
        if(eq.length == 0 && pk.length == 0 && rm.length == 0)
        {
          jQuery("#searchCategory_auto").empty();
          return;
        }
        jQuery("#searchCategory_auto").empty();
        if(eq.length > 0)
        {
          jQuery("#searchCategory_auto").append("<span class=\"autocomplete_Title\">Equipment</span>");
          jQuery("#searchCategory_auto").append("<ul>");

          for(let i=0; i < eq.length ; i++)
          {
            jQuery("#searchCategory_auto").append("<a href=\"javascript:listCompanies('"+ eq[i]["link"] +"','"+eq[i]["fullDesc"]+"');\"><li class=\"autocomplete-items\">"+eq[i]["fullDesc"]+"</li></a>");
          }
          jQuery("#searchCategory_auto").append("</ul>");
        }
        if(pk.length > 0)
        {
          jQuery("#searchCategory_auto").append("<span class=\"autocomplete_Title\">Packaging</span>");
          jQuery("#searchCategory_auto").append("<ul>");
          for(let i=0; i < pk.length ; i++)
          {
            jQuery("#searchCategory_auto").append("<a href=\"javascript:listCompanies('"+ pk[i]["link"] +"','"+pk[i]["fullDesc"]+"');\"><li class=\"autocomplete-items\">"+pk[i]["fullDesc"]+"</li></a>");
          }
          jQuery("#searchCategory_auto").append("</ul>");
        }
        if(rm.length > 0)
        {
          jQuery("#searchCategory_auto").append("<span class=\"autocomplete_Title\">Ingredients</span>");
          jQuery("#searchCategory_auto").append("<ul>");
          for(let i=0; i < rm.length ; i++)
          {
            jQuery("#searchCategory_auto").append("<a href=\"javascript:listCompanies('"+ rm[i]["link"] +"','"+rm[i]["fullDesc"]+"');\"><li class=\"autocomplete-items\">"+rm[i]["fullDesc"]+"</li></a>");
          }
          jQuery("#searchCategory_auto").append("</ul>");
        }
        //mobileSwitch();
      }
    })

    .fail(function(result)
    {
      console.log("Failure!");
      console.log(result);
    })
  });
function mobileSwitch()
{
  jQuery( "div .mobileHide" ).removeClass( "mobileHide" ).addClass( "mobileTemp" );
  jQuery( "div .mobileShow" ).removeClass( "mobileShow" ).addClass( "mobileHide" );
  jQuery( "div .mobileTemp" ).removeClass( "mobileTemp" ).addClass( "mobileShow" );
}
</script>
</body>
{"id":139,"date":"2019-05-23T16:19:58","date_gmt":"2019-05-23T16:19:58","guid":{"rendered":"http:\/\/gomc.mcservices.com\/?page_id=139"},"modified":"2019-11-18T19:37:50","modified_gmt":"2019-11-18T19:37:50","slug":"supplier-directory","status":"publish","type":"page","link":"https:\/\/gomc.com\/index.php\/supplier-directory\/","title":{"rendered":"Supplier Directory"},"content":{"rendered":"\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/gomc.com\/index.php\/wp-json\/wp\/v2\/pages\/139"}],"collection":[{"href":"https:\/\/gomc.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gomc.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gomc.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/gomc.com\/index.php\/wp-json\/wp\/v2\/comments?post=139"}],"version-history":[{"count":23,"href":"https:\/\/gomc.com\/index.php\/wp-json\/wp\/v2\/pages\/139\/revisions"}],"predecessor-version":[{"id":26396,"href":"https:\/\/gomc.com\/index.php\/wp-json\/wp\/v2\/pages\/139\/revisions\/26396"}],"wp:attachment":[{"href":"https:\/\/gomc.com\/index.php\/wp-json\/wp\/v2\/media?parent=139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}