{{-- ============================================= --}}
{{-- FASE: MATRÍCULAS JÁ REALIZADAS               --}}
{{-- ============================================= --}}

<div class="space-y-6">

    {{-- Card resumo do aluno --}}
    <x-matricula.info-card :aluno="$aluno" compact :alterar="true" />

    {{-- Matrículas encontradas --}}
    <div>
        <div class="flex items-center gap-2 mb-4">
            <div class="w-8 h-8 rounded-lg bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center">
                <svg class="w-4 h-4 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                </svg>
            </div>
            <div>
                <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Matrículas Encontradas</h2>
                <p class="text-xs text-gray-500 dark:text-gray-400">Clique para acessar ou continue para nova matrícula</p>
            </div>
        </div>

        <div class="space-y-3">
            @foreach ($matricula_realizadas as $matricula_item)
                <a href="{{ route('matricula', ['matricula' => $matricula_item->id]) }}" wire:navigate
                   class="block group">
                    <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl p-4
                                hover:border-indigo-300 dark:hover:border-indigo-600 hover:shadow-md transition-all duration-200">
                        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3">
                            {{-- Info do curso --}}
                            <div class="flex-1 min-w-0">
                                <h3 class="text-base font-semibold text-gray-800 dark:text-gray-200 uppercase truncate group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors"
                                    title="{{ $matricula_item->curso->descricao ?? '' }}">
                                    {{ $matricula_item->curso->nome ?? '---' }}
                                </h3>

                                @php
                                    $tipoNome = strtolower($matricula_item->curso->tipo->nome ?? '');
                                    $isEad = str_contains($tipoNome, 'ead') || str_contains($tipoNome, 'online') || str_contains($tipoNome, 'distância');
                                @endphp

                                @if ($isEad && $matricula_item->curso->duracao_minima_meses)
                                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
                                        <span class="inline-flex items-center gap-1">
                                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                            </svg>
                                            Duração: {{ $matricula_item->curso->duracao_minima_meses }}
                                            {{ $matricula_item->curso->duracao_minima_meses == 1 ? 'mês' : 'meses' }}
                                        </span>
                                    </p>
                                @else
                                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
                                        {{ $matricula_item->turma->data_inicio ? dataData($matricula_item->turma->data_inicio) : '-- / -- / ----' }}
                                        até
                                        {{ $matricula_item->turma->data_termino ? dataData($matricula_item->turma->data_termino) : '-- / -- / ----' }}
                                    </p>
                                @endif

                                <p class="text-xs text-gray-400 dark:text-gray-500 uppercase mt-0.5">{{ $matricula_item->turma->turma_prefixo ?? '' }}</p>
                            </div>

                            {{-- Status + Número --}}
                            <div class="flex items-center gap-3">
                                <div class="text-right">
                                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold
                                        @if (in_array($matricula_item->situacao->slug ?? '', ['matriculado']))
                                            bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300
                                        @elseif (in_array($matricula_item->situacao->slug ?? '', ['pagamento-matricula-aguardando']))
                                            bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300
                                        @else
                                            bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300
                                        @endif
                                    ">
                                        {{ $matricula_item->situacao->nome ?? '---' }}
                                    </span>
                                    <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">{{ $matricula_item->matricula_num ?? '' }}</p>
                                </div>
                                <svg class="w-5 h-5 text-gray-300 dark:text-gray-600 group-hover:text-indigo-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                </a>
            @endforeach
        </div>
    </div>

    {{-- Botão nova matrícula --}}
    @if (($sandbox ?? false) || in_array($doc_num, ['07321782743','83648330730','64391625008111','09797629015','27148528070']))
        <div class="flex justify-center pt-2">
            <button wire:click="$set('fase_atual','dadosAluno')"
                class="inline-flex items-center gap-2 px-6 py-2.5 bg-white dark:bg-gray-800 border border-indigo-300 dark:border-indigo-600
                       text-indigo-600 dark:text-indigo-400 text-sm font-semibold rounded-xl
                       hover:bg-indigo-50 dark:hover:bg-indigo-950/30 transition-all duration-200 shadow-sm">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                NOVA MATRÍCULA PARA TESTE
            </button>
        </div>
    @endif
</div>