<div id="imh-6310-add-point" class="imh-6310-modal imh-6310-hide">
  <div class="imh-6310-modal-content imh-6310-modal-lg">
    <div class="imh-6310-modal-header">
      Marker Settings
      <div class="imh-6310-close">&times;</div>
    </div>

    <div class="toggle-wrap">
      <ul class="toggle-tabs">
        <li data-id="1" class="active-tab">Marker</li>
        <li data-id="2">Content</li>
        <li data-id="3">link</li>
      </ul>

      <div class="imh-6310-modal-body-form">
        <div class="tabbed-content-wrap">
          <div class="imh-6310-tab imh-6310-tab-1">
            <table border="0" width="100%" cellpadding="10" cellspacing="0">
              <tr>
                <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="icons">Marker Type:</label></td>
                <td>
                  <input type="radio" name='icontype' class='imh-6310_icon_type' value='1' checked /> Font Awesome Icon
                  <input type="radio" name='icontype' class="imh-6310_icon_type" value='2' /> Custom Icon
                  <input type="radio" name='icontype' class='imh-6310_icon_type' value='3' /> Text
                </td>
              </tr>
              <tr height="40px" class="imh-6310-form-icon imh-6310-marker imh-6310-marker-type-1">
                <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="icons">Icons:</label></td>               
                <td>
                  <input type="text" name="icons" id="icons-1" class="imh-6310-form-input lg icons-1" placeholder="fas fa-map-marker-alt" data-value="fas fa-map-marker-alt" readonly="">
                  <div class="imh-6310-plus-icons" data-id='icons-1'><i class="fas fa-plus-circle"></i></div>
                  <div class="imh-6310-minus-icons" data-id='icons-1'><i class="fas fa-minus-circle"></i></div>
                  <div class="imh-selected-icon icons-1-selected"> <i class="fas fa-map-marker-alt"></i></div>
                </td>
              </tr>
              <tr height="40px" class="imh-6310-form-icon imh-6310-marker imh-6310-marker-type-1">
                <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="icons">Hover Icons:</label></td>
                <td>
                  <input type="text" name="hovericons" id="icons-2" class="imh-6310-form-input lg icons-2" placeholder="fas fa-map-marker-alt" data-value="fas fa-map-marker-alt" readonly="">
                  <div class="imh-6310-plus-icons" data-id='icons-2'><i class="fas fa-plus-circle"></i></div>
                  <div class="imh-6310-minus-icons" data-id='icons-2'><i class="fas fa-minus-circle"></i></div>
                  <div class="imh-selected-icon icons-2-selected"> <i class="fas fa-map-marker-alt"></i></div>
                </td>
              </tr>
              <tr height="40px" class="imh-6310-form-icon imh-6310-marker imh-6310-marker-type-1">
                <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="icons">Icon Color:</label></td>
                <td>
                  <input type="text" name="imh_6310_fontawesome_icon_color" class="imh_6310_fontawesome_icon_color imh-6310-form-input imh_6310_color_picker" data-format="rgb" data-opacity="0.8" data-value="rgba(255, 28, 3, 0.99)">
                </td>
              </tr>
              <tr height="40px" class="imh-6310-form-icon imh-6310-marker imh-6310-marker-type-1">
                <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="icons">Icon Hover Color:</label></td>
                <td>
                  <input type="text" name="imh_6310_fontawesome_icon_hover_color" class="imh-6310-form-input imh_6310_color_picker imh_6310_fontawesome_icon_hover_color" data-opacity="0.8" data-format="rgb" data-value="rgba(255, 28, 3, 0.99)">
                </td>
              </tr>
              <tr height="40px" class="imh-6310-form-icon imh-6310-marker imh-6310-marker-type-1">
                <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="icons">Icon size in desktop:</label></td>
                <td>
                  <input type="number" min='0' max="" name="imh-6310_icon_size" class="imh-6310-form-input imh-6310_icon_size" data-value="30">
                </td>
              </tr>
              <tr height="40px" class="imh-6310-form-icon imh-6310-marker imh-6310-marker-type-1">
                <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="icons">Icon size in Mobile:</label></td>
                <td>
                  <input type="number" min='0' max="" name="imh-6310_icon_size_in_mobile" class="imh-6310-form-input imh-6310_icon_size_in_mobile" data-value="20">
                </td>
              </tr>

              <tr class="imh-6310-marker imh-6310-marker-type-2 imh-6310-hide">
                <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture">Custom Icon/Image:</label></td>
                <td>
                  <input type="text" name="image" id="imh-6310-image-edit-1" class="imh-6310-form-input imh-6310-image-edit-1" value="">
                  <input type="button" value="Upload Image" class="imh-6310-btn-default imh-6310-icon-upload custom-icon-image" data-id="imh-6310-image-edit-1" data-value=''>
                </td>
              </tr>
              <tr class="imh-6310-marker imh-6310-marker-type-2 imh-6310-hide">
                <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture">Custom Hover Icon/Image:</label></td>
                <td>
                  <input type="text" name="hoverimage" id="imh-6310-image-edit-2" class="imh-6310-form-input imh-6310-image-edit-2" value="">
                  <input type="button" value="Upload Hover Image" class="imh-6310-btn-default imh-6310-icon-upload custom-icon-image" data-id="imh-6310-image-edit-2" data-value=''>
                </td>
              </tr>
              <tr class="imh-6310-marker imh-6310-marker-type-2 imh-6310-hide">
                <td class='imh-6310-width-150'><label class="imh-6310-form-label">Image / icon Size in Desktop:</label></td>
                <td>
                  <input type="number" min='0' max="" name="img_or_icon_size" class="imh-6310-form-input img_or_icon_size" data-value="30">
                </td>
              </tr>
              <tr class="imh-6310-marker imh-6310-marker-type-2 imh-6310-hide">
                <td class='imh-6310-width-150'><label class="imh-6310-form-label">Image / icon Size in Mobile:</label></td>
                <td>
                  <input type="number" min='0' max="" name="img_or_icon_size_in_mobile" class="imh-6310-form-input img_or_icon_size_in_mobile" data-value="20">
                </td>
              </tr>
              <tr height="40px" class="imh-6310-marker  imh-6310-marker-type-3 imh-6310-hide">
                <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="icons">Text:</label></td>
                <td>
                  <input type="text" name="icons" id="imh-6310_custom_enter_text" class="imh-6310-form-input lg imh-6310_custom_enter_text" data-value="Hover here">
                </td>
              </tr>
              <tr class="imh-6310-marker imh-6310-marker-type-3 imh-6310-hide">
                <td class='imh-6310-width-150'><b>Font Size:</b></td>
                <td>
                  <input type="number" min="0" class="imh-6310-form-input imh_6310_custom_text_font_size" data-value="16" step="1" />
                </td>
              </tr>
              <tr class="imh-6310-marker imh-6310-marker-type-3 imh-6310-hide">
                <td><b>Font Color:</b></td>
                <td>
                  <input type="text" class="imh-6310-form-input imh_6310_color_picker imh_6310_custom_text_font_color" data-format="rgb" data-value="rgb(255, 255, 255)">
                </td>
              </tr>
              <tr class="imh-6310-marker imh-6310-marker-type-3 imh-6310-hide">
                <td><b>Background Color:</b></td>
                <td>
                  <input type="text" class="imh-6310-form-input imh_6310_color_picker imh_6310_custom_text_font_bg_color" data-format="rgb" data-opacity="0.8" data-value="rgba(2, 59, 92, 0.99)">
                </td>
              </tr>
            </table>
            <table border="0" width="100%" cellpadding="10" cellspacing="0">
              <tr>
                <td class='imh-6310-width-150'><b>Blinking Tooltip:</b></td>
                <td>
                  <input type="radio" name='blinktype' class='imh-6310_blink_type' value='1' checked /> Yes                  
                  <input type="radio" name='blinktype' class="imh-6310_blink_type" value='2' /> No                
                </td>
              </tr>
              <tr height="40px" class="imh-6310-form-icon imh_6310_icon_glow_color">
                <td class='imh-6310-width-150'><b>Color:</b><br>                
              </td>                
                <td>
                  <input type="text" name="imh-6310-form-input imh_6310_color_picker imh_6310_fontawesome_icon_glow_color" class="imh-6310-form-input imh_6310_color_picker imh_6310_fontawesome_icon_glow_color" data-format="rgb" data-opacity="0.8" data-value="rgb(255, 0, 0)">
                </td>
              </tr>
              <tr>
                <td class='imh-6310-width-150'><b>Always Visible:</b></td>
                <td>
                  <input type="radio" name='always_show' class='imh-6310_always_show' value='1' /> Yes                  
                  <input type="radio" name='always_show' class="imh-6310_always_show" value='2' checked /> No                
                </td>
              </tr>  
            </table>
          </div>
          <div class="imh-6310-tab imh-6310-tab-2">
          <table border="0" width="100%" cellpadding="10" cellspacing="0">
            <tr>
              <td class='imh-6310-width-150'><label class="imh-6310-form-label">Element Type:</label></td>
              <td>
                <input class='imh-6310-section-select' value='1' type="radio" name="popover_new" checked />Tooltip
                <input class='imh-6310-section-select' value='2' type="radio" name="popover_new">Embedded code
                <input class='imh-6310-section-select' value='3' type="radio" name="popover_new">Custom code
                <input class='imh-6310-section-select' value='5' type="radio" name="popover_new">WooCommerce Products
                <input class='imh-6310-section-select' value='4' type="radio" name="popover_new">Direct Link
              </td>
            </tr> 
         
          </table>
            <div class="imh-6310-templates imh-6310-hide">
              <table border="0" width="100%" cellpadding="10" cellspacing="0">
            
                <tr class="">
                  <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture"> Select Template:</label></td>
                  <td>
                    <div class="imh-6310-tooltip_img_section">
                      <div class="imh-6310-tooltip-img imh-6310-type-1" data-id='01'>
                        <img src="<?php echo imh_6310_plugin_dir_url . 'assets/images/1.png' ?>" data-template='template-01' alt="First Img">
                      </div>
                      <div class="imh-6310-tooltip-img imh-6310-type-2 " data-id='02'>
                        <img src="<?php echo imh_6310_plugin_dir_url . 'assets/images/2.png' ?>" alt="First Img">
                      </div>
                      <div class="imh-6310-tooltip-img imh-6310-type-1" data-id='03'>
                        <img src="<?php echo imh_6310_plugin_dir_url . 'assets/images/3.png' ?>" alt="First Img">
                      </div>
                      <div class="imh-6310-tooltip-img imh-6310-type-1" data-id='04'>
                        <img src="<?php echo imh_6310_plugin_dir_url . 'assets/images/4.png' ?>" alt="First Img">
                      </div>
                      <div class="imh-6310-tooltip-img imh-6310-type-1 " data-id='05'>
                        <img src="<?php echo imh_6310_plugin_dir_url . 'assets/images/5.png' ?>" alt="First Img">
                      </div>
                    </div>
                  </td>
                </tr>
              </table>
            </div>
            <div class="imh-6310-tooltip-link imh-6310-hide">
              <table border="0" width="100%" cellpadding="10" cellspacing="0">
                <tr>
                  <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture">Hover Content:</label></td>
                  <td>
                    <input type="text" data-value="Tooltip text" class="imh_6310_link_text">
                  </td>
                </tr>

                <tr>
                  <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture">Open in Popup:</label></td>
                  <td>
                    <input name="imh-6310-open-popup" class="imh-6310-open-popup" value='2' type="radio" checked>Popup Embedded
                    <input name="imh-6310-open-popup" class="imh-6310-open-popup" value='3' type="radio" checked>Popup Custom Code
                    <input name="imh-6310-open-popup" class="imh-6310-open-popup" value='1' type="radio">No
                  </td>
                </tr>
                <tr class="tooltip-embedded imh-6310-hide">
                  <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture"> Enter Embedded Code:</label></td>
                  <td>
                    <textarea class="imh_6310_custom_code_popup-html" name="imh_6310_custom_code_popup" placeholder="" cols="90" rows="5"  ></textarea>
                  </td>
                </tr>
                <tr class="tooltip-custom-code imh-6310-hide">
                  <td class='imh-6310-width-150'><b>Popup Max Width</b></td>
                  <td>
                    <input type="text" name="imh_6310_custom_popup_width" id="imh_6310_custom_popup_width" class="imh_6310_custom_popup_width" placeholder="Custom popup width" >                  
                  </td>
                </tr> 
                <tr class="tooltip-custom-code imh-6310-hide">
                  <td class='imh-6310-width-150'><b>HTML Code</b></td>
                  <td>
                    <textarea name="imh_6310_popup_custom_html" id="imh_6310_popup_custom_html" class="imh_6310_popup_custom_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 class="tooltip-custom-code imh-6310-hide">
                  <td class='imh-6310-width-150'><b>CSS Code</b></td>
                  <td>
                    <textarea name="imh_6310_popup_custom_css" id="imh_6310_popup_custom_css" class="imh_6310_popup_custom_css" cols="90" rows="5" data-value=''></textarea>
                  </td>
                </tr> 
               
              </table>
            </div>
            <?php include imh_6310_plugin_url . "settings/template-settings.php"; ?>
          </div>
          
          <div class="imh-6310-tab imh-6310-tab-3">
            <table border="0" width="100%" cellpadding="10" cellspacing="0">
              <tr class='imh-6310_link-type'>
                <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture">Do you Link Title?:</label></td>
                <td>
                  <input class='imh-6310_link_title_type' value='1' type="radio" name="link_title">Yes
                  <input class='imh-6310_link_title_type' value='2' type="radio" name="link_title" checked>No
                </td>
              </tr>
              <tr class="imh-6310_link">
                <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture">Link with:</label></td>
                <td>
                  <input name="imh-6310-link-position" class="imh-6310-link-position" value='1' type="radio" checked>Tooltip
                  <input name="imh-6310-link-position" class="imh-6310-link-position" value='2' type="radio">Pointer
                </td>
              </tr>
              <tr class="imh-6310_link">
                <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture">Title Link Url:</label></td>
                <td>
                  <input type="text" class="imh_6310_custom_link_url" data-value="www.wpmart.org">
                </td>
              </tr>
              <tr class="imh-6310_link">
                <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture">Open new tab:</label></td>
                <td>
                  <input name="imh-6310-open-new-tab" class="imh-6310-open-new-tab" value='1' type="radio" checked>Yes
                  <input name="imh-6310-open-new-tab" class="imh-6310-open-new-tab" value='2' type="radio">No
                </td>
              </tr>             
            </table>
          </div>

          <div class="imh-6310-tab imh-6310-tab-5">
              <br>
              <div class="imh-6310-selected-product-list"></div>
              <div class="imh-6310-form-label" style="margin-top: 15px !important;">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) { 
                          echo "<div class='imh-6310-product-list imh-6310-hidden' data-product-id='{$product->id}'>{$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>
        </div>
      </div>

    </div>
    <div class="imh-6310-modal-form-footer">
      <button type="button" name="close" class="imh-6310-btn-danger imh-6310-btn-close imh-6310-pull-right">Close</button>
      <input type="submit" name="submit" class="imh-6310-btn-primary imh-6310-pull-right imh-6310-margin-right-10 imh-6310-add-place-save" value="Save" />
    </div>
    <br class="imh-6310-clear" />
  </div>
</div>

<!-- Icon Modal Start -->
<div id="imh_6310_social_icon" class="imh-6310-modal imh-6310-display-none">
  <div class="imh-6310-modal-content imh-6310-modal-xl">
    <input type="hidden" name="rearrange_list" id="rearrange_list" value="" />
    <div class="imh-6310-modal-header">
      <span class="imh-6310-action-button">Choose your Icon</span>
      <input type="text" id="icon-filter" class="imh-6310-form-input" placeholder="Search Icon" />
      <span class="imh-6310-font-awesome-close">&times;</span>
    </div>
    <div class="imh-6310-modal-body-form">
      <ul class="imh-6310-choose-icon">
        <?php echo imh_6310_fa_icon_list('li', '</li>'); ?>
      </ul>
    </div>
    <div class="imh-6310-modal-form-footer">
      <button type="button" name="close" id="imh-6310-font-icon-close" class="imh-6310-btn-danger imh-6310-pull-right">Close</button>
    </div>
    <br class="imh-6310-clear" />
  </div>
</div>