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

@endsection
@section('content')
<div class="row">
  <div class="col-8">
    <h1>SLSI Standard Search.</h1>
    <div class="card mb-5">

      <div class="row">
        <div class="col-md-12">
          <div class="form-group">
            <input type="text" name="key_word" id="key_word" class="form-control" autocomplete="off">
          </div>
          <div id="suggestion_list"></div>
        </div>
        <div class="col-lg-3"></div>
      </div>


      <!-- <form>
        <div class="w-100">
          <select id="key_word" name="key_word"></select>
          onchange="getStdResultByKeyWord()"
        </div>
      </form> -->
    </div>
  </div>
</div>
<div class="row">
  <div class="col-12 col-xl-4 col-xxl-3">
    <div class="row">
      <div class="col-12">
        <h2>Filters</h2>
      </div>
    </div>
    <hr>
    <div class="row">
      <div class="col-12">
        <section class="scroll-section" id="tasks">
          <h4 class="">Standard Industry</h4>
          <hr>
          <div 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>
  </div>
  <div class="col-12 col-xl-8 col-xxl-9 mb-5">
    <div class="row">
      <div class="col-12">
        <h2>Results <span style="font-size: 12px;">(1329)</span></h2>
      </div>
    </div>
    <hr>
    <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-4 col-xl-4 d-grid gap-2 mb-3">
                    <button id="standardCategoryBtn" class="btn btn-quaternary" type="button">Standard Category</button>
                  </div>
                  <div class="col-12 col-sm-6 col-xl-6">
                    <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>
    <div class="row">
      <div class="col-12 mb-5">
        <section class="scroll-section" id="additionalInfo">
          <div class="tab-content">
            <div class="tab-pane fade show active" id="additionalInfoWeek">
              
            </div>
          </div>
        </section>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <section class="scroll-section" id="workingWithIcons">
          <nav aria-label="Page navigation example">
            <ul id="paginationContent" class="pagination bordered justify-content-end">
              
            </ul>
          </nav>
        </section>
      </div>
    </div>
  </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% !important;">
      <div class="modal-content">
        <div class="modal-body" style="padding-top: 10px;">
          <div class="row">
            <div class="col-12">
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="float: right;"></button>
            </div>
          </div>
        
          <div class="scroll-track-visible">
            <div class="card mb-5">
              <div class="card-body" style="background-color: #1ea8e7;">
                <div class="row">
                  <div class="col-9">
                    <h4 id="stdNumber" class="mb-5" style="color: #fff;"></h4>
                    <h2 id="stdTitle" class="mb-5" style="color: #fff;"></h2>
                    <p id="stdSubject" class="mb-5" style="color: #fff;"></p>
                    <h4 id="stdDate" class="mb-2" style="color: #fff;"></h4>
                  </div>
                  <div class="col-3">
                    <div class="col-auto">
                      <div class="card active">
                        <div class="h-100 d-flex flex-column justify-content-between card-body align-items-center" style="padding:10px;">
                          <div class="heading text-center mb-0 sh-8 d-flex align-items-center lh-1-25" style="font-size: 20px;">Add to Collection</div>
                          <div id="stdPriceLkr" class="display-5 text-primary mb-5"></div>
                          <button id="addToCartBtn" class="btn btn-icon btn-icon-start btn-primary mb-1" type="button" onclick="addToCart()">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="acorn-icons acorn-icons-plus undefined"><path d="M10 17 10 3M3 10 17 10"></path></svg>
                            <span>Add to Cart</span>
                          </button>
                          <button id="addedToCartBtn" class="btn btn-icon btn-icon-start btn-success mb-1" type="button" style="display:none">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="acorn-icons acorn-icons-check undefined"><path d="M10 17 10 3M3 10 17 10"></path></svg>
                            <span>Added to Cart</span>
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <ul class="nav nav-tabs nav-tabs-title nav-tabs-line-title responsive-tabs" id="lineTitleTabsContainer" role="tablist">
              <li class="nav-item" role="presentation">
                <a class="nav-link active" data-bs-toggle="tab" href="#firstLineTitleTab" role="tab" aria-selected="true">Overview</a>
              </li>
              <li class="nav-item" role="presentation">
                <a class="nav-link" data-bs-toggle="tab" href="#secondLineTitleTab" role="tab" aria-selected="false">Preview</a>
              </li>
              <li class="nav-item" role="presentation">
                <a class="nav-link" data-bs-toggle="tab" href="#thirdLineTitleTab" role="tab" aria-selected="false">Standard Detail</a>
              </li>
              <!-- An empty list to put overflowed links -->
              <li class="nav-item dropdown ms-auto pe-0 d-none responsive-tab-dropdown">
                <a
                  class="btn btn-icon btn-icon-only btn-background pt-0 bg-transparent pe-0"
                  href="#"
                  data-bs-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  <i data-acorn-icon="more-horizontal"></i>
                </a>
                <ul class="dropdown-menu mt-2 dropdown-menu-end"></ul>
              </li>
            </ul>

            <div class="card mb-5">
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade active show" id="firstLineTitleTab" role="tabpanel">
                    <h5 class="card-title">Standard Overview</h5>
                    <p id="stdOverview" class="card-text"></p>
                  </div>
                  <div class="tab-pane fade" id="secondLineTitleTab" role="tabpanel">
                    <h5 class="card-title">Standard Preview</h5>
                    <p id="stdPreview" class="card-text"></p>
                  </div>
                  <div class="tab-pane fade" id="thirdLineTitleTab" role="tabpanel">
                    <h2 class="card-title" style="margin-bottom: 3rem;">Standard Details</h2>
                    <div class="row">
                      <div class="col-4">
                        <h6>Scope</h6>
                      </div>
                      <div class="col-8">
                        <p id="stdDetail" class="card-text"></p>
                      </div>
                    </div>
                    <hr>
                    <div class="row">
                      <div class="col-4">
                        <h6>ICS Number</h6>
                      </div>
                      <div class="col-8">
                        <p id="icsNumber" class="card-text"></p>
                      </div>
                    </div>
                    <hr>
                    <div class="row">
                      <div class="col-4">
                        <h6>International Relationships</h6>
                      </div>
                      <div class="col-8">
                        <p id="internationalRelationships" class="card-text"></p>
                      </div>
                    </div>
                    <hr>
                    <div class="row">
                      <div class="col-4">
                        <h6>No Of Pages</h6>
                      </div>
                      <div class="col-8">
                        <p id="noOfPages" class="card-text"></p>
                      </div>
                    </div>
                    <hr>
                    
                  </div>
                </div>
              </div>
            </div>
            
            

          </div>
        </div>
      </div>
    </div>
  </div>
