@extends('student.layouts.app')

@section('styles')
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />

@endsection

@section('title', __('dashboard.Materials') )



@section('content')
    @php
        $isArabic = app()->getLocale() === 'ar';
        $mediaType = determineFileType($material->type);
        $supportsResume = in_array($mediaType, ['video', 'audio'], true);
        $typeLabels = [
            'image' => $isArabic ? 'صورة تعليمية' : 'Image',
            'video' => $isArabic ? 'فيديو' : 'Video',
            'audio' => $isArabic ? 'ملف صوتي' : 'Audio',
            'pdf' => $isArabic ? 'ملف PDF' : 'PDF',
            'file' => $isArabic ? 'ملف' : 'File',
        ];
        $materialTypeLabel = $typeLabels[$mediaType] ?? ($isArabic ? 'محتوى تعليمي' : 'Learning content');
        $materialDescription = filled($material->description)
            ? $material->description
            : ($isArabic ? 'تم تجهيز هذه المادة ضمن المقرر لتكمل متابعة الدرس الحالي.' : 'This material is available as part of the current lesson.');
        $currentMaterialIndex = $courseMaterials->search(fn ($item) => (int) $item->id === (int) $material->id);
        $previousMaterial = $currentMaterialIndex !== false && $currentMaterialIndex > 0 ? $courseMaterials[$currentMaterialIndex - 1] : null;
        $nextMaterial = $currentMaterialIndex !== false && $currentMaterialIndex < ($courseMaterials->count() - 1) ? $courseMaterials[$currentMaterialIndex + 1] : null;
        $currentPosition = $currentMaterialIndex !== false ? $currentMaterialIndex + 1 : 1;
        $materialCount = $courseMaterials->count();
        $downloadUrl = \Illuminate\Support\Facades\Storage::url($material->material);
    @endphp

    <div class="space-y-6">
        @include('student.courses.inc.overview', ['course' => $course])
        @include('student.courses.inc.tabs', ['course' => $course])

        <section class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_22rem]">
            <div class="overflow-hidden rounded-[2rem] border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
                <div class="border-b border-zinc-200 px-6 py-6 dark:border-zinc-800 sm:px-8">
                    <div class="flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between">
                        <div class="min-w-0 space-y-4">
                            <div class="flex flex-wrap items-center gap-2 text-xs font-black">
                                <a href="{{ route('student.courses.materials.index', $course->id) }}" class="rounded-full bg-zinc-100 px-3 py-2 text-zinc-600 text-decoration-none transition hover:bg-primary-light hover:text-primary dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-primary/10 dark:hover:text-primary-container">
                                    {{ $isArabic ? 'المواد التعليمية' : 'Materials' }}
                                </a>
                                <span class="rounded-full bg-primary-light px-3 py-2 text-primary dark:bg-primary/10 dark:text-primary-container">{{ $materialTypeLabel }}</span>
                                <span class="rounded-full bg-zinc-100 px-3 py-2 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-300 font-numbers">
                                    {{ $isArabic ? 'المادة' : 'Item' }} {{ $currentPosition }}/{{ max($materialCount, 1) }}
                                </span>
                            </div>

                            <div class="space-y-3">
                                <h2 class="text-2xl font-black tracking-tight text-zinc-900 dark:text-white sm:text-3xl">{{ $material->title }}</h2>
                                <p class="max-w-3xl text-sm leading-7 text-zinc-500 dark:text-zinc-400">{{ $materialDescription }}</p>
                            </div>
                        </div>

                        <a href="{{ $downloadUrl }}" download class="inline-flex items-center justify-center gap-2 self-start rounded-2xl bg-primary px-4 py-3 text-sm font-black text-white text-decoration-none transition hover:bg-primary-dark">
                            <i class="fa-solid fa-download text-xs"></i>
                            <span>{{ $isArabic ? 'تنزيل المادة' : 'Download material' }}</span>
                        </a>
                    </div>

                    <div class="mt-5 flex flex-wrap items-center gap-3 text-sm font-semibold text-zinc-500 dark:text-zinc-400">
                        @if ($material->lesson?->title)
                            <span class="inline-flex items-center gap-2 rounded-full bg-zinc-100 px-4 py-2 dark:bg-zinc-800">
                                <i class="fa-solid fa-layer-group text-[11px]"></i>
                                <span>{{ $material->lesson->title }}</span>
                            </span>
                        @endif
                        @if ($course->teacher?->name)
                            <span class="inline-flex items-center gap-2 rounded-full bg-zinc-100 px-4 py-2 dark:bg-zinc-800">
                                <i class="fa-solid fa-user-tie text-[11px]"></i>
                                <span>{{ $course->teacher->name }}</span>
                            </span>
                        @endif
                        <span class="inline-flex items-center gap-2 rounded-full bg-zinc-100 px-4 py-2 dark:bg-zinc-800 font-numbers">
                            <i class="fa-solid fa-clock text-[11px]"></i>
                            <span>{{ $material->created_at?->diffForHumans() }}</span>
                        </span>
                    </div>
                </div>

                <div class="space-y-4 p-4 sm:p-6">
                    <div class="overflow-hidden rounded-[1.75rem] bg-zinc-950 p-2 shadow-[0_26px_60px_-36px_rgba(15,23,42,0.85)]">
                        @switch($mediaType)
                            @case('image')
                                @include('student.courses.inc.course-images', ['material' => $material])
                                @break

                            @case('video')
                                @include('student.courses.inc.course-video', ['material' => $material])
                                <div class="px-2 pb-2 space-y-2">
                                    <div class="flex items-center justify-between text-xs font-semibold text-zinc-400 dark:text-zinc-500 px-1">
                                        <span>{{ $isArabic ? 'نسبة المشاهدة' : 'Watch progress' }}</span>
                                        <span id="progress-label">0%</span>
                                    </div>
                                    <div class="h-2 w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700">
                                        <div id="watch-progress-bar" class="h-full rounded-full bg-primary transition-all duration-500" style="width:0%"></div>
                                    </div>
                                    <div class="rounded-2xl bg-primary/10 px-4 py-3 text-sm font-semibold text-primary dark:text-primary-container">
                                        {{ $isArabic ? 'سيتم استئناف المشاهدة تلقائياً من آخر نقطة وصلت إليها.' : 'Playback will automatically resume from your last saved position.' }}
                                    </div>
                                </div>
                                @break

                            @case('audio')
                                <div class="bg-white p-4 dark:bg-zinc-900">
                                    @include('student.courses.inc.course-audio', ['material' => $material])
                                </div>
                                <div class="px-2 pb-2">
                                    <div class="rounded-2xl bg-primary/10 px-4 py-3 text-sm font-semibold text-primary dark:text-primary-container">
                                        {{ $isArabic ? 'سيتم استئناف الاستماع تلقائياً من آخر نقطة وصلت إليها.' : 'Playback will automatically resume from your last saved position.' }}
                                    </div>
                                </div>
                                @break

                            @case('pdf')
                                <div class="bg-white p-2 dark:bg-zinc-900">
                                    @include('student.courses.inc.course-file-view', ['material' => $material])
                                </div>
                                @break

                            @default
                                <div class="bg-white p-4 dark:bg-zinc-900">
                                    @include('student.courses.inc.course-text', ['material' => $material])
                                </div>
                        @endswitch
                    </div>

                    <div class="flex flex-col gap-3 border-t border-zinc-200 pt-4 dark:border-zinc-800 sm:flex-row sm:items-center sm:justify-between">
                        <a href="{{ route('student.courses.materials.index', $course->id) }}" class="inline-flex items-center gap-2 text-sm font-black text-zinc-600 text-decoration-none transition hover:text-primary dark:text-zinc-300 dark:hover:text-primary-container">
                            <i class="fa-solid {{ $isArabic ? 'fa-arrow-right' : 'fa-arrow-left' }} text-xs"></i>
                            <span>{{ $isArabic ? 'العودة إلى جميع المواد' : 'Back to all materials' }}</span>
                        </a>

                        <div class="flex flex-wrap items-center gap-3">
                            @if ($previousMaterial)
                                <a href="{{ route('student.courses.materials.show', $previousMaterial->id) }}" class="inline-flex items-center gap-2 rounded-2xl border border-zinc-200 px-4 py-3 text-sm font-black text-zinc-700 text-decoration-none transition hover:border-primary/30 hover:text-primary dark:border-zinc-700 dark:text-zinc-200 dark:hover:border-primary/30 dark:hover:text-primary-container">
                                    <i class="fa-solid {{ $isArabic ? 'fa-arrow-right' : 'fa-arrow-left' }} text-xs"></i>
                                    <span>{{ $isArabic ? 'المادة السابقة' : 'Previous material' }}</span>
                                </a>
                            @endif

                            @if ($nextMaterial)
                                <a href="{{ route('student.courses.materials.show', $nextMaterial->id) }}" class="inline-flex items-center gap-2 rounded-2xl bg-zinc-900 px-4 py-3 text-sm font-black text-white text-decoration-none transition hover:bg-primary dark:bg-white dark:text-zinc-900 dark:hover:bg-primary-container">
                                    <span>{{ $isArabic ? 'المادة التالية' : 'Next material' }}</span>
                                    <i class="fa-solid {{ $isArabic ? 'fa-arrow-left' : 'fa-arrow-right' }} text-xs"></i>
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <aside class="space-y-4 xl:sticky xl:top-24 xl:self-start">
                <section class="rounded-[2rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
                    <div class="flex items-start justify-between gap-3">
                        <div>
                            <h3 class="text-base font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'في هذا الدرس' : 'Inside this lesson' }}</h3>
                            <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'راجع مكانك الحالي وانتقل بسرعة لباقي المواد.' : 'See your current position and move quickly across the lesson.' }}</p>
                        </div>
                        <span class="inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-primary-light text-primary dark:bg-primary/10 dark:text-primary-container">
                            <i class="fa-solid fa-compass"></i>
                        </span>
                    </div>

                    <div class="mt-5 space-y-3">
                        @foreach ($courseMaterials as $item)
                            @php
                                $itemIsActive = (int) $item->id === (int) $material->id;
                            @endphp
                            <a href="{{ route('student.courses.materials.show', $item->id) }}" class="block rounded-[1.5rem] border px-4 py-4 text-decoration-none transition {{ $itemIsActive ? 'border-primary bg-primary-light/40 shadow-[0_16px_35px_-28px_rgba(9,91,236,0.9)] dark:border-primary/40 dark:bg-primary/10' : 'border-zinc-200 bg-zinc-50 hover:border-primary/30 hover:bg-white dark:border-zinc-800 dark:bg-zinc-950 dark:hover:border-primary/30 dark:hover:bg-zinc-900' }}">
                                <div class="flex items-start gap-3">
                                    <span class="mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-2xl {{ $itemIsActive ? 'bg-white text-primary dark:bg-zinc-900 dark:text-primary-container' : 'bg-white text-zinc-500 dark:bg-zinc-900 dark:text-zinc-300' }} font-numbers text-xs font-black">
                                        {{ $loop->iteration }}
                                    </span>
                                    <div class="min-w-0">
                                        <div class="truncate text-sm font-black {{ $itemIsActive ? 'text-primary dark:text-primary-container' : 'text-zinc-900 dark:text-white' }}">{{ $item->title }}</div>
                                        <div class="mt-1 truncate text-xs font-semibold {{ $itemIsActive ? 'text-primary/75 dark:text-primary-container/80' : 'text-zinc-500 dark:text-zinc-400' }}">
                                            {{ $item->lesson?->title ?: ($isArabic ? 'بدون درس محدد' : 'No lesson assigned') }}
                                        </div>
                                    </div>
                                </div>
                            </a>
                        @endforeach
                    </div>
                </section>
            </aside>
        </section>
    </div>


