@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 mx-auto w-full h-full">
            <div class="  md:mx-10 p-6 grid md:grid-cols-2 gap-6">
                <!-- Product Image Section -->
                <div>
                    <img src="{{ asset($product->thumbnail_image) }}" alt="{{ $product->name }}"
                        class="w-full object-cover rounded-md" id="main-product">
                    <div class="flex mt-4 space-x-2 overflow-x-auto">
                        <div class="flex items-center justify-start gap-4 px-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 cursor-pointer hover:opacity-75 transition"
                                        onclick="updateMainImage(this.src)">
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Product Details Section -->
                <div class="px-5">
                    <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 ">
                            <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>

                            <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">
                                        <button type="button" class="px-3 py-2 hover:bg-gray-100"
                                            onclick="updateQuantity(-1)">-</button>
                                        <input type="number" id="quantity" name="quantity" value="1" min="1"
                                            max="{{ $product->in_stock }}" class="w-16 text-center border-none"
                                            onchange="validateQuantity(this)">
                                        <button type="button" class="px-3 py-2 hover:bg-gray-100"
                                            onclick="updateQuantity(1)">+</button>
                                    </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>


            <div class="container mx-auto px-4">
                <div class="md:mx-40 p-3">
                    <!-- Description Section -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <div class="col-span-1 lg:col-span-2">
                            <h1 class="font-bold text-2xl md:text-3xl mb-4">Description</h1>
                            <hr class="bg-gray-300 mb-6">
                        </div>
                        
                        <div class="space-y-4">
                            <h2 class="text-lg md:text-xl font-semibold">About This Product</h2>
                            <p class="text-gray-600">{{ $product->description }}</p>
                        </div>
                        
                        <!-- Specifications Section -->
                        <div class="space-y-4">
                            <h2 class="text-lg md:text-xl font-semibold">Specifications</h2>
                            <ul class="list-disc pl-5 space-y-2 text-gray-600">
                                @php
                                    $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>
            <div class="container mx-auto ">
                <div class="md:mx-40 p-6 grid md:grid-cols-2 gap-6">
                    <h1 class="font-bold text-3xl">Recommended Products</h1>
                    <hr class="bg-gray-300 my-4">
                </div>
                <div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                        @foreach ($moreProducts as $product)
                            <div class="p-2 sm:p-4">
                                <div class="bg-white border rounded-lg shadow-md p-4 h-full flex flex-col justify-between">
                                    <!-- Product Content Grid -->
                                    <div class="flex flex-row sm:flex-col md:flex-row gap-4">
                                        <!-- Image Container -->
                                        <div class="w-1/3 sm:w-full md:w-1/2 flex justify-center items-center">
                                            <a href="{{ route('shop.view', $product->id) }}">
                                                <img src="{{ asset($product->thumbnail_image) }}" 
                                                     alt="{{ $product->name }}"
                                                     class="w-full h-32 sm:h-40 object-contain">
                                            </a>
                                        </div>
                                        
                                        <!-- Product Details -->
                                        <div class="w-2/3 sm:w-full md:w-1/2 flex flex-col justify-between">
                                            <h2 class="text-gray-900 text-sm sm:text-base font-semibold line-clamp-2">
                                                {{ $product->name }}
                                            </h2>
                                            
                                            <!-- Price Section -->
                                            <div class="flex items-center mt-2">
                                                @if ($product->discounted_price)
                                                    <span class="text-gray-400 line-through text-xs sm:text-sm mr-2">
                                                        ₱{{ number_format($product->price, 2) }}
                                                    </span>
                                                @endif
                                                <span class="text-red-500 font-bold text-base sm:text-lg">
                                                    ₱{{ number_format($product->discounted_price ?? $product->price, 2) }}
                                                </span>
                                            </div>
                                            
                                            <!-- Rating Stars -->
                                            <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>

                                    <!-- Bottom Section -->
                                    <div class="flex flex-col sm:flex-row items-center gap-2 mt-4">
                                        <div class="flex items-center text-sm text-gray-500 w-full sm:w-auto">
                                            <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="w-full sm:w-auto bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-full text-sm text-center transition-colors">
                                            ADD TO CART
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

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

        <script>
            function updateMainImage(src) {
                document.getElementById('main-product').src = src;
            }

            function updateQuantity(change) {
                const input = document.getElementById('quantity');
                const newValue = parseInt(input.value) + change;
                const maxStock = {{ $product->in_stock }};

                if (newValue >= 1 && newValue <= maxStock) {
                    input.value = newValue;
                }
            }

            function validateQuantity(input) {
                const value = parseInt(input.value);
                const maxStock = {{ $product->in_stock }};

                if (isNaN(value) || value < 1) {
                    input.value = 1;
                } else if (value > maxStock) {
                    input.value = maxStock;
                }
            }
        </script>
    @endsection