@extends('layouts.acorn.acorn_frontend_app')
@section('header_styles')

@endsection
@section('content')
<div class="row ss-box-wrapper">
  <div class="col-7 ss-box">
    <h1>SLSI Standard Search</h1>
    <div class="card mb-5">
      <div class="row">
        <div class="col-md-12">
          <div class="form-group">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="sc-1978d07b-2 PrqQX"><path d="M508.5 468.9 387.1 347.5c-2.3-2.3-5.3-3.5-8.5-3.5h-13.2c31.5-36.5 50.6-84 50.6-136C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c52 0 99.5-19.1 136-50.6v13.2c0 3.2 1.3 6.2 3.5 8.5l121.4 121.4c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z"></path></svg>  
            <input type="text" name="key_word" id="key_word" class="form-control" autocomplete="off" placeholder="Search for keyword, standard name or code">
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- <div class="col-5 standard-cat-status-box" style="padding-top: 50px !important;">
    <section class="scroll-section" id="tags">
      <div class="card mb-5" style="padding-top: 0; margin-bottom: 0 !important; background: transparent; box-shadow: none !important;">
        <div class="card-body" style="padding-top: 0; padding-bottom: 0;">
          <form>
            <div class="row">
              <div class="col-12 col-sm-6 col-xl-6 d-grid gap-2 mb-3 mt-3">
                <button id="standardCategoryBtn" class="btn btn-quaternary" type="button">Standard Category</button>
              </div>
              <div class="col-12 col-sm-6 col-xl-6 mt-3">
                <div id="standars_status_data_load" class="w-100">

                </div>
              </div>
              <div class="col-12 col-sm-2 col-xl-2">
                <button id="filter_submit_btn" class="btn btn-primary" type="button">Search</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </section>
  </div> -->
</div>
<div class="row">
  <div class="col-12 col-xl-4 col-xxl-3">
    <div class="row">
      <div class="col-12">
        <div class="ss-filter-desktop">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" style="height: 24px; margin-right: 16px; float: left;"><path d="M496 72H288V48c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v24H16C7.2 72 0 79.2 0 88v16c0 8.8 7.2 16 16 16h208v24c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-24h208c8.8 0 16-7.2 16-16V88c0-8.8-7.2-16-16-16zm0 320H160v-24c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v24H16c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h80v24c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-24h336c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16zm0-160h-80v-24c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v24H16c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h336v24c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-24h80c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z"></path></svg>  
          <h2>Filters</h2>
        </div>

        <div class="ss-filter-mobile">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" style="height: 24px; margin-right: 16px; float: left;"><path d="M496 72H288V48c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v24H16C7.2 72 0 79.2 0 88v16c0 8.8 7.2 16 16 16h208v24c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-24h208c8.8 0 16-7.2 16-16V88c0-8.8-7.2-16-16-16zm0 320H160v-24c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v24H16c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h80v24c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-24h336c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16zm0-160h-80v-24c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v24H16c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h336v24c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-24h80c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z"></path></svg>  
          <a class="" data-bs-toggle="collapse" href="#standard-search-filter-wrapper" role="button" aria-expanded="true" aria-controls="standard-search-filter-wrapper">
            <h2>Click here for Filters</h2></a>
        </div>  
      </div>
    </div>
    <hr>
    <div id="standard-search-filter-wrapper" class="collapse">
    <div class="row">
      <div class="col-12">
        <section class="scroll-section" id="tasks">
          <h4 class="">Standard Industry</h4>
          
          <hr>
          <div id="standard_industry_content_wrapper" class="card sh-40">
            <div class="card-body mb-n2 scroll-out h-100" style="padding-top: 0; !important">
              <div class="scroll h-100 os-host os-theme-dark os-host-resize-disabled os-host-scrollbar-horizontal-hidden os-host-scrollbar-vertical-hidden os-host-transition"><div class="os-resize-observer-host observed"><div class="os-resize-observer" style="left: 0px; right: auto;"></div></div><div class="os-size-auto-observer observed" style="height: calc(100% + 1px); float: left;"><div class="os-resize-observer"></div></div><div class="os-content-glue" style="margin: 0px -15px; height: 394px; width: 488px;"></div><div class="os-padding"><div class="os-viewport os-viewport-native-scrollbars-invisible"><div class="os-content" style="padding: 0px 15px; height: auto; width: 100%;">
                <div id="standard_industry_content">

                </div>
              </div></div></div><div class="os-scrollbar os-scrollbar-horizontal os-scrollbar-unusable"><div class="os-scrollbar-track os-scrollbar-track-off"><div class="os-scrollbar-handle" style="width: 100%; transform: translate(0px, 0px);"></div></div></div><div class="os-scrollbar os-scrollbar-vertical os-scrollbar-unusable"><div class="os-scrollbar-track os-scrollbar-track-off"><div class="os-scrollbar-handle" style="height: 100%; transform: translate(0px, 0px);"></div></div></div><div class="os-scrollbar-corner"></div></div>
            </div>
          </div>
        </section>
      </div>
      
      
    </div>
    <hr>
    <div class="row">
      <div class="col-12">
        <section class="scroll-section" id="tasks">
          <h4 class="">Standard Category</h4>
          
          <hr>
          <div id="standard_category_content_wrapper" class="card sh-40">
            <div class="card-body mb-n2 scroll-out h-100" style="padding-top: 0; !important">
              <div class="scroll h-100 os-host os-theme-dark os-host-resize-disabled os-host-scrollbar-horizontal-hidden os-host-scrollbar-vertical-hidden os-host-transition"><div class="os-resize-observer-host observed"><div class="os-resize-observer" style="left: 0px; right: auto;"></div></div><div class="os-size-auto-observer observed" style="height: calc(100% + 1px); float: left;"><div class="os-resize-observer"></div></div><div class="os-content-glue" style="margin: 0px -15px; height: 394px; width: 488px;"></div><div class="os-padding"><div class="os-viewport os-viewport-native-scrollbars-invisible"><div class="os-content" style="padding: 0px 15px; height: auto; width: 100%;">
                <div id="standard_category_content">
