@extends('layouts.app')
@php
use Illuminate\Support\Str;
@endphp
@section('content')
<div class="product-detail py-5">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Breadcrumb -->
        <nav aria-label="breadcrumb" class="mb-4">
            <ol class="flex items-center text-sm text-gray-500 space-x-2">
                <li class="hover:text-gray-700"><a href="{{ route('home') }}">Home</a></li>
                <li class="hover:text-gray-700"><a href="/products/index">Products</a></li>
                <li class="text-gray-900 font-medium" aria-current="page">{{ $product->name ?? 'Product Details' }}</li>
            </ol>
        </nav>

        <!-- Product Main Section -->
        <div class="flex flex-wrap -mx-3 mb-5">
            <!-- Product Images -->
            <div class="w-full md:w-1/2 px-3">
                <div class="product-images">
                    <div class="main-image mb-3 relative">
                        @if($product->discount_percentage > 0)
                            <span class="discount-badge">-{{ $product->discount_percentage }}%</span>
                        @endif
                        <div class="image-zoom" id="mainImage">
                            @if($product->images->first())
                                <img src="{{ asset('storage/' . $product->images->first()->path) }}" 
                                     alt="{{ $product->name }}" 
                                     class="w-full h-auto object-cover rounded-lg">
                            @else
                                <img src="{{ asset('images/placeholder.jpg') }}" 
                                     alt="Product placeholder" 
                                     class="w-full h-auto object-cover rounded-lg">
                            @endif
                        </div>
                        <button class="zoom-button" title="Click to zoom">
                            <i class="fas fa-search-plus"></i>
                        </button>
                    </div>
                    <div class="image-thumbnails grid grid-cols-4 gap-2">
                        @foreach($product->images as $image)
                            <div>
                                <button class="thumbnail-btn w-full {{ $loop->first ? 'active' : '' }}" 
                                        data-image="{{ asset('storage/' . $image->path) }}">
                                    <img src="{{ asset('storage/' . $image->path) }}" 
                                         alt="Product thumbnail" 
                                         class="w-full h-auto object-cover">
                                </button>
                            </div>
                        @endforeach
                        @for($i = $product->images->count(); $i < 4; $i++)
                            <div>
                                <div class="empty-thumbnail"></div>
                            </div>
                        @endfor
                    </div>
                </div>
            </div>

            <!-- Product Info -->
            <div class="w-full md:w-1/2 px-3">
                <div class="product-info">
                    @if($product->stock_quantity < 10 && $product->stock_quantity > 0)
                        <div class="stock-warning mb-3">
                            Only {{ $product->stock_quantity }} items left in stock!
                        </div>
                    @endif

                    <h1 class="product-title mb-2">{{ $product->name }}</h1>
                    
                    <div class="product-meta mb-3">
                        <span class="sku">SKU: {{ $product->sku }}</span>
                        <span class="separator">|</span>
                        <span class="category">Category: 
                            <a href="{{ route('category.show', $product->category->slug) }}">
                                {{ $product->category->name }}
                            </a>
                        </span>
                    </div>

                    <div class="product-rating mb-3">
                        <div class="stars">
                            @for($i = 1; $i <= 5; $i++)
                                <i class="fas fa-star{{ $i <= ($product->rating ?? 0) ? ' text-yellow-600' : '-o text-gray-500' }}"></i>
                            @endfor
                        </div>
                        <span class="rating-count">({{ $product->reviews_count ?? 0 }} Reviews)</span>
                    </div>
                    
                    <div class="pricing mb-4">
                        {{-- @if($product->sale_price && $product->sale_price < $product->price)
                            <span class="current-price text-green-600 font-bold text-3xl">${{ number_format($product->sale_price, 2) }}</span>
                            <span class="original-price line-through text-gray-500 ml-2">${{ number_format($product->price, 2) }}</span>
                            <span class="discount-percentage ml-2 bg-red-100 text-red-800 rounded-full px-2 py-1 text-xs font-medium">
                                Save {{ number_format((($product->price - $product->sale_price) / $product->price) * 100, 0) }}%
                            </span>
                        @else --}}
                            <span class="current-price text-green-600 font-bold text-3xl">${{ number_format($product->price, 2) }}</span>
                        {{-- @endif --}}
                    </div>

                    <div class="short-description mb-4">
                        <p>{{ $product->short_description }}</p>
                    </div>

                   

                    <!-- Replace the existing Add to Cart form section with this -->
                        <form action="{{ route('cart.add', $product) }}" method="POST" class="add-to-cart-section product-buttons">
                            @csrf
                            <input type="hidden" name="product_id" value="{{ $product->id }}">
                            <div class="flex items-center gap-3 mb-3">
                                <div class="quantity-selector">
                                    <button type="button" onclick="updateQuantity('decrease')">
                                        <i class="fas fa-minus"></i>
                                    </button>
                                    <input type="number" name="quantity" id="quantity" value="1" min="1" 
                                        max="{{ $product->stock_quantity }}" 
                                        readonly>
                                    <button type="button" onclick="updateQuantity('increase')">
                                        <i class="fas fa-plus"></i>
                                    </button>
                                </div>
                                <button type="submit" class="inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-colors bg-green-500 hover:bg-green-600 text-white flex-1 {{ $product->stock_quantity === 0 ? 'disabled' : '' }}">
                                    <i class="fas fa-shopping-cart mr-2"></i>
                                    {{ $product->stock_quantity === 0 ? 'Out of Stock' : 'Add to Cart' }}
                                </button>
                            </div>
                            {{-- <button type="button" onclick="buyNow()">
                                <i class="fas fa-bolt"></i>Buy Now
                            </button> --}}
                        </form>

                    <!-- Shopping Options -->
                    {{-- <div class="shopping-options mb-4">
                        <h5 class="mb-3">Shopping Options</h5>
                        <div class="flex gap-3">
                            <div class="option-card">
                                <i class="fas fa-truck mb-2"></i>
                                <span>Free Shipping<br>on orders over $50</span>
                            </div>
                            <div class="option-card">
                                <i class="fas fa-box mb-2"></i>
                                <span>Express Delivery<br>2-3 business days</span>
                            </div>
                            <div class="option-card">
                                <i class="fas fa-shield-alt mb-2"></i>
                                <span>Secure Payment<br>100% Protected</span>
                            </div>
                        </div>
                    </div> --}}

                    <!-- Additional Actions -->
                    <div class="flex gap-2 mb-4">
                        <button class="inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-colors border-2 border-gray-300 text-gray-700 hover:bg-gray-100 flex-1" onclick="addToWishlist({{ $product->id }})">
                            <i class="far fa-heart mr-2"></i>Add to Wishlist
                        </button>
                        <button class="inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-colors border-2 border-gray-300 text-gray-700 hover:bg-gray-100 flex-1" onclick="shareProduct()">
                            <i class="fas fa-share-alt mr-2"></i>Share
                        </button>
                    </div>

                    <!-- Tags -->
                    @if($product->tags && is_array($product->tags))
                    <div class="product-tags">
                        <span class="text-gray-500">Tags: </span>
                        @foreach($product->tags as $tag)
                            <span class="bg-gray-100 text-gray-800 rounded-full px-2 py-1 text-xs font-medium no-underline mr-1">
                                {{ $tag }}
                            </span>
                        @endforeach
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Product Tabs Section -->
        <div class="product-tabs mb-5">
            <ul class="flex border-b border-gray-200" id="productTabs" role="tablist">
                <li class="nav-item">
                    <a class="px-4 py-2 text-sm font-medium border-b-2 border-green-600 text-green-600" id="description-tab" data-toggle="tab" href="#description">
                        Description
                    </a>
                </li>
                <li class="nav-item">
                    <a class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent" id="specifications-tab" data-toggle="tab" href="#specifications">
                        Specifications
                    </a>
                </li>
                <li class="nav-item">
                    <a class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent" id="reviews-tab" data-toggle="tab" href="#reviews">
                        Reviews ({{ $product->reviews_count ?? 0 }})
                    </a>
                </li>
                <li class="nav-item">
                    <a class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent" id="shipping-tab" data-toggle="tab" href="#shipping">
                        Shipping & Returns
                    </a>
                </li>
            </ul>
            
            <div class="p-4 border border-gray-200 rounded-b-lg">
                <!-- Description Tab -->
                <div class="tab-pane fade show active" id="description">
                    {!! $product->description !!}
                </div>
                
                <!-- Specifications Tab -->
                <div class="tab-pane fade" id="specifications">
                    <table class="w-full specifications-table">
                        <tbody>
                            @foreach($product->specifications ?? [] as $spec)
                            <tr>
                                <th>{{ $spec->name }}</th>
                                <td>{{ $spec->value }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                
                <!-- Reviews Tab -->
                <div class="tab-pane fade" id="reviews">
                    @if($product->reviews->count() > 0)
                        <div class="reviews-summary mb-4">
                            <div class="flex flex-wrap -mx-3 items-center">
                                <div class="w-full md:w-1/3 px-3 text-center">
                                    <h1 class="display-4 mb-0">{{ number_format($product->rating, 1) }}</h1>
                                    <div class="stars mb-2">
                                        @for($i = 1; $i <= 5; $i++)
                                            <i class="fas fa-star{{ $i <= $product->rating ? ' text-yellow-600' : '-o text-gray-500' }}"></i>
                                        @endfor
                                    </div>
                                    <p class="text-gray-500">Based on {{ $product->reviews_count }} reviews</p>
                                </div>
                                <div class="w-full md:w-2/3 px-3">
                                    <!-- Rating bars -->
                                    @for($i = 5; $i >= 1; $i--)
                                    <div class="flex items-center mb-2">
                                        <span class="mr-2">{{ $i }} stars</span>
                                        <div class="bg-gray-200 rounded-full h-2.5 flex-1">
                                            <div class="bg-yellow-500 h-2.5 rounded-full" 
                                                 style="width: {{ ($product->reviews->where('rating', $i)->count() / $product->reviews_count) * 100 }}%">
                                            </div>
                                        </div>
                                        <span class="ml-2">{{ $product->reviews->where('rating', $i)->count() }}</span>
                                    </div>
                                    @endfor
                                </div>
                            </div>
                        </div>

                        <!-- Review List -->
                        <div class="reviews-list">
                            @foreach($product->reviews as $review)
                            <div class="review-item mb-4 pb-4 border-b border-gray-200">
                                <div class="flex justify-between mb-2">
                                    <div class="reviewer-info">
                                        <h6 class="mb-0">{{ $review->user->name }}</h6>
                                        <div class="stars">
                                            @for($i = 1; $i <= 5; $i++)
                                                <i class="fas fa-star{{ $i <= $review->rating ? ' text-yellow-600' : '-o text-gray-500' }}"></i>
                                            @endfor
                                        </div>
                                    </div>
                                    <div class="review-date text-gray-500">
                                        {{ $review->created_at->diffForHumans() }}
                                    </div>
                                </div>
                                <p class="review-text mb-2">{{ $review->comment }}</p>
                                @if($review->images->count() > 0)
                                <div class="review-images flex gap-2">
                                    @foreach($review->images as $image)
                                    <img src="{{ asset('storage/' . $image->path) }}" 
                                         alt="Review image" 
                                         class="w-full h-auto object-cover rounded border border-gray-200" 
                                         style="width: 80px; height: 80px; object-fit: cover;">
                                    @endforeach
                                </div>
                                @endif
                            </div>
                            @endforeach
                        </div>
                    @else
                        <div class="no-reviews text-center py-4">
                            <div class="mb-3">
                                @for($i = 1; $i <= 5; $i++)
                                    <i class="far fa-star text-gray-500"></i>
                                @endfor
                            </div>
                            <p class="text-gray-500 mb-3">Be the first to write a review</p>
                            <button class="inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-colors bg-green-500 hover:bg-green-600 text-white" onclick="writeReview()">
                                <i class="fas fa-pencil-alt mr-2"></i>Write a Review
                            </button>
                        </div>
                    @endif
                </div>

                <!-- Shipping Tab -->
                <div class="tab-pane fade" id="shipping">
                    <div class="shipping-info">
                        <h5>Shipping Information</h5>
                        <p>We offer various shipping options to meet your needs:</p>
                        <ul>
                            <li>Standard Shipping (5-7 business days)</li>
                            <li>Express Shipping (2-3 business days)</li>
                            <li>Next Day Delivery (order before 2 PM)</li>
                        </ul>

                        <h5 class="mt-4">Returns Policy</h5>
                        <p>We want you to be completely satisfied with your purchase:</p>
                        <ul>
                            <li>30-day return window</li>
                            <li>Items must be unused and in original packaging</li>
                            <li>Free returns on eligible items</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- Related Products -->
                @if($relatedProducts->count() > 0)
                <div class="related-products">
                    <h3 class="mb-4">You May Also Like</h3>
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                        @foreach($relatedProducts as $relatedProduct)
                        <div>
                            <div class="product-card h-full">
                                <div class="product-image relative">
                                    @if($relatedProduct->discount_percentage > 0)
                                        <span class="discount-badge">-{{ $relatedProduct->discount_percentage }}%</span>
                                    @endif
                                    <a href="/products/{{$relatedProduct->id}}">
                                        @if($relatedProduct->images->first())
                                            <img src="{{ asset('storage/' . $relatedProduct->images->first()->path) }}" 
                                                alt="{{ $relatedProduct->name }}" 
                                                class="w-full h-auto object-cover">
                                        @else
                                            <img src="{{ asset('images/placeholder.jpg') }}" 
                                                alt="Product placeholder" 
                                                class="w-full h-auto object-cover">
                                        @endif
                                    </a>
                                </div>
                                <div class="product-info p-3">
                                    <div class="product-category small text-gray-500 mb-1">
                                        {{ $relatedProduct->category->name }}
                                    </div>
                                    <h5 class="product-title mb-2">
                                        <a href="/products/{{$relatedProduct->id}}" class="no-underline text-gray-900">
                                            {{ Str::limit($relatedProduct->name, 40) }}
                                        </a>
                                    </h5>
                                    <div class="product-rating mb-2">
                                        <div class="stars">
                                            @for($i = 1; $i <= 5; $i++)
                                                <i class="fas fa-star{{ $i <= ($relatedProduct->rating ?? 0) ? ' text-yellow-600' : '-o text-gray-500' }} small"></i>
                                            @endfor
                                        </div>
                                    </div>
                                    <div class="product-price mb-2">
                                        @if($relatedProduct->sale_price && $relatedProduct->sale_price < $relatedProduct->price)
                                            <span class="current-price text-green-600 font-bold">${{ number_format($relatedProduct->sale_price, 2) }}</span>
                                            <span class="original-price line-through text-gray-500 text-sm ml-2">
                                                ${{ number_format($relatedProduct->price, 2) }}
                                            </span>
                                        @else
                                            <span class="current-price text-green-600 font-bold">${{ number_format($relatedProduct->price, 2) }}</span>
                                        @endif
                                    </div>
                                    <div class="flex gap-2">
                                        <a href="/products/{{$relatedProduct->id}}" 
                                        class="inline-flex items-center justify-center px-3 py-1.5 text-sm rounded-lg font-medium transition-colors border-2 border-green-600 text-green-600 hover:bg-green-600 hover:text-white flex-1">
                                            View Details
                                        </a>
                                        <form action="{{ route('cart.add', $product) }}" method="POST" class="inline flex-1">
                                            @csrf
                                            <input type="hidden" name="product_id" value="{{ $relatedProduct->id }}">
                                            <input type="hidden" name="quantity" value="1">
                                            <button type="submit" 
                                                    class="inline-flex items-center justify-center px-3 py-1.5 text-sm rounded-lg font-medium transition-colors bg-green-500 hover:bg-green-600 text-white w-full {{ $relatedProduct->stock_quantity === 0 ? 'disabled' : '' }}">
                                                <i class="fas fa-shopping-cart"></i>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif
    </div>
</div>

<!-- Quick View Modal -->
<div class="modal fade" id="imageZoomModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="bg-white rounded-xl shadow-sm border border-gray-100">
            <div class="p-0">
                <button type="button" class="absolute top-0 right-0 m-2 p-2 rounded-full hover:bg-gray-100 transition-colors" data-dismiss="modal">
                    <i class="fas fa-times"></i>
                </button>
                <img src="" id="zoomedImage" class="w-full h-auto object-cover w-full">
            </div>
        </div>
    </div>
</div>

<!-- Share Modal -->
<div class="modal fade" id="shareModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="bg-white rounded-xl shadow-sm border border-gray-100">
            <div class="px-4 py-3 border-b border-gray-100">
                <h5 class="text-lg font-semibold">Share This Product</h5>
                <button type="button" class="p-2 rounded-full hover:bg-gray-100 transition-colors" data-dismiss="modal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="p-4">
                <div class="flex justify-around">
                    <a href="#" class="inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-colors border-2 border-green-600 text-green-600 hover:bg-green-600 hover:text-white" onclick="shareOnFacebook()">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                    <a href="#" class="inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-colors border-2 border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white" onclick="shareOnTwitter()">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="#" class="inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-colors border-2 border-green-600 text-green-600 hover:bg-green-600 hover:text-white" onclick="shareOnWhatsApp()">
                        <i class="fab fa-whatsapp"></i>
                    </a>
                    <button class="inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-colors border-2 border-gray-300 text-gray-700 hover:bg-gray-100" onclick="copyLink()">
                        <i class="fas fa-link"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    
</script>

<style>
/* ... Your existing styles ... */

.product-images .main-image {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1rem;
    position: relative;
    overflow: hidden;
}

.zoom-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.zoom-button:hover {
    background: #16a34a;
    color: white;
}

.discount-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: #dc3545;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 3px;
    font-size: 0.875rem;
    font-weight: 500;
    z-index: 2;
}

