@extends('Layouts.index')
@section('content')
<section>
	<div class="image-wrapper  bg-image  foreground">
		<div class="image-wrapper bg-full bg-image bg-overlay bg-overlay-500 background d-flex align-items-center" style="height: 250px;" data-image-src="{{ asset('needed/img/course/slidernotext.png') }}">
			<div class="card-body rounded-0 px-3 py-3 px-md-11 pt-xl-4 pb-xl-6">
				<div class="row align-items-center">
					<div class="col-lg-12 ps-6">
						<h3 class=" text-white mb-0 fs-50 fw-semibold"> </h3>
					</div>
					{{--<div class="d-block d-lg-none">
								<p class="price fs-20 mb-3"><span class="amount text-white">Rp </span></p>
							</div>
							<div class="d-flex d-lg-none">
								<div>
								@if(session()->has('user'))
									@if($user_nik->nik == NULL || $user_nik->nik == '')
										<button type="button" class="btn btn-sm btn-primary rounded py-1 fs-14" onclick="alertNIK()">Beli Sekarang</button>
									@else
										<button type="button"  data-bs-toggle="modal" data-bs-target="#exampleModal" class="btn btn-sm btn-primary rounded py-1 fs-14">Beli Sekarang</button>
									@endif
								@else
									<button type="button" class="btn btn-sm btn-primary rounded py-1 fs-14" onclick="alertLogin()">Beli Sekarang</button>
								@endif
								</div>
								<button type="button" class="btn btn-sm btn-warning rounded py-1 fs-14 ms-3"><span><i class="fa-solid fa-share-nodes me-2"></i></span> Bagikan</button>
							</div>--}}

				</div>
			</div>
			<!--/.card-body -->
		</div>
		<!--/.card -->
	</div>
