@extends('layouts.admin')

@section('content')
<div class="fixed inset-0 pointer-events-none z-0 overflow-hidden">
    <div class="absolute -top-[5%] -right-[5%] w-[30%] h-[30%] bg-blue-50 blur-[100px] rounded-full opacity-60"></div>
</div>

<div class="relative z-10 w-full max-w-7xl mx-auto px-4 py-8">
    <header class="mb-10 flex flex-col md:flex-row justify-between items-center gap-6">
        <div>
            <div class="flex items-center gap-3 mb-2">
                <span class="w-8 h-[2px] bg-[#06458F]"></span>
                <span class="text-[#06458F] font-bold text-[10px] uppercase tracking-[0.4em]">Base de Dados</span>
            </div>
            <h1 class="text-4xl font-bold text-slate-800 italic tracking-tighter uppercase">FORMAÇÕES</h1>
            <p class="text-slate-600 font-medium">Gerencie o catálogo de cursos e especializações técnicas.</p>
        </div>
        <a href="{{ route('admin.formacoes.criar') }}" class="group bg-[#06458F] hover:bg-[#0a2348] text-white font-bold py-4 px-8 rounded-2xl shadow-lg shadow-blue-600/20 transition-all active:scale-95 flex items-center gap-3 uppercase tracking-widest text-xs cursor-pointer">
            <svg class="w-5 h-5 group-hover:rotate-90 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4"></path>
            </svg>
            Nova Formação
        </a>
    </header>

    @if(session('success'))
        <div class="mb-8 p-4 bg-green-50 border-l-4 border-green-500 rounded-r-2xl shadow-sm flex items-center gap-3 animate-in fade-in slide-in-from-top-4">
            <div class="bg-green-500 rounded-full p-1">
                <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
                </svg>
            </div>
            <span class="text-green-700 font-bold text-sm">{{ session('success') }}</span>
        </div>
    @endif

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        @forelse($formacoes as $formacao)
            <div class="group bg-white border border-slate-200 hover:border-[#dce8f0] rounded-[2.5rem] p-8 shadow-sm hover:shadow-2xl hover:shadow-blue-600/5 transition-all duration-500 flex flex-col h-full relative overflow-hidden">
                
                <div class="absolute top-0 right-0 p-6 text-slate-50 group-hover:text-blue-50/50 transition-colors duration-500 pointer-events-none">
                    <svg class="w-32 h-32 -mt-10 -mr-10 opacity-50" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 14l9-5-9-5-9 5 9 5z"></path>
                        <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path>
                    </svg>
                </div>

                <div class="relative z-10 flex-1 flex flex-col">
                    <div class="mb-6">
                        <span class="inline-block text-[10px] font-bold bg-slate-100 text-slate-500 group-hover:bg-blue-50 group-hover:text-[#06458F] px-3 py-1.5 rounded-lg uppercase tracking-widest mb-4 transition-colors">
                            Ref: #{{ $formacao->id }}
                        </span>
                        <h3 class="text-2xl font-bold text-slate-800 group-hover:text-[#06458F] transition-colors italic uppercase leading-tight line-clamp-2">
                            {{ $formacao->titulo }}
                        </h3>
                    </div>
                    
                    <p class="text-slate-500 text-sm leading-relaxed mb-8 line-clamp-3">
                        {{ $formacao->descricao }}
                    </p>
                    
                    <div class="grid grid-cols-1 gap-3 mb-8">
                        @if($formacao->instrutor)
                            <div class="flex items-center gap-3 p-3 bg-slate-50 rounded-2xl">
                                <span class="p-2 bg-white rounded-xl text-slate-400 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="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>
                                </span>
                                <div class="flex flex-col">
                                    <span class="text-[9px] font-bold uppercase tracking-widest text-slate-400">Instrutor</span>
                                    <span class="text-xs font-bold text-slate-700 truncate">{{ $formacao->instrutor }}</span>
                                </div>
                            </div>
                        @endif
                        
                        <div class="grid grid-cols-2 gap-3">
                            @if($formacao->duracao)
                                <div class="flex items-center gap-3 p-3 bg-slate-50 rounded-2xl">
                                    <span class="p-2 bg-white rounded-xl text-slate-400 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                    </span>
                                    <div class="flex flex-col">
                                        <span class="text-[9px] font-bold uppercase tracking-widest text-slate-400">Duração</span>
                                        <span class="text-xs font-bold text-slate-700">{{ $formacao->duracao }}</span>
                                    </div>
                                </div>
                            @endif
                            
                            @if($formacao->preco > 0)
                                <div class="flex items-center gap-3 p-3 bg-green-50/50 rounded-2xl border border-green-100">
                                    <div class="flex flex-col justify-center">
                                        <span class="text-[9px] font-bold uppercase tracking-widest text-green-600">Investimento</span>
                                        <span class="text-sm font-bold text-slate-900">{{ number_format($formacao->preco, 2, ',', '.') }} Kz</span>
                                    </div>
                                </div>
                            @else
                                <div class="flex items-center gap-3 p-3 bg-blue-50/50 rounded-2xl border border-blue-100">
                                    <div class="flex flex-col justify-center">
                                        <span class="text-[9px] font-bold uppercase tracking-widest text-blue-600">Investimento</span>
                                        <span class="text-sm font-bold text-blue-900 uppercase">Gratuito</span>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="flex gap-3 mt-auto relative z-10 pt-6 border-t border-slate-100">
                    <a href="{{ route('admin.formacoes.editar', $formacao->id) }}" 
                        class="flex-1 text-center py-3 bg-slate-50 hover:bg-[#06458F] hover:text-white text-slate-600 rounded-xl text-[10px] font-bold uppercase tracking-[0.2em] transition-all cursor-pointer">
                        Editar
                    </a>
                    
                    <form action="{{ route('admin.formacoes.delete', $formacao->id) }}" method="POST" class="flex-none">
                        @csrf
                        @method('DELETE')
                        <button onclick="return confirm('ATENÇÃO: Esta ação é irreversível. Deseja eliminar esta formação?')" 
                            class="p-3 bg-white border border-slate-200 hover:bg-red-50 hover:border-red-200 hover:text-red-600 text-slate-400 rounded-xl transition-all cursor-pointer"
                            title="Eliminar Formação">
                            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                        </button>
                    </form>
                </div>
            </div>
        @empty
            <div class="col-span-full text-center py-32 px-4 bg-white border border-dashed border-slate-200 rounded-[3rem]">
                <div class="bg-slate-50 w-24 h-24 rounded-full flex items-center justify-center mx-auto mb-6">
                    <svg class="w-12 h-12 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
                    </svg>
                </div>
                <h3 class="text-2xl font-bold text-slate-800 mb-2 uppercase italic tracking-tighter">Sem Formações</h3>
                <p class="text-slate-500 mb-8 font-medium">O seu catálogo académico encontra-se vazio de momento.</p>
                <a href="{{ route('admin.formacoes.criar') }}" class="inline-flex items-center gap-2 px-8 py-4 bg-slate-900 text-white font-bold uppercase tracking-widest text-[11px] rounded-2xl hover:bg-[#06458F] transition-colors shadow-xl shadow-slate-200 cursor-pointer">
                    Criar a primeira formação
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                </a>
            </div>
        @endforelse
    </div>

    <div class="mt-12 pt-8 border-t border-slate-200 flex flex-col md:flex-row justify-between items-center gap-4 text-[10px] font-bold text-slate-400 uppercase tracking-[0.3em]">
        <span class="bg-slate-100 px-4 py-2 rounded-lg text-slate-500">Total de Itens: {{ $formacoes->count() }}</span>
        <span>AMD-TOPOGRAFIA, LDA. Geotecnologia</span>
    </div>
</div>

<style>
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;  
        overflow: hidden;
    }
    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;  
        overflow: hidden;
    }
</style>
@endsection