dddd
                </div>
              </div></div></div><div class="os-scrollbar os-scrollbar-horizontal os-scrollbar-unusable"><div class="os-scrollbar-track os-scrollbar-track-off"><div class="os-scrollbar-handle" style="width: 100%; transform: translate(0px, 0px);"></div></div></div><div class="os-scrollbar os-scrollbar-vertical os-scrollbar-unusable"><div class="os-scrollbar-track os-scrollbar-track-off"><div class="os-scrollbar-handle" style="height: 100%; transform: translate(0px, 0px);"></div></div></div><div class="os-scrollbar-corner"></div></div>
            </div>
          </div>
        </section>
      </div>
    </div>
    <hr>
    <div class="row">
      <div class="col-12">
        <section class="scroll-section" id="tasks">
          <h4 class="">Standard Status</h4>
          
          <hr>
          <div id="standard_status_content_wrapper" class="card sh-40">
            <div class="card-body mb-n2 scroll-out h-100" style="padding-top: 0; !important">
              <div class="scroll h-100 os-host os-theme-dark os-host-resize-disabled os-host-scrollbar-horizontal-hidden os-host-scrollbar-vertical-hidden os-host-transition"><div class="os-resize-observer-host observed"><div class="os-resize-observer" style="left: 0px; right: auto;"></div></div><div class="os-size-auto-observer observed" style="height: calc(100% + 1px); float: left;"><div class="os-resize-observer"></div></div><div class="os-content-glue" style="margin: 0px -15px; height: 394px; width: 488px;"></div><div class="os-padding"><div class="os-viewport os-viewport-native-scrollbars-invisible"><div class="os-content" style="padding: 0px 15px; height: auto; width: 100%;">
                <div id="standard_status_content">
