
            <!-- css -->
            <link rel="stylesheet" media="screen" type="text/css"
            href="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/jqupload/colorpicker.css" />
            <link rel="stylesheet" href="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/jqupload/ion.rangeSlider.css">
            <link rel="stylesheet" href="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/jqupload/ion.rangeSlider.skinFlat.css">
            <link rel="stylesheet" media="screen" type="text/css" href="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/assets/css/pluginStyle.css" />
            <link rel="stylesheet" type="text/css" href="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/assets/css/hangtag-custom.css" />
            <section class="panel-headings-section for-desktop">
                <input type="hidden" id="current_step" value="1">
                <!-- start --->
                <div class="owl-carousel panel-headings-wrapper">
                    <div class="panel-heading active-h step1" data-target="label-fold" data-id="1">
                        <i class="icon icon-label-cut"></i>
                        <p>Hang Tag Type</p>
                        <p>1</p>
                    </div>
                    <div class="panel-heading step2" data-target="logo" data-id="2">
                        <i class="icon icon-label-cut"></i>
                        <p>Upload your Logo (image / artwork)</p>
                        <p>2</p>
                    </div>
                    <div class="panel-heading step3" data-target="logocolor" data-id="3">
                        <i class="icon icon-text-color"></i>
                        <p>Color</p>
                        <p>3</p>
                    </div>
                    <div class="panel-heading step4" data-target="printOptions" data-id="4">
                        <i class="icon icon-label-cut"></i>
                        <p>Options</p>
                        <p>4</p>
                    </div>
                    <div class="panel-heading step5" id="amount" data-target="amount" data-id="5">
                        <i class="icon icon-label-cut"></i>
                        <p>Quantity</p>
                        <p>5</p>
                    </div>
                </div>
            </section>
            <div class="sticky-trigger"></div>
            <section class="main-contents">
                <div class="previewRowHeight"></div>
                <!--------- preview panel ---------->
                <div class="proPreview proPreview-deg-ord-print">
                    <div class="wrapper">
                        <div class="previewWindow">
                            <div class="windowBody">
                                <div class="row heading">
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                        <div class="windowHeading">Label Preview</div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                        <div class="rev-dwnl-sec pull-right">
                                            <div class="rev-sec">
                                                <span class="add-amount">Quantity Options</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="previewRow">
                                    <div class="productPrevImgW">
                                        <div class="productPrevImg" style="text-align:center;">
                                            <div id="displaydesign" style="text-align:center;">

                                            </div>
                                        </div>
                                    </div>

                                    <div id="designShow"></div>

                                    <div id="displaydesignnew_bck_vw_wrp" class="hide">
                                        <div id="displaydesignnew_bck_vw">
                                            <img id="backImg" src="">
                                        </div>
                                    </div>
                                </div>


                                <div class="row">
                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                        <div class="infos">
                                            <p>
                                                Please click <a onclick="repair()"
                                                style="color:red;text-decoration: underline;cursor: pointer;">here</a> if image
                                                not shown or appears to be broken.
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-xs-12">
                                        <div id="hereallwillchnage">
                                            <div class="rev-dwnl-sec">
                                                <div class="rev-sec">
                                                                                                    </div>
                                            </div>
                                            <div class="quantity">
                                                <input id="quantity_5afbe1dedc150" class="input-text qty text" step="1" min="1"
                                                max="" name="quantity" value="1" title="Qty" size="4" pattern="[0-9]*"
                                                inputmode="numeric" aria-labelledby="" type="hidden">
                                            </div>
                                            <input type="hidden" id="quantity" name="quantity" value="1" />
                                            <input type="hidden" id="custom_data_1" name="custom_data_1" value="" />
                                            <input type="hidden" id="custom_data_2" name="custom_data_2" value="" />
                                            <input type="hidden" id="custom_data_3" name="custom_data_3" value="" />
                                            <input type="hidden" id="custom_data_4" name="custom_data_4" value="" />
                                            <input type="hidden" id="custom_data_5" name="custom_data_5" value="" />
                                            <input type="hidden" id="custom_data_6" name="custom_data_6" value="" />
                                            <input type="hidden" id="custom_data_7" name="custom_data_7" value="" />
                                            <input type="hidden" id="custom_data_8" name="custom_data_8" value="" />
                                            <input type="hidden" id="custom_data_9" name="custom_data_9" value="" />
                                            <input type="hidden" id="custom_data_10" name="custom_data_10" value="" />

                                            <input type="hidden" id="materialTypeChosen" name="materialTypeChosen" value="" />
                                            <input type="hidden" id="thickChosen" name="thickChosen" value="" />
                                            <input type="hidden" id="printOptionChosen" name="printOptionChosen" value="" />
                                            <input type="hidden" id="holePunchChosen" name="holePunchChosen" value="" />
                                            <input type="hidden" id="holeLocation" name="holeLocation" value="" />
                                            <input type="hidden" id="stringColorChosen" name="stringColorChosen" value="" />
                                            <input type="hidden" id="safetyPin" name="safetyPin" value="" />
                                            <input type="hidden" id="grommetsChosen" name="grommetsChosen" value="" />
                                            <input type="hidden" id="foilChosen" name="foilChosen" value="" />
                                            <input type="hidden" id="surfaceChosen" name="surfaceChosen" value="" />

                                            <input type="hidden" id="sizetag" name="sizetag" value="N/A" />
                                            <input type="hidden" id="totalpricelabeladd2crt" name="totalpricelabeladd2crt"
                                            value="" />
                                            <input type="hidden" id="imgFromCanvas" name="imgFromCanvas">

                                            <div class="btns-inline btn-cart-canvas" style="display:none;">
                                                <button type="button" name="add-to-cart" value="37591" class="add-to-cart-btn designtoolbutton" onclick="submitDesign(2);">Add to
                                                cart</button>

                                                <span class="or">Or</span>
                                                <p class="dwn-pdf-btn fancybox-inline dwn-pdf-btn-brd">
                                                    <a id="smbtBtn" href="#pdfLeadPopup" target="_blank" onclick="submitDesign(2, this, 'sbmtQT');">
                                                        <img
                                                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAHdElNRQfkBAYNOQiZbZzzAAAAdUlEQVQoz82PMQ6CABRDX4CN0TMwuAKnwY2ds+HgjYgbEA5A8twMX0Ed7fTb3zYpBNjZRSWLlNMLJ+EL/spgavW8K9P3hpzeFsCWnnynzMLBm1fvnrdyGSyLi0X4uoaWchsAV/TTBv1h5mx9mK+Z8OLoEUabBxs7SqIhWWFPAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIwLTA0LTA2VDEzOjU3OjA4KzAwOjAwNsR2EAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMC0wNC0wNlQxMzo1NzowOCswMDowMEeZzqwAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC">
                                                        <span>Submit Quote</span>
                                                    </a>
                                                </p>
                                            </div>

                                            <div class="btns-inline btn-prev-next">

                                                <button class="col-sm-6 btn btn-prev" onclick="prev_new();" disabled>Prev</button>
                                                <button class="col-sm-6 btn btn-next" onclick="nxt_new();">Next</button>
                                            </div>



                                            <div class="btns-inline btn-canvas-submit" style="display:none;">
                                             <button class="col-sm-12 btn btn-next">Preview & Submit</button>
                                         </div>

                                     </div>
                                 </div>
                                 <div class="col-xs-12">
                                    <div class="productPrevCont">
                                        <div class="note-txt">
                                            <p>This image is only a preview. Colors and text may appear slightly different on
                                            the actual product.</p>
                                        </div>
                                        <div class="label-input-details-wrapper">
                                            <div class="label-input-details">
                                                <div id="previewPricing">
                                                    <div id="optionsForPricing">
                                                        <div class="productPrevContRow"> 
                                                            <span class="productPrevContRowTitle">Size</span> 
                                                            <span class="productPrevContRowDes"><span id="slwidth">1.5</span>" X
                                                            <span id="slheight">1.5</span>" Inch</span> 
                                                        </div>

                                                        <div class="productPrevContRow"> 
                                                            <span class="productPrevContRowTitle">Cut/Fold</span> 
                                                            <span class="productPrevContRowDes" id="cutnfolddiv">Straight Cut - No Fold</span> 
                                                        </div>

                                                        <div class="productPrevContRow"> 
                                                            <span class="productPrevContRowTitle">Background Color</span> 
                                                            <span class="productPrevContRowDes" id="backlabelcol">N/A</span>
                                                        </div>

                                                        <div class="productPrevContRow"> 
                                                            <span class="productPrevContRowTitle">Logo Colors</span>
                                                            <span class="productPrevContRowDes" id="textlabelcol">N/A</span>
                                                        </div>

                                                        <div class="productPrevContRow"> 
                                                            <span class="productPrevContRowTitle">Material</span> 
                                                            <span class="productPrevContRowDes" id="materialType">N/A</span>
                                                        </div>

                                                        <div class="productPrevContRow"> 
                                                            <span class="productPrevContRowTitle">Thickness</span> 
                                                            <span class="productPrevContRowDes" id="labthickness">N/A</span>
                                                        </div>

                                                        <div class="productPrevContRow"> 
                                                            <span class="productPrevContRowTitle">Print Option</span> 
                                                            <span class="productPrevContRowDes" id="labprintOption">N/A</span>
                                                        </div>

                                                        <div class="productPrevContRow">
                                                         <span class="productPrevContRowTitle">Hole Punch</span> 
                                                         <span class="productPrevContRowDes" id="labHolePunch">N/A</span>
                                                     </div>

                                                     <div class="productPrevContRow"> 
                                                        <span class="productPrevContRowTitle">Hole Location</span> 
                                                        <span class="productPrevContRowDes" id="labHoleLocation">N/A</span>
                                                    </div>

                                                    <div class="productPrevContRow"> 
                                                        <span class="productPrevContRowTitle">String Color</span> 
                                                        <span class="productPrevContRowDes" id="labStringColor">N/A</span>
                                                    </div>

                                                    <div class="productPrevContRow"> 
                                                        <span class="productPrevContRowTitle">Safety Pin</span> 
                                                        <span class="productPrevContRowDes" id="labSafetyPin">N/A</span>
                                                    </div>

                                                    <div class="productPrevContRow"> 
                                                        <span class="productPrevContRowTitle">Grommets</span> 
                                                        <span class="productPrevContRowDes" id="labGrommets">N/A</span>
                                                    </div>


                                                    <div class="productPrevContRow">
                                                       <span class="productPrevContRowTitle">Foil</span> 
                                                       <span class="productPrevContRowDes" id="labFoil">N/A</span> 
                                                   </div>

                                                   <div class="productPrevContRow"> 
                                                    <span class="productPrevContRowTitle">Surface</span> 
                                                    <span class="productPrevContRowDes" id="labSurface">N/A</span>
                                                </div>

                                                <div class="productPrevContRow">
                                                   <span class="productPrevContRowTitle">Size Tag</span> 
                                                   <span class="productPrevContRowDes" id="sizetagchosen">N/A</span>
                                               </div>

                                               <hr>

                                               <div class="productPrevContRow"> 
                                                <span class="productPrevContRowTitle">Quantity</span> 
                                                <span class="productPrevContRowDes"><span id="quantity1">1000</span>PIECES</span> 
                                            </div>

                                            <div class="productPrevContRow">
                                               <span class="productPrevContRowTitle">Price per label</span> 
                                               <span class="productPrevContRowDes">$<span id="priceperlabel1">0.75</span></span> 
                                           </div>

                                       </div>
                                       <hr>
                                       <div id="subtotal">
                                        <div class="productPrevContRow str-txt">
                                            <span class="productPrevContRowTitle">Sub Total</span>
                                            <span class="productPrevContRowDes">$<span
                                                id="sub_totalprice1">1350.00</span></span>
                                            </div>
                                        </div>
                                        <hr>

                                        <div id="addOns">

                                        </div>
                                    </div>
                                </div>
                                <div class="toggle-less">See More</div>
                            </div>
                            <div class="productPrevContRow str-txt" id="tttl"> <span
                                class="productPrevContRowTitle">Total</span> <span
                                class="productPrevContRowDes">$<span id="totalprice1">75</span></span> </div>
                                <hr>
                                <div class="productPrevContRow noteText"> <strong>Note:</strong> This product may take
                                8-10 days for design, printing and process. </div>
                            </div>
                        </div>
                    </div>
                    <div class="viewall"><span>View Details</span> <i class="fa fa-chevron-circle-down"
                        aria-hidden="true"></i></div>
                    </div>
                </div>
            </div>
        </div>

        <section class="panel-headings-section for-mob">
            <!-- start --->
            <div class="owl-carousel panel-headings-wrapper">
                <div class="panel-heading active-h mobilestep1" data-target="label-fold" data-id="1">
                    <i class="icon icon-label-cut"></i>
                    <p>Hang Tag Type</p>
                    <p>1</p>
                </div>

                <div class="panel-heading mobilestep2" data-target="logo" data-id="2">
                    <i class="icon icon-label-cut"></i>
                    <p>Upload your Logo (image / artwork)</p>
                    <p>2</p>
                </div>
                <div class="panel-heading mobilestep3" data-target="logocolor" data-id="3">
                    <i class="icon icon-text-color"></i>
                    <p>Color</p>
                    <p>3</p>
                </div>
                

                <div class="panel-heading mobilestep4" data-target="printOptions" data-id="4">
                    <i class="icon icon-label-cut"></i>
                    <p>Print Options</p>
                    <p>4</p>
                </div>
                <div class="panel-heading mobilestep5" id="amount" data-target="amount" data-id="5">
                    <i class="icon icon-label-cut"></i>
                    <p>Quantity</p>
                    <p>5</p>
                </div>
            </div>
        </section>

        <!--------- customization panel ---------->
        <div class="proCustomizations hangtags_customization">
            <div>
                <input type="hidden" name="seletsize" id="setselectsize" value="N/A">
                <input type="hidden" name="selectedwidth" id="selectedwidth" value="N/A">
                <input type="hidden" name="selectedheight" id="selectedheight" value="N/A">
                <input type="hidden" name="sliderwidth" id="sliderwidth" value="0.375">
                <input type="hidden" name="sliderhight" id="sliderhight" value="0.0.375">
                <input type="hidden" name="userbgcolor" id="userbgcolor" value="N/A">
                <input type="hidden" name="usertextcolor" id="usertextcolor" value="N/A">
                <input type="hidden" name="usertextcolorName" id="usertextcolorName" value="N/A">
                <input type="hidden" name="usertextcolorSet" id="usertextcolorSet" value="">
                <input type="hidden" name="usertextcolorSetCount" id="usertextcolorSetCount" value="0">
                <input type="hidden" name="selectwlebelt" id="selectwlebelt" value="N/A">
                <!--<input type="hidden" name="addicommvalue" id="addicommvalue" value="N/A">-->

                <input type="hidden" name="newMaterial" id="newMaterial">
                <input type="hidden" name="newThickness" id="newThickness">
                <input type="hidden" name="newPrintOption" id="newPrintOption">
                <input type="hidden" name="newholePunch" id="newholePunch">
                <input type="hidden" name="newHoleLocation" id="newHoleLocation">
                <input type="hidden" name="newStringColor" id="newStringColor">
                <input type="hidden" name="newSafetyPin" id="newSafetyPin">
                <input type="hidden" name="newGrommets" id="newGrommets">
                <input type="hidden" name="newFoil" id="newFoil">
                <input type="hidden" name="newSurface" id="newSurface">


                <input type="hidden" name="totalquantity" id="totalquantity" value="">
                <input type="hidden" name="priceForWidth" id="priceForWidth" value="N/A">
                <input type="hidden" name="priceForHeight" id="priceForHeight" value="N/A">
                <input type="hidden" name="unitpricehere" id="unitpricehere" value="N/A">
                <input type="hidden" name="cutnfolddivforajax" id="cutnfolddivforajax" value="N/A">

                <!----------- back print options ------------>
                <input type="hidden" name="row1_fontSize_bck" id="row1_fontSize_bck" value="">
                <input type="hidden" name="row2_fontSize_bck" id="row2_fontSize_bck" value="">
                <input type="hidden" name="row3_fontSize_bck" id="row3_fontSize_bck" value="">

                <input type="hidden" name="row1_text" id="row1_text" value="">
                <input type="hidden" name="row2_text" id="row2_text" value="">
                <input type="hidden" name="row3_text" id="row3_text" value="">


                <div class="guideArea">
                    <a class="button" target="_blank" href="https://xpresalabels.com/site/faq/">Click here for guide & tips</a>
                    <img
                    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgY2xhc3M9IiI+PGc+PGc+Cgk8Zz4KCQk8cGF0aCBkPSJNMjU2LDBDMTIwLjQ3NywwLDEwLjIyNCwxMTAuMjU1LDEwLjIyNCwyNDUuNzc4YzAsNjIuMTcxLDIzLjEyLDEyMS4xODYsNjUuMjA2LDE2Ni43MjVsLTEzLjcwNyw4OC4zNDIgICAgYy0wLjU1OCwzLjYwMSwwLjk1Myw3LjIwOCwzLjkxLDkuMzM2YzEuNjc3LDEuMjA3LDMuNjU3LDEuODIsNS42NDcsMS44MmMxLjUyLDAsMy4wNDYtMC4zNTcsNC40NDctMS4wODNsNzkuMjQxLTQxLjAzNiAgICBjMzEuODI1LDE0LjM4Niw2NS43ODgsMjEuNjc1LDEwMS4wMzIsMjEuNjc1YzEzNS41MjEsMCwyNDUuNzc4LTExMC4yNTUsMjQ1Ljc3OC0yNDUuNzc4QzUwMS43NzgsMTEwLjI1NSwzOTEuNTIzLDAsMjU2LDB6ICAgICBNMjU2LDQ3Mi4yMTFjLTMzLjk3MywwLTY2LjY0Ni03LjM0Ny05Ny4xMTQtMjEuODM1Yy0yLjczMS0xLjMtNS45MTQtMS4yNDUtOC42MDEsMC4xNDZsLTY2LjUyNCwzNC40NWwxMS41MS03NC4xNzcgICAgYzAuNDYzLTIuOTgyLTAuNDkzLTYuMDA3LTIuNTgyLTguMTg0Yy00MC43MDQtNDIuMzczLTYzLjEyMS05OC4wNzItNjMuMTIxLTE1Ni44MzVDMjkuNTY4LDEyMC45MjIsMTMxLjE0NSwxOS4zNDQsMjU2LDE5LjM0NCAgICBzMjI2LjQzMywxMDEuNTc3LDIyNi40MzMsMjI2LjQzM1MzODAuODU2LDQ3Mi4yMTEsMjU2LDQ3Mi4yMTF6IiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iYWN0aXZlLXBhdGgiIHN0eWxlPSJmaWxsOiNGRkZGRkYiIGRhdGEtb2xkX2NvbG9yPSIjMDAwMDAwIj48L3BhdGg+Cgk8L2c+CjwvZz48Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0yNTYsNzAuNzA4Yy0yOC4yMzYsMC01MS4yMDgsMjIuOTcyLTUxLjIwOCw1MS4yMDhjMCwyOC4yMzYsMjIuOTcyLDUxLjIwOCw1MS4yMDgsNTEuMjA4ICAgIGMyOC4yMzgsMCw1MS4yMDgtMjIuOTcyLDUxLjIwOC01MS4yMDhDMzA3LjIwOCw5My42NzgsMjg0LjIzNiw3MC43MDgsMjU2LDcwLjcwOHogTTI1NiwxNTMuNzggICAgYy0xNy41NywwLTMxLjg2NC0xNC4yOTQtMzEuODY0LTMxLjg2NFMyMzguNDMsOTAuMDUyLDI1Niw5MC4wNTJjMTcuNTcxLDAsMzEuODY0LDE0LjI5NCwzMS44NjQsMzEuODY0UzI3My41NywxNTMuNzgsMjU2LDE1My43OHogICAgIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iYWN0aXZlLXBhdGgiIHN0eWxlPSJmaWxsOiNGRkZGRkYiIGRhdGEtb2xkX2NvbG9yPSIjMDAwMDAwIj48L3BhdGg+Cgk8L2c+CjwvZz48Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0zMTIuNzU4LDM1Ny43NGgtMTEuMDEzVjE5OS4xNDhjMC01LjM0Mi00LjMzMS05LjY3Mi05LjY3Mi05LjY3MmgtOTIuODI4Yy01LjM0MiwwLTkuNjcyLDQuMzMxLTkuNjcyLDkuNjcydjMyLjE0MyAgICBjMCw1LjM0Miw0LjMzMSw5LjY3Miw5LjY3Miw5LjY3MmgxMS4wMTN2MTE2Ljc3N2gtMTEuMDEzYy01LjM0MiwwLTkuNjcyLDQuMzMxLTkuNjcyLDkuNjcydjMyLjE0MyAgICBjMCw1LjM0Myw0LjMzMSw5LjY3Myw5LjY3Miw5LjY3M2gxMTMuNTE0YzUuMzQyLDAsOS42NzItNC4zMzEsOS42NzItOS42NzJ2LTMyLjE0M0MzMjIuNDMsMzYyLjA3MSwzMTguMDk5LDM1Ny43NCwzMTIuNzU4LDM1Ny43NCAgICB6IE0zMDMuMDg1LDM4OS44ODRoLTk0LjE3di0xMi44aDExLjAxM2M1LjM0MiwwLDkuNjcyLTQuMzMxLDkuNjcyLTkuNjcyVjIzMS4yOTFjMC01LjM0Mi00LjMzMS05LjY3Mi05LjY3Mi05LjY3MmgtMTEuMDEzICAgIHYtMTIuNzk4SDI4Mi40djE1OC41OTNjMCw1LjM0Miw0LjMzMSw5LjY3Miw5LjY3Miw5LjY3MmgxMS4wMTNWMzg5Ljg4NHoiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSJhY3RpdmUtcGF0aCIgc3R5bGU9ImZpbGw6I0ZGRkZGRiIgZGF0YS1vbGRfY29sb3I9IiMwMDAwMDAiPjwvcGF0aD4KCTwvZz4KPC9nPjwvZz4gPC9zdmc+" />
                </div>

                <!-------- folds --------->
                <div class="panel panel-primary" data-div="label-fold" id="label-folds">

                </div>

                <!-------- upload --------->
                <div class="panel" data-div="logo">
                    <div class="panel-body">
                        <h4 class="panel-title text-center">Uplaod Your Logo:</h4>
                        <div class="upload-logo-sec">
                            <div class="select-list">
                                <div class="col-lg-6 select-listItem">
                                    <label><input name="uploadLogo" type="radio" checked="checked" value="upload"
                                        onchange="designSendMethod('upload')">
                                        <span class="checkmark"></span>
                                    I want to upload a new image</label>
                                </div>
                                <div class="col-lg-6 select-listItem">
                                    <label><input name="uploadLogo" type="radio" value="email"
                                        onchange="designSendMethod('email')">
                                        <span class="checkmark"></span>
                                    I will send the artwork by email</label>
                                </div>
                            </div>

                            <link rel="stylesheet" type="text/css"
                            href="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/assets/css/upload_style.css">
                            <div class="file_upload">
                                <div id="wrapper">
                                    <input type="file" id="drop-area1" name="userImage" onchange="previewFile(1)"
                                    class="mydropfile">
                                    <div id="div-drop-area1">
                                        <h3 class="drop-text">Drag and Drop Images Here</h3>
                                    </div>
                                </div>
                            </div>
                            <canvas id="the-canvas" style="display:none"></canvas>
                            <form id="pdfsubmit" method="post"
                            action="https://www.xpresalabels.com/woven-label-custom-quote/">
                            <input type="hidden" id="pdfsbmt" name="pdfsbmt" value="">
                        </form>

                        <div id="emailArea">
                            <p>Please mail us the logo in proper file format to <a
                                href="mailto:sales@xpresalabels.com">sales@xpresalabels.com</a></p>
                                <p><b>Supported file formats are:</b> .jpg, .jpeg, .png, .tiff, .pdf, .ai, .psd, .cdr</p>
                            </div>


                            <p> <b>Note</b><br>
                                ■ Allowed file format: <b style="color:#000;">.jpg, .jpeg, png, pdf</b>. Please mail us for
                                other types. (Use high resolution image)<br>
                                ■ For <b>pdf</b> maximum upload size is 7 MB.
                                <p>Our expert will review your image to ensure it will turn out to be a great label. Revisions
                                    to the image (if required) are free of charge. Let us know if you have any questions on
                                    design, we are pleased to support you. A variety of file formats are allowed, including JPG,
                                    JPEG, PNG, GIF and PDF. If you have another file format, or if you have any questions, just
                                call us, or shoot us an e-mail!</p>
                                <div class="btn-grp">

                                    <button class="save-button" onclick="nxt(this);">Next</button>
                                </div>


                            </div>
                        </div>

                        <!----- Material select & thicknewss ---->

                        <h4 class="panel-title text-center">HANG TAG MATERIAL</h4>
                        <div class="panel-body materials_section" style="display:none;">

                            <div class="materialSelection">
                             <div class="row">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
        <figure class="materialSelect default" onclick="selectMaterial(this, 'Flat', 0)">
            <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/HangTagMaterial/Flat.svg">
            <figcaption>Flat</figcaption>
        </figure>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
        <figure class="materialSelect" onclick="selectMaterial(this, 'Matte', 50)">
            <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/HangTagMaterial/matte.svg">
            <figcaption>Matte</figcaption>
        </figure>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
        <figure class="materialSelect" onclick="selectMaterial(this, 'Glossy', 0)">
            <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/HangTagMaterial/glossy.svg">
            <figcaption>Glossy</figcaption>
        </figure>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
        <figure class="materialSelect" onclick="selectMaterial(this, 'Recycled', 50)">
            <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/HangTagMaterial/recycled.svg">
            <figcaption>Recycled</figcaption>
        </figure>
    </div>
