@extends('web.layouts.layout')

@section('content')

    <main>
        <!-- Start section -->
        <section class="recorded_course_pg courses_det_pg products_det_pg section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8">
                        <div class="vid_box video-wrapper">
                            @include('web.partials._play_video', [
                                'video' => $course->intro_video_link ?? $course->units->flatMap->lessons->first()?->video_link ?? null,
                                'iframeHeight' => config('courses.course_video_iframe_height'),
                            ])
                        </div>
                        <div class="card-body px-0">
                            <ul class="nav nav-pills mb-5" id="pills-tab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="pills-about-tab" data-bs-toggle="pill"
                                            data-bs-target="#pills-about" type="button" role="tab"
                                            aria-controls="pills-about" aria-selected="true">
                                        {{ __('courses::courses.about_course') }}
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-rates-tab" data-bs-toggle="pill"
                                            data-bs-target="#pills-rates" type="button" role="tab"
                                            aria-controls="pills-rates" aria-selected="false">
                                        {{ __('products::products.ratings') }}
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-trainer-tab" data-bs-toggle="pill"
                                            data-bs-target="#pills-trainer" type="button" role="tab"
                                            aria-controls="pills-trainer" aria-selected="false">
                                        {{ __('courses::courses.trainer') }}
                                    </button>
                                </li>
                            </ul>

                            <div class="tab-content" id="pills-tabContent">
                                <div class="tab-pane fade show active" id="pills-about" role="tabpanel"
                                     aria-labelledby="pills-about-tab">
                                    @include('web.courses::show._about_course')
                                </div>
                                <div class="tab-pane fade" id="pills-rates" role="tabpanel"
                                     aria-labelledby="pills-rates-tab">
                                    <div class="rates_tab col-lg-11 mb-4">
                                        <div class="row align-items-center mb-4">
                                            <div class="col-lg-6">
                                                <h5 class="mb-0 fw-bold"> {{ __('products::products.ratings') }} </h5>
                                            </div>
                                            <div class="col-lg-6 text-lg-end">
                                                @if($canBeRated)
                                                    <a href="javascript:void(0);"
                                                       class="butn primary_butn d-inline-flex mt-5 mt-lg-0"
                                                       data-bs-toggle="modal"
                                                       data-bs-target="#modal-rate">
                                                        <span class="small">
                                                            <i class="fal fa-star me-1"></i>
                                                            {{ __('products::products.write_review') }}
                                                            <i class="fal fa-star ms-1"></i>
                                                        </span>
                                                    </a>
                                                @endif
                                            </div>
                                        </div>
                                        <!-- rating list -->
                                        @include('web.courses::show._rating_list')
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-trainer" role="tabpanel"
                                     aria-labelledby="pills-trainer-tab">
                                    @include('web.courses::show._trainer')
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="vids_box">
                            <h5 class="title mb-5">
                                <i class="fa-light fa-bars"></i>
                                {{ __('courses::courses.list') }}
                            </h5>
                            <div class="data_body">
                                @if($course->units->isNotEmpty())
                                    @foreach($course->units as $unit)
                                        <div class="data">
                                            <h5 class="data_title fw-bold"> {{ $unit->currentDescription->title ?? "" }} </h5>
                                            @if ($unit->lessons->isNotEmpty())
                                                @foreach ($unit->lessons as $lesson)
                                                    <div
                                                        class="item d-flex align-items-center justify-content-between lesson-wrapper">
                                                        <!-- get-lesson disabled -->
                                                        <a href="javascript:void(0);"
                                                           class="vid_link get-lesson"
                                                           data-id="{{ $lesson->id }}">
                                                            <i class="fa-light fa-circle-play"></i>
                                                            <b> {{ __('courses::courses.video') }} : </b>
                                                            {{ $lesson->currentDescription->title ?? "" }}
                                                        </a>
                                                        @if($lesson->exam)
                                                            @if ($lesson->hasUserPassedExam(auth()->user()))
                                                                <a href="{{ route('web.exams.show', $lesson->exam->id) }}"
                                                                   class="homework_link checked">
                                                                    <i class="fa-light fa-circle-check"></i>
                                                                    {{ __('courses::courses.solve_homework') }}
                                                                </a>
                                                            @else
                                                                <a href="{{ route('web.exams.show', $lesson->exam->id) }}" class="homework_link">
                                                                    <i class="fa-light fa-pen-circle"></i>
                                                                    {{ __('courses::courses.solve_homework') }}
                                                                </a>
                                                            @endif
                                                        @endif
                                                    </div>
                                                @endforeach
                                            @endif
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    @if($canBeRated)
        <!-- Modal -->
        @include('web.courses::show._rating_modal')
    @endif

@endsection

@push('stack_scripts')
    <script>
        @if(is_null($course->intro_video_link))
            $(document).ready(function () {
                $('.lesson-wrapper').first().addClass('active');
            });
        @endif
        
        $(document).on('click', '.get-lesson', function () {
            let lessonId = $(this).data('id');
            $('.lesson-wrapper').removeClass('active');
            $(this).closest('.lesson-wrapper').addClass('active');

            $.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) {
                }
            });
        });
    </script>
@endpush