@extends('layouts.admin')

@section('title', 'Produtos')

@section('content')
<div class="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12">
    <header class="mb-8 flex flex-col md:flex-row md:items-end justify-between gap-6 pt-6">
        <div>
            <div class="flex items-center gap-3 mb-2">
                <span class="w-8 h-[2px] bg-brand"></span>
                <span class="font-bold text-[10px] uppercase tracking-[0.4em] text-brand">Inventário</span>
            </div>
            <h1 class="text-4xl md:text-5xl font-bold italic tracking-tighter uppercase text-brand">PRODUTOS</h1>
            <p class="text-slate-500 font-medium mt-1">Gerir todos os produtos da Mangolê</p>
        </div>
        <a href="{{ route('admin.products.create') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-brand hover:bg-brand-700 text-white font-bold text-xs uppercase tracking-widest rounded-2xl shadow-sm transition-all hover:-translate-y-0.5">
            <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 4v16m8-8H4"/></svg>
            Novo Produto
        </a>
    </header>

    <div class="bg-white border border-slate-100 rounded-2xl shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-slate-100 bg-slate-50/80">
                        <th class="text-left py-4 px-4 text-[10px] font-bold uppercase tracking-widest text-slate-400">Imagem</th>
                        <th class="text-left py-4 px-4 text-[10px] font-bold uppercase tracking-widest text-slate-400">Nome</th>
                        <th class="text-left py-4 px-4 text-[10px] font-bold uppercase tracking-widest text-slate-400">Categoria</th>
                        <th class="text-left py-4 px-4 text-[10px] font-bold uppercase tracking-widest text-slate-400">Preço</th>
                        <th class="text-left py-4 px-4 text-[10px] font-bold uppercase tracking-widest text-slate-400">Badge</th>
                        <th class="text-left py-4 px-4 text-[10px] font-bold uppercase tracking-widest text-slate-400">Estado</th>
                        <th class="text-right py-4 px-4 text-[10px] font-bold uppercase tracking-widest text-slate-400">Acções</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50">
                    @forelse($products as $product)
                    <tr class="hover:bg-slate-50/50 transition">
                        <td class="py-3 px-4">
                            @if($product->image)
                            <img src="{{ asset('storage/' . $product->image) }}" class="w-12 h-12 rounded-xl object-cover border border-slate-200">
                            @else
                            <div class="w-12 h-12 rounded-xl bg-slate-100 flex items-center justify-center text-slate-400">
                                <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="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
                            </div>
                            @endif
                        </td>
                        <td class="py-3 px-4">
                            <p class="font-bold text-slate-900">{{ $product->name }}</p>
                            @if($product->featured)
                            <span class="text-[9px] font-bold uppercase tracking-widest text-amber-500">Destaque</span>
                            @endif
                        </td>
                        <td class="py-3 px-4">
                            <span class="text-xs text-slate-500 font-medium">{{ $product->category?->name ?? '—' }}</span>
                        </td>
                        <td class="py-3 px-4">
                            <span class="font-bold text-brand">{{ number_format($product->price, 2, ',', '.') }} Kz</span>
                            @if($product->original_price && $product->original_price > $product->price)
                            <span class="ml-1.5 text-[10px] text-slate-400 line-through">{{ number_format($product->original_price, 2, ',', '.') }} Kz</span>
                            @endif
                        </td>
                        <td class="py-3 px-4">
                            @if($product->badge)
                            <span class="inline-block px-2.5 py-1 text-[9px] font-bold uppercase tracking-widest rounded-lg" style="background-color: {{ $product->badge_color ?? '#00477D' }}10; color: {{ $product->badge_color ?? '#00477D' }}">{{ $product->badge }}</span>
                            @else
                            <span class="text-slate-300 text-xs">—</span>
                            @endif
                        </td>
                        <td class="py-3 px-4">
                            @if($product->is_active)
                            <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-green-50 text-green-600 text-[10px] font-bold uppercase tracking-widest rounded-lg border border-green-200">
                                <span class="w-1.5 h-1.5 bg-green-500 rounded-full"></span>
                                Sim
                            </span>
                            @else
                            <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-red-50 text-red-400 text-[10px] font-bold uppercase tracking-widest rounded-lg border border-red-100">
                                <span class="w-1.5 h-1.5 bg-red-400 rounded-full"></span>
                                Não
                            </span>
                            @endif
                        </td>
                        <td class="py-3 px-4 text-right">
                            <div class="flex items-center justify-end gap-2">
                                <a href="{{ route('admin.products.edit', $product) }}" class="inline-flex items-center gap-1.5 px-3.5 py-2 bg-blue-50 hover:bg-blue-100 text-blue-600 font-bold text-[10px] uppercase tracking-widest rounded-xl transition-all border border-blue-100">
                                    <svg class="w-3.5 h-3.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"/></svg>
                                    Editar
                                </a>
                                <form action="{{ route('admin.products.destroy', $product) }}" method="POST" onsubmit="return confirm('Tem a certeza?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="inline-flex items-center gap-1.5 px-3.5 py-2 bg-red-50 hover:bg-red-100 text-red-500 font-bold text-[10px] uppercase tracking-widest rounded-xl transition-all border border-red-100">
                                        <svg class="w-3.5 h-3.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"/></svg>
                                        Eliminar
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="py-16 text-center">
                            <div class="flex flex-col items-center gap-3">
                                <svg class="w-12 h-12 text-slate-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
                                <p class="text-slate-300 text-xs font-bold uppercase tracking-widest">Nenhum produto registado</p>
                                <a href="{{ route('admin.products.create') }}" class="text-brand text-[10px] font-bold uppercase tracking-widest hover:underline">Criar primeiro produto →</a>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    @if($products instanceof \Illuminate\Pagination\AbstractPaginator && $products->hasPages())
    <div class="mt-6">
        {{ $products->links() }}
    </div>
    @endif
</div>
@endsection
