<div class="imh-6310-form imh_6310_template_description imh-6310-form-03 imh-6310-form-04 imh-6310-form-05 imh-6310-hide">
  <table border="0" width="50%" cellpadding="10" cellspacing="0">
    <tr class="">
      <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture">Add Image:</label></td>
      <td>
        <input type="text" name="image" id="imh-6310-des-img" class="imh-6310-form-input imh-6310-des-img" value="">
        <input type="button" value="Upload Image" class="imh-6310-btn-default imh-6310-icon-upload custom-icon-image" data-id="imh-6310-des-img">
      </td>
    </tr>
    <tr class="">
      <td class='imh-6310-width-150'><label class="imh-6310-form-label">Tooltip Width:</label></td>
      <td>
        <input type="text" name="tooltip-width" class="imh-6310-form-input imh-6310-tooltip-width" value="400">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-150'><b>Description:</b></td>
      <td>
        <textarea class="imh-6310-form-input imh-6310-tooltip_discription" name="" id="imh-6310-tooltip_discription" cols="30" rows="10" data-value="Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis vero maxime beatae fugiat, aspernatur quia."></textarea>
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-150'><b>Description Font Size:</b></td>
      <td>
        <input type="number" class="imh-6310-form-input imh-6310-tooltip_discription_font_size" name="" id="imh-6310-tooltip_discription_font_size" data-value="16">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-150'><b>Description Font Color:</b></td>
      <td>
        <input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-tooltip_discription_font_color" data-format="rgb" data-opacity="0.8" data-value="rgb(0, 0, 0)" name="" id="imh-6310-tooltip_discription_font_color">
      </td>
    </tr>
  </table>
</div>
<div class="imh-6310-form imh_6310_font_prop imh-6310-form-01 imh-6310-form-04 imh-6310-form-03 imh-6310-form-05 imh-6310-hide">
  <table border="0" width="50%" cellpadding="10" cellspacing="0">
    <tr>
      <td class='imh-6310-width-150'><b>Font Size</b></td>
      <td>
        <input type="number" min="0" class="imh-6310-form-input imh_6310_template_font_size" step="1" data-value="16" />
      </td>
    </tr>
    <tr>
      <td><b>Font Color</b></td>
      <td>
        <input type="text" class="imh-6310-form-input imh_6310_color_picker imh_6310_template_font_color" data-format="rgb" data-value="rgb(18, 0, 0)">
      </td>
    </tr>
    <tr>
      <td><b>Background Color</b></td>
      <td>
        <input type="text" class="imh-6310-form-input imh_6310_color_picker imh_6310_template_bg_color" data-format="rgb" data-value="rgb(255, 255, 255)">
      </td>
    </tr>

  </table>
</div>

<div class="imh-6310-form imh_6310_template_embedded imh-6310-form-02 imh-6310-hide">
  <table border="0" width="100%" cellpadding="10" cellspacing="0">
    <tr>
      <td class='imh-6310-width-150'><b>Embedded Code</b></td>
      <td>
        <textarea name="imh-6310-embedded_code_link" id="imh-6310-embedded_code_link" class="imh-6310-embedded_code_link" cols="90" rows="5"></textarea>
      </td>
    </tr>
  </table>
</div>
<div class="imh-6310-form imh_6310_custom_template imh-6310-hide">
  <table border="0" width="100%" cellpadding="10" cellspacing="0">
    <tr>
      <td class='imh-6310-width-150'><b>HTML Code</b></td>
      <td>
        <textarea name="imh-6310-custome_html" id="imh-6310-custome_html" class="imh-6310-custome_html" cols="90" rows="5" data-value=''></textarea>
        <a href="https://wpmart.org/image-hotspot-templates-01-10/" target="_blank" class='imh-6310-custom-code-url'>Get build in custom code for tooltip / popup</a>
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-150'><b>CSS Code</b></td>
      <td>
        <textarea name="imh-6310-custome_css" id="imh-6310-custome_css" class="imh-6310-custome_css" cols="90" rows="5" data-value=''></textarea>
      </td>
    </tr>
  </table>
</div>

<div class="imh-6310-form imh-6310-direct-link imh-6310-hide">
  How to add direct link?<br />
  <a href="https://youtu.be/oXEa9BtJIfc" target="_blank">Youtube Video</a>
</div>

