@extends('web.layouts.layout')

@section('content')

    <main>
        <!-- Start section -->
        <section class="courses_det_pg products_det_pg section">
            <div class="container">
                <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-courses-tab" data-bs-toggle="pill"
                                data-bs-target="#pills-courses" type="button" role="tab" aria-controls="pills-courses"
                                aria-selected="false">
                            {{ __('courses::courses.course_content') }}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" 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="card-body">
                    <div class="row">
                        <div class="col-lg-8">
                            <div class="tab-content" id="pills-tabContent">
                                <div class="tab-pane fade show active" id="pills-courses" role="tabpanel"
                                     aria-labelledby="pills-courses-tab">
                                    <div class="courses_tab col-lg-11 mb-4">
                                        <h5 class="mb-4 fw-bold"> {{ __('courses::courses.course_content') }} </h5>
                                        <div class="accordion accordion_partition" id="accordion_partition3">
                                            @if($course->units->isNotEmpty())
                                                @foreach($course->units as $unit)
                                                    <div class="accordion-item">
                                                        <h2 class="accordion-header">
                                                            <button class="accordion-button partition_title"
                                                                    type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#collapse_{{ $unit->id }}"
                                                                    aria-expanded="true"
                                                                    aria-controls="collapse_{{ $unit->id }}">
                                                                {{ $unit->currentDescription->title ?? "" }}
                                                            </button>
                                                        </h2>
                                                        <div id="collapse_{{ $unit->id }}"
                                                             class="accordion-collapse collapse"
                                                             data-bs-parent="#accordion_partition3">
                                                            <div class="accordion-body">
                                                                <ul class="lessons_list">
                                                                    @if ($unit->lessons->isNotEmpty())
                                                                        @foreach ($unit->lessons as $lesson)
                                                                            @php
                                                                                $lessonTitle = $lesson->currentDescription->title ?? "";
                                                                            @endphp
                                                                            @if($lesson->is_free)
                                                                                <li>
                                                                                    <a href="javascript:void(0);"
                                                                                       class="lesson_active get-lesson"
                                                                                       data-id="{{ $lesson->id }}">
                                                                                        <span class="txt">
                                                                                            {{ $lessonTitle }}
                                                                                        </span>
                                                                                        <span class="icon">
                                                                                            <i class="far fa-paperclip"></i>
                                                                                            <!-- <i class="fas fa-lock-open"></i>-->
                                                                                        </span>
                                                                                    </a>
                                                                                </li>
                                                                            @else
                                                                                <li>
                                                                                    <a href="javascript:void(0);"
                                                                                       class="lesson_disable">
                                                                                        <span class="txt">
                                                                                            {{ $lessonTitle }}
                                                                                        </span>
                                                                                        <span class="icon">
                                                                                            <i class="far fa-lock"></i>
                                                                                        </span>
                                                                                    </a>
                                                                                </li>
                                                                            @endif
                                                                        @endforeach
                                                                    @endif
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" 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 class="col-lg-4">
                            @include('web.courses::show._course_sidebar_info')
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

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

    <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>
        $("#accordion_partition3 .accordion-button:not(:first)").addClass('collapsed');
        $('#accordion_partition3 .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