{{-- ============================================= --}}
{{-- FASE: MATRÍCULA CANCELADA                    --}}
{{-- ============================================= --}}

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

    {{-- Banner de cancelamento --}}
    <div class="bg-gradient-to-br from-red-50 to-red-100 dark:from-red-950/30 dark:to-red-900/20 border border-red-200 dark:border-red-800 rounded-2xl p-6 md:p-8 text-center">
        <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-red-500 flex items-center justify-center shadow-lg shadow-red-200 dark:shadow-red-900/40">
            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
        </div>
        <h2 class="text-xl md:text-2xl font-bold text-red-800 dark:text-red-200">Matrícula Cancelada</h2>
        <p class="text-sm text-red-600 dark:text-red-400 mt-1">Esta matrícula foi cancelada. Confira os detalhes abaixo.</p>
    </div>

    {{-- Cards de resumo --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <x-matricula.info-card :aluno="$matricula->aluno ?? null" titulo="Dados do Aluno" icon="user" />

        {{-- Dados da Matrícula --}}
        <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm overflow-hidden">
            <div class="bg-gradient-to-r from-gray-600 to-gray-700 px-5 py-3">
                <div class="flex items-center gap-2">
                    <x-icon name="academic-cap" class="w-5 h-5 text-white/80" />
                    <h3 class="text-sm font-semibold text-white uppercase tracking-wide">Matrícula & Curso</h3>
                </div>
            </div>
            <div class="divide-y divide-gray-100 dark:divide-gray-800">
                <div class="flex flex-col sm:flex-row sm:items-center px-5 py-3 gap-1 sm:gap-0">
                    <div class="sm:w-2/5 text-xs font-medium text-gray-400 uppercase tracking-wide">Matrícula</div>
                    <div class="sm:w-3/5 text-sm text-gray-800 dark:text-gray-200">
                        <span class="font-semibold">{{ $financeiro->matricula->matricula_num ?? '---' }}</span>
                        <span class="text-gray-400 text-xs ml-1">— {{ dataCarbon($financeiro->matricula->matricula_datahora ?? '', 'd/m/Y H:i') }}</span>
                    </div>
                </div>
                <div class="flex flex-col sm:flex-row sm:items-center px-5 py-3 gap-1 sm:gap-0">
                    <div class="sm:w-2/5 text-xs font-medium text-gray-400 uppercase tracking-wide">Curso</div>
                    <div class="sm:w-3/5 text-sm text-gray-800 dark:text-gray-200 capitalize">{{ $turma->curso->nome ?? '---' }}</div>
                </div>
                <div class="flex flex-col sm:flex-row sm:items-center px-5 py-3 gap-1 sm:gap-0">
                    <div class="sm:w-2/5 text-xs font-medium text-gray-400 uppercase tracking-wide">Turma</div>
                    <div class="sm:w-3/5 text-sm text-gray-800 dark:text-gray-200 capitalize">
                        {{ $turma->turma_codigo ?? '---' }} —
                        {{ ($turma->data_inicio ?? false) ? dataData($turma->data_inicio) : '--/--/----' }}
                        até {{ ($turma->data_termino ?? false) ? dataData($turma->data_termino) : '--/--/----' }}
                    </div>
                </div>
                <div class="flex flex-col sm:flex-row sm:items-center px-5 py-3 gap-1 sm:gap-0">
                    <div class="sm:w-2/5 text-xs font-medium text-gray-400 uppercase tracking-wide">Descrição</div>
                    <div class="sm:w-3/5 text-sm text-gray-800 dark:text-gray-200 capitalize">{{ $turma->turma_nome ?? '' }} — {{ $turma->descricao_dia ?? '' }}</div>
                </div>
            </div>
        </div>
    </div>

    {{-- Resumo financeiro --}}
    <x-matricula.payment-summary :carrinho="$forma_pgto_carrinho" />

    {{-- Pagamento (só exibe se houve pagamento) --}}
    @if ($financeiro->pagamento_data ?? false)
    <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm overflow-hidden">
        <div class="bg-gradient-to-r from-gray-600 to-gray-700 px-5 py-3">
            <div class="flex items-center gap-2">
                <svg class="w-5 h-5 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
                <h3 class="text-sm font-semibold text-white uppercase tracking-wide">Pagamento</h3>
            </div>
        </div>
        <div class="divide-y divide-gray-100 dark:divide-gray-800">
            <div class="flex flex-col sm:flex-row sm:items-center px-5 py-3 gap-1 sm:gap-0">
                <div class="sm:w-2/5 text-xs font-medium text-gray-400 uppercase tracking-wide">Forma</div>
                <div class="sm:w-3/5 text-sm text-gray-800 dark:text-gray-200 uppercase">{{ __($financeiro->pagamento_forma ?? '---') }}</div>
            </div>
            <div class="flex flex-col sm:flex-row sm:items-center px-5 py-3 gap-1 sm:gap-0">
                <div class="sm:w-2/5 text-xs font-medium text-gray-400 uppercase tracking-wide">Valor</div>
                <div class="sm:w-3/5 text-sm text-gray-800 dark:text-gray-200">{{ $financeiro->pagamento_valor ? convertMoney($financeiro->pagamento_valor, 'R$ ') : '---' }}</div>
            </div>
            <div class="flex flex-col sm:flex-row sm:items-center px-5 py-3 gap-1 sm:gap-0">
                <div class="sm:w-2/5 text-xs font-medium text-gray-400 uppercase tracking-wide">Data</div>
                <div class="sm:w-3/5 text-sm text-gray-800 dark:text-gray-200">{{ $financeiro->pagamento_data ? dataData($financeiro->pagamento_data) : '---' }}</div>
            </div>
            <div class="flex flex-col sm:flex-row sm:items-center px-5 py-3 gap-1 sm:gap-0">
                <div class="sm:w-2/5 text-xs font-medium text-gray-400 uppercase tracking-wide">Situação</div>
                <div class="sm:w-3/5 text-sm text-gray-800 dark:text-gray-200">{{ $financeiro->pagamento_situacao ?? '---' }}</div>
            </div>
            <div class="flex flex-col sm:flex-row sm:items-center px-5 py-3 gap-1 sm:gap-0">
                <div class="sm:w-2/5 text-xs font-medium text-gray-400 uppercase tracking-wide">Código Transação</div>
                <div class="sm:w-3/5 text-sm text-gray-800 dark:text-gray-200 font-mono">{{ $financeiro->transacao->operadora_nsu ?? '---' }}</div>
            </div>
        </div>
    </div>
    @endif

    {{-- Card de cancelamento --}}
    <div class="bg-red-50 dark:bg-red-950/20 border-2 border-red-300 dark:border-red-700 rounded-2xl overflow-hidden shadow-sm">
        <div class="px-6 py-4 bg-red-100 dark:bg-red-900/30 border-b border-red-200 dark:border-red-800">
            <div class="flex items-center gap-2">
                <svg class="w-5 h-5 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                <h3 class="text-base font-bold text-red-800 dark:text-red-200">Detalhes do Cancelamento</h3>
            </div>
        </div>
        <div class="divide-y divide-red-200 dark:divide-red-800">
            <div class="flex flex-col sm:flex-row sm:items-center px-6 py-3 gap-1 sm:gap-0">
                <div class="sm:w-1/3 text-xs font-medium text-red-500 dark:text-red-400 uppercase tracking-wide">Data/Hora</div>
                <div class="sm:w-2/3 text-sm font-medium text-red-800 dark:text-red-200">
                    {{ ($financeiro->matricula->cancelamento_datahora ?? false) ? dataData($financeiro->matricula->cancelamento_datahora) : '--' }}
                </div>
            </div>
            <div class="flex flex-col sm:flex-row sm:items-start px-6 py-3 gap-1 sm:gap-0">
                <div class="sm:w-1/3 text-xs font-medium text-red-500 dark:text-red-400 uppercase tracking-wide">Motivo</div>
                <div class="sm:w-2/3 text-sm text-red-800 dark:text-red-200">{{ $financeiro->matricula->cancelamento_descricao ?? '--' }}</div>
            </div>
        </div>
    </div>
</div>