@extends('layouts.webmaster')

@push('page-style')
 

<link rel="stylesheet" href="{{ asset('www/css/datepicker.css') }}" >
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
 <style type="text/css">
	.ui-datepicker-calendar {
    display: none !important;
    }
	.event-img img{
		width:100%;
		height: 200px;
	}
	.banner{
      width:100%;
   }
   .banner img{
      width: 100%;
      height: 400px;
   }
   @media only screen and (max-width: 768px) {
	.banner img{
		width: 100%;
		height: 200px;
	}
	.header_white {
		height: 60px;
	}
	.toggler_xs_right .toggle_menu {
		margin-top: 2px;
	}
	.logo{
      display:none;
   }
   }
</style>
@endpush

@section('page-content')

<section style="background-color:#971012;">
	<div class="banner">
		<img src="/img/images/bannerImg.jpg" alt="event-img">
	</div>
</section>

<section class="page_breadcrumbs ds background_cover " style="background-color:#171A2B;">
	<div class="container">
		<div class="row">
			<div class="col-sm-12 text-center">
 				<ol class="breadcrumb greylinks">
					<li> <a href="{{ route('website')}}">
						Home
					</a> </li>
					<li class="active" style="color:#E2181D;">Events</li>
				</ol>
			</div>
		</div>
	</div>
</section>


