@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">Pareceres pedagógicos</h1>
            <p class="text-sm text-gray-600 dark:text-gray-400">{{ $classroom->name }} · {{ $classroom->school?->name ?? '-' }}</p>
        </div>
        <a href="{{ route('diario.index') }}" class="inline-flex items-center gap-2 rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:border-gray-300">
            Voltar para turmas
        </a>
    </div>

    <x-common.component-card title="Configurações do parecer">
        <form method="get" class="grid gap-4 md:grid-cols-4">
            <div>
                <label class="mb-1.5 block text-sm font-medium text-gray-700">Ano</label>
                <input type="number" name="year" value="{{ $year }}" min="2000" max="2100" class="h-11 w-full rounded-lg border border-gray-300 px-4 text-sm" />
            </div>
            <div class="md:col-span-2">
                <label class="mb-1.5 block text-sm font-medium text-gray-700">Período</label>
                <select name="period_id" class="h-11 w-full rounded-lg border border-gray-300 px-4 text-sm">
                    @forelse ($periods as $period)
                        <option value="{{ $period->id }}" {{ (string) $selectedPeriod === (string) $period->id ? 'selected' : '' }}>
                            {{ $period->name }} ({{ $period->starts_at->format('d/m') }} - {{ $period->ends_at->format('d/m') }})
                        </option>
                    @empty
                        <option value="">Nenhum período cadastrado</option>
                    @endforelse
                </select>
            </div>
            <div class="md:col-span-1">
                <label class="mb-1.5 block text-sm font-medium text-gray-700">Disciplina</label>
                <select name="discipline_id" class="h-11 w-full rounded-lg border border-gray-300 px-4 text-sm">
                    @foreach ($disciplines as $discipline)
                        <option value="{{ $discipline->id }}" {{ (string) $selectedDiscipline === (string) $discipline->id ? 'selected' : '' }}>{{ $discipline->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="md:col-span-4">
                <button class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700">Atualizar</button>
            </div>
        </form>
    </x-common.component-card>

    <x-common.component-card title="Pareceres por aluno">
        @if (!$selectedPeriod)
            <div class="rounded-lg border border-warning-200 bg-warning-50 px-4 py-3 text-sm text-warning-700">
                Cadastre um período de avaliação para liberar o lançamento de pareceres.
            </div>
        @endif
        <div class="space-y-4">
            @forelse ($students as $student)
                @php($desc = $descriptions->get($student->id))
                <div class="rounded-xl border border-gray-200 bg-white p-4 shadow-theme-xs">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-base font-semibold text-gray-900">{{ $student->name }}</h3>
                            <p class="text-xs text-gray-500">CPF: {{ $student->cpf ?? '-' }}</p>
                        </div>
                        <span class="text-xs text-gray-500" data-status="{{ $student->id }}">Aguardando edição</span>
                    </div>
                    <textarea
                        data-student="{{ $student->id }}"
                        class="mt-3 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
                        rows="4"
                        placeholder="Digite o parecer pedagógico..."
                        {{ $selectedPeriod ? '' : 'disabled' }}
                    >{{ $desc?->description }}</textarea>
                </div>
            @empty
                <div class="rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-600">
                    Nenhum aluno vinculado à turma.
                </div>
            @endforelse
        </div>
    </x-common.component-card>
</div>

<script>
    const selectedPeriod = @json($selectedPeriod);
    const selectedDiscipline = @json($selectedDiscipline);
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    const endpoint = @json(route('diario.pareceres.update', $classroom));
    const debounceTimers = new Map();

    function setStatus(studentId, text) {
        const el = document.querySelector(`[data-status=\"${studentId}\"]`);
        if (el) el.textContent = text;
    }

    function saveDescription(studentId, description) {
        if (!selectedPeriod || !selectedDiscipline) return;

        setStatus(studentId, 'Salvando...');
        fetch(endpoint, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            },
            body: JSON.stringify({
                student_id: studentId,
                discipline_id: selectedDiscipline,
                assessment_period_id: selectedPeriod,
                description: description
            })
        }).then(response => {
            if (!response.ok) {
                throw new Error('Falha ao salvar');
            }
            return response.json();
        }).then(() => {
            setStatus(studentId, 'Salvo');
        }).catch(() => {
            setStatus(studentId, 'Erro ao salvar');
        });
    }

    document.querySelectorAll('textarea[data-student]').forEach(textarea => {
        textarea.addEventListener('input', (event) => {
            const studentId = event.target.dataset.student;
            const description = event.target.value;

            setStatus(studentId, 'Editando...');
            clearTimeout(debounceTimers.get(studentId));

            const timer = setTimeout(() => saveDescription(studentId, description), 700);
            debounceTimers.set(studentId, timer);
        });
    });
</script>
@endsection