// source --> https://custombirthdaybanners.co.uk/wp-content/plugins/cbb_calculator/includes/js/cbb_style.js?ver=1 
$(document).ready(function() {
    $('.uploadBtn').click(function(e) {
        var btnId = $(this).attr('id');
        var inputId = '#fileInput' + btnId.slice(-1); // Get the corresponding file input ID
        e.preventDefault(); // Prevent default behavior of form submission
        $(inputId).click(); // Trigger file input click
    });

    $('.fileInput').change(function() {
        var inputId = $(this).attr('id');
        var btnId = '#uploadBtn' + inputId.slice(-1); // Get the corresponding button ID
        var file = this.files[0];
        var reader = new FileReader();
        reader.onload = function(e) {
            console.log(btnId+":id");
            if(btnId == "#uploadBtn1"){
                console.log("yes one");
            $(btnId).css('background-image', 'url(' + e.target.result + ')');
            $(btnId).addClass('with-image');
            $(".inner_wrapper_mov_bk div#div_bk-1 img#draggable_bk").attr('src', e.target.result);
            $("div#image_one_change div#div-1 img#draggable").attr('src', e.target.result);
            $(".bestsellingproduct .inside_backdrop .backdrop_image img").attr('src', e.target.result);
            $(".bestsellingproduct .xstand_wrapper .inside_wrapper .xstandfram img").attr('src', e.target.result);
            $(".bestsellingproduct .vinbanner_wrapper .tb_inside div#tablecloth_design img").attr('src', e.target.result);
            $("div#tablecloth img").attr('src', e.target.result);
             
            }else{
                console.log("yes two");
            $(btnId).css('background-image', 'url(' + e.target.result + ')');
            $(btnId).addClass('with-image');
             $(".inner_wrapper_mov_bk2 div#div_bk-1 img#draggable_bk").attr('src', e.target.result);
              $("div#image_two_change div#div-1 img#draggable").attr('src', e.target.result);
            }
        }
        reader.readAsDataURL(file);
        $(btnId).removeClass('show-plus');
    });

    $('.uploadBtn').on('click', '.with-image', function(e) {
        e.stopPropagation(); // Prevent button click event from firing when clicked on the image
    });

    $('.uploadBtn').on('click', '.with-image::after', function(e) {
        var btnId = $(this).parent().attr('id');
        var inputId = '#fileInput' + btnId.slice(-1); // Get the corresponding file input ID
        e.stopPropagation(); // Prevent button click event from firing when clicked on the delete icon
        $(this).parent().css('background-image', '');
        $(this).parent().removeClass('with-image');
        $(inputId).val(''); // Clear file input
        $(this).parent().addClass('show-plus');
    });

    $('.uploadBtn').on('click', function(e) {
        if($(this).hasClass('show-plus')) {
            var btnId = $(this).attr('id');
            var inputId = '#fileInput' + btnId.slice(-1); // Get the corresponding file input ID
            e.preventDefault(); // Prevent default behavior of form submission
            $(inputId).click(); // Trigger file input click
        }
    });
});

$(document).ready(function () {
  let alerted = false;

  $('#backdroptext,input#nametext_bk,input#backdroptext,input#xstandtext,input#nametext_xstand,input#tableclothtext,input#tablenametext,input#selfiefram_text,input#nametext_selfiefram,input#backdroptext,input#nametext_bk').on('input', function () {
    const $input = $(this);
    const val = $input.val();

    if (val.length > 30) {
      if (!alerted) {
        alert('Max 30 characters allowed');
        alerted = true;
      }
      $input.val(val.substring(0, 30));
    } else {
      alerted = false;
    }
  });
});

