@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' }} · Frequência</h1>
            <p class="text-sm text-gray-600 dark:text-gray-400">Acompanhamento de presenças e faltas.</p>
        </div>
    </div>

    @php($portalPrefix = (auth()->user()->role ?? '') === 'aluno' ? 'portal.aluno.' : 'portal.')
    <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 . '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>

    <x-common.component-card title="Aluno">
        <form method="get" class="grid gap-3 md:grid-cols-3">
            <div>
                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Selecionar aluno</label>
                <select name="student_id" class="h-11 w-full rounded-lg border border-gray-300 px-4 text-sm">
                    @foreach ($students as $student)
                        <option value="{{ $student->id }}" {{ (string) $studentId === (string) $student->id ? 'selected' : '' }}>{{ $student->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="flex items-end">
                <button class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700">Filtrar</button>
            </div>
        </form>
        @php($selectedStudent = $students->firstWhere('id', $studentId))
        @if ($selectedStudent)
            <div class="mt-4 grid gap-3 md:grid-cols-2">
                <div class="rounded-lg border border-gray-100 p-4">
                    <p class="text-xs text-gray-500">Escola</p>
                    <p class="text-sm font-medium text-gray-900">{{ $selectedStudent->school?->name ?? '-' }}</p>
                </div>
                <div class="rounded-lg border border-gray-100 p-4">
                    <p class="text-xs text-gray-500">Turma</p>
                    <p class="text-sm font-medium text-gray-900">{{ $selectedStudent->classroom?->name ?? '-' }}</p>
                </div>
            </div>
        @endif
    </x-common.component-card>

    <x-common.component-card title="Registros">
        <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
                <thead class="text-left text-gray-500 dark:text-gray-400">
                    <tr>
                        <th class="pb-3">Data</th>
                        <th class="pb-3">Turma</th>
                        <th class="pb-3">Status</th>
                        <th class="pb-3">Observações</th>
                    </tr>
                </thead>
                <tbody class="text-gray-700 dark:text-gray-300">
                    @forelse ($records as $record)
                        <tr class="border-t border-gray-100 dark:border-gray-800">
                            <td class="py-3">{{ $record->date?->format('d/m/Y') }}</td>
                            <td class="py-3">{{ $record->classroom?->name ?? '-' }}</td>
                            <td class="py-3">{{ ucfirst($record->status) }}</td>
                            <td class="py-3">{{ $record->notes ?? '-' }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="py-6 text-center text-sm text-gray-500">Nenhum registro encontrado.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="mt-4">
            {{ $records->links() }}
        </div>
    </x-common.component-card>
</div>
@endsection