<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= esc($product['info']['name'] ?? 'Product') ?> | Multiplex Farms</title>

<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Alpine.js for dropdown -->
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<style>
    .product-img:hover img { transform: scale(1.1); }
    .transition-smooth { transition: all 0.3s ease-in-out; }
</style>
</head>
<body class="bg-gray-100">

<!-- HEADER -->
<header class="w-full bg-white shadow sticky top-0 z-50">
  <div class="w-full px-8 flex items-center h-20 gap-10">

    <!-- LEFT SECTION: Logo + Store Title -->
    <div class="flex items-center gap-3 flex-shrink-0">
      <img src="<?= base_url('uploads/MSFFLogo.png') ?>" alt="Multiplex Farms Logo" class="h-14 w-auto">
      <div>
        <h3 class="text-2xl font-extrabold text-green-600 leading-tight">Multiplex Farms</h3>
        <p class="text-sm text-gray-700 italic leading-none">Safe Farms and Fresh Store</p>
      </div>
    </div>

    <!-- LOCATION + TIME -->
    <div class="hidden lg:flex flex-col leading-tight border-l pl-6">
      <div class="flex items-center gap-2 text-gray-800">
        <i class="fa-solid fa-clock text-green-600 text-xl"></i>
        <span class="text-xl font-semibold italic tracking-wide">12 Minutes</span>
      </div>
      <div class="flex items-center gap-2 text-gray-600 mt-1">
        <span class="text-sm"><?= esc($user_apartName ?? 'Your Location') ?></span>
      </div>
    </div>

    <!-- SEARCH BOX -->
    <div class="flex-1">
      <form action="<?= base_url('search') ?>" method="GET" class="relative">
        <i class="fa-solid fa-magnifying-glass absolute left-3 top-3 text-gray-500"></i>
        <input type="text" name="q" class="w-full pl-10 pr-4 py-2 border rounded-xl focus:ring-2 focus:ring-green-500 focus:outline-none" placeholder="Search for products...">
      </form>
    </div>

    <!-- CART + PROFILE -->
    <div class="flex items-center gap-6 flex-shrink-0">
      <a href="<?= base_url('order/cart') ?>" class="relative text-gray-700 hover:text-green-600 transition text-2xl">
        <i class="fa fa-cart-plus"></i>
        <span id="cart-count" class="absolute -top-2 -right-3 bg-red-600 text-xs font-bold px-2 py-0.5 rounded-full text-white"><?= esc($cart_count ?? '0') ?></span>
      </a>

      <?php if(session()->get('isLoggedIn')): ?>
      <div class="relative" x-data="{ open: false }">
        <button @click="open = !open" class="flex items-center bg-gray-100 px-3 py-2 rounded-xl hover:bg-gray-200 transition">
          <i class="fa-solid fa-user text-lg text-gray-700"></i>
        </button>
        <div x-show="open" @click.away="open = false" class="absolute right-0 mt-2 w-52 bg-white border rounded-xl shadow-lg py-2 z-50">
          <a href="<?= base_url('order-tracking') ?>" class="flex items-center px-4 py-2 hover:bg-gray-100 text-sm text-gray-700 transition">
            <i class="fa-solid fa-box text-gray-600"></i>
            <span class="ml-2">My Orders</span>
          </a>
          <hr class="my-1">
          <a href="<?= base_url('auth/logout') ?>" class="flex items-center px-4 py-2 hover:bg-gray-100 text-sm text-red-600 transition">
            <i class="fa-solid fa-right-from-bracket"></i>
            <span class="ml-2">Logout</span>
          </a>
        </div>
      </div>
      <?php endif; ?>
    </div>
  </div>
</header>