jQuery(document).ready(function() {
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
 });
 
 jQuery(document).ready(function () {
        /*on click add remove summery and button*/  
 jQuery("#add_bk").on("click", function () {
      var checkbox_m = jQuery('#BK_multi_add_remove');
         checkbox_m.prop('checked', true);
    var checkbox = jQuery('#BK_add_remove');
     checkbox.prop('checked', true); 
          jQuery("#add_bk").hide();
          jQuery("p#remove_bk").show();
           jQuery(".sm_bk_wrapper").show();
  });

  jQuery("#remove_bk").on("click", function (event) {
      
     var checkbox = jQuery('#BK_add_remove');
         checkbox.prop('checked', false);
         
         var checkbox_m = jQuery('#BK_multi_add_remove');
         checkbox_m.prop('checked', false);
         
          jQuery("#add_bk").show();
          jQuery("p#remove_bk").hide();
          jQuery(".sm_bk_wrapper").hide();
  });

  jQuery("#add_tc").on("click", function (event) {
    var checkbox = jQuery('#tc_add_remove');
      checkbox.prop('checked', true); 
          jQuery("#add_tc").hide();
          jQuery("p#remove_tc").show();
           jQuery(".sm_tblcloth_wrapper").show();
  });

  jQuery("#remove_tc").on("click", function (event) {
       var checkbox = jQuery('#tc_add_remove');
          checkbox.prop('checked', false);
          jQuery("#add_tc").show();
          jQuery("p#remove_tc").hide();
          jQuery(".sm_tblcloth_wrapper").hide();
  });     
   jQuery("#add_sf").on("click", function (event) {
    var checkbox = jQuery('#sf_add_remove');
      checkbox.prop('checked', true); 
          jQuery("#add_sf").hide();
          jQuery("p#remove_sf").show();
           jQuery(".sm_selfiefram_wrapper").show();
  });

  jQuery("#remove_sf").on("click", function (event) {
       var checkbox = jQuery('#sf_add_remove');
          checkbox.prop('checked', false);
          jQuery("#add_sf").show();
          jQuery("p#remove_sf").hide();
          jQuery(".sm_selfiefram_wrapper").hide();
  });  
   jQuery("#add_xs").on("click", function (event) {
    var checkbox = jQuery('#xs_add_remove');
      checkbox.prop('checked', true); 
          jQuery("#add_xs").hide();
          jQuery("p#remove_xs").show();
           jQuery(".sm_xstand_wrapper").show();
  });

  jQuery("#remove_xs").on("click", function (event) {
       var checkbox = jQuery('#xs_add_remove');
          checkbox.prop('checked', false);
          jQuery("#add_xs").show();
          jQuery("p#remove_xs").hide();
          jQuery(".sm_xstand_wrapper").hide();
  });    
      /*on click add remove summery and button*/ 
  
 });
 
 
 $(document).ready(function(){
    $(".inner_eye_sec div").click(function(){
        // Remove border from all divs
        $(".inner_eye_sec div").css("border", "none");
        // Add border to the clicked div
        $(this).css("border", "2px solid rgba(0, 122, 164, 1)");
        
        // Get the index of the clicked div
        var index = $(this).index();
        console.log("click index:"+index);
        // Select the corresponding option from the dropdown
         summery_section();
        $(".bannereyelets_size").prop('selectedIndex', index);
    });
});
jQuery(document).ready(function () {
    
    jQuery('input.enterbirthyear').on('input', function () {
        var inputValue = jQuery(this).val();
        jQuery(".selfiefram_wrapper .inside_wrapper .birthday_text, .xstand_wrapper .inside_wrapper .birthday_text, .vinbanner_wrapper .inside_wrapper .birthday_text,.backdropdesign .birthday_text,.backdropdesign .birthday_text,.tablecloth .vinbanner_wrapper .inside_wrapper .birthday_text,.xstandbanner .birthday_text,.content_selfiefram .birthday_text,.birthday_text").text(inputValue);
    jQuery("input#backdroptext,input#tableclothtext,input#xstandtext,input#selfiefram_text").val(inputValue)
        
    });
});
jQuery(document).ready(function () {
    jQuery('input.enteryourname').on('input', function () {
        var inputValue = jQuery(this).val();
        console.log(inputValue);
     
        jQuery(".vinbanner_wrapper .inside_wrapper .nameonbanner,.xstand_wrapper .inside_wrapper .nameonbanner,.backdropdesign .nameonbanner,.tablecloth .vinbanner_wrapper .inside_wrapper .nameonbanner,.xstandbanner .nameonbanner,.content_selfiefram .nameonbanner,.nameonbanner").text(inputValue);
     jQuery("input#nametext_bk, input#tablenametext,input#nametext_xstand,input#nametext_selfiefram").val(inputValue);
    });
});
$(document).ready(function() {
      // Listen for changes in the input element
      $("input.uploadyourphoto").on("change", function(event) {
        // Get the selected file
        var selectedFile = event.target.files[0];
          
        // Check if a file is selected
        if (selectedFile) {
          // Create a FileReader to read the selected file
          var reader = new FileReader();

          // Set up the FileReader to update the image source when the file is loaded
          reader.onload = function(e) {
            $(".xstand_wrapper .inside_wrapper .xstandfram").css("background-image", "url(" + e.target.result + ")");
              $(".vinbanner_wrapper .inside_wrapper .vinbannerfram").css("background-image", "url(" + e.target.result + ")");
              $(".selfiefram_wrapper .inside_wrapper .selfie_fram").css("background-image", "url(" + e.target.result + ")");
               $("div#backdropdesign .inner_wrapper_mov_bk img#draggable_bk").attr('src', e.target.result); 
               $("div#tablecloth_design .inner_wrapper_mov img#draggable").attr('src', e.target.result);
               $(".xstandbanner .inner_wrapper_mov_xstand img#draggable_xstand").attr('src', e.target.result);
          };

          // Read the selected file as a data URL
          reader.readAsDataURL(selectedFile);
        }
      });
    });
      /*drag and resize */
