@extends('layouts.app')

@section('content')
<div class="space-y-6">
    <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
        <div>
            <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">{{ $portalTitle ?? 'Portal' }}</h1>
            <p class="text-sm text-gray-600 dark:text-gray-400">Acompanhe o desempenho e avisos da escola.</p>
        </div>
        <a href="{{ $portalLogoutRoute ?? route('portal.logout') }}" class="inline-flex items-center gap-2 rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700">Sair</a>
    </div>

    @php
        $portalPrefix = (auth()->user()->role ?? '') === 'aluno' ? 'portal.aluno.' : 'portal.';
    @endphp
    <div class="flex flex-wrap gap-2">
        <a href="{{ route($portalPrefix . 'boletins') }}" class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700">Boletins</a>
        <a href="{{ route($portalPrefix . 'frequencia') }}" class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700">Frequência</a>
        <a href="{{ route($portalPrefix . 'historico') }}" class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700">Histórico</a>
        <a href="{{ route($portalPrefix . 'avisos') }}" class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700">Avisos</a>
    </div>

    @if ($students->isEmpty())
        <x-common.component-card title="Sem vínculos">
            <p class="text-sm text-gray-600">Nenhum aluno vinculado a este responsável.</p>
        </x-common.component-card>
    @else
        <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
            @foreach ($students as $student)
                @php
                    $data = $summary[$student->id] ?? [];
                @endphp
                <x-common.component-card title="{{ $student->name }}">
                    <div class="space-y-3">
                        <div class="text-sm text-gray-600">
                            <span class="font-medium">Escola:</span> {{ $student->school?->name ?? '-' }}
                        </div>
                        <div class="text-sm text-gray-600">
                            <span class="font-medium">Turma:</span> {{ $student->classroom?->name ?? '-' }}
                        </div>
                        <div class="grid grid-cols-2 gap-3">
                            <div class="rounded-lg border border-gray-100 p-3">
                                <p class="text-xs text-gray-500">Frequência (mês)</p>
                                <p class="text-lg font-semibold text-gray-900">{{ $data['attendance_rate'] ?? '-' }}%</p>
                            </div>
                            <div class="rounded-lg border border-gray-100 p-3">
                                <p class="text-xs text-gray-500">Registros</p>
                                <p class="text-lg font-semibold text-gray-900">{{ $data['attendance_total'] ?? 0 }}</p>
                            </div>
                        </div>
                        <div>
                            <p class="mb-2 text-xs font-medium text-gray-500">Últimas avaliações</p>
                            <ul class="space-y-2 text-sm text-gray-600">
                                @forelse ($data['assessments'] ?? [] as $assessment)
                                    <li class="flex justify-between rounded-lg border border-gray-100 px-3 py-2">
                                        <span>{{ $assessment->title ?? 'Avaliação' }} ({{ $assessment->discipline?->name ?? '-' }})</span>
                                        <span class="font-medium">{{ $assessment->score }}/{{ $assessment->max_score }}</span>
                                    </li>
                                @empty
                                    <li class="rounded-lg border border-gray-100 px-3 py-2 text-sm text-gray-500">Sem avaliações registradas.</li>
                                @endforelse
                            </ul>
                        </div>
                    </div>
                </x-common.component-card>
            @endforeach
        </div>
    @endif

    <x-common.component-card title="Comunicados recentes">
        <ul class="space-y-3 text-sm text-gray-600">
            @forelse ($notices as $notice)
                <li class="rounded-lg border border-gray-100 px-4 py-3">
                    <p class="font-medium text-gray-800">{{ $notice->title }}</p>
                    <p class="text-xs text-gray-500">{{ $notice->starts_at?->format('d/m/Y') }}</p>
                    <p class="mt-2 text-sm text-gray-600">{{ $notice->body }}</p>
                </li>
            @empty
                <li class="rounded-lg border border-gray-100 px-4 py-3 text-sm text-gray-500">Nenhum comunicado no momento.</li>
            @endforelse
        </ul>
    </x-common.component-card>
</div>
@endsection