@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="course-details2.html" class="chapter-link d-flex justify-content-between align-items-center gap-3">
													<p class="mb-0">فرعيات التفاضل والرياضة</p>
													<i class="icon-chevron-left"></i>
												</a>
											</li>
											<li>
												<a href="course-details2.html" class="chapter-link d-flex justify-content-between align-items-center gap-3">
													<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="course-details2.html" class="chapter-link d-flex justify-content-between align-items-center gap-3">
													<p class="mb-0">فرعيات التفاضل والرياضة</p>
													<i class="icon-chevron-left"></i>
												</a>
											</li>
											<li>
												<a href="course-details2.html" class="chapter-link d-flex justify-content-between align-items-center gap-3">
													<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="course-details2.html" class="chapter-link d-flex justify-content-between align-items-center gap-3">
													<p class="mb-0">فرعيات التفاضل والرياضة</p>
													<i class="icon-chevron-left"></i>
												</a>
											</li>
											<li>
												<a href="course-details2.html" class="chapter-link d-flex justify-content-between align-items-center gap-3">
													<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 -->
					<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="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">
							<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="exam.html" class="main-btn text-nowrap">شراء الأختبار</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="exam.html" class="main-btn text-nowrap">شراء الأختبار</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