</div>
                         </div>
                     </div>


                     <h4 class="panel-title text-center">HANG TAG THICKNESS</h4>
                     <div class="panel-body thickness_section" style="display:none;">

                        <div class="thicknessSelection">
                            <div class="row-sec">
        <div class="imgWrapW" onclick="selectThickness(this, '250gr', 0);">
            <div class="imgWrap">
                <div class="gap" style="width:5px;"></div>
                <div class="center">250gr(gsm)</div>
            </div>
        </div>

        <div class="imgWrapW selected default" onclick="selectThickness(this, '300gr', 0);">
            <div class="imgWrap">
                <div class="gap" style="width:6px;"></div>
                <div class="center">300gr(gsm)</div>
            </div>
        </div>

        <div class="imgWrapW" onclick="selectThickness(this, '400gr', 90);">
            <div class="imgWrap">
                <div class="gap" style="width:8px;"></div>
                <div class="center">400gr</div>
            </div>
        </div>

        <div class="imgWrapW" onclick="selectThickness(this, '500gr', 120);">
            <div class="imgWrap">
                <div class="gap" style="width:10px;"></div>
                <div class="center">500gr</div>
            </div>
        </div>

        <div class="imgWrapW" onclick="selectThickness(this, '600gr', 180);">
            <div class="imgWrap">
                <div class="gap" style="width:12px;"></div>
                <div class="center">600gr</div>
            </div>
        </div>

        <div class="imgWrapW" onclick="selectThickness(this, '800gr', 230);">
            <div class="imgWrap">
                <div class="gap" style="width:16px;"></div>
                <div class="center">800gr</div>
            </div>
        </div>
</div>
<div class="text-center note" style="margin: 20px 0;">Thickness views are not the actual views and are an example of the range of thickness</div>                        </div>

                    </div>
                </div>

<!-------- label sizes --------->
<div class="panel" data-div="label-size" id="label-sizes">
    <div class="panel-body">
        <div class="panel-body-desig-order">
            <div class="range-row">
                <div class="col-lg-1"><label>Width</label></div>
                <div class="col-lg-10">
                    <input type="text" class="rangeSlideElement rangeSlideWidth"
                    onchange="updateSliderW(this. value)" id="loadwidth">
                </div>
                <div class="col-lg-1 inchToCM"><span id="widthInCM"></span></div>
            </div>

            <div class="range-row">
                <div class="col-lg-1"><label>Height</label>
                </div>
                <div class="col-lg-10">
                    <input type="text" class="rangeSlideElement rangeSlideHeight"
                    onchange="updateSliderH(this. value)" id="loadheight">
                </div>
                <div class="col-lg-1 inchToCM"><span id="heightInCM"></span></div>
            </div>

            <div class="btn-grp">

                <button class="save-button" onclick="nxt(this);">Next</button>
            </div>


        </div>
    </div>
</div>



<!-------- logo colors --------->
<div class="panel color-bg-sec" data-div="logocolor" id="logocolors">
    <h4 class="panel-title text-center">LOGO COLOR</h4>
    <div class="panel-body">

        <div>
            <div class="selectedColors" id="selectedColors">

            </div>
        </div>
        <p id="coloColorErrorMsg" style="color: red"></p>
        <div class="colorSelection">
            <div class="colors_l">
                <span class="colorContainer " id="Black" onclick="selecttextcolor('000000','Black', this)">
                    <span class="colorContainer-label " style="background-color: #000000">
                        <input type="radio" name="radio-51" value="Black" checked="checked">
                        <span class="wpcf7-list-item-label">Black</span>
                    </span>
                </span>
                <span class="colorContainer " id="White" onclick="selecttextcolor('ffffff','White', this)">
                    <span class="colorContainer-label " style="background-color: #ffffff">
                        <input type="radio" name="radio-52" value="White" checked="checked">
                        <span class="wpcf7-list-item-label">White</span>
                    </span>
                </span>
                <span class="colorContainer " id="Blue" onclick="selecttextcolor('06038d','Blue', this)">
                    <span class="colorContainer-label " style="background-color: #06038d">
                        <input type="radio" name="radio-53" value="Blue" checked="checked">
                        <span class="wpcf7-list-item-label">Blue</span>
                    </span>
                </span>
                <span class="colorContainer " id="Light-Blue" onclick="selecttextcolor('6cace4','Light Blue', this)">
                    <span class="colorContainer-label " style="background-color: #6cace4">
                        <input type="radio" name="radio-54" value="Light Blue" checked="checked">
                        <span class="wpcf7-list-item-label">Light Blue</span>
                    </span>
                </span>
                <span class="colorContainer " id="Turquoise" onclick="selecttextcolor('41b6e6','Turquoise', this)">
                    <span class="colorContainer-label " style="background-color: #41b6e6">
                        <input type="radio" name="radio-55" value="Turquoise" checked="checked">
                        <span class="wpcf7-list-item-label">Turquoise</span>
                    </span>
                </span>
                <span class="colorContainer " id="Brown" onclick="selecttextcolor('4f2c1d','Brown', this)">
                    <span class="colorContainer-label " style="background-color: #4f2c1d">
                        <input type="radio" name="radio-56" value="Brown" checked="checked">
                        <span class="wpcf7-list-item-label">Brown</span>
                    </span>
                </span>
                <span class="colorContainer " id="Light-brown" onclick="selecttextcolor('63513d','Light brown', this)">
                    <span class="colorContainer-label " style="background-color: #63513d">
                        <input type="radio" name="radio-57" value="Light brown" checked="checked">
                        <span class="wpcf7-list-item-label">Light brown</span>
                    </span>
                </span>
                <span class="colorContainer " id="Dark-pink" onclick="selecttextcolor('a83d72','Dark pink', this)">
                    <span class="colorContainer-label " style="background-color: #a83d72">
                        <input type="radio" name="radio-58" value="Dark pink" checked="checked">
                        <span class="wpcf7-list-item-label">Dark pink</span>
                    </span>
                </span>
                <span class="colorContainer " id="Pink" onclick="selecttextcolor('f57eb6','Pink', this)">
                    <span class="colorContainer-label " style="background-color: #f57eb6">
                        <input type="radio" name="radio-59" value="Pink" checked="checked">
                        <span class="wpcf7-list-item-label">Pink</span>
                    </span>
                </span>
                <span class="colorContainer " id="Dark-purple"onclick="selecttextcolor('470a68','Dark purple', this)">
                    <span class="colorContainer-label " style="background-color: #470a68">
                        <input type="radio" name="radio-510" value="Dark purple" checked="checked">
                        <span class="wpcf7-list-item-label">Dark purple</span>
                    </span>
                </span>
                <span class="colorContainer " id="Purple" onclick="selecttextcolor('7566a0','Purple', this)">
                    <span class="colorContainer-label " style="background-color: #7566a0">
                        <input type="radio" name="radio-511" value="Purple" checked="checked">
                        <span class="wpcf7-list-item-label">Purple</span>
                    </span>
                </span>
                <span class="colorContainer " id="Green" onclick="selecttextcolor('006341','Green', this)">
                    <span class="colorContainer-label " style="background-color: #006341">
                        <input type="radio" name="radio-512" value="Green" checked="checked">
                        <span class="wpcf7-list-item-label">Green</span>
                    </span>
                </span>
                <span class="colorContainer " id="Apple-green" onclick="selecttextcolor('a4d65e','Apple green', this)">
                    <span class="colorContainer-label " style="background-color: #a4d65e">
                        <input type="radio" name="radio-513" value="Apple green" checked="checked">
                        <span class="wpcf7-list-item-label">Apple green</span>
                    </span>
                </span>
                <span class="colorContainer " id="Off-White" onclick="selecttextcolor('e8e1c7','Off White', this)">
                    <span class="colorContainer-label " style="background-color: #e8e1c7">
                        <input type="radio" name="radio-514" value="Off White" checked="checked">
                        <span class="wpcf7-list-item-label">Off White</span>
                    </span>
                </span>
                <span class="colorContainer " id="Orange" onclick="selecttextcolor('ff6a39','Orange', this)">
                    <span class="colorContainer-label " style="background-color: #ff6a39">
                        <input type="radio" name="radio-515" value="Orange" checked="checked">
                        <span class="wpcf7-list-item-label">Orange</span>
                    </span>
                </span>
                <span class="colorContainer " id="Red" onclick="selecttextcolor('c8102e','Red', this)">
                    <span class="colorContainer-label " style="background-color: #c8102e">
                        <input type="radio" name="radio-516" value="Red" checked="checked">
                        <span class="wpcf7-list-item-label">Red</span>
                    </span>
                </span>
                <span class="colorContainer " id="Rubyred" onclick="selecttextcolor('9b111e','Rubyred', this)">
                    <span class="colorContainer-label " style="background-color: #9b111e">
                        <input type="radio" name="radio-517" value="Rubyred" checked="checked">
                        <span class="wpcf7-list-item-label">Rubyred</span>
                    </span>
                </span>
                <span class="colorContainer " id="Silvergrey"onclick="selecttextcolor('5b6770','Silvergrey', this)">
                    <span class="colorContainer-label " style="background-color: #5b6770">
                        <input type="radio" name="radio-518" value="Silvergrey" checked="checked">
                        <span class="wpcf7-list-item-label">Silvergrey</span>
                    </span>
                </span>
                <span class="colorContainer " id="Yellow" onclick="selecttextcolor('ffcd00','Yellow', this)">
                    <span class="colorContainer-label " style="background-color: #ffcd00">
                        <input type="radio" name="radio-519" value="Yellow" checked="checked">
                        <span class="wpcf7-list-item-label">Yellow</span>
                    </span>
                </span>
                <span class="colorContainer " id="Sparkling-gold" onclick="selecttextcolor('cbb677','Sparkling gold', this)">
                    <span class="colorContainer-label " style="background-color: #cbb677">
                        <input type="radio" name="radio-520" value="Sparkling gold" checked="checked">
                        <span class="wpcf7-list-item-label">Sparkling gold</span>
                    </span>
                </span>
                <span class="colorContainer " id="Sparkling-red" onclick="selecttextcolor('aa0114','Sparkling red', this)">
                    <span class="colorContainer-label " style="background-color: #aa0114">
                        <input type="radio" name="radio-521" value="Sparkling red" checked="checked">
                        <span class="wpcf7-list-item-label">Sparkling red</span>
                    </span>
                </span>
                <span class="colorContainer " id="Sparkling-silver" onclick="selecttextcolor('a7a9ac','Sparkling silver', this)">
                    <span class="colorContainer-label " style="background-color: #a7a9ac">
                        <input type="radio" name="radio-522" value="Sparkling silver" checked="checked">
                        <span class="wpcf7-list-item-label">Sparkling silver</span>
                    </span>
                </span>
                <span class="colorContainer " id="Sparkling-blue" onclick="selecttextcolor('3f00ff','Sparkling blue', this)">
                    <span class="colorContainer-label " style="background-color: #3f00ff">
                        <input type="radio" name="radio-523" value="Sparkling blue" checked="checked">
                        <span class="wpcf7-list-item-label">Sparkling blue</span>
                    </span>
                </span>
            </div>

            <div class="additionalColors">
                <h4 class="additionalColorCode">You can also Submit PMS/ PantoneCodes color code for better
                understanding</h4>
                <a target="_blank" href="https://www.xpresalabels.com/wp-content/uploads/2018/05/PantoneCodes.pdf"
                class="pdflinkinPopup pdfShowgal">Click Here To Check Pantone Color Codes</a>
                <input type="text" id="pantoneText" class="customColorpantone" placeholder="Select Other Color" readonly>
                <button onclick="selecttextcolor('','');">Add</button>
            </div>
        </div>


    </div>


    <!-------- background colors --------->
    <h4 class="panel-title text-center">BACKGROUND COLOR</h4>
    <div class="panel color-bg-sec" data-div="backgroundcolor" id="backgroundcolors">
        <div class="panel-body">

            <div class="colorSelection">
                <div class="colors_b">

                </div>
                <div class="additionalColors">
                    <h4 class="additionalColorCode">You can also Submit PMS/ PantoneCodes color code for better
                    understanding</h4>
                    <a target="_blank"  href="https://www.xpresalabels.com/wp-content/uploads/2018/05/PantoneCodes.pdf"
                    class="pdflinkinPopup pdfShowgal">Click Here To Check Pantone Color Codes</a>
                    <input type="text" id="pantoneBG" class="customColorpantone" placeholder="Select Other Color" readonly>
                </div>
            </div>
        </div>
    </div>
</div>