vvvv
                </div>
              </div></div></div><div class="os-scrollbar os-scrollbar-horizontal os-scrollbar-unusable"><div class="os-scrollbar-track os-scrollbar-track-off"><div class="os-scrollbar-handle" style="width: 100%; transform: translate(0px, 0px);"></div></div></div><div class="os-scrollbar os-scrollbar-vertical os-scrollbar-unusable"><div class="os-scrollbar-track os-scrollbar-track-off"><div class="os-scrollbar-handle" style="height: 100%; transform: translate(0px, 0px);"></div></div></div><div class="os-scrollbar-corner"></div></div>
            </div>
          </div>
        </section>
      </div>
    </div>
    </div>
  </div>

  <div class="col-12 col-xl-8 col-xxl-9 mb-5">
    <div class="row">
      <!-- <div class="col-12">
        <section class="scroll-section" id="tags">
          <div class="card mb-5" style="padding-top: 0; margin-bottom: 0 !important;">
            <div class="card-body" style="padding-top: 0; padding-bottom: 0;">
              <form>
                <div class="row">
                  <div class="col-12 col-sm-5 col-xl-5 d-grid gap-2 mb-3 mt-3">
                    <button id="standardCategoryBtn" class="btn btn-quaternary" type="button">Standard Category</button>
                  </div>
                  <div class="col-12 col-sm-7 col-xl-7 mt-3">
                    <div id="standars_status_data_load" class="w-100">

                    </div>
                  </div>
                  <div class="col-12 col-sm-2 col-xl-2">
                    <button id="filter_submit_btn" class="btn btn-primary" type="button">Search</button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </section>
      </div> -->
      
    </div>
    <!-- <hr style="margin-top: 0;"> -->
    <div class="row">
      <div class="col-12">
        <h2>Results <span id="totalResuluCount" style="font-size: 12px;"></span></h2>
      </div>
    </div>
    <hr>
    <section id="stdResultList">

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






<div class="modal fade scroll-out" id="standardCategoryDataModal" tabindex="-1" role="dialog" aria-labelledby="overlayScrollShortLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable short modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="overlayScrollShortLabel">Standard category</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="scroll-track-visible">
          <div id="standard_category_data_load">

          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade modal-right scroll-out-negative" id="standardDetailModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable full" style="max-width: 80%;">
    <div class="modal-content">
      <div class="modal-body" style="padding-top: 0px;">
        <div id="scroll_track_visible" class="scroll-track-visible">
          <section class="scroll-section" id="validation">
            <div class="container-fluid">


              <div class="row btn-close-wrapper">
                <div class="col-12">
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="float: right;"></button>
                </div>
              </div>
              <div id="standardDetailContent" class="scroll-track-visible">
                
              </div>
              </div>
            </div>
          </div>

      </div>
    </div>
  </div>
