@extends('layouts.admin')

@section('title', 'Hero Sobre Nós | AMD-TOPOGRAFIA, LDA.')

@section('content')
<div class="flex justify-between items-center mb-8">
    <div>
        <h1 class="text-2xl font-bold text-[#06458F] uppercase tracking-tight">Hero Sobre Nós</h1>
        <p class="text-slate-500 text-xs font-bold uppercase tracking-wider mt-1">Slides fullscreen da página Sobre</p>
    </div>
    <a href="{{ route('admin.hero-sobre.create') }}" class="px-6 py-3.5 bg-[#06458F] text-white font-bold text-xs uppercase tracking-widest rounded-xl hover:bg-[#0A529F] transition-smooth shadow-sm flex items-center gap-2">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
        Novo Slide
    </a>
</div>

@if(session('success'))
    <div class="mb-6 px-6 py-4 bg-emerald-50 border border-emerald-200 text-emerald-700 text-sm font-bold rounded-2xl">{{ session('success') }}</div>
@endif

<div class="space-y-4">
    @forelse($slides as $slide)
        <div class="glass p-6 rounded-2xl flex items-center gap-6">
            <div class="w-52 h-28 rounded-xl overflow-hidden bg-slate-100 shrink-0 border border-slate-200">
                <img src="{{ asset('storage/' . $slide->imagem) }}" alt="{{ $slide->titulo }}" class="w-full h-full object-cover">
            </div>
            <div class="flex-1 min-w-0">
                <div class="flex items-center gap-3 mb-1">
                    <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">#{{ $slide->ordem }}</span>
                    @if($slide->ativo)
                        <span class="px-2 py-0.5 bg-emerald-50 border border-emerald-200 text-emerald-600 text-[8px] font-bold uppercase tracking-wider rounded-md">Ativo</span>
                    @else
                        <span class="px-2 py-0.5 bg-slate-100 border border-slate-200 text-slate-400 text-[8px] font-bold uppercase tracking-wider rounded-md">Inativo</span>
                    @endif
                </div>
                <h3 class="font-bold text-[#06458F] uppercase tracking-tight truncate">{{ $slide->titulo }}</h3>
                @if($slide->subtitulo)
                    <p class="text-xs text-slate-500 font-medium">{{ $slide->subtitulo }}</p>
                @endif
            </div>
            <div class="flex items-center gap-2 shrink-0">
                <a href="{{ route('admin.hero-sobre.edit', $slide) }}" class="px-4 py-2.5 bg-white border border-slate-200 text-slate-600 hover:text-[#06458F] hover:border-slate-300 font-bold text-[10px] uppercase tracking-widest rounded-xl transition-smooth">Editar</a>
                <form method="POST" action="{{ route('admin.hero-sobre.destroy', $slide) }}" onsubmit="return confirm('Remover este slide?')" class="inline">
                    @csrf @method('DELETE')
                    <button type="submit" class="px-4 py-2.5 bg-white border border-red-200 text-red-500 hover:bg-red-50 font-bold text-[10px] uppercase tracking-widest rounded-xl transition-smooth">Remover</button>
                </form>
            </div>
        </div>
    @empty
        <div class="glass p-12 rounded-2xl text-center">
            <svg class="w-12 h-12 text-slate-200 mx-auto mb-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6"/></svg>
            <p class="text-slate-400 font-bold text-sm">Nenhum slide criado para a página Sobre ainda.</p>
            <a href="{{ route('admin.hero-sobre.create') }}" class="inline-block mt-4 px-6 py-3 bg-[#06458F] text-white font-bold text-xs uppercase tracking-widest rounded-xl hover:bg-[#0A529F] transition-smooth">Criar Primeiro Slide</a>
        </div>
    @endforelse
</div>

@if($slides->count() > 1)
    <p class="mt-6 text-[10px] text-slate-400 font-bold uppercase tracking-wider">A ordem dos slides é controlada pelo campo "Ordem". Os slides ativos com menor número aparecem primeiro.</p>
@endif
@endsection