@endsection
@section('footer_scripts')
  <script type="text/javascript">
    var industryArr = [];
    var industryCount = 0;
    var standardIndustryArr = [];
    var categoryArr = [];
    var standardStatusArr = [];
    var stdDetail = [];
    var keyWordSelection;

    $(document).ready(function(){
      standard_industry_loading();
      standard_status_loading();
      
      $('#key_word').on('keyup',function () {
          var key_word = $(this).val();
          $.ajax({
              url: frontendURL+'standard_key_word_suggestion_loading',
              type:'POST',
              data:{
                'key_word':key_word
              },
              success:function (data) {
                  $('#suggestion_list').html(data);
              }
          })
      });

      $(document).on('click', 'li', function(){
          var value = $(this).text();
          $('#key_word').val(value);
          $('#suggestion_list').html("");
      });

      //$('#standardCategory').select2({});
      // $('#standardStatus').select2({});
      // $('#standard_status').select2({
      //         placeholder: 'Search',
      //       });
    });

    // jQuery('#key_word').select2({
    //   ajax: {
    //     url: frontendURL+'api/standard_key_word_suggestion_loading',
    //     type: "POST",
    //     dataType: 'json',
    //     delay: 250,
    //     data: function (params) {
    //       console.log(params);
    //       return {
    //         search: {value: params.term},
    //         page: params.page,
    //       };
    //     },
    //     processResults: function (data, page) {
    //       console.log(data, page);
    //       return {
    //         results: data.data,
    //       };
    //     },
    //     cache: true,
    //   },
    //   placeholder: 'Search',
    //   escapeMarkup: function (markup) {
    //     return markup;
    //   },
    //   minimumInputLength: 3,
    //   templateResult: function formatResult(result) {
    //     console.log('result');
    //     if (result) {
    //       console.log(result.name);
    //       if (result.loading) return result.name;
    //       var markup = '<div class="clearfix"><div>' + result.name + '</div>';
    //       // markup += '<div class="text-muted">' + result.Name + '</div>';
    //       // var markup = '<div class="clearfix"><div>123</div>';
    //       // markup += '<div class="text-muted">456</div>';
    //     }

    //     // if (result.loading) return result.text;
    //     // var markup = '<div class="clearfix"><div>' + result.Name + '</div>';
    //     // if (result.Description) {
    //     //   markup += '<div class="text-muted">' + result.id + '</div>';
    //     // }
    //     return markup;
    //   },
    //   templateSelection: function formatResultSelection(result) {
    //     console.log(result);
    //     keyWordSelection = result.name;
    //     console.log(keyWordSelection);
    //     if(keyWordSelection != undefined){
    //       standardFilter();
    //     }
        
    //     return result.name;
    //   },
    // });

    // function getStdResultByKeyWord(){
    //   var key_word = $("#key_word").val();
    //   console.log(key_word);
    //   console.log(keyWordSelection);
    //   //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);

          // if(data.success == true){
          //   var data_arr = data.data;
          //   standardIndustryArr = data_arr;
          //   var standard_industry_content = '';
          //   for(i = 0; i <data_arr.length; i++){
          //     standard_industry_content += '<div class="mb-2">'+
          //       '<label class="form-check w-100 checked-line-through checked-opacity-75">'+
          //       '<input type="checkbox" class="form-check-input std-industry" id="stdIndustry_'+data_arr[i].id+'" name="std_industry" value="'+data_arr[i].id+'" onchange="industryOperate('+data_arr[i].id+')">'+
          //       '<span class="form-check-label">'+
          //       '<span>'+data_arr[i].name+'</span>'+
          //       '<span class="text-muted text-small mt-0" style="float: right;">749</span>'+
          //       '</span>'+
          //       '</label>'+
          //       '</div>';
          //   }
            
          //   $("#standard_industry_content").html(standard_industry_content);
          // }          
        }
      });
    }

    function industryOperate(id){
      categoryArr = [];
      if(document.getElementById('stdIndustry_'+id).checked){
        industryArr.push(id);
      }else{
        industryArr.splice($.inArray(id, industryArr), 1);
      }
    }
    
    $( "#standardCategoryBtn" ).click(function() {
      categoryArr = [];
      if(industryArr.length > 0){
        standard_category_loading_by_standard_industry();
      }else{
        standard_category_loading();
      }
    });

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

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

          // if(data.success == true){
          //   var standard_category_content = '';
          //   var stdCat = data.data;

          //   for(i = 0; i < standardIndustryArr.length; i++){
          //     standard_category_content += '<div class="mb-5">'+
          //       '<h2>'+standardIndustryArr[i].name+'</h2>';
                
          //       for(j = 0; j < stdCat.length; j++){
          //         if(standardIndustryArr[i].id == stdCat[j].standard_industry_id){
          //           standard_category_content += '<div class="form-check form-switch">'+
          //             '<input class="form-check-input std_category" type="checkbox" id="stdCategory_'+stdCat[j].id+'" name="std_category" value="'+stdCat[j].id+'" onchange="categoryOperate('+stdCat[j].id+')">'+
          //             '<label class="form-check-label" for="flexSwitchCheckDefault">'+stdCat[j].name+'</label>'+
          //             '</div>';
          //         }
          //       }

          //       standard_category_content += '</div>';
          //   }

          //   $("#standard_category_data_load").html('');
          //   $("#standard_category_data_load").html(standard_category_content);
          //   $('#standardCategoryDataModal').modal('show');
          // }          
        }
      });
    }

    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');

          // if(data.success == true){
          //   var standard_category_content = '';
          //   var stdCat = data.data;
          //   for(i = 0; i < industryArr.length; i++){
          //     for(j = 0; j < standardIndustryArr.length; j++){
          //       if(industryArr[i] == standardIndustryArr[j].id){
          //         standard_category_content += '<div class="mb-5">'+
          //           '<h2>'+standardIndustryArr[j].name+'</h2>';
          //           for(k = 0; k < stdCat.length; k++){
          //             if(standardIndustryArr[j].id == stdCat[k].standard_industry_id){
          //               standard_category_content += '<div class="form-check form-switch">'+
          //                 '<input class="form-check-input std_category" type="checkbox" id="stdCategory_'+stdCat[k].id+'" name="std_category" value="'+stdCat[k].id+'" onchange="categoryOperate('+stdCat[k].id+')">'+
          //                 '<label class="form-check-label" for="flexSwitchCheckDefault">'+stdCat[k].name+'</label>'+
          //                 '</div>';
          //             }
          //           }
          //       }

          //       standard_category_content += '</div>';
          //     }
          //   }
            
          //   $("#standard_category_data_load").html('');
          //   $("#standard_category_data_load").html(standard_category_content);
          //   $('#standardCategoryDataModal').modal('show');
          // }          
        }
      });
    }

    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){
          $('#standars_status_data_load').html(data);
          $('#standard_status').select2({
            minimumResultsForSearch: Infinity,
            placeholder: 'Standard Status Search',
          });


          // if(data.success == true){
          //   var data_arr = data.data;
          //   var standard_status_content = '';
          //   standard_status_content += '<select multiple="multiple" id="standard_status" name="standard_status" >';
          //   for(i = 0; i < data_arr.length; i++){
          //     standard_status_content += '<option value="'+data_arr[i].id+'">'+data_arr[i].name+'</option>'
          //   }

          //   standard_status_content += '</select>';
          //   $("#standars_status_data_load").html(standard_status_content);
          //   $('#standard_status').select2({
          //     minimumResultsForSearch: Infinity,
          //     placeholder: 'Standard Status Search',
          //   });
          // }          
        }
      });
    }

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

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

    function standardFilter(){

      console.log(keyWordSelection);
      $("#additionalInfoWeek").html('');
      $("#paginationContent").html('');
      $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      });

      $.ajax({
        url: frontendURL+'api/standard_filter',
        type: "POST",
        data: {
          'standard_industry' : industryArr,
          'standard_category' : categoryArr,
          'standard_status' : standardStatusArr,
          'key_word' : keyWordSelection,
        },
        success: function(data){
          if(data.success == true){
            if(data.data.result != undefined || data.data.result != null){
              var data_arr = data.data.result;
              var standard_content = '';
              //string.substring(0, length);
              for(i = 0; i < data_arr.length; i++){
                standard_content += '<div class="card mb-2">'+
                    '<a href="#" onclick="standardDetailLoad('+data_arr[i].id+')" class="row g-0">'+
                    '<div class="col-auto h-100">'+
                    '<img src="'+frontendURL+'acorn/img/sls.jpeg" alt="alternate text" class="card-img card-img-horizontal sw-11">'+
                    '</div>'+
                    '<div class="col">'+
                    '<div class="card-body d-flex flex-row pt-0 pb-0 h-100 align-items-center justify-content-between">'+
                    '<div class="d-flex flex-column justify-content-center">'+
                    '<div class="mb-1"><h2>'+data_arr[i].title+'</h2></div>'+
                    '<div class="mb-1"><h4>'+data_arr[i].standard_number+'</h4></div>'+
                    '<div class="mb-1" style="color: #000;">'+data_arr[i].scope.substring(0, 100)+'</div>'+
                    '<div class="mb-1"><h6>'+data_arr[i].year+'</h6></div>'+
                    '</div>'+
                    '</div>'+
                    '</div>'+
                    '</a>'+
                    '</div>';
              }
              
              $("#additionalInfoWeek").html(standard_content);

              var pagination_data = data.data.pagination;
              var current_page = pagination_data.current_page;
              var path = pagination_data.get_options.path;
              var page_name = pagination_data.get_options.pageName;
              var last_page = pagination_data.last_page;
              var previous_page = pagination_data.previous_page;
              var next_page = pagination_data.next_page_url;
              var total = pagination_data.total;

              var pagination = '<li class="page-item">'+
                  // '<a class="page-link" href="'+path+'?'+page_name+'=1" onclick="paginate('+path+'?'+page_name+'=1);" aria-label="First"><<</a>'+
                  '<a class="page-link" href="javascript:void(0);" onclick="paginate('+path+'?'+page_name+'=1);" aria-label="First"><<</a>'+
                  '</li>'+
                  '<li class="page-item">'+
                  // '<a class="page-link" href="'+path+'?'+page_name+'='+previous_page+'" onclick="paginate('+path+'?'+page_name+'='+previous_page+');" aria-label="Previous"><</a>'+
                  '<a class="page-link" href="javascript:void(0);" onclick="paginate('+path+'?'+page_name+'='+previous_page+');" aria-label="Previous"><</a>'+
                  '</li>'+
                  // '<li class="page-item"><a class="page-link" href="#">1</a></li>'+
                  // '<li class="page-item active"><a class="page-link" href="'+path+'?'+page_name+'='+current_page+'"  onclick="paginate('+path+'?'+page_name+'='+current_page+');">'+current_page+'</a></li>'+
                  '<li class="page-item active"><a class="page-link" href="javascript:void(0);"  onclick="paginate('+path+'?'+page_name+'='+current_page+');">'+current_page+'</a></li>'+
                  // '<li class="page-item"><a class="page-link" href="#">3</a></li>'+
                  '<li class="page-item">'+
                  // '<a class="page-link" href="'+next_page+'" aria-label="Next">></a>'+
                  '<a class="page-link" href="javascript:void(0);" onclick="paginate('+next_page+')" aria-label="Next">></a>'+
                  '</li>'+
                  '<li class="page-item">'+
                  // '<a class="page-link" href="'+path+'?'+page_name+'='+last_page+'" aria-label="Last">>></a>'+
                  '<a class="page-link" href="javascript:void(0);" onclick="paginate('+path+'?'+page_name+'='+last_page+')" aria-label="Last">>></a>'+
                  '</li>';
                  
              $("#paginationContent").html(pagination);
              
              console.log(data);
            }else{
              $("#additionalInfoWeek").html('<h5>No Standards Found</h5>');
            }
          }          
        }
      });
    }

    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/get_cart_info',
        type: "POST",
        data: {
          'standard_id' : id,
        },
        success: function(data){
          if(data != false){
            var item = data['item'];
            $.each(item, function(key,val) {
              if(key == id){
                addToCartBtn = false;
              }
            });
          }
        }
      });

      $.ajax({
        url: frontendURL+'api/get_standard_with_information_by_standard_id',
        type: "POST",
        data: {
          'standard_id' : id,
        },
        success: function(data){
          console.log(data);

          if(data.success == true){
            var std_data = [];
            $("#stdNumber").html(data.data.standard_number+' <img src="'+frontendURL+'acorn/img/sls.jpeg" alt="alternate text" class="card-img card-img-horizontal sw-11" style="width: 8% !important;">');
            $("#stdTitle").html(data.data.standard_content.title);
            $("#stdSubject").html(data.data.standard_content.subject);
            $("#stdDate").html(data.data.year);
            $("#stdOverview").html(data.data.standard_content.overview);
            $("#stdPreview").html(data.data.standard_content.subject);
            $("#stdDetail").html(data.data.standard_content.scope);
            $("#icsNumber").html(data.data.ics_number);
            $("#internationalRelationships").html(data.data.international_relationships);
            $("#noOfPages").html(data.data.standard_content.no_of_pages);
            $("#stdPriceLkr").html('LKR '+data.data.price_lkr.toFixed(2));
            $('#standardDetailModal').modal('show');
            if(addToCartBtn != true){
              $('#addToCartBtn').hide();
              $('#addedToCartBtn').show();
            }

            stdDetail['id'] = data.data.id;
            stdDetail['title'] = data.data.standard_content.title;
            stdDetail['price'] = data.data.price_lkr.toFixed(2);
            stdDetail['qty'] = 1;
          }
        }
      });
    }

    function paginate(){

    }

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

      $.ajax({
        url: frontendURL+'standard/add_to_cart',
        type: "POST",
        data: {
          'id' : stdDetail['id'],
          'title' : stdDetail['title'],
          'price' : stdDetail['price'],
          'qty' : stdDetail['qty']

        },
        success: function(data){
          console.log(data);
          $("#cartItemCount").html(data.result.item_count);
          if(data.success == true){

            $('#addToCartBtn').hide();
            $('#addedToCartBtn').show();


            jQuery.notify(
              {title: 'Success!', message: data.msg},
              {
                type: 'success',
                delay: 5000,
                placement: {
                  from: 'top',
                  align: 'left',
                },
              },
            );
            console.log(data);
          }else{
            jQuery.notify(
              {title: 'Opps!', message: data.msg},
              {
                type: 'danger',
                delay: 5000,
                placement: {
                  from: 'top',
                  align: 'left',
                },
              },
            );
          }
        }
      });
    }
    
  </script>
@endsection