@extends('main-site.partials.app')

@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>

    <!-- course details -->
    <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> الشرح
                        </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> الملفات المرفقة
                        </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>
                            حصص
                        </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>
                            بنك الأسئلة
                        </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">
                                @foreach ($units as $unit)
                                    <div class="chapter">
                                        <button
                                            class="dropdown-btn d-flex align-items-center justify-content-between gap-3 w-100"
                                            data-bs-toggle="collapse" data-bs-target="#{{ $unit->id }}"
                                            aria-expanded="true" aria-controls="{{ $unit->id }}">
                                            1-{{ $unit->title }} <i class="icon-arrow-down align-middle"></i>
                                        </button>
                                        <div id="{{ $unit->id }}" class="course-lessons collapse show">
                                            <ul class="lessons-list">

                                                @foreach ($unit->lessons as $lesson)
                                                    <li>
                                                        @if (auth()->user() && $unit->course->is_auth_user_subscribe)
                                                            <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">{{ $lesson->title }}</p>
                                                                <i class="icon-chevron-left"></i>
                                                            </a>
                                                        @endif

                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

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

                            @foreach ($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">تاريخ الرفع
                                                {{ $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">تحميل الملف</a>
                                        @auth
                                            <div class="like-check">
                                                <input type="checkbox" class="btn-check" id="like-check" autocomplete="off">
                                                <label class="btn like-btn" for="like-check">
                                                    <i class="icon-heart"></i>
                                                </label>
                                            </div>
                                        @endauth
                                    </div>
                                </li>
                            @endforeach

                        </ul>
                    </div>

                    <!-- Sessions Tab -->
                    <div class="tab-pane fade" id="sessions" role="tabpanel">
                        {{-- <div class="row">
							<div class="col-xl-3 col-md-6 mb-45">
								<a href="course-playlist.html">
									<div class="vertical-card">
										<div class="card-img position-relative">
											<img src="assets/img/offers/1.jpg" class="img-fluid w-100">
											<div class="vid-play position-absolute top-50 start-50 translate-middle">
												<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
													<rect x="0.5" y="0.5" width="39" height="39" rx="19.5" stroke="#FEFEFE"/>
													<path d="M11.6667 28.1846V11.8154C11.6667 10.2718 13.3411 9.31006 14.6744 10.0878L28.7052 18.2724C30.0282 19.0442 30.0282 20.9558 28.7052 21.7275L14.6744 29.9121C13.3411 30.6899 11.6667 29.7281 11.6667 28.1846Z" stroke="#FEFEFE" stroke-width="1.5" stroke-linejoin="round"/>
												</svg>
											</div>
										</div>
										<div class="card-body">
											<p class="dark-color">دورة مادة الكيمياء تهدف إلى تعريف الطلاب بمفاهيم ومبادئ</p>
											<div class="course-duration d-flex align-items-center justify-content-between">
												<p class="mb-0">
													<i class="icon-hourglass-end fs-4 align-middle"><span class="path1"></span><span class="path2"></span></i>
													<span class="duration small-text dark-color opacity-80">مدة الفيديو</span>
												</p>
												<span class="dark-color small-text opacity-80">1:23:24</span>
											</div>
										</div>
									</div>
								</a>
							</div>
							<div class="col-xl-3 col-md-6 mb-45">
								<a href="course-playlist.html">
									<div class="vertical-card">
										<div class="card-img position-relative">
											<img src="assets/img/offers/1.jpg" class="img-fluid w-100">
											<div class="vid-play position-absolute top-50 start-50 translate-middle">
												<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
													<rect x="0.5" y="0.5" width="39" height="39" rx="19.5" stroke="#FEFEFE"/>
													<path d="M11.6667 28.1846V11.8154C11.6667 10.2718 13.3411 9.31006 14.6744 10.0878L28.7052 18.2724C30.0282 19.0442 30.0282 20.9558 28.7052 21.7275L14.6744 29.9121C13.3411 30.6899 11.6667 29.7281 11.6667 28.1846Z" stroke="#FEFEFE" stroke-width="1.5" stroke-linejoin="round"/>
												</svg>
											</div>
										</div>
										<div class="card-body">
											<p class="dark-color">دورة مادة الكيمياء تهدف إلى تعريف الطلاب بمفاهيم ومبادئ</p>
											<div class="course-duration d-flex align-items-center justify-content-between">
												<p class="mb-0">
													<i class="icon-hourglass-end fs-4 align-middle"><span class="path1"></span><span class="path2"></span></i>
													<span class="duration small-text dark-color opacity-80">مدة الفيديو</span>
												</p>
												<span class="dark-color small-text opacity-80">1:23:24</span>
											</div>
										</div>
									</div>
								</a>
							</div>
							<div class="col-xl-3 col-md-6 mb-45">
								<a href="course-playlist.html">
									<div class="vertical-card">
										<div class="card-img position-relative">
											<img src="assets/img/offers/1.jpg" class="img-fluid w-100">
											<div class="vid-play position-absolute top-50 start-50 translate-middle">
												<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
													<rect x="0.5" y="0.5" width="39" height="39" rx="19.5" stroke="#FEFEFE"/>
													<path d="M11.6667 28.1846V11.8154C11.6667 10.2718 13.3411 9.31006 14.6744 10.0878L28.7052 18.2724C30.0282 19.0442 30.0282 20.9558 28.7052 21.7275L14.6744 29.9121C13.3411 30.6899 11.6667 29.7281 11.6667 28.1846Z" stroke="#FEFEFE" stroke-width="1.5" stroke-linejoin="round"/>
												</svg>
											</div>
										</div>
										<div class="card-body">
											<p class="dark-color">دورة مادة الكيمياء تهدف إلى تعريف الطلاب بمفاهيم ومبادئ</p>
											<div class="course-duration d-flex align-items-center justify-content-between">
												<p class="mb-0">
													<i class="icon-hourglass-end fs-4 align-middle"><span class="path1"></span><span class="path2"></span></i>
													<span class="duration small-text dark-color opacity-80">مدة الفيديو</span>
												</p>
												<span class="dark-color small-text opacity-80">1:23:24</span>
											</div>
										</div>
									</div>
								</a>
							</div>
							<div class="col-xl-3 col-md-6 mb-45">
								<a href="course-playlist.html">
									<div class="vertical-card">
										<div class="card-img position-relative">
											<img src="assets/img/offers/1.jpg" class="img-fluid w-100">
											<div class="vid-play position-absolute top-50 start-50 translate-middle">
												<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
													<rect x="0.5" y="0.5" width="39" height="39" rx="19.5" stroke="#FEFEFE"/>
													<path d="M11.6667 28.1846V11.8154C11.6667 10.2718 13.3411 9.31006 14.6744 10.0878L28.7052 18.2724C30.0282 19.0442 30.0282 20.9558 28.7052 21.7275L14.6744 29.9121C13.3411 30.6899 11.6667 29.7281 11.6667 28.1846Z" stroke="#FEFEFE" stroke-width="1.5" stroke-linejoin="round"/>
												</svg>
											</div>
										</div>
										<div class="card-body">
											<p class="dark-color">دورة مادة الكيمياء تهدف إلى تعريف الطلاب بمفاهيم ومبادئ</p>
											<div class="course-duration d-flex align-items-center justify-content-between">
												<p class="mb-0">
													<i class="icon-hourglass-end fs-4 align-middle"><span class="path1"></span><span class="path2"></span></i>
													<span class="duration small-text dark-color opacity-80">مدة الفيديو</span>
												</p>
												<span class="dark-color small-text opacity-80">1:23:24</span>
											</div>
										</div>
									</div>
								</a>
							</div>
						</div> --}}

                        <div class="course-details-section-two bg-grey sec-padding pt-0 wow fadeInUp">
                            <div class="">
                                {{-- <div class="course-content"> --}}

                                {{-- <div class="course-topics"> --}}
                                <div id="accordion">

                                    @foreach ($units as $unit)
                                        <div class="course-topic">
                                            <div class="course-title">
                                                <button
                                                    class="btn d-flex align-items-center justify-content-between flex-wrap gap-3 w-100"
                                                    data-bs-toggle="collapse" data-bs-target="#collapseOne"
                                                    aria-expanded="true" aria-controls="collapseOne">
                                                    <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 }} درس
                                                        </li>
                                                        <li class="d-inline-flex align-items-center">
                                                            <i class="icon-hourglass-end"><span
                                                                    class="path1"></span><span class="path2"></span></i>
                                                            ساعات و 23 دقيقة
                                                        </li>
                                                    </ul>
                                                </button>
                                            </div>
                                            <div id="collapseOne" class="course-lessons collapse show">
                                                <ul class="lessons-list">
                                                    @if (auth()->user() && $course->is_auth_user_subscribe)
                                                        @foreach ($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>(أونلاين)</sup>
                                                                        @endif
                                                                        <span class="d-block duration">48 دقيقة </span>
                                                                    </h6>
                                                                </a>
                                                            </li>
                                                        @endforeach
                                                    @else
                                                        @foreach ($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">48 دقيقة </span>
                                                                    </h6>
                                                                </div>
                                                                <i class="icon-lock"></i>
                                                            </li>
                                                        @endforeach
                                                    @endif
                                                </ul>
                                            </div>
                                        </div>
                                    @endforeach


                                </div>

                            </div>
                        </div>

                        {{-- <div class="pagination justify-content-center mt-2 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>

                    <!-- questionBank Tab -->
                    <div class="tab-pane fade" id="questionBank" role="tabpanel">
                        <ul class="attachment-list question-bank">
                            @foreach ($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">عدد الأسئلة ({{ $exam->questions_count }}) سوأل</span>
                                            <span class="light-color"> | </span>
                                            <span class="small-text light-color"> مدة الأمتحان: {{ $exam->time }}دقيقة </span>
                                        </span>
                                    </p>
                                </div>
                                @if(auth()->user()  && $course->is_auth_user_subscribe)
                                <div class="d-flex align-items-center gap-3">
                                    <a href="{{ route('course-details.exams.show_exam',$exam->id) }}" class="btn main-btn outline text-nowrap"
                                       >ابدأ الأختبار</a>
                                </div>
                                @endif
                            </li>
                            @endforeach

                        </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