@extends('layouts.admin')

@section('content')
<div class="max-w-7xl mx-auto">
    <div class="flex flex-col md:flex-row md:items-end justify-between mb-10 gap-4">
        <div>
            <div class="flex items-center gap-2 mb-2">
                <span class="w-2 h-2 rounded-full bg-red-600"></span>
                <span class="text-[10px] font-bold text-slate-400 uppercase tracking-[0.3em]">Comunicação & Blog</span>
            </div>
            <h1 class="text-4xl font-bold text-slate-900 tracking-tighter italic">
                Notícias <span class="text-red-600">.</span>
            </h1>
            <p class="text-slate-500 text-sm font-medium mt-1">Gerencie o conteúdo e as novidades para os seus utilizadores.</p>
        </div>
        
        <a href="{{ route('admin.noticias.criar') }}" 
           class="flex items-center justify-center gap-2 px-8 py-4 bg-slate-900 hover:bg-red-600 text-white font-bold rounded-2xl transition-all text-[11px] uppercase tracking-widest shadow-xl shadow-slate-200 group">
            <svg class="w-4 h-4 group-hover:rotate-90 transition-transform" 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>
            Publicar Nova Notícia
        </a>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        @forelse($noticias as $noticia)
        <div class="group bg-white border border-slate-100 rounded-[2.5rem] p-6 shadow-sm hover:shadow-2xl hover:shadow-slate-200/50 transition-all duration-500 flex flex-col h-full">
            
            <div class="relative w-full h-48 bg-slate-50 rounded-[1.8rem] mb-6 overflow-hidden flex items-center justify-center">
                @if(isset($noticia->imagem))
                    <img src="{{ asset('storage/' . $noticia->imagem) }}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                @else
                    <div class="flex flex-col items-center gap-2 text-slate-300 group-hover:text-red-400 transition-colors">
                        <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10l4 4v10a2 2 0 01-2 2z"></path>
                        </svg>
                        <span class="text-[9px] font-bold uppercase tracking-widest">Sem Imagem</span>
                    </div>
                @endif
                
                <div class="absolute top-4 left-4 px-4 py-2 bg-white/90 backdrop-blur rounded-2xl shadow-sm">
                    <span class="block text-[10px] font-bold text-slate-900 leading-none italic uppercase">
                        {{ \Carbon\Carbon::parse($noticia->data_publicacao)->format('d . M') }}
                    </span>
                </div>
            </div>

            <div class="flex-1">
                <div class="flex items-center gap-2 mb-3">
                    <span class="px-3 py-1 bg-red-50 text-red-600 text-[9px] font-bold uppercase tracking-widest rounded-full">Referência #{{ $noticia->id }}</span>
                    <span class="text-[10px] text-slate-400 font-bold uppercase tracking-tighter italic">Agendado</span>
                </div>
                
                <h3 class="text-xl font-bold text-slate-900 tracking-tighter leading-tight group-hover:text-red-600 transition-colors mb-4 line-clamp-2">
                    {{ $noticia->titulo }}
                </h3>
            </div>

            <div class="mt-6 pt-6 border-t border-slate-50 flex items-center justify-between">
                <div class="flex gap-2">
                    <a href="{{ route('admin.noticias.editar', $noticia->id) }}" 
                       class="p-3 bg-slate-50 text-slate-400 hover:bg-red-50 hover:text-red-600 rounded-xl transition-all"
                       title="Editar Publicação">
                        <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="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"></path>
                        </svg>
                    </a>

                    <form action="{{ route('admin.noticias.delete', $noticia->id) }}" method="POST" 
                          onsubmit="return confirm('Esta ação não pode ser desfeita. Deseja realmente eliminar?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" 
                                class="p-3 bg-slate-50 text-slate-400 hover:bg-slate-900 hover:text-white rounded-xl transition-all"
                                title="Eliminar Notícia">
                            <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="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>

                <span class="text-[10px] font-bold text-slate-300 uppercase tracking-widest">AMD-TOPOGRAFIA, LDA.</span>
            </div>
        </div>
        @empty
        <div class="col-span-full py-32 flex flex-col items-center justify-center bg-white border border-dashed border-slate-200 rounded-[3rem]">
            <div class="w-20 h-20 bg-slate-50 rounded-full flex items-center justify-center text-slate-200 mb-6">
                <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10l4 4v10a2 2 0 01-2 2z"></path>
                </svg>
            </div>
            <p class="text-slate-400 font-bold italic tracking-tighter uppercase text-xs">Silêncio no blog: Nenhuma notícia publicada.</p>
            <a href="{{ route('admin.noticias.criar') }}" class="mt-4 text-red-600 font-bold text-[10px] uppercase tracking-widest hover:underline">Começar agora →</a>
        </div>
        @endforelse
    </div>

    <div class="mt-12 px-6">
        {{-- $noticias->links() --}}
    </div>
</div>

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