@extends('layout.home')
@section('content')


<script type="text/javascript">

  $(document).ready(function(){


    @if(isset($_GET['Status']) )
    
    $('.search-status option[value={{$_GET['Status']}}]').attr('selected','selected');
    @endif
    @if( isset($_GET['year']))
    $('.search-year option[value={{$_GET['year']}}]').attr('selected','selected');
    @endif 

  });
</script>


<style type="text/css">
  .config{
    padding-right: 0;
    padding-left: 0;
  }

  .topic{
    color:#2d8ee3;
    margin-bottom: 30px;
  }
  .article-content{
    word-wrap: break-word;

  }

  .item-content{

    height: 100%;    
  }
  .description{
    margin-right: 5px;
    margin-left: 5px;
  }
  .article-content{
    margin-right: 10px;
    margin-left: 10px;
  }
  input[type='submit'],input[type='reset']{
    background-color: inherit;
    border:0;
    margin-bottom: 10px;
    margin-top: 10px; 
  }


</style>
@include('layout/header-image')
<div class="container">
  @include('layout.direction')
  <div class="topic">
    {{$page}}
  </div>

  @if(true)
  <div >
    <form method="get" class="d-flex justify-content-center">
      <div class="search-item ">

        @if($page=='Events'||$page='CAHK STAR Awards')
        <div class="row ">

          <div class="col-md-auto search-triangles  search-size ">

            <select  name="Status"  class="form-size  search-animation search-status ">
              <option value="all">Status</option>
              <option value="upcoming">Upcoming</option>
              <option value="ongoing">Ongoing</option>
              <option value="past">Past</option>
            </select>
          </div>



          <div class="col-md-auto search-triangles search-size">
            <select name="year"  class="form-size search-animation search-year">
              <option value="all">Year</option>
              @foreach($years as $year)
              <option value="{{$year}}">{{ $year}}</option>
              @endforeach
            </select>
          </div>
<!-- 
          <div class="col-md-auto search-triangles search-size">
            <select name="category"  class="form-size search-animation">
              <option value="all">Category</option>

            </select>
          </div> -->
        </div>
       <!--  <div class="row">
        
          <div class="col-md-auto search-triangles search-size">
            <select name="month" class="form-size search-animation">
              <option value="all">month</option>

            </select>
          </div>
        </div> -->



        @else


        <div class="row">
          @if($page =='WTISD')
          <div class="col-md-auto search-triangles ">

            <select name="Status"  class="form-size  search-animation  search-status">
              <option value="all">Status</option>
              <option value="upcoming">Upcoming</option>
              <option value="ongoing">Ongoing</option>
              <option value="past">Past</option>
            </select>
          </div>
          @endif

         <!--  <div class="col-md-auto  search-triangles">
            <select name="category"  class="form-size search-animation">
              <option value="all">Category</option>

            </select>
          </div> -->

          <div class="col-md-auto search-triangles">
            <select name="year"  class="form-size search-animation search-year">
              <option value="all">Year</option>
              @foreach($years as $year)
              <option value="{{$year}}">{{ $year}}</option>
              @endforeach
            </select>
          </div>
        </div>
        @endif
        <div class=" search-button d-flex justify-content-center">
          <input type="submit" name="submit" value="Submit">
          <input type="reset" name="reset" value="Reset">
        </div>
      </form>
    </div>
    @endif 

    <div class="item-content">

      <div id="article-data">
        @include('layout/post')
      </div>
@if($news->lastPage()>1)
      <p id="next">Show More</p>
@endif
    </div>

  </div>


  <script type="text/javascript">
    var page = 1;
    $("#next").click(function() {
      page++;
      var href = location.href;
      
      if($.urlParam('submit')!=null){
        param = href+'?page=' ;
      }else{
        param = href+'?page=' ;
      };

      loadMoreData(page,param);
      if (page >={{$news->lastPage()}}) {
        document.getElementById('next').style.display = 'none';
      };
    });

    function loadMoreData(page,param){
      $.ajax(
      {
        url: param+ page,
        type: "get"
      })
      .done(function(data)
      {
        if(data.html == " "){
          $('#next').html("No more records found");
          return;
        }
        // $('#next').hide();
        $("#article-data").append(data.html);
      })
      .fail(function(jqXHR, ajaxOptions, thrownError)
      {
        alert('server not responding...');
      });
    }

    $.urlParam = function(name){
      var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
      return results?results[1] :0;
    }

  </script>




  @endsection