</div>
@endsection
@section('footer_scripts')
  <!--<script src="{{ asset('assets/pspdfkit/pspdfkit.js') }}"></script>-->
  <script type="text/javascript">
    var industryArr = [];
    var industryCount = 0;
    var standardIndustryArr = [];
    var categoryArr = [];
    var categoryCount = 0;
    var standardCategoryArr = [];
    var statusArr = [];
    var statusCount = 0;
    var standardStatusArr = [];

    var stdDetail = [];
    var keyWordSelection;

    $(document).ready(function(){
      standard_industry_loading();
      standard_category_loading();
      standard_status_loading();
      standardFilter();
       
        //standardFilter();
      
      $('#key_word').on('keyup',function () {
        keyWordSelection = $(this).val();
        if(this.value.length >= 3 || this.value == "") {
          standardFilter();
        }
      });      
    });

    function standard_industry_loading(){
      $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      });

      $.ajax({
        url: frontendURL+'load_standard_industry',
        type: "POST",
        data: {
          
        },
        success: function(data){
          $('#standard_industry_content').html(data);     
        }
      });
    }

    function standard_category_loading(){
      $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      });

      $.ajax({
        url: frontendURL+'load_standard_category',
        type: "POST",
        data: {
          
        },
        success: function(data){
          $('#standard_category_content').html(data);        
        }
      });
    }

    function standard_status_loading(){
      $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      });

      $.ajax({
        url: frontendURL+'load_standard_status',
        type: "POST",
        data: {
          
        },
        success: function(data){
          $('#standard_status_content').html(data);
        }
      });
    }

    function industryOperate(id){
      if(document.getElementById('stdIndustry_'+id).checked){
        industryArr.push(id);
      }else{
        industryArr.splice($.inArray(id, industryArr), 1);
      }

      standardFilter();
    }

    function categoryOperate(id){
      if(document.getElementById('stdCategory_'+id).checked){
        categoryArr.push(id);
      }else{
        categoryArr.splice($.inArray(id, categoryArr), 1);
      }

      standardFilter();
    }

    function statusOperate(id){
      if(document.getElementById('stdStatus_'+id).checked){
        statusArr.push(id);
      }else{
        statusArr.splice($.inArray(id, statusArr), 1);
      }

      standardFilter();
    }

    function standardFilter(){
      $("#stdResultList").html('');

      $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      });

      $.ajax({
        url: frontendURL+'standard_filter',
        type: "POST",
        data: {
          'standard_industry' : industryArr,
          'standard_category' : categoryArr,
          'standard_status' : statusArr,
          'key_word' : keyWordSelection,
        },
        success: function(data){
          $('#stdResultList').html(data);     
        }
      });
    }

    // function standardListLoad(){
    //   $("#stdResultList").html('');

    //   $.ajaxSetup({
    //     headers: {
    //       'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    //     }
    //   });

    //   $.ajax({
    //     url: frontendURL+'standard_filter',
    //     type: "POST",
    //     data: {
    //       'load' : 'all'
    //     },
    //     success: function(data){
    //       $('#stdResultList').html(data);     
    //     }
    //   });
    // }
    

    









    // $( "#standardCategoryBtn" ).click(function() {
    //   categoryArr = [];
    //   standard_category_loading();
    // });

    // function standard_category_loading_by_standard_industry(){
    //   console.log(industryArr);
    //   $.ajaxSetup({
    //     headers: {
    //       'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    //     }
    //   });

    //   $.ajax({
    //     url: frontendURL+'load_standard_category_with_standard_industry_by_standard_industry_id',
    //     type: "POST",
    //     data: {
    //       'standard_industry' : industryArr,
    //     },
    //     success: function(data){
    //       $('#standard_category_data_load').html(data);
    //       $('#standardCategoryDataModal').modal('show');
    //     }
    //   });
    // }

    

    

    // $("#standardCategoryDataModal").on('hide.bs.modal', function(){
    //   standardFilter();
    // });

    // $("#filter_submit_btn").click(function(){
    //   standardStatusArr = $("#standard_status").val();
    //   standardFilter();
    // });

    

    function standardDetailLoad(id){
      stdDetail = [];
      var addToCartBtn = true;
      $('#addToCartBtn').show();
      $('#addedToCartBtn').hide();

      $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      });

      $.ajax({
        url: frontendURL+'standard/view',
        type: "POST",
        data: {
          'standard_id' : id,
        },
        success: function(data){           
          $('#standardDetailContent').html(data); 
          $('#standardDetailModal').modal('show');
          $('#standardDetailContent').overlayScrollbars({});
          
        }
      });
    }

    function addToCart(id){
      $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      });

      $.ajax({
        url: frontendURL+'standard/add_to_cart',
        type: "POST",
        data: {
          'standard_id' : id

        },
        success: function(data){
          $("#cartItemCount").html(data.result.item_count);
          if(data.success == true){
            $('#addToCartBtn').hide();
            $('#addedToCartBtn').show();
            $('#proceedToCheckoutBtn').show();

            jQuery.notify(
              {title: 'Success!', message: data.msg},
              {
                type: 'success',
                delay: 5000,
                placement: {
                  from: 'top',
                  align: 'left',
                },
              },
            );
          }else{
            jQuery.notify(
              {title: 'Opps!', message: data.msg},
              {
                type: 'danger',
                delay: 5000,
                placement: {
                  from: 'top',
                  align: 'left',
                },
              },
            );
          }
        }
      });
    }

    // PSPDFKit.load({
    //   container: "#pspdfkit",
    //     document: "{{ asset('assets/pspdfkit/document.pdf') }}" // Add the path to your document here.
    //     //document: frontendURL+'assets/pspdfkit/document.pdf'
    // })
    // .then(function(instance) {
    //   console.log("PSPDFKit loaded", instance);
    // })
    // .catch(function(error) {
    //   console.error(error.message);
    // });
  </script>
@endsection