243 lines
14 KiB
PHP
243 lines
14 KiB
PHP
@extends('layouts.default')
|
|
@push('title', get_phrase('Course Details'))
|
|
@push('meta')@endpush
|
|
@push('css')@endpush
|
|
@section('content')
|
|
@php
|
|
$instructor_review = App\Models\Instructor_review::where('instructor_id', get_course_creator_id($course_details->id)->id)
|
|
->orderBy('id', 'DESC')
|
|
->get();
|
|
|
|
$review = App\Models\Review::where('course_id', $course_details->id)
|
|
->orderBy('id', 'DESC')
|
|
->get();
|
|
|
|
$total = $review->count();
|
|
$rating = array_sum(array_column($review->toArray(), 'rating'));
|
|
|
|
$average_rating = 0;
|
|
if ($total != 0) {
|
|
$average_rating = $rating / $total;
|
|
}
|
|
@endphp
|
|
<section class="breadcum-area page-content-pb-100 bg-white">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-8 px-4">
|
|
<div class="eNtry-breadcum mt-4">
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb d-flex flex-nowrap">
|
|
<li class="breadcrumb-item"><a href="{{ route('home') }}">{{ get_phrase('Home') }}</a></li>
|
|
<li class="breadcrumb-item ellipsis-line-1 active" aria-current="page">{{ $course_details->title }}
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
<div class="course-details pe-auto pe-lg-5">
|
|
<h2 class="g-title ellipsis-line-4">{{ $course_details->title }}</h2>
|
|
<p class="g-text text-dark ellipsis-line-2">
|
|
{{ ellipsis($course_details->short_description, 160) }}
|
|
</p>
|
|
<div class="row row-gap-4">
|
|
<div class="col-6 col-sm-6 col-md-4">
|
|
<a class="d-flex align-items-center text-dark" href="{{ route('instructor.details', ['name' => slugify($course_details->creator->name), 'id' => $course_details->creator->id]) }}">
|
|
<img class="pro-32 me-2" src="{{ get_image(course_by_instructor($course_details->id)->photo) }}" alt="instructor-image">
|
|
{{ course_by_instructor($course_details->id)->name }}
|
|
</a>
|
|
</div>
|
|
<div class="col-6 col-sm-6 col-md-4 text-dark">
|
|
<p class="d-flex align-items-center">
|
|
@if ($total > 0)
|
|
<span class="d-inline-block mx-2">{{ number_format(round($average_rating), 1) }}</span>
|
|
@for ($i = 0; $i < $average_rating; $i++)
|
|
<i class="fa fa-star"></i>
|
|
@endfor
|
|
@else
|
|
<i class="fi-rr-circle-star text-16px text-dark mt-2 ms-1"></i>
|
|
<span class="d-inline-block mx-2">0</span>
|
|
<i class="fa fa-star text-secondary"></i>
|
|
@endif
|
|
</p>
|
|
</div>
|
|
<div class="col-6 col-sm-6 col-md-4 d-flex align-items-center text-dark">
|
|
<img class="pro-20 me-2" src="{{ asset('assets/frontend/default/image/language.png') }}" alt="...">
|
|
{{ ucfirst($course_details->language) }}
|
|
</div>
|
|
<div class="col-6 col-sm-6 col-md-4 d-flex align-items-center text-dark">
|
|
<img class="pro-20 me-2" src="{{ asset('assets/frontend/default/image/g3.png') }}" alt="...">
|
|
{{ get_phrase('Certificate Course') }}
|
|
</div>
|
|
<div class="col-6 col-sm-6 col-md-4 d-flex align-items-center text-dark">
|
|
<img class="pro-20 me-2" src="{{ asset('assets/frontend/default/image/g2.png') }}" alt="...">
|
|
{{ total_enroll($course_details->id) }} {{ get_phrase('Students') }}
|
|
</div>
|
|
<div class="col-6 col-sm-6 col-md-4 d-flex align-items-center text-dark">
|
|
<img class="pro-20 me-2" src="{{ asset('assets/frontend/default/image/g1.png') }}" alt="...">
|
|
{{ total_durations($course_details->id) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-8 order-2 order-lg-1">
|
|
<div class="details-page-content">
|
|
<div class="ps-box static-menu mt-5 w-100">
|
|
<ul class="nav nav-bordered" id="pills-tab" role="tablist">
|
|
<li class="nav-item active" role="presentation">
|
|
<button class="nav-link active" id="pills-overview-tab" data-bs-toggle="pill" data-bs-target="#pills-overview" type="button" role="tab" aria-controls="pills-overview" aria-selected="true">{{ get_phrase('Overview') }}</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="pills-course-content-tab" data-bs-toggle="pill" data-bs-target="#pills-course-content" type="button" role="tab" aria-controls="pills-course-content" aria-selected="false">{{ get_phrase('Curriculum') }}</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="pills-details-tab" data-bs-toggle="pill" data-bs-target="#pills-details" type="button" role="tab" aria-controls="pills-details" aria-selected="false">{{ get_phrase('Details') }}</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="pills-instructor-tab" data-bs-toggle="pill" data-bs-target="#pills-instructor" type="button" role="tab" aria-controls="pills-instructor" aria-selected="false">{{ get_phrase('Instructor') }}</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="pills-reviews-tab" data-bs-toggle="pill" data-bs-target="#pills-reviews" type="button" role="tab" aria-controls="pills-reviews" aria-selected="false">{{ get_phrase('Reviews') }}</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content" id="pills-tabContent">
|
|
<div class="tab-pane fade show active" id="pills-overview" role="tabpanel" aria-labelledby="pills-overview-tab" tabindex="0">
|
|
@include('frontend.default.course.overview_area')
|
|
</div>
|
|
<div class="tab-pane fade" id="pills-course-content" role="tabpanel" aria-labelledby="pills-course-content-tab" tabindex="0">
|
|
@include('frontend.default.course.content_area')
|
|
</div>
|
|
<div class="tab-pane fade" id="pills-details" role="tabpanel" aria-labelledby="pills-details-tab" tabindex="0">
|
|
@include('frontend.default.course.requirement_outcome_area')
|
|
</div>
|
|
<div class="tab-pane fade" id="pills-instructor" role="tabpanel" aria-labelledby="pills-instructor-tab" tabindex="0">
|
|
@include('frontend.default.course.instructor_area')
|
|
</div>
|
|
<div class="tab-pane fade" id="pills-reviews" role="tabpanel" aria-labelledby="pills-reviews-tab" tabindex="0">
|
|
@include('frontend.default.course.review_area')
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 order-1 order-lg-2">
|
|
@include('frontend.default.course.pricing_card')
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="modal fade-in-effect" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-xl">
|
|
<div class="modal-content radius-22 overflow-hidden border-0">
|
|
<div class="modal-header border-0 pb-0 position-relative">
|
|
<button type="button" class="btn-close btn-close-white shadow-none position-absolute end-0 top-0 m-3" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body bg-dark p-0">
|
|
<link rel="stylesheet" href="{{ asset('assets/global/plyr/plyr.css') }}">
|
|
|
|
@php
|
|
$preview = $course_details->preview ?? '';
|
|
|
|
// Detect video type
|
|
$video_type = 'html5'; // default fallback
|
|
|
|
if (str_contains($preview, 'youtu')) {
|
|
$video_type = 'youtube';
|
|
} elseif (preg_match('/drive\.google\.com\/file\/d\/([a-zA-Z0-9_-]+)/', $preview, $matches)) {
|
|
$video_type = 'google_drive';
|
|
$google_drive_id = $matches[1];
|
|
} elseif (str_contains($preview, 'http') && (str_ends_with($preview, '.mp4') || str_contains($preview, '.mp4'))) {
|
|
$video_type = 'html5';
|
|
} elseif (!empty($preview)) {
|
|
// Local asset (stored in storage or public folder)
|
|
$video_type = 'html5_local';
|
|
}
|
|
@endphp
|
|
|
|
@if ($video_type == 'youtube')
|
|
<div class="plyr__video-embed" id="promoPlayer">
|
|
<iframe
|
|
src="{{ str_replace('watch?v=', 'embed/', $preview) }}?autoplay=1&rel=0&modestbranding=1&playsinline=1"
|
|
allowfullscreen
|
|
allow="autoplay">
|
|
</iframe>
|
|
</div>
|
|
|
|
@elseif ($video_type == 'google_drive')
|
|
<div class="plyr__video-embed" id="promoPlayer">
|
|
<iframe
|
|
src="https://drive.google.com/file/d/{{ $google_drive_id }}/preview"
|
|
width="100%"
|
|
height="500"
|
|
allowfullscreen
|
|
allow="autoplay">
|
|
</iframe>
|
|
</div>
|
|
|
|
@elseif ($video_type == 'html5' || $video_type == 'html5_local')
|
|
<video id="promoPlayer" playsinline controls crossorigin>
|
|
<source src="{{ $video_type == 'html5_local' ? asset($preview) : $preview }}" type="video/mp4">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
|
|
@else
|
|
<div class="d-flex align-items-center justify-content-center text-white" style="height: 500px;">
|
|
<p class="h4">{{ get_phrase('No preview video available') }}</p>
|
|
</div>
|
|
@endif
|
|
|
|
<script src="{{ asset('assets/global/plyr/plyr.js') }}"></script>
|
|
<script>
|
|
"use strict";
|
|
const promoPlayer = new Plyr('#promoPlayer', {
|
|
controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'fullscreen'],
|
|
autoplay: true,
|
|
clickToPlay: true,
|
|
youtube: { noCookie: true, rel: 0, modestbranding: 1 },
|
|
});
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
"use strict";
|
|
const myModalElement = document.getElementById('exampleModal')
|
|
myModalElement.addEventListener('hidden.bs.modal', event => {
|
|
promoPlayer.pause();
|
|
$('#exampleModal').toggleClass('in');
|
|
});
|
|
myModalElement.addEventListener('shown.bs.modal', event => {
|
|
promoPlayer.play();
|
|
$('#exampleModal').toggleClass('in');
|
|
});
|
|
</script>
|
|
|
|
@endsection
|
|
@push('js')
|
|
<script>
|
|
"use strict";
|
|
$(document).ready(function() {
|
|
$('#more_description').on('click', function(e) {
|
|
e.preventDefault();
|
|
|
|
let ellipsis = $('.description').attr('id');
|
|
$('.description').toggleClass(ellipsis);
|
|
|
|
$(this).toggleClass('active');
|
|
if ($(this).hasClass('active')) {
|
|
$(this).text('See less');
|
|
} else {
|
|
$(this).html('See more <i class="fa-solid fa-angle-right me-2"></i>');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|