<div class="imh-6310-form imh-6310-product">
  <br>
  <div class="imh-6310-form-label">Choose Product</div>
  <?php
  if (class_exists('WooCommerce')) {
    $args = array(
      'limit' => -1, // Set to -1 to get all products
    );
    $products = wc_get_products($args);
    if (!empty($products)) {
      echo '<div class="imh-6310-search-container">';
      echo '<input type="text" id="imh-6310-product-search" placeholder="Type to search for products">';
      echo '<div class="imh-6310-suggestion-list imh-6310-hidden">';
      foreach ($products as $product) {
        $image_id = $product->get_image_id(); // Get the image ID
        $image_url = wp_get_attachment_image_url($image_id, 'full');
        echo "<div class='imh-6310-product-list imh-6310-hidden' data-product-id='{$product->id}' data-product-img='{$image_url}'>{$product->get_name()}</div>";
      }
      echo '</div>';
      echo '<div class="imh-6310-no-product imh-6310-hidden">No product found.</div>';
      echo '</div>';
    }
  } else {
    echo 'WooCommerce is not active.';
  }
  ?>
  <div class="imh-6310-selected-product-list"></div>

  <table border="0" width="48%" cellpadding="10" cellspacing="0" style="float: left;">
    <tr>
      <td class='imh-6310-width-150'><b>Product per row in Desktop:</b></td>
      <td>
        <input type="number" class="imh-6310-form-input imh-6310-product-per-row-desk" data-value="3" min="1" max="6">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-150'><b>Product per row in Mobile:</b></td>
      <td>
        <input type="number" class="imh-6310-form-input imh-6310-product-per-row-mob" data-value="2" min="1" max="6">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-150'><b>Product Box Width:</b></td>
      <td>
        <input type="number" class="imh-6310-form-input imh-6310-product-box-width" data-value="500" min="100" max="1000">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-150'><b>Product Box Background Color:</b></td>
      <td>
        <input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-box-bg-color" data-format="rgb" data-value="rgb(255, 255, 255)" name="">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-150'><b>Product Box Hover Color:</b></td>
      <td>
        <input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-box-hover-color" data-format="rgb" data-value="rgb(240, 240, 240)" name="">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-150'><b>Product Title Font Size:</b></td>
      <td>
        <input type="number" class="imh-6310-form-input imh-6310-product-title-font-size" data-value="18" min="8" max="60" step="1">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-150'><b>Product Title Color:</b></td>
      <td>
        <input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-title-color" data-format="rgb" data-value="rgb(0, 0, 0)" name="">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-150'><b>Product Title Hover Color:</b></td>
      <td>
        <input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-title-hover-color" data-format="rgb" data-value="rgb(26, 26, 26)" name="">
      </td>
    </tr>
  </table>
  
  <table border="0" width="48%" cellpadding="10" cellspacing="0" style="float: left;">
    <tr>
      <td class='imh-6310-width-150'><b>Price Font Size:</b></td>
      <td>
        <input type="number" class="imh-6310-form-input imh-6310-product-price-font-size" data-value="16" min="8" max="60" step="1">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-150'><b>Discount Price Color:</b></td>
      <td>
        <input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-dis-price-color" data-format="rgb" data-value="rgb(255, 0, 0)" name="">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-150'><b>Price Color:</b></td>
      <td>
        <input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-price-color" data-format="rgb" data-value="rgb(4, 107, 210)" name="">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-150'><b>Button Font Size:</b></td>
      <td>
        <input type="number" class="imh-6310-form-input imh-6310-product-button-font-size" data-value="18" min="8" max="60" step="1">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-150'><b>Button Color:</b></td>
      <td>
        <input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-button-color" data-format="rgb" data-value="rgb(255, 255, 255)" name="">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-150'><b>Button Hover Color:</b></td>
      <td>
        <input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-button-hover-color" data-format="rgb" data-value="rgb(245, 245, 245)" name="">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-150'><b>Button Background Color:</b></td>
      <td>
        <input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-button-bg-color" data-format="rgb" data-value="rgb(4, 107, 210)" name="">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-150'><b>Button Background Hover Color:</b></td>
      <td>
        <input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-button-bg-hover-color" data-format="rgb" data-value="rgb(210, 100, 72)" name="">
      </td>
    </tr>
  </table>
</div>