.stock-warning {
    color: #dc3545;
    font-size: 0.875rem;
    padding: 0.5rem;
    border: 1px solid #dc3545;
    border-radius: 4px;
    background: rgba(220, 53, 69, 0.1);
}

.product-meta {
    font-size: 0.875rem;
    color: #666;
}

.product-meta .separator {
    margin: 0 0.5rem;
}

.specifications-table th {
    width: 30%;
    background: #f8f9fa;
}

.rating-bar {
    font-size: 0.875rem;
}

.review-images img {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.review-images img:hover {
    transform: scale(1.05);
}

/* Additional responsive styles */
@media (max-width: 768px) {
    .product-title {
        font-size: 1.5rem;
    }

    .current-price {
        font-size: 1.5rem;
    }

    .product-actions {
        flex-direction: column;
    }

    .reviews-summary .w-full.md\\:w-1\\/3 {
        margin-bottom: 2rem;
    }
}

.quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    width: fit-content;
}

.quantity-selector button {
    border: none;
    background: none;
    padding: 8px 12px;
    color: #6c757d;
    transition: all 0.2s;
}

.quantity-selector button:hover {
    background-color: #f8f9fa;
    color: #000;
}

.quantity-selector input {
    width: 60px;
    border: none;
    border-left: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    padding: 8px;
    text-align: center;
    -moz-appearance: textfield;
}