</section>
<div class="container pt-1 pt-md-0 pe-lg-12 px-md-10 px-lg-4 rounded-top bg-light">
	<div class="row">
		<main class="col-lg-8 ps-lg-10 pt-5">
			<section>
				<h3 class="fs-26 fw-semibold pt-5 p-0 mb-0 text-dark">Tentang Pelatihan</h3>
				<p class="fs-14 text-secondary">Spesifikasi Pelatihan</p>
				<div class="row">
					<!-- <div class="col-xl-5 d-none d-xl-block">
                                <figure>
                                    <img src="{{ asset('needed/img/course/dtl1.png') }}" width="300" alt="">
                                </figure>
                            </div> -->
					<div class="col-xl-12 col-lg-12">
						<div class="card">
							<div class="card-body py-0 px-0">
								<div class="post-header px-0">
									<div class="row ps-8 pe-8 mt-3">
										<div class="col-6">
											<h6 class="fs-15 fw-semibold mb-4">Kategori</h6>
										</div>
										<div class="col-6">
											<h6 class="fs-15 text-ash fw-normal">{{ $course->job }}</h6>
										</div>

										<hr style="color: #ebebeb;" class="mb-3">

										<div class="col-6">
											<h6 class="fs-15 fw-semibold mb-4">Rating Pelatihan</h6>
										</div>
										<div class="col-6">
											<div class="rating text-warning fs-12">
												{{ $course->avg_rate }}
												{{--  --}}
											</div>
										</div>

										<hr style="color: #ebebeb;" class="mb-3">

										<div class="col-6">
											<h6 class="fs-15 fw-semibold mb-4">Penilaian</h6>
										</div>
										<div class="col-6">
											<h6 class="fs-15 text-ash fw-normal">{{ $course->total_peserta }} total</h6>
										</div>

										<hr style="color: #ebebeb;" class="mb-3">

										<div class="col-6">
											<h6 class="fs-15 fw-semibold mb-4">Jumlah Peserta</h6>
										</div>
										<div class="col-6">
											<h6 class="fs-15 text-ash fw-normal">{{ $course->total_peserta }} orang</h6>
										</div>

										<hr style="color: #ebebeb;" class="mb-3">

										<div class="col-6">
											<h6 class="fs-15 fw-semibold mb-4">Jumlah Materi</h6>
										</div>
										<div class="col-6">
											<h6 class="fs-15 text-ash fw-normal">{{ $course->count_course_modules }} Materi dengan {{ $course->count_course_sub_modules }} Sub-Materi</h6>
										</div>

										<hr style="color: #ebebeb;" class="mb-3">

										<div class="col-6">
											<h6 class="fs-15 fw-semibold mb-4">Harga</h6>
										</div>
										<div class="col-6">
											{{-- <h6 class="fs-15 text-ash fw-normal">Rp {{ $course->harga ?? 0 }}</h6> --}}
											<h6 class="fs-15 text-ash fw-normal">Rp {{ isset($conv_course[0]['customfields'][2]['value']) && is_numeric($conv_course[0]['customfields'][2]['value']) 
    ? number_format($conv_course[0]['customfields'][2]['value'], 0, ',', '.') 
    : '0' }}

											</h6>
										</div>

										{{-- <hr style="color: #ebebeb;" class="mb-3">

										<div class="col-6">
											<h6 class="fs-15 fw-semibold mb-4">Dibuat Oleh</h6>
										</div>
										<div class="col-6">
											<h6 class="fs-15 text-ash fw-normal text-underline">Firman Maulana</h6>
										</div> --}}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			<section>
				<h3 class="fs-26 fw-semibold pt-5 p-0 mb-0 text-dark">Deskripsi Pelatihan</h3>
				<p class="fs-14 text-secondary">Yang akan anda pelajari</p>
				<div class="card">
					<div class="card-body pb-0">
						<ul class="mb-0 list-unstyled">
							<li class="fs-15">{!! $course->description !!}</li>
							{{-- <li class="fs-15"></li> --}}
						</ul>
					</div>
				</div>
			</section>
			<section>
				<h3 class="fs-26 fw-semibold pt-5 p-0 mb-0 text-dark">Materi Kursus</h3>
				<p class="fs-14 text-secondary">{{ $course->count_course_modules }} Materi</p>
				<div class="accordion accordion-wrapper" id="accordionIconExample">
					@foreach ($course_modules as $course_module)
						<div class="card accordion-item icon">
							<div class="card-header" id="headingIconOne">
								<button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseIcon{{$course_module->id}}" aria-expanded="false" aria-controls="collapseIcon{{$course_module->id}}">
									<span>
										{{-- <i class="fa-solid fa-pencil"></i> --}}
										<i class="fa-solid fa-file-lines"></i>
									</span>
									{!! $course_module->name !!}
								</button>
								{{-- <p class="mentor-type">Ujian Selama 180 Menit</p> --}}
							</div>
							<!--/.card-header -->
							<div id="collapseIcon{{$course_module->id}}" class="accordion-collapse collapse" aria-labelledby="headingIconOne" data-bs-parent="#accordionIconExample">
								<div class="card-body">
									<p class="fs-14 mb-0">{!! $course_module->summary !!}</p>
								</div>
								<!--/.card-body -->
							</div>
							<!--/.accordion-collapse -->
						</div>
					@endforeach
					<!--/.accordion-item -->
					{{-- <div class="card accordion-item icon">
						<div class="card-header" id="headingIconTwo">
							<button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseIconTwo" aria-expanded="false" aria-controls="collapseIconTwo"><span><i class="fa-solid fa-file-lines"></i></span>Pre Test</button>
							<p class="mentor-type">Ujian Selama 180 Menit</p>
						</div>
						<!--/.card-header -->
						<div id="collapseIconTwo" class="accordion-collapse collapse" aria-labelledby="headingIconTwo" data-bs-parent="#accordionIconExample">
							<div class="card-body">
								<p class="fs-14 mb-0">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>
							</div>
							<!--/.card-body -->
						</div>
						<!--/.accordion-collapse -->
					</div>
					<!--/.accordion-item -->
					<!--/.accordion-item -->
					<div class="card accordion-item icon">
						<div class="card-header" id="headingIconThird">
							<button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseIconThird" aria-expanded="false" aria-controls="collapseIconThird"><span><i class="fa-solid fa-file-lines"></i></i></span>Pre Test 2</button>
							<p class="mentor-type">Ujian Selama 180 Menit</p>
						</div>
						<!--/.card-header -->
						<div id="collapseIconThird" class="accordion-collapse collapse" aria-labelledby="headingIconThird" data-bs-parent="#accordionIconExample">
							<div class="card-body">
								<p class="fs-14 mb-0">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>
							</div>
							<!--/.card-body -->
						</div>
						<!--/.accordion-collapse -->
					</div>
					<!--/.accordion-item -->
					<div class="card accordion-item icon">
						<div class="card-header" id="headingIconFour">
							<button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseIconFour" aria-expanded="false" aria-controls="collapseIconFour"><span><i class="fa-solid fa-clipboard-list"></i></span>Post-test</button>
							<p class="mentor-type">Ujian Selama 180 Menit</p>
						</div>
						<!--/.card-header -->
						<div id="collapseIconFour" class="accordion-collapse collapse" aria-labelledby="headingIconFour" data-bs-parent="#accordionIconExample">
							<div class="card-body">
								<p class="fs-14 mb-0">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>
							</div>
							<!--/.card-body -->
						</div>
						<!--/.accordion-collapse -->
					</div>
					<!--/.accordion-item --> --}}
				</div>
			</section>
			<section>
				<h3 class="fs-26 fw-semibold pt-5 p-0 mb-0 text-dark">Pelatihan Lainnya</h3>
				<p class="fs-14 text-secondary">Ikuti pelatihan lainnya</p>
				<div class="swiper-container mb-0 mb-md-0 pt-0 px-0" data-items-xs="1" data-dots="false" data-items-xl="3" data-loop="true" data-items-md="2" data-items-xs="1" data-autoplaytime="3000">
					<div class="swiper">
						<div class="swiper-wrapper py-2">
							<form id="gtm-form" method="post" action="{{ $intmoodle->url }}auth/login/integrasiPost.php">
								<input type="hidden" value="@if(Session::has('user')){{ Session::get('user')[0]['username']}}@endif" name="username">
								<input type="hidden" value="@if(Session::has('user')){{ Session::get('user')[0]['password']}}@endif" name="password">
								<input type="hidden" id="course_id" name="course_id">
							</form>
							@foreach($list_course as $l_course)
								@if($l_course->id == $course->id_course)
										@continue
								@endif
								@if(session()->has('user'))
									<a onclick="gtmDetailCourse('{{ $l_course->id }}')">
										@if(in_array($l_course->id, $enroll))
											<a onclick="gtmDetailCourse('{{ $l_course->id }}')">
										@else
											<a href="{{ url('/DetailCourse') }}/{{ $l_course->id }}">
										@endif
								@else
										<a href="{{ url('/DetailCourse') }}/{{ $l_course->id }}">
								@endif
							
								@if($l_course->id != 1)
										<div class="swiper-slide">
											<div class="card lift shadow-lg">
												<figure class="card-img-top hover-scale">
													<img src="{{ $image_course[$l_course->id] }}?token=fa0c6c8d52502adf7d9557a6bab115c2" height="160"
														width="260" alt="" />
													<a class="item-like" href="#" data-bs-toggle="white-tooltip" title="Informasi Seputar Course"><i
															class="fa-solid fa-ellipsis-vertical"></i></a>
												</figure>
												<div class="card-body px-3 pt-2 pb-0">
													<div class="post-header">
														<div class="d-flex flex-row align-items-center mb-1">
															<div class="text-ash mb-0 fs-12">Ratings</div>
															<span class="ms-4 fs-11 text-warning"></span>
														</div>
														<h2 class="post-title h3 fs-16 mt-2 mb-1"
															style="width: 181.33px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; ">
															<span class="link-dark" title="{{ $l_course->fullname }}">{{ $l_course->fullname }}</span>
														</h2>
														<span class="badge rounded-pill bg-primary fs-11 mb-1 me-3">
															@foreach($category as $ctg)
															@if($l_course->categoryid == $ctg->id)
															{{ $ctg->name }}
															@endif
															@endforeach
														</span>
														<p class="price fs-13"> <span class="me-2"><i class="fa-solid fa-tag"></i></span> <span
																	class="amount">
																	@if(!session()->has('user') || $l_course->categoryid != session()->get('user')[0]['id_job'])
																	Rp 0


																	@endif
																</span> <ins><span class="amount text-dark">
																	@if(session()->has('user'))
																	@if($l_course->categoryid == session()->get('user')[0]['id_job'])
																	(Gratis)
																	@endif
																	@endif
																</span></ins></p>
													</div>
													<!-- /.post-header -->
												</div>
												<!--/.card-body -->
												<div class="card-footer p-0 py-2 d-flex justify-content-center">
													<li class="nav-item me-4">
														@if(session()->has('user'))
														@if($l_course->categoryid == session()->get('user')[0]['id_job'])
														<a href="{{ route('course.daftar.mandiri', base64_encode($l_course->id))}}"
															class="btn btn-sm btn-warning rounded p-3 py-1 fs-13">Ikuti Kelas</a>
														@else
														<a href="{{ url('/DetailCourse') }}/{{ $l_course->id }}"
															class="btn btn-sm btn-warning rounded p-3 py-1 fs-13">Daftar</a>
														@endif
														@else
														<a href="{{ url('/Login') }}" class="btn btn-sm btn-warning rounded p-3 py-1 fs-13">Daftar</a>
														@endif
													</li>
													<li class="nav-item">
														<a href="#" class="btn btn-sm btn-primary rounded p-3 py-1 fs-13">Bagikan</a>
													</li>
												</div>
											</div>
											<!--/.card -->
										</div>
									</a>
								@endif
							@endforeach
										<!--/.swiper-slide -->
						</div>
						<!--/.swiper-wrapper -->
					</div>
					<!-- /.swiper -->
				</div>
				<!-- /.swiper-container -->
			</section>
			<section>
				<h3 class="fs-26 fw-semibold pt-5 p-0 mb-0 text-dark"> <span><i class="fa-regular fa-message me-2"></i></span> Rating & Ulasan</h3>
				<p class="fs-14 text-secondary">Lihat review peserta pelatihan</p>
				<div class="card">
					<div class="card-body">
						<h4 class="fw-semibold"></h4>
						<div class="row">
							<div class="col-xl-4 ">
								<h1 class="mt-6 ms-4"><span class="text-warning"><i class="fa-solid fa-star"></i></span>{{ $course->avg_rate }}<span class="text-muted fs-14">/5</span> </h1>
								<p class="text-muted fs-14 text-center"> ({{ $course->count_rate}} Penilaian)</p>
							</div>
							<div class="col-xl-8">
								<div class="d-flex">
									<span class="text-warning fs-16 me-1"><i class="fa-solid fa-star"></i></span>
									<p class="fs-16 mb-1">5.0</p>
									<div class="nilai-rating my-2 mx-3">
										<div class="nilai rounded" style="width: {{ $complete_ratings[5]['percentage'] }}%"></div>
									</div>
									<p class="fs-16 text-muted mb-0">{{ $complete_ratings[5]['count'] }}</p>
								</div>
								<div class="d-flex">
									<span class="text-warning fs-16 me-1"><i class="fa-solid fa-star"></i></span>
									<p class="fs-16 mb-1">4.0</p>
									<div class="nilai-rating my-2 mx-3">
										<div class="nilai rounded" style="width: {{ $complete_ratings[4]['percentage'] }}%"></div>
									</div>
									<p class="fs-16 text-muted mb-0">{{ $complete_ratings[4]['count'] }}</p>
								</div>
								<div class="d-flex">
									<span class="text-warning fs-16 me-1"><i class="fa-solid fa-star"></i></span>
									<p class="fs-16 mb-1">3.0</p>
									<div class="nilai-rating my-2 mx-3">
										<div class="nilai rounded" style="width: {{ $complete_ratings[3]['percentage'] }}%"></div>
									</div>
									<p class="fs-16 text-muted mb-0">{{ $complete_ratings[3]['count'] }}</p>
								</div>
								<div class="d-flex">
									<span class="text-warning fs-16 me-1"><i class="fa-solid fa-star"></i></span>
									<p class="fs-16 mb-1">2.0</p>
									<div class="nilai-rating my-2 mx-3">
										<div class="nilai rounded" style="width: {{ $complete_ratings[2]['percentage'] }}%"></div>
									</div>
									<p class="fs-16 text-muted mb-0">{{ $complete_ratings[2]['count'] }}</p>
								</div>
								<div class="d-flex">
									<span class="text-warning fs-16 me-1"><i class="fa-solid fa-star"></i></span>
									<p class="fs-16 mb-1">1.0</p>
									<div class="nilai-rating my-2 mx-3">
										<div class="nilai rounded" style="width: {{ $complete_ratings[1]['percentage'] }}%"></div>
									</div>
									<p class="fs-16 text-muted mb-0">{{ $complete_ratings[1]['count'] }}</p>
								</div>
							</div>
						</div>
						<div class="swiper-container dots-closer mb-6" data-dots="true" data-items-md="1" data-items-xs="1">
							<div class="swiper">
								<div class="swiper-wrapper">
									@foreach ($course_ulasan as $ulasan)
										{{-- @if (!$ulasan->nama || !$ulasan->job)
											@continue
										@endif --}}
										<div class="swiper-slide">
											<div class="item-inner px-0">
												<div class="card mb-0">
													<div class="card-body">
														<div class="row">
															<div class="col-xl-12">
																<blockquote class="icon mb-0 row">
																	<div class="col-xl-6 me-0">
																		<div class="blockquote-details mb-2">
																			<img class="rounded-circle w-11" src="{{ asset('/needed/img/avatars/te1.jpg')}}" srcset="./assets/img/avatars/te6@2x.jpg 2x" alt="" />
																			<div class="info">
																				<h4 class="mb-0 fs-18">{{ $ulasan->nama ?? '' }}</h4>
																				<p class="mb-1 fs-16 text-muted">{{ $ulasan->job ?? '' }}</p>
																			</div>
																		</div>
																	</div>
																	{{-- <div class="col-xl-6 ">
																		<p class="fs-16 ms-md-18">5.0<span class="ratings five mt-2 ms-1 " style="width: 3.9rem;"></span></p>
																	</div> --}}
																</blockquote>
																<p class="fs-16">“{{ $ulasan->answer }}”</p>
															</div>
														</div>
													</div>
													<!--/.card-body -->
												</div>
												<!-- /.card -->
											</div>
											<!-- /.item-inner -->
										</div>
									@endforeach
									<!--/.swiper-slide -->
									{{-- <div class="swiper-slide">
										<div class="item-inner px-0">
											<div class="card mb-0">
												<div class="card-body">
													<div class="row">
														<div class="col-xl-12">
															<blockquote class="icon mb-0 d-flex">
																<div class="col-xl-6 me-0">
																	<div class="blockquote-details mb-2">
																		<img class="rounded-circle w-11" src="{{ asset('/needed/img/avatars/te1.jpg')}}" srcset="./assets/img/avatars/te6@2x.jpg 2x" alt="" />
																		<div class="info">
																			<h4 class="mb-0 fs-18">Firman Maulana</h4>
																			<p class="mb-1 fs-16 text-muted">Sales Specialist</p>
																		</div>
																	</div>
																</div>
																<div class="col-xl-6 ">
																	<p class="fs-16 ms-18">5.0<span class="ratings five mt-2 ms-1 " style="width: 3.9rem;"></span></p>
																</div>
															</blockquote>
															<p class="fs-16">“Coursenya bagus dan sangat membantu meningkatkan pengetahuan dan kemampuan saya dalam hal tersebut.”</p>
														</div>
													</div>
												</div>
												<!--/.card-body -->
											</div>
											<!-- /.card -->
										</div>
										<!-- /.item-inner -->
									</div> --}}
									<!--/.swiper-slide -->
								</div>
								<!--/.swiper-wrapper -->
							</div>
							<!-- /.swiper -->
						</div>
						<!-- /.swiper-container -->
					</div>
				</div>
			</section>
		</main>
		<div class="col-md-4 d-none d-lg-block">
			<aside class="card shadow-lg my-6" style="width: 370px; position: sticky; top: 100px;">
				<figure class="card-img-top hover-scale">
									</figure>
				<div class="card-body px-2 pt-2 pb-0">
					<div class="post-header px-3">
						{{-- <div class="d-flex flex-row align-items-center mb-1">
							<div class="text-ash mb-0 fs-17">Rating Pelatihan</div>
							<div class="rating text-warning ms-3 fs-12 mb-0" style="width: 7rem;">
															</div>
							<!-- <span class="fs-13 p-0 m-0 text-ash">5.0</span> -->
						</div> --}}
						<span class="badge rounded-pill bg-primary fs-11 mb-1 me-3">Kategori</span>
						<h2 class="post-title h3 fs-16 mt-2 mb-1"></h2>
						<p class="price fs-20 mb-1"><span class="amount text-dark">Rp {{ isset($conv_course[0]['customfields'][2]['value']) && is_numeric($conv_course[0]['customfields'][2]['value']) 
    ? number_format($conv_course[0]['customfields'][2]['value'], 0, ',', '.') 
    : '0' }}
