12.Nature-Inspired Aquarius Tattoo Ideas for a Fresh Look
13.Bold and Artistic Pisces Tattoo Ideas for the Creative Soul
14.Trendy Hand Tattoo Ideas You Should Get in 2025 for a Stylish and Unique Look
15.The Healing Magic of Pets and Their Unbreakable Connection
16.Everything You Need to Know About Wrist Tattoos
17.Why Cats Were Worshipped in Mythology and Continue to Inspire Tattoos
18.How Dogs Have Left Their Paw Prints on History and Culture
19.Tattooing Traditions Across Different Cultures and Their Unique Meanings 
20.Understanding the Deep Symbolism Behind Anchor Tattoos and Their Meaning Across Cultures
21.The Profound Symbolism Behind Lotus Flower Tattoos, A Journey of Spiritual Growth and Transformation
22.water element tattoos that symbolize flow,serenity,and emotional balance

this is my products and name with details with price i need to should be upload these product and subproduct prices in database and show in front end

in front end view show  Print by HP indigo , Print by Konica minolta  if i click Print by HP indigo these all details with price should be show and right side should be

show select pages wise with selecd page total price if example if i gloosy 75 10 pages 75*35=total price  if i need silk matt i need that option also like + plus at last all products 

are select then add to cart and and download cart details is u understand describe me  

Print by HP indigo  (product name)


Glossy: 75

Silk Matt:₹80

Feather 90

Luster (Tearable): ₹90

Texture:₹100

Metallic: 110

Transparent: ₹150

Transparent GO-FO: ₹ 200

Glossy GO-FO: ₹150

Hologram:150

Glitter/3D (Half Sheet):₹ 115

Embossing (Half Sheet):₹400


Print by Konica minolta (product name)

Glossy: ₹ 54

Silk Matt:₹60

Feather 70

Luster (Tearable):₹80

Texture: 90

Metallic: 100

Transparent: ₹140

Transparent GO-FO: ₹200

Glossy GO-FO: ₹150

Hologram: 140

Glitter/3D (Half Sheet): ₹100

Embossing (Half Sheet): 380



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Print Options</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      background-color: #f7f7f7;
      font-family: 'Segoe UI', sans-serif;
    }
    .print-card {
      background: #fff;
      border-radius: 15px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      padding: 20px;
      margin-bottom: 20px;
    }
    .category-tab {
      font-weight: bold;
      border-radius: 50px;
      padding: 8px 16px;
      cursor: pointer;
    }
    .category-tab.active {
      background-color: #007bff;
      color: #fff;
    }
  </style>
</head>
<body>
<div class="container py-3">
  <h4 class="text-center mb-3">Select Print Category</h4>
  <div class="d-flex justify-content-center gap-3 mb-4">
    <div class="category-tab active" onclick="filterCategory('hp')">Print by HP Indigo</div>
    <div class="category-tab" onclick="filterCategory('konica')">Print by Konica Minolta</div>
  </div>

  <div id="productList"></div>

  <div class="text-center mt-4">
    <button class="btn btn-success" onclick="downloadCart()">Download Cart</button>
  </div>
</div>

<script>
const products = {
  hp: [
    { name: "Glossy", price: 75 },
    { name: "Silk Matt", price: 80 },
    { name: "Feather", price: 90 },
    { name: "Luster (Tearable)", price: 90 },
    { name: "Texture", price: 100 },
    { name: "Metallic", price: 110 },
    { name: "Transparent", price: 150 },
    { name: "Transparent GO-FO", price: 200 },
    { name: "Glossy GO-FO", price: 150 },
    { name: "Hologram", price: 150 },
    { name: "Glitter/3D (Half Sheet)", price: 115 },
    { name: "Embossing (Half Sheet)", price: 400 },
  ],
  konica: [
    { name: "Glossy", price: 54 },
    { name: "Silk Matt", price: 60 },
    { name: "Feather", price: 70 },
    { name: "Luster (Tearable)", price: 80 },
    { name: "Texture", price: 90 },
    { name: "Metallic", price: 100 },
    { name: "Transparent", price: 140 },
    { name: "Transparent GO-FO", price: 200 },
    { name: "Glossy GO-FO", price: 150 },
    { name: "Hologram", price: 140 },
    { name: "Glitter/3D (Half Sheet)", price: 100 },
    { name: "Embossing (Half Sheet)", price: 380 },
  ]
};

let selectedCategory = 'hp';
const cart = [];

function filterCategory(cat) {
  selectedCategory = cat;
  document.querySelectorAll('.category-tab').forEach(tab => tab.classList.remove('active'));
  event.target.classList.add('active');
  displayProducts();
}

function displayProducts() {
  const container = document.getElementById('productList');
  container.innerHTML = '';
  products[selectedCategory].forEach((product, index) => {
    container.innerHTML += `
      <div class="print-card">
        <div class="d-flex justify-content-between">
          <strong>${product.name}</strong>
          <span>₹${product.price}/page</span>
        </div>
        <div class="mt-2">
          <input type="number" min="1" class="form-control" placeholder="Enter No. of Pages" id="pages-${index}" oninput="updateTotal(${index}, ${product.price}, '${product.name}')">
          <div class="text-end mt-2"><strong>Total:</strong> ₹<span id="total-${index}">0</span></div>
          <button class="btn btn-sm btn-primary mt-2 w-100" onclick="addToCart('${product.name}', ${product.price}, ${index})">Add to Cart</button>
        </div>
      </div>
    `;
  });
}

function updateTotal(index, price) {
  const qty = document.getElementById(`pages-${index}`).value;
  document.getElementById(`total-${index}`).innerText = qty * price;
}

function addToCart(name, price, index) {
  const qty = parseInt(document.getElementById(`pages-${index}`).value);
  if (!qty || qty < 1) return alert("Enter valid number of pages");
  cart.push({ name, price, qty, total: qty * price });
  alert(`${name} added to cart`);
}

function downloadCart() {
  let content = 'Product Name,Price Per Page,Pages,Total\n';
  cart.forEach(item => {
    content += `${item.name},${item.price},${item.qty},${item.total}\n`;
  });
  const blob = new Blob([content], { type: 'text/csv' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = 'print_cart.csv';
  link.click();
}

displayProducts();
</script>
</body>
</html>
