@extends('frontend.layouts.app')

@section('content')

@if( isset( $module->module_banner_image ) )

 @php
  $bannerImage = asset('module-banner/'.$module->module_banner_image);
 @endphp
<style type="text/css">
  .inner-banner-section
  {
    background-image:url("{{$bannerImage}}");
  }
</style>
@endif

<!-- Banner Section Start -->
<div class="inner-banner-section">
    <div class="inner-banner-content">
      <div class="page-name">
        <p>Events</p>
      </div>
      <div class="breadcrumb">
        <ul>
          <li><a href="{{route('home.index')}}">Home</a></li>
          <li><a class="active">Events</a></li>
        </ul>
      </div>
    </div>
</div>
<!-- Banner Section End -->


<!-- Event Section Start -->
<div class="event-section event-page-section">
	<div class="container">
	  <div class="row">
	    <div class="col-lg-8 col-md-12 event-content-box">

	    	@if( isset($events) && count($events))

	    		@foreach($events as $event)
		      <div class="row event-content">
		        <div class="col-md-4">
		          <div class="event-image">
		          	 	@if(isset($event->featured_image))
                    <img src="{{asset('event/'.$event->featured_image )}}" class="img-fluid" alt="{!!$event->featured_image!!}">
                  @else
                    <img src="{{asset('site-settings/logo16240014531624292244.png')}}" class="img-fluid" alt="Event Image">
                  @endif
		          </div>
		        </div>
		        <div class="col-md-8">
		          <div class="event-detail">
		            <div class="date-title">
		              <div class="event-date">
		                <a href="{{route('event.detail',$event->slug)}}">
		                  <p><span class="day">{!!date('d',strtotime($event->event_start_date))!!}</span> <span class="month">{!!date('F',strtotime($event->event_start_date))!!}</span> <span class="year">{!!date('Y',strtotime($event->event_start_date))!!}</span></p>
		                </a>
		              </div>
		              <h3><a href="{{route('event.detail',$event->slug)}}">{!!$event->title!!}</a></h3>
		            </div>
		             <p class="description">{!!substr(strip_tags($event->overview_description),0,100)!!} </p>
		           
		            <div class="row event-detail-bottom">
		              <div class="col-md-8">
		           
		                <ul class="event-meta">
		                  <li><span><i class="fas fa-map-marker-alt"></i></span>
		                  	@if( isset( $event->street_address ) ) 
		                  	{{$event->street_address}}, 
		                  	@endif 
		                  	@if( isset( $event->city ) )
		                  	{{$event->city}}
		                  	@endif  
		                  </li>

		                  <li><span><i class="far fa-clock"></i></span> {{$event->event_start_time}} - {{$event->event_end_time}}</li>
		                </ul>
		              </div>
		              <div class="col-md-4">
		                <a href="{{route('event.detail',$event->slug)}}" class="btn btn-warning mt-3"><i class="fas fa-eye"></i> Read More</a>
		              </div>
		            </div>
		        </div>
		        </div>
		      </div>

		      @endforeach

		    @else

		    	<div class="row event-content">

		    		<div class="col-md-12">

		    				<p>No event founds!</p>

		    		</div>

		    	</div>
		    		  
	      @endif
	    
	      <div class="row">
	      	<div class="business-list-content">
	      	{!!$events->links()!!}
	      	</div>
	  		</div>
	    </div>
	    <div class="col-lg-4 col-md-12">
	      <div class="search-form">
	         <div class="heading">
	          <h1>Search Event</h1>
	         </div>
	         <form action="{!!\Request::url()!!}" method="GET">
	          <div class="form-group">
	            <input name="event_title" type="text" class="form-control" placeholder="Search by Title or Description" value="{!!$_GET['event_title'] ?? ''!!}">
	          </div>
	          <div class="form-group">
	            <select class="form-control" name="event_date">
	              <option value="all-date" {!!( isset( $_GET['event_date']  ) && $_GET['event_date'] == 'all-date' )  ? 'selected' : '' !!}>All Dates</option>
	              <option value="toady" {!!( isset( $_GET['event_date']  ) && $_GET['event_date'] == 'all-date' )  ? 'selected' : '' !!}>Today</option>
	              <option value="this-week" {!!( isset( $_GET['event_date']  ) && $_GET['event_date'] == 'this-week' )  ? 'selected' : '' !!}>This Week</option>
	              <option value="next-week" {!!( isset( $_GET['event_date']  ) && $_GET['event_date'] == 'next-week' )  ? 'selected' : '' !!}>Next Week</option>
	              <option value="this-month" {!!( isset( $_GET['event_date']  ) && $_GET['event_date'] == 'this-month' )  ? 'selected' : '' !!}>This Month</option>
	              <option value="next-month" {!!( isset( $_GET['event_date']  ) && $_GET['event_date'] == 'next-month' )  ? 'selected' : '' !!}>Next Month</option>
	              <option value="this-year" {!!( isset( $_GET['event_date']  ) && $_GET['event_date'] == 'this-year' )  ? 'selected' : '' !!}>This Year</option>
	              <option value="next-year" {!!( isset( $_GET['event_date']  ) && $_GET['event_date'] == 'next-year' )  ? 'selected' : '' !!}>Next Year</option>
	            </select>
	          </div>
	          <div class="event-calc-select">
	            <div class="form-group d-inline-flex">
	              <label for="inputFrom" class="d-block">From</label>
	              <div class="input-group date" id="datetimepickerfrom">
	                <div class="input-group-addon input-group-prepend">
	                  <input name="start_date" type="text" class="form-control" placeholder="YYYY-MM-DD" value="{!!$_GET['start_date'] ?? ''!!}">
	                  <span class="input-group-text"><i class="fas fa-calendar"></i></span>
	                </div>
	              </div>
	            </div>
	            <div class="form-group d-inline-flex">
	              <label for="inputTo" class="d-block">To</label>
	              <div class="input-group date" id="datetimepickerto">
	                <div class="input-group-addon input-group-prepend">
	                  <input name="end_date" type="text" class="form-control" placeholder="YYYY-MM-DD" value="{!!$_GET['end_date'] ?? ''!!}">
	                  <span class="input-group-text"><i class="fas fa-calendar"></i></span>
	                </div>
	              </div>
	            </div>
	          </div>
	          <div class="form-group search-btn">
	            <button type="submit" class="btn btn-outline-dark">Search</button>
	          </div>
	        </form>
	      </div>

	      <!-- Advertise Section Start -->
	      <div class="advertise-section">
	      	@php $setting = sitesSettings(); @endphp
	      	@if(isset($setting->event_list_ad_banner1))
	        <div class="image">
	        	 <a href="{!!esc_url($setting->event_list_ad_banner1_url)!!}"><img src="{!!asset('site-settings/'.$setting->event_list_ad_banner1)!!}" alt="Advertise Image"></a>
	        </div>
	        @endif
	        @if(isset($setting->event_list_ad_banner2))
	        <div class="image">
	        	<a href="{!!esc_url($setting->event_list_ad_banner2_url)!!}"><img src="{!!asset('site-settings/'.$setting->event_list_ad_banner2)!!}" alt="Advertise Image"></a>
	        </div>
	        @endif
	      </div>
	      <!-- Advertise Section End -->

	    </div>
	  </div>
	</div>
</div>
<!-- Event Section End -->

@endsection


@section('scripts')
    
<script>
  $(function () {
      $('#datetimepickerfrom').datetimepicker({
        format: 'YYYY-MM-DD'
      });

      $('#datetimepickerto').datetimepicker(
        {
        format: 'YYYY-MM-DD'
      }
      );

      $("select[name=event_date]").on('change',function(){
      		
      		var event_date = $(this).val();
      		
      		if(event_date == 'all-date')
      		{
      				$("input[name=start_date]").val('');
				      $("input[name=end_date]").val('');
      				$(".event-calc-select").hide();
      		}
      		else
      		{

				    $.ajax({

				        url: "{{ route('event.date.duration') }}",

				        method: 'GET',

				        data: {event_date: event_date},

				        success: function(data){

				        		$(".event-calc-select").show();
				        		
				        		$("input[name=start_date]").val(data.start_date);
				        		$("input[name=end_date]").val(data.end_date);
				      
				        },
	
				    });
      		}

      });
  });
 
</script>


@endsection