@extends('layouts.main')
@section('title','Round Zero Assessment')
@section('content')
<style type="text/css">
   .chart {
   width       : 800px;
   height      : 220px;
   }
   .amcharts-chart-div > a {
   display: none !important;
   }
   .amExportButton{
   display: none !important;
   }
</style>
<div class="pcoded-content">
   <div class="hme-loading-mask">
      <div class="hme-loading-container">
         <div class="hme-dual-ring"></div>
         <div>Please wait, Loading...</div>
      </div>
   </div>
   <div class="pcoded-inner-content p-0">
      <div class="main-body">
         <div class="page-wrapper p-0">
            <div class="page-header p-15 m-b-0 pro-page-heading1">
               <div class="page-header-title">
                  <h4>Round Zero Assessment Series List</h4>
               </div>
               <div class="page-header-breadcrumb p-r-10">
                  <ul class="breadcrumb-title">
                  </ul>
               </div>
            </div>
            <div id="pro-preview-page1"></div>
            <div class="page-body col-md-12">

               <div class="row mb-3 mb-sm-0 justify-content-end mx-0">
                  <div class="col-md-8 pr-0 pr-sm-0 col-12 text-right">
                        <div class="input-group w-50 w-m-100 ml-auto">
                           <input class="form-control" placeholder="Series Name" id="search-seriesname" name="search_terms" type="text" value="" autocomplete="off">
                        </div>
                  </div>
                  <div class="text-right">
                     <button class="btn btn-primary mr-2" id="btn-search-seriesname">Submit</button>
                     <button class="btn btn-secondary" id="btn-clear">Clear</button>
                  </div>
               </div>
                 
                  
                <div class="row" id="js_assessment-series-resport-render">
                  @include('pro.corporate.round-zero-plus.series.assessment-series-report-render')                     
               </div>
         <div class="row">            
        @if($data->hasMorePages())
         <div class="col-md-12 mb-4">
            <div class="text-center">
                  <button class="btn btn-outline-info " style="margin: 15px;" id="js_assess-series-load-more" data-page='2'>Load more...</button>
            </div>
         </div>
         @endif
                  </div>
            </div>
         </div>
      </div>
   </div>
</div>
@endsection
@section('footer')
<script type="text/javascript">
  $('#js_assess-series-load-more').on('click',function(){
        $(this).hide();
        data_page=$(this).attr('data-page');
        loadMore(data_page);
    });


  function loadMore(data_page,search=''){
       $('.hme-loading-mask').fadeIn();
            
        $.ajax({
          url: "{{secure_url('pro/series-assessment-report')}}",
          type: "get",
          data: {'limit': 21,'page':data_page,'search':search,'request_type':'remote'},
          success: function(response){

            if (response.status == 200) {

              if(data_page == 1){
                 $('#js_assessment-series-resport-render').html(response.component);
              }else{
                 $('#js_assessment-series-resport-render').append(response.component);
              }
              $('.hme-loading-mask').fadeOut();
               
              if(response.hasmore == false) {
                $('#js_assess-series-load-more').hide();
              } else {
                $('#js_assess-series-load-more').show();
                $('#js_assess-series-load-more').attr('data-page',parseInt($('#js_assess-series-load-more').attr('data-page'))+1);
              }
            }
          },
          error: function(error){
            alertMessage("danger","Your action  has been suspended, Sorry for the inconvenience. Please try again later","Something Went Wrong");
          }
        });
    }


    $('#btn-search-seriesname').click(function (e) {
    e.preventDefault();
    var sseriesname =  $('#search-seriesname').val();
    if(sseriesname == "")
    {

    }else{
      loadMore(1,sseriesname);
    } 
  });
  
  $('#btn-clear').click(function (e) {
    e.preventDefault();
    $('#search-seriesname').val('');
    $('#js_assess-series-load-more').attr('data-page',1);
    var sseriesname =  $('#search-seriesname').val();
    loadMore(1,sseriesname);
  });

   
</script>
@endsection