$(document).ready(function() {
    $(".birthday_text,.nameonbanner,.tab_vin_banner,.xstandfram,.selfie_fram,.xstandfram,#tablename_popup,div#popup_xstand,#popup,div#div_bk-1").draggable();
    
  });
$(document).ready(function() {
    // Make ".vinbannerbackground" draggable and resizable
    $(".ahoja").draggable().resizable();

    // Make ".ahoja" draggable inside ".vinbannerbackground"
    $(".ahoja").draggable({
        containment: ".vinbannerbackground",
        scroll: false
    });
});
     /*drag and resize ended here*/
$(document).ready(function () {
        // Function to open the popup
        $(".edit_bk").on("click", function () {
            $("#popup").show();
            jQuery("div#backdropdesign .inner_image").css("pointer-events", "");
        });
      
       $("#closePopupBtn").on("click", function (event) {
            event.preventDefault(); // Prevent the default form submission behavior
            $("#popup").hide();
        });

        // Function to update the text in the element
        jQuery('input#backdroptext').on('input', function () {
            var newText = $("input#backdroptext").val();
            $(".backdropdesign .birthday_text").text(newText);
        });
        
         jQuery('.backdrop_wrapper div#popup select#font_for_year').on('change', function () {
            var font_bk = $(this).val();
            $(".backdropdesign .birthday_text").css('font-family', font_bk);
        });
         jQuery('.backdrop_wrapper div#popup select#font_for_name').on('change', function () {
            var font_name_bk =$(this).val(); console.log(font_name_bk);
            $(".backdropdesign .nameonbanner").css('font-family', font_name_bk);
        });
          jQuery('div#tablename_popup select#font_for_year').on('change', function () {
           
             var tbcl_font_year = $(this).val();
            $(".content_tablecloth div#tablecloth_design .birthday_text").css('font-family', tbcl_font_year);
          
        });
         jQuery('div#popup_xstand select#font_for_year').on('input', function () {
            var xs_font_year = $(this).val();
            $(".content_xstand div#xstandbanner .birthday_text").css('font-family', xs_font_year);
        });
         jQuery('div#popup_xstand select#font_for_name').on('input', function () {
            var xs_font_name = $(this).val();
            $(".content_xstand div#xstandbanner .nameonbanner ").css('font-family', xs_font_name);
        });
          jQuery('div#popup_selfiefram select#font_for_name').on('input', function () {
            var xs_font_name = $(this).val();
            $(".left_section .content_selfiefram .nameonbanner ").css('font-family', xs_font_name);
        });
          jQuery('div#popup_selfiefram select#font_for_year').on('input', function () {
            var xs_font_name = $(this).val();
            $(".left_section .content_selfiefram .birthday_text ").css('font-family', xs_font_name);
        });
         jQuery(' div#tablename_popup select#font_for_name ').on('input', function () {
            var xs_font_name = $(this).val();
            $(".tablecloth_wrapper .content_tablecloth div#tablecloth .nameonbanner").css('font-family', xs_font_name);
        });
        jQuery(' div#tablename_popup select#font_for_year').on('input', function () {
            var xs_font_name = $(this).val();
            $(".tablecloth_wrapper .content_tablecloth div#tablecloth .birthday_text ").css('font-family', xs_font_name);
        });
      
         jQuery('div#tablename_popup select#font_for_name').on('change', function () {
           
             var tbcl_font_name = $(this).val();
            $(".content_tablecloth div#tablecloth_design .nameonbanner").css('font-family', tbcl_font_name);;
          
        });
        $('.single_design_bk #popup select#font_for_year').on('change', function () {
                var fontfamily = $(this).val();
                $('.single_design_bk #backdropdesign .birthday_text').css('font-family', fontfamily);
        });
         $('.single_design_bk #popup select#font_for_name').on('change', function () {
                var fontfamily = $(this).val();
                $('.single_design_bk #backdropdesign .nameonbanner').css('font-family', fontfamily);
        });
    
        $('input#fontColorPicker_bk').on('input', function () {
                var fontColor = $(this).val();
                $('.backdropdesign .birthday_text').css('color', fontColor);
        });
        
         $('input#fontSizeRange_bk').on('input', function () {
                var fontSize = $(this).val() + 'px';
                $('.backdropdesign .birthday_text').css('font-size', fontSize);
                $('.backdropdesign .birthday_text').css('line-height', fontSize);
        });
         jQuery('input#nametext_bk').on('input', function () {
            var newText =$(this).val(); console.log(newText);
            $(".backdropdesign .nameonbanner").text(newText);
        });
        $('input#fontSizeRangename_bk').on('input', function () {
                var fontSize = $(this).val() + 'px';
                $('.backdropdesign .nameonbanner').css('font-size', fontSize);
                $('.backdropdesign .nameonbanner').css('line-height', fontSize);
        });
        $('input#fontColorPickername_bk').on('input', function () {
                var fontColor = $(this).val();
                $('.backdropdesign .nameonbanner').css('color', fontColor);
        });
        
        
         // Function to update the text in the element
        jQuery('input#backdroptext').on('input', function () {
            var newText = $("input#backdroptext").val();
            $(".backdropdesign .birthday_text").text(newText);
          
        });
        jQuery('input#nametext_bk').on('input', function () {
            var newText =$(this).val(); console.log(newText);
            $(".backdropdesign .nameonbanner").text(newText);
          
        });
        $('input#fontSizeRangename_bk').on('input', function () {
                var fontSize = $(this).val() + 'px';
                $('.backdropdesign .nameonbanner').css('font-size', fontSize);
                $('.backdropdesign .nameonbanner').css('line-height', fontSize);
        });
        $('input#fontColorPickername_bk').on('input', function () {
                var fontColor = $(this).val();
                $('.backdropdesign .nameonbanner').css('color', fontColor);
        });
            
        $("input#imageInput-bk").on('change', function(){
        var input = this;

        if (input.files && input.files[0]) {
          var reader = new FileReader();

          reader.onload = function (e) {
            // Set the source of the image within div#div-1
            $(".backdropdesign .inner_wrapper_mov_bk div#div_bk-1 img#draggable_bk").attr('src', e.target.result);
          };

          // Read the file as a data URL
          reader.readAsDataURL(input.files[0]);
        }
        });    
                
            
        });
              
    /*xstand */
