@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/' . $program->image) }}" class="mentor-img rounded mb-3" alt="{{$program->name}}">
				 
				   <h1 class="event-h1">{{$program->name}}</h1>
				 <p style="font-size: 14px;">
    @if(!empty($program->duration))
        <strong>Duration:</strong> {{ $program->duration }}
    @endif

    @if(!empty($program->mode))
        @if(!empty($program->duration)) | @endif
        <strong>Mode:</strong> {{ $program->mode }}
    @endif

    @if(!empty($program->program_dates))
        @if(!empty($program->duration) || !empty($program->mode)) | @endif
        <strong>Program Dates:</strong> {{ $program->program_dates }}
    @endif
</p>

				   
				  <div class="event-summary">
				  <h2>Summary</h2>
				 <p> {!! $program->summary !!}</p>
				  </div>
				  
				   <div class="event-description">
				  <h2>program Eligibility</h2>
				  {!! $program->eligibility !!}
				  </div>
				  
				  @if($program->offering_names)
				   <div class="meta-head-expertise">
				   <h2>Offerings</h2>
				   @foreach($program->offering_names as $k)
				   <p class="meta-expertise"><svg width="21px" height="21px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="24" height="24" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.55879 3.6972C10.7552 2.02216 13.2447 2.02216 14.4412 3.6972L14.6317 3.96387C14.8422 4.25867 15.1958 4.41652 15.5558 4.37652L16.4048 4.28218C18.3156 4.06988 19.9301 5.68439 19.7178 7.59513L19.6235 8.44415C19.5835 8.8042 19.7413 9.15774 20.0361 9.36831L20.3028 9.55879C21.9778 10.7552 21.9778 13.2447 20.3028 14.4412L20.0361 14.6317C19.7413 14.8422 19.5835 15.1958 19.6235 15.5558L19.7178 16.4048C19.9301 18.3156 18.3156 19.9301 16.4048 19.7178L15.5558 19.6235C15.1958 19.5835 14.8422 19.7413 14.6317 20.0361L14.4412 20.3028C13.2447 21.9778 10.7553 21.9778 9.55879 20.3028L9.36831 20.0361C9.15774 19.7413 8.8042 19.5835 8.44414 19.6235L7.59513 19.7178C5.68439 19.9301 4.06988 18.3156 4.28218 16.4048L4.37652 15.5558C4.41652 15.1958 4.25867 14.8422 3.96387 14.6317L3.6972 14.4412C2.02216 13.2447 2.02216 10.7553 3.6972 9.55879L3.96387 9.36831C4.25867 9.15774 4.41652 8.8042 4.37652 8.44414L4.28218 7.59513C4.06988 5.68439 5.68439 4.06988 7.59513 4.28218L8.44415 4.37652C8.8042 4.41652 9.15774 4.25867 9.36831 3.96387L9.55879 3.6972ZM15.7071 9.29289C16.0976 9.68342 16.0976 10.3166 15.7071 10.7071L11.8882 14.526C11.3977 15.0166 10.6023 15.0166 10.1118 14.526L8.29289 12.7071C7.90237 12.3166 7.90237 11.6834 8.29289 11.2929C8.68342 10.9024 9.31658 10.9024 9.70711 11.2929L11 12.5858L14.2929 9.29289C14.6834 8.90237 15.3166 8.90237 15.7071 9.29289Z" fill="#27ae60"/>
</svg> {{$k}}</p>
@endforeach
				   </div>
				   @endif
				  
				   </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="">
  <p class="related-p-label">{{$r->program_dates}} </p>
  <a href="{{route('program', $r->slug)}}">
  <h2 class="related-event-h2">{{$r->name}}</h2></a>
  @php
    $details = [];

    if (!empty($program->duration)) {
        $details[] = '<strong>Duration:</strong> ' . e($program->duration);
    }

    if (!empty($program->mode)) {
        $details[] = '<strong>Mode:</strong> ' . e($program->mode);
    }
@endphp

@if (!empty($details))
    <p class="related-e-p">{!! implode(' | ', $details) !!}</p>
@endif

  </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