@extends('layout_web.layouts')

@section('content')
    <!--=====================================-->
    <!--=       Breadcrumb Area Start      =-->
    <!--=====================================-->



    <div class="edu-breadcrumb-area breadcrumb-style-3">
        <div class="container">
            <div class="breadcrumb-inner">
                <ul class="edu-breadcrumb">
                    <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                    <li class="separator"><i class="icon-angle-right"></i></li>

                    <li class="breadcrumb-item active" aria-current="page">Online Sessions</li>
                </ul>
                <div class="page-title">
                    <h1 class="title">Global Education Fall Meeting for Everyone</h1>
                </div>

            </div>
        </div>
        <ul class="shape-group">
            <li class="shape-1">
                <span></span>
            </li>
            <li class="shape-2 scene"><img data-depth="2" src="{{ asset('web/assets/images/about/shape-13.png') }}"
                    alt="shape"></li>
            <li class="shape-3 scene"><img data-depth="-2" src="{{ asset('web/assets/images/about/shape-15.png') }}"
                    alt="shape"></li>
            <li class="shape-4">
                <span></span>
            </li>
            <li class="shape-5 scene"><img data-depth="2" src="{{ asset('web/assets/images/about/shape-07.png') }}"
                    alt="shape"></li>
        </ul>
    </div>



    <!--=====================================-->
    <!--=        Courses Area Start         =-->
    <!--=====================================-->
    <div class="edu-course-area course-area-1 section-gap-equal">
        <div class="container">
            <div class="row g-5">
                <div class="col-lg-3">
                    <div class="edu-course-sidebar">

                        <div class="edu-course-widget widget-category">
                            <div class="inner">
                                <h5 class="widget-title">Filter by Educational Stage</h5>
                                <div class="content">
                                    @foreach ($stages as $stage)
                                        <div class="edu-form-check">
                                            <!-- Use unique id for each checkbox -->
                                            <input type="checkbox" class="educationalStageId"
                                                id="educationalStageId{{ $stage->id }}" value="{{ $stage->id }}">
                                            <label for="educationalStageId{{ $stage->id }}">{{ $stage->name }}</label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>


                        <!-- Container for stage years -->
                        <div id="stage-year-container" class="edu-course-widget widget-category">
                            <div class="inner">
                                <h5 class="widget-title">Stage Years</h5>
                                <div class="content">
                                    <!-- Stage years will be populated here by JavaScript -->
                                </div>
                            </div>
                        </div>


                        <div class="edu-course-widget widget-instructor" id="teacher-container">
                            <div class="inner">
                                <h5 class="widget-title">Teacher</h5>
                                <div class="content">
                                    <!-- Teachers will be populated here -->
                                </div>
                            </div>
                        </div>



                        <div class="edu-course-widget widget-language" id="data-container">
                            <div class="inner">
                                <h5 class="widget-title">Language</h5>
                                <div class="content">
                                    @foreach ($languages as $lang)
                                        <div class="edu-form-check">
                                            <input type="checkbox" name="languages[]" id="inst-check{{ $lang->id }}"
                                                value="{{ $lang->id }}" class="language-filter">
                                            <label for="inst-check{{ $lang->id }}">{{ $lang->name }}</label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>


                        <div class="edu-course-widget widget-rating">
                            <div class="inner">
                                <h5 class="widget-title">Rating</h5>
                                <div class="content">
                                    <div class="edu-form-check">
                                        <input type="checkbox" id="rating-check1">
                                        <label for="rating-check1">
                                            <i class="icon-23"></i>
                                            <i class="icon-23"></i>
                                            <i class="icon-23"></i>
                                            <i class="icon-23"></i>
                                            <i class="icon-23"></i>
                                        </label>
                                    </div>
                                    <div class="edu-form-check">
                                        <input type="checkbox" id="rating-check2">
                                        <label for="rating-check2">
                                            <i class="icon-23"></i>
                                            <i class="icon-23"></i>
                                            <i class="icon-23"></i>
                                            <i class="icon-23"></i>
                                            <i class="off icon-23"></i>
                                        </label>
                                    </div>
                                    <div class="edu-form-check">
                                        <input type="checkbox" id="rating-check3">
                                        <label for="rating-check3">
                                            <i class="icon-23"></i>
                                            <i class="icon-23"></i>
                                            <i class="icon-23"></i>
                                            <i class="off icon-23"></i>
                                            <i class="off icon-23"></i>
                                        </label>
                                    </div>
                                    <div class="edu-form-check">
                                        <input type="checkbox" id="rating-check4">
                                        <label for="rating-check4">
                                            <i class="icon-23"></i>
                                            <i class="icon-23"></i>
                                            <i class="off icon-23"></i>
                                            <i class="off icon-23"></i>
                                            <i class="off icon-23"></i>
                                        </label>
                                    </div>
                                    <div class="edu-form-check">
                                        <input type="checkbox" id="rating-check5">
                                        <label for="rating-check5">
                                            <i class="icon-23"></i>
                                            <i class="off icon-23"></i>
                                            <i class="off icon-23"></i>
                                            <i class="off icon-23"></i>
                                            <i class="off icon-23"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9 col-pl--35">


                    <div class="edu-sorting-area">
                        <div class="sorting-left">
                            <h6 class="showing-text">We found <span>71</span> Online Sessions available for you</h6>
                        </div>

                    </div>


                    @if ($curriculumSessions->isNotEmpty())
                        @foreach ($curriculumSessions as $curriculumSession)
                            @if ($curriculumSession->onlineSessions->isNotEmpty())
                                @foreach ($curriculumSession->onlineSessions as $onlineSession)
                                    @foreach ($overviews as $overview)
                                        <div class="edu-course course-style-4 course-style-14">
                                            <div class="inner">
                                                <div class="thumbnail">
                                                    <a
                                                        href="{{ route('course.details', ['slug' => str_slug($curriculumSession->title)]) }}">
                                                        <img src="{{ empty($curriculumSession->image) ? asset('web/assets/images/default.jpg') : Storage::url($curriculumSession->image) }}"
                                                            alt="Course Image">
                                                    </a>
                                                    <div class="time-top">
                                                        <span class="duration"><i
                                                                class="icon-61"></i>{{ $onlineSession->duration }}</span>
                                                    </div>
                                                </div>
                                                <div class="content">
                                                    <h6 class="title">
                                                        <a
                                                            href="{{ route('course.details', ['slug' => str_slug($curriculumSession->title)]) }}">
                                                            {{ $curriculumSession->title }}
                                                        </a>
                                                    </h6>
                                                    <li class="course-rating">
                                                        <div class="rating">
                                                            @for ($i = 1; $i <= 5; $i++)
                                                                <i
                                                                    class="icon-23 {{ $i <= $curriculumSession->rating ? 'filled' : 'empty' }}"></i>
                                                            @endfor
                                                        </div>
                                                        <span class="rating-count">{{ $curriculumSession->rating }}</span>
                                                    </li>
                                                    <p>{{ substr($overview->description, 0, 100) }}..</p>
                                                    <ul class="course-meta">
                                                        <li><i class="icon-24"></i>{{ $onlineSession->lessons }} Lessons
                                                        </li>
                                                        <li><i class="icon-25"></i>20 Students</li>
                                                    </ul>
                                                </div>
                                                <div class="hover-content-aside">
                                                    <div class="content">
                                                        <span class="course-level">Engineering</span>
                                                        <h5 class="title">
                                                            <a
                                                                href="{{ route('course.details', ['slug' => str_slug($curriculumSession->title)]) }}">
                                                                {{ $curriculumSession->title }}
                                                            </a>
                                                        </h5>
                                                        <li class="course-rating">
                                                            <div class="rating">
                                                                @for ($i = 1; $i <= 5; $i++)
                                                                    <i
                                                                        class="icon-23 {{ $i <= $curriculumSession->rating ? 'filled' : 'empty' }}"></i>
                                                                @endfor
                                                            </div>
                                                            <span
                                                                class="rating-count">{{ $curriculumSession->rating }}</span>
                                                        </li>
                                                        <ul class="course-meta">
                                                            <li>{{ $onlineSession->lessons }} Lessons</li>
                                                        </ul>
                                                        <div class="course-feature">
                                                            <h6 class="title">What You’ll Learn?</h6>
                                                            {!! $overview->content !!}
                                                        </div>
                                                        <div class="button-group">
                                                            <a href="#" class="edu-btn btn-medium">Add to Cart</a>
                                                            <a href="#" class="wishlist-btn btn-outline-dark"><i
                                                                    class="icon-22"></i></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                @endforeach
                            @else
                                <p>No online sessions found.</p>
                            @endif
                        @endforeach
                    @else
                        <p>No curriculum sessions found.</p>
                    @endif




                </div>
            </div>


            <ul class="edu-pagination ">
                <li><a href="#" aria-label="Previous"><i class="icon-west"></i></a></li>
                <li class="active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li class="more-next"><a href="#"></a></li>
                <li><a href="#">8</a></li>
                <li><a href="#" aria-label="Next"><i class="icon-east"></i></a></li>
            </ul>

        </div>
    </div>
    <!-- End Course Area -->
    <!--=====================================-->
@endsection
@push('js')
    @include('web.shared.AjaxCourseList');
@endpush