<!----- print Options ---->
<div class="panel" data-div="printOptions" id="printOptions" style="display:block;">
    <h4 class="panel-title text-center">PRINT OPTIONS</h4>
    <div class="panel-body">

        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <div class="oneSide default" onclick="selectSideOptions(this, 'One Sided');">
                    <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/onesided.png" alt="One Sided">
                    <h4>One Sided</h4>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <div class="oneSide twoSide" onclick="selectSideOptions(this, 'Both Sided');">
                    <img  src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/bothside.png" alt="Both Sided">
                    <h4>Both Sided</h4>
                </div>
            </div>
        </div>
    </div>

    <div class="panel-body panel-body-2">
        <h4 class="panel-title text-center">Upload image for the back side:</h4>
        <div class="frm-algn-holder">
            <div class="frm-sec col-lg-12">
                <div class="file_upload">
                    <div id="wrapper">
                        <input type="file" id="drop-area2" name="userImage" onchange="previewFile(2)"
                        class="mydropfile">
                        <div id="div-drop-area2">
                            <h3 class="drop-text">Drag and Drop Images Here</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="close-panel" onclick=""><span>X</span></div>
    </div>

    <h4 class="panel-title text-center">HOLE PUNCH</h4>
    <div class="panel-body section_hole_punch" style="display:none;">

        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 default" onclick="selectHoles(this, '1/8', 0);">
                <div class="hole hole1">
                    <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/holepunch_8.png">
                    <h4>1/8”</h4>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" onclick="selectHoles(this, '3/16', 20);">
                <div class="hole hole3">
                    <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/holepunch_16.png">
                    <h4>3/16”</h4>
                </div>
            </div>
        </div>


    </div>

    <h4 class="panel-title text-center">HOLE LOCATION</h4>
    <div class="panel-body section_hole_location" style="display:none;">

        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 selected" onclick="selectHoleLocation(this, 'Top - Center');">
                <div class="hole holeLocation-TC">
                    <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hole_location.png" alt="Top - Center">
                    <h4>1/8”</h4>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 default" onclick="selectHoleLocation(this, 'Left - Center');">
                <div class="hole holeLocation-LC">
                    <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hole_location.png" alt="Left - Center">
                    <h4>3/16”</h4>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" onclick="selectHoleLocation(this, 'Right - Center');">
                <div class="hole holeLocation-RC">
                    <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hole_location.png" alt="Right - Center">
                    <h4>3/16”</h4>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" onclick="selectHoleLocation(this, 'Top - Left');">
                <div class="hole holeLocation-TL">
                    <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hole_location.png" alt="Top - Left">
                    <h4>3/16”</h4>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" onclick="selectHoleLocation(this, 'Top - Right');">
                <div class="hole holeLocation-TR">
                 <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hole_location.png" alt="Top - Right">
                 <h4>3/16”</h4>
             </div>
         </div>
     </div>

 </div>


 <!----- Surface ---->
 <h4 class="panel-title text-center">SURFACE</h4>
 <div class="panel-body section_surface" style="display:none;">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 default" onclick="selectSurface(this, 'Flat', 0);">
            <div class="surface">
                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/Surface/flat.svg" alt="Flat">
                <h4>Flat</h4>
            </div>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" onclick="selectSurface(this, 'Emboss (raised)', 100);">
            <div class="surface">
                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/Surface/emboss.svg" alt="Emboss">
                <h4>Emboss (raised)</h4>
            </div>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" onclick="selectSurface(this, 'Deboss (recessed)', 100);" alt="Deboss">
            <div class="surface">
                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/Surface/deboss.svg">
                <h4>Deboss (recessed)</h4>
            </div>
        </div>
    </div>
</div>
<h4 class="panel-title text-center">STRING COLOR</h4>
<div class="panel-body" style="display:none;">
    <div class="strings">
        <ul>
            <li class="White" onclick="selectString(this, 'White', 50);">
                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/StringColor/white.svg" alt="White">
                <h4>White</h4>
            </li>
            <li class="Black" onclick="selectString(this, 'Black', 50);">
                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/StringColor/Black.svg" alt="Black">
                <h4>Black</h4>
            </li>
            <li class="Yellow" onclick="selectString(this, 'Yellow', 60);">
                <img  src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/StringColor/Yellow.svg" alt="Yellow">
                <h4>Yellow</h4>
            </li>
            <li class="Green" onclick="selectString(this, 'Green', 60);">
                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/StringColor/Green.svg" alt="Green">
                <h4>Green</h4>
            </li>
            <li class="Red" onclick="selectString(this, 'Red', 60);">
                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/StringColor/Red.svg" alt="Red">
                <h4>Red</h4>
            </li>
            <li class="Natural" onclick="selectString(this, 'Natural', 60);">
                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/StringColor/Natural.svg" alt="Natural">
                <h4>Natural</h4>
            </li>
        </ul>
    </div>
</div>
<!----- Safety pin ---->
<h4 class="panel-title text-center">SAFETY PIN</h4>
<div class="panel-body" style="display:none;">
    <div class="choosePins">
        <ul>
            <li class="yes">Yes</li>
            <li class="no selected">No</li>
        </ul>
    </div>
    <div class="SafetyPinColors" style="display:none;">
        <ul>
            <li class="Silver" onclick="selectSafetyPin(this, 'Silver', 50);">
                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/SafetyPin/Silver.svg" alt="Silver">
                <h4>Silver</h4>
            </li>
            <li class="Gold" onclick="selectSafetyPin(this, 'Gold', 50);">
                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/SafetyPin/Gold.svg" alt="Gold">
                <h4>Gold</h4>
            </li>
            <li class="Black" onclick="selectSafetyPin(this, 'Black', 50);">
                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/SafetyPin/Black.svg" alt="Black">
                <h4>Black</h4>
            </li>
            <li class="Bronze" onclick="selectSafetyPin(this, 'Bronze', 50);">
                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/SafetyPin/Bronze.svg" alt="Bronze">
                <h4>Bronze</h4>
            </li>
        </ul>
    </div>
</div>


<!----- Grommet ---->
<h4 class="panel-title text-center">GROMMETS</h4>
<div class="panel-body" style="display:none;">
    <div class="grommets">
        <ul>
            <li class="No" onclick="selectGrommet(this, 'No Grommet', 0);">
                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/Grommets/NoGrommets.svg" alt="No Grommet">
                <h4>No Grommet</h4>
            </li>
            <li class="Gold" onclick="selectGrommet(this, 'Gold', 50);">
                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/Grommets/GoldenGrommets.svg" alt="Gold">
                <h4>Gold</h4>
            </li>
            <li class="Silver" onclick="selectGrommet(this, 'Silver', 50);">
                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/Grommets/SilverGrommets.svg" alt="Silver">
                <h4>Silver</h4>
            </li>
            <li class="Black" onclick="selectGrommet(this, 'Black', 50);">
                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/Grommets/BlackGrommets.svg" alt="Black">
                <h4>Black</h4>
            </li>
            <li class="White" onclick="selectGrommet(this, 'White', 50);">
                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/Grommets/WhiteGrommets.svg" alt="White">
                <h4>White</h4>
            </li>
            <li class="Bronze" onclick="selectGrommet(this, 'Bronze', 50);">
                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/Grommets/BronzeGrommets.svg" alt="Bronze">
                <h4>Bronze</h4>
            </li>
        </ul>
    </div>

</div>

<!----------- foils ------------>
<h4 class="panel-title text-center">FOIL</h4>
<div class="panel-body" style="display:none;"> 
    <div class="foils">
        <ul>
            <li class="NoFoil" onclick="selectFoil(this, 'No Foil', 0);">
                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/Foil/NoFoil.svg" alt="No Foil">
                <h4>No Foil</h4>
            </li>
            <li class="SilverFoil" onclick="selectFoil(this, 'Silver Foil', 0);">
                <img
                src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/Foil/SilverFoil.svg" alt="Silver Foil">
                <h4>Silver Foil</h4>
            </li>
            <li class="GoldFoil" onclick="selectFoil(this, 'Gold Foil', 0);">
                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/Foil/GoldFoil.svg" alt="Gold Foil">
                <h4>Gold Foil</h4>
            </li>
        </ul>
    </div>

</div>

</div>

<!-------- amount --------->
<div class="panel" id="amnt_qbltm" data-div="amount">
    <div class="panel-body">
        <h4 class="panel-title text-center">QUANTITY</h4>
        <div class="panel-body-table-sec" id="woovenlabelcustomprice">
            <span id="quantityErrorMsg"> </span>
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="stripped-table">
                <th>
                    <tr>
                        <td width="20%">&nbsp;</td>
                        <td width="20%">Quantity</td>
                        <td width="20%">Per Unit Price</td>
                    </tr>
                </th>
                <tbody id="priceContainerFull">

                </tbody>
            </table>
            <div class="btn-grp">

                <button class="save-button" onclick="nxt(this);">Next</button>
            </div>


        </div>
    </div>
</div>

<!----- Save and add ---->
<div class="panel panel-last" data-div="savwe">
    <div class="panel-body">
        <h4 class="panel-title text-center">You have successfully customized your product.</h4>
        <div class="cart-sec-btns">
            <h5 onclick="saveForLater()">Save Product for later</h5>
            <button type="button" name="add-to-cart" value="10305" class="add-to-cart-btn designtoolbutton"
            onclick="submitDesign(1);">Add to cart</button>
        </div>
    </div>
</div>

<!-------- add to cart and other buttons --------->
<div class="cart-sec">
    <div class="row">
        <div class="cart-sec-btns" style="display:none;">
            <div class="dwn-pdf-btn fancybox-inline">
                <a href="#pdfLeadPopup" onclick="submitDesign(2, this, 'sbmtQT');">
                    <img
                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAHdElNRQfkBAYNOQiZbZzzAAAAdUlEQVQoz82PMQ6CABRDX4CN0TMwuAKnwY2ds+HgjYgbEA5A8twMX0Ed7fTb3zYpBNjZRSWLlNMLJ+EL/spgavW8K9P3hpzeFsCWnnynzMLBm1fvnrdyGSyLi0X4uoaWchsAV/TTBv1h5mx9mK+Z8OLoEUabBxs7SqIhWWFPAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIwLTA0LTA2VDEzOjU3OjA4KzAwOjAwNsR2EAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMC0wNC0wNlQxMzo1NzowOCswMDowMEeZzqwAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC">
                    <span>Submit Quote</span>
                </a>
            </div>
            <div>
                <a href="javascript:void(0);" class="add-to-cart-btn designtoolbutton"
                onclick="submitDesign(2);">
                <img
                src="https://xpresalabels.com/site/wp-content/themes/xpresa-labels/assets/images/cart-icon.png">
                <span>Add to cart</span>
            </a>
        </div>
        <div class="rght-add-to-cart-sec">
            <a onclick="saveForLater()">
                <img
                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAHdElNRQfkBAYOBQWWaSfoAAAAvElEQVQoz6WOvQ7BYBSGn0qbGAyNsa6AdGuMrkBMEpO5q4TJLKmN+7Cy2AyuwfQNHegNCCGG16D12zB4znKS9zk/KFEeF/W5IamjQD0lCtJqq65E0iATfFBTMdnIVg3FGmuvIdh8cuAIrFmy0PkhlBSm3ZSAElgrdZllgsEQPm0xGMDgpD/kI18q8AMbQBWqOdnmLjChxektLjJnBLcTDpFVfi0iHMiEL/wv2EANF0/BW+LhUgNLO7wvC5Ir/h5f06WRpp8AAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMDQtMDZUMTQ6MDU6MDUrMDA6MDBfwm33AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIwLTA0LTA2VDE0OjA1OjA1KzAwOjAwLp/VSwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAASUVORK5CYII=">
                <span>Save for later</span>
            </a>
        </div>
    </div>
</div>
</div>
</div>

<!-- TABS -->
<div class="tab-pro-des">
        <div id="horizontalTab">
        <ul class="resp-tabs-list hor_1">
             <li>
                Description</li>                 <li>Reviews</li>
                                 <li>Discount</li>                  <li>Product Photos</li>             </ul>
            <div class="resp-tabs-container hor_1">
                <div><p>Xpresa Labels have been in custom woven label industry since 2002 and we are considered one of the most reliable custom label manufacturing company. Designs and prints used on labels are extremely high quality which has helped us in increasing our client base. Our in-house skilled teams are experts in their professional domain and they provide comprehensive solutions and advice to clients. These solutions help in weaving labels those match client expectations and they keep coming back to us for more.  Our labels are not basic or standard. They are professional labels.</p>
<p>Our professional label specialists analyze all details in your <a href="https://www.xpresalabels.com/woven-labels/"><strong>custom woven label</strong></a> request and note down specifications so that the products we provide are of high quality. Raw materials that we use to make labels are top quality so that there is no compromise on the quality of our products.</p>
<p>Our woven labels have been used throughout the industry. Beach Wear, Blankets, Carpets, Clothing, Crafts, Drapes, Furniture, Industrial, Pants, Promotional, Shirts, Shoes, Sports, Tactical, Under Garments, and etc…  If you need Labels, we make labels. They’re everywhere!  We promise to make your decision, the best decision.</p>
<p>Please visit our FAQs page for more questions you may have.</p>
                        <div class="qaPanelCustomProduct">
                                                       <div class="qaPanelCustomProductItem" id="item1">
                               <h4 class="show" data-id="item1">Label type</h4>
                               <div class="qaPanelCustomProductAns item1">

                                <p>We offer various types of labels to meet your products. These include woven labels, which can be <u>satin</u>, <u>taffeta</u>, and <u>damask</u>. Woven labels are created by using threads that are projected through a loom in order to provide a high level of detail similar to embroidery but with much more sophisticated stitches and details.</p>
<p>We also offer <u>printed satin</u> and hang tags. See our <u>Labels Glossary</u> for better explanations.</p>
<p>See our fold options in our quote forms. Please allow and indicate seam in our Additional Comments section.</p>
<p><strong>Damask –</strong> A lustrous based thread has a smooth soft texture. Typically considered high end and used for intricate details, such as signatures or small text. Available as Cut/End Fold, Centerfolded or Straight Cut. Adhesive or Iron Backing available. This is the best process for custom woven label applications. Woven Damask offers top quality features.</p>
<p><strong>Satin –</strong> A polyester based lustrous thread which is soft and smooth. Good quality results. Can be produce using a single needle or broadloom set-up based on quality needs.</p>
<p><strong>Taffeta –</strong> A polyester based plain woven thread used for low cost or basic uses. Not suggested for use in contact with skin as it tends to be scratchy. More suitable for outerwear or accessories. Very durable. Weaving can be double for definition details. Taffeta is a woven label process.</p>

                            </div>
                        </div>
                                                   <div class="qaPanelCustomProductItem" id="item2">
                               <h4 class="" data-id="item2">Turnaround/Lead time</h4>
                               <div class="qaPanelCustomProductAns item2">

                                <p>Xpresa Labels is one of the oldest and most reputable online label manufacturers. We offer the fastest turn-around time and best quality options in the industry. Once we receive your Quote, we prepare a custom quote and samples within 24 hours. Our quote form will indicate pricing, instructions and lead times in writing. Once we receive your order commitment, we will prepare a proof (physical proof via .jpg) typically within 24 hours. Once we receive your approval, we will ship your order in 8-10 business days.</p>

                            </div>
                        </div>
                                                   <div class="qaPanelCustomProductItem" id="item3">
                               <h4 class="" data-id="item3">Proofing</h4>
                               <div class="qaPanelCustomProductAns item3">

                                <p>Once you have completed our quote form and your custom design and submitted an order as instructed in our quote, we prepare a proof which is a physical proof sent as a .jpg for a woven version and a software layout for <a href="https://www.xpresalabels.com/printed-labels/"><u>printed satin</u></a> or printed hang tags.</p>
<p>Having a design ready as a digital file usually is the simplest way, but you can utilize our Design Tool to Create a simple design, or provide a MS Paint, Clear Sketch or the font written in an email with requested positioning and layout, and we will do our best to reproduce your proof.</p>
<p>We do our best to recreate, but with a woven process, there are some size limitations based on the size of your labels.</p>
<p>Physical samples can be sent out but will delay your project by 7 days. Our physical .jpgs will have very clear details with measurements.</p>

                            </div>
                        </div>
                                        </div>
            </div>
        <div>
            [woocommerce_reviews id="37591" ]        </div>


        
        <div><p>FREE SHIPPING, FREE SAMPLING and Promo Code FREESHIP</p>
</div>
                    <div class="proAddiImgCont">
                                    <div class="proAddiImgItems">
                        <a href="https://xpresalabels.com/site/wp-content/uploads/2020/10/hangtag.png" rel="gallery1" class="fancybox">
                            <img width="150" height="150" src="https://xpresalabels.com/site/wp-content/uploads/2020/10/hangtag-150x150.png" class="attachment-thumbnail size-thumbnail" alt="Hangtag" srcset="https://xpresalabels.com/site/wp-content/uploads/2020/10/hangtag-150x150.png 150w, https://xpresalabels.com/site/wp-content/uploads/2020/10/hangtag-324x324.png 324w, https://xpresalabels.com/site/wp-content/uploads/2020/10/hangtag-100x100.png 100w" sizes="(max-width: 150px) 100vw, 150px" />                        </a>
                    </div>
                                    <div class="proAddiImgItems">
                        <a href="https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag_c1.jpg" rel="gallery1" class="fancybox">
                            <img width="150" height="150" src="https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag_c1-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="Hangtag" srcset="https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag_c1-150x150.jpg 150w, https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag_c1-324x324.jpg 324w, https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag_c1-100x100.jpg 100w" sizes="(max-width: 150px) 100vw, 150px" />                        </a>
                    </div>
                                    <div class="proAddiImgItems">
                        <a href="https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag_c2.jpg" rel="gallery1" class="fancybox">
                            <img width="150" height="150" src="https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag_c2-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="Hangtag" srcset="https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag_c2-150x150.jpg 150w, https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag_c2-324x324.jpg 324w, https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag_c2-100x100.jpg 100w" sizes="(max-width: 150px) 100vw, 150px" />                        </a>
                    </div>
                                    <div class="proAddiImgItems">
                        <a href="https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag_c3.jpg" rel="gallery1" class="fancybox">
                            <img width="150" height="150" src="https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag_c3-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="Hangtag" srcset="https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag_c3-150x150.jpg 150w, https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag_c3-324x324.jpg 324w, https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag_c3-100x100.jpg 100w" sizes="(max-width: 150px) 100vw, 150px" />                        </a>
                    </div>
                                    <div class="proAddiImgItems">
                        <a href="https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag_c4.jpg" rel="gallery1" class="fancybox">
                            <img width="150" height="150" src="https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag_c4-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="Hangtag" srcset="https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag_c4-150x150.jpg 150w, https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag_c4-324x324.jpg 324w, https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag_c4-100x100.jpg 100w" sizes="(max-width: 150px) 100vw, 150px" />                        </a>
                    </div>
                            </div>
            </div>
</div>
</div>
</div>
</section>




<script type="text/javascript" src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/jqupload/colorpicker.js"></script>
<script src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/jqupload/html2canvas.js"></script>
<script src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/jqupload/ion.rangeSlider.min.js"></script>
<script src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/assets/js/pluginScript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script>
<script type="text/javascript" src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/assets/js/pdf.js"></script>
<script type="text/javascript" src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/assets/js/pdf.worker.js"></script>

