@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