$(document).ready(function () {
        // Function to open the popup
        $(".edit_xstand").on("click", function () {
            jQuery("div#xstandbanner .inner_image").css("pointer-events", "");
            $("#popup_xstand").show();
        });
      
       $("#closexstandBtn").on("click", function (event) {
            event.preventDefault(); // Prevent the default form submission behavior
            $("#popup_xstand").hide();
        });

        // Function to update the text in the element
        jQuery('input#xstandtext').on('input', function () {
            var newText = $("input#xstandtext").val();
            $(".xstandbanner .birthday_text").text(newText);
        });
        
       
        
        $('input#fontColorPicker_xstand').on('input', function () {
                var fontColor = $(this).val();
                $('.xstandbanner .birthday_text').css('color', fontColor);
        });
        
         $('input#fontSizeRange_xstand').on('input', function () {
                var fontSize = $(this).val() + 'px';
                $('.xstandbanner .birthday_text').css('font-size', fontSize);
                $('.xstandbanner .birthday_text').css('line-height', fontSize);
        });
         jQuery('input#nametext_xstand').on('input', function () {
            var newText =$(this).val(); console.log(newText);
            $(".xstandbanner .nameonbanner").text(newText);
        });
        $('input#fontSizeRangename_xstand').on('input', function () {
                var fontSize = $(this).val() + 'px';
                $('.xstandbanner .nameonbanner').css('font-size', fontSize);
                 $('.xstandbanner .nameonbanner').css('line-height', fontSize);
        });
        $('input#fontColorPickername_xstand').on('input', function () {
                var fontColor = $(this).val();
                $('.xstandbanner .nameonbanner').css('color', fontColor);
        });
        
        
         // Function to update the text in the element
       
        jQuery('input#nametext_xstand').on('input', function () {
            var newText =$(this).val(); console.log(newText);
            $(".xstandbanner .nameonbanner").text(newText);
          
        });
        $('input#fontSizeRangename_xstand').on('input', function () {
                var fontSize = $(this).val() + 'px';
                $('.xstandbanner .nameonbanner').css('font-size', fontSize);
                 $('.xstandbanner .nameonbanner').css('line-height', fontSize);
        });
        $('input#fontColorPickername_xstand').on('input', function () {
                var fontColor = $(this).val();
                $('.xstandbanner .nameonbanner').css('color', fontColor);
        });
            
        $("input#imageInput-xstand").on('change', function(){
        var input = this;

        if (input.files && input.files[0]) {
          var reader = new FileReader();

          reader.onload = function (e) {
            // Set the source of the image within div#div-1
            $(".xstandbanner .inner_wrapper_mov_xstand div#div_xstand-1 img#draggable_xstand").attr('src', e.target.result);
          };

          // Read the file as a data URL
          reader.readAsDataURL(input.files[0]);
        }
        });    
                
            
        });
        /*selfiefram*/
