@extends('layouts.site')

@section('title', $produto->nome)

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                @if($produto->imagem)
                    <img src="{{ asset('storage/' . $produto->imagem) }}" class="img-fluid rounded shadow-sm" alt="{{ $produto->nome }}">
                @else
                    <img src="{{ asset('images/sem-imagem.jpg') }}" class="img-fluid rounded shadow-sm" alt="Produto sem imagem">
                @endif
            </div>

            <div class="col-lg-6">
                <h2>{{ $produto->nome }}</h2>
                
                @if($produto->categoria)
                    <p class="text-muted mb-2">Categoria: <a href="{{ route('site.categorias.show', ['categoria' => $produto->categoria->slug]) }}" class="text-danger text-decoration-none">{{ $produto->categoria->nome }}</a></p>
                @endif

                <p class="fs-3 fw-bold text-danger">R$ {{ number_format($produto->preco, 2, ',', '.') }}</p>
                
                <hr>

                {{-- Formulário de Adicionar ao Carrinho --}}
                <form action="{{ route('site.cart.add', $produto->id) }}" method="POST">
                    @csrf
                    <div class="row align-items-end">
                        <div class="col-md-4">
                            <label for="quantity" class="form-label">Quantidade:</label>
                            <input type="number" name="quantity" id="quantity" class="form-control" value="1" min="1" max="{{ $produto->estoque }}">
                        </div>
                        <div class="col-md-8">
                            <button type="submit" class="btn btn-danger btn-lg w-100" {{ $produto->estoque <= 0 ? 'disabled' : '' }}>
                                <i class="fas fa-cart-plus me-2"></i> 
                                @if($produto->estoque > 0)
                                    Adicionar ao Carrinho
                                @else
                                    Produto Indisponível
                                @endif
                            </button>
                        </div>
                    </div>
                </form>

                <div class="mt-3">
                    <p class="mb-1"><small>
                        <strong>Estoque:</strong> 
                        @if($produto->estoque > 0)
                            <span class="text-success">{{ $produto->estoque }} unidades disponíveis</span>
                        @else
                            <span class="text-danger">Indisponível</span>
                        @endif
                    </small></p>
                </div>
            </div>
        </div>

        {{-- Descrição Completa (Abaixo) --}}
        <div class="row mt-5">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5>Descrição do Produto</h5>
                    </div>
                    <div class="card-body">
                        {!! nl2br(e($produto->descricao)) !!}
                    </div>
                </div>
            </div>
        </div>

        {{-- Seção de Produtos Relacionados --}}
        @if($produtosRelacionados->isNotEmpty())
            <div class="row mt-5">
                <div class="col-12">
                    <hr>
                    <h3 class="my-4 fw-bold">Produtos Relacionados</h3>
                </div>
                
                @foreach($produtosRelacionados as $relacionado)
                    <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
                        <div class="card h-100 shadow-sm product-card">
                            <a href="{{ route('site.produtos.show', $relacionado) }}">
                                <img src="{{ $relacionado->imagem ? asset('storage/' . $relacionado->imagem) : asset('images/sem-imagem.jpg') }}" class="card-img-top" alt="{{ $relacionado->nome }}" style="height: 180px; object-fit: cover;">
                            </a>
                            <div class="card-body d-flex flex-column p-3">
                                <div class="mb-auto">
                                    <small class="text-muted">{{ $relacionado->categoria?->nome ?? 'Sem Categoria' }}</small>
                                    <h5 class="card-title fs-6">
                                        <a href="{{ route('site.produtos.show', $relacionado) }}" class="text-dark text-decoration-none">{{ $relacionado->nome }}</a>
                                    </h5>
                                </div>
                                <div class="mt-3">
                                    <p class="card-text fw-bold fs-5 mb-2">R$ {{ number_format($relacionado->preco, 2, ',', '.') }}</p>
                                    <form action="{{ route('site.cart.add', $relacionado->id) }}" method="POST" class="d-grid">
                                        @csrf
                                        <button type="submit" class="btn btn-danger btn-sm">
                                            <i class="fas fa-cart-plus"></i> Comprar
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
@endsection