{% comment %}
  Custom Chocolate Order Builder Page
  This template creates a step-by-step customization experience for custom chocolates
{% endcomment %}

<div class="custom-chocolate-builder">
  <!-- Hero Section -->
  <section class="custom-chocolate-hero">
    <div class="container">
      <h1>নিজের মতো কাস্টম চকলেট বানাও! 🔥</h1>
      <p>ধাপে ধাপে কাস্টমাইজ করে তৈরি করুন আপনার স্বপ্নের চকলেট</p>
    </div>
  </section>

  <!-- Progress Bar -->
  <section class="progress-section">
    <div class="container">
      <div class="progress-bar">
        <div class="progress-step active" data-step="1">
          <span class="step-number">1</span>
          <span class="step-title">ক্যাটাগরি</span>
        </div>
        <div class="progress-step" data-step="2">
          <span class="step-number">2</span>
          <span class="step-title">সাইজ</span>
        </div>
        <div class="progress-step" data-step="3">
          <span class="step-number">3</span>
          <span class="step-title">কাস্টমাইজেশন</span>
        </div>
        <div class="progress-step" data-step="4">
          <span class="step-number">4</span>
          <span class="step-title">সমাপ্তি</span>
        </div>
      </div>
    </div>
  </section>

  <!-- Main Content -->
  <section class="custom-chocolate-content">
    <div class="container">
      <div class="customization-panel">
        <!-- Step 1: Category Selection -->
        <div class="step-content active" id="step-1">
          <h2>ক্যাটাগরি নির্বাচন করুন</h2>
          <div class="category-options">
            <div class="category-option" data-category="chocolate">
              <div class="category-image">
                <img src="{{ 'chocolate-category.jpg' | asset_img_url: 'medium' }}" alt="চকলেট">
              </div>
              <span>চকলেট</span>
            </div>
            <div class="category-option disabled" data-category="hamper">
              <div class="category-image">
                <img src="{{ 'hamper-category.jpg' | asset_img_url: 'medium' }}" alt="হ্যাম্পার">
              </div>
              <span>হ্যাম্পার</span>
            </div>
            <div class="category-option disabled" data-category="other">
              <div class="category-image">
                <img src="{{ 'other-category.jpg' | asset_img_url: 'medium' }}" alt="অন্যান্য">
              </div>
              <span>অন্যান্য</span>
            </div>
          </div>
          <div class="step-navigation">
            <button class="btn btn-primary" id="next-step-1" disabled>পরবর্তী ধাপ</button>
          </div>
        </div>

        <!-- Step 2: Size Selection -->
        <div class="step-content" id="step-2">
          <h2>সাইজ নির্বাচন করুন</h2>
          <div class="size-options">
            <div class="size-option" data-size="6">
              <div class="size-image">
                <img src="{{ '6pcs-chocolate.jpg' | asset_img_url: 'medium' }}" alt="৬ পিস">
              </div>
              <span>৬ পিস</span>
            </div>
            <div class="size-option" data-size="12">
              <div class="size-image">
                <img src="{{ '12pcs-chocolate.jpg' | asset_img_url: 'medium' }}" alt="১২ পিস">
              </div>
              <span>১২ পিস</span>
            </div>
            <div class="size-option" data-size="24">
              <div class="size-image">
                <img src="{{ '24pcs-chocolate.jpg' | asset_img_url: 'medium' }}" alt="২৪ পিস">
              </div>
              <span>২৪ পিস</span>
            </div>
            <div class="size-option" data-size="custom">
              <div class="size-image">
                <img src="{{ 'custom-chocolate.jpg' | asset_img_url: 'medium' }}" alt="কাস্টম">
              </div>
              <span>কাস্টম</span>
            </div>
          </div>
          <div class="free-chocolate-offer" id="free-chocolate" style="display: none;">
            <img src="{{ 'free-milk-chocolate.jpg' | asset_img_url: 'small' }}" alt="ফ্রি মিল্ক চকলেট">
            <span>ফ্রি: ১টা মিল্ক চকলেট পাবেন!</span>
          </div>
          <div class="step-navigation">
            <button class="btn btn-secondary" id="prev-step-2">আগের ধাপ</button>
            <button class="btn btn-primary" id="next-step-2" disabled>পরবর্তী ধাপ</button>
          </div>
        </div>

        <!-- Step 3: Customization Options -->
        <div class="step-content" id="step-3">
          <h2>আপনার চকলেট কাস্টমাইজ করুন</h2>
          <div class="customization-form">
            <div class="form-group">
              <label for="color-select">রং নির্বাচন করুন</label>
              <div class="color-swatches">
                <div class="color-swatch active" data-color="brown" style="background-color: #6B4423;"></div>
                <div class="color-swatch" data-color="black" style="background-color: #1a1a1a;"></div>
                <div class="color-swatch" data-color="gold" style="background-color: #D4AF37;"></div>
                <div class="color-swatch" data-color="red" style="background-color: #C41E3A;"></div>
                <div class="color-swatch" data-color="white" style="background-color: #F5F5F5;"></div>
              </div>
              <input type="hidden" id="color-select" name="properties[Color]" value="brown">
            </div>

            <div class="form-group">
              <label for="shape-select">আকার নির্বাচন করুন</label>
              <select id="shape-select" name="properties[Shape]">
                <option value="rectangle">Rectangle</option>
                <option value="heart">Heart</option>
                <option value="square">Square</option>
                <option value="round">Round</option>
              </select>
            </div>

            <div class="form-group">
              <label for="photo-upload">ছবি আপলোড করুন (লোগো/ছবি)</label>
              <input type="file" id="photo-upload" name="properties[Photo]" accept="image/*">
              <div class="file-upload-info">সর্বোচ্চ 5MB, JPG/PNG ফরম্যাট</div>
            </div>

            <div class="form-group">
              <label for="message-input">বার্তা লিখুন (সর্বোচ্চ ৫০ অক্ষর)</label>
              <input type="text" id="message-input" name="properties[Message]" maxlength="50" placeholder="আপনার বার্তা এখানে লিখুন">
              <div class="char-count"><span id="char-count">0</span>/50</div>
            </div>

            <div class="form-group">
              <label for="delivery-date">ডেলিভারি তারিখ</label>
              <input type="date" id="delivery-date" name="properties[Delivery Date]" min="{{ 'now' | date: '%Y-%m-%d' }}">
            </div>

            <div class="form-group">
              <label for="extra-note">অতিরিক্ত নোট (ঐচ্ছিক)</label>
              <textarea id="extra-note" name="properties[Extra Note]" rows="3" placeholder="অতিরিক্ত তথ্য থাকলে এখানে লিখুন"></textarea>
            </div>
          </div>
          <div class="step-navigation">
            <button class="btn btn-secondary" id="prev-step-3">আগের ধাপ</button>
            <button class="btn btn-primary" id="next-step-3">পরবর্তী ধাপ</button>
          </div>
        </div>

        <!-- Step 4: Review and Submit -->
        <div class="step-content" id="step-4">
          <h2>আপনার অর্ডার পর্যালোচনা করুন</h2>
          <div class="order-summary">
            <div class="summary-item">
              <span class="label">ক্যাটাগরি:</span>
              <span class="value" id="summary-category">-</span>
            </div>
            <div class="summary-item">
              <span class="label">সাইজ:</span>
              <span class="value" id="summary-size">-</span>
            </div>
            <div class="summary-item">
              <span class="label">রং:</span>
              <span class="value" id="summary-color">-</span>
            </div>
            <div class="summary-item">
              <span class="label">আকার:</span>
              <span class="value" id="summary-shape">-</span>
            </div>
            <div class="summary-item">
              <span class="label">বার্তা:</span>
              <span class="value" id="summary-message">-</span>
            </div>
            <div class="summary-item">
              <span class="label">ডেলিভারি তারিখ:</span>
              <span class="value" id="summary-delivery">-</span>
            </div>
          </div>
          <div class="order-note">
            <p>অর্ডার রেডি হবে ৩-৪ দিনের মধ্যে। ডেলিভারি ডেট: <span id="delivery-date-note">-</span></p>
          </div>
          <div class="step-navigation">
            <button class="btn btn-secondary" id="prev-step-4">আগের ধাপ</button>
            <button class="btn btn-primary" id="add-to-cart">কাস্টমাইজড অর্ডার যোগ করো</button>
          </div>
        </div>
      </div>

      <!-- Live Preview Area -->
      <div class="preview-panel">
        <h2>লাইভ প্রিভিউ</h2>
        <div class="preview-container">
          <div class="preview-base">
            <img id="preview-image" src="{{ 'brown-6pcs.jpg' | asset_img_url: 'large' }}" alt="Chocolate Preview">
            <div class="preview-photo" id="preview-photo" style="display: none;">
              <img src="" alt="Uploaded Photo">
            </div>
            <div class="preview-text" id="preview-text"></div>
          </div>
        </div>
        <div class="preview-info">
          <p>এটি শুধুমাত্র একটি প্রিভিউ। চূড়ান্ত পণ্য আলাদা হতে পারে।</p>
        </div>
      </div>
    </div>
  </section>