$(document).ready(function () {
        // Function to open the popup
        $(".edit_selfiefram").on("click", function () {
            $("#popup_selfiefram").show();
        });
      
       $("#closeselfieframBtn").on("click", function (event) {
            event.preventDefault(); // Prevent the default form submission behavior
            $("#popup_selfiefram").hide();
        });

        // Function to update the text in the element
        jQuery('input#selfiefram_text').on('input', function () {
            var newText = $("input#selfiefram_text").val();
            $(".content_selfiefram .birthday_text").text(newText);
        });
        
       
        
        $('input#fontColorPicker_selfiefram').on('input', function () {
                var fontColor = $(this).val();
                $('.content_selfiefram .birthday_text').css('color', fontColor);
        });
        
         $('input#fontSizeRange_selfiefram').on('input', function () {
                var fontSize = $(this).val() + 'px';
                $('.content_selfiefram .birthday_text').css('font-size', fontSize);
                 $('.content_selfiefram .birthday_text').css('line-height', fontSize);
        });
         jQuery('input#nametext_selfiefram').on('input', function () {
            var newText =$(this).val(); console.log(newText);
            $(".content_selfiefram .nameonbanner").text(newText);
        });
        $('input#fontSizeRangename_selfiefram').on('input', function () {
                var fontSize = $(this).val() + 'px';
                $('.content_selfiefram .nameonbanner').css('font-size', fontSize);
                 $('.content_selfiefram .nameonbanner').css('line-height', fontSize);
        });
        $('input#fontColorPickername_selfiefram').on('input', function () {
                var fontColor = $(this).val();
                $('.content_selfiefram .nameonbanner').css('color', fontColor);
        });
        
        
         // Function to update the text in the element
       
       
      
        
        $("input#imageInput-selfiefram").on('change', function(){
        var input = this;

        if (input.files && input.files[0]) {
          var reader = new FileReader();

          reader.onload = function (e) {
            // Set the source of the image within div#div-1
            $(".selfiefram_banner .inner_wrapper_mov_selfiefram div#div_selfiefram-1 img#draggable_selfiefram").attr('src', e.target.result);
          };

          // Read the file as a data URL
          reader.readAsDataURL(input.files[0]);
        }
        });    
                
            
        });    
$(document).ready(function () {
            // Font size range input
            $('#fontSizeRange').on('input', function () {
                var fontSize = $(this).val() + 'px';
                $('.tablecloth .vinbanner_wrapper .inside_wrapper .birthday_text').css('font-size', fontSize);
                $('.tablecloth .birthday_text').css('font-size', fontSize);
                $('.tablecloth .birthday_text').css('line-height', fontSize);
            });
            

            // Font color picker
            $('#fontColorPicker').on('input', function () {
                var fontColor = $(this).val();
                $('.tablecloth .vinbanner_wrapper .inside_wrapper .birthday_text').css('color', fontColor);
                 $('.tablecloth .birthday_text').css('color', fontColor);
            });
           
            $('#fontSizeRangename').on('input', function () {
                var fontSize = $(this).val() + 'px';
                $('.tablecloth .vinbanner_wrapper .inside_wrapper .nameonbanner').css('font-size', fontSize);
                  $('.tablecloth .nameonbanner').css('font-size', fontSize);
                   $('.tablecloth .nameonbanner').css('line-height', fontSize);
            });

            // Font color picker
            $('#fontColorPickername').on('input', function () {
                var fontColor = $(this).val();
                $('.tablecloth .vinbanner_wrapper .inside_wrapper .nameonbanner').css('color', fontColor);
                 $('.tablecloth  .nameonbanner').css('color', fontColor);
            });
        });    
$(document).ready(function () {
       
        // Function to update the text in the element
        jQuery('input#tableclothtext').on('input', function () {
           
             var newTextyear = $("input#tableclothtext").val();
             console.log(newTextyear);
            $(".tablecloth .vinbanner_wrapper .inside_wrapper .birthday_text").text(newTextyear);
             $(".tablecloth .birthday_text").text(newTextyear);
          
        });
    });    
$(document).ready(function () {
        // Function to open the popup
        $(".edit_design").on("click", function () {
            $("#tablename_popup").show();
            $(".inner_image").css("pointer-events", "");
        });

       $("#tbclosenameBtn").on("click", function (event) {
            event.preventDefault(); // Prevent the default form submission behavior
            $("#tablename_popup").hide();
             $(".inner_image.border_radius").css("pointer-events", "none");
        });

        // Function to update the text in the element
        jQuery('input#tablenametext').on('input', function () {
            
            var newText = $("input#tablenametext").val();
            $(".tablecloth .vinbanner_wrapper .inside_wrapper .nameonbanner").text(newText);
             $(".tablecloth .nameonbanner").text(newText);
          
        });
        
    });     
$(document).ready(function(){
      // When a file is selected
      $("#imageInput").on('change', function(){
        var input = this;

        if (input.files && input.files[0]) {
          var reader = new FileReader();

          reader.onload = function (e) {
            // Set the source of the image within div#div-1
            $("#div-1 img#draggable").attr('src', e.target.result);
          };

          // Read the file as a data URL
          reader.readAsDataURL(input.files[0]);
        }
      });
    });