.quantity-selector input::-webkit-outer-spin-button,
.quantity-selector input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

@media (max-width: 576px) {
    .quantity-selector {
        width: 100%;
    }
    .quantity-selector input {
        flex: 1;
    }
}

.related-products .product-image {
    position: relative;
    padding-top: 100%; /* Creates a 1:1 aspect ratio */
    overflow: hidden;
}

.related-products .product-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.related-products .product-image:hover img {
    transform: scale(1.05);
}

.related-products .product-card {
    border: 1px solid #eee;
    border-radius: 8px;
    transition: box-shadow 0.3s ease;
}

.related-products .product-card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .related-products > div {
        padding: 8px;
    }
    
    .related-products .product-info {
        padding: 0.75rem !important;
    }
    
    .related-products .product-title {
        font-size: 0.9rem;
    }
}

.image-thumbnails .thumbnail-btn {
    padding: 0;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: none;
    aspect-ratio: 1;
    transition: all 0.3s ease;
}

.image-thumbnails .thumbnail-btn.active {
    border-color: #16a34a;
}

.image-thumbnails .thumbnail-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.empty-thumbnail {
    width: 100%;
    aspect-ratio: 1;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}
</style>



<script>
// ... Your existing scripts ...

function initializeImageZoom() {
    const mainImage = document.querySelector('#mainImage img');
    const zoomButton = document.querySelector('.zoom-button');
    const modal = new bootstrap.Modal(document.getElementById('imageZoomModal'));
    const zoomedImage = document.getElementById('zoomedImage');

    zoomButton.addEventListener('click', () => {
        zoomedImage.src = mainImage.src;
        modal.show();
    });
}

