@extends('layout.app')

@section('title', 'Lecture Page')

@section('content')
    <!-- Hero -->
    <section class="jarallax dark-mode bg-dark pt-2 pt-lg-3 pb-lg-5" data-jarallax data-speed="0.35">
        <span class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-70"></span>
        <div class="jarallax-img" style="background-image: url({{ asset('storage/' . $lecture->lecture_img) }});"></div>
        <div class="container position-relative zindex-5 pb-5">
            <div class="notification" id="notification">
                @if (session('success'))
                    <div class="alert alert-success fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
            
                
                @if (session('error'))
                <div class="alert alert-success fade show" role="alert">
                    <ul>
                                <li>{{ session('error') }}</li>
                        </ul>
                    </div>
                @endif

            </div>

            <script>
                document.addEventListener("DOMContentLoaded", function() {
                    const notification = document.getElementById('notification');
                    if (notification) {
                        setTimeout(() => {
                            notification.style.display = 'none';
                        }, 5000);
                    }
                });
            </script>

            <!-- Breadcrumb -->
            <nav class="py-4" aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="landing-online-courses.html"><i class="bx bx-home-alt fs-lg me-1"></i>Home</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="portfolio-courses.html">Lectures</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">{{ $lecture->title }}</li>
                </ol>
            </nav>

            <!-- Title -->
            <h1>{{ $lecture->title }}</h1>
            {{-- <p class="fs-lg text-light opacity-70">{{ $lecture->description }}</p> --}}


            <!-- Author -->
            <div class="d-flex align-items-center mt-xl-5 pt-2 pt-md-4 pt-lg-5">
                {{-- <img src="assets/img/avatar/17.jpg" class="rounded-circle" width="60" alt="Instructor Name"> --}}
                <div class="ps-3">
                    <div class="text-light opacity-80 mb-1">Created by</div>
                    <h6>{{ $lecture->teacher->name }}</h6> <!-- Show teacher's name -->
                </div>
            </div>
        </div>
    </section>

    <!-- Lecture description -->
    <section class="container pt-5 mt-2 mt-lg-4 mt-xl-5">
        <div class="row">

            <!-- Sidebar (Lecture summary) -->
            <aside class="col-lg-4 col-md-5 offset-xl-1 order-md-2 mb-5">
                <div style="margin-top: -96px;"></div>
                <div class="position-sticky top-0 pt-5">
                    <div class="pt-5 mt-md-3">
                        <div class="card shadow-sm p-sm-3">
                            <div class="card-body">
                                <h4 class="mb-4">This lecture includes:</h4>
                                <ul class="list-unstyled pb-3">
                                    <li class="d-flex align-items-center mb-2">
                                        <i class="bx bx-slideshow fs-xl text-muted me-2 pe-1"></i>
                                        {{ $lecture->duration }} hours of video
                                    </li>
                                    {{-- <li class="d-flex align-items-center mb-2">
                                        <i class="bx bx-file fs-xl text-muted me-2 pe-1"></i>
                                        {{ $lecture->resources->count() }} articles
                                    </li>
                                    <li class="d-flex align-items-center mb-2">
                                        <i class="bx bx-download fs-xl text-muted me-2 pe-1"></i>
                                        {{ $lecture->downloads_count }} downloadable resources
                                    </li>
                                    <li class="d-flex align-items-center mb-2">
                                        <i class="bx bx-infinite fs-xl text-muted me-2 pe-1"></i>
                                        Lifetime access
                                    </li>
                                    <li class="d-flex align-items-center mb-2">
                                        <i class="bx bx-trophy fs-xl text-muted me-2 pe-1"></i>
                                        Certificate of completion
                                    </li> --}}
                                </ul>
                                <div class="h2 d-flex align-items-center mb-4">EGP{{ $lecture->price }}</div>
                                    @auth
                                        @if(auth()->user()->role == 'student')
                                            @if(!$lecture->students->contains(auth()->user()->student->id))
                                                <a href="{{ route('student.enroll', ['lectureId' => $lecture->id]) }}" class="btn btn-primary btn-lg shadow-primary">
                                                    Join the Lecture
                                                </a>
                                            @else
                                                <button class="btn btn-success btn-lg shadow-success" disabled>
                                                    You are already enrolled in this lecture
                                                </button>
                                            @endif
                                        @elseif(auth()->user()->role == 'teacher')
                                            <button class="btn btn-warning btn-lg shadow-warning" disabled>
                                                Not available for your account type
                                            </button>
                                            <small>You must register from a student account.</small>
                                        @elseif(auth()->user()->role == 'admin')
                                            <button class="btn btn-danger btn-lg shadow-danger" disabled>
                                                Not available for your account type
                                            </button>
                                            <small>You must register from a student account.</small>

                                        @endif
                                    @else
                                        <a href="{{ route('login') }}" class="btn btn-secondary btn-lg shadow-secondary">
                                            Please log in to join the lecture
                                        </a>
                                    @endauth
                                                            
                            </div>
                        </div>
                    </div>
                </div>
            </aside>

            <!-- Content -->
            <div class="col-xl-7 col-lg-8 col-md-7 order-md-1 mb-5">
                <h4 class=" pb-md-2 pb-lg-3">Lecture details</h4>
                <p class="pb-4 mb-3">{{ $lecture->description }}</p>

                <h4 class="mb-4">What you'll learn</h4>
                {!! $lecture->what_learn !!}
                
                <h5 class="mb-4 mt-4">
                    Zoom Link (Lecture will start at {{ \Carbon\Carbon::parse($lecture->start_time)->format('l, F j, Y h:i A') }})
                </h5>
                
                @php
                    // حساب وقت انتهاء الحصة
                    $endTime = \Carbon\Carbon::parse($lecture->start_time)->addMinutes($lecture->duration);
                @endphp

                @if (\Carbon\Carbon::parse($lecture->start_time)->isFuture()) <!-- إذا كانت الحصة لم تبدأ بعد -->
                    @if ($lecture->lecture_zoom) <!-- إذا كان رابط Zoom موجودًا -->
                        <a href="{{ $lecture->lecture_zoom }}" target="_blank">Click here to join the Zoom meeting</a>
                    @else
                        <div class="alert alert-warning" role="alert">
                            The Zoom link has not been provided by the instructor yet.
                        </div>
                    @endif
                @elseif (\Carbon\Carbon::now()->greaterThanOrEqualTo($endTime)) <!-- إذا كانت الحصة قد انتهت بناءً على المدة -->
                    @if ($lecture->lecture_video)
                        <div class="alert alert-info" role="alert">
                            The lecture has ended. You can watch the recorded video below.
                        </div>
                        <!-- Video button on top of the image -->
                        <div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url({{ asset('storage/' . $lecture->lecture_img) }});">
                            <span class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-60"></span>
                            <div class="position-relative text-center zindex-5 px-3 py-4 py-sm-5 my-lg-5">
                                <!-- زر تشغيل الفيديو في نفس الصفحة -->
                                <button class="btn btn-video btn-icon bg-white btn-xl mb-2" data-bs-toggle="modal" data-bs-target="#videoModal">
                                    <i class="bx bx-play"></i>
                                </button>
                                <div class="fs-sm text-white opacity-75">Click me to watch the video!</div>
                            </div>
                        </div>
                        
                        <!-- نافذة مودال لعرض الفيديو -->
                        <div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="videoModalLabel">Lecture Video</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <!-- فيديو مدمج داخل المودال -->
                                        <video id="lectureVideo" width="100%" controls>
                                            <source src="{{ asset('storage/' . $lecture->lecture_video) }}" type="video/mp4">
                                            Your browser does not support the video tag.
                                        </video>
                                    </div>
                                </div>
                            </div>
                        </div>

                    @else
                        <div class="alert alert-warning" role="alert">
                            The lecture video has not been uploaded yet.
                        </div>
                    @endif
                @else
                    <div class="alert alert-info" role="alert">
                        The lecture has not started yet.
                    </div>
                @endif
            </div>


        </div>
    </section>
@endsection