@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">
                        <div class=" video-tabs wow slow fadeInUp ">
                            <div class="video-wrapper">
                                @include('web.partials._play_video', [
                                    'video' => $course->intro_video_link ?? $course->units->flatMap->lessons->first()?->video_link ?? null,
                                    'iframeHeight' => 500,
                                ])
                            </div>
                        </div>

                        <div class="box">
                            <div class="mt_neg row wow slow fadeInUp">
                                <div class="col-md-6 col-lg-6 col-sm-12">
                                    <div class="name fs-3 d-flex align-items-center">
                                        <b> {{ __('users::teachers.teacher2') }} / </b>
                                        <span class="fw-bold dark-text">
                                            {{ $course->user->name ?? $course->user->username ?? "" }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <!-- description-->
                            <ul class="wow slow fadeInUp nav nav-pills courses-nav w-100 mt-4"
                                id="profileTabs-courses"
                                role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active"
                                       id="about-tab"
                                       data-bs-toggle="pill"
                                       href="#about-content"
                                       role="tab"
                                       aria-controls="about-content"
                                       aria-selected="true">
                                        {{ __('courses::courses.about_course') }}
                                    </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">
                                <div class="tab-pane fade show active"
                                     id="about-content"
                                     role="tabpanel"
                                     aria-labelledby="about-tab">
                                    <div class="card no-border py-4">
                                        <div class="card-title dark-text fw-bold">
                                            {{ $course->currentDescription->title ?? "" }}
                                        </div>
                                        <div class="card-body">
                                            <article class="grey-text fs-6">
                                                {!! $course->currentDescription->description ?? "" !!}
                                            </article>
                                            <div class="card no-border learn-section p-4 raddius-8 mt-5">
                                                @include('web.courses::show._schedule')
                                            </div>
                                        </div>
                                    </div>
                                </div>

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

                    <!-- Tab Content Section -->
                    <div class="col-lg-4 col-md-4 col-sm-12">
                        <div class="card box-shadow no-border p-4 left-side wow slow fadeInUp">
                            <h4 class="grey-dark fw-bold mb-3">
                                {{ __('courses::courses.course_content') }}
                            </h4>
                            <div class="accordion" id="accordionExample">
                                @if($course->units->isNotEmpty())
                                    @foreach($course->units as $unit)
                                        <div class="accordion-item">
                                            <h5 class="accordion-header" id="heading_{{ $unit->id }}">
                                                <button class="accordion-button dark-text fw-bold fs-5"
                                                        type="button"
                                                        data-bs-toggle="collapse"
                                                        data-bs-target="#collapse_{{ $unit->id }}"
                                                        aria-expanded="true"
                                                        aria-controls="collapse_{{ $unit->id }}">
                                                    {{ $unit->currentDescription->title ?? "" }}
                                                </button>
                                            </h5>
                                            <div id="collapse_{{ $unit->id }}"
                                                 class="accordion-collapse collapse"
                                                 aria-labelledby="heading_{{ $unit->id }}">
                                                <div class="accordion-body px-0">
                                                    <ul class="nav nav-pills flex-column" role="tablist">
                                                        @if ($unit->lessons->isNotEmpty())
                                                            @foreach ($unit->lessons as $lesson)
                                                                @php
                                                                    $isLessonRecorded = $lesson->type === 'recorded';
                                                                    $href = $isLessonRecorded ? 'javascript:void(0);' : $lesson->live_link;
                                                                    $blank = $isLessonRecorded ? '' : 'target="_blank"';
                                                                    $class = $isLessonRecorded ? 'get-lesson' : '';
                                                                    $attributes = $isLessonRecorded ? "data-id=\"{$lesson->id}\"" : '';
                                                                @endphp
                                                                <li class="nav-item lesson-wrapper">
                                                                    <a href="{{ $href }}"
                                                                       class="nav-link {{ $class }}"
                                                                        {!! $blank !!}
                                                                        {!! $attributes !!}>
                                                                        <div class="row d-flex align-items-center">
                                                                            <div class="col-md-10 col-lg-10 col-sm-12">
                                                                                <div class="d-flex align-items-center">
                                                                                    <i class="fa-light fa-video dark-text"></i>
                                                                                    <span class="fs-6 dark-text ms-2">
                                                                                        {{ __('courses::courses.video') }}: {{ $lesson->currentDescription->title ?? "" }}
                                                                                    </span>
                                                                                </div>
                                                                            </div>
                                                                            @if($isLessonRecorded)
                                                                                <div
                                                                                    class="col-md-2 col-lg-2 col-sm-12 text-end">
                                                                                    <i class="fa-light fa-circle-play dark-text fs-4"></i>
                                                                                </div>
                                                                            @else
                                                                                <div
                                                                                    class="col-md-2 col-lg-2 col-sm-12 text-end">
                                                                                  <span class="live_span text-center">
                                                                                    <i class="fa-solid fa-circle"></i>
                                                                                    {{ __('courses::courses.live') }}
                                                                                  </span>
                                                                                </div>
                                                                            @endif
                                                                        </div>
                                                                    </a>
                                                                    @if($lesson->exam)
                                                                        @if ($lesson->hasUserPassedExam(auth()->user()))
                                                                            <a href="{{ route('web.exams.show', $lesson->exam->id) }}"
                                                                               class="d-flex align-items-center fs-6 mt-2 green2-text ms-2">
                                                                                <i class="fa-light fa-file-check"></i>
                                                                                <span
                                                                                    class="ms-2">{{ __('exams::exams.lesson_quiz_solved') }}</span>
                                                                            </a>
                                                                        @else
                                                                            <a href="{{ route('web.exams.show', $lesson->exam->id) }}"
                                                                               class="d-flex align-items-center fs-6 mt-2 mainColor ms-2">
                                                                                <i class="fa-light fa-file-pen"></i>
                                                                                <span
                                                                                    class="ms-2">{{ __('exams::exams.lesson_quiz') }}</span>
                                                                            </a>
                                                                        @endif
                                                                    @endif
                                                                </li>
                                                            @endforeach
                                                        @endif
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

@endsection

@push('stack_scripts')
    <script>
        @if(is_null($course->intro_video_link))
        $(document).ready(function () {
            $('.lesson-wrapper').first().find('.nav-link').addClass('active');
        });
        @endif

        $(document).on('click', '.lesson-wrapper .nav-link', function () {
            $('.lesson-wrapper .nav-link').removeClass('active');
            $(this).addClass('active');
        });
        $(document).on('click', '.get-lesson', function () {
            let lessonId = $(this).data('id');

            $.ajax({
                url: '{{ route('web.lessons.load-paid-lesson') }}',
                method: 'POST',
                data: {
                    lessonId
                },
                beforeSend: function () {
                    $('.video-wrapper').html('<div class="text-center py-5"><i class="fas fa-spinner fa-spin fa-3x"></i></div>');
                },
                success: function (response) {
                    $('.video-wrapper').html(response.html);
                },
                error: function (xhr) {
                    displayAjaxError(xhr);
                },
                complete: function (xhr, status) {
                }
            });
        });

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