@extends('layouts.site')

{{-- Seção do Cabeçalho com o Carrossel de Banners --}}
@section('header')
    @if($banners->isNotEmpty())
        <div id="heroCarousel" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
                @foreach($banners as $key => $banner)
                    <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="{{ $key }}" class="{{ $key == 0 ? 'active' : '' }}" aria-current="true" aria-label="Slide {{ $key + 1 }}"></button>
                @endforeach
            </div>
            <div class="carousel-inner">
                @foreach($banners as $key => $banner)
                    <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                        <a href="{{ $banner->link ?? '#' }}">
                            <img src="{{ asset('storage/' . $banner->imagem) }}" class="d-block w-100" alt="{{ $banner->titulo }}" style="max-height: 400px; object-fit: cover;">
                        </a>
                    </div>
                @endforeach
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    @endif
@endsection

{{-- Seção do Conteúdo com os Produtos --}}
@section('content')
    <h2 class="mb-4 fw-bold">Produtos em Destaque</h2>

    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
        @forelse($produtos as $produto)
            <div class="col">
                <div class="card h-100 shadow-sm product-card">
                    @if($produto->imagem)
                        <img src="{{ asset('storage/' . $produto->imagem) }}" class="card-img-top" alt="{{ $produto->nome }}" style="height: 200px; object-fit: cover;">
                    @else
                        <img src="https://via.placeholder.com/300x200.png/f8f9fa/6c757d?text=Sem+Imagem" class="card-img-top" alt="Sem Imagem">
                    @endif
                    <div class="card-body d-flex flex-column">
                        <div class="mb-auto">
                            <small class="text-muted">{{ $produto->categoria?->nome ?? 'Sem Categoria' }}</small>
                            <h5 class="card-title fs-6">{{ $produto->nome }}</h5>
                        </div>
                        <div class="mt-4">
                            <p class="card-text fw-bold fs-5">R$ {{ number_format($produto->preco, 2, ',', '.') }}</p>
                            
                            {{-- =============================================== --}}
                            {{--               A MUDANÇA ESTÁ AQUI               --}}
                            {{-- =============================================== --}}
                            <form action="{{ route('site.cart.add', $produto->id) }}" method="POST" class="d-grid">
                                @csrf
                                <button type="submit" class="btn btn-danger">
                                    <i class="fas fa-cart-plus"></i> Comprar
                                </button>
                            </form>
                            {{-- =============================================== --}}

                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12">
                <div class="alert alert-warning" role="alert">
                    Nenhum produto em destaque no momento.
                </div>
            </div>
        @endforelse
    </div>
@endsection