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

@section('content')
<div class="container mx-auto px-4 py-8">
	
	<!-- 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-purple-600 transition">
			<i class="fas fa-home"></i> Início
		</a>
		<i class="fas fa-chevron-right text-gray-400 text-xs"></i>
		@if($produto->categoria && $produto->categoria->hash_ecommerce)
		<a href="{{ route('loja.produtos-categoria', ['hash' => $produto->categoria->hash_ecommerce, 'link' => $config->loja_id]) }}" class="text-gray-600 hover:text-purple-600 transition">
			{{ $produto->categoria->nome }}
		</a>
		<i class="fas fa-chevron-right text-gray-400 text-xs"></i>
		@endif
		<span class="text-gray-900 font-semibold">{{ $produto->nome }}</span>
	</div>
	
	<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
		
		<!-- Product Gallery -->
		<div>
			<div class="bg-white rounded-2xl shadow-lg border-2 border-gray-100 p-6 sticky top-24">
				<!-- Main Image -->
				<div id="main-image" class="bg-gray-50 rounded-xl overflow-hidden mb-4 aspect-square flex items-center justify-center">
					<img src="{{ $produto->img }}" alt="{{ $produto->nome }}" class="w-full h-full object-contain p-8 hover:scale-105 transition duration-500">
				</div>
				
				<!-- Thumbnails -->
				<div class="grid grid-cols-5 gap-2">
					<div class="thumbnail active border-2 border-purple-600 rounded-lg overflow-hidden cursor-pointer bg-gray-50 aspect-square" data-image="{{ $produto->img }}">
						<img src="{{ $produto->img }}" alt="{{ $produto->nome }}" class="w-full h-full object-contain p-2">
					</div>
					@foreach($produto->galeria as $g)
					<div class="thumbnail border-2 border-gray-200 hover:border-purple-400 rounded-lg overflow-hidden cursor-pointer bg-gray-50 aspect-square transition" data-image="{{ $g->img }}">
						<img src="{{ $g->img }}" alt="{{ $produto->nome }}" class="w-full h-full object-contain p-2">
					</div>
					@endforeach
				</div>
			</div>
		</div>
		
		<!-- Product Info -->
		<div>
			<div class="bg-white rounded-2xl shadow-lg border-2 border-gray-100 p-8">
				
				<!-- Category Badge -->
				@if($produto->categoria && $produto->categoria->hash_ecommerce)
				<a href="{{ route('loja.produtos-categoria', ['hash' => $produto->categoria->hash_ecommerce, 'link' => $config->loja_id]) }}" class="inline-flex items-center gap-2 px-4 py-2 bg-purple-50 text-purple-700 rounded-full text-sm font-bold hover:bg-purple-100 transition mb-4">
					<i class="fas fa-tag"></i>
					{{ $produto->categoria->nome }}
				</a>
				@endif
				
				<!-- Product Title -->
				<h1 class="text-3xl font-black text-gray-900 mb-4">{{ $produto->nome }}</h1>
				
				<!-- Price Section -->
				<div class="flex items-center gap-4 mb-6">
					<span class="text-4xl font-black text-purple-600">R$ <span class="product-price">{{ number_format($produto->valor_ecommerce, 2, ',', '.') }}</span></span>
					
					@if($produto->percentual_desconto > 0)
					<div class="flex items-center gap-2">
						<span class="text-xl text-gray-400 line-through">
							R$ {{ number_format($produto->valor_ecommerce + ($produto->valor_ecommerce*$produto->percentual_desconto/100), 2, ',', '.') }}
						</span>
						<span class="px-3 py-1 bg-red-500 text-white text-sm font-bold rounded-full">
							-{{ $produto->percentual_desconto }}%
						</span>
					</div>
					@endif
				</div>
				
				<!-- Stock Badge -->
				<div class="inline-flex items-center gap-2 px-4 py-2 bg-green-50 text-green-700 rounded-xl font-bold mb-6">
					<i class="fas fa-check-circle"></i>
					<span>Em estoque</span>
				</div>
				
				<!-- Description -->
				@if($produto->descricao_ecommerce)
				<div class="p-4 bg-gray-50 rounded-xl border-l-4 border-purple-600 mb-6">
					<p class="text-gray-700 leading-relaxed">{{ $produto->descricao_ecommerce }}</p>
				</div>
				@endif
				
				<!-- Form -->
				<form method="post" action="{{ route('loja.adicionar-carrinho')}}">
					<input type="hidden" name="link" value="{{ $config->loja_id }}">
					<input type="hidden" name="produto_id" value="{{ $produto->id }}">
					@csrf
					
					<!-- Variations -->
					@if(sizeof($produto->variacoes) > 0)
					<div class="mb-6">
						<label class="block text-sm font-bold text-gray-700 mb-2">Selecione uma opção</label>
						<select id="variacao_id" name="variacao_id" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none transition font-medium">
							@foreach($produto->variacoes as $v)
							@if($v->valor > 0)
							<option @if($v->estoqueNegativo() == 1) disabled @endif value="{{ $v->id }}">{{ $v->descricao }}</option>
							@endif
							@endforeach
						</select>
					</div>
					@endif
					
					<!-- Stock Info -->
					@if($produto->gerenciar_estoque)
					<div class="p-4 bg-yellow-50 rounded-xl border-l-4 border-yellow-500 mb-6">
						<p class="text-sm text-yellow-800">
							<span class="font-bold">Quantidade disponível:</span> {{ number_format($produto->estoque->quantidade, 0) }} unidades
						</p>
					</div>
					@endif
					
					<!-- Quantity -->
					<div class="mb-6">
						<label class="block text-sm font-bold text-gray-700 mb-2">Quantidade</label>
						<div class="flex items-center border-2 border-gray-200 rounded-xl overflow-hidden w-40">
							<button type="button" class="qty-down w-12 h-12 bg-gray-50 hover:bg-purple-600 hover:text-white transition flex items-center justify-center font-bold text-xl">
								<i class="fas fa-minus"></i>
							</button>
							<input name="quantidade" type="number" value="1" min="1" class="qty-input w-16 h-12 text-center border-none font-bold text-lg" id="qty-input">
							<button type="button" class="qty-up w-12 h-12 bg-gray-50 hover:bg-purple-600 hover:text-white transition flex items-center justify-center font-bold text-xl">
								<i class="fas fa-plus"></i>
							</button>
						</div>
					</div>
					
					<!-- Add to Cart Button -->
					<button type="submit" class="w-full px-8 py-4 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white font-bold rounded-xl transition shadow-lg hover:shadow-xl flex items-center justify-center gap-3 text-lg">
						<i class="fas fa-shopping-cart text-xl"></i>
						<span>Adicionar ao Carrinho</span>
					</button>
				</form>
			</div>
		</div>
	</div>
	
	<!-- Full Description -->
	@if($produto->texto_ecommerce)
	<div class="mt-8">
		<div class="bg-white rounded-2xl shadow-lg border-2 border-gray-100 p-8">
			<h2 class="text-2xl font-black text-gray-900 mb-6 pb-4 border-b-2 border-purple-600 inline-block">Descrição Completa</h2>
			<div class="prose max-w-none text-gray-700">
				{!! $produto->texto_ecommerce !!}
			</div>
		</div>
	</div>
	@endif
	
