@include('layout/frontend/_header')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="colorlib-doctor">
	<div class="container">
		<div class="row">
			<div class="col-sm-12 breadcrumbs">
				<ol class="breadcrumb breadcrumb-2new">
					<li class="breadcrumb-item"><a title="Go to IKI" href="{{ url('/') }}">Home</a></li>
					<li class="breadcrumb-item"><a href="javascript://">Events</a></li>
				</ol>
			</div>
		</div>
		<div class="row animate-box">
			<div class="text-center colorlib-heading">
				<h2>EVENTS</h2>
			<!--	<p>List of activities  which help in networking and implement sustainable development practices</p>-->
			</div>
		</div>
		<div class="row">
            
            
			<form action="{{url('events')}}" method="GET" style="text-align: right">
				<p class="" style="display:inline-flex; margin-bottom:0px;">
					<input type="text" placeholder="Search..." class="form-control col-4" style="width: 300px;" name="s_t" id="myInput" onkeyup="valueCheck();" placeholder="Search" value="{{ (isset($_GET['s_t']) && $_GET['s_t']) ? $_GET['s_t'] : '' }}" />
					<button class="srch-btn" id="myBtn" value="Search" onClick="return checkIfValue()" type="submit"><i style="padding: 10px 10px; color: #fff" class="fa fa-search"></i></button>
					@if ( isset($_GET['s_t']) ) 
						<button style="margin-left:4px;" class="srch-btn" id="clearBtn" value="Clear" onClick="clearFilters()" type="button"><i style="padding: 10px 10px; color: #fff" class="fa fa-times"></i></button>
					@endif
				</p>
				<p style="margin-bottom:0px;"><span class="errorMsg" style="display:none;font-size:11px;color:red;">No search keyword found.</span></p>
			</form>
			
		

			<section>

		<div class="row mbr-justify-content-center">
@if( $events && count($events) > 0 )
	
				@foreach( $events as $k => $v )
            <div class="col-lg-3 mbr-col-md-10">
				
				
                <div class="wrap events">
                   
                    <div class="text-wrap vcenter">
					@if($v['featured_attachment'] !='')
						 <img src="{{EVENT_UPLOADS}}{{$v['featured_attachment']}}" class="img-fluid">     
					@else
						 <img src="{{ URL::asset('images/iki_logo_event.jpg') }}" class="img-fluid">     
					@endif	
                                    
                     <div class="event-heading"><a href="single-event/{{ encrypt_decrypt('encrypt', $v['id'])}}" title="{{$v['title']}}" class="headng">{{$v['title']}}</a></div>
                      <p class="event-corrdinator">Coordinator Name: {{$v['event_coordinator']}}</p>
												<div class="event-icon"> <i class="fa fa-calendar" aria-hidden="true"></i> 
												{{ date('d', strtotime($v['start_date'])) }} {{ date('M', strtotime($v['start_date'])) }} {{ date('Y', strtotime($v['start_date'])) }}
												@if(($v['end_date'] !=''))
												-{{ date('d', strtotime($v['end_date'])) }} {{ date('M', strtotime($v['end_date'])) }} {{ date('Y', strtotime($v['end_date'])) }} @endif </div><br><div class="event-icon gap"> <i class="fa fa-map-marker" aria-hidden="true"></i> {{$v['venue']}}</div><br><br>
											
                    </div>
                </div>
			
				
            </div>
            
            
            	@endforeach
					@else 
									<p style="margin-top: 60px;" class="alert alert-info text-center">No records found for the search</p>
								@endif	
            
        </div>
		
	
	@if(count($events) > 0)
				{{ $events->links() }}
			@endif




</section>
			
			
			
			<!--<div class="card border-danger golge">
				<div class="card-body">
					<div class="carousel vert slide" data-ride="carousel" data-interval="2000">
						<div class="carousel-inner">
							<div class="carousel-item active">
								@if( $events && count($events) > 0 )
									<ul class="timeline">					
										@foreach( $events as $k => $v )
											<li data-status="{{$v['status']}}">
												<a href="single-event/{{ encrypt_decrypt('encrypt', $v['id'])}}" title="{{$v['title']}}" class="headng">{{$v['title']}}</a>
												<p class="article">Coordinator Name: {{$v['event_coordinator']}}</p>
												<span class="event-icon"> <i class="fa fa-calendar" aria-hidden="true"></i> {{ date('d', strtotime($v['start_date'])) }}-{{ date('d', strtotime($v['end_date'])) }} {{ date('M', strtotime($v['end_date'])) }} {{ date('Y', strtotime($v['end_date'])) }} | <i class="fa fa-map-marker" aria-hidden="true"></i> {{$v['venue']}}</span>
												<p class=""><a style="text-decoration:underline;font-size:14px;" href="single-event/{{ encrypt_decrypt('encrypt', $v['id'])}}" title="Read More">Read More &rarr;</a></p>
												<hr>							 
											</li>
										@endforeach
									</ul>
								@else 
									<p class="alert alert-info text-center">No new records found</p>
								@endif	
							</div>
						</div>
					</div>
				</div>
			</div>-->
			
	
	</div>
</div>
@include('layout/frontend/_footer')
<script type="text/javascript">
	function filterAsPerStatus(status, event){
		var status = status; 
		$(".timeline li").each(function(){
			$(this).hide();
			if($(this).attr('data-status') == status) {
				$(this).show();
			}
		});
	}
	$(document).ready(function(){
		filterAsPerStatus('1', event);
	});
	function valueCheck(){
		$('#myInput').css('border','1px solid #cad1d7');
		$('.errorMsg').hide();
	}
	function checkIfValue(){
		var searchText = $('#myInput').val();
		if ( !searchText ){
			$('#myInput').css('border','1px solid red');
			$('.errorMsg').show();
			return false;
		} else {
			return true;
		}
	}
	function clearFilters(){
		var url = window.location.href;
			url = url.split('?')[0];
		window.location.href = url;
	}
</script>
    
<style>
.custombtn
{
	    background: transparent;
    color: #303030;
    border: 1px solid #11435e;
    border-radius: 30px;
    padding: 4px 15px;
}
.event-heading {
    padding-top: 10px;
    min-height: 74px;
}
    
.event-icon.gap {
    margin-top: 8px;
}   
    
p.event-corrdinator {
    min-height: 65px;
}  




.event-icon {
    font-size: 13px;
    color: #fff;
    background-color: #11435e;
    padding: 5px 15px;
    border-radius: 20px;
    display: inline-block;
}


    
</style>