@extends('web.layouts.layout')

@section('content')

    <main class="mt-100">
        <section class="course-details-section section_padding pb-0">
            <div class="container">
                <div class="row">
                    <!-- Tabs Section -->
                    <div class="col-lg-8 col-md-8 col-sm-12">

                        <h2 class="wow slow fadeInUp fw-bold mb-3 mt-3 dark-text">
                            {{ $course->currentDescription->title ?? "" }}
                        </h2>

                        <div class="grey-text mb-5 wow clip-image-bottom text-description">
                            {!! $course->currentDescription->description ?? "" !!}
                        </div>

                        <div class="card no-border learn-section p-4 raddius-8 mt-4 mb-5">
                            @include('web.courses::show._schedule')
                        </div>

                        <!-- description-->
                        <ul class="wow slow fadeInUp nav nav-pills courses-nav w-100 mt-5"
                            id="profileTabs-courses"
                            role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active"
                                   id="course-cont-tab"
                                   data-bs-toggle="pill"
                                   href="#course-cont-content"
                                   role="tab"
                                   aria-controls="course-cont-content"
                                   aria-selected="false">
                                    {{ __('lessons::lessons.lessons') }}
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link"
                                   id="rate-tab"
                                   data-bs-toggle="pill"
                                   href="#rate-content"
                                   role="tab"
                                   aria-controls="rate-content"
                                   aria-selected="false">
                                    {{ __('ratings::ratings.ratings') }}
                                </a>
                            </li>
                        </ul>

                        <div class="tab-content wow slow fadeInUp" id="profileTabContent2">
                            <!--course content tab-->
                            <div class="tab-pane fade show active"
                                 id="course-cont-content"
                                 role="tabpanel"
                                 aria-labelledby="course-cont-tab">
                                <div class="card no-border py-4">
                                    <div class="card-body p-0">
                                        <div class="accordion accordion-content" id="accordionExample">
                                            @if($course->units->isNotEmpty())
                                                @foreach($course->units as $unit)
                                                    <div class="accordion-item box-shadow">
                                                        <div class="accordion-header" id="heading_{{ $unit->id }}">
                                                            <button class="accordion-button fs-5"
                                                                    type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#collapse_{{ $unit->id }}"
                                                                    aria-expanded="true"
                                                                    aria-controls="collapse_{{ $unit->id }}">
                                                                <div class="row w-100">
                                                                    <div class="col-md-8 col-lg-8 col-sm-12">
                                                                        <p class="fw-bold">{{ $unit->currentDescription->title ?? "" }}</p>
                                                                    </div>
                                                                    <div class="col-md-4 col-lg-4 col-sm-12 text-end">
                                                                        <span class="fs-6 me-3">
                                                                            {{ pluralize('lessons::lessons.lesson_count', $unit->related_lessons_count) }}
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                            </button>
                                                        </div>
                                                        <div id="collapse_{{ $unit->id }}"
                                                             class="accordion-collapse collapse"
                                                             aria-labelledby="heading_{{ $unit->id }}"
                                                             data-bs-parent="#accordionExample">
                                                            <div class="accordion-body">
                                                                @if ($unit->lessons->isNotEmpty())
                                                                    @foreach ($unit->lessons as $lesson)
                                                                        @php
                                                                            $lessonTitle = $lesson->currentDescription->title ?? "";
                                                                        @endphp

                                                                        @if($lesson->type === 'live')
                                                                            <a href="javascript:void(0);"
                                                                               class="file d-flex align-items-center">
                                                                                <i class="fa-light fa-video me-2"></i>
                                                                                <span>: {{ $lessonTitle }}</span>
                                                                                <span class="live_span ms-auto">
                                                                                <i class="fa-solid fa-circle"></i>
                                                                                {{ __('courses::courses.live') }}
                                                                            </span>
                                                                            </a>
                                                                        @elseif($lesson->is_free)
                                                                            <a href="javascript:void(0);"
                                                                               class="file d-flex align-items-center get-lesson"
                                                                               data-id="{{ $lesson->id }}">
                                                                                <i class="fa-light fa-video me-2"></i>
                                                                                <span>: {{ $lessonTitle }}</span>
                                                                                <i class="fa-light fa-circle-play ms-auto fs-4 green2-text"></i>
                                                                            </a>
                                                                        @else
                                                                            <a href="javascript:void(0);"
                                                                               class="file d-flex align-items-center">
                                                                                <i class="fa-light fa-video me-2"></i>
                                                                                <span>: {{ $lessonTitle }}</span>
                                                                                <i class="fa-regular fa-lock-keyhole ms-auto fs-4 mainColor"></i>
                                                                            </a>
                                                                        @endif
                                                                    @endforeach
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!--rate tab-->
                            <div class="tab-pane fade"
                                 id="rate-content"
                                 role="tabpanel"
                                 aria-labelledby="rate-tab">
                                @include('web.courses::show._rating_list')
                            </div>
                        </div>
                    </div>

                    <!-- Tab Content Section -->
                    <div class="col-lg-4 col-md-4 col-sm-12">
                        <div class="card box-shadow no-border px-3 py-4 left-side-course wow slow fadeInUp">
                            @include('web.partials._play_video', [
                                'video' => $course->intro_video_link,
                                'iframeHeight' => 235,
                            ])
                            <p class="card-text mt-2 d-flex align-items-center">
                                <span class="fw-bold fs-3 me-1">
                                    {{ $coursePriceResult['amount'] ?? "" }}
                                </span> {{ $coursePriceResult['currency'] ?? "" }}
                                @if($course->discount_percentage > 0)
                                    <small class="grey-text line-through ms-2">
                                        {{ $coursePriceResult['amount2_currency'] ?? "" }}
                                    </small>
                                    <label class="discount text-white fs-6 ms-3">
                                        {{ __('main.discount', ['percent' => $course->discount_percentage]) }}
                                    </label>
                                @endif
                            </p>
                            @if(!$isSubscribed)
                                <form method="post"
                                      action="{{ route('web.subscriptions.store') }}"
                                      class="ajax-form">
                                    @csrf
                                    <button type="submit"
                                            class="btn btn-primary hvr-txt-trans px-4 py-3 fs-5 mt-2 w-100">
                                        <div class="txt" data-text="{{ __('main.register_now') }}">
                                            <span class="fs-5">
                                              {{ __('main.register_now') }}
                                              <i class="fa-solid fa-arrow-left-long vertical-middle ms-2"></i>
                                            </span>
                                        </div>
                                    </button>
                                    <input type="hidden" name="course_id" value="{{ $course->id }}"/>
                                </form>
                            @endif
                            <div class="mt-3 details px-2">
                                <div class="row d-flex align-items-center item fw-bold">
                                    <div class="col-md-6 col-lg-6 col-sm-12">
                                        <div class="d-flex align-items-center">
                                            <i
                                                class="fa-light fa-chalkboard-user green2-text fs-5"
                                            ></i>
                                            <span class="dark-text ms-1 fs-6">{{ __('users::teachers.teacher') }}</span>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-6 col-sm-12 text-end">
                                        <span
                                            class="fs-6 grey-text">{{ $course->user->name ?? $course->user->username ?? "" }}</span>
                                    </div>
                                </div>

                                <div class="row d-flex align-items-center item fw-bold">
                                    <div class="col-md-6 col-lg-6 col-sm-12">
                                        <div class="d-flex align-items-center">
                                            <i class="fa-light fa-file green2-text fs-6"></i>
                                            <span
                                                class="dark-text ms-1 fs-6">{{ __('lessons::lessons.lessons') }}</span>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-6 col-sm-12 text-end">
                                        <span class="fs-6 grey-text">
                                            {{ pluralize('lessons::lessons.lesson_count', $course->lessons_count) }}
                                        </span>
                                    </div>
                                </div>

                                <div class="row d-flex align-items-center item fw-bold">
                                    <div class="col-md-6 col-lg-6 col-sm-12">
                                        <div class="d-flex align-items-center">
                                            <i class="fa-light fa-clock green2-text fs-5"></i>
                                            <span class="dark-text ms-1 fs-6">
                                                {{ __('courses::courses.training_course_duration') }}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-6 col-sm-12 text-end">
                                        <span
                                            class="fs-6 grey-text"> {{ $course->course_duration['days_text'] ?? '' }} </span>
                                    </div>
                                </div>

                                <div class="row d-flex align-items-center item fw-bold">
                                    <div class="col-md-6 col-lg-6 col-sm-12">
                                        <div class="d-flex align-items-center">
                                            <i class="fa-light fa-star green2-text fs-5"></i>
                                            <span class="dark-text ms-1 fs-6">
                                                {{ __('courses::courses.enrolled') }}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-6 col-sm-12 text-end">
                                        <span class="fs-6 grey-text">
                                            {{ pluralize('courses::courses.students_count', $course->subscriptions_count) }}
                                        </span>
                                    </div>
                                </div>

                                <div class="row d-flex align-items-center item fw-bold">
                                    <div class="col-md-6 col-lg-6 col-sm-12">
                                        <div class="d-flex align-items-center">
                                            <i
                                                class="fa-light fa-book-open-reader green2-text fs-5"
                                            ></i>
                                            <span
                                                class="dark-text ms-1 fs-6">{{ __('courses::courses.course_start') }}</span>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-6 col-sm-12 text-end">
                                        <span class="fs-6 grey-text"> {{ $course->start_date_formatted }} </span>
                                    </div>
                                </div>

                                <div class="row d-flex align-items-center item fw-bold">
                                    <div class="col-md-6 col-lg-6 col-sm-12">
                                        <div class="d-flex align-items-center">
                                            <i class="fa-light fa-book green2-text fs-5"></i>
                                            <span
                                                class="dark-text ms-1 fs-6">{{ __('courses::courses.course_end') }}</span>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-6 col-sm-12 text-end">
                                        <span class="fs-6 grey-text"> {{ $course->end_date_formatted }} </span>
                                    </div>
                                </div>
                            </div>
                            <div class="share row mt-4 align-items-center">
                                <div class="col-md-4 col-lg-4 col-sm-12">
                                    <span class="dark-text fw-bold fs-4"> {{ __('main.share_on') }} :</span>
                                </div>
                                <div class="col-md-8 col-lg-8 col-sm-12">
                                    <div class="social_links d-flex justify-content-end ">
                                        <a href="#" class="share-facebook" data-url="{{ $coursePage }}"
                                           data-title="{{ $itemTitle }}">
                                            <i class="fa-brands fa-facebook-f"></i>
                                        </a>
                                        <a href="#" class="share-twitter" data-url="{{ $coursePage }}"
                                           data-title="{{ $itemTitle }}">
                                            <i class="fa-brands fa-twitter"></i>
                                        </a>
                                        {{-- <a href="#" class="share-snapchat" data-url="{{ $coursePage }}"
                                           data-title="{{ $itemTitle }}">
                                            <i class="fa-brands fa-snapchat"></i>
                                        </a> --}}
                                        <a href="#" class="share-whatsapp" data-url="{{ $coursePage }}"
                                           data-title="{{ $itemTitle }}">
                                            <i class="fab fa-whatsapp"></i>
                                        </a>
                                        <a href="#" class="share-telegram" data-url="{{ $coursePage }}"
                                           data-title="{{ $itemTitle }}">
                                            <i class="fab fa-telegram-plane"></i>
                                        </a>
                                        <a href="javascript:void(0);" class="copy-link" data-url="{{ $coursePage }}">
                                            <i class="fas fa-link"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div
                            class="wow slow fadeInUp card box-shadow no-border px-3 py-3 related-section mt-4 related-courses">
                            <h4 class="dark-text fw-bold mb-3">{{ __('courses::courses.related_courses') }}</h4>
                            @if(isset($relatedCourses) && $relatedCourses->isNotEmpty())
                                @foreach($relatedCourses as $relatedCourse)
                                    @php
                                        /**
                                        * @var ?string $currentIsoCode
                                        */
                                        $relatedCoursePriceResult = $relatedCourse->getPriceByIsoCode($currentIsoCode);
                                        $relatedCoursePrice = $relatedCoursePriceResult['amount'] ?? 0;
                                        $relatedCoursePrice2 = $relatedCoursePriceResult['amount2'] ?? 0;
                                        $relatedCoursePriceCurrency = $relatedCoursePriceResult['amount_currency'] ?? "";
                                        $relatedCoursePrice2Currency = $relatedCoursePriceResult['amount2_currency'] ?? "";
                                    @endphp
                                    <div class="card no-border">
                                        <div class="row g-0 d-flex align-items-center">
                                            <div class="col-md-3">
                                                <a href="{{ route('web.courses.show', $relatedCourse->id) }}">
                                                    <img data-src="{{ getImage($relatedCourse->image) }}"
                                                         src="{{ getImage($relatedCourse->image) }}"
                                                         class="img_cover lazyloaded"
                                                         alt="{{ $relatedCourse->title }}"/>
                                                </a>
                                            </div>
                                            <div class="col-md-9">
                                                <div class="card-body">
                                                    <p>
                                                        {{-- @for ($i = 1; $i <= $relatedCourse->ratings_info->avg_ratings ?? 0; $i++)
                                                            <i class="fa-solid fa-star yellow-1-color"></i>
                                                        @endfor --}}
                                                        @for ($i = 1; $i <= 5; $i++)
                                                            <i class="fa-solid fa-star {{ $i <= $relatedCourse->ratings_info->avg_ratings ?? 0 ? 'yellow-1-color' : '' }}"></i>
                                                        @endfor
                                                    </p>
                                                    <a href="{{ route('web.courses.show', $relatedCourse->id) }}"
                                                       class="card-title dark-text fw-bold mb-0 fs-5">
                                                        {{ $relatedCourse->title }}
                                                    </a>
                                                    <p class="card-text">
                                                        <span
                                                            class="mainColor fw-bold fs-4 me-2"> {{ $relatedCoursePriceCurrency }} </span>
                                                        @if($relatedCourse->discount_percentage > 0)
                                                            <small class="grey-text line-through"> {{ $relatedCoursePrice2Currency }} </small>
                                                        @endif
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <div class="modal fade video-modal" id="courseVideoModal" tabindex="-1" aria-labelledby="courseVideoModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

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

@endsection

@push('stack_scripts')
    <script>
        $("#accordionExample .accordion-button:not(:first)").addClass('collapsed');
        $('#accordionExample .accordion-collapse:first').addClass('show');
    </script>

    <script>
        $(document).on('click', '.get-lesson', function () {
            let lessonId = $(this).data('id');

            $.ajax({
                url: '{{ route('web.lessons.load-free-lesson') }}',
                method: 'POST',
                data: {
                    lessonId
                },
                beforeSend: function () {
                },
                success: function (response) {
                    $('#courseVideoModal .modal-content').html(response.html);
                    $('#courseVideoModal').modal('show');
                },
                error: function (xhr) {
                    displayAjaxError(xhr);
                },
                complete: function (xhr, status) {
                }
            });
        });
    </script>
@endpush