</span></p>
					</div>
					<div class="card-footer px-2">
						<div class="d-flex justify-content-between">
							@if(session()->has('user'))
							{{-- <button type="button"  data-bs-toggle="modal" data-bs-target="#exampleModal" class="btn btn-sm btn-primary rounded py-1 fs-14">Beli Sekarang</button> --}}
							<button type="button" id="btn-beli-sekarang" class="btn btn-sm btn-primary rounded py-1 fs-14" data-bs-toggle="modal" data-bs-target="#pembelianCourse">Beli Sekarang</button>
							@else
							<button type="button" class="btn btn-sm btn-primary rounded py-1 fs-14" onclick="alertLogin()">Beli Sekarang</button>
							@endif
							<button type="button" class="btn btn-sm btn-warning rounded py-1 fs-14"><span><i class="fa-solid fa-share-nodes me-2"></i></span> Bagikan</button>
						</div>
					</div>
				</div>
				<!--/.card-body -->
			</aside>
		</div>
		<div class="sm-function-btn d-lg-none d-md-block">
			<div class="origin" id="scrollAnimate">
				<div class="d-flex align-items-center justify-content-center">
					@if(session()->has('user'))
					{{-- <button type="button"  data-bs-toggle="modal" data-bs-target="#exampleModal" class="btn btn-sm btn-primary rounded py-1 fs-14">Beli Sekarang</button> --}}
					<button type="button" id="btn-beli-sekarang-responsive" class="btn btn-sm btn-primary rounded py-1 fs-14" data-bs-toggle="modal" data-bs-target="#pembelianCourse">Beli Sekarang</button>
					@else
					<button type="button" class="btn btn-sm btn-primary rounded py-1 fs-14" onclick="alertLogin()">Beli Sekarang</button>
					@endif
					<button type="button" class="btn btn-sm btn-warning rounded py-1 fs-14 ms-3"><span><i class="fa-solid fa-share-nodes me-2"></i></span> Bagikan</button>
				</div>
			</div>
		</div>
	</div>