<!-- MAIN CONTENT -->
<div class="max-w-7xl mx-auto py-10 px-4">
    <!-- Breadcrumb -->
    <nav class="text-sm mb-6" aria-label="Breadcrumb">
        <ol class="list-reset flex text-gray-600">
            <li><a href="<?= base_url('order') ?>" class="hover:text-green-600">Home</a></li>
            <li><span class="mx-2">/</span></li>
            <li class="text-gray-800 font-semibold"><?= esc($product['info']['name'] ?? 'Product') ?></li>
        </ol>
    </nav>

    <div class="bg-white rounded-lg shadow-lg p-6 grid grid-cols-1 md:grid-cols-2 gap-10">
        <!-- LEFT: Product Image -->
        <div class="product-img rounded-lg overflow-hidden">
            <img src="<?= base_url('uploads/' . ($product['info']['image'] ?? 'no-image.png')) ?>" 
                 alt="<?= esc($product['info']['name'] ?? 'Product') ?>" 
                 class="w-full h-full object-contain transition-smooth">
        </div>

        <!-- RIGHT: Product Info -->
        <div class="flex flex-col justify-between">
            <div>
                <h1 class="text-3xl font-bold text-green-700 mb-3"><?= esc($product['info']['name'] ?? 'Product') ?></h1>

                <?php if(!empty($product['variants'] ?? [])): ?>
                <div class="mb-4">
                    <label class="block text-gray-700 font-semibold mb-2">Select Variant</label>
                    <select name="variant_id" id="variantSelect" class="border rounded p-2 w-full">
                        <?php foreach($product['variants'] as $variant): ?>
                        <option value="<?= $variant['variant_id'] ?>" 
                                data-stock="<?= $variant['quantity'] ?>" 
                                data-price="<?= $variant['offer_price'] ?>">
                            <?= esc($variant['unit']) ?> - ₹<?= esc($variant['offer_price']) ?> 
                            (<?= $variant['quantity'] ?> in stock)
                        </option>
                        <?php endforeach; ?>
                    </select>
                </div>

                <div class="flex items-center gap-4 mb-6">
                    <label class="font-semibold text-gray-700">Quantity:</label>
                    <div class="flex items-center border rounded w-32">
                        <button type="button" id="qtyMinus" class="px-3 py-1 bg-gray-200 text-gray-700 rounded-l">-</button>
                        <input type="number" id="quantity" name="quantity" value="1" min="1" class="w-full text-center border-l border-r">
                        <button type="button" id="qtyPlus" class="px-3 py-1 bg-gray-200 text-gray-700 rounded-r">+</button>
                    </div>
                </div>

                <button id="addToCartBtn" class="bg-green-600 hover:bg-green-700 text-white font-semibold px-6 py-3 rounded shadow transition-smooth">
                    Add to Cart
                </button>

                <?php else: ?>
                <p class="text-red-600 font-semibold">No variants available for this product.</p>
                <?php endif; ?>
            </div>

            <?php if(!empty($product['variants'] ?? [])): ?>
            <p class="mt-6 text-sm text-gray-600">
                Stock availability updates automatically when you select a variant.
            </p>
            <?php endif; ?>
        </div>
    </div>
    
     <div class="mt-6 bg-black text-white p-3 rounded">
        Unlock free delivery — Shop for ₹99+
      </div>
  
      
      <div class="mt-10 bg-white p-6 rounded-xl shadow-lg">
    <h3 class="text-2xl font-bold text-green-600 mb-4">Product Highlights</h3>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

      <div class="p-4 border rounded-lg">
        <p class="text-gray-500 text-sm">Brand</p>
        <p class="font-bold text-green-700">Let's Try</p>
      </div>

      <div class="p-4 border rounded-lg">
        <p class="text-gray-500 text-sm">Product Type</p>
        <p class="font-medium">Aloo Bhujia</p>
      </div>

      <div class="p-4 border rounded-lg">
        <p class="text-gray-500 text-sm">Flavour</p>
        <p class="font-medium">Spicy</p>
      </div>

      <div class="p-4 border rounded-lg">
        <p class="text-gray-500 text-sm">Material Type Free</p>
        <p class="font-medium">Palm Oil Free</p>
      </div>

      <div class="col-span-2 p-4 border rounded-lg">
        <p class="text-gray-500 text-sm">Ingredients</p>
        <p class="text-gray-700 text-sm">
          Gram Flour, Oil, Onion Paste, Salt, Red Chilli Powder and More
        </p>
      </div>

    </div>
    
     <div class="mt-10 bg-white p-6 rounded-xl shadow-lg">
  <h2 class="text-2xl font-bold text-green-700 mb-4">Products</h2>

  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">

    <!-- Product Card -->
    <div class="bg-white rounded-xl shadow hover:shadow-2xl transition p-4 group cursor-pointer">

      <div class="relative">
        <img src="https://picsum.photos/300?random=11"
             class="rounded-xl w-full h-40 object-cover transition-transform duration-300 group-hover:scale-105">

        <span class="absolute top-2 left-2 bg-green-600 text-white text-xs px-2 py-1 rounded">
          12% OFF
        </span>
      </div>

      <p class="font-semibold mt-3 text-gray-800 group-hover:text-green-700">
        Fresh Potatoes
      </p>

      <div class="flex items-center gap-1 text-sm text-yellow-500 mt-1">
        ★★★★☆
        <span class="text-gray-400">(320)</span>
      </div>

      <div class="flex items-center gap-2 mt-2">
        <span class="text-lg font-bold text-green-700">₹35</span>
        <span class="text-gray-400 line-through">₹45</span>
      </div>

      <button class="w-full mt-3 bg-green-600 hover:bg-green-700 text-white py-2 rounded-lg text-sm font-semibold">
        Add to Cart
      </button>

    </div>

    <!-- Repeat Card -->
    <div class="bg-white rounded-xl shadow hover:shadow-2xl transition p-4 group cursor-pointer">

      <div class="relative">
        <img src="https://picsum.photos/300?random=12"
             class="rounded-xl w-full h-40 object-cover transition-transform duration-300 group-hover:scale-105">

        <span class="absolute top-2 left-2 bg-green-600 text-white text-xs px-2 py-1 rounded">
          8% OFF
        </span>
      </div>

      <p class="font-semibold mt-3 text-gray-800 group-hover:text-green-700">
        Green Cabbage
      </p>

      <div class="flex items-center gap-1 text-sm text-yellow-500 mt-1">
        ★★★★☆
        <span class="text-gray-400">(150)</span>
      </div>

      <div class="flex items-center gap-2 mt-2">
        <span class="text-lg font-bold text-green-700">₹30</span>
        <span class="text-gray-400 line-through">₹34</span>
      </div>

      <button class="w-full mt-3 bg-green-600 hover:bg-green-700 text-white py-2 rounded-lg text-sm font-semibold">
        Add to Cart
      </button>

    </div>

    <div class="bg-white rounded-xl shadow hover:shadow-2xl transition p-4 group cursor-pointer">
      <div class="relative">
        <img src="https://picsum.photos/300?random=13"
             class="rounded-xl w-full h-40 object-cover transition-transform duration-300 group-hover:scale-105">
        <span class="absolute top-2 left-2 bg-green-600 text-white text-xs px-2 py-1 rounded">
          10% OFF
        </span>
      </div>

      <p class="font-semibold mt-3 text-gray-800 group-hover:text-green-700">
        Fresh Carrots
      </p>

      <div class="flex items-center gap-1 text-sm text-yellow-500 mt-1">
        ★★★★★
        <span class="text-gray-400">(99)</span>
      </div>

      <div class="flex items-center gap-2 mt-2">
        <span class="text-lg font-bold text-green-700">₹40</span>
        <span class="text-gray-400 line-through">₹45</span>
      </div>

      <button class="w-full mt-3 bg-green-600 hover:bg-green-700 text-white py-2 rounded-lg text-sm font-semibold">
        Add to Cart
      </button>
    </div>

    <div class="bg-white rounded-xl shadow hover:shadow-2xl transition p-4 group cursor-pointer">
      <div class="relative">
        <img src="https://picsum.photos/300?random=14"
             class="rounded-xl w-full h-40 object-cover transition-transform duration-300 group-hover:scale-105">
        <span class="absolute top-2 left-2 bg-green-600 text-white text-xs px-2 py-1 rounded">
          6% OFF
        </span>
      </div>

      <p class="font-semibold mt-3 text-gray-800 group-hover:text-green-700">
        Green Beans
      </p>

      <div class="flex items-center gap-1 text-sm text-yellow-500 mt-1">
        ★★★★☆
        <span class="text-gray-400">(210)</span>
      </div>

      <div class="flex items-center gap-2 mt-2">
        <span class="text-lg font-bold text-green-700">₹28</span>
        <span class="text-gray-400 line-through">₹32</span>
      </div>

      <button class="w-full mt-3 bg-green-600 hover:bg-green-700 text-white py-2 rounded-lg text-sm font-semibold">
        Add to Cart
      </button>
    </div>

    <div class="bg-white rounded-xl shadow hover:shadow-2xl transition p-4 group cursor-pointer">
      <div class="relative">
        <img src="https://picsum.photos/300?random=15"
             class="rounded-xl w-full h-40 object-cover transition-transform duration-300 group-hover:scale-105">
        <span class="absolute top-2 left-2 bg-green-600 text-white text-xs px-2 py-1 rounded">
          4% OFF
        </span>
      </div>

      <p class="font-semibold mt-3 text-gray-800 group-hover:text-green-700">
        Fresh Onions
      </p>

      <div class="flex items-center gap-1 text-sm text-yellow-500 mt-1">
        ★★★☆☆
        <span class="text-gray-400">(500)</span>
      </div>

      <div class="flex items-center gap-2 mt-2">
        <span class="text-lg font-bold text-green-700">₹38</span>
        <span class="text-gray-400 line-through">₹40</span>
      </div>

      <button class="w-full mt-3 bg-green-600 hover:bg-green-700 text-white py-2 rounded-lg text-sm font-semibold">
        Add to Cart
      </button>
    </div>

  </div>
  </div>

    </div>
    
   

  </div>
  
  
 
