@extends('layouts.main')
@section('title','Manage Series')
@section('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-content">
   <div class="pcoded-inner-content">
      <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>Booked Series</h4>
               </div>
               @if(!session()->has('new_portal_redirect'))
               <div class="page-header-breadcrumb p-r-10">
                  <ul class="breadcrumb-title">
                     <li class="breadcrumb-item">
                        <a href="{{secure_url('company/dashboard') }}">
                        <span class="hiremee-home"></span>
                        </a>
                     </li>
                     <li class="breadcrumb-item">
                        <a href="#">Booked Series</a>
                     </li>
                  </ul>
               </div>
               @endif
            </div>
            <div class="page-body p-15">
               
               <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_booked-series-listing">
                  @include('pro.corporate.round-zero-plus.booked-series.booked-series-listing-render')                     
               </div>
            </div>
            </div>
         </div>
  
      </div>
      @if($booked_series->hasMorePages())
         <div class="col-md-12 mb-4">
            <div class="text-center">
                  <button class="btn btn-outline-info " style="margin: 15px;" id="js_booked-series-load-more" data-page='2'>Load more...</button>
            </div>
         </div>
         @endif
   </div>
</div>
<!--series created popup successfully start-->
<div class="modal fade seriesAddPopup" id="series-success" tabindex="-1" aria-labelledby="seriesAssessment" aria-hidden="true" data-backdrop="static" data-keyboard="false">
   <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title text-center" id="exampleModalLabel">Slots Booked</h5>
            <button type="button" class="close d-flex justify-content-center align-items-center bg-white rounded-circle" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <div class="modal-body text-center px-4">
            <i class="fa fal fa-check-circle" style="font-size: 60px; color: #8FC740;"></i>
            <p class="pt-2" style="color: #8FC740; font-weight: 500; font-size: 1rem;">Slots Booked Successfully</p>
         </div>
      </div>
   </div>
</div>
<!--series created popup successfully end-->
@endsection
@section('footer')
<script>
$('#js_booked-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/booked-series')}}",
          type: "get",
          data: {'limit': 100,'page':data_page,'search':search,'request_type':'remote'},
          success: function(response){

            if (response.status == 200) {
              if(data_page == 1){
                 $('#js_booked-series-listing').html(response.component);
              }else{
                 $('#js_booked-series-listing').append(response.component);
              }
              $('.hme-loading-mask').fadeOut();
               
              if(response.hasmore == false) {
                $('#js_booked-series-load-more').hide();
              } else {
                $('#js_booked-series-load-more').show();
                $('#js_booked-series-load-more').attr('data-page',parseInt($('#js_booked-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('');
		var sseriesname =  $('#search-seriesname').val();
		loadMore(1,sseriesname);
	});

</script>
@endsection