<section class="ls columns_padding_30" style="padding-bottom:50px">
	<div class="container">
		<div class="row">
			{{-- <div class="search">
				<div class="col-md-4"></div>
				<div class="col-md-8">
					<form method="get" class="searchform" action="">
						<div class="ccol-md-3">
							<div class="form-group margin_0">
								<input id="widget-search" type="text" value="" name="search" class="form-control" placeholder="Region">
							</div>
						</div>
						<div class="ccol-md-3">
							<div class="form-group margin_0">
								<input id="widget-search" type="text" value="" name="search" class="form-control" placeholder="Category">
							</div>
						</div>
						<div class="ccol-md-3">
							<div class="form-group margin_0">
								<input id="widget-search" type="text" value="" name="search" class="form-control" placeholder="Month">
							</div>
						</div>

						<div class="ccol-md-3 text-center">
							<button type="submit" class="theme_button color1">Search</button>
						</div>
					</form>
					<div class="ccol-md-3">
							<div class="form-group margin_0">
								<input id="widget-search" type="text" value="" name="search" class="form-control" placeholder="Month">
							</div>
						</div>
				</div>
			</div>    
			--}}
			<div class="clearfix"></div>
		
			<div class="events" style="margin-top: 30px;">
				<div class="upcomming-event mb-50">
					<div class="event-heading mb-25">
						<h2 style="text-align:center; color:#E2181D;"> Events</h2>
					</div>
	
					<!-- filters -->
					<div class="row">
						 
						<div class="col-md-12">
							<ul class="inline-list">
								 <form class="" action="javascript:void();" method="post" id="filter_form">
                        {{ csrf_field() }}
	                    	<li class="hidden">
	                    		<div class=" col-md-1 form-group">
								<input type="text" class="form-control form-control-2 input-sm to" placeholder="Date" id="date" name="date">
								</div>
	                    	</li>
	                    
	                    	<li class="hidden">
	                    		<div class="  col-md-3 form-group">			
			                    <input type="text" name="search_text" id="search_text" class="form-control" placeholder="Event Name">
			                    </div>
	                    	</li>
	                    	<li class="hidden">
	                    		<div class="form-group col-md-3">
	                    			
										
											<select class="form-control-2" name="region">
												<option value="">Filter By Region</option>
												@foreach($regions as $r)
												<option value="{{$r->id}}">{{$r->name}}</option>

												@endforeach
											</select>
										
	                    		</div>
	                    	</li>
	                    	<li>
	                    		<select class="  col-md-3 form-control-2" name="event_type" id="event_type">
	                    			<option value="Upcoming">Upcoming Events</option>
	                    			<option value="All">All Events</option>
	                    			<option value="Past">Past Events</option>
	                    		</select>
	                    	</li> 	                    
	                    	<li>
	                    		<div class="form-group col-md-4">
	                    			
										
											<select class="form-control-2" name="samiti_name">
												<option value="All Samitis">All Samitis</option>
												
												

												@foreach($samiti as $s)

												<option value="{{$s->id}}">{{$s->name}}</option>

												@endforeach
											</select>
										
	                    		</div>
	                    	</li>
	                    	
	                    	<li>
	                    		<div class=" col-md-3 form-group">			
	                    <input type="button" name="search_btn" id="search_btn" class="theme_button" style="background: #E2181D;" value="Search">
	                    </div>

	                    	</li>  

					</form>
	                    	

	                    </ul>
						
	                  	<img src="{{asset('img/loader.gif')}}" alt="" class="loader hidden" id="loader">
                        <div class="row" data-gutter="15" id="event"></div>  
						</div>
					
										

					</div>
					
					<div class="event-posts">

						<div class="show_events">
						@foreach($event as $index=>$event1)

												<div class="col-md-3">
							<a href="{{ route('event-details',$event1['id']) }}">
								<div class="event-img">
									
		 	 	 			@if($featured_image)
									<img src="{{asset($featured_image[0])}}" class="img-thumbnail img-responsive">
									 @else
									 <img src="www/img/picture-not-available.jpg"  class="img-thumbnail img-responsive">
									@endif

								

								</div>
								<div class="event-name" >
									<p style="font-size: 15px;">
										 <br>Start Date:01-01-1970 									</p>
								</div>
								<div class="event-date">
									
								</div>
							</a>
						</div>
				
						@endforeach
					</div>
						<div class="clearfix"></div>

					</div>

					<!--<div class="row topmargin_60">
						<div class="col-sm-12 text-center">
							<ul class="pagination">
								<li><a href="#"><span class="sr-only">Prev</span><i class="fa fa-angle-left" aria-hidden="true"></i></a></li>
								<li class="active"><a href="#">1</a></li>
								<li><a href="#">2</a></li>
								<li><a href="#">3</a></li>
								<li><a href="#">4</a></li>
								<li><a href="#">5</a></li>
								<li><a href="#"><span class="sr-only">Next</span><i class="fa fa-angle-right" aria-hidden="true"></i></a></li>
							</ul>
						</div>
					</div>-->
				</div>  <!-- end upcomming event -->
			</div>


			<div class="clearfix"></div>
			<!-- <div class="event-history mt-50 mb-25">
				<div class="event-heading mb-25">
					<h2 class="section_header color">Events History</h2>
				</div>

				<section class="ls columns_padding_0 fluid_padding_0 section_padding_bottom_100">
					<div class="container-fluid">
						<div class="row">
							<div class="col-sm-12">
								<div class="owl-carousel related-photos-carousel loop-colors" data-margin="50" data-nav="false" data-dots="true" data-loop="true" data-items="3">
									<div>
										<article class="vertical-item content-padding post format-standard  with_border  text-center">
											<div class="item-media"> <img src="images/events/11.jpg" alt=""></div>
											<div class="item-content">
												<header class="entry-header">
													<h4 class="entry-title margin_0"> <a href="gallery-single.html" rel="bookmark">
														Om Prakash Mehta
													</a> </h4>
												</header>
											</div>
										</article>
									</div>
									<div>
										<article class="vertical-item content-padding post format-standard  with_border  text-center">
											<div class="item-media"> <img src="images/events/22.jpg" alt=""></div>
											<div class="item-content plan2">
												<header class="entry-header">
													<h4 class="entry-title margin_0"> <a href="gallery-single.html" rel="bookmark">
														Om Prakash Mehta
													</a> </h4>
												</header>
											</div>
										</article>
									</div>
									<div>
										<article class="vertical-item content-padding post format-standard  with_border  text-center">
											<div class="item-media"> <img src="images/events/33.jpg" alt=""></div>
											<div class="item-content plan3">
												<header class="entry-header">
													<h4 class="entry-title margin_0"> <a href="gallery-single.html" rel="bookmark">
														Om Praksh Mehta
													</a> </h4>
												</header>
											</div>
										</article>
									</div>
									<div>
										<article class="vertical-item content-padding post format-standard  with_border  text-center">
											<div class="item-media"> <img src="images/events/44.jpg" alt=""></div>
											<div class="item-content plan4">
												<header class="entry-header">
													<h4 class="entry-title margin_0"> <a href="gallery-single.html" rel="bookmark">
														Om Praksh Mehta
													</a> </h4>
												</header>
											</div>
										</article>
									</div>
									<div>
										<article class="vertical-item content-padding post format-standard  with_border  text-center">
											<div class="item-media"> <img src="images/events/11.jpg" alt=""></div>
											<div class="item-content">
												<header class="entry-header">
													<h4 class="entry-title margin_0"> <a href="gallery-single.html" rel="bookmark">
														Om Praksh Mehta
													</a> </h4>
												</header>
											</div>
										</article>
									</div>
									<div>
										<article class="vertical-item content-padding post format-standard  with_border  text-center">
											<div class="item-media"> <img src="images/events/22.jpg" alt=""></div>
											<div class="item-content plan2">
												<header class="entry-header">
													<h4 class="entry-title margin_0"> <a href="gallery-single.html" rel="bookmark">
														Om Praksh Mehta
													</a> </h4>
												</header>
											</div>
										</article>
									</div>
									<div>
										<article class="vertical-item content-padding post format-standard  with_border  text-center">
											<div class="item-media"> <img src="images/events/33.jpg" alt=""></div>
											<div class="item-content plan3">
												<header class="entry-header">
													<h4 class="entry-title margin_0"> <a href="gallery-single.html" rel="bookmark">
														Om Praksh Mehta
													</a> </h4>
												</header>
											</div>
										</article>
									</div>
									<div>
										<article class="vertical-item content-padding post format-standard  with_border  text-center">
											<div class="item-media"> <img src="images/events/44.jpg" alt=""></div>
											<div class="item-content plan4">
												<header class="entry-header">
													<h4 class="entry-title margin_0"> <a href="gallery-single.html" rel="bookmark">
														Om Praksh Mehta
													</a> </h4>
												</header>
											</div>
										</article>
									</div>
									<div>
										<article class="vertical-item content-padding post format-standard  with_border  text-center">
											<div class="item-media"> <img src="images/events/11.jpg" alt=""></div>
											<div class="item-content plan4">
												<header class="entry-header">
													<h4 class="entry-title margin_0"> <a href="gallery-single.html" rel="bookmark">
														Om Praksh Mehta
													</a> </h4>
												</header>
											</div>
										</article>
									</div>
									<div>
										<article class="vertical-item content-padding post format-standard  with_border  text-center">
											<div class="item-media"> <img src="images/events/22.jpg" alt=""></div>
											<div class="item-content plan4">
												<header class="entry-header">
													<h4 class="entry-title margin_0"> <a href="gallery-single.html" rel="bookmark">
														Om Praksh Mehta
													</a> </h4>
												</header>
											</div>
										</article>
									</div>
									<div>
										<article class="vertical-item content-padding post format-standard  with_border  text-center">
											<div class="item-media"> <img src="images/events/33.jpg" alt=""></div>
											<div class="item-content plan4">
												<header class="entry-header">
													<h4 class="entry-title margin_0"> <a href="gallery-single.html" rel="bookmark">
														Om Prakash Mehta
													</a> </h4>
												</header>
											</div>
										</article>
									</div>
									<div>
										<article class="vertical-item content-padding post format-standard  with_border  text-center">
											<div class="item-media"> <img src="images/events/44.jpg" alt=""></div>
											<div class="item-content plan4">
												<header class="entry-header">
													<h4 class="entry-title margin_0"> <a href="gallery-single.html" rel="bookmark">
														Om Prakash Mehta
													</a> </h4>
												</header>
											</div>
										</article>
									</div>
								</div>
							</div>
						</div>
					</div>
				</section>
			</div> -->
		</div>
	</div>
