@extends('frontend.maintemplate.maintemplate')

@section('title', 'Chapter Details' . ' :: AgeLess Institute')

@section('content')

<div class="chapter-theory-section-wrapper">
    <div class="container-fluid">
        <div class="chapter-theory-inner">
            <div class="top-title-and-link-wrapper">
                <h2>{{ $currentChapter->title }}</h2>
                <div class="link-wrapper">
                    <a href="javascript:void(0);" onclick="history.back();">Go Back to Course</a>

                </div>
            </div>
            
            @if ($currentChapter->video)
                <!-- Display the video content if the video URL exists -->
                <div class="video-content-wrapper">
                    <div class="video-content-inner">
                        <a href="{{ asset('storage/' . $currentChapter->video) }}" data-fancybox="video-content">
                        
                            <img src="{{ asset('storage/' . $currentChapter->images) }}" alt="">
                            <span class="material-symbols-outlined">
                                play_arrow
                            </span>
                        </a>
                    </div>
                    {{-- <div class="previous-next-wrapper">
                        <a href="{{ route('student.course-details.index', ['id' => $chapterId, 'document_id' => $previousChapter->id]) }}">Previous</a>
                        <a href="{{ route('student.course-details.index', ['id' => $chapterId, 'document_id' => $nextChapter->id]) }}">Next</a>
                    </div> --}}
                </div>
            @else
                <!-- Show the description if no video is available -->
                <div class="paragraph-content">
                   <p>{!! $currentChapter->descriptions !!}</p>
                </div>
               
            @endif

            <!-- Show Download PDF Button if PDF is available -->
            @if ($currentChapter->pdf)
            <div class="top-title-and-link-wrapper" style="float: inline-end;">
                <div class="link-wrapper">
                    <a href="{{ asset('storage/' . $currentChapter->pdf) }}"  download>
                        Download PDF
                    </a>
                </div>
            </div>
            @endif

            
              
            <div class="start-exam">
                <form id="start-exam-form" action="{{ route('student.exam.store') }}" method="POST" style="display:none;">
                    @csrf
                    <input type="hidden" name="student_id" value="{{ Auth::id() }}">
                    <input type="hidden" name="course_id" value="{{ $courseId }}">
                    <input type="hidden" name="chapter_id" value="{{ $chapterId }}">
                </form>
                <a href="javascript:void(0);" onclick="document.getElementById('start-exam-form').submit();" class="btn btn-link">Start Exam</a>
            </div>
            

            <div class="previour-next-wrapper">
                @if ($previousChapter)
                    <a href="{{ route('student.course-details.index', ['id' => $chapterId, 'document_id' => $previousChapter->id]) }}">
                        <span class="material-symbols-outlined">chevron_left</span> 
                        Previous Topic - {{ $previousChapter->title }}
                    </a>
                @else
                    <a href="#"><span class="material-symbols-outlined">chevron_left</span> Previous Topic</a>
                @endif

                @if ($nextChapter)
                    <a href="{{ route('student.course-details.index', ['id' => $chapterId, 'document_id' => $nextChapter->id]) }}" class="active">
                        Next Topic - {{ $nextChapter->title }} 
                        <span class="material-symbols-outlined">chevron_right</span>
                    </a>
                @else
                    <a href="#">No Topics <span class="material-symbols-outlined">chevron_right</span></a>
                @endif
            </div>
        </div>
    </div>
</div>

@endsection