@extends('layouts.dashboard')

@section('title', __('lms.learning_session'))
@section('eyebrow', __('lms.college'))

@section('content')
@php
    $percent = (int) ($progress->progress_percent ?? 0);
@endphp

<div class="space-y-6">
    <section class="rounded-lg bg-slate-950 p-5 text-white shadow-sm">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
            <div>
                <div class="flex flex-wrap gap-2">
                    <x-status-badge :status="$progress->status" />
                    <span class="rounded-full bg-white/10 px-2.5 py-1 text-xs font-black text-slate-200">{{ $material->swimmingClass?->class_name }}</span>
                </div>
                <h2 class="mt-4 text-2xl font-black sm:text-3xl">{{ $material->title }}</h2>
                <p class="mt-3 max-w-3xl text-sm leading-6 text-slate-300">{{ $material->description }}</p>
            </div>
            <div class="min-w-52 rounded-lg bg-white/10 p-4">
                <div class="flex items-center justify-between gap-3 text-xs font-black text-slate-200">
                    <span>{{ __('lms.watch_progress') }}</span>
                    <span id="progressValue">{{ $percent }}%</span>
                </div>
                <div class="mt-3 h-3 overflow-hidden rounded-full bg-white/15">
                    <div id="progressBar" class="h-full rounded-full bg-sky-400" style="width: {{ $percent }}%"></div>
                </div>
            </div>
        </div>
    </section>

    <section class="grid gap-6 lg:grid-cols-[1.25fr_.75fr]">
        <div class="space-y-4">
            <div class="overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
                <div class="border-b border-slate-200 px-5 py-4">
                    <h3 class="font-black text-slate-950">{{ __('lms.video_learning') }}</h3>
                </div>
                <div class="bg-slate-950">
                    @if($isVideoFile)
                        <video id="learningVideo" class="aspect-video w-full bg-black" controls preload="metadata">
                            <source src="{{ asset('storage/'.$material->file_path) }}">
                        </video>
                    @elseif($embedUrl)
                        <iframe class="aspect-video w-full" src="{{ $embedUrl }}" title="{{ $material->title }}" allowfullscreen></iframe>
                    @else
                        <div class="grid aspect-video place-items-center p-8 text-center text-white">
                            <div>
                                <i data-lucide="file-text" class="mx-auto h-12 w-12 text-sky-300"></i>
                                <p class="mt-3 font-black">{{ $material->title }}</p>
                                <p class="mt-2 text-sm text-slate-300">{{ $material->description }}</p>
                            </div>
                        </div>
                    @endif
                </div>
                <div class="flex flex-wrap gap-2 p-4">
                    @if($material->file_path)
                        <a href="{{ asset('storage/'.$material->file_path) }}" target="_blank" class="inline-flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm font-black text-slate-700 hover:border-sky-300 hover:text-sky-700">
                            <i data-lucide="download" class="h-4 w-4"></i>
                            {{ __('app.actions.download') }}
                        </a>
                    @endif
                    @foreach([25, 50, 75, 100] as $mark)
                        <button type="button" data-progress-mark="{{ $mark }}" class="rounded-lg bg-slate-100 px-3 py-2 text-sm font-black text-slate-700 hover:bg-sky-100 hover:text-sky-700">
                            {{ __('lms.mark_progress') }} {{ $mark }}%
                        </button>
                    @endforeach
                </div>
            </div>

            <div class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
                <h3 class="font-black text-slate-950">{{ __('lms.ask_question') }}</h3>
                <form method="POST" action="{{ route('user.lms.materials.questions', $material) }}" class="mt-4 grid gap-3">
                    @csrf
                    <textarea name="question" rows="4" class="rounded-lg border border-slate-300 px-3 py-2 text-sm" placeholder="{{ __('lms.question_placeholder') }}" required>{{ old('question') }}</textarea>
                    <button class="inline-flex items-center justify-center gap-2 rounded-lg bg-sky-700 px-4 py-2.5 text-sm font-black text-white hover:bg-slate-950 sm:w-max">
                        <i data-lucide="send" class="h-4 w-4"></i>
                        {{ __('lms.send_question') }}
                    </button>
                </form>
            </div>
        </div>

        <aside class="space-y-4">
            <div class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
                <h3 class="font-black text-slate-950">{{ __('lms.learned_progress') }}</h3>
                <div class="mt-4 grid gap-3">
                    <div class="rounded-lg bg-slate-50 p-4">
                        <p class="text-3xl font-black text-slate-950" id="progressNumber">{{ $percent }}%</p>
                        <p class="mt-1 text-sm font-bold text-slate-500">{{ __('lms.watch_progress') }}</p>
                    </div>
                    <x-status-badge :status="$progress->status" />
                </div>
            </div>

            <div class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
                <div class="flex items-center justify-between gap-3">
                    <h3 class="font-black text-slate-950">{{ __('lms.questions') }}</h3>
                    <span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-black text-slate-600">{{ $questions->count() }}</span>
                </div>
                <div class="mt-4 grid gap-3">
                    @forelse($questions as $question)
                        <article id="question-{{ $question->id }}" class="rounded-lg border border-slate-200 p-4">
                            <div class="flex flex-wrap items-center justify-between gap-2">
                                <p class="text-sm font-black text-slate-950">{{ $question->user?->name }}</p>
                                <x-status-badge :status="$question->status" />
                            </div>
                            <p class="mt-3 text-sm leading-6 text-slate-600">{{ $question->question }}</p>
                            @if($question->answer)
                                <div class="mt-3 rounded-lg bg-emerald-50 p-3">
                                    <p class="text-xs font-black text-emerald-800">{{ $question->answerer?->name }}</p>
                                    <p class="mt-1 text-sm leading-6 text-emerald-700">{{ $question->answer }}</p>
                                </div>
                            @endif
                        </article>
                    @empty
                        <p class="rounded-lg border border-dashed border-slate-300 p-4 text-sm text-slate-500">{{ __('lms.questions') }} belum tersedia.</p>
                    @endforelse
                </div>
            </div>
        </aside>
    </section>