</div>
<!-- Modal -->
{{-- <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<form action="{{ url('/PembayaranCourse') }}" method="POST" enctype="multipart/form-data">
			<div class="modal-content">
				<div class="modal-header d-flex justify-content-center py-1">
					<h1 class="modal-title fs-22 fw-semibold" id="exampleModalLabel">Pembayaran</h1>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body pb-2 pt-8">
					<p class="mb-0 fs-14">Pembayaran Pelatihan bisa melalui beberapa metode :</p>
					<div class="d-flex align-items-center">
						<img class="mx-2" src="{{ asset('assets/img/logos/bca.png')}}" alt="" width="80">
						<img class="mx-2" src="{{ asset('assets/img/logos/bni.png')}}" alt="" width="80">
						<img class="mx-2" src="{{ asset('assets/img/logos/bri.png')}}" alt="" width="80">
					</div>
					<p class="fs-14 mt-4 mb-0">Total yang harus dibayarkan : </p>
					<p class="fs-17 mb-0 fw-bold">Rp </p>
					@csrf
					<input type="hidden" value="" name="id_course">
					@if(session()->has('user'))
					<input type="hidden" value="{{ session()->get('user')[0]['id_user'] }}" name="id_user">
					<input type="hidden" value="{{ session()->get('user')[0]['id_lms'] }}" name="id_user_lms">
					@endif
					<h5 class="fs-15 mt-4 me-4">Upload Bukti pembayaran :</h5>
					<input type="file" class="form-control" name="bukti_pembayaran">
				</div>
				<div class="modal-footer py-2">
					<button type="button" class="fs-15 fw-semibold py-1 px-2 btn btn-secondary" data-bs-dismiss="modal">Batal</button>
					<button type="submit" class="fs-15 fw-semibold py-1 px-2 btn btn-primary">Submit</button>
				</div>
			</div>
		</form>
	</div>
</div> --}}
<div class="modal fade" id="pembelianCourse" tabindex="-1" aria-labelledby="pembelianCourseLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
	<div class="modal-dialog">
		<div class="modal-content shadow-lg">
			<div class="modal-body">
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				<div class="container">
									</div>

				<p class="text-center mb-4 mt-4">Anda akan membeli kursus ini dengan detail sebagai berikut:</p>

				<table class="table text-primary">
					<tr>
						<td>Nama Course</td>
						<td>:</td>
						<td></td>
					</tr>
					<tr>
						<td>Kategori</td>
						<td>:</td>
						<td>
							@foreach($category as $ctg)
								@if($conv_course[0]['categoryid'] == $ctg->id)
									{{ $ctg->name }}
								@endif
							@endforeach
						</td>
					</tr>
					<tr>
						<td>Harga</td>
						<td>:</td>
						<td>
							<span id="original-price">Rp 0							</span>
							<span id="discounted-price" style="margin-left: 10px; display: none;"></span>
						</td>
					</tr>					
				</table>
				<input type="hidden" id="id_course-payment" value="">
				<input type="hidden" id="price-origin-payment" name="price-origin-payment" value="">
				<input type="hidden" id="price-payment" name="price-payment" value="">
				<input type="hidden" id="id_user-payment" value="{{ !empty(session()->get("user")[0]["id_user"]) ? session()->get("user")[0]["id_user"] : '' }}" name="id_user-payment">
				<input type="hidden" id="id_user_lms-payment" value="{{ !empty($user_nik->id_lms) ? $user_nik->id_lms : '' }}" name="id_user_lms-payment">
				<input type="hidden" id="discount-payment" name="voucher-payment">
				<input type="hidden" id="voucher_code-payment" name="voucher_code-payment" value="0">
				<div class="mb-4">
					<p class="mb-1 mt-4">Kode Voucher</p>
					<div class="input-group">
						<input name="voucher" type="text" class="form-control" placeholder="Masukkan kode voucher" id="inputvoucher">
						<button type="button" class="btn btn-primary" id="buttonvoucher">Redeem</button>
					</div>
					<small class="text-secondary d-block mt-1">*Masukkan kode voucher jika memiliki.</small>
				</div>
				<p class="text-center mb-4">Tekan tombol di bawah ini untuk melanjutkan ke transaksi.</p>
				<button type="button" class="btn btn-primary w-100" id="submitTransaction">Lanjutkan</button>				

				<small class="text-secondary d-block text-center mt-3" style="font-size: 0.75rem;">*Setelah ini kamu akan diarahkan ke halaman pembayaran.</small>
			</div>
		</div>
	</div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="{{ asset('assets/js/jquery-3.6.0.min.js')}}"></script>
