@extends('layout_web.layouts')


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


    <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"><a href="#">Online Sessions</a></li>
                    <li class="separator"><i class="icon-angle-right"></i></li>
                    <li class="breadcrumb-item active" aria-current="page">Online Session Details</li>
                </ul>
                <div class="page-title">
                    <h1 class="title">{{ $curriculumSession->title }}</h1>
                </div>
                <ul class="course-meta">
                    <li><i class="icon-58"></i>by {{ $currentTeacherName }}</li>
                    <li><i class="icon-59"></i>{{ $selectedLanguageName }}</li>
                    <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>





            </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 Details Area Start    =-->
    <!--=====================================-->
    <section class="edu-section-gap course-details-area">
        <div class="container">
            <div class="row row--30">
                <div class="col-lg-8">
                    <div class="course-details-content">
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="overview-tab" data-bs-toggle="tab"
                                    data-bs-target="#overview" type="button" role="tab" aria-controls="overview"
                                    aria-selected="true">Overview</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="carriculam-tab" data-bs-toggle="tab"
                                    data-bs-target="#carriculam" type="button" role="tab" aria-controls="carriculam"
                                    aria-selected="false">Carriculam</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="instructor-tab" data-bs-toggle="tab"
                                    data-bs-target="#instructor" type="button" role="tab" aria-controls="instructor"
                                    aria-selected="false">Instructor</button>
                            </li>

                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="review-tab" data-bs-toggle="tab" data-bs-target="#review"
                                    type="button" role="tab" aria-controls="review"
                                    aria-selected="false">Reviews</button>
                            </li>
                        </ul>

                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="overview" role="tabpanel"
                                aria-labelledby="overview-tab">
                                <div class="course-tab-content">
                                    <div class="course-overview">
                                        @foreach ($overviews as $overview)
                                            <h3 class="heading-title">Online Session Description</h3>
                                            <p>{{ substr($overview->description, 0, 100) }}..</p>

                                            <p class="mb--60">{{ substr($overview->description_two, 0, 100) }}..
                                            </p>
                                            <h5 class="title">What You’ll Learn?</h5>
                                            {!! $overview->content !!}

                                            <p>Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et
                                                dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco
                                                laboris nis aliquip commodo consequat duis aute irure dolor.</p>

                                    </div>

                                </div>
                            </div>
                            <div class="tab-pane fade" id="carriculam" role="tabpanel" aria-labelledby="carriculam-tab">
                                <div class="course-tab-content">
                                    <div class="course-curriculam">
                                        <h3 class="heading-title">Online Session Curriculum</h3>
                                        <p>{{ substr($overview->description_title, 0, 100) }}..</p>
                                        @endforeach

                                        <div class="course-lesson">
                                            @foreach ($topics as $topic)
                                                <h5 class="title">{{ $topic->title }}</h5>
                                                <p>{{ substr($topic->description, 0, 100) }}..</p>
                                            @endforeach

                                            <ul>
                                                @foreach ($topicCourseInformation as $topicInfo)
                                                    <li>
                                                        <div class="text"><i class="icon-65"></i>
                                                            {{ $topicInfo['title'] }}
                                                        </div>

                                                        @php
                                                            $matchingQuestionTopics = $questionTopics->where(
                                                                'topic_course_information_id',
                                                                $topicInfo['id'],
                                                            );

                                                            $questionCount = $matchingQuestionTopics->count();

                                                            $time = isset($topicInfo['time'])
                                                                ? $topicInfo['time'] . ' Minutes'
                                                                : '';

                                                            $questionId = $matchingQuestionTopics->first()
                                                                ? $matchingQuestionTopics->first()->id
                                                                : null;
                                                        @endphp

                                                        @if ($questionCount > 0 || $time)
                                                            <div class="badge-list">
                                                                @if ($questionCount > 0)
                                                                    <a href="{{ route('questions.show', ['id' => $matchingQuestionTopics->first()->id]) }}"
                                                                        class="badge badge-primary">
                                                                        {{ $questionCount }}
                                                                        Question{{ $questionCount > 1 ? 's' : '' }}
                                                                    </a>
                                                                @endif

                                                                @if ($time)
                                                                    <span
                                                                        class="badge badge-secondary">{{ $time }}</span>
                                                                @endif
                                                            </div>
                                                        @else
                                                            <div class="icon"><i class="icon-68"></i></div>
                                                        @endif
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>

                                    </div>

                                </div>

                            </div>

                            <div class="tab-pane fade" id="instructor" role="tabpanel" aria-labelledby="instructor-tab">
                                <div class="course-tab-content">
                                    <div class="course-instructor">
                                        @foreach ($instructors as $instructor)
                                            <div class="thumbnail">

                                                <img src="{{ empty($instructor->image) ? asset('web/assets/images/default.jpg') : Storage::url($instructor->image) }}"
                                                    alt="Course Image">
                                            </div>
                                            <div class="author-content">
                                                <h6 class="title">{{ $instructor->name }}</h6>
                                                <span class="subtitle">{{ $instructor->title }}</span>
                                                <p>{{ substr($instructor->description, 0, 100) }}..</p>

                                                <ul class="social-share">
                                                    <li><a href="#"><i class="icon-facebook"></i></a></li>
                                                    <li><a href="#"><i class="icon-twitter"></i></a></li>
                                                    <li><a href="#"><i class="icon-linkedin2"></i></a></li>
                                                    <li><a href="#"><i class="icon-youtube"></i></a></li>
                                                </ul>

                                            </div>
                                        @endforeach

                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="review" role="tabpanel" aria-labelledby="review-tab">
                                <div class="course-tab-content">
                                    <div class="course-review">
                                        <h3 class="heading-title">Online Session Rating</h3>
                                        <p>5.00 average rating based on 7 rating</p>
                                        <div class="row g-0 align-items-center">
                                            <div class="col-sm-4">
                                                <div class="rating-box">
                                                    <!-- Display the average rating number -->
                                                    <div class="rating-number">{{ $curriculumSession->rating }}</div>

                                                    <!-- Display the stars for the rating dynamically -->
                                                    <div class="rating"
                                                        aria-label="Rating: {{ $curriculumSession->rating }} out of 5">
                                                        @for ($i = 1; $i <= 5; $i++)
                                                            <i class="icon-23 {{ $i <= $curriculumSession->rating ? 'filled' : 'empty' }}"
                                                                aria-hidden="true"></i>
                                                        @endfor
                                                    </div>

                                                    <!-- Display the number of reviews -->
                                                    <span class="review-count">(7 Reviews)</span>
                                                    <!-- Adjust the number of reviews dynamically if needed -->
                                                </div>
                                            </div>

                                            <div class="col-sm-8">
                                                <div class="review-wrapper">

                                                    <div class="single-progress-bar">
                                                        <div class="rating-text">
                                                            5 <i class="icon-23"></i>
                                                        </div>
                                                        <div class="progress">
                                                            <div class="progress-bar" role="progressbar"
                                                                style="width: 100%" aria-valuenow="100" aria-valuemin="0"
                                                                aria-valuemax="100"></div>
                                                        </div>
                                                        <span class="rating-value">7</span>
                                                    </div>

                                                    <div class="single-progress-bar">
                                                        <div class="rating-text">
                                                            4 <i class="icon-23"></i>
                                                        </div>
                                                        <div class="progress">
                                                            <div class="progress-bar" role="progressbar"
                                                                style="width: 0%" aria-valuenow="0" aria-valuemin="0"
                                                                aria-valuemax="100"></div>
                                                        </div>
                                                        <span class="rating-value">0</span>
                                                    </div>

                                                    <div class="single-progress-bar">
                                                        <div class="rating-text">
                                                            4 <i class="icon-23"></i>
                                                        </div>
                                                        <div class="progress">
                                                            <div class="progress-bar" role="progressbar"
                                                                style="width: 0%" aria-valuenow="0" aria-valuemin="0"
                                                                aria-valuemax="100"></div>
                                                        </div>
                                                        <span class="rating-value">0</span>
                                                    </div>

                                                    <div class="single-progress-bar">
                                                        <div class="rating-text">
                                                            4 <i class="icon-23"></i>
                                                        </div>
                                                        <div class="progress">
                                                            <div class="progress-bar" role="progressbar"
                                                                style="width: 0%" aria-valuenow="0" aria-valuemin="0"
                                                                aria-valuemax="100"></div>
                                                        </div>
                                                        <span class="rating-value">0</span>
                                                    </div>

                                                    <div class="single-progress-bar">
                                                        <div class="rating-text">
                                                            4 <i class="icon-23"></i>
                                                        </div>
                                                        <div class="progress">
                                                            <div class="progress-bar" role="progressbar"
                                                                style="width: 0%" aria-valuenow="0" aria-valuemin="0"
                                                                aria-valuemax="100"></div>
                                                        </div>
                                                        <span class="rating-value">0</span>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>

                                        <!-- Start Comment Area  -->
                                        <div class="comment-area">
                                            <h3 class="heading-title">Reviews</h3>
                                            <div class="comment-list-wrapper">
                                                <!-- Start Single Comment  -->
                                                <div class="comment">
                                                    <div class="thumbnail">
                                                        <img src="assets/images/blog/comment-01.jpg" alt="Comment Images">
                                                    </div>
                                                    <div class="comment-content">
                                                        <div class="rating">
                                                            <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>
                                                        </div>
                                                        <h5 class="title">Haley Bennet</h5>
                                                        <span class="date">Oct 10, 2024</span>
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do
                                                            eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                                    </div>
                                                </div>
                                                <!-- End Single Comment  -->
                                                <!-- Start Single Comment  -->
                                                <div class="comment">
                                                    <div class="thumbnail">
                                                        <img src="assets/images/blog/comment-02.jpg" alt="Comment Images">
                                                    </div>
                                                    <div class="comment-content">
                                                        <div class="rating">
                                                            <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>
                                                        </div>
                                                        <h5 class="title">Simon Baker</h5>
                                                        <span class="date">Oct 10, 2024</span>
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do
                                                            eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                                    </div>
                                                </div>
                                                <!-- End Single Comment  -->
                                                <!-- Start Single Comment  -->
                                                <div class="comment">
                                                    <div class="thumbnail">
                                                        <img src="assets/images/blog/comment-03.jpg" alt="Comment Images">
                                                    </div>
                                                    <div class="comment-content">
                                                        <div class="rating">
                                                            <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>
                                                        </div>
                                                        <h6 class="title">Richard Gere</h6>
                                                        <span class="date">Oct 10, 2024</span>
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do
                                                            eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                                    </div>
                                                </div>
                                                <!-- End Single Comment  -->
                                            </div>
                                        </div>
                                        <!-- End Comment Area  -->
                                        <div class="comment-form-area">
                                            <h3 class="heading-title">Write a Review</h3>
                                            <div class="rating-icon">
                                                <h6 class="title">Rating Here</h6>
                                                <div class="rating">
                                                    <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>
                                                </div>
                                            </div>
                                            <form class="comment-form">
                                                <div class="row g-5">
                                                    <div class="form-group col-lg-6">
                                                        <input type="text" name="comm-title" id="comm-title"
                                                            placeholder="Review Title">
                                                    </div>
                                                    <div class="form-group col-lg-6">
                                                        <input type="text" name="comm-name" id="comm-name"
                                                            placeholder="Reviewer name">
                                                    </div>
                                                    <div class="form-group col-12">
                                                        <input type="email" name="comm-email" id="comm-email"
                                                            placeholder="Reviewer email">
                                                    </div>
                                                    <div class="form-group col-12">
                                                        <textarea name="comm-message" id="comm-message" cols="30" rows="5" placeholder="Review summary"></textarea>
                                                    </div>
                                                    <div class="form-group col-12">
                                                        <button type="submit" class="edu-btn submit-btn">Submit Review <i
                                                                class="icon-4"></i></button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="course-sidebar-3 sidebar-top-position">
                        <div class="edu-course-widget widget-course-summery">
                            <div class="inner">
                                @foreach ($videos as $video)
                                    <div class="thumbnail">

                                        <img src="{{ empty($video->video_image) ? asset('web/assets/images/default.jpg') : Storage::url($video->video_image) }}"
                                            alt="{{ $video->name }}">
                                        <a href="{{ $video->videos }}" class="play-btn video-popup-activation"
                                            target="_blank"><i class="icon-18"></i></a>
                                    </div>
                                @endforeach



                                <div class="content">
                                    <h4 class="widget-title">Online Session Includes:</h4>
                                    @foreach ($onlineSessions as $session)
                                        <ul class="course-item">
                                            {{-- <li>
                                                <span class="label"><i class="icon-60"></i>Price:</span>
                                                <span class="value price">$ {{ $session->price }} </span>
                                            </li> --}}
                                            <li>
                                                <span class="label"><i class="icon-62"></i>Instrutor:</span>
                                                <span class="value">{{ $currentTeacherName }}</span>
                                            </li>
                                            <li>
                                                <span class="label"><i class="icon-61"></i>Duration:</span>
                                                <span class="value">{{ $session->duration }} weeks</span>
                                            </li>
                                            <li>
                                                <span class="label">
                                                    <img class="svgInject"
                                                        src="{{ asset('web/assets/images/svg-icons/books.svg') }}"
                                                        alt="book icon">
                                                    Lessons:</span>
                                                <span class="value">{{ $session->lessons }}</span>
                                            </li>
                                            <li>
                                                <span class="label"><i class="icon-63"></i>Enrolled:</span>
                                                <span class="value">65 students</span>
                                            </li>
                                            <li>
                                                <span class="label"><i class="icon-59"></i>Language:</span>
                                                <span class="value">{{ $selectedLanguageName }}</span>
                                            </li>
                                            <li>
                                                <span class="label"><i class="icon-64"></i>Certificate:</span>
                                                <span class="value">{{ $session->certificate }}</span>
                                            </li>
                                        </ul>
                                    @endforeach

                                    <div class="read-more-btn">
                                        <a href="#" class="edu-btn">Start Now <i class="icon-4"></i></a>
                                    </div>
                                    <div class="share-area">
                                        <h4 class="title">Share On:</h4>
                                        <ul class="social-share">
                                            <li><a href="#"><i class="icon-facebook"></i></a></li>
                                            <li><a href="#"><i class="icon-twitter"></i></a></li>
                                            <li><a href="#"><i class="icon-linkedin2"></i></a></li>
                                            <li><a href="#"><i class="icon-youtube"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--=====================================-->
    <!--=     More Courses Area Start    =-->
    <!--=====================================-->
    <!-- Start Course Area  -->
    <div class="gap-bottom-equal">
        <div class="container">
            <div class="section-title section-left" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                <h3 class="title">More Courses for You</h3>
            </div>
            <div class="row g-5 swiper business-course-activation">
                <div class="swiper-wrapper">
                    @foreach ($curriculumSessions as $curriculumSession)
                        <!-- Start Single Course  -->
                        <div class="col-12 col-xl-4 col-lg-6 col-md-6 swiper-slide" data-sal-delay="150"
                            data-sal="slide-up" data-sal-duration="800">
                            <div class="inline edu-course course-style-5"
                                data-tipped-options="inline: 'inline-tooltip-{{ $loop->index }}'">
                                <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>
                                    <div class="content">
                                        @foreach ($curriculumSession->onlineSessions as $onlineSession)
                                            <div class="course-price price-round">${{ $onlineSession->price }}</div>
                                            <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>
                                            <p>Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor.</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>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            <!-- Tooltip -->
                            <div id="inline-tooltip-{{ $loop->index }}" style="display:none">
                                <div class="course-layout-five-tooltip-content">
                                    <div class="content">
                                        <span class="course-level">Cooking</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>
                        <!-- End Single Course  -->
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <!-- End Course Area -->
@endsection