</div>
@endsection

@section('js')
<script type="text/javascript">
$(function(){
	getVariacao()
	initGallery()
	initQuantity()
})

$(document).on("change", "#variacao_id", function () {
	getVariacao()
})

function getVariacao(){
	let variacao_id = $('#variacao_id').val()
	if(variacao_id) {
		$.get(path_url+'api/ecommerce/variacao/', {variacao_id: variacao_id})
		.done((success) => {
			$('.product-price').html(convertFloatToMoeda(success.valor))
		})
		.fail((err) => {
			console.log(err)
		})
	}
}

function initGallery() {
	$('.thumbnail').on('click', function() {
		const imageUrl = $(this).data('image');
		$('#main-image img').attr('src', imageUrl);
		$('.thumbnail').removeClass('active border-purple-600').addClass('border-gray-200');
		$(this).removeClass('border-gray-200').addClass('active border-purple-600');
	});
}

function initQuantity() {
	$('.qty-up').on('click', function() {
		const input = $('#qty-input');
		let value = parseInt(input.val()) || 1;
		input.val(value + 1);
	});

	$('.qty-down').on('click', function() {
		const input = $('#qty-input');
		let value = parseInt(input.val()) || 1;
		if (value > 1) {
			input.val(value - 1);
		}
	});
}
</script>
@endsection