</section>

@endsection

@push('page-script')
<script src="{{ asset('www/js/datepicker.js') }}"></script>

<script type="text/javascript">
	var FromEndDate = new Date();
$('.to').datepicker({
    autoclose: true,
    minViewMode: 1,
    format: 'yyyy-mm',
    orientation: 'auto bottom'
}).on('changeDate', function(selected){
        FromEndDate = new Date(selected.date.valueOf());
        FromEndDate.setDate(FromEndDate.getDate(new Date(selected.date.valueOf())));
        $('.from').datepicker('setEndDate', FromEndDate);
    });



	 $event = $('.show_events');
            $loader = $('#loader');
	  $(document).on('click','#search_btn',function(e){
                e.preventDefault();
               // $('input[name=event_type]').val('');
               /* alert();*/

                filterProduct();
            })
	   $('#event_type').change(function(){
              /*  $('input[name=sort]').val($(this).val());*/	   	
               /* $('input[name=event_type]').val($('#event_type').val());
                $('input[name=sort]').val($(this).val());
                */
                /*alert($('#event_type').val());*/
                filterProduct();
            });

            $('#sort').change(function(){
               // $('input[name=sort]').val($(this).val());
              /*  $('input[name=sort]').val($(this).val());*/
               // $('input[name=event_type]').val($('#event_type').val());


                filterProduct();
            });

            let mapProducts = (event) => {
                let image_url ="";
                
                if (event.featured_image) {

               temp = $.parseJSON(event.featured_image);
               var evestart=event.start_date;
               /*alert(evestart);*/
               year=evestart.substring(0, 4);
               month=evestart.substring(5, 7);
               day=evestart.substring(8, 11);


               image_url = temp[0];
                }else{
                	image_url ='www/img/picture-not-available.jpg';
                } 
                if(event.name.length > 17){
					//event_name = event.name.substring(0,17)+".."+day+"-"+month+"-"+year+":"+event.start_time+"<br>Venue: "+event.venue_name;
					event_name = event.name.substring(0,16)+".. <br> "+day+"-"+month+"-"+year+" "+event.start_time;
					}else{
					event_name =  event.name+"<br> "+day+"-"+month+"-"+year+" "+event.start_time;
					}
					
                url ='/event-details/'+event.id;
                return `
                	<div class="col-md-3">
							<a href="${url}">
								<div class="event-img">
               					
					<img class="img-thumbnail img-responsive" src="${image_url}" alt="${event.name}" title="${event.name}" >								
								</div>
								<div class="event-name">
									<p style="font-size:15px">
										${event_name}
									</p>
								</div>

								<div class="event-date">
									
								</div>
							</a>
						</div>
                `;
            }

            let filterProduct = () => {
                $loader.removeClass('hidden');
                $.ajax({
                    url: '{{route("filter.event")}}',
                    method: 'POST',
                    data: $('#filter_form').serialize(),
                }).done(function(data, textStatus, jqXHR) {
                    if (data == 0){
                        $event.html(`
                            <center class="text-info">
                            <h2>Sorry No Event Found..! <br>
                            <h4>Please try again with different filters.</h4> </h2>
                            </center>
                            `);
                         $loader.addClass('hidden');
                    }
                    console.log(data);
                    $event.html(data.map(mapProducts));
                }).fail(function(jqXHR, textStatus, errorThrown) {
                    $event.html('');
                    $loader.removeClass('hidden');
                    $event.html('');
                }).always(function(dataOrjqXHR, textStatus, jqXHRorErrorThrown) {
                    $loader.addClass('hidden');
                });
            }
              

            // $(function(){
            //     filterProduct();
            // });

</script>


@endpush