@extends('layout.app')

@section('title', __('home.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('public/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="{{ route('home') }}"><i class="bx bx-home-alt fs-lg me-1"></i>{{ __('home.home') }}</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">{{ $lecture->title }} @if($lecture->max_students == 1) {{ __('home.private') }} @endif</li>
                </ol>
            </nav>

            <!-- Title -->
            <h1>{{ $lecture->title }} @if($lecture->max_students == 1) {{ __('home.private') }} @endif</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">
                <div class="ps-3">
                    <div class="text-light opacity-80 mb-1">{{ __('home.created_by') }}</div>
                    <h6>
    <a href="{{ $lecture->teacher ? route('teacher.page', ['id' => $lecture->teacher->id]) : '#' }}">
        {{ $lecture->teacher->name ?? 'Not Available' }}
    </a>
</h6>

                </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">{{ __('home.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 }} {{ __('home.minutes_of_video') }}
                                    </li>
                                </ul>
                                <div class="h2 d-flex align-items-center mb-4">
                                    @if(auth()->user()->role == 'student')
                                        @php
                                            $country = Auth::user()->country;
                                        @endphp
                                        @if($country === 'Egypt')
                                            {{ number_format($lecture->price_egp, 2) }} EGP
                                        @else
                                            ${{ number_format($lecture->price_usd, 2) }}
                                        @endif
                                    @endif
                                </div>
                                
                                @auth
                                    @if(auth()->user()->role == 'student')
                                        @php
                                            $enrollment = \App\Models\Enrollment::where('lecture_id', $lecture->id)
                                                            ->where('student_id', auth()->user()->student->id)
                                                            ->first();
                                        @endphp
                                        @if(!$enrollment)
                                            @php
                                                $paidEnrollmentCount = \App\Models\Enrollment::where('lecture_id', $lecture->id)
                                                                    ->where('status', 'paid')
                                                                    ->count();
                                            @endphp
                                            @if($paidEnrollmentCount >= $lecture->max_students)
                                                <button class="btn btn-danger btn-lg shadow-danger" disabled>
                                                    <i class="fas fa-times-circle"></i> {{ __('home.lecture_is_full') }}
                                                </button>
                                            @else
                                                <a href="{{ route('student.enroll', ['lectureId' => $lecture->id]) }}" class="btn btn-primary btn-lg shadow-primary">
                                                    <i class="fas fa-user-plus"></i> {{ __('home.join_the_lecture') }}
                                                </a>
                                            @endif
                                        @else
                                            @if($enrollment->status == 'paid')
                                                <button class="btn btn-success btn-lg shadow-success" disabled>
                                                    <i class="fas fa-check-circle"></i> {{ __('home.congratulation_enrolled') }}
                                                </button>
                                            @elseif($enrollment->approval_status == 'approved')
                                                <a href="{{ route('student.payment', ['enrollmentId' => $enrollment->id]) }}" class="btn btn-warning btn-lg shadow-warning">
                                                    <i class="fas fa-credit-card"></i> {{ __('home.please_pay_to_continue') }}
                                                </a>
                                            @elseif($enrollment->approval_status == 'pending')
                                                <button class="btn btn-info btn-lg shadow-info" disabled>
                                                    <i class="fas fa-hourglass-half"></i> {{ __('home.enrollment_pending_approval') }}
                                                </button>
                                            @elseif($enrollment->approval_status == 'rejected')
                                                <a href="{{ route('student.enroll', ['lectureId' => $lecture->id]) }}" class="btn btn-primary btn-lg shadow-primary">
                                                    <i class="fas fa-user-plus"></i> {{ __('home.order_again_to_purchase') }}
                                                </a>
                                            @endif
                                        @endif
                                    @elseif(auth()->user()->role == 'teacher')
                                        <button class="btn btn-warning btn-lg shadow-warning" disabled>
                                            <i class="fas fa-exclamation-circle"></i> {{ __('home.not_available_for_account_type') }}
                                        </button>
                                        <small>{{ __('home.register_from_student_account') }}</small>
                                    @elseif(auth()->user()->role == 'admin')
                                        <button class="btn btn-danger btn-lg shadow-danger" disabled>
                                            <i class="fas fa-exclamation-circle"></i> {{ __('home.not_available_for_account_type') }}
                                        </button>
                                        <small>{{ __('home.register_from_student_account') }}</small>
                                    @endif
                                @else
                                    <a href="{{ route('login') }}" class="btn btn-secondary btn-lg shadow-secondary">
                                        <i class="fas fa-sign-in-alt"></i> {{ __('home.please_login_to_join') }}
                                    </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">{{ __('home.lecture_details') }}</h4>
                <p class="pb-4 mb-3">{{ $lecture->description }}</p>

                <h4 class="mb-4">{{ __('home.lesson_objectives') }}</h4>
                {!! $lecture->what_learn !!}
                @if(auth()->check() && auth()->user()->student && auth()->user()->student->hasPaidForLecture($lecture->id))
                    @if($lecture->files->isNotEmpty())
                        <div class="lecture-files mt-5">
                            <h4 class="mb-4">{{ __('home.lecture_files') }}</h4>
                            <div class="list-group">
                                @foreach($lecture->files as $file)
                                    <a href="#" class="list-group-item list-group-item-action"
                                       data-bs-toggle="modal" data-bs-target="#fileModal{{ $file->id }}">
                                        <i class="bx bx-file fs-xl me-2"></i> {{ $file->original_name }}
                                    </a>
                                @endforeach
                            </div>
                        </div>

                        @foreach($lecture->files as $file)
                            <div class="modal fade" id="fileModal{{ $file->id }}" tabindex="-1"
                                 aria-labelledby="fileModalLabel{{ $file->id }}" aria-hidden="true">
                                <div class="modal-dialog modal-xl">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="fileModalLabel{{ $file->id }}">
                                                {{ $file->original_name }}
                                            </h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="content-protector" 
                                                 style="position: absolute; top:0; left:0; width:100%; height:100%; z-index: 9999;"
                                                 oncontextmenu="return false;">
                                            </div>
                                            @if(str_contains($file->file_type, 'pdf'))
                                                <div style="width: 100%; height: 600px; position: relative;">
                                                    <iframe 
                                                        src="{{ route('private.file', ['file' => basename($file->file_path), 'lecture_id' => $lecture->id]) }}#toolbar=0&navpanes=0&download=0" 
                                                        style="width: 100%; height: 100%; pointer-events: auto;"
                                                        frameborder="0"
                                                        id="pdfIframe{{ $file->id }}"
                                                    ></iframe>
                                                </div>
                                            @elseif(str_contains($file->file_type, 'image'))
                                                <div class="image-container" style="position: relative;">
                                                    <img 
                                                        src="{{ route('private.file', ['file' => basename($file->file_path), 'lecture_id' => $lecture->id]) }}" 
                                                        style="max-width: 100%; height: auto; pointer-events: none;"
                                                        draggable="false"
                                                    >
                                                </div>
                                            @endif
                                        </div>
                                        <script>
                                            document.addEventListener('DOMContentLoaded', function() {
                                                document.addEventListener('contextmenu', function(e) {
                                                    e.preventDefault();
                                                    return false;
                                                });
                                                document.addEventListener('keydown', function(e) {
                                                    if ((e.ctrlKey || e.metaKey) && (e.key === 's' || e.key === 'p')) {
                                                        e.preventDefault();
                                                        alert('Saving or printing is not allowed');
                                                    }
                                                });
                                                const observer = new MutationObserver(function() {
                                                    document.querySelectorAll('iframe').forEach(iframe => {
                                                        try {
                                                            iframe.contentDocument.addEventListener('contextmenu', function(e) {
                                                                e.preventDefault();
                                                                return false;
                                                            });
                                                        } catch (error) {
                                                            console.log('CORS error');
                                                        }
                                                    });
                                                });
                                                observer.observe(document.body, {
                                                    childList: true,
                                                    subtree: true
                                                });
                                            });
                                        </script>
                                        <style>
                                            .content-protector {
                                                pointer-events: none;
                                            }
                                            iframe {
                                                pointer-events: auto !important;
                                            }
                                            .protected-image {
                                                -webkit-user-drag: none;
                                                user-select: none;
                                            }
                                        </style>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                @endif

                <script>
                    document.addEventListener('contextmenu', function(e) {
                        e.preventDefault();
                    });
                    document.addEventListener('keydown', function(e) {
                        if (e.ctrlKey && (e.key === 's' || e.key === 'p' || e.key === 'S' || e.key === 'P')) {
                            e.preventDefault();
                        }
                    });
                </script>
                
                @if(auth()->check() && auth()->user()->student && auth()->user()->student->hasPaidForLecture($lecture->id))
                    <h5 class="mb-4 mt-4">
                        {{ __('home.zoom_link') }} ({{ __('home.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)
                            {!! nl2br(preg_replace('/(https?:\/\/[^\s]+)/', '<a href="$1" target="_blank">$1</a>', e($lecture->lecture_zoom))) !!}
                        @else
                            <div class="alert alert-warning" role="alert">
                                {{ __('home.zoom_link_not_provided') }}
                            </div>
                        @endif
                    @elseif (\Carbon\Carbon::now()->greaterThanOrEqualTo($endTime))
                        @if ($lecture->lecture_video)
                            <div class="alert alert-info" role="alert">
                                {{ __('home.lecture_has_ended') }}
                            </div>
                            <div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url({{ asset('public/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">{{ __('home.click_to_watch_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">{{ __('home.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('public/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">
                                {{ __('home.lecture_video_not_uploaded') }}
                            </div>
                        @endif
                    @else
                        <div class="alert alert-info" role="alert">
                            {{ __('home.lecture_has_not_started') }}
                        </div>
                    @endif
                @else
                    <div class="alert alert-warning" role="alert" style="text-align: center; margin-top: 20px;">
                        {{ __('home.need_to_purchase_session') }}
                    </div>
                @endif
            </div>
        </div>
    </section>
@endsection