</div>

<div class="max-w-6xl mx-auto px-4 py-10">

    <!-- Heading -->
    <h1 class="text-2xl font-bold text-gray-800 mb-5">
        How to Buy Daily Good Horse Gram / Kulthi Bean Online on Multiplex Safe Farm – Step-by-Step
    </h1>

    <!-- Steps Section -->
    <div class="space-y-4 text-gray-700 leading-relaxed">

        <p>
            <span class="font-semibold">1. Search for "Daily Good Horse Gram / Kulthi Bean"</span> on the Multiplex Safe Farm app or website, 
            or browse through the relevant category section.
        </p>

        <p>
            <span class="font-semibold">2. View product details</span> such as price, available options, and customer ratings.
        </p>

        <p>
            <span class="font-semibold">3. Add the item to your cart</span> and proceed with secure and flexible payment options.
        </p>

        <p>
            <span class="font-semibold">4. Get it delivered quickly</span> through Multiplex Safe Farm's trusted delivery network and enjoy a 
            hassle-free experience.
        </p>
    </div>

    <!-- Popular Searches -->
    <div class="mt-10">
        <h2 class="text-xl font-semibold text-gray-800 mb-3">Popular Searches</h2>

        <div class="space-y-4">

            <!-- Products -->
            <div>
                <h3 class="font-semibold text-gray-600 mb-2">Products:</h3>
                <div class="flex flex-wrap gap-2">
                    <!-- Repeatable UI Pills -->
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Avocado</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Strawberry</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Pomegranate</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Beetroot</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Ash gourd</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Bottle gourd</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Lady finger</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Potato</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Lemon</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Dalchini</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Fennel seeds</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Blueberry</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Papaya</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Dragon fruit</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Mushroom</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Lettuce</span>
                </div>
            </div>

            <!-- Brands -->
            <div>
                <h3 class="font-semibold text-gray-600 mb-2">Brands:</h3>
                <div class="flex flex-wrap gap-2">
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Yakult</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">My Muse</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Aashirvaad Atta</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Too Yumm</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Lays</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Figaro Olive Oil</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Nandini Milk</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Amul</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Mother Dairy Near Me</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Fortune Oil</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Superyou</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Durex Condoms</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Ferns and Petals</span>
                </div>
            </div>

            <!-- Categories -->
            <div>
                <h3 class="font-semibold text-gray-600 mb-2">Categories:</h3>
                <div class="flex flex-wrap gap-2">
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Grocery</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Cigarettes</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Chips</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Curd</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Hukka flavour</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Paan shop near me</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Eggs price</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Cheese slice</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Fresh fruits</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Fresh vegetables</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Refined oil</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Butter price</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Paneer price</span>
                </div>
            </div>

        </div>
    </div>

    <!-- Main Category List -->
    <div class="mt-12">
        <h2 class="text-xl font-bold text-gray-800 mb-3">Categories</h2>

        <ul class="grid grid-cols-2 sm:grid-cols-3 gap-3 text-gray-700 text-sm">
            <li>Fruits & Vegetables</li>
            <li>Atta, Rice, Oil & Dals</li>
            <li>Masala & Dry Fruits</li>
            <li>Sweet Cravings</li>
            <li>Frozen Food & Ice Creams</li>
            <li>Baby Food</li>
            <li>Dairy, Bread & Eggs</li>
            <li>Cold Drinks & Juices</li>
            <li>Munchies</li>
            <li>Meats, Fish & Eggs</li>
            <li>Breakfast & Sauces</li>
            <li>Tea, Coffee & More</li>
            <li>Biscuits</li>
            <li>Makeup & Beauty</li>
            <li>Bath & Body</li>
            <li>Cleaning Essentials</li>
            <li>Home Needs</li>
            <li>Electricals & Accessories</li>
            <li>Hygiene & Grooming</li>
            <li>Health & Baby Care</li>
            <li>Homegrown Brands</li>
            <li>Paan Corner</li>
        </ul>
    </div>