<script>
    var baseRates = {
        1000:0.36, 2000:0.25, 3000:0.20, 5000:0.18, 10000:0.13,     }

    var recommendVals = [];
                recommendVals.push(1);
                    recommendVals.push('');
                    recommendVals.push(1);
                    recommendVals.push('');
                    recommendVals.push(1);
                    recommendVals.push('');
                    recommendVals.push(1);
                    recommendVals.push('');
                    recommendVals.push('');
                    recommendVals.push('');
                    recommendVals.push('');
                    recommendVals.push('');
                //console.log(recommendVals);

    const baseRatesHolder = {
        100:1.1, 200:0.70, 300:0.50, 500:0.4, 1000:0.22, 2000:0.15, 3000:0.12, 5000:0.07, 10000:0.055, 20000:0.05, 25000:0.05, 50000:0.04,     }

    var baseIncrate = {
        100:0.01, 200:0.0035, 300:0.003, 500:0.003, 1000:0.003, 2000:0.003, 3000:0.003, 5000:0.003, 10000:0.003, 20000:0.002, 25000:0.002, 50000:0.002,     }

    var extraColors = {
        100:10, 200:10, 300:12, 500:12, 1000:12, 2000:13, 3000:15, 5000:15, 10000:25, 20000:50, 25000:75, 50000:75,     }

    var heatSealRate = {
        100:0.15, 200:0.15, 300:0.10, 500:0.08, 1000:0.05, 2000:0.04, 3000:0.03, 5000:0.02, 10000:0.015, 20000:0.01, 25000:0.01, 50000:0.01,     }

    var satinRates = {
        100:0.05, 200:0.04, 300:0.04, 500:0.03, 1000:0.02, 2000:0.02, 3000:0.015, 5000:0.012, 10000:0.01, 20000:0.008, 25000:0.006, 50000:0.005,     }

    var damaskRates = {
        100:0.10, 200:0.05, 300:0.05, 500:0.04, 1000:0.03, 2000:0.03, 3000:0.02, 5000:0.022, 10000:0.02, 20000:0.015, 25000:0.012, 50000:0.01,     }

    var increasedRates = {};
    var designSelection = {};
    var iconAdhesive = {};
    var extraColorHolder = {},
    flagD = 'ok';

    function isEmpty(obj) {
        for (var prop in obj) {
            if (obj.hasOwnProperty(prop))
                return false;
        }

        return true;
    }

    function setPricingTable() {
        var selectedQuantity = document.getElementById('totalquantity').value;
        if (selectedQuantity == '') {
            selectedQuantity = 100;
        }

        var priceChart = "<tr><td colspan='3'>There is some ERROR !! Please check after some time. </td></tr>";
        var priceChartData = '';

        if (isEmpty(increasedRates)) {

            var i = 0;
            for (var baseQuantity in baseRates) {

                if (baseQuantity == selectedQuantity) {
                    var selectedDisplay = "checked";
                } else {
                    var selectedDisplay = " ";
                }
                var highlightClass = recommendVals[i] ? 'recommended' : '';
                priceChartData += '<tr class="' + highlightClass +
                '"><td width="20"><label class="customRadio"><input name="quantityhere" id="priceChartData_' + i +
                '" type="radio" value="' + baseQuantity + '" ' + selectedDisplay + ' onchange="selectquantity(' +
                baseQuantity + ',' + (baseRates[baseQuantity]).toFixed(3) +
                ')"><span class="checkmark"></span></label></td><td>' + baseQuantity + '</td><td width="20%">$' + (
                    baseRates[baseQuantity]).toFixed(3) + '</td></tr>';
                i++;
            }
            priceChart = priceChartData;
        } else {

            var i = 0;
            for (var baseQuantity in increasedRates) {
                if (baseQuantity == selectedQuantity) {
                    var selectedDisplay = "checked";
                } else {
                    var selectedDisplay = " ";
                }
                priceChartData +=
                '<tr><td width="20"><label class="customRadio"><input name="quantityhere" id="priceChartData_' + i +
                '" type="radio" value="' + baseQuantity + '" ' + selectedDisplay + ' onchange="selectquantity(' +
                baseQuantity + ',' + (increasedRates[baseQuantity]).toFixed(3) +
                ')"><span class="checkmark"></span></label></td><td>' + baseQuantity + '</td><td width="20%">$' + (
                    increasedRates[baseQuantity]).toFixed(3) + '</td></tr>';
                i++;
            }
            priceChart = priceChartData;
        }


        document.getElementById('priceContainerFull').innerHTML = priceChart;

        if (isEmpty(increasedRates)) {
            var x = baseRates[selectedQuantity];
        } else {
            var x = increasedRates[selectedQuantity];
        }

    }

    function invertColor(hex, bw) {
        if (hex.length === 3) {
            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
        }
        if (hex.length !== 6) {
            throw new Error('Invalid HEX color.');
        }
        var r = parseInt(hex.slice(0, 2), 16),
        g = parseInt(hex.slice(2, 4), 16),
        b = parseInt(hex.slice(4, 6), 16);
        if (bw) {
                        // http://stackoverflow.com/a/3943023/112731
            return (r * 0.299 + g * 0.587 + b * 0.114) > 186 ?
            '#000000' :
            '#FFFFFF';
        }
                    // invert color components
        r = (255 - r).toString(16);
        g = (255 - g).toString(16);
        b = (255 - b).toString(16);
                    // pad each with zeros and return
        return "#" + padZero(r) + padZero(g) + padZero(b);
    }

    jQuery(document).ready(function() {
        document.getElementById("sliderwidth").value = document.getElementById("loadwidth").value;
        document.getElementById("sliderhight").value = document.getElementById("loadheight").value;

        setPricingTable();

        selectThickness('.imgWrapW.default', '300gr', 0);
        selectSideOptions('#printOptions .default', 'One Sided');
        selectHoles('#holePunchs .default', '1/8', 0);
        selectHoleLocation('#holeLocations .default', 'Left - Center');
        selectSurface('#Surfaces .default', 'Flat', 0);

        jQuery('#pantoneBG').ColorPicker({

            onShow: function(colpkr) {
                jQuery(colpkr).fadeIn(500);
                return false;
            },
            onHide: function(colpkr) {
                jQuery(colpkr).fadeOut(500);
                return false;
            },
            onChange: function(hsb, hex, rgb) {
                jQuery('#pantoneBG').css('backgroundColor', '#' + hex);
                jQuery('#pantoneBG').css('color', invertColor(hex, 'true'));
                document.getElementById('userbgcolor').value = hex;
                jQuery('#pantoneBG').val("RGB: " + rgb.r + ',' + rgb.g + ',' + rgb.b);

            },
            onHide: function(hsb, hex, rgb, el) {
                submitDesign(1);
            }

        });
        jQuery('#pantoneText').ColorPicker({

            onShow: function(colpkr) {
                jQuery(colpkr).fadeIn(500);
                return false;
            },
            onHide: function(colpkr, el) {
                jQuery(colpkr).fadeOut(500);

                return false;
            },
            onChange: function(hsb, hex, rgb) {
                jQuery('#pantoneText').css('backgroundColor', '#' + hex);
                jQuery('#pantoneText').css('color', invertColor(hex, 'true'));
                document.getElementById('usertextcolor').value = hex;

                document.getElementById('usertextcolorName').value = 'Custom';
                jQuery('#pantoneText').val("RGB: " + rgb.r + ',' + rgb.g + ',' + rgb.b);
            }
        });

        jQuery(document).on('click', '#designShow', function() {
            var htm = jQuery('.productPrevImg').html();
            jQuery.fancybox.open(
                '<div class="pop-preview"><div class="productPrevImg woven_label woven_labelcfv">' +
                htm + '</div></div>');
        });


    });

    function labelSizingSelect(_this, lid, lw, lh, lxp, withPx) {
        jQuery(_this).addClass('selected').siblings().removeClass('selected');
        jQuery('#slwidth').text(lw);
        jQuery('#slheight').text(lh);
        jQuery('input#sliderwidth').val(lw * 0.75);
        jQuery('input#sliderhight').val(lh * 0.75);
        submitDesign(1);

    }

    function selectcolor(valc, valcn, d) {
        jQuery(d).addClass('selected').siblings().removeClass('selected');
        document.getElementById("userbgcolor").value = valc;
        document.getElementById("backlabelcol").innerHTML = valcn;
        document.getElementById("custom_data_2").value = valcn;
        if (document.getElementById("mypdfandcartimgdiv").length > 0) document.getElementById("mypdfandcartimgdiv").style
            .backgroundColor = valcn;

        colorval = valc;
        submitDesign(1);

        if (document.getElementById("pantoneBG")) {
            jQuery('#pantoneBG').attr('style', '');
            jQuery('#pantoneBG').val('');
        }
        (jQuery('#displaydesignnew_bck_vw_wrp').hasClass('hide') == false) ? madeToCanvas(2): '';
    }

    function selecttextcolor(valtxcolo, valtxcolon, d) {
        jQuery(d).addClass('selected');
        jQuery('#label-sizes').show();
        jQuery('.irs-slider').click();
        jQuery('#label-sizes').hide();

        if (valtxcolo == '') {
            valtxcolo = document.getElementById("usertextcolor").value;
            valtxcolon = document.getElementById('usertextcolorName').value
        }



        setofColor = document.getElementById("usertextcolorSet").value;
        setofColorCount = document.getElementById("usertextcolorSetCount").value;
        setofColorCount = parseInt(setofColorCount);
        document.getElementById("custom_data_3").value = valtxcolon;


        if (setofColorCount < 7) {
            stSearch = setofColor.indexOf(valtxcolo);

            if (stSearch != -1) {
                document.getElementById("coloColorErrorMsg").innerHTML =
                "Color already exists, Please select different color.";
            } else {
                document.getElementById("coloColorErrorMsg").innerHTML = "";
                setofColorCount = setofColorCount + 1;
                if (setofColor == '') {
                    setofColor = '#' + valtxcolo;
                } else {
                    setofColor = setofColor + ' #' + valtxcolo;
                }

                document.getElementById("usertextcolorSet").value = setofColor;
                document.getElementById("usertextcolorSetCount").value = setofColorCount;
                var valtxcoloHas = "#" + valtxcolo;
                spid = valtxcolo + setofColorCount
                var secColor = "<span data-arr='" + valtxcolo + "' class='selectedColorItem' id='" + spid +
                "' onclick=removeSelectedColor('" + valtxcoloHas + "','" + spid +
                "')><span class='selectedColorItemColor' style='background:#" + valtxcolo +
                "'></span><span class='selectedColorItemName'>" + valtxcolon + "</span></span>";

                jQuery('#selectedColors').append(secColor);
                document.getElementById("coloColorErrorMsg").innerHTML = '';

                var secColordisplay = document.getElementById("textlabelcol").innerHTML;
                if (secColordisplay == 'N/A') {
                    secColordisplay = '';
                }
                secColordisplay = secColordisplay + "<span id='" + spid +
                "display' class='selectedColorItemColor' style='background:#" + valtxcolo + "'></span>";



                document.getElementById("usertextcolor").value = valtxcolo;
                document.getElementById("textlabelcol").innerHTML = secColordisplay;

            }

            extraColorHolder['setofColor'] = true;

            for (key in baseRates) {
                if (setofColorCount > 2) {

                    if (designSelection['labelType']) {

                    } else {
                        designSelection[key] = 0;
                    }

                    if (iconAdhesive['ironAdhesive']) {

                    } else {
                        iconAdhesive[key] = 0;
                    }

                    baseRates[key] = baseRatesHolder[key] + extraColors[key] + designSelection[key] + iconAdhesive[key];
                    extraColorHolder[key] = extraColors[key];

                } else {
                    baseRates[key] = baseRatesHolder[key];
                }
            }

        } else {
            document.getElementById("coloColorErrorMsg").innerHTML =
            "Maximum 7 color are allowed, delete some color by clicking above.";
        }
    }

    function removeSelectedColor(val, spid) {
        setofColor = document.getElementById("usertextcolorSet").value;
        setofColorCount = document.getElementById("usertextcolorSetCount").value;

        jQuery('span.colorContainer.selected[data-arr="' + val.replace('#', '') + '"]').removeClass('selected');
        var nval = val;
        var nwsetofColor = setofColor.replace(val, '');
        nwsetofColor = nwsetofColor.replace(/\s+/g, ' ');
        document.getElementById("usertextcolorSet").value = nwsetofColor;

        setofColorCount = document.getElementById("usertextcolorSetCount").value;
        setofColorCount = parseInt(setofColorCount);

        setofColorCount = setofColorCount - 1;

        document.getElementById("usertextcolorSetCount").value = setofColorCount;

        jQuery("#" + spid).remove();
        jQuery("#" + spid + "display").remove();

        if (setofColorCount < 7) {
            extraColorHolder['setofColor'] = true;

            for (key in baseRates) {
                if (setofColorCount > 2) {

                    if (designSelection['labelType']) {

                    } else {
                        designSelection[key] = 0;
                    }
                    if (iconAdhesive['ironAdhesive']) {

                    } else {
                        iconAdhesive[key] = 0;
                    }

                    baseRates[key] = baseRatesHolder[key] + extraColors[key] + designSelection[key] + iconAdhesive[key];
                    extraColorHolder[key] = extraColors[key];

                } else {
                    baseRates[key] = baseRatesHolder[key];
                }
            }

            document.getElementById("coloColorErrorMsg").innerHTML = "";
        }

    }

    function selectshape(val, useimgwidth, userimgheight, valclass, valname, ds) {
                    //alert();
                    //jQuery(ds).addClass('selected').siblings().removeClass('selected');
        jQuery(ds).parents().eq(1).addClass('selected').siblings().removeClass('selected');

        if (document.getElementById("setselectsize")) {
            document.getElementById("setselectsize").value = val;
        }

        document.getElementById("selectedwidth").value = useimgwidth;
        document.getElementById("selectedheight").value = userimgheight;
                    //document.getElementById("labelclassid").value = valclass;
        document.getElementById("cutnfolddiv").innerHTML = valname;
        document.getElementById("cutnfolddivforajax").value = valname;
        document.getElementById("custom_data_6").value = valname;

        if (document.getElementById("userbgcolor")) {
            var colorval = document.getElementById("userbgcolor").value;
        }

        jQuery('.productPrevImg').attr('class', '').addClass('productPrevImg ' + valclass);
        valname === 'Circle' ? jQuery('.displaydesignnew_bck_vw').addClass('Circle_h') : jQuery('.displaydesignnew_bck_vw')
        .removeClass('Circle_h');
        submitDesign(1);

    }

    function selectFrameType(foldopn, foldname, foldprice) {
        document.getElementById("labelfold").innerHTML = foldname;
        document.getElementById("foldoptionsprice").value = foldprice;
    }

    function selectquantity(valquantity, vareachunit) {
                    //console.log(vareachunit);
        if (valquantity != '') {

            (undefined !== vareachunit) ? document.getElementById("priceperlabel1").innerHTML = vareachunit.toFixed(2): '';
            document.getElementById("unitpricehere").value = vareachunit;

            if (valquantity == 'ProofOnly' || valquantity == "FreeSamplePacket") {
                vartotalprice = parseFloat(vareachunit);
                vartotalprice1 = parseFloat(vartotalprice);
                document.getElementById("custom_data_8").value = valquantity;
                document.getElementById("quantity1").innerHTML = 10;
                document.getElementById("totalquantity").value = 10;
                document.getElementById("custom_data_7").value = 10;
                document.getElementById("totalprice1").innerHTML = vareachunit;

                jQuery('#sub_totalprice1').text(vartotalprice1);
                jQuery('span#priceAdded').each(function() {
                    var addOnPrice = parseFloat(jQuery(this).text());
                    vartotalprice1 = vartotalprice1 + addOnPrice;
                });
                document.getElementById("totalpricelabeladd2crt").value = vartotalprice1;
                document.getElementById("totalprice1").innerHTML = vartotalprice1.toFixed(2);
            } else {
                vartotalprice = parseFloat(valquantity) * parseFloat(vareachunit);
                vartotalprice1 = parseFloat(vartotalprice);
                document.getElementById("quantity1").innerHTML = valquantity;
                document.getElementById("totalquantity").value = valquantity;
                document.getElementById("custom_data_7").value = valquantity;

                jQuery('#sub_totalprice1').text(vartotalprice1);
                jQuery('span#priceAdded').each(function() {
                    var addOnPrice = parseFloat(jQuery(this).text());
                    vartotalprice1 = vartotalprice1 + addOnPrice;
                });
                document.getElementById("totalpricelabeladd2crt").value = vartotalprice1;
                document.getElementById("totalprice1").innerHTML = vartotalprice1.toFixed(2);
            }

            if (jQuery('input#printOptionChosen').val() == 'Both Sided' && jQuery('#addOnForBack').length > 0) {
                jQuery('#addOnForBack').remove();
                jQuery('#tttl').before(
                    '<div class="productPrevContRow" id="addOnForBack"> <span class="productPrevContRowTitle">For Back printing:</span> <span class="productPrevContRowDes">x2</span></span> </div>'
                    );
                var rsltPrice = vartotalprice1 * 2;
                jQuery('#totalpricelabeladd2crt').val(rsltPrice);
                jQuery('#totalprice1').text(rsltPrice);
            }
        }

        submitDesign(1);
    }

    function designSendMethod(mdtd) {

        if (mdtd == 'email') {
            jQuery('.file_upload').hide(100);
            jQuery('#emailArea').show(100);
        } else if (mdtd == 'upload') {
            jQuery('.file_upload').show(100);
            jQuery('#emailArea').hide(100);

        }

    }

    function priceandallgen(vn) {
        var1 = document.getElementById("custom_data_1").value;
        var2 = document.getElementById("custom_data_2").value;
        var3 = document.getElementById("custom_data_3").value;
        var4 = document.getElementById("custom_data_4").value;
        var5 = document.getElementById("custom_data_5").value;
        var6 = document.getElementById("custom_data_6").value;
        var7 = document.getElementById("custom_data_7").value;
        var8 = document.getElementById("custom_data_8").value;
        var9 = document.getElementById("custom_data_9").value;
        var10 = document.getElementById("custom_data_10").value;

        var materialChosen = jQuery('#materialTypeChosen').val();
        var thickChosen = jQuery('#thickChosen').val();
        var printOptionChosen = jQuery('#printOptionChosen').val();
        var holePunchChosen = jQuery('#holePunchChosen').val();
        var holeLocation = jQuery('#holeLocation').val();
        var stringColorChosen = jQuery('#stringColorChosen').val();
        var safetyPin = jQuery('#safetyPin').val();
        var grommetsChosen = jQuery('#grommetsChosen').val();
        var foilChosen = jQuery('#foilChosen').val();
        var surfaceChosen = jQuery('#surfaceChosen').val();
        var sizetag = jQuery('#sizetag').val();

        totalpricelabeladd2crt = document.getElementById("totalpricelabeladd2crt").value;

        var dataURL;
        if (jQuery('#displaydesignnew_bck_vw_wrp').hasClass('show')) {

            var canvasFront = document.getElementById('myCanvas');


            var newCanvas = document.createElement('canvas');
            newCanvas.id = 'newCanvas';
            newCanvas.width = canvasFront.width;
            newCanvas.height = canvasFront.height * 2 + 10;
            var ctxN = newCanvas.getContext('2d');
            ctxN.fillStyle = "#FFF";
            ctxN.fillRect(0, 0, canvasFront.width, canvasFront.height);
            ctxN.drawImage(canvasFront, 0, 0);

            var ctxN2 = newCanvas.getContext('2d');
            var canvasBack = document.getElementById('myCanvas_back');
            ctxN2.drawImage(canvasBack, 0, canvasBack.height);

                        //ctxF.drawImage(ctxB, canvasFront.width, canvasFront.height*2);

            dataURL = newCanvas.toDataURL("image/png");
                        //var link = document.createElement('a');
                        //link.download = "merged.png";
                        //link.href = newCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                        //link.click();
        } else {
            dataURL = '';
        }

        jQuery.ajax({
            url: 'https://xpresalabels.com/site/wp-admin/admin-ajax.php',
            type: 'post',
            data: {
                action: 'my_action_hangtag_custom_add2cart',
                ctsmdate1: var1,
                ctsmdate2: var2,
                ctsmdate3: var3,
                ctsmdate4: var4,
                ctsmdate5: var5,
                ctsmdate6: var6,
                ctsmdate7: var7,
                ctsmdate8: var8,
                ctsmdate9: var9,
                ctsmdate10: var10,
                totalpricelabeladd2crt: totalpricelabeladd2crt,
                materialChosen: materialChosen,
                thickChosen: thickChosen,
                printOptionChosen: printOptionChosen,
                holePunchChosen: holePunchChosen,
                holeLocation: holeLocation,
                stringColorChosen: stringColorChosen,
                safetyPin: safetyPin,
                grommetsChosen: grommetsChosen,
                foilChosen: foilChosen,
                surfaceChosen: surfaceChosen,
                sizetag: sizetag,
                imgMerged: dataURL
            },
            beforeSend: function() {

            },
            success: function(data) {
                data = JSON.parse(data);
                console.log(data);
                if (data == 'fail') {
                    alert('No records found');
                } else {
                    jQuery('#hereallwillchnage').html(data.html);
                    if (data.buyNowLink != '') {
                        jQuery('input[name="buyLink"]').val(data.buyNowLink);
                        jQuery('input[value="Download Quote"]').removeClass('hide');
                        jQuery('#iha5').remove();
                    }
                    if (vn != 'sbmtQT') {
                                    //jQuery('.designtoolbutton').click();
                        jQuery('button[value="37591"]').click();
                                    //jQuery.get('https://www.xpresalabels.com/?post_type=product&add-to-cart=37591', function() {});
                    }


                }

                console.log(flagD);
            }
        });
    }

    function priceandallgenanother() {
        var1 = document.getElementById("custom_data_1").value;
        var2 = document.getElementById("custom_data_2").value;
        var3 = document.getElementById("custom_data_3").value;
        var4 = document.getElementById("custom_data_10").value;
        var5 = document.getElementById("custom_data_9").value;
        var6 = document.getElementById("custom_data_6").value;
        var7 = document.getElementById("totalpricelabeladd2crt").value;

        jQuery.ajax({
            url: 'https://xpresalabels.com/site/wp-admin/admin-ajax.php',
            type: 'post',
            data: {
                action: 'my_action_wovencustom_add2cart',
                ctsmdate1: var1,
                ctsmdate2: var2,
                ctsmdate3: var3,
                ctsmdate4: var4,
                ctsmdate5: var5,
                ctsmdate6: var6,
                ctsmdate7: var7,
                ctsmdate8: var8,
                ctsmdate9: var9,
                ctsmdate10: var10,
                totalpricelabeladd2crt: totalpricelabeladd2crt
            },
            beforeSend: function() {

            },
            success: function(data) {
                if (data == 'fail') {
                    alert('No records found');
                } else {
                    jQuery('#hereallwillchnage').html(data);
                                //jQuery('.designtoolbutton').click();
                    jQuery('button[value="37591"]').click();
                    alert('Please wait while the page is redirect');

                    jQuery.get('https://www.xpresalabels.com/?post_type=product&add-to-cart=37591',
                        function() {});
                    window.location.assign("https://www.xpresalabels.com/woven-label-custom-quote/");
                }
            }
        });
    }

                //to save the canvas image
    function save_img(data) {
                    //ajax method.
        jQuery.post('https://www.xpresalabels.com/save_jpg.php', {
            data: data
        }, function(res) {
                        //if the file saved properly, trigger a popup to the user.
            if (res != '') {

            } else {

            }
        });
    }

    function closegenimage(cnvs) {
        jQuery('#drop-area').removeClass('dropareadrag');
        document.getElementById('drop-area').innerHTML = '<h3 class="drop-text">Drag and Drop Images Here</h3>';
                    //console.log(cnvs);
        cnvs !== undefined ? jQuery('.file_upload').after('<canvas id="the-canvas" style="display:none"></canvas>') : '';
    }

    function previewFile(n) {
        jQuery('#changingValueOf').val(n);
        var imgcrtd;
        var preview = (n == 1) ? document.querySelector('#displaydesign') : document.querySelector(
            '#displaydesignnew_bck_vw');
        var file = document.querySelector('input[type=file]').files[0];
        var fileSize = file.size;
        let fileSizeLimit = 7000000;
        const imageTypes = ['image/gif','image/GIF', 'image/jpeg','image/JPEG', 'image/png','image/PNG'];
        fileSizeLimit = (imageTypes.includes(file.type)) ? 7000000 : fileSizeLimit;
        let fileSizeLimitInMB = fileSizeLimit / 1000000;
                    //console.log(fileSize);
        if (fileSize >= fileSizeLimit) {
            alert('Your filesize is too big, please use a file less than ' + fileSizeLimitInMB + 'Mb');
            return;
        }

        var reader = new FileReader();

        reader.onloadend = function() {
            preview.src = reader.result;
        }

        if (file) {
                        /////start loader
            document.getElementById('div-drop-area' + n).innerHTML =
            '<img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/tenor.gif" id="ldr">';
            //var type = file['name'].split('.')[1];
            var type = file.name.split('.').pop().toLowerCase();

            if (n == 1 && jQuery('div#selectedColors > span').length > 0) {
                jQuery('div#selectedColors > span').each(function() {
                    jQuery(this).click();
                });
            }

            if (type == 'pdf') {
                jQuery('img#upImg' + n).remove();
                jQuery('#div-drop-area' + n).addClass('loading');
                            /********************* pdf to canvas ***********************/

                var __PDF_DOC,
                __CURRENT_PAGE,
                __TOTAL_PAGES,
                __PAGE_RENDERING_IN_PROGRESS = 0,
                __CANVAS = jQuery('canvas#the-canvas').get(0),
                __CANVAS_CTX = __CANVAS.getContext('2d');
                jQuery('canvas#the-canvas').show();

                function showPDF(pdf_url) {
                    PDFJS.getDocument({
                        url: pdf_url
                    }).then(function(pdf_doc) {
                        __PDF_DOC = pdf_doc;
                        __TOTAL_PAGES = __PDF_DOC.numPages;
                        showPage(1);

                    }).catch(function(error) {
                        alert(error.message);
                    });;
                }

                function showPage(page_no) {
                    __PAGE_RENDERING_IN_PROGRESS = 1;
                    __CURRENT_PAGE = page_no;

                                // Disable Prev & Next buttons while page is being loaded
                    jQuery("#pdf-next, #pdf-prev").attr('disabled', 'disabled');

                                // Fetch the page
                    __PDF_DOC.getPage(page_no).then(function(page) {
                                    // As the canvas is of a fixed width we need to set the scale of the viewport accordingly
                        var scale_required = __CANVAS.width / page.getViewport(1).width;

                                    // Get viewport of the page at required scale
                        var viewport = page.getViewport(scale_required);

                                    // Set canvas height
                        __CANVAS.height = viewport.height;

                        var renderContext = {
                            canvasContext: __CANVAS_CTX,
                            viewport: viewport
                        };

                                    // Render the page contents in the canvas
                        page.render(renderContext).then(function() {
                            __PAGE_RENDERING_IN_PROGRESS = 0;
                        });
                    });
                }

                if (['application/pdf'].indexOf(jQuery("input#drop-area" + n).get(0).files[0].type) == -1) {
                    alert('Error : Not a PDF');
                    return;
                }
                var start = new Date().getTime();
                showPDF(URL.createObjectURL(jQuery("input#drop-area" + n).get(0).files[0]));
                            //console.log('df '+n);
                jQuery('div#div-drop-area' + n).html(
                    '<div class="droppedimgwrapper"><a class="closebutton" href="javascript:void(0);" onclick="closegenimage(1);">X</a></div><input type="hidden" value="" id="imgurl' +
                    n + '">');
                jQuery('canvas#the-canvas').appendTo('div#div-drop-area' + n + ' > .droppedimgwrapper');
                var tm = new Date().getTime() - start;

                            /********************* pdf to canvas ***********************/
                jQuery('.windowBody').prepend('<div class="imgDesignPlaceholder"></div>');
                jQuery('body').addClass('plwtlding');
                setTimeout(function() {
                                ///////////ajax
                    if (jQuery('canvas#the-canvas').is(":visible")) {
                        var sd = document.getElementById('the-canvas');
                                    //console.log(sd);
                        var dataURL = sd.toDataURL('image/jpeg', 1.0);

                    } else {
                        dataURL = '';
                    }
                                //console.log(dataURL);
                                var form_data = new FormData(); // Creating object of FormData class
                                form_data.append("canvasImage",
                                    dataURL); // Appending parameter named file with properties of file_field to form_data
                                form_data.append("n",
                                    n); // Appending parameter named file with properties of file_field to form_data
                                jQuery.ajax({
                                    url: "https://xpresalabels.com/site/upload_image.php?width1=" + userwidthup +
                                    "&height1=" + userheightup + "&n=" + n,
                                    type: "POST",
                                    data: form_data,
                                    dataType: 'json',
                                    enctype: 'multipart/form-data',
                                    processData: false, // tell jQuery not to process the data
                                    contentType: false, // tell jQuery not to set contentType
                                    cache: false,
                                    success: function(data) {
                                        console.log(data);
                                        var img = new Image();
                                        img.src = data.imgurl;
                                        img.onload = function() {
                                            vibrantCreateSwatches1(data.colors, n);
                                            var coloursArray = data.hexs;
                                            //console.log(coloursArray);
                                            jQuery('.imgDesignPlaceholder').remove();
                                            jQuery('body').removeClass('plwtlding');
                                            jQuery('div#displaydesign img').attr('src', data.imgurl);
                                            submitDesign(1);
                                        };

                                        jQuery('#div-drop-area' + n).removeClass('loading');
                                    }
                                });

                            }, 1000);

            } else if (type == 'jpg' || type == 'jpeg' || type == 'png') {
                var userwidthup = document.getElementById('selectedwidth').value;
                var userheightup = document.getElementById('selectedwidth').value;

                            var file_data = jQuery("#drop-area" + n).prop("files")[0]; // Getting the properties of file from file field
                            var form_data = new FormData(); // Creating object of FormData class
                            form_data.append("userImage",
                                file_data); // Appending parameter named file with properties of file_field to form_data
                            form_data.append("n", n); // Appending parameter named file with properties of file_field to form_data
                            //Adding extra parameters to form_data

                            jQuery.ajax({
                                url: "https://xpresalabels.com/site/upload_image.php?width1=" + userwidthup + "&height1=" +
                                userheightup + "&n=" + n,
                                type: "POST",
                                dataType: 'json',
                                data: form_data,
                                enctype: 'multipart/form-data',
                                processData: false,
                                contentType: false,
                                cache: false,
                                success: function(data) {
                                    //console.log(data);
                                    jQuery('#div-drop-area' + n).append(data.html);
                                    var img = new Image();
                                    img.src = jQuery('#imgurl' + n).val();
                                    img.onload = function() {
                                        jQuery('#ldr').remove();
                                        vibrantCreateSwatches1(data.colors, n);
                                        madeToCanvas(n);

                                    };
                                }
                            });

                            reader.readAsDataURL(file);
                        } else {
                            jQuery('div#div-drop-area' + n).html('<h3 class="drop-text">Drag and Drop Images Here</h3>');
                            alert('File not supported. Allowed file format: .jpg, .jpeg, png, pdf. Please mail us for other types.');
                            return false;
                        }

                    } else {
                        preview.src = "";
                    }

                    function createcanvas(url) {
                        //console.log('ankan');
                        // Loaded via <script>tag, create shortcut to access PDF.js exports.
                        var pdfjsLib = window['pdfjs-dist/build/pdf'];

                        // The workerSrc property shall be specified.
                        pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

                        // Asynchronous download of PDF
                        var loadingTask = pdfjsLib.getDocument(url);
                        loadingTask.promise.then(function(pdf) {
                            //console.log('PDF loaded');

                            // Fetch the first page
                            var pageNumber = 1;
                            pdf.getPage(pageNumber).then(function(page) {
                                //console.log('Page loaded');

                                var scale = 1.5;
                                var viewport = page.getViewport({
                                    scale: scale
                                });

                                // Prepare canvas using PDF page dimensions
                                var canvas = document.getElementById('the-canvas');
                                var context = canvas.getContext('2d');
                                canvas.height = viewport.height;
                                canvas.width = viewport.width;

                                // Render PDF page into canvas context
                                var renderContext = {
                                    canvasContext: context,
                                    viewport: viewport
                                };
                                var renderTask = page.render(renderContext);
                                renderTask.promise.then(function() {
                                    imgcrtd = canvas.toDataURL('image/png');
                                    jQuery('input#pdfsbmt').val(imgcrtd);
                                    jQuery('div#idwovencustom > img').attr('src', imgcrtd);
                                    //console.log('canvasurl '+n);
                                    jQuery('div#div-drop-area' + n).html(
                                        '<div class="droppedimgwrapper"><a class="closebutton" href="javascript:void(0);" onclick="closegenimage();">X</a><img id="upImg"' +
                                        n + ' src="' + imgcrtd + '"></div><input type="hidden" value="' +
                                        imgcrtd + '" id="imgurl' + n + '">');
                                    //jQuery('#pdfsubmit').submit();
                                });
                            });
                        }, function(reason) {
                            // PDF loading error
                            console.error(reason);
                        });
                    }
                }

                function vibrantCreateSwatches1(colors, n) {
                    //console.log(colors);
                    var swatchHtml = '<ul id="swatchColors">';
                    jQuery('div#div-drop-area' + n).append('<div class="ttlClrs">Total colors in image: <span>' + colors.length +
                        '</span></div>');

                    if (n == 1) {
                        for (var i = 0; i < colors.length; i++) {
                            swatchHtml += '<li class="colors' + i + '" count="' + colors[i].count + '" style="background-color:#' +
                            colors[i].hex + '"></li>';
                            selecttextcolor(colors[i].hex, colors[i].hex);
                        }
                    }


                    swatchHtml +=
                    '<span class="jy52s36">These are system detected pixelized colors present in your image. Price is implemented according to the number of the colors. If you want separate color(s) for your logo, or you think the colors are chosen more/less than the colors present in your image, please change and choose other color from "Select Logo Color" tab.<span onclick="removeExtra(this);">X</span></span>';
                    swatchHtml += '</ul>';
                    jQuery('div#div-drop-area' + n).append(swatchHtml);
                }

                function createFormData(image) {
                    var formImage = new FormData();
                    formImage.append('userImage', image[0]);
                    uploadFormData(formImage);
                    readURL(this);
                }

                function uploadFormData(formData) {
                    var userwidthup = document.getElementById('selectedwidth').value;
                    var userheightup = document.getElementById('selectedwidth').value;
                    jQuery.ajax({
                        url: "https://www.xpresalabels.com/upload_image.php?width1=" + userwidthup + "&height1=" + userheightup,
                        type: "POST",
                        data: formData,
                        contentType: false,
                        cache: false,
                        processData: false,
                        success: function(data) {
                            jQuery('#drop-area').html(data);
                        }
                    });
                }

                function readURL(input) {
                    if (input.files && input.files[0]) {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            $('#blah').attr('src', e.target.result);
                        }
                        reader.readAsDataURL(input.files[0]);
                    }
                }

                //Submit Ajax/////////////////////////////////////
                function submitDesign(v, d, vn) {

                    jQuery('.windowBody').addClass('loads');

                    jQuery('.windowBody').prepend("<div class='imgDesignPlaceholder'></div>");

                    var setselectsize = document.getElementById("setselectsize").value;
                    var selectedwidth = document.getElementById("selectedwidth").value;
                    var selectedheight = document.getElementById("selectedheight").value;
                    var sliderwidth = document.getElementById("sliderwidth").value;
                    var sliderhight = document.getElementById("sliderhight").value;
                    var userbgcolor = document.getElementById("userbgcolor").value;
                    var usertextcolor = document.getElementById("usertextcolor").value;
                    var selectwlebelt = document.getElementById("selectwlebelt").value;
                    //var irononadhesive = document.getElementById("irononadhesive").value;
                    //var labelclassid = document.getElementById("labelclassid").value;
                    //var sendcomments = document.getElementById("addicommvalue").value;
                    var totlquantityval = document.getElementById("totalquantity").value;
                    var eachunitpriceval = document.getElementById("unitpricehere").value;
                    var cutnfolddivforajaxsend = document.getElementById("cutnfolddivforajax").value;
                    var usertextcolorSet = document.getElementById("usertextcolorSet").value;
                    //document.getElementById("addicommvalue").value = document.getElementById("addicomm").value;

                    if (sliderwidth == '') {
                        sliderwidth = 1.5;
                    }
                    if (sliderhight == '') {
                        sliderhight = 1.5;
                    }
                    if (sliderwidth != '' && sliderhight != '') {
                        document.getElementById("custom_data_1").value = sliderwidth + 'X' + sliderhight;
                    }


                    jQuery('#displaydesignnew_bck').css({
                        'width': sliderwidth * 95 + 'px',
                        'height': sliderhight * 95 + 'px'
                    });


                    if (jQuery('canvas#the-canvas').is(':visible')) {
                        var destiCnv = document.getElementById('myCanvas');
                        var destiCtx = destiCnv.getContext('2d');
                        var sourceCanvas = document.getElementById('the-canvas');

                        destiCnv.width = sourceCanvas.clientWidth;
                        destiCnv.height = sourceCanvas.clientHeight;

                        document.getElementById('idwovencustom').style.width = sourceCanvas.clientWidth + 'px';
                        document.getElementById('idwovencustom').style.height = sourceCanvas.clientHeight + 'px';


                        destiCtx.drawImage(sourceCanvas, 0, 0);

                        var img = new Image();
                        img.src = 'https://xpresalabels.com/site/wp-content/plugins/xpresalabels/assets/images/pattern-overlay.png';

                        img.onload = function() {
                            var pat = destiCtx.createPattern(img, "repeat");
                            destiCtx.rect(0, 0, sourceCanvas.width, sourceCanvas.height);
                            destiCtx.fillStyle = pat;
                            destiCtx.fill();

                            jQuery('.imgDesignPlaceholder').remove();
                        }

                    } else {
                        //console.log(document.getElementById("sizetag").value);

                        var dataURL;
                        if (jQuery('#displaydesignnew_bck_vw_wrp').hasClass('hide') == false && jQuery(d).attr('id') == 'smbtBtn') {

                            var canvasFront = document.getElementById('myCanvas');


                            var newCanvas = document.createElement('canvas');
                            newCanvas.id = 'newCanvas';
                            newCanvas.width = canvasFront.width;
                            newCanvas.height = canvasFront.height * 2 + 10;
                            var ctxN = newCanvas.getContext('2d');
                            ctxN.fillStyle = "#FFF";
                            ctxN.fillRect(0, 0, canvasFront.width, canvasFront.height);
                            ctxN.drawImage(canvasFront, 0, 0);

                            var ctxN2 = newCanvas.getContext('2d');
                            var canvasBack = document.getElementById('myCanvas_back');
                            ctxN2.drawImage(canvasBack, 0, canvasBack.height);

                            //ctxF.drawImage(ctxB, canvasFront.width, canvasFront.height*2);

                            dataURL = newCanvas.toDataURL("image/png");
                            //var link = document.createElement('a');
                            //link.download = "merged.png";
                            //link.href = newCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                            //link.click();
                        } else {
                            dataURL = '';
                        }

                        jQuery.ajax({
                            url: 'https://xpresalabels.com/site/wp-admin/admin-ajax.php',
                            type: 'post',
                            data: {
                                action: 'my_action_hangtagcustomquote',
                                size: setselectsize,
                                selectedwidth: selectedwidth,
                                selectedheight: selectedheight,
                                sliderwidth: sliderwidth,
                                sliderhight: sliderhight,
                                backgroungcol: userbgcolor,
                                usertextcolor: usertextcolor,
                                selectwlebelt: selectwlebelt,
                                totlquantitysend: totlquantityval,
                                eachunitpricesend: eachunitpriceval,
                                cutnfolddivforaspdf: cutnfolddivforajaxsend,
                                usertextcolorSetpdf: usertextcolorSet,
                                holeclass: jQuery('.holeIcon').attr('class'),
                                sizetag: document.getElementById("sizetag").value,
                                imgMerged: dataURL
                            },
                            beforeSend: function() {

                            },
                            success: function(data) {

                                if (data == 'fail') {
                                    alert('No records found');
                                } else {
                                    data = JSON.parse(data);
                                    //console.log(data);
                                    jQuery('#displaydesign').html(data.html);
                                    jQuery('input[name="imagelogo"]').val(data.imgurl);

                                    (jQuery('#cutnfolddivforajax').val() == 'Circle') ? jQuery(
                                        '#idwovencustom, #idwovencustom img').css('border-radius', jQuery(
                                            'div#idwovencustom').width() / 2 + 'px'): jQuery(
                                        '#idwovencustom, #idwovencustom img').css('border-radius', 'none');

                                            setTimeout(function() {
                                                jQuery.get('https://xpresalabels.com/site/wp-content/plugins/xpresalabels/assets/js/cnvs.js',
                                                    function(data, status) {
                                                        html2canvas(jQuery("#idwovencustom"), {
                                                            onrendered: function(canvas) {
                                                                jQuery('#myCanvas').remove();
                                                                theCanvas = canvas;
                                                                canvas.id = 'myCanvas';
                                                                jQuery('#displaydesign')[0].after(canvas);

                                                                var c = document.getElementById("myCanvas");
                                                                var ctx = c.getContext("2d");
                                                                var img = new Image();
                                                                img.src =
                                                                'https://xpresalabels.com/site/wp-content/plugins/xpresalabels/assets/images/pattern-overlay.png';


                                                                img.onload = function() {
                                                                    var pat = ctx.createPattern(img,
                                                                        "repeat");
                                                                    ctx.rect(0, 0, c.width, c.height);
                                                                    ctx.fillStyle = pat;
                                                                    ctx.fill();

                                                                    if (jQuery('.productPrevImg')
                                                                        .hasClass('hangtag_circle')) {
                                                                        ctx.drawImage(img, 0, 0);
                                                                    ctx.globalCompositeOperation =
                                                                    'destination-in';
                                                                    ctx.beginPath();
                                                                    ctx.arc(c.width / 2, c.height /
                                                                        2, c.height / 2, 0, Math
                                                                        .PI * 2);
                                                                    ctx.closePath();
                                                                    ctx.fill();
                                                                }
                                                                madeToCanvas(1);

                                                                if (jQuery('canvas#myCanvas')
                                                                    .length > 0) {
                                                                    var ndata = canvas.toDataURL(
                                                                        'image/jpeg');
                                                                jQuery('#imgFromCanvas').val(
                                                                    ndata);
                                                            }

                                                            if (jQuery(
                                                                '#displaydesignnew_bck_vw > img'
                                                                ).attr('src') != '' &&
                                                                jQuery(
                                                                    '#displaydesignnew_bck_vw > img'
                                                                    ).attr('src') != 'undefined'
                                                                ) {
                                                                madeToCanvas(2);
                                                        }

                                                        jQuery('.imgDesignPlaceholder')
                                                        .remove();
                                                    }

                                                }
                                            });
});
}, 3000);

(v === 2) ? priceandallgen(vn): jQuery('.windowBody').removeClass('loads');;
}
}
});
}

jQuery('#' + document.getElementById("custom_data_6").value).show().siblings().not('.btn-grp, .panel-title').hide();

}

