@extends('layouts.main')
@section('title','Cusomize Pages')
@section('content')
<style type="text/css">
.custom-form-listing 
{
  display: flex !important;
  justify-content: space-evenly;
  align-content: center;
  position: relative;
}
.btn-placement 
{
  margin-top: -5px;
}
</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">
    <div class="main-body">
      <div class="page-wrapper">
        <div class="page-header">
          <div class="page-header-title">
            <h4>Unsubscribed Students</h4>
          </div>
        </div>

        <div class="row">
          <div class="col-md-12">
            <p class="text-custom d-flex align-items-center">
              <div class="col-md-6">
             <h4 class="f-w-400 f-16 m-t-15 g-l-b"> Search Students:</h4>
           </div>
             <div class="col-md-12">
              {!! Form::text('student_search',"",['class'=>'form-control','id'=>'search_student','placeholder'=>'Search any student with Name or HireMee Id.....']) !!}
            </div>
            </p>
            
          </div>
        </div>

        <div class="page-body">
          @if($message = Session::get('success'))
            <div class="alert alert-success background-success">
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <i class="icofont icofont-close-line-circled text-white"></i>
              </button>
              <strong>Success!</strong> {{ $message }}
            </div>
          @elseif($message = Session::get('error'))
            <div class="alert alert-danger background-danger">
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <i class="icofont icofont-close-line-circled text-white"></i>
              </button>
              <strong>Error!</strong>{{ $message }}
            </div>
          @endif
          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
              <div id="unsubscribed_students_list_render">
                {!! $component !!}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection     
@section('footer')
<!--Summernote-->
<script>
$(document).ready(function(){
  $('.clearfix').find('img').hide();
});
  
$(document).on('click','.js-pagecms-delete',function (){
  var id=$(this).attr('data-id');
  swal({
    html: true, 
    title: '<span class="sweet-danger-text">Are You Sure Want to Delete?</span>', 
    type: "error",
    showCancelButton: true,
    confirmButtonText: "OK",
    closeOnConfirm: false,
  },function(){
      $.ajax({
        type : "POST",
        url: "{{ secure_url('pagecms-company-status-change11111') }}",
        data : {'id':id},
        success : function(data)
        {
          if(data=='Success') 
          {
            $("#js-card-remove"+id).slideUp('normal', function() {
                $(this).remove();
            });
             alertMessage("success","Deleted Successfully","Success");
          }
          else if(data=='UnSuccess')
          {
            alertMessage("danger","Error","Something Went Wrong");
          }
        }
      });
  });
});

//this is the button
var acc = document.getElementsByClassName("custom-accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    var panel = this.nextElementSibling;
    var coursePanel = document.getElementsByClassName("course-panel");
    var courseAccordion = document.getElementsByClassName("custom-accordion");
    var courseAccordionActive = document.getElementsByClassName("custom-accordion active");

    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
      this.classList.remove("active");
    } else { //pannel isnt open...
      for (var ii = 0; ii < courseAccordionActive.length; ii++) {
        courseAccordionActive[ii].classList.remove("active");
      }
      
      for (var iii = 0; iii < coursePanel.length; iii++) {
        this.classList.remove("active");
        coursePanel[iii].style.maxHeight = null;
      }
      
      panel.style.maxHeight = panel.scrollHeight + "px";  
      this.classList.add("active");
    } 
  }
}

$(document).on('keyup','#search_student',function(){
  $('.hme-loading-mask').fadeIn();
  unsubscribe_url = "{{ secure_url('unsubscribedstudents') }}";
  var student_name= $(this).val();
  $.ajax({
      url: unsubscribe_url,
      type: "get",
      data: {'page':$(this).attr('data-page'),'student_name':student_name},
      success: function(response){
          if (response.status == 200) {
         $('#unsubscribed_students_list_render').html(response.html);
          $('.hme-loading-mask').fadeOut();
         }
      }, error : function(err){
          $('.hme-loading-mask').fadeOut();
          swal({
              html: true, 
              title: '<span class="sweet-danger-text">Something Went Wrong</span>', 
              text: "Your action  has been suspended, Sorry for the inconvenience. Please try again later",
              type: "error",
              showCancelButton: false,
              confirmButtonText: "OK",
              closeOnConfirm: false,
              confirmButtonColor: '#f0443a',
          });
      }
  })
});

$(document).on("click", "#js-jobsearch-load-more", function () {
  var __this = $(this);       
  unsubscribe_url = "{{ secure_url('unsubscribedstudents') }}";
   var student_name= $('#search_student').val();
      __data ="&page="+__this.attr('data-page')+"&student_name="+student_name;
      __loader = $("body").find('.hme-loading-mask');

  $.ajax({
     url: unsubscribe_url,
      dataType: "json",
      beforeSend: function () {
          __this.addClass("d-none");
          __loader.fadeIn()
      },
      data: __data,
      success: function (response) {
          $("body").find("#unsubscribed_students_list_render").append(response.html);
          if (response.hasmore) {
              __this.attr("data-page", response.next_page).removeClass("d-none");
              __loader.fadeOut();
                __this.attr("data-page", response.current_page).addClass("d-none");
          } else {
              __loader.fadeOut();
          }
      }
  });
  return false;
});

$(document).on('click',".show_or_hide",function(e){
  if($(this).attr('value') == 1){
    $(this).removeClass('fa-plus-circle').addClass('fa-minus-circle');
    $(this).next().removeClass('d-none');
    $(this).attr('value',0); 
  }else{
    $(this).removeClass('fa-minus-circle').addClass('fa-plus-circle');
    $(this).next().addClass('d-none');
    $(this).attr('value',1);
  }
})
</script>
@endsection