@extends('layouts.main-app')

@section('title', 'Home')

@section('content')

    @include('layouts.navbar')

    <div>
        {{-- <div class="container mx-auto">
            <h1 class="font-light">
                Home/Shop/Cold Plunge Units/New Product Luxury Acrylic Outdoor Hot Tub
            </h1>
        </div> --}}

        <div class="container md:mx-40 p-6 grid md:grid-cols-2 gap-6">
            <!-- Product Image Section -->
            <div>
                <img src="{{ asset($product->thumbnail_image) }}" alt="Product"
                    class="w-full object-cover rounded-md" id="main-product">
                <div class="flex mt-4 space-x-2 overflow-hidden">
                    <div class="w-full h-full flex  items-center justify-start gap-4">
                        @if (is_array($product->sub_thumbnail_images) && count($product->sub_thumbnail_images) > 0)
                            @foreach ($product->sub_thumbnail_images as $thumbnail)
                                <img src="{{ asset($thumbnail) }}" alt="Thumbnail"
                                    class="w-16 h-16 object-cover rounded-md">
                            @endforeach
                        @else
                            <span>No thumbnails available.</span> <!-- Optional message if no thumbnails -->
                        @endif
                    </div>
                </div>
            </div>

            <!-- Product Details Section -->
            <div>
                <h2 class="text-3xl font-bold">{{ $product->name }}</h2>
                <div class="flex items-center space-x-2 mt-2">
                    <!-- Stars -->
                    <div class="flex items-center">
                        <svg class="w-4 h-4 text-yellow-300 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                            fill="currentColor" viewBox="0 0 22 20">
                            <path
                                d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
                        </svg>
                        <svg class="w-4 h-4 text-yellow-300 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                            fill="currentColor" viewBox="0 0 22 20">
                            <path
                                d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
                        </svg>
                        <svg class="w-4 h-4 text-yellow-300 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                            fill="currentColor" viewBox="0 0 22 20">
                            <path
                                d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
                        </svg>
                        <svg class="w-4 h-4 text-yellow-300 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                            fill="currentColor" viewBox="0 0 22 20">
                            <path
                                d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
                        </svg>
                        <svg class="w-4 h-4 ms-1 text-gray-300 dark:text-gray-500" aria-hidden="true"
                            xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
                            <path
                                d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
                        </svg>
                    </div>
                    <!--<div class="flex items-center mt-2">-->
                    <!--    @for ($i = 0; $i < 5; $i++)-->
                    <!--        <svg class="w-4 h-4 {{ $i < $product->rating ? 'text-yellow-400' : 'text-gray-300' }}"-->
                    <!--            fill="currentColor" viewBox="0 0 24 24">-->
                    <!--            <path-->
                    <!--                d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z">-->
                    <!--            </path>-->
                    <!--        </svg>-->
                    <!--    @endfor-->
                    <!--</div>-->
                    <div class="flex items-center mt-2 text-sm text-gray-500">
                        <img src="{{ asset('images/icon-instock.png') }}" alt="In Stock" class="">
                        <span class="px-2">{{ $product->in_stock > 0 ? 'In Stock' : 'Out of Stock' }}</span>
                    </div>
                </div>

                <!-- Price -->
                <div class="flex items-center mt-4 space-x-4">
                    <span class="text-red-500 text-2xl font-bold">₱{{ number_format($product->price, 2) }}</span>
                    <span
                        class="text-gray-500 text-sm font-bold line-through">₱{{ number_format($product->discounted_price, 2) }}</span>
                </div>
                <div class="mt-6">
                    <h3 class="text-gray-600 font-bold mb-2">Specifications</h3>
                    <ul class="list-disc pl-10 py-2">
                        @php
                            // Decode the JSON string back to an array
                            $specificationsArray = json_decode($product->specifications, true);
                        @endphp

                        @if (is_array($specificationsArray) && !empty($specificationsArray))
                            @foreach ($specificationsArray as $specification)
                                <li>{{ $specification }}</li>
                            @endforeach
                        @else
                            <li>No specifications available.</li>
                        @endif
                    </ul>
                </div>
                <!-- Product Info -->
                {{-- <ul class="mt-4 space-y-2 text-gray-600">
                    @foreach ($product->features as $feature)
                        <li>• {{ $feature }}</li>
                    @endforeach
                </ul> --}}
                <hr class="bg-gray-300 my-4">

                <!-- Variations -->
                <div class="mt-6">
                    <h3 class="text-gray-600 font-bold mb-2">Variations</h3>
                    <div class="flex space-x-3">

                        @if (is_array($product->variations))
                            @php
                                $variations = $product->variations;
                            @endphp
                        @else
                            @php
                                $variations = json_decode($product->variations, true);
                            @endphp
                        @endif

                        @if (is_array($variations) && count($variations) > 0)
                            @foreach ($variations as $variation)
                                <button
                                    class="px-4 py-2 border border-gray-400 rounded-md text-gray-600 hover:bg-black hover:text-white">{{ $variation }}</button>
                            @endforeach
                        @else
                            <p>No variations available.</p>
                        @endif



                    </div>
                </div>

                <!-- Additional Info -->
                <div class="mt-6 space-y-2 text-gray-600">
    <div>
        <span class="font-bold">Categories:</span>
        @if($product->categories->isNotEmpty())
            <ul>
                @foreach($product->categories as $category)
                    <li>{{ $category->name }}</li>
                @endforeach
            </ul>
        @else
            <span>No categories available</span>
        @endif
    </div>
    <div><span class="font-bold">Stock:</span> {{ $product->in_stock }}</div>
    <div><span class="font-bold">Warranty:</span> {{ $product->warranty }}</div>