@endsection

@section('scripts')
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
@if ($supportsResume)
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const mediaElement = document.getElementById('player');

        if (!mediaElement) {
            return;
        }

        new Plyr(mediaElement);

        const materialId = @js($material->id);
        const progressUrl = @js(route('student.getProgress', $material->id));
        const saveUrl = @js(route('student.saveProgress'));
        const completeUrl = @js(route('student.markLessonComplete', $material->id));
        const csrfToken = @js(csrf_token());
        const isArabic = @js(app()->getLocale() === 'ar');
        const resumeThresholdSeconds = 5;
        let watchedSeconds = 0;
        let lastKnownTime = 0;
        let lastSavedSecond = -1;
        let restoredFromHistory = false;
        let saveTimeoutId = null;
        let completionFired = false;

        const progressBar = document.getElementById('watch-progress-bar');
        const progressLabel = document.getElementById('progress-label');

        const updateProgressUI = (percentage) => {
            if (!progressBar) return;
            const pct = Math.min(100, Math.max(0, percentage));
            progressBar.style.width = pct + '%';
            if (progressLabel) progressLabel.textContent = Math.round(pct) + '%';
        };

        const saveProgress = (force) => {
            const duration = Number.isFinite(mediaElement.duration) ? mediaElement.duration : 0;
            const currentTime = Number.isFinite(mediaElement.currentTime) ? mediaElement.currentTime : 0;
            const roundedCurrentSecond = Math.floor(currentTime);

            if (!force && (duration <= 0 || roundedCurrentSecond === lastSavedSecond)) {
                return;
            }

            lastSavedSecond = roundedCurrentSecond;

            const progressPercentage = duration > 0 ? Math.min(100, (currentTime / duration) * 100) : 0;
            updateProgressUI(progressPercentage);

            if (!completionFired && progressPercentage >= 90) {
                completionFired = true;
                fetch(completeUrl, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken },
                    body: JSON.stringify({ material_id: materialId }),
                }).catch(() => {});

                const toast = document.createElement('div');
                toast.textContent = isArabic ? '🎉 أكملت المادة!' : '🎉 Material completed!';
                toast.className = 'fixed bottom-6 left-1/2 -translate-x-1/2 z-50 rounded-2xl bg-primary px-6 py-3 text-sm font-black text-white shadow-lg transition-opacity duration-500';
                document.body.appendChild(toast);
                setTimeout(() => { toast.style.opacity = '0'; setTimeout(() => toast.remove(), 500); }, 3000);
            }

            fetch(saveUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                },
                body: JSON.stringify({
                    material_id: materialId,
                    current_time: currentTime,
                    watch_time: watchedSeconds,
                    media_duration: duration,
                }),
                keepalive: force,
            }).catch(() => {});
        };

        const scheduleSave = () => {
            clearTimeout(saveTimeoutId);
            saveTimeoutId = window.setTimeout(() => saveProgress(false), 400);
        };

        fetch(progressUrl, {
            headers: {
                'Accept': 'application/json',
            },
        })
            .then((response) => response.ok ? response.json() : null)
            .then((payload) => {
                const progress = payload?.progress;
                const resumeTime = Number(progress?.current_time || 0);
                watchedSeconds = Number(progress?.watch_time || 0);
                lastKnownTime = resumeTime;

                if (progress?.progress_percentage) {
                    updateProgressUI(progress.progress_percentage);
                    if (progress.progress_percentage >= 90) completionFired = true;
                }

                if (resumeTime < resumeThresholdSeconds) {
                    return;
                }

                const restoreTime = () => {
                    const duration = Number.isFinite(mediaElement.duration) ? mediaElement.duration : 0;

                    if (restoredFromHistory || duration <= 0) {
                        return;
                    }

                    mediaElement.currentTime = Math.min(resumeTime, Math.max(duration - 2, 0));
                    restoredFromHistory = true;
                };

                if (mediaElement.readyState >= 1) {
                    restoreTime();
                } else {
                    mediaElement.addEventListener('loadedmetadata', restoreTime, { once: true });
                }
            })
            .catch(() => {});

        mediaElement.addEventListener('timeupdate', () => {
            const currentTime = Number.isFinite(mediaElement.currentTime) ? mediaElement.currentTime : 0;
            const progressed = Math.max(0, currentTime - lastKnownTime);

            if (progressed <= 2) {
                watchedSeconds += progressed;
            }

            lastKnownTime = currentTime;

            if (Math.floor(currentTime) % 10 === 0) {
                scheduleSave();
            }
        });

        mediaElement.addEventListener('pause', () => saveProgress(false));
        mediaElement.addEventListener('ended', () => saveProgress(true));
        window.addEventListener('beforeunload', () => saveProgress(true));
        document.addEventListener('visibilitychange', () => {
            if (document.visibilityState === 'hidden') {
                saveProgress(true);
            }
        });
    });
</script>
@else
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const playerElement = document.getElementById('player');

        if (playerElement) {
            new Plyr(playerElement);
        }
    });
</script>
@endif


@endsection