jQuery(document).ready(function() {

    /*** heading slider ***/
    jQuery('.panel-headings-wrapper').owlCarousel({
        loop: false,
        margin: 0,
        nav: true,
        dots: false,
        mouseDrag: false,
        responsive: {
            0: {
                items: 3
            },
            600: {
                items: 3
            },
            1000: {
                items: 5,
            },
            1200: {
                items: 5,
            },
            1400: {
                items: 5,
            }
        }
    });

    jQuery('.dwn-pdf-btn a').click(function() {
        jQuery("input[name=labelsize]").val(jQuery('#custom_data_1').val());
        jQuery("input[name=sizetagm]").val(jQuery('input#sizetag').val());
        jQuery("input[name=textcolor]").val(jQuery('#usertextcolorSet').text());
        jQuery("input[name=labelbackgroundcolor]").val(jQuery('#userbgcolor').val());
        jQuery("input[name=labeltotalprice]").val('USD' + jQuery('#totalpricelabeladd2crt').val());
        jQuery("input[name=label]").val(jQuery('#cutnfolddiv').text());

        jQuery("input[name='labmaterial']").val(jQuery('input#materialTypeChosen').val());
        jQuery("input[name='labthickness']").val(jQuery('#thickChosen').val());
        jQuery("input[name='labprintOption']").val(jQuery('#printOptionChosen').val());
        jQuery("input[name='labholePunch']").val(jQuery('#holePunchChosen').val());
        jQuery("input[name='labholeLocation']").val(jQuery('#holeLocation').val());
        jQuery("input[name='labsurface']").val(jQuery('#surfaceChosen').val());
        jQuery("input[name='labstring']").val(jQuery('#stringColorChosen').val());
        jQuery("input[name='labsafetypincolors']").val(jQuery('#safetyPin').val());
        jQuery("input[name='labgrommets']").val(jQuery('#grommetsChosen').val());
        jQuery("input[name='labfoils']").val(jQuery('#foilChosen').val());


        jQuery("input[name=Quantity]").val(jQuery('#quantity1').text());


        var dataURL;
        if (jQuery('#displaydesignnew_bck_vw_wrp').hasClass('show')) {

            var canvasFront = document.getElementById('myCanvas');


            var newCanvas = document.createElement('canvas');
            newCanvas.id = 'newCanvas';
            newCanvas.width = canvasFront.width;
            newCanvas.height = canvasFront.height * 2 + 10;
            var ctxN = newCanvas.getContext('2d');
            ctxN.fillStyle = "#FFF";
            ctxN.fillRect(0, 0, canvasFront.width, canvasFront.height);
            ctxN.drawImage(canvasFront, 0, 0);

            var ctxN2 = newCanvas.getContext('2d');
            var canvasBack = document.getElementById('myCanvas_back');
            ctxN2.drawImage(canvasBack, 0, canvasBack.height);

            //ctxF.drawImage(ctxB, canvasFront.width, canvasFront.height*2);

            dataURL = newCanvas.toDataURL("image/png");
            jQuery('input[name="imagelogo"]').val(dataURL);
            //var link = document.createElement('a');
            //link.download = "merged.png";
            //link.href = newCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
            //link.click();
        } else {
            dataURL = '';
        }

        //var bg = jQuery('div#idwovencustom > img').attr('src');

    });

    var options = "";
    if (options == '') {
        //selectshape('1','900','800','woven_label fold_left fold_right','End Fold - Left & Right', 'div#label-folds div.col-lg-4:first-child');
        selectshape('4', '800', '700', 'hangtag_square', 'Square',
            'div#label-folds .col-lg-4.col-md-4.col-sm-4.col-xs-6:first-child');
    } else {
        //console.log(options);
    }

    jQuery("#drop-area").on('dragenter', function(e) {
        e.preventDefault();
        jQuery(this).addClass('dropareadrag');

    });

    jQuery("#drop-area").on('dragover', function(e) {
        e.preventDefault();
    });

    jQuery("#drop-area").on('drop', function(e) {
        jQuery(this).removeClass('dropareadrag');
        document.getElementById('drop-area').innerHTML =
        "<img src='https://www.xpresalabels.com/wp-content/plugins/xpresalabels/images/tenor.gif' id='ldr'>";
        e.preventDefault();
        var image = e.originalEvent.dataTransfer.files;
        createFormData(image);
    });
    readURL(this);

    jQuery('#capture').click(function() {
        div_content = document.querySelector("#displaydesign")

        html2canvas(div_content).then(function(canvas) {
            data = canvas.toDataURL('image/jpeg');
            save_img(data);
        });
    });

    // jQuery('.panel-heading').click(function() {
    //     var trgt = jQuery(this).attr('data-target');
    //     jQuery('div[data-div="' + trgt + '"]').show().siblings().not(
    //         '.cart-sec, .guideArea, input[type="hidden"]').hide();
    //     setTimeout(function() {
    //         (flagD == 'ok') ? adjustImageRatio(): '';
    //     }, 100);
    //     submitDesign(1);
    // });

    //code to add validation on print label design order "Add to Cart" button
    jQuery('.designtoolbutton').click(function() {
        var custom_data_1 = document.getElementById("custom_data_1").value;
        var custom_data_2 = document.getElementById("custom_data_2").value;
        var custom_data_3 = document.getElementById("custom_data_3").value;
        var custom_data_4 = document.getElementById("custom_data_4").value;
        var custom_data_5 = document.getElementById("custom_data_5").value;
        var custom_data_6 = document.getElementById("custom_data_6").value;
        var custom_data_7 = document.getElementById("custom_data_7").value;
        var custom_data_8 = document.getElementById("custom_data_8").value;
        var custom_data_9 = document.getElementById("custom_data_9").value;
        var custom_data_10 = document.getElementById("custom_data_10").value;
        var sizetag = document.getElementById("sizetag").value;

        var materialChosen = jQuery('input#materialTypeChosen').val();
        var thicknessChosen = jQuery('input#thickChosen').val();
        var printOptionChosen = jQuery('input#printOptionChosen').val();
        var holePunchChosen = jQuery('input#holePunchChosen').val();
        var holeLocation = jQuery('input#holeLocation').val();
        var stringColorChosen = jQuery('input#stringColorChosen').val();
        var safetyPin = jQuery('input#safetyPin').val();
        var grommetsChosen = jQuery('input#grommetsChosen').val();
        var foilChosen = jQuery('input#foilChosen').val();
        var surfaceChosen = jQuery('input#surfaceChosen').val();

        var ajaxurl = 'https://xpresalabels.com/site/wp-admin/admin-ajax.php';

        jQuery.ajax({
            url: ajaxurl, //AJAX file path - admin_url('admin-ajax.php')
            type: "POST",
            data: {
                //action name
                action: 'wdm_add_user_custom_data_options',
                custom_data_1: custom_data_1,
                custom_data_2: custom_data_2,
                custom_data_3: custom_data_3,
                custom_data_4: custom_data_4,
                custom_data_5: custom_data_5,
                custom_data_6: custom_data_6,
                custom_data_7: custom_data_7,
                custom_data_9: custom_data_9,
                custom_data_10: custom_data_10,
                custom_data_8: custom_data_8,
                sizetag: sizetag,
                materialChosen: materialChosen,
                thicknessChosen: thicknessChosen,
                printOptionChosen: printOptionChosen,
                holePunchChosen: holePunchChosen,
                holeLocation: holeLocation,
                stringColorChosen: stringColorChosen,
                safetyPin: safetyPin,
                grommetsChosen: grommetsChosen,
                foilChosen: foilChosen,
                surfaceChosen: surfaceChosen,
            },
            async: false,
            success: function(data) {

            }
        });
    })

    submitDesign(1);
});

