<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="https://viigii.it/shopify/production/vg-app.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div id="vg-app-checkbox" class="vg-app-wrapper">
   <div id="vg-checkbox-wrap" class="vg-checkbox-wrap">
        <input
            id="vg-checkbox"
            class="vg-checkbox"
            type="checkbox"
        >
        <label id="vg-checkbox-label" class="vg-checkbox-label" data-status="initial">
            <div class="vg-display-inline">
                <span id="vg-checkbox-btn" class="vg-checkbox-btn">
                    <img
                        id="vg-box-img"
                        class="vg-box-img"
                        src="https://viigii.it/images/vg-icon.svg"
                        alt="viigii icon"
                    />
                    Send as an eGift Now
                </span>
                <div style="clear:both"></div>
            </div>

            <div class="vg-display-inline">
                <a
                    id="vg-learn-more"
                    class="vg-learn-more"
                    target="_blank"
                    href="https://viigii.it"
                >
                Learn more about viigii.
                </a>
                <div style="clear:both"></div>
            </div>

            <span id="vg-info-text" class="vg-info-text" style="display: none;">
                viigii/virtual gifting gives a lucky someone a sneak peek of their gift before it arrives. They will enjoy a memorable experience on their special day as they unwrap their personalized gift. Your actual gift will be shipped by the retailer, so the best is still to come!
            </span>
        </label>
    </div>
</div>

