@extends('layouts.main')

@section('title', $product->name)

@section('content')
    <div class="container mx-auto px-4 py-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- Product Images -->
            <div class="space-y-4">
                <div class="swiper-container product-main-slider">
                    <div class="swiper-wrapper">
                        @foreach($product->images as $image)
                            <div class="swiper-slide">
                                <img src="{{ $image->image_url }}" alt="{{ $product->name }}"
                                    class="w-full h-[500px] object-cover rounded-lg">
                            </div>
                        @endforeach
                    </div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>

                @if($product->images->count() > 1)
                    <div class="swiper-container product-thumbs-slider">
                        <div class="swiper-wrapper">
                            @foreach($product->images as $image)
                                <div class="swiper-slide">
                                    <img src="{{ $image->image_url }}" alt="{{ $product->name }}"
                                        class="w-full h-24 object-cover rounded cursor-pointer">
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>

            <!-- Product Info -->
            <div class="space-y-6">
                <div>
                    <h1 class="text-3xl font-bold mb-2">{{ $product->name }}</h1>
                    <a href="{{ route('categories.show', $product->category) }}" class="text-blue-600 hover:underline">
                        {{ $product->category->name }}
                    </a>
                </div>

                <!-- Price -->
                <div>
                    @php
                        $currentPrice = $product->getCurrentPrice();
                        $basePrice = $product->price;
                    @endphp

                    @if($currentPrice < $basePrice)
                        <div class="flex items-center space-x-3">
                            <span class="text-3xl font-bold text-red-600">₺{{ number_format($currentPrice, 2) }}</span>
                            <span class="text-xl text-gray-500 line-through">₺{{ number_format($basePrice, 2) }}</span>
                        </div>
                    @else
                        <span class="text-3xl font-bold">₺{{ number_format($currentPrice, 2) }}</span>
                    @endif
                </div>

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

                <!-- Allergens -->
                @if($product->allergens->count() > 0)
                    <div>
                        <h3 class="text-lg font-medium mb-2">Allergens</h3>
                        <div class="flex flex-wrap gap-2">
                            @foreach($product->allergens as $allergen)
                                <div class="flex items-center space-x-1 px-3 py-1 bg-red-100 text-red-800 rounded-full">
                                    @if($allergen->icon)
                                        <img src="{{ asset('storage/' . $allergen->icon) }}" alt="{{ $allergen->name }}" class="w-4 h-4">
                                    @endif
                                    <span>{{ $allergen->name }}</span>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

                <!-- Add to Cart -->
                <form action="{{ route('cart.add', $product) }}" method="POST" class="space-y-4">
                    @csrf
                    <div>
                        <label for="quantity" class="block text-sm font-medium text-gray-700 mb-1">Quantity</label>
                        <div class="flex items-center space-x-3">
                            <button type="button" onclick="decrementQuantity()" class="p-2 border rounded hover:bg-gray-100">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"/>
                                </svg>
                            </button>
                            <input type="number" name="quantity" id="quantity" value="1" min="1" max="99"
                                class="w-20 text-center border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500">
                            <button type="button" onclick="incrementQuantity()" class="p-2 border rounded hover:bg-gray-100">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                                </svg>
                            </button>
                        </div>
                    </div>
                    <button type="submit" class="w-full bg-blue-600 text-white py-3 px-6 rounded-lg hover:bg-blue-700">
                        Add to Cart
                    </button>
                </form>
            </div>
        </div>

        <!-- Customer Reviews -->
        <div class="mt-16">
            <div class="border-t pt-8">
                <h2 class="text-2xl font-bold mb-8">Customer Reviews</h2>

                <!-- Average Rating -->
                @if($product->reviews->count() > 0)
                    <div class="flex items-center mb-8">
                        <div class="flex items-center">
                            @php
                                $averageRating = $product->reviews->avg('rating');
                                $fullStars = floor($averageRating);
                                $hasHalfStar = ($averageRating - $fullStars) >= 0.5;
                            @endphp

                            @for($i = 1; $i <= 5; $i++)
                                @if($i <= $fullStars)
                                    <svg class="w-6 h-6 text-yellow-400 fill-current" viewBox="0 0 20 20">
                                        <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
                                    </svg>
                                @elseif($i == $fullStars + 1 && $hasHalfStar)
                                    <svg class="w-6 h-6 text-yellow-400 fill-current" viewBox="0 0 20 20">
                                        <defs>
                                            <linearGradient id="half">
                                                <stop offset="50%" stop-color="currentColor"/>
                                                <stop offset="50%" stop-color="#e5e7eb"/>
                                            </linearGradient>
                                        </defs>
                                        <path fill="url(#half)" d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
                                    </svg>
                                @else
                                    <svg class="w-6 h-6 text-gray-200 fill-current" viewBox="0 0 20 20">
                                        <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
                                    </svg>
                                @endif
                            @endfor
                        </div>
                        <span class="ml-2 text-lg font-medium">{{ number_format($averageRating, 1) }} out of 5</span>
                        <span class="ml-2 text-gray-500">({{ $product->reviews->count() }} reviews)</span>
                    </div>
                @endif

                <!-- Reviews List -->
                <div class="space-y-8">
                    @forelse($product->reviews()->approved()->latest()->get() as $review)
                        <div class="border-b pb-8">
                            <div class="flex items-center mb-4">
                                <div class="flex items-center">
                                    @for($i = 1; $i <= 5; $i++)
                                        <svg class="w-5 h-5 {{ $i <= $review->rating ? 'text-yellow-400' : 'text-gray-200' }} fill-current" viewBox="0 0 20 20">
                                            <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
                                        </svg>
                                    @endfor
                                </div>
                                <span class="ml-2 font-medium">{{ $review->customer_name }}</span>
                                <span class="ml-2 text-gray-500">{{ $review->created_at->diffForHumans() }}</span>
                            </div>

                            @if($review->image_path)
                                <div class="mb-4">
                                    <img src="{{ asset('storage/' . $review->image_path) }}" alt="Review image"
                                        class="w-24 h-24 object-cover rounded">
                                </div>
                            @endif

                            <p class="text-gray-700">{{ $review->content }}</p>
                        </div>
                    @empty
                        <p class="text-gray-500">No reviews yet. Be the first to review this product!</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
@endpush

@push('scripts')
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
    // Initialize main slider
    const mainSlider = new Swiper('.product-main-slider', {
        loop: true,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });

    // Initialize thumbnails slider
    const thumbsSlider = new Swiper('.product-thumbs-slider', {
        loop: true,
        spaceBetween: 10,
        slidesPerView: 4,
        freeMode: true,
        watchSlidesProgress: true,
    });

    // Link the sliders
    mainSlider.controller.control = thumbsSlider;
    thumbsSlider.controller.control = mainSlider;

    // Quantity controls
    function decrementQuantity() {
        const input = document.getElementById('quantity');
        const value = parseInt(input.value);
        if (value > 1) {
            input.value = value - 1;
        }
    }

    function incrementQuantity() {
        const input = document.getElementById('quantity');
        const value = parseInt(input.value);
        if (value < 99) {
            input.value = value + 1;
        }
    }
</script>
@endpush