@extends('layouts.app')

@section('content')
<div class="space-y-6">
    <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
        <div>
            <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Minhas aulas online</h1>
            <p class="text-sm text-gray-600 dark:text-gray-400">{{ $portalTitle }}</p>
        </div>
    </div>

    <x-common.component-card title="Aulas disponíveis">
        <div class="space-y-3">
            @forelse ($classes as $class)
                @php
                    $now = now();
                    $isLive = $class->type === 'live' && $class->starts_at && $class->starts_at <= $now && (!$class->expires_at || $class->expires_at >= $now);
                    $isExpired = $class->expires_at && $class->expires_at < $now;
                    $statusLabel = $isLive ? 'Ao vivo agora' : ($isExpired ? 'Expirada' : 'Disponível');
                    $statusClass = $isLive ? 'bg-success-50 text-success-700' : ($isExpired ? 'bg-gray-100 text-gray-600' : 'bg-blue-light-50 text-blue-light-700');
                @endphp
                <div class="rounded-xl border border-gray-200 bg-white p-4 shadow-theme-xs">
                    <div class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
                        <div>
                            <h3 class="text-base font-semibold text-gray-900">{{ $class->title }}</h3>
                            <p class="text-xs text-gray-500">{{ $class->type === 'live' ? 'Live' : 'Gravada' }} · {{ $class->discipline?->name ?? 'Geral' }}</p>
                            <p class="text-xs text-gray-400">Início: {{ $class->starts_at?->format('d/m/Y H:i') ?? '-' }} · Expira: {{ $class->expires_at?->format('d/m/Y H:i') ?? '-' }}</p>
                            @if ($class->description)
                                <p class="mt-2 text-sm text-gray-600">{{ $class->description }}</p>
                            @endif
                        </div>
                        <span class="rounded-full px-2 py-1 text-xs font-medium {{ $statusClass }}">{{ $statusLabel }}</span>
                        <div class="flex gap-2">
                            <a href="{{ route(str_contains(request()->path(), 'portal-aluno') ? 'portal.aluno.aulas.acessar' : 'portal.aulas.acessar', $class) }}?student_id={{ $studentId }}" target="_blank" class="rounded-lg bg-brand-500 px-4 py-2 text-sm font-medium text-white">
                                Assistir
                            </a>
                        </div>
                    </div>
                </div>
            @empty
                <div class="rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-600">
                    Nenhuma aula disponível no momento.
                </div>
            @endforelse
        </div>
    </x-common.component-card>
</div>
@endsection