<%- include("./header"); %>

<div class="container mx-auto p-6">
    <div class="text-sm text-gray-600 mb-4">
        <a href="/" class="text-gray-600 hover:text-gray-800">Home</a> > <a href="#"
          class="text-gray-600 hover:text-gray-800"><%= product.name  %></a>
      </div>
    <div class="flex flex-col lg:flex-row">
        
        <!-- Product Image Section -->
        <div class="w-full lg:w-1/2">
            <div class="border rounded-lg p-4 bg-white">
                <img id="mainImage" alt="<%= product.name %>" class="w-full md:w-3/4 h-auto zoom"
                    src="<%= product.images[0] %>" data-zoom-image="<%= product.images[0] %>" />
            </div>
            <div class="flex mt-4 space-x-2">
                <% product.images.forEach((img, index) => { %>
                <img alt="<%= product.name %> thumbnail" class="thumbnail w-1/4 h-auto border rounded-lg cursor-pointer"
                    src="<%= img %>" data-index="<%= index %>" onclick="updateMainImage('<%= img %>')" />
                <% }) %>
            </div>
        </div>

        <!-- Product Details Section -->
        <div class="w-full lg:w-1/2 lg:pl-8 mt-8 lg:mt-0">
            <% if (product.discount) { %>
            <div class="bg-red-100 text-red-500 text-sm font-semibold px-2 py-1 rounded inline-block mb-2">
                Sale Off
            </div>
            <% } %>
            <h1 class="text-3xl font-bold mb-2"><%= product.name %></h1>
            <div class="flex items-center mb-4">
                <span class="text-yellow-500"><i class="fas fa-star"></i></span>
                <span class="text-gray-600 ml-2">Sold: <%= product.sold %></span>
            </div>
            <div class="flex items-center mb-4">
                <span class="text-3xl font-bold text-green-500">$<%= product.price %></span>
                <% if (product.discount) { %>
                <span class="text-gray-500 line-through ml-2">$<%= product.price * (1 + product.discount / 100) %></span>
                <span class="text-green-500 ml-2 text-sm"><%= product.discount %>% Off</span>
                <% } %>
            </div>
            <p class="text-gray-600 mb-4"><%= product.description1 %></p>
            <% if (product.description2) { %>
            <p class="text-gray-600 mb-4"><%= product.description2 %></p>
            <% } %>
            <% if (product.warnings) { %>
            <p class="text-red-600 mb-4">Warnings: <%= product.warnings %></p>
            <% } %>
            <div class="flex items-center mb-4">
                <input class="border rounded w-16 text-center py-2" type="number" value="1" />
                <button class="bg-green-500 text-white px-4 py-2 rounded ml-4">Add to cart</button>
                <button class="border rounded px-4 py-2 ml-2"><i class="fas fa-heart"></i></button>
                <button class="border rounded px-4 py-2 ml-2"><i class="fas fa-share-alt"></i></button>
            </div>
            <div class="text-sm text-gray-600">
                <p><span class="font-semibold">Type: </span><%= product.type %></p>
                <% if (product.color) { %>
                <p><span class="font-semibold">Color: </span><%= product.color %></p>
                <% } %>
                <% if (product.weight) { %>
                <p><span class="font-semibold">Weight: </span><%= product.weight %>g</p>
                <% } %>
                <p><span class="font-semibold">SKU: </span><%= product.SKU %></p>
                <p><span class="font-semibold">Category: </span><%= product.category.name %></p>
                <p><span class="font-semibold">Stock: </span><%= product.stock %> Items In Stock</p>
                <p><span class="font-semibold">Created At: </span><%= new Date(product.createdAt).toLocaleDateString() %></p>
                <% if (product.isBlocked) { %>
                <p class="text-red-500">This product is currently blocked.</p>
                <% } %>
            </div>
        </div>
    </div>
</div>
<%- include('./popular-product') %>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Include ElevateZoom JS -->
<script src="https://cdn.jsdelivr.net/npm/elevatezoom@3.0.8/jquery.elevateZoom.min.js"></script>

<script>
    // Initialize ElevateZoom on the main image
    $('#mainImage').elevateZoom({
        zoomType: "lens",
        lensShape: "round",
        lensSize: 600,
        zoomLevel:300

    });

    // Function to update the main image and reapply the zoom effect
    function updateMainImage(src) {
        const mainImage = document.getElementById('mainImage');
        mainImage.src = src;
        mainImage.setAttribute('data-zoom-image', src);

        // Re-initialize ElevateZoom for the new image
        $('.zoomContainer').remove(); // Remove previous zoom container
        $('#mainImage').elevateZoom({
            zoomType: "lens",
            lensShape: "round",
            lensSize: 250,
            zoomLevel:300
        });
    }
</script>
