@extends('user.layouts.app-newui')

@section('content')

<div class="main-card text-center">
    <h1 class="text-center mb-5 page_title" id="candidate-detail-title">Webinar Session</h1>

    <p class="text-muted mx-auto mb-5 col-10 col-md-10 col-lg-10">
        This page is your space to explore, register for, and join upcoming live webinars designed exclusively for J-1 Interns & Trainees.
        Here, you will find a regularly updated list of interactive sessions covering key topics. Each webinar is designed to support your program journey, answer your questions, and help you make the most of your experience.
    </p>

    <p class="text-muted mx-auto mb-5 col-10 col-md-10 col-lg-10">
        We encourage you to check this page frequently and register early for sessions that interest you. Participation is highly recommended, as these webinars provide valuable insights and opportunities to engage directly with our experts and fellow participants. We look forward to seeing you in our upcoming sessions!
    </p>

    <div class="container my-4">
        <div class="row g-4">
            @if(!empty($data))
                @foreach($data as $item)
                <div class="col-12 col-md-6">
                    <div class="card h-100 border-0 shadow content-card">
                        <div class="card-body d-flex flex-column">

                            <span class= "{{  $item['webinar_status'] == 'Live Session' ? 'badge bg-success mb-3 align-self-start' : 'badge bg-primary mb-3 align-self-start' }}" class="">{{@$item['webinar_status']}}</span>

                            <h4 class="mb-3 page_sub_title">
                                {{@$item['webinar_title']}}
                            </h4>

                            <p class="text-muted">
                                {{@$item['short_description']}}
                            </p>

                            <div class="mb-4">
                                <div class="text-muted"><strong>Date:</strong> {{ dateformat(@$item['webinar_date'],DISPLAY_DATE) }}</div>
                                <div class="text-muted"><strong>Time:</strong> {{@$item['start_time']}} ({{@$item['time_zone']}})</div>
                                <div class="text-muted"><strong>Duration:</strong> {{@$item['duration']}}</div>
                            </div>

                            <a href="{{@$item['meeting_url']}}" target="_blank" class="btn btn-info align-self-center align-self-start text-center">
                                Register on {{@$item['meeting_platform_name']}}
                            </a>

                        </div>
                    </div>
                </div>
                @endforeach
            @endif
        </div>
    </div>
</div> 
<script type="text/javascript">
    $(document).ready(function () {
	$('html, body').animate({
	   scrollTop: $('#candidate-detail-title').offset().top - 120
       }, 800);
    }); 
</script>
@endsection