<script>
	function alertLogin() {
		Swal.fire({
			icon: 'warning',
			text: 'Harap Login terlebih dahulu',
			confirmButtonText: 'Login',
			confirmButtonColor: '#3f78e0',
			preConfirm: () => {
				window.location.href = '{{ url("/Login") }}';
			}
		})
	}

	function alertNIK() {
		Swal.fire({
			icon: 'warning',
			// title: 'Oops...',
			text: 'Harap lengkapi NIK terlebih dahulu',
			confirmButtonText: 'Lengkapi',
			confirmButtonColor: '#3f78e0',
			preConfirm: () => {
				const userId = {{ session()->get('user')[0]['id_lms'] ?? 00 }}
				if (!userId || userId == 00) {
					alertLogin();
				} else {
					window.location.href = '{{ url("ProfilePeserta") }}' + '/' + window.btoa(userId) + '#ProfilSaya';
				}
			}
		})
	}

	$(document).ready(function() {

		$('#inputvoucher').on('change', function() {
			$('#buttonvoucher').prop('disabled', false);
		});

		$('#buttonvoucher').on('click', function() {
			var voucherCode = $('#inputvoucher').val();
			var id_user = $('#id_user-payment').val();
			var id_course = $('#id_course-payment').val();
			var id_lms = $('#id_user_lms-payment').val();

			// Validasi input voucher
			if (!voucherCode) {
				Swal.fire({
					icon: 'error',
					title: 'Kode Voucher Kosong',
					text: 'Silakan masukkan kode voucher sebelum menekan tombol.',
					confirmButtonText: 'OK'
				});
				return;
			}

			if (!id_user || !id_course || !id_lms) {
				Swal.fire({
					icon: 'error',
					title: 'Data Tidak Lengkap',
					text: 'Pastikan semua data (user, course, dan LMS) telah terisi dengan benar.',
					confirmButtonText: 'OK'
				});
				return;
			}

			$.ajax({
				url: "{{ route('paymentRedeem') }}",
				type: 'POST',
				data: {
					voucher_code: voucherCode,
					id_user: id_user,
					id_course: id_course,
					id_lms: id_lms,
					_token: "{{ csrf_token() }}"
				},
				success: function(response) {
					if (response.status === 'success') {

						Swal.fire({
							icon: 'success',
							title: 'Voucher Berhasil',
							text: response.message,
							confirmButtonText: 'OK',
							confirmButtonColor: '#3f78e0'
						});

						const originalPrice = parseFloat($('#price-origin-payment').val()) || 0;
						const discountedPrice = Math.max(0, originalPrice - response.discount);
						const voucher_code = response.voucher_code;

						$('#original-price').css('text-decoration', 'line-through').addClass('text-danger');
						$('#discounted-price').text('Rp ' + discountedPrice).show().addClass('text-primary');
						$('#discount-payment').val(response.discount);
						$('#voucher_code-payment').val(voucher_code);

						$('#buttonvoucher').prop('disabled', true);
					} else {
						console.log(response);
						Swal.fire({
							icon: 'error',
							title: 'Voucher Gagal',
							text: 'Kode voucher tidak valid atau sudah pernah digunakan.',
							confirmButtonText: 'OK',
							confirmButtonColor: '#3f78e0'
						});
						$('#discount-payment').val('');
						$('#voucher_code-payment').val('');
						$('#discounted-price').hide();
						$('#original-price').css('text-decoration', 'none').removeClass('text-danger');

					}
				},
				error: function(xhr) {
					var response = xhr.responseJSON;
					console.log(response);
					Swal.fire({
						icon: 'error',
						title: 'Voucher Gagal',
						text: 'Kode voucher tidak valid',
						confirmButtonText: 'OK',
						confirmButtonColor: '#3f78e0'
					});
					$('#discount-payment').val('');
					$('#voucher_code-payment').val('');
					$('#discounted-price').hide();
					$('#original-price').css('text-decoration', 'none').removeClass('text-danger');
				}
			});
		});

		$.ajax({
			url: "{{ route('paymentPending') }}",
			method: "POST",
			data: {
				id_user: '{{ session()->has("user") ? session()->get("user")[0]["id_user"] : '' }}',
				id_lms: '{{ $user_nik ? $user_nik->id_lms : '' }}',
				id_course: '{{ $conv_course[0]["id"] ?? '' }}'
			},
			success: function(response) {
				if (response.redirect_url) {
					Swal.fire({
						title: 'Pembayaran Course Tertunda',
						icon: 'warning',
						text: 'Anda sudah melakukan transaksi untuk course ini dan perlu menyelesaikan pembayaran sampai waktu yang ditentukan.',
						confirmButtonText: 'Bayar Sekarang',
						confirmButtonColor: '#3f78e0',
						preConfirm: () => {
							window.location.href = response.redirect_url;
						},
						willClose: () => {
							window.location.href = response.redirect_url;
						}
					});
				}
			},
			error: function(xhr) {
				if (xhr.status === 404) {
					Swal.fire({
						icon: 'info',
						title: 'Informasi',
						text: 'Data pembayaran belum tersedia untuk course ini.',
						confirmButtonText: 'OK',
						confirmButtonColor: '#3f78e0'
					});
				} else {
					Swal.fire({
						icon: 'error',
						title: 'Error',
						text: 'Terjadi kesalahan saat memeriksa status pembayaran.',
						confirmButtonText: 'OK',
						confirmButtonColor: '#3f78e0'
					});
				}
			}
		});
	});