</div>

<footer class="  border-t mt-16">
  <div class="max-w-7xl mx-auto px-6 py-12">

    <div class="grid grid-cols-1 md:grid-cols-4 gap-10">

      <!-- Logo + Social -->
      <div>
        <div class="flex items-center gap-2 mb-4">
          <img src="<?= base_url('uploads/MSFFLogo.png') ?>" class="h-12">
          <span class="text-2xl font-extrabold text-green-600">
            Multiplex Farms
          </span>
        </div>

        <div class="flex gap-4 text-gray-600 text-xl mt-4">
          <a href="#"><i class="fa-brands fa-instagram"></i></a>
          <a href="#"><i class="fa-brands fa-x-twitter"></i></a>
          <a href="#"><i class="fa-brands fa-facebook"></i></a>
          <a href="#"><i class="fa-brands fa-linkedin"></i></a>
        </div>

        <p class="text-gray-500 text-sm mt-4">
          © Multiplex Marketplace Private Limited  
          <br>fssai lic no: 11224999000872
        </p>
      </div>

      <!-- Column 1 -->
      <div>
        <h3 class="font-bold text-gray-800 mb-3">Company</h3>
        <ul class="space-y-2 text-gray-600 text-sm">
          <li><a href="#" class="hover:text-green-600">Home</a></li>
          <li><a href="#" class="hover:text-green-600">Delivery Areas</a></li>
          <li><a href="#" class="hover:text-green-600">Careers</a></li>
          <li><a href="#" class="hover:text-green-600">Customer Support</a></li>
          <li><a href="#" class="hover:text-green-600">Press</a></li>
          <li><a href="#" class="hover:text-green-600">Blog</a></li>
        </ul>
      </div>

      <!-- Column 2 -->
      <div>
        <h3 class="font-bold text-gray-800 mb-3">Policies</h3>
        <ul class="space-y-2 text-gray-600 text-sm">
          <li><a href="#" class="hover:text-green-600">Privacy Policy</a></li>
          <li><a href="#" class="hover:text-green-600">Terms of Use</a></li>
          <li><a href="#" class="hover:text-green-600">Responsible Disclosure</a></li>
          <li><a href="#" class="hover:text-green-600">Sell on Multiplex</a></li>
          <li><a href="#" class="hover:text-green-600">Deliver with Multiplex</a></li>
          <li><a href="#" class="hover:text-green-600">Franchise with Multiplex</a></li>
        </ul>
      </div>

      <!-- Download App -->
      <div>
        <h3 class="font-bold text-gray-800 mb-3">Download App</h3>
        <div class="flex flex-col gap-3">

          <a href="#" class="border p-3 rounded-lg flex items-center gap-3 hover:bg-gray-100 transition">
            <i class="fa-brands fa-google-play text-2xl text-gray-700"></i>
            <div>
              <p class="text-xs text-gray-500">GET IT ON</p>
              <p class="font-bold text-gray-800 -mt-1">Google Play</p>
            </div>
          </a>

          <a href="#" class="border p-3 rounded-lg flex items-center gap-3 hover:bg-gray-100 transition">
            <i class="fa-brands fa-apple text-3xl text-gray-700"></i>
            <div>
              <p class="text-xs text-gray-500">Download on the</p>
              <p class="font-bold text-gray-800 -mt-1">App Store</p>
            </div>
          </a>

        </div>
      </div>

    </div>

  </div>
