@extends('website.layout')

@section('title') {{$title}} @endsection
@section('meta') {{$meta}} @endsection

@section('content')
			
<!-- Team Section Start -->
<section class="team-wrap bg-sand">
                    <div class="container">
                        <div class="row">
                   <div class="col-lg-8">
				   <img src="{{ asset('storage/' . $event->image) }}" class="mentor-img rounded mb-3" alt="{{$event->name}}">
				 
				   <h1 class="event-h1">{{$event->name}}</h1>
				  
 <p style="font-size: 14px;"><strong>Venue:</strong> {{$event->event_venue}} |  <strong>Date:</strong> {{$event->event_date}} {{$event->event_time}}</p>
				   
				  <div class="event-summary">
				  <h2>Summary</h2>
				 <p> {{$event->summary}}</p>
				  </div>
				  
				   <div class="event-description">
				  <h2>Event Description</h2>
				  {!! $event->description !!}
				  </div>
				  
				   </div>
				   <div class="col-lg-4">
				   <div class="related-mentors-p">
				    @foreach($related as $r)
				   <div class="d-flex flex-row bd-highlight mb-2 gap-2">
				   {{--
  <div class="">
 <svg width="21px" height="21px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 12C7.44772 12 7 12.4477 7 13C7 13.5523 7.44772 14 8 14H16C16.5523 14 17 13.5523 17 13C17 12.4477 16.5523 12 16 12H8Z" fill="#7d1217"/>
<path d="M7 17C7 16.4477 7.44772 16 8 16H12C12.5523 16 13 16.4477 13 17C13 17.5523 12.5523 18 12 18H8C7.44772 18 7 17.5523 7 17Z" fill="#7d1217"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 3C8 2.44772 7.55228 2 7 2C6.44772 2 6 2.44772 6 3V4.10002C3.71776 4.56329 2 6.58104 2 9V17C2 19.7614 4.23858 22 7 22H17C19.7614 22 22 19.7614 22 17V9C22 6.58104 20.2822 4.56329 18 4.10002V3C18 2.44772 17.5523 2 17 2C16.4477 2 16 2.44772 16 3V4H8V3ZM20 10H4V17C4 18.6569 5.34315 20 7 20H17C18.6569 20 20 18.6569 20 17V10ZM4.17071 8C4.58254 6.83481 5.69378 6 7 6H17C18.3062 6 19.4175 6.83481 19.8293 8H4.17071Z" fill="#7d1217"/>
</svg>
  </div> --}}
  <div class="">
  <p class="related-p-label"><span>{{$r->event_venue}}</span></p>
  <a href="{{route('event', $r->slug)}}">
  <h2 class="related-event-h2">{{$r->name}}</h2></a>
  <p class="related-e-p">{{$r->event_date}} at {{$r->event_time}}</p>
  </div>
</div>
@endforeach
				   </div>
				   </div>
				   
							  </div>
                     
					
                    </div>
                </section>
                <!-- Team Section End -->


@endsection

@section('customjs')
<script>
$(document).ready(function() {
    $('#load-more').on('click', function() {
        var $button = $(this);
        var page = $button.data('page');
        $button.text('Loading...').prop('disabled', true);

        $.ajax({
            url: "{{ route('mentorsPost') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                page: page
            },
            success: function(response) {
                if (response.html) {
                    $('#dynamic-list').append(response.html);
                    page++; 
                    $button.data('page', page); 
                    if (response.hasMore) {
                        $button.text('Load More').prop('disabled', false);
                    } else {
                        $button.hide(); 
                    }
                } else {
                    $button.hide();
                }
            },
            error: function() {
                $button.text('Load More').prop('disabled', false);
                alert('Error loading more mentors.');
            }
        });
    });
});
</script>
@endsection