<div id="vg-app-modal" class="vg-app-wrapper">
    <div id="vg-modal" class="vg-modal">
        <div class="vg-content">
            <div class="vg-content-masthead">
                <span id="vg-close" class="vg-content-close">×</span>
                <img
                    class="vg-content-logo"
                    alt="viigii logo"
                    src="https://viigii.it/images/vg-logo-reverse.svg"
                >
            </div>

            <section class="vg-content-form">
                <form method="post" id="register-form" novalidate="">
                    <fieldset class="vg-form-fieldset">
                        <legend class="vg-form-legend">Recipient Info</legend>
                        <span class="vg-form-byline">
                            Input the name and email/phone number so we can deliver their gift virtually.
                        </span>

                        <div class="vg-form-group">
                            <label>Recipient Name</label>
                            <div class="vg-form-control">
                                <input
                                    id="receiver_fname"
                                    class="js-field-input"
                                    name="receiver_fname"
                                    type="text"
                                    onblur="validateName(this.value,this.id)"
                                    maxlength="70"
                                    autofocus
                                />
                                <div id="receiver_fname_error"></div>
                            </div>
                        </div>

                        <div class="vg-form-group" id="vg_sending_method">
                          <label>Notify them by text note or email?</label>
                          <div class="vg-form-control">
                            <div class="vg-drop-down">
                              <select
                                id="sending-method"
                                class="field-select js-field-input"
                                name="sending_method"
                              >
                                <option selected="selected" value="1">Email</option>
                                <option value="2">Text Message</option>
                              </select>
                              <button class="vg-form-btn">
                                <i class="fa fa-sort-desc" aria-hidden="true"></i>
                              </button>
                            </div>
                          </div>
                        </div>

                        <div class="vg-form-group" id="vg-receiver-email">
                            <label>Recipient Email</label>
                            <div class="vg-form-control">
                                <input
                                    id="receiver_email"
                                    class="js-field-input"
                                    name="receiver_email"
                                    type="text"
                                    onblur="validateEmail(this.value,this.id)"
                                    maxlength="255"
                                />
                                <div id="receiver_email_error"></div>
                            </div>
                        </div>
                        <div class="vg-form-group"  id="vg-receiver-phone">
                          <label>Recipient Phone Number</label>
                            <div class="vg-form-control">
                              <div class="vg-country-drop-down">
                                <select
                                  id="select_phone_number"
                                  class="js-field-input"
                                >
                                  <option iso="US" selected="selected" value="1">USA (+1)</option>
                                  <option iso="GB" value="44">UK (+44)</option>
                                    <optgroup label="Other countries">
                                      <option iso="DZ" value="213">Algeria (+213)</option>
                                      <option iso="AD" value="376">Andorra (+376)</option>
                                      <option iso="AO" value="244">Angola (+244)</option>
                                      <option iso="AI" value="1264">Anguilla (+1264)</option>
                                      <option iso="AG" value="1268">Antigua &amp; Barbuda (+1268)</option>
                                      <option iso="AR" value="54">Argentina (+54)</option>
                                      <option iso="AM" value="374">Armenia (+374)</option>
                                      <option iso="AW" value="297">Aruba (+297)</option>
                                      <option iso="AU" value="61">Australia (+61)</option>
                                      <option iso="AT" value="43">Austria (+43)</option>
                                      <option iso="AZ" value="994">Azerbaijan (+994)</option>
                                      <option iso="BS" value="1242">Bahamas (+1242)</option>
                                      <option iso="BH" value="973">Bahrain (+973)</option>
                                      <option iso="BD" value="880">Bangladesh (+880)</option>
                                      <option iso="BB" value="1246">Barbados (+1246)</option>
                                      <option iso="BY" value="375">Belarus (+375)</option>
                                      <option iso="BE" value="32">Belgium (+32)</option>
                                      <option iso="BZ" value="501">Belize (+501)</option>
                                      <option iso="BJ" value="229">Benin (+229)</option>
                                      <option iso="BM" value="1441">Bermuda (+1441)</option>
                                      <option iso="BT" value="975">Bhutan (+975)</option>
                                      <option iso="BO" value="591">Bolivia (+591)</option>
                                      <option iso="BA" value="387">Bosnia Herzegovina (+387)</option>
                                      <option iso="BW" value="267">Botswana (+267)</option>
                                      <option iso="BR" value="55">Brazil (+55)</option>
                                      <option iso="BN" value="673">Brunei (+673)</option>
                                      <option iso="BG" value="359">Bulgaria (+359)</option>
                                      <option iso="BF" value="226">Burkina Faso (+226)</option>
                                      <option iso="BI" value="257">Burundi (+257)</option>
                                      <option iso="KH" value="855">Cambodia (+855)</option>
                                      <option iso="CM" value="237">Cameroon (+237)</option>
                                      <option iso="CA" value="1">Canada (+1)</option>
                                      <option iso="CV" value="238">Cape Verde Islands (+238)</option>
                                      <option iso="KY" value="1345">Cayman Islands (+1345)</option>
                                      <option iso="CF" value="236">Central African Republic (+236)</option>
                                      <option iso="CL" value="56">Chile (+56)</option>
                                      <option iso="CN" value="86">China (+86)</option>
                                      <option iso="CO" value="57">Colombia (+57)</option>
                                      <option iso="KM" value="269">Comoros (+269)</option>
                                      <option iso="CG" value="242">Congo (+242)</option>
                                      <option iso="CK" value="682">Cook Islands (+682)</option>
                                      <option iso="CR" value="506">Costa Rica (+506)</option>
                                      <option iso="HR" value="385">Croatia (+385)</option>
                                      <option iso="CU" value="53">Cuba (+53)</option>
                                      <option iso="CYN" value="90392">Cyprus North (+90392)</option>
                                      <option iso="CYS" value="357">Cyprus South (+357)</option>
                                      <option iso="CZ" value="42">Czech Republic (+42)</option>
                                      <option iso="DK" value="45">Denmark (+45)</option>
                                      <option iso="DJ" value="253">Djibouti (+253)</option>
                                      <option iso="DM" value="1809">Dominica (+1809)</option>
                                      <option iso="DO" value="1809">Dominican Republic (+1809)</option>
                                      <option iso="EC" value="593">Ecuador (+593)</option>
                                      <option iso="EG" value="20">Egypt (+20)</option>
                                      <option iso="SV" value="503">El Salvador (+503)</option>
                                      <option iso="GQ" value="240">Equatorial Guinea (+240)</option>
                                      <option iso="ER" value="291">Eritrea (+291)</option>
                                      <option iso="EE" value="372">Estonia (+372)</option>
                                      <option iso="ET" value="251">Ethiopia (+251)</option>
                                      <option iso="FK" value="500">Falkland Islands (+500)</option>
                                      <option iso="FO" value="298">Faroe Islands (+298)</option>
                                      <option iso="FJ" value="679">Fiji (+679)</option>
                                      <option iso="FI" value="358">Finland (+358)</option>
                                      <option iso="FR" value="33">France (+33)</option>
                                      <option iso="GF" value="594">French Guiana (+594)</option>
                                      <option iso="PF" value="689">French Polynesia (+689)</option>
                                      <option iso="GA" value="241">Gabon (+241)</option>
                                      <option iso="GM" value="220">Gambia (+220)</option>
                                      <option iso="GE" value="7880">Georgia (+7880)</option>
                                      <option iso="DE" value="49">Germany (+49)</option>
                                      <option iso="GH" value="233">Ghana (+233)</option>
                                      <option iso="GI" value="350">Gibraltar (+350)</option>
                                      <option iso="GR" value="30">Greece (+30)</option>
                                      <option iso="GL" value="299">Greenland (+299)</option>
                                      <option iso="GD" value="1473">Grenada (+1473)</option>
                                      <option iso="GP" value="590">Guadeloupe (+590)</option>
                                      <option iso="GU" value="671">Guam (+671)</option>
                                      <option iso="GT" value="502">Guatemala (+502)</option>
                                      <option iso="GN" value="224">Guinea (+224)</option>
                                      <option iso="GW" value="245">Guinea - Bissau (+245)</option>
                                      <option iso="GY" value="592">Guyana (+592)</option>
                                      <option iso="HT" value="509">Haiti (+509)</option>
                                      <option iso="HN" value="504">Honduras (+504)</option>
                                      <option iso="HK" value="852">Hong Kong (+852)</option>
                                      <option iso="HU" value="36">Hungary (+36)</option>
                                      <option iso="IS" value="354">Iceland (+354)</option>
                                      <option iso="IN" value="91">India (+91)</option>
                                      <option iso="ID" value="62">Indonesia (+62)</option>
                                      <option iso="IR" value="98">Iran (+98)</option>
                                      <option iso="IQ" value="964">Iraq (+964)</option>
                                      <option iso="IE" value="353">Ireland (+353)</option>
                                      <option iso="IL" value="972">Israel (+972)</option>
                                      <option iso="IT" value="39">Italy (+39)</option>
                                      <option iso="JM" value="1876">Jamaica (+1876)</option>
                                      <option iso="JP" value="81">Japan (+81)</option>
                                      <option iso="JO" value="962">Jordan (+962)</option>
                                      <option iso="KZ" value="7">Kazakhstan (+7)</option>
                                      <option iso="KE" value="254">Kenya (+254)</option>
                                      <option iso="KI" value="686">Kiribati (+686)</option>
                                      <option iso="KP" value="850">Korea North (+850)</option>
                                      <option iso="KR" value="82">Korea South (+82)</option>
                                      <option iso="KW" value="965">Kuwait (+965)</option>
                                      <option iso="KG" value="996">Kyrgyzstan (+996)</option>
                                      <option iso="LA" value="856">Laos (+856)</option>
                                      <option iso="LV" value="371">Latvia (+371)</option>
                                      <option iso="LB" value="961">Lebanon (+961)</option>
                                      <option iso="LS" value="266">Lesotho (+266)</option>
                                      <option iso="LR" value="231">Liberia (+231)</option>
                                      <option iso="LY" value="218">Libya (+218)</option>
                                      <option iso="LI" value="417">Liechtenstein (+417)</option>
                                      <option iso="LT" value="370">Lithuania (+370)</option>
                                      <option iso="LU" value="352">Luxembourg (+352)</option>
                                      <option iso="MO" value="853">Macao (+853)</option>
                                      <option iso="MK" value="389">Macedonia (+389)</option>
                                      <option iso="MG" value="261">Madagascar (+261)</option>
                                      <option iso="MW" value="265">Malawi (+265)</option>
                                      <option iso="MY" value="60">Malaysia (+60)</option>
                                      <option iso="MV" value="960">Maldives (+960)</option>
                                      <option iso="ML" value="223">Mali (+223)</option>
                                      <option iso="MT" value="356">Malta (+356)</option>
                                      <option iso="MH" value="692">Marshall Islands (+692)</option>
                                      <option iso="MQ" value="596">Martinique (+596)</option>
                                      <option iso="MR" value="222">Mauritania (+222)</option>
                                      <option iso="YT" value="269">Mayotte (+269)</option>
                                      <option iso="MX" value="52">Mexico (+52)</option>
                                      <option iso="FM" value="691">Micronesia (+691)</option>
                                      <option iso="MD" value="373">Moldova (+373)</option>
                                      <option iso="MC" value="377">Monaco (+377)</option>
                                      <option iso="MNG" value="976">Mongolia (+976)</option>
                                      <option iso="MS" value="1664">Montserrat (+1664)</option>
                                      <option iso="MA" value="212">Morocco (+212)</option>
                                      <option iso="MZ" value="258">Mozambique (+258)</option>
                                      <option iso="MN" value="95">Myanmar (+95)</option>
                                      <option iso="NA" value="264">Namibia (+264)</option>
                                      <option iso="NR" value="674">Nauru (+674)</option>
                                      <option iso="NEP" value="977">Nepal (+977)</option>
                                      <option iso="NL" value="31">Netherlands (+31)</option>
                                      <option iso="NC" value="687">New Caledonia (+687)</option>
                                      <option iso="NZ" value="64">New Zealand (+64)</option>
                                      <option iso="NI" value="505">Nicaragua (+505)</option>
                                      <option iso="NE" value="227">Niger (+227)</option>
                                      <option iso="NG" value="234">Nigeria (+234)</option>
                                      <option iso="NU" value="683">Niue (+683)</option>
                                      <option iso="NF" value="672">Norfolk Islands (+672)</option>
                                      <option iso="NP" value="670">Northern Marianas (+670)</option>
                                      <option iso="NO" value="47">Norway (+47)</option>
                                      <option iso="OM" value="968">Oman (+968)</option>
                                      <option iso="PW" value="680">Palau (+680)</option>
                                      <option iso="PA" value="507">Panama (+507)</option>
                                      <option iso="PG" value="675">Papua New Guinea (+675)</option>
                                      <option iso="PY" value="595">Paraguay (+595)</option>
                                      <option iso="PE" value="51">Peru (+51)</option>
                                      <option iso="PH" value="63">Philippines (+63)</option>
                                      <option iso="PL" value="48">Poland (+48)</option>
                                      <option iso="PT" value="351">Portugal (+351)</option>
                                      <option iso="PR" value="1787">Puerto Rico (+1787)</option>
                                      <option iso="QA" value="974">Qatar (+974)</option>
                                      <option iso="RE" value="262">Reunion (+262)</option>
                                      <option iso="RO" value="40">Romania (+40)</option>
                                      <option iso="RU" value="7">Russia (+7)</option>
                                      <option iso="RW" value="250">Rwanda (+250)</option>
                                      <option iso="SM" value="378">San Marino (+378)</option>
                                      <option iso="ST" value="239">Sao Tome &amp; Principe (+239)</option>
                                      <option iso="SA" value="966">Saudi Arabia (+966)</option>
                                      <option iso="SN" value="221">Senegal (+221)</option>
                                      <option iso="CS" value="381">Serbia (+381)</option>
                                      <option iso="SCS" value="248">Seychelles (+248)</option>
                                      <option iso="SL" value="232">Sierra Leone (+232)</option>
                                      <option iso="SG" value="65">Singapore (+65)</option>
                                      <option iso="SK" value="421">Slovak Republic (+421)</option>
                                      <option iso="SIA" value="386">Slovenia (+386)</option>
                                      <option iso="SB" value="677">Solomon Islands (+677)</option>
                                      <option iso="SO" value="252">Somalia (+252)</option>
                                      <option iso="ZA" value="27">South Africa (+27)</option>
                                      <option iso="ES" value="34">Spain (+34)</option>
                                      <option iso="LK" value="94">Sri Lanka (+94)</option>
                                      <option iso="SH" value="290">St. Helena (+290)</option>
                                      <option iso="KN" value="1869">St. Kitts (+1869)</option>
                                      <option iso="SC" value="1758">St. Lucia (+1758)</option>
                                      <option iso="SD" value="249">Sudan (+249)</option>
                                      <option iso="SR" value="597">Suriname (+597)</option>
                                      <option iso="SZ" value="268">Swaziland (+268)</option>
                                      <option iso="SE" value="46">Sweden (+46)</option>
                                      <option iso="CH" value="41">Switzerland (+41)</option>
                                      <option iso="SI" value="963">Syria (+963)</option>
                                      <option iso="TW" value="886">Taiwan (+886)</option>
                                      <option iso="TJ" value="7">Tajikstan (+7)</option>
                                      <option iso="TH" value="66">Thailand (+66)</option>
                                      <option iso="TG" value="228">Togo (+228)</option>
                                      <option iso="TO" value="676">Tonga (+676)</option>
                                      <option iso="TT" value="1868">Trinidad &amp; Tobago (+1868)</option>
                                      <option iso="TN" value="216">Tunisia (+216)</option>
                                      <option iso="TR" value="90">Turkey (+90)</option>
                                      <option iso="TMA" value="7">Turkmenistan (+7)</option>
                                      <option iso="TMN" value="993">Turkmenistan (+993)</option>
                                      <option iso="TC" value="1649">Turks &amp; Caicos Islands (+1649)</option>
                                      <option iso="TV" value="688">Tuvalu (+688)</option>
                                      <option iso="UG" value="256">Uganda (+256)</option>
                                      <option iso="UA" value="380">Ukraine (+380)</option>
                                      <option iso="AE" value="971">United Arab Emirates (+971)</option>
                                      <option iso="UY" value="598">Uruguay (+598)</option>
                                      <option iso="UZ" value="7">Uzbekistan (+7)</option>
                                      <option iso="VU" value="678">Vanuatu (+678)</option>
                                      <option iso="VA" value="379">Vatican City (+379)</option>
                                      <option iso="VE" value="58">Venezuela (+58)</option>
                                      <option iso="VN" value="84">Vietnam (+84)</option>
                                      <option iso="VG" value="84">Virgin Islands - British (+1284)</option>
                                      <option iso="VI" value="84">Virgin Islands - US (+1340)</option>
                                      <option iso="WF" value="681">Wallis &amp; Futuna (+681)</option>
                                      <option iso="YEN" value="969">Yemen (North)(+969)</option>
                                      <option iso="YES" value="967">Yemen (South)(+967)</option>
                                      <option iso="ZM" value="260">Zambia (+260)</option>
                                      <option iso="ZW" value="263">Zimbabwe (+263)</option>
                                    </optgroup>
                                </select>
                                <button class="vg-form-btn">
                                    <i class="fa fa-sort-desc" aria-hidden="true"></i>
                                </button>
                              </div>
                              <input
                                id="receiver_phone_number"
                                class="js-field-input"
                                name="receiver_phone_number"
                                onblur="validatePhoneNumber(this.value,this.id)"
                                type="tel"
                              />
                              <div style="clear:both;"></div>
                              <div id="receiver_phone_number_error"></div>
                            </div>
                        </div>
                    </fieldset>


                    <fieldset class="vg-form-fieldset">
                        <legend class="vg-form-legend">Sender Info</legend>
                        <span class="vg-form-byline">
                            Input your name and email so they know who sent their special gift(s). They can send you a little appreciation in return.
                        </span>

                        <div class="vg-form-group">
                            <label>Your Name</label>
                            <div class="vg-form-control">
                                <input
                                    id="sender_fname"
                                    class="js-field-input"
                                    name="sender_fname"
                                    type="text"
                                    onblur="validateName(this.value,this.id)"
                                    maxlength="70"
                                />
                                <div id="sender_fname_error"></div>
                            </div>
                        </div>

                        <div class="vg-form-group">
                            <label>Your Email</label>
                            <div class="vg-form-control">
                                <input
                                    id="sender_email"
                                    class="js-field-input"
                                    name="sender_email"
                                    type="text"
                                    onblur="validateEmail(this.value,this.id)"
                                    maxlength="255"
                                />
                                <div id="sender_email_error"></div>
                            </div>
                        </div>

                        <div class="vg-form-group">
                          <div class="vg-form-control vg-marketing-checkbox">
                            <input
                                id="receive_marketing_emails"
                                class="js-field-input"
                                type="checkbox"
                            />
                            <label for="receive_marketing_emails">
                              I would like to receive viigii newsletters and promotions so I never miss out on that perfect gift
                            </label>
                          </div>
                        </div>
                    </fieldset>

                    <div id="vg-checkout-wrap" class="vg-checkout-wrap">
                        <button id="vg-checkout-btn" class="vg-btn">
                            <span
                                id="vg-btn-loader"
                                class="vg-btn-loader"
                                style="display:none;"
                            >
                            </span>
                            <span id="vg-btn-text" class="vg-btn-text">Confirm</span>
                        </button>

                        <span id="vg-reminder" class="vg-reminder" style="display:none;">
                            Perfect! Now continue to check out. Afterwards look for an email to complete eGifting process. Don't forget to check your Junk Mail folder just in case!
                        </span>
                    </div>
                </form>
            </section>
        </div>
    </div>
</div>

<script
    id="vg-shopify-script"
    src="https://viigii.it/shopify/production/vg-app.js"
>
</script>
