@extends('layouts.admin')

@section('content')
<div class="max-w-7xl mx-auto pb-20">
    <div class="flex flex-col md:flex-row md:items-end justify-between mb-10 gap-6">
        <div>
            <div class="flex items-center gap-3 mb-2">
                <a href="{{ route('admin.inscricoes.lista') }}" class="text-slate-400 hover:text-[#06458F] transition-colors cursor-pointer" title="Voltar à lista">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    </svg>
                </a>
                <span class="text-[10px] font-bold text-slate-400 uppercase tracking-[0.3em]">Gestão de Alunos</span>
            </div>
            <h1 class="text-4xl font-bold text-slate-900 tracking-tighter italic">
                Inscrição <span class="text-[#06458F]">#{{ $inscricao->id }}</span>
            </h1>
            <p class="text-slate-500 text-sm font-medium mt-1 uppercase tracking-tight">Formação: <span class="text-slate-900 font-bold">{{ optional($inscricao->formacao)->titulo ?? 'Formação N/D' }}</span></p>
        </div>

        <div class="flex gap-3">
            <a href="{{ route('admin.inscricoes.recibo-pdf', $inscricao->id) }}" target="_blank"
               class="flex items-center gap-2 px-6 py-4 bg-slate-900 text-white font-bold rounded-2xl transition-all text-[11px] uppercase tracking-widest hover:bg-[#06458F] shadow-xl shadow-slate-200 cursor-pointer">
                <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 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
                Gerar Recibo PDF
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 text-slate-900">
        <div class="lg:col-span-2 space-y-8">
            
            {{-- Dados Pessoais do Candidato --}}
            <div class="bg-white border border-slate-100 rounded-[2.5rem] p-8 lg:p-10 shadow-sm">
                <div class="flex items-center gap-4 mb-8 border-b border-slate-50 pb-6">
                    <div class="w-12 h-12 rounded-2xl bg-blue-50 flex items-center justify-center text-[#06458F]">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                    </div>
                    <h2 class="text-xl font-bold tracking-tighter uppercase italic">Dados do Candidato</h2>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-y-8 gap-x-12">
                    <div>
                        <label class="block text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Nome Completo</label>
                        <p class="font-bold text-slate-800">{{ $inscricao->nome_completo }}</p>
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Documento (BI)</label>
                        <p class="font-bold text-slate-800">{{ $inscricao->numero_bi }}</p>
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Data de Nascimento</label>
                        <p class="font-bold text-slate-800">{{ optional($inscricao->data_nascimento)->format('d/m/Y') ?? 'N/D' }}</p>
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Sexo / Género</label>
                        <p class="font-bold text-slate-800">{{ $inscricao->sexo }}</p>
                    </div>
                </div>

                <div class="mt-12 pt-8 border-t border-slate-50 grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div>
                        <label class="block text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Telemóvel</label>
                        <p class="font-bold text-[#06458F] text-lg">{{ $inscricao->telemovel }}</p>
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">E-mail de Contacto</label>
                        <p class="font-bold text-slate-800">{{ $inscricao->email }}</p>
                    </div>
                </div>
            </div>

            {{-- Formação e Percurso Académico --}}
            <div class="bg-white border border-slate-100 rounded-[2.5rem] p-8 lg:p-10 shadow-sm">
                <h2 class="text-[10px] font-bold text-slate-400 uppercase tracking-[0.3em] mb-6">Formação & Percurso</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="bg-slate-50 rounded-2xl p-6">
                        <label class="block text-[9px] font-bold text-slate-400 uppercase tracking-widest mb-1">Grau Académico</label>
                        <p class="font-bold text-slate-900">{{ $inscricao->nivel_academico }}</p>
                    </div>
                    <div class="bg-slate-50 rounded-2xl p-6">
                        <label class="block text-[9px] font-bold text-slate-400 uppercase tracking-widest mb-1">Instituição</label>
                        <p class="font-bold text-slate-900">{{ $inscricao->instituicao_ensino }}</p>
                    </div>
                </div>
            </div>

            {{-- Detalhes Financeiros --}}
            <div class="bg-slate-900 rounded-[2.5rem] p-8 lg:p-10 text-white shadow-xl shadow-slate-200 relative overflow-hidden">
                <div class="relative z-10">
                    <h2 class="text-[10px] font-bold text-[#A9B8C9] uppercase tracking-[0.3em] mb-8">Detalhes Financeiros</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-end">
                        <div>
                            <p class="text-slate-400 text-[10px] uppercase font-bold mb-1">Modalidade</p>
                            <p class="text-xl font-bold italic">{{ $inscricao->modalidade_pagamento }}</p>
                            <div class="mt-6">
                                <p class="text-slate-400 text-[10px] uppercase font-bold mb-1">Valor por Extenso</p>
                                <p class="text-xs text-slate-300 italic">{{ $inscricao->valor_extenso }}</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-slate-400 text-[10px] uppercase font-bold mb-1">Total da Inscrição</p>
                            <p class="text-4xl font-bold text-white leading-none">
                                {{ number_format($inscricao->valor_inscricao, 2, ',', '.') }} <span class="text-[#A9B8C9] text-lg uppercase">Kz</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="absolute top-0 right-0 w-64 h-64 bg-[#06458F]/20 rounded-full blur-3xl -mr-20 -mt-20"></div>
            </div>

            {{-- Documento Comprovativo de Pagamento --}}
            <div class="bg-white border border-slate-100 rounded-[2.5rem] p-8 shadow-sm">
                <h2 class="text-[10px] font-bold text-slate-400 uppercase tracking-[0.3em] mb-6 text-center">Documento de Pagamento</h2>
                <div class="max-w-md mx-auto">
                    @if($inscricao->comprovativo_pagamento)
                        <div class="relative group rounded-3xl overflow-hidden border-4 border-slate-50 shadow-inner">
                            @if(Str::endsWith($inscricao->comprovativo_pagamento, ['.pdf', '.PDF']))
                                <div class="py-12 bg-slate-50 flex flex-col items-center">
                                    <svg class="w-16 h-16 text-[#06458F] mb-4" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M4 18V2h12v16H4zm2-2h8V4H6v12z"/>
                                    </svg>
                                    <p class="font-bold text-slate-900 uppercase text-xs">Documento PDF</p>
                                    <a href="{{ asset('storage/' . $inscricao->comprovativo_pagamento) }}" target="_blank" class="mt-6 px-6 py-3 bg-[#06458F] text-white rounded-xl font-bold text-[10px] uppercase tracking-widest transition-transform hover:scale-105 cursor-pointer">Abrir Documento</a>
                                </div>
                            @else
                                <img src="{{ asset('storage/' . $inscricao->comprovativo_pagamento) }}" alt="Comprovativo" class="w-full h-auto">
                                <a href="{{ asset('storage/' . $inscricao->comprovativo_pagamento) }}" target="_blank" class="absolute inset-0 bg-slate-900/60 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity backdrop-blur-sm text-white font-bold uppercase text-xs tracking-widest cursor-pointer">
                                    Expandir Imagem
                                </a>
                            @endif
                        </div>
                    @else
                        <div class="py-12 bg-slate-50 rounded-3xl border-2 border-dashed border-slate-200 flex flex-col items-center">
                            <p class="text-slate-400 font-bold uppercase text-[10px]">Nenhum comprovativo anexado</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Barra Lateral de Controlo Operacional --}}
        <div class="space-y-8">
            <div class="bg-white border border-slate-100 rounded-[2.5rem] p-8 shadow-lg shadow-slate-200/50 sticky top-24">
                <div class="mb-8 text-center">
                    <span class="text-[10px] font-bold text-slate-400 uppercase tracking-[0.3em] block mb-4">Controlo Operacional</span>
                    
                    <div class="inline-block px-6 py-2 rounded-full font-bold text-[10px] uppercase tracking-widest
                        @if($inscricao->status_inscricao === 'Confirmada') bg-green-100 text-green-600
                        @elseif($inscricao->status_inscricao === 'Rejeitada') bg-red-50 text-red-600
                        @else bg-yellow-100 text-yellow-600 @endif">
                        {{ $inscricao->status_inscricao }}
                    </div>
                </div>

                {{-- Formulário de Atualização do Status da Inscrição --}}
                <form method="POST" action="{{ route('admin.inscricoes.atualizar-status-inscricao', $inscricao->id) }}" class="space-y-4 mb-8">
                    @csrf 
                    @method('PUT')
                    <label class="block text-[9px] font-bold text-slate-400 uppercase ml-4 mb-1 tracking-widest">Atualizar Inscrição</label>
                    <select name="status" class="w-full bg-slate-50 border-none rounded-2xl px-5 py-4 font-bold text-sm focus:ring-2 focus:ring-blue-600 transition-all cursor-pointer">
                        <option value="Pendente" {{ $inscricao->status_inscricao === 'Pendente' ? 'selected' : '' }}>Marcar como Pendente</option>
                        <option value="Confirmada" {{ $inscricao->status_inscricao === 'Confirmada' ? 'selected' : '' }}>Confirmar Inscrição</option>
                        <option value="Rejeitada" {{ $inscricao->status_inscricao === 'Rejeitada' ? 'selected' : '' }}>Rejeitar Candidatura</option>
                    </select>
                    <button type="submit" class="w-full py-4 bg-slate-900 text-white rounded-2xl font-bold text-[10px] uppercase tracking-[0.2em] hover:bg-[#06458F] transition-all shadow-lg cursor-pointer">
                        Atualizar Status
                    </button>
                </form>

                <hr class="border-slate-50 my-8">

                {{-- Formulário de Validação de Pagamento --}}
                <form method="POST" action="{{ route('admin.inscricoes.atualizar-status-pagamento', $inscricao->id) }}" class="space-y-4">
                    @csrf 
                    @method('PUT')
                    <label class="block text-[9px] font-bold text-slate-400 uppercase ml-4 mb-1 tracking-widest">Fluxo Financeiro</label>
                    <select name="status" class="w-full bg-slate-50 border-none rounded-2xl px-5 py-4 font-bold text-sm focus:ring-2 focus:ring-green-600 transition-all cursor-pointer">
                        <option value="Pendente" {{ $inscricao->status_pagamento === 'Pendente' ? 'selected' : '' }}>Pagamento Pendente</option>
                        <option value="Confirmado" {{ $inscricao->status_pagamento === 'Confirmado' ? 'selected' : '' }}>Confirmar Recebimento</option>
                        <option value="Rejeitado" {{ $inscricao->status_pagamento === 'Rejeitado' ? 'selected' : '' }}>Pagamento Inválido</option>
                    </select>
                    <button type="submit" class="w-full py-4 bg-green-600 text-white rounded-2xl font-bold text-[10px] uppercase tracking-[0.2em] hover:bg-slate-900 transition-all shadow-lg cursor-pointer">
                        Validar Pagamento
                    </button>
                </form>

                <div class="mt-10 space-y-3">
                    <button type="button" onclick="enviarLembrete()" class="w-full py-3 border-2 border-slate-100 text-slate-400 hover:border-[#06458F] hover:text-[#06458F] rounded-2xl font-bold text-[9px] uppercase tracking-widest transition-all flex items-center justify-center gap-2 cursor-pointer">
                        <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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
                        Enviar Lembrete Email
                    </button>
                </div>
            </div>

            {{-- Bloco de Notas Internas --}}
            <div class="bg-white border border-slate-100 rounded-[2.5rem] p-8 shadow-sm">
                <h3 class="text-[10px] font-bold text-slate-400 uppercase tracking-[0.3em] mb-4">Notas Internas</h3>
                <form method="POST" action="{{ route('admin.inscricoes.adicionar-observacao', $inscricao->id) }}">
                    @csrf 
                    @method('PUT')
                    <textarea name="observacoes" rows="4" class="w-full bg-slate-50 border-none rounded-2xl p-4 text-sm font-medium focus:ring-2 focus:ring-blue-600 outline-none" placeholder="Anotações sobre este aluno...">{{ $inscricao->observacoes }}</textarea>
                    <button type="submit" class="mt-3 w-full py-3 bg-slate-100 text-slate-600 rounded-xl font-bold text-[9px] uppercase tracking-widest hover:bg-slate-200 transition-all cursor-pointer">Salvar Nota</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    function enviarLembrete() {
        alert('Funcionalidade de envio de lembrete em desenvolvimento');
    }
</script>
@endsection