@extends('layouts.app')

@section('content')
<div class="space-y-6">
    <div>
        <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Diário de Classe</h1>
        <p class="text-sm text-gray-600 dark:text-gray-400">Selecione uma turma para lançar frequência, conteúdo e avaliações.</p>
    </div>

    <x-common.component-card title="Turmas">
        <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
            @foreach ($classrooms as $classroom)
                <div class="rounded-xl border border-gray-200 bg-white p-4 shadow-theme-xs dark:border-gray-800 dark:bg-white/[0.03]">
                    <h3 class="text-base font-semibold text-gray-900 dark:text-white">{{ $classroom->name }}</h3>
                    <p class="text-sm text-gray-500">{{ $classroom->school?->name ?? '-' }} · {{ $classroom->stage?->name ?? 'Etapa não definida' }}</p>
                    <div class="mt-4 flex flex-wrap gap-2">
                        <a href="{{ route('diario.frequencia', $classroom) }}" class="rounded-lg border border-gray-200 px-3 py-1 text-xs text-gray-700 dark:border-gray-800 dark:text-gray-300">Frequência</a>
                        <a href="{{ route('diario.conteudo', $classroom) }}" class="rounded-lg border border-gray-200 px-3 py-1 text-xs text-gray-700 dark:border-gray-800 dark:text-gray-300">Conteúdo</a>
                        <a href="{{ route('diario.avaliacoes', $classroom) }}" class="rounded-lg border border-gray-200 px-3 py-1 text-xs text-gray-700 dark:border-gray-800 dark:text-gray-300">Avaliações</a>
                        <a href="{{ route('diario.pareceres', $classroom) }}" class="rounded-lg border border-gray-200 px-3 py-1 text-xs text-gray-700 dark:border-gray-800 dark:text-gray-300">Pareceres</a>
                        <button type="button" data-live="{{ $classroom->id }}" class="rounded-lg border border-brand-200 px-3 py-1 text-xs text-brand-600">Iniciar Aula ao Vivo</button>
                    </div>
                </div>
            @endforeach
        </div>
    </x-common.component-card>
</div>

<div id="liveModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 p-4">
    <div class="w-full max-w-4xl rounded-xl bg-white p-4 shadow-lg">
        <div class="mb-3 flex items-center justify-between">
            <h3 class="text-lg font-semibold text-gray-900">Aula ao vivo</h3>
            <button id="closeLiveModal" class="rounded-lg border border-gray-200 px-3 py-1 text-xs text-gray-600">Fechar</button>
        </div>
        <iframe id="liveFrame" src="" class="h-[420px] w-full rounded-lg border border-gray-200"></iframe>
    </div>
</div>

<script>
    const liveModal = document.getElementById('liveModal');
    const liveFrame = document.getElementById('liveFrame');
    const closeLiveModal = document.getElementById('closeLiveModal');
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    document.querySelectorAll('[data-live]').forEach(button => {
        button.addEventListener('click', () => {
            const classroomId = button.dataset.live;
            fetch(`{{ url('/diario/turmas') }}/${classroomId}/ao-vivo`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json',
                },
            }).then(resp => resp.json()).then(data => {
                liveFrame.src = data.url;
                liveModal.classList.remove('hidden');
                liveModal.classList.add('flex');
            });
        });
    });

    closeLiveModal.addEventListener('click', () => {
        liveFrame.src = '';
        liveModal.classList.add('hidden');
        liveModal.classList.remove('flex');
    });
</script>
@endsection