</div>

<style>
  /* Custom Chocolate Builder Styles */
  .custom-chocolate-builder {
    font-family: 'Poppins', sans-serif;
    color: #333;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }

  /* Hero Section */
  .custom-chocolate-hero {
    text-align: center;
    padding: 40px 0;
    background-color: #f8f8f8;
    border-radius: 10px;
    margin-bottom: 30px;
  }

  .custom-chocolate-hero h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: #6B4423;
  }

  .custom-chocolate-hero p {
    font-size: 1.2rem;
    color: #666;
  }

  /* Progress Bar */
  .progress-section {
    margin-bottom: 30px;
  }

  .progress-bar {
    display: flex;
    justify-content: space-between;
    position: relative;
  }

  .progress-bar::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: #e0e0e0;
    z-index: 1;
  }

  .progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
  }

  .step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 8px;
  }

  .progress-step.active .step-number {
    background-color: #6B4423;
    color: white;
  }

  .step-title {
    font-size: 0.9rem;
    text-align: center;
  }

  /* Main Content */
  .custom-chocolate-content .container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
  }

  .customization-panel {
    flex: 1;
    min-width: 300px;
  }

  .preview-panel {
    flex: 1;
    min-width: 300px;
  }

  /* Step Content */
  .step-content {
    display: none;
    background-color: #fff;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  }

  .step-content.active {
    display: block;
  }

  .step-content h2 {
    margin-bottom: 20px;
    color: #6B4423;
  }

  /* Category Options */
  .category-options {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
  }

  .category-option {
    flex: 1;
    min-width: 150px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .category-option:hover:not(.disabled) {
    border-color: #6B4423;
    transform: translateY(-5px);
  }

  .category-option.selected {
    border-color: #6B4423;
    background-color: #f9f3eb;
  }

  .category-option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .category-image {
    height: 120px;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 5px;
  }

  .category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Size Options */
  .size-options {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
  }

  .size-option {
    flex: 1;
    min-width: 120px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .size-option:hover {
    border-color: #6B4423;
    transform: translateY(-5px);
  }

  .size-option.selected {
    border-color: #6B4423;
    background-color: #f9f3eb;
  }

  .size-image {
    height: 100px;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 5px;
  }

  .size-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Free Chocolate Offer */
  .free-chocolate-offer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 10px;
    background-color: #fff9e6;
    border-radius: 5px;
  }

  .free-chocolate-offer img {
    width: 50px;
    height: 50px;
    object-fit: contain;
  }

  /* Customization Form */
  .customization-form {
    margin-bottom: 30px;
  }

  .form-group {
    margin-bottom: 20px;
  }

  .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: inherit;
  }

  .form-group textarea {
    resize: vertical;
  }

  /* Color Swatches */
  .color-swatches {
    display: flex;
    gap: 10px;
  }

  .color-swatch {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.3s ease;
  }

  .color-swatch:hover {
    transform: scale(1.1);
  }

  .color-swatch.active {
    border-color: #333;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #333;
  }

  /* File Upload Info */
  .file-upload-info {
    font-size: 0.8rem;
    color: #666;
    margin-top: 5px;
  }

  /* Character Count */
  .char-count {
    text-align: right;
    font-size: 0.8rem;
    color: #666;
    margin-top: 5px;
  }

  /* Step Navigation */
  .step-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
  }

  .btn {
    padding: 12px 24px;
    border: none;
    border-radius: 5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .btn-primary {
    background-color: #6B4423;
    color: white;
  }

  .btn-primary:hover:not(:disabled) {
    background-color: #4a2f16;
  }

  .btn-secondary {
    background-color: #e0e0e0;
    color: #333;
  }

  .btn-secondary:hover {
    background-color: #d0d0d0;
  }

  /* Order Summary */
  .order-summary {
    background-color: #f8f8f8;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
  }

  .summary-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #e0e0e0;
  }

  .summary-item:last-child {
    border-bottom: none;
  }

  .summary-item .label {
    font-weight: 500;
  }

  /* Order Note */
  .order-note {
    background-color: #fff9e6;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
  }

  /* Preview Panel */
  .preview-panel {
    background-color: #fff;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  }

  .preview-panel h2 {
    margin-bottom: 20px;
    color: #6B4423;
  }

  .preview-container {
    position: relative;
    margin-bottom: 20px;
  }

  .preview-base {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
  }

  #preview-image {
    width: 100%;
    height: auto;
    display: block;
  }

  .preview-photo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: auto;
    max-width: 150px;
  }

  .preview-photo img {
    width: 100%;
    height: auto;
  }

  .preview-text {
    position: absolute;
    bottom: 20%;
    left: 0;
    right: 0;
    text-align: center;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    padding: 5px;
  }

  .preview-info {
    font-size: 0.9rem;
    color: #666;
    text-align: center;
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    .custom-chocolate-content .container {
      flex-direction: column;
    }

    .custom-chocolate-hero h1 {
      font-size: 2rem;
    }

    .progress-step .step-title {
      font-size: 0.8rem;
    }

    .category-options,
    .size-options {
      flex-direction: column;
    }

    .step-navigation {
      flex-direction: column;
      gap: 10px;
    }

    .step-navigation .btn {
      width: 100%;
    }
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Initialize variables
    let currentStep = 1;
    let selectedCategory = '';
    let selectedSize = '';
    let selectedColor = 'brown';
    let selectedShape = 'rectangle';
    let uploadedPhoto = null;
    let customMessage = '';
    let deliveryDate = '';
    let extraNote = '';

    // Category selection
    const categoryOptions = document.querySelectorAll('.category-option:not(.disabled)');
    const nextStep1Btn = document.getElementById('next-step-1');

    categoryOptions.forEach(option => {
      option.addEventListener('click', function() {
        // Remove selected class from all options
        categoryOptions.forEach(opt => opt.classList.remove('selected'));
        
        // Add selected class to clicked option
        this.classList.add('selected');
        
        // Store selected category
        selectedCategory = this.dataset.category;
        
        // Enable next button
        nextStep1Btn.disabled = false;
      });
    });

    // Size selection
    const sizeOptions = document.querySelectorAll('.size-option');
    const nextStep2Btn = document.getElementById('next-step-2');
    const freeChocolate = document.getElementById('free-chocolate');

    sizeOptions.forEach(option => {
      option.addEventListener('click', function() {
        // Remove selected class from all options
        sizeOptions.forEach(opt => opt.classList.remove('selected'));
        
        // Add selected class to clicked option
        this.classList.add('selected');
        
        // Store selected size
        selectedSize = this.dataset.size;
        
        // Update preview image based on size
        updatePreviewImage();
        
        // Show free chocolate offer
        if (selectedSize === '12' || selectedSize === '24') {
          freeChocolate.style.display = 'flex';
        } else {
          freeChocolate.style.display = 'none';
        }
        
        // Enable next button
        nextStep2Btn.disabled = false;
      });
    });

    // Color swatches
    const colorSwatches = document.querySelectorAll('.color-swatch');
    const colorSelect = document.getElementById('color-select');

    colorSwatches.forEach(swatch => {
      swatch.addEventListener('click', function() {
        // Remove active class from all swatches
        colorSwatches.forEach(s => s.classList.remove('active'));
        
        // Add active class to clicked swatch
        this.classList.add('active');
        
        // Store selected color
        selectedColor = this.dataset.color;
        
        // Update hidden input
        colorSelect.value = selectedColor;
        
        // Update preview image
        updatePreviewImage();
      });
    });

    // Shape selection
    const shapeSelect = document.getElementById('shape-select');
    shapeSelect.addEventListener('change', function() {
      selectedShape = this.value;
      updatePreviewImage();
    });

    // Photo upload
    const photoUpload = document.getElementById('photo-upload');
    const previewPhoto = document.getElementById('preview-photo');

    photoUpload.addEventListener('change', function(e) {
      const file = e.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = function(event) {
          previewPhoto.querySelector('img').src = event.target.result;
          previewPhoto.style.display = 'block';
          uploadedPhoto = event.target.result;
        };
        reader.readAsDataURL(file);
      }
    });

    // Message input
    const messageInput = document.getElementById('message-input');
    const charCount = document.getElementById('char-count');
    const previewText = document.getElementById('preview-text');

    messageInput.addEventListener('input', function() {
      customMessage = this.value;
      charCount.textContent = customMessage.length;
      previewText.textContent = customMessage;
    });

    // Delivery date
    const deliveryDateInput = document.getElementById('delivery-date');
    deliveryDateInput.addEventListener('change', function() {
      deliveryDate = this.value;
    });

    // Extra note
    const extraNoteInput = document.getElementById('extra-note');
    extraNoteInput.addEventListener('input', function() {
      extraNote = this.value;
    });

    // Step navigation
    const nextButtons = document.querySelectorAll('[id^="next-step-"]');
    const prevButtons = document.querySelectorAll('[id^="prev-step-"]');

    nextButtons.forEach(button => {
      button.addEventListener('click', function() {
        const stepNum = parseInt(this.id.split('-')[2]);
        goToStep(stepNum + 1);
      });
    });

    prevButtons.forEach(button => {
      button.addEventListener('click', function() {
        const stepNum = parseInt(this.id.split('-')[2]);
        goToStep(stepNum - 1);
      });
    });

    // Update preview image based on selections
    function updatePreviewImage() {
      const previewImage = document.getElementById('preview-image');
      const imageBase = `${selectedColor}-${selectedSize}pcs`;
      
      // Try to load the image, fallback to default if not found
      const img = new Image();
      img.onload = function() {
        previewImage.src = this.src;
      };
      img.onerror = function() {
        // Fallback to a default image
        previewImage.src = "{{ 'default-chocolate.jpg' | asset_img_url: 'large' }}";
      };
      
      // Try to load the specific image
      img.src = `{{ imageBase | asset_img_url: 'large' }}`;
    }

    // Go to specific step
    function goToStep(step) {
      // Hide current step
      document.getElementById(`step-${currentStep}`).classList.remove('active');
      document.querySelector(`.progress-step[data-step="${currentStep}"]`).classList.remove('active');
      
      // Show new step
      currentStep = step;
      document.getElementById(`step-${currentStep}`).classList.add('active');
      document.querySelector(`.progress-step[data-step="${currentStep}"]`).classList.add('active');
      
      // Update order summary if on last step
      if (currentStep === 4) {
        updateOrderSummary();
      }
    }

    // Update order summary
    function updateOrderSummary() {
      document.getElementById('summary-category').textContent = selectedCategory === 'chocolate' ? 'চকলেট' : '-';
      document.getElementById('summary-size').textContent = selectedSize ? `${selectedSize} পিস` : '-';
      document.getElementById('summary-color').textContent = getColorName(selectedColor);
      document.getElementById('summary-shape').textContent = getShapeName(selectedShape);
      document.getElementById('summary-message').textContent = customMessage || '-';
      document.getElementById('summary-delivery').textContent = deliveryDate || '-';
      document.getElementById('delivery-date-note').textContent = deliveryDate || '-';
    }

    // Get color name in Bangla
    function getColorName(color) {
      const colorNames = {
        'brown': 'বাদামী',
        'black': 'কালো',
        'gold': 'সোনালী',
        'red': 'লাল',
        'white': 'সাদা'
      };
      return colorNames[color] || color;
    }

    // Get shape name in Bangla
    function getShapeName(shape) {
      const shapeNames = {
        'rectangle': 'Rectangle',
        'heart': 'Heart',
        'square': 'Square',
        'round': 'Round'
      };
      return shapeNames[shape] || shape;
    }

    // Add to cart
    const addToCartBtn = document.getElementById('add-to-cart');
    addToCartBtn.addEventListener('click', function() {
      // Create form data
      const formData = new FormData();
      
      // Add product ID (you'll need to replace this with your actual product ID)
      formData.append('id', 'YOUR_PRODUCT_ID');
      formData.append('quantity', '1');
      
      // Add line item properties
      formData.append('properties[Category]', selectedCategory);
      formData.append('properties[Size]', selectedSize);
      formData.append('properties[Color]', selectedColor);
      formData.append('properties[Shape]', selectedShape);
      formData.append('properties[Message]', customMessage);
      formData.append('properties[Delivery Date]', deliveryDate);
      formData.append('properties[Extra Note]', extraNote);
      
      // Add to cart via Shopify AJAX API
      fetch('/cart/add.js', {
        method: 'POST',
        body: formData
      })
      .then(response => response.json())
      .then(data => {
        // Show success message
        alert('আপনার কাস্টম চকলেট সফলভাবে কার্টে যোগ করা হয়েছে!');
        
        // Redirect to cart or checkout
        window.location.href = '/cart';
      })
      .catch(error => {
        console.error('Error adding to cart:', error);
        alert('কার্টে যোগ করতে সমস্যা হয়েছে। আবার চেষ্টা করুন।');
      });
    });
  });
</script>