var scroll = false,
start_time, count = 0;

(scroll == false) ? jQuery('div#label-folds').prepend("<div class='imgDesignPlaceholder'></div>"): "";
var _scrolled = jQuery(this).scrollTop();
//var _scrolledDiv = jQuery('.aboutTesti').offset().top - jQuery('.aboutTesti').outerHeight();

jQuery(document).ready(function($){
    start_time = new Date().getTime();
    jQuery('.panel:not(.panel-primary)').css('display', 'none');
    scroll = true;
    jQuery('#priceChartData_0').click();

    /* Load folds */
    jQuery.ajax({
        url: 'https://xpresalabels.com/site/wp-admin/admin-ajax.php',
        type: 'post',
        cache: true,
        datattype: 'json',
        data: {
            action: 'load_shapes_hangtags',
            scroll: scroll

        },
        beforeSend: function() {

        },
        success: function(data) {
            //console.log(data);
            jQuery('#label-folds').html(data);
            showMore('hide', '#label-folds');

            //default shape select
            selectshape(4, '800', '700', 'hangtag_square', 'Square', '#label-folds .default');

            //equal height panels
            // var calH8 = jQuery('.previewWindow').height();
            // jQuery('.panel, .proPreview').css('height', calH8);

            loadFunction('load_Sizes_hangtag', '#label-sizes'); //load Custom Label Sizes
            loadFunction('load_materials', '#materials .materialSelection'); //load materials
            //loadFunction('load_backGroundColors', '#backGroundColors .colorSelection'); //load background colors
            loadFunction('load_thickness', '#thickness .thicknessSelection'); //load text colors
            loadFunction('load_backGroundColorsWC', '.colors_b'); //load Custom Label Sizes
            //loadFunction('load_logoColors', '.colors_l'); //load Custom Label Sizes
        }
    });
});


function loadFunction(action, selector) {
    jQuery.ajax({
        url: 'https://xpresalabels.com/site/wp-admin/admin-ajax.php',
        type: 'post',
        cache: true,
        datattype: 'json',
        data: {
            action: action
        },
        success: function(data) {
            jQuery(selector).html(data);

            (action == 'load_materials') ? selectMaterial('figure.materialSelect.default', 'Flat', 0): '';

            var options = "";
            if (options != '') {
                request_time = new Date().getTime() - start_time;
                jQuery(selector).imagesLoaded(function() {
                    addEditedOption(options);

                    (count === 1) ? setTimeout(function() {
                        jQuery('.loading').removeClass('loading');
                    }, request_time): '';
                    count = count + 1;
                });
            } else {
                jQuery('.loading').removeClass('loading');
            }
        }
    });
}

//all images loaded count function
(function($) {
    $.fn.extend({
        imagesLoaded: function(callback, cycling) {
            var i, ic,
            c = true,
            $this = $(this),
            t = $this.find('img').andSelf(),
            l = t.length,
            img = [];
            for (i = 0; i < l; i++) {
                if (t[i].tagName === "IMG") {

                    ic = ('fileSize' in t[i] && t[i].fileSize < 0 && t[i].count > 10) ? true : t[i]
                    .complete;

                    c = (c && ic && t[i].height !== 0); // complete flag

                    if (ic === false) {
                        img.push(t[i]);
                        t[i].count = (t[i].count || 0) + 1;
                    }
                }
            }
            if (c) {
                if (typeof callback === "function") {
                    callback();
                }
            } else {
                setTimeout(function() {
                    $(img).imagesLoaded(callback, true);
                }, 200);
            }
            // maintain chainability
            if (!cycling) {
                return $this;
            }
        }
    });
})(jQuery);

function nxt(d) {
    setTimeout(function() {
        (flagD == 'ok') ? adjustImageRatio(): '';
    }, 100);

    var parent = jQuery(d).closest(".panel").attr('data-div');
    jQuery('div[data-target="' + parent + '"]').parent().next().find('.panel-heading').click();

    var myDiv = jQuery(d).closest(".panel").next('.panel');
    myDiv.animate({
        scrollTop: 0
    }, "fast");

    var owl = jQuery('.panel-headings-wrapper');
    owl.trigger('next.owl.carousel');

    submitDesign(1);
}

function repair() {
    submitDesign(1);
}


 /* next */
function nxt_new() {
   var current_step=jQuery('#current_step').val();
   var next_step=parseInt(current_step)+1;

   var lavel_size_select=jQuery('#custom_data_1').val();
   if(lavel_size_select==''){
    alert('Please select size to proceed');
    jQuery('.panel-heading').removeClass('active-h');
    jQuery('.mobilestep1').addClass("active-h");
    jQuery('.step1').addClass("active-h");
    jQuery('.customLabelSizes').show();
    jQuery('.customLabelSizes').prev("h4").addClass("section-open");
    jQuery('html, body').animate({
       scrollTop: jQuery(".customLabelSizes").offset().top-300
   }, 1000);
    return false;
}



var current_step=jQuery('#current_step').val();
var next_step=parseInt(current_step)+1;

var materialType=jQuery('#materialTypeChosen').val();
var thickness=jQuery('#thickChosen').val();
if(materialType=='' && next_step>2){
  alert('Please select material type');
  jQuery('.panel-heading').removeClass('active-h');
  jQuery('.mobilestep2').addClass("active-h");
  jQuery('.step2').addClass("active-h");
  jQuery('.materials_section').show();
  jQuery('.materials_section').prev("h4").addClass("section-open");
  jQuery('html, body').animate({
   scrollTop: jQuery(".materials_section").offset().top-300
}, 1000);
  return false;
}
var custom_logo = jQuery('#drop-area1').val(); 
var imagetype = jQuery('input[name="uploadLogo"]:checked').val();
if(custom_logo=='' && next_step>2 && imagetype=='upload'){
    alert('Please upload your logo to proceed');
    jQuery('.panel-heading').removeClass('active-h');
    jQuery('.mobilestep2').addClass("active-h");
    jQuery('.step2').addClass("active-h");
    return false;
}

if(thickness=='' && next_step>2){
    alert('Please select thikness');
    jQuery('.panel-heading').removeClass('active-h');
    jQuery('.mobilestep2').addClass("active-h");
    jQuery('.step2').addClass("active-h");
    jQuery('.thickness_section').show();
    jQuery('.thickness_section').prev("h4").addClass("section-open");
    jQuery('html, body').animate({
       scrollTop: jQuery(".thickness_section").offset().top-300
   }, 1000);
    return false;
}

// var background =jQuery('#custom_data_2').val();
// if(background=='' && next_step>3){
//   alert('Please select background color to proceed');
//   jQuery('.panel-heading').removeClass('active-h');
//   jQuery('.mobilestep3').addClass("active-h");
//   jQuery('.step3').addClass("active-h");
//   jQuery('#backgroundcolors').show();
//   jQuery('#backgroundcolors').prev("h4").addClass("section-open");
//   jQuery('html, body').animate({
//    scrollTop: jQuery("#backgroundcolors").offset().top-400
// }, 1000);
//   return false;
// }

var holePunch=jQuery('#holePunchChosen').val();
var holeLocation=jQuery('#holeLocation').val();
var surface=jQuery('#surfaceChosen').val();

if(holePunch=='' && next_step>4){
  alert('Please select hole location');
  jQuery('.panel-heading').removeClass('active-h');

  jQuery('.step4').trigger("click");

  jQuery('.mobilestep4').trigger("click");
  jQuery('.mobilestep4').addClass("active-h");
  jQuery('.step4').addClass("active-h");
  jQuery('.section_hole_punch').show();
  jQuery('.section_hole_punch').prev("h4").addClass("section-open");
  jQuery('html, body').animate({
     scrollTop: jQuery(".section_hole_punch").offset().top-400
 }, 1000);
  return false;
}
if(holeLocation=='' && next_step>4){
  alert('Please select hole location');
  jQuery('.panel-heading').removeClass('active-h');

  jQuery('.step4').trigger("click");

  jQuery('.mobilestep4').trigger("click");
  jQuery('.mobilestep4').addClass("active-h");
  jQuery('.step4').addClass("active-h");
  jQuery('.section_hole_location').show();
  jQuery('.section_hole_location').prev("h4").addClass("section-open");
  jQuery('html, body').animate({
     scrollTop: jQuery(".section_hole_location").offset().top-400
 }, 1000);
  return false;
}

if(surface=='' && next_step>4){
  alert('Please select surface');
  jQuery('.panel-heading').removeClass('active-h');

  jQuery('.step4').trigger("click");

  jQuery('.mobilestep4').trigger("click");
  jQuery('.mobilestep4').addClass("active-h");
  jQuery('.step4').addClass("active-h");
  jQuery('.section_surface').show();
  jQuery('.section_surface').prev("h4").addClass("section-open");
  jQuery('html, body').animate({
     scrollTop: jQuery(".section_surface").offset().top-400
 }, 1000);
  return false;
}
jQuery('.step'+next_step).trigger('click');
jQuery('.mobilestep'+next_step).addClass('active-h');
jQuery('#current_step').val(next_step);
if(next_step>1){
  jQuery('.btn-prev').removeAttr('disabled');
}
else{
    jQuery('.btn-prev').prop("disabled", true);

}
if(next_step==5 || next_step>5){
 jQuery('.btn-prev-next').hide();
 jQuery('.btn-canvas-submit').show();
}
else{
    jQuery('.btn-prev-next').show();
    jQuery('.btn-canvas-submit').hide();
}
console.log('.step'+next_step);

}


