@extends('layouts.main')

@section('title', $product->name)
@section('meta_description', strip_tags($product->description))
@section('meta_keywords', $product->name . ', ' . ($product->category ? $product->category->name : 'ürün') . ', Serap Gerebiç, Kilis, geleneksel lezzetler')
@section('og_title', $product->name)
@section('og_description', strip_tags($product->description))
@section('og_type', 'product')
@if($product->images->count() > 0)
@section('og_image', asset('storage/' . $product->images->first()->image_path))
@section('twitter_image', asset('storage/' . $product->images->first()->image_path))
@endif

@push('styles')
    <style>
        .swiper-button-next,
        .swiper-button-prev {
            color: #2C5530;
            background: rgba(255, 255, 255, 0.8);
            padding: 20px;
            border-radius: 50%;
            width: 20px;
            height: 20px;
        }
        .swiper-button-next:after,
        .swiper-button-prev:after {
            font-size: 16px;
        }
        .thumbnail-swiper {
            margin-top: 1rem;
        }
        .thumbnail-swiper .swiper-slide {
            opacity: 0.6;
            transition: opacity 0.3s;
        }
        .thumbnail-swiper .swiper-slide-thumb-active {
            opacity: 1;
        }
        .main-swiper {
            height: 500px;
        }
        .main-swiper .swiper-slide {
            height: 100%;
            background: white;
        }
        .main-swiper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .thumbnail-swiper .swiper-slide {
            height: 100px;
            background: white;
        }
        .thumbnail-swiper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
@endpush