</footer>

</div>

<script>
$(document).ready(function(){
    // Quantity buttons
    $('#qtyPlus').click(function(){
        let max = parseInt($('#variantSelect option:selected').data('stock')) || 1;
        let val = parseInt($('#quantity').val()) || 1;
        if(val < max) $('#quantity').val(val+1);
    });
    $('#qtyMinus').click(function(){
        let val = parseInt($('#quantity').val()) || 1;
        if(val > 1) $('#quantity').val(val-1);
    });

    $('#variantSelect').change(function(){
        let stock = parseInt($(this).find(':selected').data('stock')) || 1;
        let qty = parseInt($('#quantity').val()) || 1;
        if(qty > stock) $('#quantity').val(stock);
    });

    // Add to cart AJAX with SweetAlert2
    $('#addToCartBtn').click(function(){
        $.ajax({
            url: "<?= base_url('ProductDetails/addToCart') ?>",
            method: "POST",
            data: {
                product_id: <?= $product['info']['id'] ?? 0 ?>,
                variant_id: $('#variantSelect').val(),
                quantity: $('#quantity').val()
            },
            dataType: "json",
            success: function(res){
                if(res.success){
                    Swal.fire({
                        icon: 'success',
                        title: 'Added to cart!',
                        text: 'Cart count: ' + res.cart_count,
                        showConfirmButton: false,
                        timer: 1500
                    });
                    $('#cart-count').text(res.cart_count);
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: 'Error adding to cart!'
                    });
                }
            },
            error: function(xhr){
                Swal.fire({
                    icon: 'error',
                    title: 'AJAX Error',
                    text: xhr.statusText
                });
            }
        });
    });
});
</script>

</body>
</html>
