@extends('main-site.partials.app')
@section('styles')
    <style>
        .course-content {
            position: relative;
            margin-top: -3.5rem;
            padding: 2.5rem 2rem 4.5rem;
            box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
            border-radius: .6875rem;
            background-color: var(--grey-font);
        }

        .section-title2 h2 {
            font-size: 1.75rem;
            line-height: 2.45rem;
        }

        .course-title button {
            font-size: 1.1875rem;
            font-weight: 600;
            border: 0;
            color: #120404;
            padding: 1.3rem .25rem;
            border-radius: 0;
        }

        .course-title button:not(.collapsed) {
            border-bottom: 2px solid rgba(18, 4, 4, 0.50);
        }

        .course-title button>p {
            text-align: start;
        }

        .course-title button>p i {
            display: inline-block;
            margin-left: .5rem;
            transition: all .3s;
        }

        .course-title button:not(.collapsed)>p i {
            transform: scaleY(-1);
            transition: all .3s;
        }

        .course-title ul li {
            padding-right: .5rem;
            font-size: 1rem;
        }

        .course-title ul li:first-child {
            padding-right: 0;
        }

        .course-title ul li::before {
            content: '/';
            font-size: 1.85rem;
            color: var(--primary);
            opacity: .7;
            line-height: 2.625rem;
            padding-left: .5rem;
        }

        .course-title ul li:first-child:before {
            display: none;
        }

        .course-title ul li i {
            margin-left: .5rem;
            font-size: 1.5rem;
        }

        .lessons-list li {
            padding: 1rem .5rem 1rem 2rem;
            border-bottom: 1px solid rgba(18, 4, 4, 0.10);
        }

        .lessons-list li.locked {
            background-color: #FAFAFA;
        }

        .lessons-list li .course-link i {
            font-size: 2rem;
        }

        .lessons-list li .course-link h6 {
            color: #120404;
            font-weight: 600;
        }

        .lessons-list li .course-link h6 sup {
            top: -.25em;
            opacity: .8;
            font-size: .75rem;
        }

        .lessons-list li .course-link h6 span {
            font-size: .75rem;
            opacity: .8;
        }

        .lessons-list li .icon-lock {
            font-size: 1.5rem;
        }
    </style>
@endsection
@section('title', __('Course'))