</script>
@endsection

@section('script')

<script type="text/javascript">
	// $('#submitTransaction').on('click', function() {
	// 	const originalAmount = parseFloat($('#price-origin-payment').val()) || 0;
	// 	const grossAmount = originalAmount <= 0 ? 0 : Math.floor(originalAmount) ;
	// 	const discountAmount = parseFloat($('#discount-payment').val()) || 0;
	// 	const itemPrice = grossAmount;

	// 	const redeemDiscount = $('#voucher_code-payment').val() ?? '';

	// 	const id = '{{ session()->get("user")[0]["id_user"] ?? "" }}';
	// 	const namaLengkap = '{{ $user_nik ? $user_nik->nama : '' }}';
	// 	const [firstName, ...lastNameArr] = namaLengkap.split(' ');
	// 	const lastName = lastNameArr.join(' ');

	// 	const encryptedId = btoa(id);
	// 	const orderId = 'JGT-COURSE-' + '{{ $conv_course[0]["id"] }}' + '-' + encryptedId + '-' +
	// 		new Date().getFullYear() + (new Date().getMonth() + 1) + new Date().getDate() +
	// 		new Date().getHours() + new Date().getMinutes() + new Date().getSeconds();

	// 	const dataUser = JSON.stringify({
	// 		_token: '{{ csrf_token() }}',
	// 		payment: itemPrice === 0 ? true : false,
	// 		order_id: orderId,
	// 		gross_amount: grossAmount,
	// 		discount_amount: discountAmount,
	// 		redeem_discount: redeemDiscount,
	// 		customer_details: {
	// 			id: id,
	// 			id_lms: $('#id_user_lms-payment').val(),
	// 			first_name: firstName,
	// 			last_name: lastName,
	// 			email: '{{ $user_nik ? $user_nik->email : '' }}',
	// 			phone: '{{ $user_nik ? $user_nik->telp : '' }}'
	// 		},
	// 		item_details: [{
	// 			id: $('#id_course-payment').val(),
	// 			price: itemPrice,
	// 			quantity: 1,
	// 			name: '{{ $conv_course[0]['fullname'] }}'
	// 		}]
	// 	});

	// 	$.ajax({
	// 		url: "{{ url('/midtrans/create-transaction') }}",
	// 		method: "POST",
	// 		contentType: "application/json",
	// 		data: dataUser,
	// 		headers: {
	// 			'X-CSRF-TOKEN': '{{ csrf_token() }}'
	// 		},
	// 		success: function(response) {
	// 			if (response.redirect_url) {
	// 				window.location.href = response.redirect_url;
	// 			}
	// 		},
	// 		error: function(error) {
	// 			console.error("Transaksi gagal:", error);
	// 		}
	// 	});
	// });

	$('#submitTransaction').on('click', function() {
		const id_user = $('#id_user-payment').val();
		const id_lms = $('#id_user_lms-payment').val();
		const id_course = $('#id_course-payment').val();
		const voucher_code = $('#voucher_code-payment').val() || '';

		// Validasi input awal
		if (!id_user || !id_lms || !id_course) {
			Swal.fire({
				icon: 'error',
				title: 'Oops...',
				text: 'Pastikan semua data telah diisi dengan benar.',
			});
			return;
		}

		// Ambil nama lengkap pengguna dari PHP dan pisahkan nama depan dan belakang
		const namaLengkap = '{{ $user_nik ? $user_nik->nama : '' }}';
		const nameParts = namaLengkap.split(' ');
		const firstName = nameParts.shift() || ''; // Nama depan
		const lastName = nameParts.join(' '); // Gabungkan sisa nama menjadi nama belakang

		const orderId = 'JGT-COURSE-' + id_course + '-' + btoa(id_user) + '-' +
			new Date().getFullYear() + (new Date().getMonth() + 1) + new Date().getDate() +
			new Date().getHours() + new Date().getMinutes() + new Date().getSeconds();

		const dataUser = JSON.stringify({
			_token: '{{ csrf_token() }}',
			order_id: orderId,
			redeem_discount: voucher_code,
			customer_details: {
				id: id_user,
				id_lms: id_lms,
				first_name: firstName,
				last_name: lastName,
				email: '{{ $user_nik ? $user_nik->email : '' }}',
				phone: '{{ $user_nik ? $user_nik->telp : '' }}'
			},
			item_details: [{
				id: id_course,
				quantity: 1,
				name: '{{ $conv_course[0]['fullname'] }}'
			}]
		});

		$.ajax({
			url: "{{ url('/midtrans/create-transaction') }}",
			method: "POST",
			contentType: "application/json",
			data: dataUser,
			headers: {
				'X-CSRF-TOKEN': '{{ csrf_token() }}',
			},
			beforeSend: function() {
				Swal.fire({
					title: 'Memproses transaksi...',
					text: 'Mohon tunggu beberapa saat.',
					allowOutsideClick: false,
					didOpen: () => {
						Swal.showLoading();
					}
				});
			},
			success: function(response) {
				Swal.close();
				if (response.redirect_url) {
					Swal.fire({
						icon: 'success',
						title: 'Transaksi Berhasil Dibuat!',
						text: 'Anda akan diarahkan ke halaman pembayaran.',
						confirmButtonText: 'OK'
					}).then(() => {
						$("#buttonvoucher, #submitTransaction").prop("disabled", true);
						window.location.href = response.redirect_url;
					});
				} else {
					Swal.fire({
						icon: 'info',
						title: 'Informasi',
						text: 'Redirect URL tidak tersedia. Anda akan diarahkan ke halaman riwayat pembayaran.',
						confirmButtonText: 'OK'
					}).then(() => {
						$("#buttonvoucher, #submitTransaction").prop("disabled", true);
						let encodeId = window.btoa(id_lms)
						window.location.href = `ProfilePeserta/${encodeId}#RiwayatPembayaran`;
					});
				}
			},
			error: function(error) {
				Swal.close();
				Swal.fire({
					icon: 'error',
					title: 'Gagal Memproses Transaksi',
					text: error.responseJSON?.message || 'Terjadi kesalahan pada server. Coba lagi nanti.'
				});
			}
		});
	});

</script>
@endsection