function prev_new() {
   var current_step=jQuery('#current_step').val();
   var prev_step=parseInt(current_step)-1;
   jQuery('.step'+prev_step).trigger('click');
   jQuery('.mobilestep'+prev_step).addClass('active-h');
   jQuery('#current_step').val(prev_step);
   if(prev_step>1){
      jQuery('.btn-prev').removeAttr('disabled');
  }
  else{
    jQuery('.btn-prev').prop("disabled", true);
    
}
if(prev_step==5 || prev_step>5){
 jQuery('.btn-prev-next').hide();
 jQuery('.btn-canvas-submit').show();
}
else{
    jQuery('.btn-prev-next').show();
    jQuery('.btn-canvas-submit').hide();
}
console.log(prev_step);

}

jQuery(document.body).on('click', '.panel-heading', function() {
//   return false;
   var step_id=jQuery(this).data('id');
   var lavel_size_select=jQuery('#custom_data_1').val();
   if(lavel_size_select=='' && step_id>1){
    alert('Please select size to proceed');
    jQuery('.panel-heading').removeClass('active-h');
    jQuery('.step1').trigger("click");
    jQuery('.mobilestep1').trigger("click");
    jQuery('.mobilestep1').addClass("active-h");
    jQuery('.step1').addClass("active-h");
    jQuery('.customLabelSizes').show();
    jQuery('.customLabelSizes').prev("h4").addClass("section-open");
    jQuery('html, body').animate({
       scrollTop: jQuery(".customLabelSizes").offset().top-400
   }, 1000);
    return false;
}
var materialType=jQuery('#materialTypeChosen').val();
var thickness=jQuery('#thickChosen').val();
var holePunch=jQuery('#holePunchChosen').val();
var holeLocation=jQuery('#holeLocation').val();
var surface=jQuery('#surfaceChosen').val();
var custom_logo = jQuery('#drop-area1').val(); 
var imagetype = jQuery('input[name="uploadLogo"]:checked').val();
if(custom_logo=='' && step_id>2 && imagetype=='upload'){
    alert('Please upload your logo to proceed');
    jQuery('.panel-heading').removeClass('active-h');
    jQuery('.mobilestep2').addClass("active-h");
    jQuery('.step2').addClass("active-h");
    return false;
}


if(materialType=='' && step_id>2){
  alert('Please select material type');
  jQuery('.panel-heading').removeClass('active-h');
  jQuery('.mobilestep2').addClass("active-h");
  jQuery('.step2').addClass("active-h");
  jQuery('.materials_section').show();
  jQuery('.materials_section').prev("h4").addClass("section-open");
  jQuery('html, body').animate({
     scrollTop: jQuery(".materials_section").offset().top-300
 }, 1000);
  return false;
}

if(thickness=='' && step_id>2){
    alert('Please select thikness');
    jQuery('.panel-heading').removeClass('active-h');
    jQuery('.mobilestep2').addClass("active-h");
    jQuery('.step2').addClass("active-h");
    jQuery('.thickness_section').show();
    jQuery('.thickness_section').prev("h4").addClass("section-open");
    jQuery('html, body').animate({
     scrollTop: jQuery(".thickness_section").offset().top-300
 }, 1000);
    return false;
}

// var background =jQuery('#custom_data_2').val();
// if(background=='' && step_id>3){
//   alert('Please select background color to proceed');
//   jQuery('.panel-heading').removeClass('active-h');

//   jQuery('.step3').trigger("click");

//   jQuery('.mobilestep3').trigger("click");
//   jQuery('.mobilestep3').addClass("active-h");
//   jQuery('.step3').addClass("active-h");
//   jQuery('#backgroundcolors').show();
//   jQuery('#backgroundcolors').prev("h4").addClass("section-open");
//   jQuery('html, body').animate({
//      scrollTop: jQuery("#backgroundcolors").offset().top-400
//  }, 1000);
//   return false;
// }
if(holePunch=='' && step_id>4){
  alert('Please select hole location');
  jQuery('.panel-heading').removeClass('active-h');

  jQuery('.step4').trigger("click");

  jQuery('.mobilestep4').trigger("click");
  jQuery('.mobilestep4').addClass("active-h");
  jQuery('.step4').addClass("active-h");
  jQuery('.section_hole_punch').show();
  jQuery('.section_hole_punch').prev("h4").addClass("section-open");
  jQuery('html, body').animate({
   scrollTop: jQuery(".section_hole_punch").offset().top-400
}, 1000);
  return false;
}
if(holeLocation=='' && step_id>4){
  alert('Please select hole location');
  jQuery('.panel-heading').removeClass('active-h');

  jQuery('.step4').trigger("click");

  jQuery('.mobilestep4').trigger("click");
  jQuery('.mobilestep4').addClass("active-h");
  jQuery('.step4').addClass("active-h");
  jQuery('.section_hole_location').show();
  jQuery('.section_hole_location').prev("h4").addClass("section-open");
  jQuery('html, body').animate({
   scrollTop: jQuery(".section_hole_location").offset().top-400
}, 1000);
  return false;
}

if(surface=='' && step_id>4){
  alert('Please select surface');
  jQuery('.panel-heading').removeClass('active-h');

  jQuery('.step4').trigger("click");

  jQuery('.mobilestep4').trigger("click");
  jQuery('.mobilestep4').addClass("active-h");
  jQuery('.step4').addClass("active-h");
  jQuery('.section_surface').show();
  jQuery('.section_surface').prev("h4").addClass("section-open");
  jQuery('html, body').animate({
   scrollTop: jQuery(".section_surface").offset().top-400
}, 1000);
  return false;
}
jQuery('#current_step').val(step_id);
submitDesign(1);
var trgt = jQuery(this).attr('data-target');
jQuery('div[data-div="' + trgt + '"]').show().siblings().not('.cart-sec, .guideArea').hide();
if(step_id>1){
  jQuery('.btn-prev').removeAttr('disabled');
}
else{
    jQuery('.btn-prev').prop("disabled", true);
    
}
if(step_id==5 || step_id>5){
 jQuery('.btn-prev-next').hide();
 jQuery('.btn-canvas-submit').show();
}
else{
    jQuery('.btn-prev-next').show();
    jQuery('.btn-canvas-submit').hide();
}

});


jQuery(document.body).on('click', '.btn-canvas-submit', function() {
    jQuery('.proPreview-deg-ord-print').addClass('model-preview');
    jQuery('.add-amount').addClass('change-quantity');
    jQuery('.close-preview').show();
    jQuery('.btn-cart-canvas').show();
    jQuery('.btn-prev-next').hide();
    jQuery('.btn-canvas-submit').hide();

});
jQuery(document.body).on('click', '.close-preview', function() {
    jQuery('.proPreview-deg-ord-print').removeClass('model-preview');
    jQuery('.add-amount').removeClass('change-quantity');
    jQuery('.btn-cart-canvas').hide();
    jQuery('.btn-prev-next').show();
    jQuery('.btn-canvas-submit').hide();
    jQuery('.close-preview').hide();
    

});

