@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> {{ __("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>
							حصص مجانية
						</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">
								<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="#chapterOne" aria-expanded="true" aria-controls="chapterOne">
										1-أساسيات التفاضل والرياضة التطبيقية (2) <i class="icon-arrow-down align-middle"></i>
									</button>
									<div id="chapterOne" class="course-lessons collapse show">
										<ul class="lessons-list">
											<li>
												<a href="#" class="chapter-link d-flex justify-content-between align-items-center gap-3" onclick="return false;">
													<p class="mb-0">فرعيات التفاضل والرياضة</p>
													<i class="icon-chevron-left"></i>
												</a>
											</li>
											<li>
												<a href="#" class="chapter-link d-flex justify-content-between align-items-center gap-3" onclick="return false;">
													<p class="mb-0">فرعيات التفاضل والرياضة</p>
													<i class="icon-chevron-left"></i>
												</a>
											</li>
										</ul>
									</div>
								</div>

								<div class="chapter">
									<button class="dropdown-btn collapsed d-flex align-items-center justify-content-between gap-3 w-100" data-bs-toggle="collapse" data-bs-target="#chapterTwo" aria-expanded="false" aria-controls="chapterTwo">
										1-أساسيات التفاضل والرياضة التطبيقية (2) <i class="icon-arrow-down align-middle"></i>
									</button>
									<div id="chapterTwo" class="course-lessons collapse">
										<ul class="lessons-list">
											<li>
												<a href="#" class="chapter-link d-flex justify-content-between align-items-center gap-3" onclick="return false;">
													<p class="mb-0">فرعيات التفاضل والرياضة</p>
													<i class="icon-chevron-left"></i>
												</a>
											</li>
											<li>
												<a href="#" class="chapter-link d-flex justify-content-between align-items-center gap-3" onclick="return false;">
													<p class="mb-0">فرعيات التفاضل والرياضة</p>
													<i class="icon-chevron-left"></i>
												</a>
											</li>
										</ul>
									</div>
								</div>

								<div class="chapter">
									<button class="dropdown-btn collapsed d-flex align-items-center justify-content-between gap-3 w-100" data-bs-toggle="collapse" data-bs-target="#chapterThree" aria-expanded="false" aria-controls="chapterThree">
										1-أساسيات التفاضل والرياضة التطبيقية (2) <i class="icon-arrow-down align-middle"></i>
									</button>
									<div id="chapterThree" class="course-lessons collapse">
										<ul class="lessons-list">
											<li>
												<a href="#" class="chapter-link d-flex justify-content-between align-items-center gap-3" onclick="return false;">
													<p class="mb-0">فرعيات التفاضل والرياضة</p>
													<i class="icon-chevron-left"></i>
												</a>
											</li>
											<li>
												<a href="#" class="chapter-link d-flex justify-content-between align-items-center gap-3" onclick="return false;">
													<p class="mb-0">فرعيات التفاضل والرياضة</p>
													<i class="icon-chevron-left"></i>
												</a>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- Attachment Tab -->
					<div class="tab-pane fade" id="attachment" role="tabpanel">
						<ul class="attachment-list">
							<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">
										1-أساسيات التفاضل والرياضة التطبيقية (2)
										<span class="small-text light-color d-block">تاريخ الرفع 2024-4-12</span>
									</p>
								</div>
								<div class="d-flex gap-2">
									<button type="button" class="main-btn text-nowrap">تحميل الملف</button>
									<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>
								</div>
							</li>
							<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">
										1-أساسيات التفاضل والرياضة التطبيقية (2)
										<span class="small-text light-color d-block">تاريخ الرفع 2024-4-12</span>
									</p>
								</div>
								<div class="d-flex gap-2">
									<button type="button" class="main-btn text-nowrap">تحميل الملف</button>
									<div class="like-check">
										<input type="checkbox" class="btn-check" id="like-check2" autocomplete="off">
										<label class="btn like-btn" for="like-check2">
											<i class="icon-heart"></i>
										</label>
									</div>
								</div>
							</li>
							<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">
										1-أساسيات التفاضل والرياضة التطبيقية (2)
										<span class="small-text light-color d-block">تاريخ الرفع 2024-4-12</span>
									</p>
								</div>
								<div class="d-flex gap-2">
									<button type="button" class="main-btn text-nowrap">تحميل الملف</button>
									<div class="like-check">
										<input type="checkbox" class="btn-check" id="like-check3" autocomplete="off">
										<label class="btn like-btn" for="like-check3">
											<i class="icon-heart"></i>
										</label>
									</div>
								</div>
							</li>
						</ul>
					</div>

					<!-- Sessions Tab (حصص مجانية — روابط حقيقية لمسار Laravel) -->
					<div class="tab-pane fade" id="sessions" role="tabpanel">
						@php
							$freeLessons = $course->units->flatMap->lessons->filter(fn ($lesson) => (bool) $lesson->is_free)->values();
						@endphp
						<div class="row">
							@forelse ($freeLessons as $lesson)
								<div class="col-xl-3 col-md-6 mb-45">
									<a href="{{ route('course-details.playlist', ['course_id' => $course->id, 'id' => $lesson->id]) }}">
										<div class="vertical-card">
											<div class="card-img position-relative">
												<img src="{{ $course->image_path }}" class="img-fluid w-100" alt="">
												<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">{{ $lesson->title }}</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">{{ __('website_301.course.CourseTime') }}</span>
													</p>
													<span class="dark-color small-text opacity-80">{{ $lesson->duration ? $lesson->duration . __('website_301.playlist.Minute') : '—' }}</span>
												</div>
											</div>
										</div>
									</a>
								</div>
							@empty
								<div class="col-12">
									@include('main-site.partials.empty_data', [
										'message' => __('website_301.course.LessonWaiting'),
									])
								</div>
							@endforelse
						</div>
					</div>

					<!-- questionBank Tab -->
					<div class="tab-pane fade" id="questionBank" role="tabpanel">
						<ul class="attachment-list question-bank">
							<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">
										1-أساسيات التفاضل والرياضة التطبيقية (2)

										<span class="mb-0 d-block">
											<span class="small-text light-color">عدد الأسئلة (12) سوأل</span>
											<span class="light-color"> | </span>
											<span class="small-text light-color"> مدة الأمتحان: 30دقيقة </span>
										</span>
									</p>
								</div>
								<div class="d-flex align-items-center gap-3">
									<p class="mb-0 primary-color fs-5" dir="ltr">$299.99 <del class="opacity-60 fs-6">$349.99</del></p>
									<a href="#" class="main-btn text-nowrap" onclick="return false;">شراء الأختبار</a>
								</div>
							</li>
							<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">
										1-أساسيات التفاضل والرياضة التطبيقية (2)

										<span class="mb-0 d-block">
											<span class="small-text light-color">عدد الأسئلة (12) سوأل</span>
											<span class="light-color"> | </span>
											<span class="small-text light-color"> مدة الأمتحان: 30دقيقة </span>
										</span>
									</p>
								</div>
								<div class="d-flex align-items-center gap-3">
									<button type="button" class="main-btn outline text-nowrap" data-bs-toggle="modal" data-bs-target="#startExamModal">ابدأ الأختبار</button>
								</div>
							</li>
							<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">
										1-أساسيات التفاضل والرياضة التطبيقية (2)

										<span class="mb-0 d-block">
											<span class="small-text light-color">عدد الأسئلة (12) سوأل</span>
											<span class="light-color"> | </span>
											<span class="small-text light-color"> مدة الأمتحان: 30دقيقة </span>
										</span>
									</p>
								</div>
								<div class="d-flex align-items-center gap-3">
									<p class="mb-0 primary-color fs-5" dir="ltr">$299.99 <del class="opacity-60 fs-6">$349.99</del></p>
									<a href="#" class="main-btn text-nowrap" onclick="return false;">شراء الأختبار</a>
								</div>
							</li>
						</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