function initializeThumbnails() {
    const thumbnails = document.querySelectorAll('.thumbnail-btn');
    const mainImage = document.querySelector('#mainImage img');

    thumbnails.forEach(thumb => {
        thumb.addEventListener('click', () => {
            thumbnails.forEach(t => t.classList.remove('active'));
            thumb.classList.add('active');
            mainImage.src = thumb.dataset.image;
        });
    });
}

function shareProduct() {
    const modal = new bootstrap.Modal(document.getElementById('shareModal'));
    modal.show();
}

function copyLink() {
    navigator.clipboard.writeText(window.location.href);
    alert('Link copied to clipboard!');
}

function shareOnFacebook() {
    window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(window.location.href)}`);
}

function shareOnTwitter() {
    window.open(`https://twitter.com/intent/tweet?url=${encodeURIComponent(window.location.href)}&text=${encodeURIComponent(document.title)}`);
}

function shareOnWhatsApp() {
    window.open(`https://wa.me/?text=${encodeURIComponent(window.location.href)}`);
}

function writeReview() {
    // Implement review writing logic
}

function buyNow() {
    // Implement buy now logic
}

function addToWishlist(productId) {
    // Implement wishlist logic
}

document.addEventListener('DOMContentLoaded', () => {
    initializeImageZoom();
    initializeThumbnails();
});

function updateQuantity(action) {
    const input = document.getElementById('quantity');
    const currentValue = parseInt(input.value);
    const maxValue = parseInt(input.max);
    
    if (action === 'increase' && currentValue < maxValue) {
        input.value = currentValue + 1;
    } else if (action === 'decrease' && currentValue > 1) {
        input.value = currentValue - 1;
    }
}

// Add this to your existing DOMContentLoaded event
document.addEventListener('DOMContentLoaded', () => {
    // ... existing initialization code ...
    
    // Prevent manual input on quantity field
    const quantityInput = document.getElementById('quantity');
    quantityInput.addEventListener('keydown', (e) => e.preventDefault());
});
</script>

@endsection
