@extends('layouts.admin')

@section('content')
<div class="max-w-7xl mx-auto pb-24 px-4 sm:px-6 lg:px-8">
    
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-10 gap-4">
        <div>
            <h1 class="text-3xl font-bold text-slate-900 uppercase tracking-tighter">
                Gest�o de <span class="text-[#06458F]">Cursos & Forma��es</span>
            </h1>
            <p class="text-slate-500 text-sm font-bold uppercase tracking-widest mt-1">
                Total de {{ $cursos->count() }} registos encontrados
            </p>
        </div>
        
        <a href="{{ route('admin.cursos.create') }}" class="bg-[#06458F] hover:bg-[#0a2348] text-white px-6 py-3 rounded-2xl font-bold text-xs uppercase shadow-xl shadow-blue-200 transition-all transform hover:scale-105 flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4" />
            </svg>
            Novo Curso
        </a>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        @forelse($cursos as $curso)
            @php
                // L�gica Inteligente de Imagem
                $img = $curso->imagem_capa ?: $curso->imagem;
                $url = str_contains($img, 'http') ? $img : asset('storage/' . $img);
                if(!$img) $url = 'https://placehold.co/600x400?text=Sem+Capa';
            @endphp

            <div class="group bg-white rounded-[2rem] overflow-hidden border border-slate-100 shadow-sm hover:shadow-2xl hover:shadow-slate-200 transition-all duration-500 flex flex-col">
                
                <div class="relative h-56 overflow-hidden">
                    <img src="{{ $url }}" 
                         alt="{{ $curso->titulo }}"
                         class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                         onerror="this.src='https://placehold.co/600x400?text=Erro+ao+Carregar'">
                    
                    <div class="absolute top-4 right-4 bg-white/90 backdrop-blur-md px-4 py-2 rounded-xl shadow-lg">
                        <span class="text-slate-900 font-bold text-sm">
                            {{ $curso->preco > 0 ? number_format($curso->preco, 2, ',', '.') . ' AKZ' : 'GR�TIS' }}
                        </span>
                    </div>

                    <div class="absolute bottom-4 left-4">
                        <span class="px-3 py-1 bg-slate-900/80 backdrop-blur-sm text-white text-[10px] font-bold uppercase tracking-widest rounded-lg">
                            {{ $curso->publico ? 'P�blico' : 'Rascunho' }}
                        </span>
                    </div>
                </div>

                <div class="p-6 flex-grow">
                    <div class="flex items-center gap-2 mb-3">
                        <span class="text-[10px] font-bold text-[#06458F] bg-blue-50 px-2 py-0.5 rounded uppercase">
                            ID #{{ $curso->id }}
                        </span>
                        <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">
                            {{ $curso->duracao_total ? $curso->duracao_total . ' min' : ($curso->duracao ?? '�') }}
                        </span>
                    </div>

                    <h3 class="text-lg font-bold text-slate-900 leading-tight mb-2 group-hover:text-[#06458F] transition-colors">
                        {{ $curso->titulo }}
                    </h3>

                    <p class="text-slate-500 text-xs font-bold leading-relaxed line-clamp-2 mb-4">
                        {{ $curso->descricao }}
                    </p>

                    <div class="bg-slate-50 rounded-xl p-3 mb-6">
                        <div class="text-[9px] font-bold text-slate-400 uppercase mb-1">Link Amig�vel (Slug)</div>
                        <div class="text-[11px] font-bold text-slate-600 truncate">
                            /cursos/{{ $curso->slug ?: Str::slug($curso->titulo) }}
                        </div>
                    </div>
                </div>

                <div class="p-6 pt-0 mt-auto border-t border-slate-50 flex items-center justify-between gap-2">
                    <div class="flex gap-2">
                        <a href="{{ route('admin.cursos.edit', $curso->id) }}" class="p-3 bg-slate-100 hover:bg-blue-600 hover:text-white text-slate-600 rounded-xl transition-all">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                            </svg>
                        </a>
                        
                        <form action="{{ route('admin.cursos.destroy', $curso->id) }}" method="POST" onsubmit="return confirm('Apagar este curso permanentemente?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="p-3 bg-slate-100 hover:bg-[#06458F] hover:text-white text-[#06458F] rounded-xl transition-all">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <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" />
                                </svg>
                            </button>
                        </form>
                    </div>

                    <a href="/cursos/{{ $curso->slug }}" target="_blank" class="text-[10px] font-bold text-slate-400 hover:text-slate-900 uppercase tracking-widest flex items-center gap-1 transition-colors">
                        Ver no Site
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                        </svg>
                    </a>
                </div>
            </div>
        @empty
            <div class="col-span-full py-20 bg-white rounded-[2rem] border-2 border-dashed border-slate-200 flex flex-col items-center justify-center text-center">
                <div class="w-20 h-20 bg-slate-50 rounded-full flex items-center justify-center mb-4 text-slate-300">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <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" />
                    </svg>
                </div>
                <h3 class="text-xl font-bold text-slate-800 uppercase tracking-tight">Nenhum curso dispon�vel</h3>
                <p class="text-slate-500 font-bold text-sm uppercase mt-2">Clique em "Novo Curso" para come�ar.</p>
            </div>
        @endforelse
    </div>
</div>
@endsection