$(function() {
  $(".resize_xstand").resizable({
    handles: "ne, nw, se, sw",
    aspectRatio: true
  });
  $(".ui-resizable-handle-se").removeClass("ui-icon ui-icon-gripsmall-diagonal-se");
  $(".drag_xstand").draggable({
       containment: ".xstandbanner",
        scroll: false
      });
});    
$(document).ready(function() {
    
    // Resize using mouse wheel
    $(".resize_xstand").on('mousewheel', function (event) {
      var delta = event.originalEvent.wheelDelta;

      // Adjust the size based on the mouse wheel delta
      var currentWidth = $(this).width();
      var currentHeight = $(this).height();

      // You can adjust the sensitivity of the resizing by changing the factor (e.g., 10)
      var factor = 10;

      // Increase or decrease size based on the mouse wheel direction
      if (delta > 0) {
        $(this).width(currentWidth + factor);
        $(this).height(currentHeight + factor);
      } else {
        $(this).width(currentWidth - factor);
        $(this).height(currentHeight - factor);
      }

      // Prevent the default behavior of the mouse wheel
      event.preventDefault();
    });
  });    
$(function() {
  $(".resize_bk").resizable({
    handles: "ne, nw, se, sw",
    aspectRatio: true
  });
  $(".ui-resizable-handle-se").removeClass("ui-icon ui-icon-gripsmall-diagonal-se");
  $(".drag_bk").draggable({
       containment: ".inner_wrapper_mov_bk",
        scroll: false
      });
});
$(document).ready(function() {
    
    // Resize using mouse wheel
    $(".resize_bk").on('mousewheel', function (event) {
      var delta = event.originalEvent.wheelDelta;

      // Adjust the size based on the mouse wheel delta
      var currentWidth = $(this).width();
      var currentHeight = $(this).height();

      // You can adjust the sensitivity of the resizing by changing the factor (e.g., 10)
      var factor = 10;

      // Increase or decrease size based on the mouse wheel direction
      if (delta > 0) {
        $(this).width(currentWidth + factor);
        $(this).height(currentHeight + factor);
      } else {
        $(this).width(currentWidth - factor);
        $(this).height(currentHeight - factor);
      }

      // Prevent the default behavior of the mouse wheel
      event.preventDefault();
    });
  });
$(function() {
  $(".resize").resizable({
    handles: "ne, nw, se, sw",
    aspectRatio: true
  });
  $(".ui-resizable-handle-se").removeClass("ui-icon ui-icon-gripsmall-diagonal-se");
  $(".drag").draggable({
       containment: ".tablecloth",
        scroll: false
      });
});
$(document).ready(function() {
  

    // Resize using mouse wheel
    $(".resize").on('mousewheel', function (event) {
      var delta = event.originalEvent.wheelDelta;

      // Adjust the size based on the mouse wheel delta
      var currentWidth = $(this).width();
      var currentHeight = $(this).height();

      // You can adjust the sensitivity of the resizing by changing the factor (e.g., 10)
      var factor = 10;

      // Increase or decrease size based on the mouse wheel direction
      if (delta > 0) {
        $(this).width(currentWidth + factor);
        $(this).height(currentHeight + factor);
      } else {
        $(this).width(currentWidth - factor);
        $(this).height(currentHeight - factor);
      }

      // Prevent the default behavior of the mouse wheel
      event.preventDefault();
    });
  });