function showMore(ev, selector) {
    var h8 = jQuery(selector + ' .panel-body-desig-order > div > div').outerHeight();
    (ev === 'hide') ? (
        jQuery(selector + ' .divider').each(function() {
            jQuery(this).slideUp();
        }),
        jQuery(selector + ' p.more-types > a').text('Show More').attr('onclick', "showMore('show' , '" + selector +
            "')")
        ) : (
        jQuery(selector + ' .divider').each(function() {
            jQuery(this).slideDown();
        }),
        jQuery(selector + ' p.more-types > a').text('Show Less').attr('onclick', "showMore('hide' , '" + selector +
            "')")
        );
    }

    function saveForLater(p) {
        submitDesign(3);

        var labelshape = jQuery('div#label-folds .col-lg-4.selected').index() + 1;

        var labelsize = jQuery('div#label-sizes .selected').data('arr');

        var backColor = (jQuery('#backgroundcolors span.colorContainer.selected').length > 0) ? jQuery(
            '#backgroundcolors span.colorContainer.selected').index() + 1 : jQuery('input#userbgcolor').val();
        var backColorVal = jQuery('#userbgcolor').val();

        var textColor = [];
        (jQuery('.selectedColorItem').length > 0) ? jQuery('.selectedColorItem').each(function() {
            textColor.push(jQuery(this).attr('data-arr'))
        }): jQuery('input#usertextcolor').val();

        var material = jQuery('figure.materialSelect.selected').parent().index() + 1;

        var thickness = jQuery('.imgWrapW.selected').index() + 1;

        var printOption = jQuery('.oneSide.selected').parent().index() + 1;

        var holePunch = jQuery('div#holeLocations .selected').index() + 1;

        var surface = jQuery('div#Surfaces .selected').index() + 1;

        var string = jQuery('.strings > ul > li').index() + 1;

        var safetypin = jQuery('.choosePins ul li').index() + 1;
        var safetypincolors = jQuery('.SafetyPinColors > ul > li').index() + 1;

        var grommets = jQuery('.grommets > ul > li').index() + 1;

        var foils = jQuery('.foils > ul > li').index() + 1;

        var quantity = jQuery('input#totalquantity').val();


        var arrToSave_hc = [];
        arrToSave_hc.push({
            labelshape: labelshape,
            labelsize: labelsize,
            backColor: backColor,
            textColor: textColor,
            backColorVal: backColorVal,
            quantity: quantity,
            safetypin: safetypin,
            material: material,
            thickness: thickness,
            printOption: printOption,
            holePunch: holePunch,
            surface: surface,
            quantity: quantity,
            string: string,
            safetypincolors: safetypincolors,
            grommets: grommets,
            foils: foils,
        });

        //console.log(arrToSave_hc);

        p = (p === undefined) ? '' : p;
        jQuery.ajax({
            url: 'https://xpresalabels.com/site/wp-admin/admin-ajax.php',
            type: 'post',
            cache: true,
            datattype: 'json',
            data: {
                action: 'saveForLater_HC',
                arrToSave_hc: arrToSave_hc,
                p: p,
                imgdata: jQuery('#imgFromCanvas').val()
            },
            beforeSend: function() {

            },
            success: function(data) {
                //console.log(data);
                var d = data.split('/');
                //console.log(d);
                var myAccountPageUrl =
                'https://xpresalabels.com/site/my-account/';
                if (data != 0) {
                    if (d[1] == 'login=false') {
                        jQuery.fancybox.open(
                            '<div class="message"> <h2>Please Login to continue</h2> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <a class="btn btn-info" href="' +
                            myAccountPageUrl + '?' + d[0] +
                            '">Login</a> </div><div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <a class="btn btn-info" href="' +
                            myAccountPageUrl + '?' + d[0] + '">Sign up</a> </div></div></div>');
                    } else if (d[0] == 'already added') {
                        jQuery.fancybox.open(
                            '<div class="message"> <h2>Want to replace previously saved item?</h2> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <a class="btn btn-info" href="javascript:void(0)" data-fancybox-close onclick="saveForLater(1)">Yes</a> </div><div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <a class="btn btn-info" data-fancybox-close href="javascript:void(0)" >No</a> </div></div></div>'
                            );
                    } else if (d[0] == 'insert successful') {
                        jQuery.fancybox.open(
                            '<div class="message"> <h2>Product saved!</h2> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <a class="btn btn-info" href="' +
                            myAccountPageUrl +
                            '/saved-items/">View saved product</a> </div><div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <a class="btn btn-info" data-fancybox-close href="javascript:void(0)" >Continue customizing</a> </div></div></div>'
                            );
                    } else {
                        jQuery.fancybox.open('<div class="message"><h2>Please try again</h2></div>');
                    }
                }
            }
        });

    }

    function adjustImageRatio() {
        jQuery('div#customLabels .divider').show();
        jQuery('.row-sec .customLabelGenImgPrev').each(function() {
            if (jQuery(this).parents().eq(4).is(":visible")) {
                var wddhSdBe = parseInt(jQuery(this).attr('dat-width'));
                var h8SdBe = parseInt(jQuery(this).attr('dat-height'));

                var ratio = wddhSdBe / h8SdBe;

                var parWdth = jQuery(this).parent().outerWidth() - 20;
                var parH8 = jQuery(this).parent().outerHeight() - 20;

                if (wddhSdBe > parWdth) {

                    var dpi = 75;
                    var dividend = (parWdth * dpi) / wddhSdBe;
                    var resWdth = (wddhSdBe / 75) * dividend;
                    var resH8 = (h8SdBe / 75) * dividend;

                    jQuery(this).css({
                        'width': resWdth + 'px',
                        'height': resH8 + 'px',
                    });
                }
            }
        });
        jQuery('div#customLabels .divider').hide();
        //flagD = 'notOk';
    }

    function addEditedOption(options) {
        jQuery('div#label-folds > div > div > div.col-lg-4:nth-child(' + options[0].labelshape + ')').addClass('selected');
        jQuery('div#label-folds > div > div > div.col-lg-4:nth-child(' + options[0].labelshape + ')').find('img').click();

        jQuery('div#label-sizes div[data-arr="' + options[0].labelsize + '"]').click();

        jQuery('tbody#priceContainerFull input[value="' + options[0].quantity + '"]').attr('checked', true);

        isNaN(options[0].backColor) ? changePantoneBG(options[0].backColor) : jQuery(
            '#backgroundcolors .colorSelection .colors_b > span:nth-child(' + options[0].backColor + ')').addClass(
            'selected').click();

            for (var i = 0; i < options[0].textColor.length; i++) {
                if (jQuery('#logocolors .colors_l span[data-arr="' + options[0].textColor[i] + '"]').length > 0) {
                    jQuery('#logocolors .colors_l span[data-arr="' + options[0].textColor[i] + '"]').addClass('selected')
                    .click();
                } else {
                    changePantoneText(options[0].textColor[i]);
                    jQuery('.additionalColors button').click();
                }
            }

            jQuery('.materialSelection .row .col-lg-3.col-md-3.col-sm-3.col-xs-6:nth-child(' + options[0].material + ')')
            .addClass('selected').find('.materialSelect').click();

            jQuery('.imgWrapW:nth-child(' + options[0].thickness + ')').click();

            jQuery('#printOptions .row .col-lg-6.col-md-6.col-sm-6.col-xs-6:nth-child(' + options[0].printOption + ')')
            .addClass('selected').find('.oneSide').click();

            jQuery('#holePunchs .row .col-lg-6.col-md-6.col-sm-6.col-xs-6:nth-child(' + options[0].holePunch + ')').click();

            jQuery('#holeLocations .row .col-lg-3.col-md-3.col-sm-3.col-xs-3:nth-child(' + options[0].holePunch + ')').click();

            jQuery('#Surfaces .row .col-lg-4.col-md-4.col-sm-4.col-xs-4:nth-child(' + options[0].surface + ')').click();

            jQuery('#Strings ul li:nth-child(' + options[0].string + ')').click();

            jQuery('.choosePins ul li:nth-child(' + options[0].safetypin + ')').click();
            jQuery('#SafetyPins ul li:nth-child(' + options[0].safetypincolors + ')').click();

            jQuery('#Grommets ul li:nth-child(' + options[0].grommets + ')').click();

            jQuery('#Foils ul li:nth-child(' + options[0].foils + ')').click();

        }

        function changePantoneText(color) {
            jQuery('#pantoneText').css('background-color', '#' + color);
            jQuery('#pantoneText').val('#' + color);
            selecttextcolor(color, '#' + color, '0.70');
        }

        function changePantoneBG(color) {
            jQuery('#pantoneBG').css('background-color', '#' + color);
            jQuery('#pantoneBG').val('#' + color);
            selectcolor(color, '#' + color, '');
        }

        jQuery('select#sizeTag').change(function() {
            var dsval = jQuery(this).val();
            (dsval !== 'Choose') ? (jQuery('span#sizetagchosen').text(dsval), jQuery('input#sizetag').val(dsval)) : (
                jQuery('span#sizetagchosen').text('N/A'), jQuery('input#sizetag').val('N/A'));
        });

        function removeExtra(d) {
            jQuery(d).parent().remove();
        }

        function selectMaterial(d, name, price) {
            jQuery('.materialSelect').removeClass('selected');
            jQuery(d).addClass('selected');
            jQuery('#materialTypeChosen, #newMaterial').val(name);
            jQuery('#materialType').text(name);

            addOnPrice('Material: ' + name, 'selectmaterial', price);
        }

        function selectThickness(d, thickness, price) {
            jQuery(d).addClass('selected').siblings().removeClass('selected');
            jQuery('#thickChosen, #newThickness').val(thickness);
            jQuery('#labthickness').text(thickness);
            addOnPrice('Thickness ' + thickness, 'thick', price);
        }

        function selectSideOptions(d, printSide) {
            jQuery(d).addClass('selected');
            jQuery('.oneSide').not(d).removeClass('selected');
            jQuery('#printOptionChosen, #newPrintOption').val(printSide);
            jQuery('#labprintOption').text(printSide);

            if (printSide == 'Both Sided') {
                jQuery('.panel-body.panel-body-2').addClass('full');
                jQuery('#displaydesignnew_bck_vw_wrp').addClass('show').removeClass('hide');

                if (jQuery('#addOnForBack').length < 1) {
                    jQuery('#tttl').before(
                        '<div class="productPrevContRow" id="addOnForBack"> <span class="productPrevContRowTitle">For Back printing:</span> <span class="productPrevContRowDes">x2</span></span> </div>'
                        );
                    var rsltPrice = jQuery('#totalpricelabeladd2crt').val() * 2;
                    jQuery('#totalpricelabeladd2crt').val(rsltPrice);
                    jQuery('#totalprice1').text(rsltPrice);
                }

            } else {
                jQuery('.panel-body.panel-body-2').removeClass('full');
                jQuery('#displaydesignnew_bck_vw_wrp').removeClass('show').addClass('hide');

                if (jQuery('#addOnForBack').length > 0) {
                    jQuery('#addOnForBack').remove();
                    var rsltPrice = jQuery('#totalpricelabeladd2crt').val() / 2;
                    jQuery('#totalpricelabeladd2crt').val(rsltPrice);
                    jQuery('#totalprice1').text(rsltPrice);
                }
            }


        }

        function selectHoles(d, holePunch, price) {
            jQuery(d).addClass('selected').siblings().removeClass('selected');
            jQuery('#holePunchChosen, #newholePunch').val(holePunch);
            jQuery('#labHolePunch').text(holePunch);
            holePunch = holePunch.replace('/', '-');
            jQuery('div#displaydesignnew').attr('class', '');
            jQuery('div#displaydesignnew').addClass('holeAdded hole' + holePunch);

            holePunch = holePunch.replace('/', '-');
            jQuery('.holeIcon').removeClass(function(index, className) {
                return (className.match(/(^|\s)hole-\S+/g) || []).join(' ');
            });
            jQuery('.holeIcon').addClass('hole-' + holePunch);

            addOnPrice('Hole: ' + holePunch, 'holeAddon', price);

        }

        function adjustHole() {
            jQuery('.holeIcon').remove();
            var holeLocation = (jQuery('input#newHoleLocation').val() == "") ? '' : jQuery('input#newHoleLocation').val()
            .replace(' - ', '');
            jQuery('#displaydesignnew').prepend('<div class="holeIcon ' + holeLocation +
                '"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAATxJREFUeNq8lj1LQmEYht9zBMHVSQkaRBAKoUkIWpuCRAiEwP6FEDS1OfYzClybXByiWQSbwkiENlEKxUHe7hueEw7nw/R9vOGCAweei/eDcx/PWmtikgHnoA5K4ADkwAeYgBfwDDpxQwwlIWRAE0ztZvkEjYhZoZIyGNrt8gpySZIa+La7has6iZJUwNy6yXh9RYEgKy9chluX4nxfzv9Obo7LnIJrPngwcfgQpI37jEDBF5uGgDkEZ5RcGt3UuV1LxZUwPUqs8kom+5D8XWHN/FCyUpaMKHlTlvR86QPNtHnwR3gYKAlmIB9s15OSpAUWntzgIuhL3br8bh0Ht4t5BzcOBQtQpSCs45sOeoTFd5HU8Vc7NOSXNGzijwQpgsd/DF+CB2lYs6lk/c/lHvQjhnfBLYsvbs6vAAMAs0Vd3XlsYicAAAAASUVORK5CYII="></div>'
                );
        }

        function selectHoleLocation(d, HoleLocation) {
            jQuery(d).addClass('selected').siblings().removeClass('selected');
            jQuery('#holeLocation, #newHoleLocation').val(HoleLocation);
            jQuery('#labHoleLocation').text(HoleLocation);

            HoleLocation = HoleLocation.replace(' - ', '');
            jQuery('.holeIcon').removeClass(function(index, className) {
                return (className.match(/(^|\s)loc-\S+/g) || []).join(' ');
            });
            jQuery('.holeIcon').addClass('loc-' + HoleLocation);
        }

        function selectSurface(d, surface, price) {
            jQuery(d).addClass('selected').siblings().removeClass('selected');
            jQuery('#surfaceChosen, #newSurface').val(surface);
            jQuery('#labSurface').text(surface);
            addOnPrice('Surface: ' + surface, 'surfaceAddOn', price);
        }

        function selectString(d, string, price) {
            jQuery(d).addClass('selected').siblings().removeClass('selected');
            jQuery('#stringColorChosen, #newStringColor').val(string);
            jQuery('#labStringColor').text(string);
            addOnPrice('String: ' + string, 'stringAddOn', price);
        }

        function selectSafetyPin(d, pin, price) {
            jQuery(d).addClass('selected').siblings().removeClass('selected');
            jQuery('#safetyPin, #newSafetyPin').val(pin);
            jQuery('#labSafetyPin').text(pin);
            addOnPrice('Safety Pin: ' + pin, 'pinAddOn', price);
        }

        function selectGrommet(d, grommet, price) {
            jQuery(d).addClass('selected').siblings().removeClass('selected');
            jQuery('#grommetsChosen, #newGrommets').val(grommet);
            jQuery('#labGrommets').text(grommet);
            addOnPrice('Grommet: ' + grommet, 'grommetAddOn', price);
        }

        function selectFoil(d, foil, price) {
            jQuery(d).addClass('selected').siblings().removeClass('selected');
            jQuery('#foilChosen, #newFoil').val(foil);
            jQuery('#labFoil').text(foil);
            addOnPrice('Foil: ' + foil, 'foilAddOn', price);
        }

        //mail sent data save and pdf
        //document.addEventListener( 'wpcf7mailsent', function( event ) {
        document.addEventListener('wpcf7mailsent', function(event) {
            if ('12488' == event.detail.contactFormId) {
                window.location.href = "https://www.xpresalabels.com/thank-you-quote/";
                    //console.log(jQuery('form.wpcf7-form').serialize());
                    //event.preventDefault();
                    // jQuery.ajax({
                    //     type: 'POST',
                    //     url: 'https://xpresalabels.com/site/wp-admin/admin-ajax.php',
                    //     data: {
                    //         data: jQuery('#pdfLeadPopup form.wpcf7-form').serialize(),
                    //         action: 'cf7FormSubmit_HC',
                    //     },
                    //     success: function(data) {
                    //         //console.log(data);
                    //         window.open("https://xpresalabels.com/site/tcpdf/tcpdf/pdfhangtagcustom.php",
                    //             '_blank');
                    //         window.location.href = "https://xpresalabels.com/thank-you-quote/";
                    //     }
                    // });
            }
        }, false);


        jQuery('.choosePins ul li').click(function() {
            jQuery(this).addClass('selected').siblings().removeClass('selected');
            if (jQuery(this).hasClass('yes')) {
                selectSafetyPin('.Black', 'Black', 50);
                jQuery('.SafetyPinColors').slideDown();
            } else {
                jQuery('#labSafetyPin').text('N/A');
                jQuery('.SafetyPinColors li').removeClass('selected');
                jQuery('.SafetyPinColors').slideUp();
            }
        });

        function addOnPrice(tag, action, price) {
            action = action.replace(' ', '');

            var totalPrice = parseFloat(jQuery('#totalquantity').val()) * parseFloat(jQuery('#unitpricehere').val());
            jQuery('span#priceAdded').each(function() {
                var thisPrice = parseFloat(jQuery(this).text());
                totalPrice = totalPrice + thisPrice;
            });
                //console.log(totalPrice);

            if (jQuery('#' + action).length > 0) {
                var extraAmount = parseInt(jQuery('#' + action + ' #priceAdded').text());
                var totalPrice = totalPrice - extraAmount;

                jQuery('#' + action).remove();
            }
                //console.log(totalPrice);
            var resultPrice = parseInt(totalPrice) + parseInt(price);
                //console.log(resultPrice);
            jQuery('#addOns').append('<div class="productPrevContRow" id="' + action +
                '"> <span class="productPrevContRowTitle">' + tag +
                '</span> <span class="productPrevContRowDes">$<span id="priceAdded">' + price + '</span></span> </div>');

            jQuery('#totalpricelabeladd2crt').val(resultPrice);
            jQuery('#totalprice1').text(resultPrice);

            if (jQuery('input#printOptionChosen').val() == 'Both Sided' && jQuery('#addOnForBack').length > 0) {
                jQuery('#addOnForBack').remove();
                jQuery('#tttl').before(
                    '<div class="productPrevContRow" id="addOnForBack"> <span class="productPrevContRowTitle">For Back printing:</span> <span class="productPrevContRowDes">x2</span></span> </div>'
                    );
                var rsltPrice = resultPrice * 2;
                jQuery('#totalpricelabeladd2crt').val(rsltPrice);
                jQuery('#totalprice1').text(rsltPrice);
            }
        }

        function saveBeforeAdd() {

        }

            /************ back side functions ************/
        function selecttext_new(p, t) {
            var v = jQuery(t).val();
            jQuery('.row' + p + '_bck').text(v);
            jQuery('row' + p + '_fontSize_bck').val(v);

            var n = jQuery(t).val();
            var fontSizeCheck = jQuery('#textbox' + p + 'Font').val();
            fontSizeCheck == 'auto' ? adjustText(p) : '';

            madeToCanvas(1);
        }

        jQuery('.close-panel').click(function() {
            jQuery('.panel-body.panel-body-2').removeClass('full');
        });

        function selectalign_bck(cls) {
            jQuery('div#texts_bck').attr('class', '').addClass(cls);;
        }

        function getTextWidth(font, fontsize, txt) {
            var formattedWidth;
            if (txt == '') {
                formattedWidth = '0px';
            } else {
                var text = document.createElement("span");
                document.body.appendChild(text);
                text.style.font = font;
                text.style.fontSize = fontsize + "px";
                text.style.height = 'auto';
                text.style.width = 'auto';
                text.style.position = 'absolute';
                text.style.whiteSpace = 'no-wrap';
                text.innerHTML = txt;

                var width = Math.ceil(text.clientWidth);
                formattedWidth = width + "px";
            }
            return formattedWidth;
        }

        function closegenimage() {
            jQuery('#div-drop-area1, #div-drop-area2').removeClass('dropareadrag').html(
                '<h3 class="drop-text">Drag and Drop Images Here</h3>');
        }


        function madeToCanvas(n) {
                //jQuery('#backImg').remove();
            var imgLink = jQuery('img#upImg' + n).attr('src');

            if (n == 2) {

                var wdth = jQuery('canvas#myCanvas').width();
                var h8 = jQuery('canvas#myCanvas').height();

                jQuery('div#displaydesignnew_bck_vw').css({
                    'width': wdth + 'px',
                    'height': h8 + 'px',
                    'background-color': '#' + jQuery('#userbgcolor').val()
                });

                jQuery('#displaydesignnew_bck_vw_wrp.hide').removeClass('hide');
                jQuery('img#backImg').attr('src', imgLink);

                html2canvas(jQuery("div#displaydesignnew_bck_vw"), {
                    onrendered: function(canvas) {
                        jQuery('#myCanvas_back').remove();
                        theCanvas = canvas;
                        canvas.id = 'myCanvas_back';
                        jQuery('div#displaydesignnew_bck_vw')[0].after(canvas);
                    }
                });
            } else {
                jQuery('div#idwovencustom > img').attr('src', imgLink);

                html2canvas(jQuery("div#idwovencustom"), {
                    onrendered: function(canvas) {
                        jQuery('#myCanvas').remove();
                        theCanvas = canvas;
                        canvas.id = 'myCanvas';
                        jQuery('div#displaydesign')[0].after(canvas);

                        var img = new Image();
                        img.src = 'https://xpresalabels.com/site/wp-content/plugins/xpresalabels/assets/images/pattern-overlay.png';


                        img.onload = function() {

                            var c = document.getElementById("myCanvas");
                            var ctx = c.getContext("2d");

                            var pat = ctx.createPattern(img, "repeat");
                            ctx.rect(0, 0, c.width, c.height);
                            ctx.fillStyle = pat;
                            ctx.fill();

                            if (jQuery('.productPrevImg').hasClass('hangtag_circle')) {
                                ctx.drawImage(img, 0, 0);
                                ctx.globalCompositeOperation = 'destination-in';
                                ctx.beginPath();
                                ctx.arc(c.width / 2, c.height / 2, c.height / 2, 0, Math.PI * 2);
                                ctx.closePath();
                                ctx.fill();
                            }
                        }
                    }
                });
            }


        }
            /************ back side functions ************/

        jQuery(document).ready(function() {
            selectquantity(1000,0.360);
            jQuery('.toggle-less').click(function() {
                var txt = jQuery(".label-input-details").is(':visible') ? 'See More' : 'See Less';
                jQuery(this).text(txt);
                jQuery(this).toggleClass('toggle');
                jQuery('.label-input-details').slideToggle();
            });
                //headerTopMargin();
        });

            // var targetTopHeader = '.header_top_holder';
        var previewBox = '#previewRow';
        var targetHSpace = '.previewRowHeight';

        function previewBoxTopMargin() {
                // var tHeight = $(targetTopHeader).innerHeight();
            var bHeight = jQuery(previewBox).innerHeight();
            jQuery(targetHSpace).css('height', bHeight + "px");
        };
        jQuery(window).on('load resize', function() {
            previewBoxTopMargin();
        });
        

        jQuery('.add-amount').click(function() {
            jQuery('.panel-headings-wrapper .owl-item .panel-heading').removeClass("active-h");
            jQuery('.panel-headings-wrapper').trigger('to.owl.carousel', 16);
            jQuery('.mobilestep16').addClass("active-h");
            jQuery('.step16').addClass("active-h");
            jQuery('#amnt_qbltm').slideDown().siblings().slideUp();
        });
        jQuery(document.body).on('click', '.change-quantity', function() {
            jQuery('.panel-headings-wrapper .owl-item .panel-heading').removeClass("active-h");
            jQuery('.panel-headings-wrapper').trigger('to.owl.carousel', 16);
            jQuery('.mobilestep16').addClass("active-h");
            jQuery('.step16').addClass("active-h");
            jQuery('#amnt_qbltm').slideDown().siblings().slideUp();
            jQuery('.proPreview-deg-ord-print').removeClass('model-preview');

            jQuery('.btn-cart-canvas').hide();
            jQuery('.btn-prev-next').hide();
            jQuery('.btn-canvas-submit').show();
            jQuery('.close-preview').hide();
            jQuery('.add-amount').removeClass('change-quantity');
        });

        jQuery(document).on('click','.panel-title',function(){
           jQuery(this).toggleClass("section-open");
           console.log('test');
           jQuery(this).next("div").slideToggle();

       });
        jQuery(document.body).on('click', '.qaPanelCustomProductItem h4', function() {
           var div_to_show=jQuery(this).data('id');
   // jQuery('.qaPanelCustomProductItem h4').removeClass('show');
           jQuery('.qaPanelCustomProductItem').removeClass('open');
           jQuery('#'+div_to_show).addClass('open');
           jQuery('.'+div_to_show).show();
           jQuery(this).addClass('show');

       });

        jQuery(document.body).on('click', '.qaPanelCustomProductItem h4.show', function() {
           var div_to_show=jQuery(this).data('id');

           jQuery('.qaPanelCustomProductItem').removeClass('open');

           jQuery('.'+div_to_show).hide();
           jQuery(this).removeClass('show');

       });
   </script>


   {"id":12051,"date":"2020-03-05T11:35:06","date_gmt":"2020-03-05T11:35:06","guid":{"rendered":"http:\/\/xpresalabels.com\/?page_id=12051"},"modified":"2026-02-17T05:52:49","modified_gmt":"2026-02-17T10:52:49","slug":"hangtag-custom-quote","status":"publish","type":"page","link":"https:\/\/xpresalabels.com\/site\/hangtag-custom-quote\/","title":{"rendered":"Hangtag Custom Quote"},"content":{"rendered":"\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"designTool.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-12051","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Custom Design Your Custom Hang Tag Labels and Tags<\/title>\n<meta name=\"description\" content=\"Upload your logo for custom hang tag quote. Premium cardstock, fast production, competitive pricing. Perfect for clothing &amp; accessories. Get quote!\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Custom Design Your Custom Hang Tag Labels and Tags\" \/>\n<meta property=\"og:description\" content=\"Upload your logo for custom hang tag quote. Premium cardstock, fast production, competitive pricing. Perfect for clothing &amp; accessories. Get quote!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/xpresalabels.com\/site\/hangtag-custom-quote\/\" \/>\n<meta property=\"og:site_name\" content=\"Xpresa Labels\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/xpresalabels\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-17T10:52:49+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@xpresalabels\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/xpresalabels.com\/site\/hangtag-custom-quote\/\",\"url\":\"https:\/\/xpresalabels.com\/site\/hangtag-custom-quote\/\",\"name\":\"Custom Design Your Custom Hang Tag Labels and Tags\",\"isPartOf\":{\"@id\":\"https:\/\/xpresalabels.com\/site\/#website\"},\"datePublished\":\"2020-03-05T11:35:06+00:00\",\"dateModified\":\"2026-02-17T10:52:49+00:00\",\"description\":\"Upload your logo for custom hang tag quote. Premium cardstock, fast production, competitive pricing. Perfect for clothing & accessories. Get quote!\",\"breadcrumb\":{\"@id\":\"https:\/\/xpresalabels.com\/site\/hangtag-custom-quote\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/xpresalabels.com\/site\/hangtag-custom-quote\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/xpresalabels.com\/site\/hangtag-custom-quote\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/xpresalabels.com\/site\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Hangtag Custom Quote\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/xpresalabels.com\/site\/#website\",\"url\":\"https:\/\/xpresalabels.com\/site\/\",\"name\":\"Xpresa Labels\",\"description\":\"Custom Woven Clothing Labels and Tags\",\"publisher\":{\"@id\":\"https:\/\/xpresalabels.com\/site\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/xpresalabels.com\/site\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/xpresalabels.com\/site\/#organization\",\"name\":\"Xpresa Labels\",\"url\":\"https:\/\/xpresalabels.com\/site\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/xpresalabels.com\/site\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/xpresalabels.com\/site\/wp-content\/uploads\/2022\/03\/logo.jpg\",\"contentUrl\":\"https:\/\/xpresalabels.com\/site\/wp-content\/uploads\/2022\/03\/logo.jpg\",\"width\":110,\"height\":80,\"caption\":\"Xpresa Labels\"},\"image\":{\"@id\":\"https:\/\/xpresalabels.com\/site\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/facebook.com\/xpresalabels\/\",\"https:\/\/x.com\/xpresalabels\",\"https:\/\/linkedin.com\/company\/xpresa-labels--custom-woven-printed-labels\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Custom Design Your Custom Hang Tag Labels and Tags","description":"Upload your logo for custom hang tag quote. Premium cardstock, fast production, competitive pricing. Perfect for clothing & accessories. Get quote!","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Custom Design Your Custom Hang Tag Labels and Tags","og_description":"Upload your logo for custom hang tag quote. Premium cardstock, fast production, competitive pricing. Perfect for clothing & accessories. Get quote!","og_url":"https:\/\/xpresalabels.com\/site\/hangtag-custom-quote\/","og_site_name":"Xpresa Labels","article_publisher":"https:\/\/facebook.com\/xpresalabels\/","article_modified_time":"2026-02-17T10:52:49+00:00","twitter_card":"summary_large_image","twitter_site":"@xpresalabels","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/xpresalabels.com\/site\/hangtag-custom-quote\/","url":"https:\/\/xpresalabels.com\/site\/hangtag-custom-quote\/","name":"Custom Design Your Custom Hang Tag Labels and Tags","isPartOf":{"@id":"https:\/\/xpresalabels.com\/site\/#website"},"datePublished":"2020-03-05T11:35:06+00:00","dateModified":"2026-02-17T10:52:49+00:00","description":"Upload your logo for custom hang tag quote. Premium cardstock, fast production, competitive pricing. Perfect for clothing & accessories. Get quote!","breadcrumb":{"@id":"https:\/\/xpresalabels.com\/site\/hangtag-custom-quote\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/xpresalabels.com\/site\/hangtag-custom-quote\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/xpresalabels.com\/site\/hangtag-custom-quote\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/xpresalabels.com\/site\/"},{"@type":"ListItem","position":2,"name":"Hangtag Custom Quote"}]},{"@type":"WebSite","@id":"https:\/\/xpresalabels.com\/site\/#website","url":"https:\/\/xpresalabels.com\/site\/","name":"Xpresa Labels","description":"Custom Woven Clothing Labels and Tags","publisher":{"@id":"https:\/\/xpresalabels.com\/site\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/xpresalabels.com\/site\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/xpresalabels.com\/site\/#organization","name":"Xpresa Labels","url":"https:\/\/xpresalabels.com\/site\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/xpresalabels.com\/site\/#\/schema\/logo\/image\/","url":"https:\/\/xpresalabels.com\/site\/wp-content\/uploads\/2022\/03\/logo.jpg","contentUrl":"https:\/\/xpresalabels.com\/site\/wp-content\/uploads\/2022\/03\/logo.jpg","width":110,"height":80,"caption":"Xpresa Labels"},"image":{"@id":"https:\/\/xpresalabels.com\/site\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/facebook.com\/xpresalabels\/","https:\/\/x.com\/xpresalabels","https:\/\/linkedin.com\/company\/xpresa-labels--custom-woven-printed-labels"]}]}},"_links":{"self":[{"href":"https:\/\/xpresalabels.com\/site\/wp-json\/wp\/v2\/pages\/12051","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xpresalabels.com\/site\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/xpresalabels.com\/site\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/xpresalabels.com\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xpresalabels.com\/site\/wp-json\/wp\/v2\/comments?post=12051"}],"version-history":[{"count":1,"href":"https:\/\/xpresalabels.com\/site\/wp-json\/wp\/v2\/pages\/12051\/revisions"}],"predecessor-version":[{"id":55278,"href":"https:\/\/xpresalabels.com\/site\/wp-json\/wp\/v2\/pages\/12051\/revisions\/55278"}],"wp:attachment":[{"href":"https:\/\/xpresalabels.com\/site\/wp-json\/wp\/v2\/media?parent=12051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}