File "3b304deabe7d9af8786c9e7c0a30d474.php"
Full Path: /home2/yvrgircc/public_html/ariseskilltech.com/storage/framework/views/3b304deabe7d9af8786c9e7c0a30d474.php
File size: 14.59 KB
MIME-type: text/html
Charset: utf-8
<div class="ps-box p-0 shadow-none">
<h4 class="g-title mb-15"><?php echo e(get_phrase('Course curriculum')); ?></h4>
<div class="lesson-play-list p-0">
<?php if($sections->count() > 0): ?>
<div class="accordion" id="accordionExample">
<?php $__currentLoopData = $sections; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $section): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button <?php if($key > 0): ?> collapsed <?php endif; ?>" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_<?php echo e($section->id); ?>" aria-expanded="<?php if($key == 0): ?> true <?php else: ?> false <?php endif; ?>" aria-controls="collapse_<?php echo e($section->id); ?>"><?php echo e(ucfirst($section->title)); ?>
</button>
</h2>
<div id="collapse_<?php echo e($section->id); ?>" class="accordion-collapse collapse <?php if($key == 0): ?> show <?php endif; ?>" data-bs-parent="#accordionExample">
<div class="accordion-body">
<ul class="lesson-list course_list">
<?php
$lessons = DB::table('lessons')
->where('section_id', $section->id)
->get();
?>
<?php $__currentLoopData = $lessons; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $lesson): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<li>
<a href="<?php echo e($course_details->is_paid ? 'javascript:: void(0);' : route('course.player', $course_details->slug)); ?>" class="d-flex justify-content-between align-items-center">
<p class="d-flex">
<svg class="mt-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.87508 13.1253L12.9376 10.5212C13.132 10.3962 13.2292 10.2225 13.2292 10.0003C13.2292 9.7781 13.132 9.60449 12.9376 9.47949L8.87508 6.87533C8.66675 6.73644 8.45494 6.72602 8.23966 6.84408C8.02439 6.96213 7.91675 7.14616 7.91675 7.39616V12.6045C7.91675 12.8545 8.02439 13.0385 8.23966 13.1566C8.45494 13.2746 8.66675 13.2642 8.87508 13.1253ZM10.0001 18.3337C8.8473 18.3337 7.76397 18.1149 6.75008 17.6774C5.73619 17.2399 4.85425 16.6462 4.10425 15.8962C3.35425 15.1462 2.7605 14.2642 2.323 13.2503C1.8855 12.2364 1.66675 11.1531 1.66675 10.0003C1.66675 8.84755 1.8855 7.76421 2.323 6.75033C2.7605 5.73644 3.35425 4.85449 4.10425 4.10449C4.85425 3.35449 5.73619 2.76074 6.75008 2.32324C7.76397 1.88574 8.8473 1.66699 10.0001 1.66699C11.1529 1.66699 12.2362 1.88574 13.2501 2.32324C14.264 2.76074 15.1459 3.35449 15.8959 4.10449C16.6459 4.85449 17.2397 5.73644 17.6772 6.75033C18.1147 7.76421 18.3334 8.84755 18.3334 10.0003C18.3334 11.1531 18.1147 12.2364 17.6772 13.2503C17.2397 14.2642 16.6459 15.1462 15.8959 15.8962C15.1459 16.6462 14.264 17.2399 13.2501 17.6774C12.2362 18.1149 11.1529 18.3337 10.0001 18.3337ZM10.0001 16.667C11.8612 16.667 13.4376 16.0212 14.7292 14.7295C16.0209 13.4378 16.6667 11.8614 16.6667 10.0003C16.6667 8.13921 16.0209 6.56283 14.7292 5.27116C13.4376 3.97949 11.8612 3.33366 10.0001 3.33366C8.13897 3.33366 6.56258 3.97949 5.27091 5.27116C3.97925 6.56283 3.33341 8.13921 3.33341 10.0003C3.33341 11.8614 3.97925 13.4378 5.27091 14.7295C6.56258 16.0212 8.13897 16.667 10.0001 16.667Z"
fill="#192335" />
</svg>
<?php echo e(ucfirst($lesson->title)); ?>
</p>
<!-- <?php if($lesson->duration != '00:00:00' && $lesson->duration != ""): ?>
<span class="preview-text"><?php echo e($lesson->duration); ?></span>
<?php endif; ?> -->
<!-- <?php if($lesson->is_free == true): ?>
<div class="lecture-info pe-2 me-2">
<i class="fas fa-eye me-1 text-13px"></i>
Preview
</div>
<?php endif; ?> -->
<?php if($lesson->is_free): ?>
<div class="lecture-info pe-2 me-2">
<button
class="btn btn-primary preview-btn gradient"
type="button"
data-bs-toggle="modal"
data-bs-target="#lessonModal<?php echo e($lesson->id); ?>"
data-video-url="<?php echo e($lesson->lesson_src); ?>">
Preview
</button>
</div>
<?php endif; ?>
</a>
</li>
<!-- Bootstrap Modal -->
<!-- Bootstrap Modal for Free Lessons -->
<?php if($lesson->is_free): ?>
<div class="modal fade-in-effect" id="lessonModal<?php echo e($lesson->id); ?>" tabindex="-1" aria-labelledby="lessonModalLabel<?php echo e($lesson->id); ?>" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content">
<div class="modal-body bg-dark">
<link rel="stylesheet" href="<?php echo e(asset('assets/global/plyr/plyr.css')); ?>">
<?php
$preview_video_type = str_contains($lesson->lesson_src, 'youtu') ? 'youtube' : '';
$preview_video_type = str_contains($lesson->lesson_src, 'vimeo') && $preview_video_type == '' ? 'vimeo' : $preview_video_type;
$preview_video_type = str_contains($lesson->lesson_src, 'http') && $preview_video_type == '' ? 'html5' : $preview_video_type;
?>
<?php if($preview_video_type == 'youtube'): ?>
<div class="plyr__video-embed" id="promoPlayer">
<iframe height="500" src="<?php echo e($lesson->lesson_src); ?>?origin=https://plyr.io&iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1" allowfullscreen allowtransparency allow="autoplay"></iframe>
</div>
<?php elseif($preview_video_type == 'vimeo'): ?>
<div class="plyr__video-embed" id="promoPlayer">
<iframe height="500" id="promoPlayer" src="https://player.vimeo.com/video/<?php echo e($lesson->lesson_src); ?>?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media" allowfullscreen allowtransparency allow="autoplay"></iframe>
</div>
<?php elseif($preview_video_type == 'html5'): ?>
<video id="promoPlayer" playsinline controls>
<source src="<?php echo e($lesson->lesson_src); ?>" type="video/mp4">
</video>
<?php else: ?>
<video id="promoPlayer" playsinline controls>
<source src="<?php echo e(asset($lesson->lesson_src)); ?>" type="video/mp4">
</video>
<?php endif; ?>
<script src="<?php echo e(asset('assets/global/plyr/plyr.js')); ?>"></script>
<script>
"use strict";
const promoPlayer = new Plyr('#promoPlayer');
</script>
</div>
</div>
</div>
</div>
<?php endif; ?>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</ul>
</div>
</div>
</div>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>
<?php else: ?>
<p class="text-center"><?php echo e(get_phrase('Course curriculum Empty')); ?></p>
<?php endif; ?>
</div>
</div>
<style>
.modal-backdrop {
z-index: 1040 !important; /* Lower value */
}
.modal-content {
z-index: 1050 !important; /* Higher value to be above the backdrop */
}
/* Modal backdrop */
.modal-backdrop {
z-index: 1040 !important; /* Ensure backdrop is behind modal content */
}
/* Modal content */
.modal-content {
z-index: 1050 !important; /* Ensure modal content is above the backdrop */
border-radius: 8px; /* Optional: rounded corners for the modal */
}
/* Video container inside the modal */
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
border-radius: 8px; /* Optional: rounded corners for the video */
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
border-radius: 8px; /* Optional: rounded corners for the iframe */
}
/* Button styles */
.preview-btn {
background-color: #ff5722; /* Orange color for the button */
border: none;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
color: #fff;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.preview-btn:hover {
background-color: #e64a19; /* Darker orange on hover */
cursor: pointer;
}
/* Modal header */
.modal-header {
background-color: #f8f9fa; /* Light background for the header */
border-bottom: 1px solid #dee2e6;
padding: 15px;
}
.modal-header .btn-close {
background-color: #ff5722; /* Red close button */
border: none;
}
.modal-header .btn-close:hover {
background-color: #e64a19;
}
/* Modal Body */
.modal-body {
padding: 20px;
text-align: center;
}
.modal-body p {
font-size: 16px;
margin-bottom: 15px;
}
.modal-body .btn-primary {
background-color: #007bff; /* Bootstrap default primary button color */
border: none;
}
/* Styling for modal when it's fully opened */
.modal.fade.show {
opacity: 1 !important;
transition: opacity 0.15s linear;
}
.modal-backdrop {
display: none;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
let previewButtons = document.querySelectorAll(".preview-btn");
previewButtons.forEach(function(button) {
button.addEventListener("click", function() {
let videoUrl = this.getAttribute("data-video-url");
let lessonId = this.getAttribute("data-bs-target").replace("#lessonModal", "");
let videoFrame = document.getElementById("videoFrame" + lessonId);
if (videoFrame) {
let youtubeEmbedUrl = convertToYouTubeEmbed(videoUrl);
videoFrame.src = youtubeEmbedUrl + "?autoplay=1";
}
});
});
document.querySelectorAll(".modal").forEach(function(modal) {
modal.addEventListener("hidden.bs.modal", function() {
let videoFrame = modal.querySelector("iframe");
if (videoFrame) {
videoFrame.src = ""; // Stop video when modal is closed
}
});
});
function convertToYouTubeEmbed(url) {
let videoId = url.split("v=")[1];
if (videoId) {
let ampersandPosition = videoId.indexOf("&");
if (ampersandPosition !== -1) {
videoId = videoId.substring(0, ampersandPosition);
}
return "https://www.youtube.com/embed/" + videoId;
}
return "";
}
});
</script><?php /**PATH /home2/yvrgircc/public_html/ariseskilltech.com/resources/views/frontend/default/course/content_area.blade.php ENDPATH**/ ?>