<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= category.category %> - Digital Store</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        .background-image {
            background-image: url('/images/background.jpg');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }
        .glassmorphism-card {
            background-color: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
        }
    </style>
</head>
<body class="bg-gray-100">
    <%- include('./includes/header.ejs') %>

    <div class="background-image min-h-screen pt-20 pb-10">
        <div class="container mx-auto px-4">
            <h1 class="text-4xl font-extrabold text-white text-center drop-shadow-lg mb-4">
                <%= category.category %>
            </h1>
            <p class="text-center text-white drop-shadow-lg mb-10"><%= category.description %></p>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
                <% category.products.forEach(function(product) { %>
                    <div class="glassmorphism-card rounded-xl shadow-lg overflow-hidden transform transition-transform duration-300 hover:scale-105 p-6">
                        <img src="<%= product.imageUrl %>" alt="<%= product.name %>" class="w-full h-48 object-contain rounded-md mb-4">
                        <h2 class="text-xl font-semibold text-white mb-4"><%= product.name %></h2>

                        <% if (product.variations) { %>
                            <div class="space-y-4">
                                <% product.variations.forEach(function(variation) { %>
                                    <div class="bg-white/10 p-3 rounded-md border border-white/20">
                                        <div class="flex justify-between items-center mb-2">
                                            <span class="font-bold text-lg text-white"><%= variation.name %></span>
                                            <span class="font-bold text-xl text-green-400"><%= variation.price %></span>
                                        </div>
                                        <% if (variation.details) { %>
                                            <div class="text-sm text-white mb-3">
                                                <% variation.details.forEach(function(detail) { %>
                                                    <% const iconClass = detail.icon ? detail.icon : 'fa-check-circle'; %>
                                                    <div class="flex items-center my-1">
                                                        <i class="fas <%= iconClass %> w-4 text-center mr-2 text-blue-400"></i>
                                                        <span><%= detail.text %></span>
                                                    </div>
                                                <% }); %>
                                            </div>
                                        <% } %>
                                        <a href="#" class="w-full block text-center bg-green-500 text-white font-bold py-2 rounded-full hover:bg-green-600 transition duration-300 checkout-btn" data-product-name="<%= product.name %> <%= variation.name %>">
                                            Beli
                                        </a>
                                    </div>
                                <% }); %>
                            </div>
                        <% } else { %>
                            <p class="text-green-400 mt-2 font-bold text-2xl"><%= product.price %></p>

                            <div class="mt-4 mb-6">
                                <% product.details.forEach(function(detail) { %>
                                    <%
                                        const iconClass = detail.icon ? detail.icon : 'fa-check-circle';
                                        const iconColor = detail.icon ? 'text-green-400' : 'text-blue-400';
                                    %>
                                    <div class="flex items-center text-white text-sm my-1">
                                        <i class="fas <%= iconClass %> w-5 text-center mr-2 <%= iconColor %>"></i>
                                        <span><%= detail.text %></span>
                                    </div>
                                <% }); %>
                            </div>

                            <a href="#" class="w-full block text-center bg-green-500 text-white font-bold py-3 px-6 rounded-full hover:bg-green-600 transition duration-300 checkout-btn" data-product-name="<%= product.name %>">
                                Pesan sekarang 
                            </a>
                        <% } %>
                    </div>
                <% }); %>
            </div>
        </div>
    </div>

    <%- include('./includes/footer.ejs') %>

    <script>
        document.querySelectorAll('.checkout-btn').forEach(button => {
            button.addEventListener('click', function(event) {
                event.preventDefault();
                const productName = this.dataset.productName;
                const message = `Halo, saya tertarik dengan produk ${productName}. Tolong informasinya ya.`;
                const whatsappUrl = `https://wa.me/628123456789?text=${encodeURIComponent(message)}`;
                window.open(whatsappUrl, '_blank');
            });
        });
    </script>
</body>
</html>