</div>

                <hr class="bg-gray-300 my-4">

                <!-- Quantity and Add to Cart -->
                <div class="mt-6">
                    <!-- Modal HTML -->
                    <div id="cartModal"
                        class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 hidden">
                        <div class="bg-white rounded-lg p-6 shadow-lg">
                            <h2 class="text-lg font-bold">Item added to cart!</h2>
                            <button id="closeModal" class="mt-4 px-4 py-2 bg-red-500 text-white rounded-md">Close</button>
                        </div>
                    </div>

                    <form action="{{ route('cart.add', $product->id) }}" method="POST">
                        @csrf
                        <div class="flex items-center space-x-4">
                            <div class="flex items-center border border-gray-400 rounded-md">
                                <div>
                                    <button type="button" id="decrease" class="px-3 py-2" onclick="decrement()">-</button>
                                    <input type="text" id="quantity" name="quantity" value="1"
                                        class="w-10 text-center border-none">
                                    <button type="button" id="increase" class="px-3 py-2" onclick="increment()">+</button>
                                </div>
                            </div>
                            <button
                                class="px-6 py-3 bg-red-500 text-white font-bold rounded-md hover:bg-black 
                                {{ $product->in_stock == 0 ? 'cursor-not-allowed opacity-50' : '' }}"
                                {{ $product->in_stock == 0 ? 'disabled' : '' }}>
                                ADD TO CART
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="container mx-auto">
            <div>
                <h1 class="font-bold text-3xl">Description</h1>
                <hr class="bg-gray-300 my-4">
                <h1 class="text-lg">About This Product</h1>
                <p class="py-2">{{ $product->description }}</p>
                <br>
                <br>
                <h1 class="font-bold text-3xl">Specifications</h1>
                <div class="mt-6">
                    <h3 class="text-gray-600 font-bold mb-2">Specifications</h3>
                    <ul class="list-disc pl-10 py-2">
    @php
        // Decode the JSON string back to an array
        $specificationsArray = json_decode($product->specifications, true);
    @endphp

    @if (is_array($specificationsArray) && !empty($specificationsArray))
        @foreach ($specificationsArray as $specification)
            <li>{{ $specification }}</li>
        @endforeach
    @else
        <li>No specifications available.</li>
    @endif
</ul>

                </div>
            </div>

        </div>
        <div class="container mx-auto">
            <div>
                <h1 class="font-bold text-3xl">Recommended Products</h1>
                <hr class="bg-gray-300 my-4">
            </div>
            <div>
                <div class="grid grid-cols-3">
                    @foreach ($moreProducts as $product)
                        <div class="p-4">
                            <div class="bg-white border rounded-lg shadow-md p-4 h-full flex flex-col justify-between">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div class="flex justify-center items-center">
                                        <img src="{{ asset($product->thumbnail_image) }}"
                                            alt="{{ $product->name }}" class="w-24 h-24 object-contain">
                                    </div>
                                    <div>
                                        <h2 class="text-gray-900 text-sm font-semibold">{{ $product->name }}</h2>
                                        <div class="flex items-center mt-2">
                                            @if ($product->discounted_price)
                                                <span class="text-gray-400 line-through text-sm mr-2">
                                                    ₱{{ number_format($product->price, 2) }}
                                                </span>
                                            @endif
                                            <span class="text-red-500 font-bold text-lg">
                                                ₱{{ number_format($product->discounted_price ?? $product->price, 2) }}
                                            </span>
                                        </div>
                                        <div class="flex items-center mt-2">
                                            <div class="flex">
                                                @for ($i = 0; $i < 5; $i++)
                                                    <svg class="w-4 h-4 {{ $i < $product->rating ? 'text-yellow-400' : 'text-gray-300' }}"
                                                        fill="currentColor" viewBox="0 0 24 24">
                                                        <path
                                                            d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z">
                                                        </path>
                                                    </svg>
                                                @endfor
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex justify-between items-center mt-4">
                                    <div class="flex items-center text-sm text-gray-500">
                                        <img src="{{ asset('images/icon-instock.png') }}" alt="In Stock" class="w-5 h-5">
                                        <span class="px-2">In Stock</span>
                                    </div>
                                    <a href="{{ route('shop.view', $product->id) }}"
                                        class="bg-red-500 text-white font-bold py-2 px-4 rounded-full text-sm md:text-lg">
                                        ADD TO CART
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        @include('layouts.footer')
    </div>

    <script>
        function increment() {
            const quantityInput = document.getElementById('quantity');
            console.log('Increment clicked');
            quantityInput.value = parseInt(quantityInput.value) + 1;
        }

        function decrement() {
            const quantityInput = document.getElementById('quantity');
            console.log('Decrement clicked');
            if (parseInt(quantityInput.value) > 1) {
                quantityInput.value = parseInt(quantityInput.value) - 1;
            }
        }
        // Select the main product image
        const mainProduct = document.getElementById('main-product');

        // Select all thumbnail images
        const thumbnails = document.querySelectorAll('[id^="product-"]');

        // Add event listeners to each thumbnail
        thumbnails.forEach(thumbnail => {
            thumbnail.addEventListener('click', function() {
                // Get the 'src' attribute of the clicked thumbnail
                const newSrc = this.getAttribute('src');

                // Update the main product image's 'src' attribute with the clicked thumbnail's 'src'
                mainProduct.setAttribute('src', newSrc);
            });
        });
    </script>
@endsection