</div>

<script>
const progressUrl = @json(route('user.lms.materials.progress', $material));
const csrfToken = @json(csrf_token());
const progressBar = document.getElementById('progressBar');
const progressValue = document.getElementById('progressValue');
const progressNumber = document.getElementById('progressNumber');
const video = document.getElementById('learningVideo');
let lastSync = 0;

function renderProgress(percent) {
    const safePercent = Math.max(0, Math.min(100, Math.round(percent)));
    if (progressBar) progressBar.style.width = `${safePercent}%`;
    if (progressValue) progressValue.textContent = `${safePercent}%`;
    if (progressNumber) progressNumber.textContent = `${safePercent}%`;
}

async function syncProgress(payload) {
    const response = await fetch(progressUrl, {
        method: 'PATCH',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': csrfToken,
        },
        body: JSON.stringify(payload),
    });

    if (!response.ok) return;

    const data = await response.json();
    renderProgress(data.progress_percent || 0);
}

video?.addEventListener('timeupdate', () => {
    const now = Date.now();
    if (now - lastSync < 8000 || !video.duration) return;
    lastSync = now;

    syncProgress({
        watched_seconds: video.currentTime,
        duration_seconds: video.duration,
        completed: false,
    });
});

video?.addEventListener('ended', () => {
    syncProgress({
        watched_seconds: video.duration || video.currentTime,
        duration_seconds: video.duration || video.currentTime,
        completed: true,
    });
});

document.querySelectorAll('[data-progress-mark]').forEach((button) => {
    button.addEventListener('click', () => {
        const percent = Number(button.dataset.progressMark || 0);
        renderProgress(percent);
        syncProgress({
            progress_percent: percent,
            completed: percent >= 100,
        });
    });
});
</script>
@endsection