@extends('loja.default', ['title' => $categoria->nome])

@section('content')
<div class="container mx-auto px-4">
    
    <!-- Breadcrumb -->
    <div class="flex items-center gap-2 text-sm mb-8">
        <a href="{{ route('loja.index', ['link' => $config->loja_id]) }}" class="text-gray-600 hover:text-indigo-600 transition">
            <i class="fas fa-home"></i> Início
        </a>
        <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
        <span class="text-gray-900 font-semibold">{{ $categoria->nome }}</span>
    </div>
    
    <!-- Category Header -->
    <div class="mb-12">
        <h1 class="text-4xl font-black text-gray-900 mb-2">{{ $categoria->nome }}</h1>
        <p class="text-gray-600">{{ count($produtos) }} produto(s) encontrado(s)</p>
    </div>
    
    <!-- Products Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        @foreach($produtos as $p)
        <div class="product-card bg-white rounded-2xl shadow-lg border-2 border-gray-100 overflow-hidden group">
            <!-- Product Image -->
            <div class="relative overflow-hidden bg-gray-50 aspect-square">
                <img src="{{ $p->img }}" alt="{{ $p->nome }}" class="w-full h-full object-cover group-hover:scale-110 transition duration-500">
                
                <!-- Badges -->
                <div class="absolute top-4 left-4 flex flex-col gap-2">
                    @if($p->percentual_desconto > 0)
                    <span class="px-3 py-1 bg-red-500 text-white text-xs font-bold rounded-full shadow-lg">
                        -{{ $p->percentual_desconto }}%
                    </span>
                    @endif
                </div>
            </div>
            
            <!-- Product Info -->
            <div class="p-5">
                <!-- Category -->
                <p class="text-xs font-semibold text-indigo-600 uppercase tracking-wide mb-2">
                    {{ $p->categoria ? $p->categoria->nome : 'Geral' }}
                </p>
                
                <!-- Product Name -->
                <h3 class="text-lg font-bold text-gray-900 mb-3 line-clamp-2 min-h-[3.5rem]">
                    {{ $p->nome }}
                </h3>
                
                <!-- Price -->
                <div class="mb-4">
                    @if(sizeof($p->variacoes) > 0)
                    <div class="text-2xl font-black text-indigo-600">
                        {!! $p->valorPrimeiraVariacao() !!}
                    </div>
                    @else
                    @if($p->valor_ecommerce > 0)
                    <div class="flex items-center gap-2">
                        <span class="text-2xl font-black text-indigo-600">
                            R$ {{ number_format($p->valor_ecommerce, 2, ',', '.') }}
                        </span>
                        @if($p->percentual_desconto > 0)
                        <span class="text-sm text-gray-400 line-through">
                            R$ {{ number_format($p->valor_ecommerce + ($p->valor_ecommerce*$p->percentual_desconto/100), 2, ',', '.') }}
                        </span>
                        @endif
                    </div>
                    @endif
                    @endif
                </div>
                
                <!-- Add to Cart Button -->
                <a href="{{ route('loja.produto-detalhe', ['hash' => $p->hash_ecommerce, 'link' => $config->loja_id]) }}" class="block">
                    <button class="w-full px-6 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white font-bold rounded-xl transition shadow-lg hover:shadow-xl flex items-center justify-center gap-2">
                        <i class="fas fa-shopping-cart"></i>
                        <span>Adicionar ao Carrinho</span>
                    </button>
                </a>
            </div>
        </div>
        @endforeach
    </div>
    
    <!-- Empty State -->
    @if(count($produtos) == 0)
    <div class="text-center py-20">
        <div class="inline-flex items-center justify-center w-24 h-24 bg-gray-100 rounded-full mb-6">
            <i class="fas fa-box-open text-4xl text-gray-400"></i>
        </div>
        <h3 class="text-2xl font-bold text-gray-900 mb-2">Nenhum produto encontrado</h3>
        <p class="text-gray-600 mb-6">Não há produtos disponíveis nesta categoria no momento.</p>
        <a href="{{ route('loja.index', ['link' => $config->loja_id]) }}" class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-bold rounded-xl hover:from-indigo-700 hover:to-purple-700 transition">
            <i class="fas fa-arrow-left"></i>
            <span>Voltar para Início</span>
        </a>
    </div>
    @endif
    
</div>
@endsection