$(document).ready(function () {
            // Click event handler for the "Generate Image" button

$('.confir_bk_design').on('click', function () {
    $('#loadingMessageContainer').show();
  jQuery("div#backdropdesign .inner_image").css("pointer-events", "none");
    html2canvas(document.getElementById('backdropdesign')).then(function (canvas) {
        var canvasDataUrl = canvas.toDataURL('image/png');

        // Create a FormData object to send the image data to the server
        var formData = new FormData();
        formData.append('action', 'handle_image_upload');
        formData.append('image', dataURItoBlob(canvasDataUrl), 'backdropdesign.png');

        $.ajax({
            type: 'POST',
            url: MyAjax.ajaxurl, // Use the MyAjax object to get the correct URL
            data: formData,
            processData: false,
            contentType: false,
            success: function (response) {
                 jQuery("input#bk_banner_design").val(response);
                console.log("Image uploaded successfully. URL: " + response);
            },
            error: function (error) {
                console.error("Error uploading image: " + error.responseText);
            },
            complete: function () {
                $('#loadingMessageContainer').hide();
            }
        });
    });
});



 $('.confir_selfiefram_design').on('click', function () {
    $('#loadingMessageContainersefiefram').show();

    html2canvas(document.getElementById('selfiefram_banner')).then(function (canvas) {
        var canvasDataUrl = canvas.toDataURL('image/png');

        // Create a FormData object to send the image data to the server
        var formData = new FormData();
        formData.append('action', 'handle_image_upload');
        formData.append('image', dataURItoBlob(canvasDataUrl), 'selfieframdesign.png');

        $.ajax({
            type: 'POST',
            url: MyAjax.ajaxurl, // Use the MyAjax object to get the correct URL
            data: formData,
            processData: false,
            contentType: false,
            success: function (response) {
                console.log("Image uploaded successfully. URL: " + response);
                jQuery("input#sf_banner_design").val(response);
            },
            error: function (error) {
                console.error("Error uploading image: " + error.responseText);
            },
            complete: function () {
                $('#loadingMessageContainersefiefram').hide();
            }
        });
    });
});

$('.confirm_design').on('click', function () {
    $('#loadingMessageContainertablecloth').show();

    html2canvas(document.getElementById('tablecloth_design')).then(function (canvas) {
        var canvasDataUrl = canvas.toDataURL('image/png');

        // Create a FormData object to send the image data to the server
        var formData = new FormData();
        formData.append('action', 'handle_image_upload');
        formData.append('image', dataURItoBlob(canvasDataUrl), 'tablecloshdesign.png');

        $.ajax({
            type: 'POST',
            url: MyAjax.ajaxurl, // Use the MyAjax object to get the correct URL
            data: formData,
            processData: false,
            contentType: false,
            success: function (response) {
                console.log("Image uploaded successfully. URL: " + response);
                 jQuery("input#tb_banner_design").val(response);
            },
            error: function (error) {
                console.error("Error uploading image: " + error.responseText);
            },
            complete: function () {
                $('#loadingMessageContainertablecloth').hide();
            }
        });
    });
});



$('.confir_xstand_design').on('click', function () {
    $('#loadingMessageContainerxstand').show();
 jQuery("div#xstandbanner .inner_image").css("pointer-events", "none");
    html2canvas(document.getElementById('xstandbanner')).then(function (canvas) {
        var canvasDataUrl = canvas.toDataURL('image/png');

        // Create a FormData object to send the image data to the server
        var formData = new FormData();
        formData.append('action', 'handle_image_upload');
        formData.append('image', dataURItoBlob(canvasDataUrl), 'xstanddesign.png');

        $.ajax({
            type: 'POST',
            url: MyAjax.ajaxurl, // Use the MyAjax object to get the correct URL
            data: formData,
            processData: false,
            contentType: false,
            success: function (response) {
                console.log("Image uploaded successfully. URL: " + response);
                jQuery("input#xs_banner_design").val(response);
            },
            error: function (error) {
                console.error("Error uploading image: " + error.responseText);
            },
            complete: function () {
                $('#loadingMessageContainerxstand').hide();
            }
        });
    });
});
// Function to convert data URI to Blob
function dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], { type: 'image/png' });
}

        });
        jQuery('select#select_del,select.backdrop_sizes ,select.tbcl_size,select.xs_size, select.sf_size,select.bannereyelets_size').change(function() {summery_section(); });
  $(document).ready(function () { 
   
jQuery(".oneday_wrapper").on("click", function (event) {
           $(this).addClass('active');
           $('.twoday_wrapper, .threeday_wrapper, .std_wrapper').removeClass('active');
           jQuery('#select_del option:nth-child(4)').prop('selected', true).trigger('change');
           summery_section();
        });
jQuery(".twoday_wrapper").on("click", function (event) {
            $(this).addClass('active');
            $('.oneday_wrapper, .threeday_wrapper, .std_wrapper').removeClass('active');
            jQuery('#select_del option:nth-child(3)').prop('selected', true).trigger('change');
            summery_section();
        });
jQuery(".threeday_wrapper").on("click", function (event) {
           $(this).addClass('active');
           $('.oneday_wrapper, .twoday_wrapper, .std_wrapper').removeClass('active');
           jQuery('#select_del option:nth-child(2)').prop('selected', true).trigger('change');
           summery_section();
        });
jQuery(".std_wrapper").on("click", function (event) {
           $(this).addClass('active');
           $('.oneday_wrapper, .twoday_wrapper, .threeday_wrapper').removeClass('active');
           jQuery('#select_del option:nth-child(1)').prop('selected', true).trigger('change');
           summery_section();
        });        
        
        /*eyelet option change */
jQuery(".one_eye").on("click", function (event) {
           $(this).addClass('active');
           $('.two_eye,.three_eye.four_eye, .five_eye, .six_eye').removeClass('active');
           jQuery('.bannereyelets_size option:nth-child(1)').prop('selected', true).trigger('change');
           summery_section();
        });
jQuery(".two_eye").on("click", function (event) {
           $(this).addClass('active');
           $('.one_eye,.three_eye.four_eye, .five_eye, .six_eye').removeClass('active');
            jQuery('.bannereyelets_size option:nth-child(2)').prop('selected', true).trigger('change');
            summery_section();
        });
jQuery(".three_eye").on("click", function (event) {
           $(this).addClass('active');
           $('.one_eye,.two_eye.four_eye, .five_eye, .six_eye').removeClass('active');
           jQuery('.bannereyelets_size option:nth-child(3)').prop('selected', true).trigger('change');
           summery_section();
        });
jQuery(".four_eye").on("click", function (event) {
           $(this).addClass('active');
           $('.one_eye,.two_eye.three_eye, .five_eye, .six_eye').removeClass('active');
           jQuery('.bannereyelets_size option:nth-child(4)').prop('selected', true).trigger('change');
           summery_section();
        });  
jQuery(".five_eye").on("click", function (event) {
           $(this).addClass('active');
           $('.one_eye,.two_eye.three_eye, .four_eye, .six_eye').removeClass('active');
           jQuery('.bannereyelets_size option:nth-child(5)').prop('selected', true).trigger('change');
           summery_section();
        });   
jQuery(".six_eye").on("click", function (event) {
           $(this).addClass('active');
           $('.one_eye,.two_eye.three_eye, .four_eye, .five_eye').removeClass('active');
           jQuery('.bannereyelets_size option:nth-child(6)').prop('selected', true).trigger('change');
           summery_section();
        }); 
        
      window.summery_section = function() {
        var delivery = jQuery("#select_del").val(); 
        jQuery(".summary_right").text(delivery);  
    };
    
      function summery_section() {
var delivery=jQuery("#select_del").val(); jQuery(".summary_right").text(delivery); 
var finishing_eye=jQuery(".bannereyelets_size").val(); jQuery(".sm_item_right.eyelets_sm").text(finishing_eye);  console.log("finishing_eye:"+finishing_eye)
}   
});
        