@section('content')

    <!-- Page Banner -->
    <div class="page-banner md-banner" style="background-image: url('{{ $course->image_path }}');">
        <div class="container position-relative">
            <div class="row">
                <div class="col-xxl-7 col-xl-9 col-md-10">
                    <div class="banner-content">
                        <h1 class="page-banner-title">{{ $course->title }}</h1>
                        <p class="banner-desc mb-4">{{ $course->short_description }}</p>
                    </div>
                </div>
                <div class="col-12">
                    <div class="teacher d-flex align-items-center gap-2 mb-4">
                        <div class="teacher-img">
                            <img src="{{ $course->user->image_path }}" class="img-fluid" alt="">
                        </div>
                        <p class="mb-0 def-color">{{ $course->user->name }}
                            <span
                                class="d-block small-text grey-text">{{ $course->user->user_subject ?? $course->title  }}</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="course-details-section bg-grey sec-padding pt-0 wow fadeInUp">
        <div class="container">
            <div class="course-content">
                <ul class="nav nav-tabs def-tabs mb-0 px-3" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="explanation-tab" data-bs-toggle="tab"
                            data-bs-target="#explanation" type="button" role="tab" aria-selected="true">
                            <i class="icon-book"><span class="path1"></span><span class="path2"></span></i> {{ __('messages_302.Explanation') }}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="attachment-tab" data-bs-toggle="tab" data-bs-target="#attachment"
                            type="button" role="tab" aria-selected="false">
                            <i class="icon-book-check"><span class="path1"></span><span class="path2"></span><span
                                    class="path3"></span></i> {{__("website_301.course.Attachments")}}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="sessions-tab" data-bs-toggle="tab" data-bs-target="#sessions"
                            type="button" role="tab" aria-selected="false">
                            <i class="icon-youtube"><span class="path1"></span><span class="path2"></span></i>
                            {{__("website_301.course.Lessons")}}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="questionBank-tab" data-bs-toggle="tab" data-bs-target="#questionBank"
                            type="button" role="tab" aria-selected="false">
                            <i class="icon-pencil-book"><span class="path1"></span><span class="path2"></span><span
                                    class="path3"></span><span class="path4"></span><span class="path5"></span></i>
                            {{__("website_301.course.Exams")}}
                        </button>
                    </li>
                </ul>
                <div class="tab-content p-3 pt-4" id="myTabContent">
                    <!-- Explanation Tab -->
                    <div class="tab-pane fade show active" id="explanation" role="tabpanel">
                        <div class="course-chapters">
                            <div id="accordion">
                                @forelse ($units as $unit)
                                    <div class="chapter">
                                        <button
                                            class="dropdown-btn d-flex collapsed align-items-center justify-content-between gap-3 w-100"
                                            data-bs-toggle="collapse" data-bs-target="#chapter{{ $unit->id }}"
                                            aria-expanded="false" aria-controls="chapter{{ $unit->id }}">
                                            {{ $unit->title }} <i class="icon-arrow-down align-middle"></i>
                                        </button>
                                        <div id="chapter{{ $unit->id }}" class="course-lessons collapse ">
                                            <ul class="lessons-list">
                                                @if (count($unit->lessons))
                                                    @foreach ($unit->lessons as $lesson)
                                                        <li>

                                                            @if (auth()->user() && $unit->course->is_auth_user_subscribe)
                                                                @if ($lesson->explanation)
                                                                    <a href="{{ route('course-details.explanations.show', $lesson->id) }}"
                                                                        class="chapter-link d-flex justify-content-between align-items-center gap-3">
                                                                        <p class="mb-0">{{ $lesson->title }}</p>
                                                                        <i class="icon-chevron-left"></i>
                                                                    </a>
                                                                @else
                                                                    <a href="#"
                                                                        class="chapter-link d-flex justify-content-between align-items-center gap-3">
                                                                        <p class="mb-0">{{__("website_301.playlist.LectureWaiting")}}</p>

                                                                    </a>
                                                                @endif
                                                            @else
                                                                @if ($lesson->explanation)
                                                                    <a href="#"
                                                                        class="chapter-link d-flex justify-content-between align-items-center gap-3">
                                                                        <p class="mb-0">{{ $lesson->title }}</p>
                                                                        <i class="icon-chevron-left"></i>
                                                                    </a>
                                                                @else
                                                                    <a href="#"
                                                                        class="chapter-link d-flex justify-content-between align-items-center gap-3">
                                                                        <p class="mb-0">{{__("website_301.playlist.LectureWaiting")}}</p>

                                                                    </a>
                                                                @endif
                                                            @endif

                                                        </li>
                                                    @endforeach
                                                @else
                                                    <li class="text-center">
                                                        <a href="#"
                                                            class="chapter-link d-flex justify-content-between align-items-center gap-3">
                                                            <p class="mb-0 text-center">
                                                                <div class="d-flex justify-content-center"> <img
                                                                        width="100" height="100"
                                                                        src="{{ asset('assets/img/empty.png') }}"> </div>
                                                            </p>
                                                            {{-- <i class="icon-chevron-left"></i> --}}
                                                        </a>
                                                    </li>
                                                @endif


                                            </ul>
                                        </div>
                                    </div>
                                @empty
                                    @include('main-site.partials.empty_data', [
                                        'message' => __("website_301.course.LessonWaiting"),
                                    ])
                                @endforelse
                            </div>
                        </div>
                    </div>

                    <!-- Attachment Tab -->
                    <div class="tab-pane fade" id="attachment" role="tabpanel">
                        <ul class="attachment-list">
                            @forelse ($attachments as $attachment)
                                <li class="d-flex align-items-center justify-content-between flex-wrap gap-3">
                                    <div class="file-info d-flex align-items-center gap-2">
                                        <i class="icon-pdf"><span class="path1"></span><span class="path2"></span><span
                                                class="path3"></span><span class="path4"></span><span
                                                class="path5"></span></i>
                                        <p class="mb-0 dark-color">
                                            {{ $attachment->explanation->unit->title }}
                                            <span class="small-text light-color d-block">{{ __("website_301.playlist.Date") }}
                                                {{ $attachment->created_at_format }}</span>
                                        </p>
                                    </div>
                                    <div class="d-flex gap-2">
                                        <a href="{{ $course->is_auth_user_subscribe ? asset($attachment->path) : '#' }}"
                                            {{ $course->is_auth_user_subscribe ? 'download' : 'disabled' }}
                                            class="btn main-btn text-nowrap">{{__("website_301.playlist.FileDownload")}}</a>
                                        @if (auth()->user() && $course->is_auth_user_subscribe)
                                            {{-- @dd($attachment->is_favorite(auth()->id())) --}}
                                            @include('main-site.partials.add_to_favorite', [
                                                'attachment' => $attachment,
                                            ])
                                        @endif
                                    </div>
                                </li>
                            @empty
                                @include('main-site.partials.empty_data', [
                                    'message' => __("website_301.course.LessonWaiting"),
                                ])
                            @endforelse

                        </ul>
                    </div>

                    <!-- Sessions Tab -->
                    <div class="tab-pane fade" id="sessions" role="tabpanel">
                        <div class="">
                            <div class="course-topics">
                                <div id="accordion">
                                    @forelse ($units as $unit)
                                        <div class="course-topic">
                                            <div class="course-title">
                                                <button
                                                    class="btn d-flex collapsed align-items-center justify-content-between flex-wrap gap-3 w-100"
                                                    data-bs-toggle="collapse"
                                                    data-bs-target="#collapse{{ $unit->id }}" aria-expanded="false"
                                                    aria-controls="collapse{{ $unit->id }}">
                                                    <p class="mb-0">
                                                        <i class="icon-arrow-down align-middle"></i>
                                                        {{ $unit->title }}
                                                    </p>

                                                    <ul class="d-flex flex-wrap">

                                                        <li class="d-inline-flex align-items-center">
                                                            <i class="icon-youtube-red"><span class="path1"></span><span
                                                                    class="path2"></span></i>
                                                            {{ $unit->lessons_count }} {{ __("website_301.course.Lesson") }}
                                                        </li>
                                                        <li class="d-inline-flex align-items-center">
                                                            <i class="icon-hourglass-end"><span
                                                                    class="path1"></span><span class="path2"></span></i>
                                                            {{__("website_301.course.HoursAndMinutes")}}
                                                        </li>
                                                    </ul>
                                                </button>
                                            </div>
                                            <div id="collapse{{ $unit->id }}" class="course-lessons collapse ">
                                                <ul class="lessons-list">

                                                    @forelse ($unit->lessons as $lesson)
                                                    @if ((auth()->user() && $course->is_auth_user_subscribe) || $lesson->is_free)
                                                        @include('main-site.course-details.lesson_open')
                                                    @else
                                                        @include('main-site.course-details.lesson_lock')
                                                    @endif


                                                @empty
                                                    @include('main-site.partials.empty_data', [
                                                        'message' =>
                                                            __("website_301.course.LessonWaiting"),
                                                    ])
                                                @endforelse


                                                    {{-- @if (auth()->user() && $course->is_auth_user_subscribe)
                                                        @forelse ($unit->lessons as $lesson)
                                                            <li class="d-flex align-items-center justify-content-between">
                                                                <a href="{{ route('course-details.playlist', ['course_id' => $course->id, 'id' => $lesson->id]) }}"
                                                                    class="course-link d-flex justify-content-between align-items-center gap-2">
                                                                    <i class="icon-youtube-red"><span
                                                                            class="path1"></span><span
                                                                            class="path2"></span></i>
                                                                    <h6 class="mb-0">
                                                                        {{ $lesson->title }} @if ($lesson->type == 'online')
                                                                            <sup>({{ __("website_301.course.Online") }})</sup>
                                                                        @endif
                                                                        <span class="d-block duration"
                                                                            data-id="{{ $lesson->id }}"
                                                                            id="duration-{{ $lesson->id }}">{{$lesson->duration ? $lesson->duration .__("website_301.playlist.Minute") : ""}}</span>
                                                                    </h6>
                                                                </a>
                                                            </li>

                                                        @empty
                                                            @include('main-site.partials.empty_data', [
                                                                'message' =>
                                                                    __("website_301.course.LessonWaiting"),
                                                            ])
                                                        @endforelse
                                                    @else
                                                        @forelse ($unit->lessons as $lesson)
                                                            <li
                                                                class="locked d-flex align-items-center justify-content-between">
                                                                <div
                                                                    class="course-link d-flex justify-content-between align-items-center gap-2">
                                                                    <i class="icon-youtube-red"><span
                                                                            class="path1"></span><span
                                                                            class="path2"></span></i>
                                                                    <h6 class="mb-0">
                                                                        {{ $lesson->title }}
                                                                        <span class="d-block duration"
                                                                            data-id="{{ $lesson->id }}"
                                                                            id="duration-{{ $lesson->id }}">{{$lesson->duration ? $lesson->duration .' دقيقة' : ""}}</span>
                                                                    </h6>
                                                                </div>
                                                                <i class="icon-lock"></i>
                                                            </li>
                                                        @empty
                                                            @include('main-site.partials.empty_data', [
                                                                'message' =>
                                                                     __("website_301.course.LessonUnitWaiting")
                                                            ])
                                                        @endforelse
                                                    @endif --}}
                                                </ul>
                                            </div>
                                        </div>
                                    @empty
                                        @include('main-site.partials.empty_data', [
                                            'message' => __("website_301.course.LessonUnitWaiting"),
                                        ])
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- questionBank Tab -->
                    <div class="tab-pane fade" id="questionBank" role="tabpanel">
                        <ul class="attachment-list question-bank">

                            @forelse ($exams as $exam)
                                <li class="d-flex align-items-center justify-content-between flex-wrap gap-3">
                                    <div class="file-info d-flex align-items-center gap-2">
                                        <i class="icon-pencil-book"><span class="path1"></span><span
                                                class="path2"></span><span class="path3"></span><span
                                                class="path4"></span><span class="path5"></span></i>
                                        <p class="mb-0 dark-color">
                                            {{ $exam->lesson->title }}

                                            <span class="mb-0 d-block">
                                                <span class="small-text light-color">{{ __("website_301.exams.QuestionNo") }}
                                                    ({{ $exam->questions_count }})
                                                    {{ __("website_301.exams.Question") }}</span>
                                                <span class="light-color"> | </span>
                                                <span class="small-text light-color"> {{ __("messages_302.Time") }}:
                                                    {{ $exam->time }}{{ __("website_301.playlist.Minute") }} </span>
                                            </span>
                                        </p>
                                    </div>
                                    @if (auth()->user() && $course->is_auth_user_subscribe)
                                        <div class="d-flex align-items-center gap-3">
                                            @if($exam->auth_user_result)
                                            <a href="{{ route('course-details.exams.results', $exam->id) }}"
                                                class="btn main-btn  text-nowrap">{{ __("website_301.exams.ViewResult") }}</a>
                                            @else
                                            <a href="{{ route('course-details.exams.show_exam', $exam->id) }}"
                                                class="btn main-btn outline text-nowrap">{{ __("website_301.exams.StartExam") }}</a>
                                            @endif
                                        </div>
                                    @endif
                                </li>
                            @empty
                                @include('main-site.partials.empty_data', [
                                    'message' => __("website_301.exams.NoExams"),
                                ])
                            @endforelse

                        </ul>
                        {{-- <div class="pagination justify-content-center mt-5 mb-4">
                            <a class="btn next"><i class="icon-chevron-right"></i></a>
                            <a class="btn prev disabled"><i class="icon-chevron-left"></i></a>
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>
    </section>


@endsection
@section('scripts')

{{-- <script>
    $(document).ready(function() {
      $('.myVideo').each(function() {
        var video = this;
        var video_id = $(this).attr('data-id');

        // دالة لتحديث المدة إذا كانت جاهزة
        function checkAndUpdateDuration() {
          if (video.duration && !isNaN(video.duration)) {
            calculateDuration(video, video_id);
          }
        }

        // الأحداث المختلفة التي سيتم استخدام أحدها بمجرد أن يكون الفيديو جاهزاً
        video.addEventListener('loadedmetadata', checkAndUpdateDuration);
        video.addEventListener('loadeddata', checkAndUpdateDuration);
        video.addEventListener('canplay', checkAndUpdateDuration);
        video.addEventListener('canplaythrough', checkAndUpdateDuration);

        // دالة لحساب المدة بالدقائق كعدد صحيح
        function calculateDuration(video, video_id) {
          var durationInSeconds = video.duration; // مدة الفيديو بالثواني
          var durationInMinutes = Math.round(durationInSeconds / 60); // تحويلها إلى دقائق كعدد صحيح
          $('#duration-' + video_id).html(durationInMinutes + ' دقيقة'); // تحديث محتوى العنصر
        }
      });
    });
  </script> --}}
@endsection