@section('content')
    <div class="bg-[#b4bf9f] min-h-screen pt-32">
        <div class="container mx-auto px-4 py-12">
            <div class="bg-[#DBDBBC] rounded-2xl p-8">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
                    <!-- Sol Taraf - Ürün Görselleri -->
                    <div class="space-y-4">
                        <!-- Ana Slider -->
                        <div class="swiper main-swiper rounded-xl overflow-hidden">
                            <div class="swiper-wrapper">
                                @foreach($product->images as $image)
                                    <div class="swiper-slide">
                                        <img src="{{ asset('storage/' . $image->image_path) }}"
                                             alt="{{ $product->name }}">
                                    </div>
                                @endforeach
                            </div>
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>

                        <!-- Thumbnail Slider -->
                        <div class="swiper thumbnail-swiper">
                            <div class="swiper-wrapper">
                                @foreach($product->images as $image)
                                    <div class="swiper-slide rounded-lg overflow-hidden">
                                        <img src="{{ asset('storage/' . $image->image_path) }}"
                                             alt="{{ $product->name }}">
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <!-- Sağ Taraf - Ürün Bilgileri -->
                    <div class="space-y-8">
                        <h1 class="text-4xl font-bold text-[#2C5530]">{{ $product->name }}</h1>

                        @if($product->description)
                            <div class="prose max-w-none text-gray-700 text-lg">
                                {!! $product->description !!}
                            </div>
                        @endif

                        @if($product->sub_description)
                            <div class="prose max-w-none text-gray-600">
                                {!! $product->sub_description !!}
                            </div>
                        @endif

                        <!-- Fiyat -->
                        <div class="text-4xl font-bold text-[#2C5530]">
                            ₺{{ number_format($product->price, 2) }} <span class="text-lg font-normal text-gray-600">/ kg</span>
                        </div>

                        <!-- Ağırlık Seçimi -->
                        <div class="space-y-4">
                            <label class="block text-gray-700 font-medium">Ağırlık Seçimi:</label>
                            <div class="grid grid-cols-2 md:grid-cols-2 gap-2">
                                @if($product->activeWeights->count() > 0)
                                    @foreach($product->activeWeights as $weightOption)
                                        <button type="button" 
                                            class="weight-option border-2 border-[#2C5530] bg-[#DBDBBC] text-[#2C5530] py-3 px-2 rounded-lg font-medium hover:bg-[#2C5530] hover:text-white transition-colors text-center {{ $weightOption->is_default ? 'bg-[#2C5530] text-white' : '' }}"
                                            data-weight="{{ $weightOption->weight }}" data-price="{{ number_format($product->price * $weightOption->weight, 2) }}">
                                            {{ number_format($weightOption->weight, 1) }} KG
                                            <div class="text-sm mt-1">{{ number_format($product->price * $weightOption->weight, 2) }} TL</div>
                                        </button>
                                    @endforeach
                                @else
                                    <button type="button" 
                                        class="weight-option border-2 border-[#2C5530] bg-[#2C5530] text-white py-3 px-2 rounded-lg font-medium transition-colors text-center"
                                        data-weight="1" data-price="{{ number_format($product->price, 2) }}">
                                        1 KG
                                        <div class="text-sm mt-1">{{ number_format($product->price, 2) }} TL</div>
                                    </button>
                                @endif
                            </div>
                            <input type="hidden" id="selectedWeight" value="{{ $product->defaultWeight() ? $product->defaultWeight()->weight : 1 }}">
                        </div>

                        <!-- İçindekiler -->
                        @if($product->allergens->count() > 0)
                            <div class="space-y-2">
                                <label class="block text-gray-700">İçindekiler:</label>
                                <div class="flex flex-wrap gap-2">
                                    @foreach($product->allergens as $allergen)
                                        <span class="px-4 py-2 bg-red-100 text-red-800 rounded-full text-sm">
                                            {{ $allergen->name }}
                                        </span>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        <!-- Sepete Ekle -->
                        <div class="space-y-4">
                            @include('partials.add-to-cart-button', [
                                'product' => $product,
                                'buttonClass' => 'w-full bg-[#2C5530] text-white py-4 rounded-lg font-medium hover:bg-[#234226] transition-colors flex items-center justify-center gap-2',
                                'iconClass' => 'h-6 w-6',
                                'textClass' => 'text-base font-medium',
                                'showQuantitySelector' => true,
                                'fullWidth' => true
                            ])
                            
                            <a href="{{ route('cart.index') }}" class="block w-full border border-[#2C5530] bg-[#e1e1c8] text-[#2C5530] py-4 rounded-lg font-medium hover:bg-[#d5d5b0] transition-colors text-center">
                                Sepete Git
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const thumbsSwiper = new Swiper('.thumbnail-swiper', {
                spaceBetween: 10,
                slidesPerView: 4,
                freeMode: true,
                watchSlidesProgress: true,
            });

            const mainSwiper = new Swiper('.main-swiper', {
                spaceBetween: 10,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                thumbs: {
                    swiper: thumbsSwiper,
                },
            });
            
            // Weight selection handling
            const weightOptions = document.querySelectorAll('.weight-option');
            const selectedWeightInput = document.getElementById('selectedWeight');

            // Set default selected weight
            @php
                $defaultWeight = $product->defaultWeight() ? $product->defaultWeight()->weight : 1;
            @endphp
            const defaultWeight = "{{ $defaultWeight }}";
            selectedWeightInput.value = defaultWeight;

            // Find and activate the default option
            weightOptions.forEach(option => {
                if (option.getAttribute('data-weight') === defaultWeight) {
                    option.classList.remove('bg-[#DBDBBC]', 'text-[#2C5530]');
                    option.classList.add('bg-[#2C5530]', 'text-white');
                }

                option.addEventListener('click', function() {
                    // Remove active class from all options
                    weightOptions.forEach(opt => {
                        opt.classList.remove('bg-[#2C5530]', 'text-white');
                    });

                    // Add active class to selected option
                    this.classList.remove('bg-[#DBDBBC]', 'text-[#2C5530]');
                    this.classList.add('bg-[#2C5530]', 'text-white');

                    // Update selected weight
                    const weight = this.getAttribute('data-weight');
                    selectedWeightInput.value = weight;
                });
            });

            // GA4: Track view_item event
            if (window.dataLayer) {
                const productPrice = parseFloat("{{ $product->price }}");

                window.dataLayer.push({
                    event: 'view_item',
                    ecommerce: {
                        currency: 'TRY',
                        value: productPrice * parseFloat(defaultWeight),
                        items: [{
                            item_id: '{{ $product->id }}',
                            item_name: @json($product->name),
                            affiliation: 'Serap Gerebiç',
                            currency: 'TRY',
                            item_brand: 'Serap Gerebiç',
                            item_category: @json($product->category ? $product->category->name : ''),
                            price: productPrice,
                            quantity: 1,
                            item_variant: defaultWeight + 'kg'
                        }]
                    }
                });
            }
        });
    </script>
@endpush