(function() {
    
    function changeTimezone(date, ianatz) {
      var invdate = new Date(date.toLocaleString('en-US', {
        timeZone: ianatz
      }));
      var diff = date.getTime() - invdate.getTime();
      return new Date(date.getTime() - diff);
    }

  function pad(num) {
    return ("0" + parseInt(num)).substr(-2);
  }

  function tick() {
      var start_new = new Date;
      var start = changeTimezone(start_new, "Europe/London");
     // console.log(start);
      var delidis = jQuery('select#backdrop_delivery').val();
       var fmx_delivery = jQuery("select#rt_deliveryvbpuk").val();
       var delivery_sel=jQuery('select#select_del').val();  
       var pa_delivery = jQuery("#pa_delivery").val();
       var cal_delivery = jQuery('select#select_del').val();
        var timeString = jQuery('#timer_control_cut_off').val();
    //   console.log("timeString:"+timeString);
var timeArray = timeString.split(':');
var hour = timeArray[0];
var minute = timeArray[1];

 var timeString_express = jQuery('#express_timer_control').val();
// console.log("express_timer_control:"+timeString_express);
var timeArray_exoress = timeString_express.split(':');
var hour_express = timeArray_exoress[0];
var minute_express = timeArray_exoress[1];
//console.log("delivery:"+delivery_sel);
  if(delidis =='standard' || fmx_delivery == "standarddelivery" || pa_delivery == "standard" || delivery_sel == "standarddelivery" || cal_delivery == "standarddelivery"){
       start.setHours(hour, minute, 0);
  }else if(delivery_sel=="24hoursdelivery"){
           var timer_activ_time=jQuery("#timer_slote_range1").val(); //console.log("Mob check"+timer_activ_time);
          start.setHours(hour_express, minute_express, 0);
 
      
      }else{
      
      if(delivery_sel=="samedaycollection"){
           var timer_activ_time=jQuery("#timer_slote_range1").val(); //console.log("Mob check"+timer_activ_time);
          start.setHours(timer_activ_time, 0, 0);
 
      
      }else{
          start.setHours(hour, minute, 0);
      }
   // 6pm
  }
    var now_new = new Date;
    var now = changeTimezone(now_new, "Europe/London");
    if (now > start) { // too late, go to tomorrow
      start.setDate(start.getDate() + 1);
    }
    var remain = ((start - now) / 1000);
    var hh = pad((remain / 60 / 60) % 60);
    var mm = pad((remain / 60) % 60);
    var ss = pad(remain % 60);
  /* console.log("hours::"+hh);
    console.log("Minuts::"+mm);
     console.log("Second::"+ss);*/
     if(hh==00 && mm==00 && ss==00){ location.reload(true);  location.reload();}
    jQuery('h1.time_cont_down_side').html(  hh + "h " + mm + "m " + ss + "s");
    setTimeout(tick, 500);
  }
    document.addEventListener('DOMContentLoaded', tick);
})();