@extends('layout.home')

@section('content')


<style type="text/css">

	form {
		display: block;
		top :0 ;
		left :50%;
	}
	select{
		border:6px solid ;
		background-color: #9B9B9B;
		color:#ffffff;
	}


</style>
@include('layout/header-image')
<div class="container">

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

				<div class="row">
					<div class="col-md-auto search-gallery-triangles search-size ">
						<select name="option"  class="form-size search-animation  search-option">
							{{-- <option disabled selected value="all">Photo / Video</option> --}}
							<option value="photo">Photo</option>
							<option value="video">Video</option>
						</select>
					</div>
					{{-- <div class="col-md-auto search-gallery-triangles search-size">
						<select name="category"  class="form-size search-animation search-category">
							<option  disabled selected value="all">Category</option>

						</select>
					</div> --}}
					<div class="col-md-auto search-gallery-triangles search-size">
						<select name="year"  class="form-size search-animation search-year">
							<option disabled selected value="all">Year</option>
							@foreach(array_unique($years) as $year)
							<option value="{{$year}}">{{ $year}}</option>
							@endforeach
						</select>
					</div>
					<div class="col-md-auto search-size search-input-triangles">
						<input  class="form-input-size" type="text" name="title" placeholder="Search">
					</div>
				</div>

				
				<div class="d-flex justify-content-center">
					<input type="submit" name="submit" value="Submit">
					{{-- <input type="reset" name="reset" value="Reset"> --}}
					<a href='/gallery' class='reset-link'>Reset</a>
				</div>
			</form>
		</div>
		@endif 


		<div class='gallery-content'>


			@if($action =='video')
			<div  id="video-data" class="video text-center">


				@include('layout.video')
				
			</div>		
			@if($Gallerys->lastPage()>1)
			<p id="next">more video</p>
			@endif
			@else


			<div class="image text-center" >

				@if(isset($Gallerys[0]))
				
					@foreach($Gallerys as $gallery)
					<a  href="/gallery/{{$gallery->gallery_id}}">{{$gallery->gallery_name}}</a>

				@endforeach

				@endif
			</div>


			@endif	
		</div>
	</div>



	<script type="text/javascript">
		var page = 1;
		$("#next").click(function() {
			page++;
			var href = location.search;
      // if($.urlParam('submit')!=null){
      //   param = href+'&page=' ;
      // }else{
      	param = '?page=' ;
      // };
      loadMoreData(page,param);
      // console.log(param);
      if (page >={{$Gallerys->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();
        $("#video-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[1] || 0;
    // }

</script>

<script type="text/javascript">

	$(document).ready(function(){


		@if(isset($_GET['option']) )

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

		@endif 
		@if( isset($_GET['title']))
		$('input:text').val( '{{$_GET['title']}} ');
		@endif 


	});
</script>

@endsection