Avino’s Gift Certificates

<!-- ================================================================
     Avino's Italian Table — Gift Certificate Order Form
     Self-contained embeddable form (HTML + CSS + JS in one block).
     Submits to PayPal: avinos001@gmail.com
     Certified mail fee of $5.99 added as PayPal "handling".
     Paste this whole block into a Bricks "Code" element.
     ================================================================ -->
<div id="avinos-gc-form">
  <style>
    #avinos-gc-form *{box-sizing:border-box}
    #avinos-gc-form{
      --maroon:#5e1813;
      --maroon-dark:#4a120e;
      --ink:#2c2c2c;
      --line:#c9c9c9;
      --req:#c0392b;
      --paypal:#ffc439;
      width:100%;margin:0;padding:0;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
      color:var(--ink);line-height:1.5;
    }
    #avinos-gc-form .gc-card{
      background:#fff;border:1px solid var(--maroon);border-radius:10px;
      padding:34px 30px;box-shadow:0 6px 22px rgba(0,0,0,.06);
    }
    #avinos-gc-form h2{
      font-family:Georgia,"Times New Roman",serif;
      text-align:center;font-weight:600;font-size:1.9rem;margin:0 0 4px;color:#222;
    }
    #avinos-gc-form .gc-sub{text-align:center;color:#666;margin:0 0 26px;font-size:.95rem}
    #avinos-gc-form label{display:block;font-size:.9rem;font-weight:600;margin:16px 0 6px;color:#333}
    #avinos-gc-form .req{color:var(--req)}
    #avinos-gc-form input[type=text],
    #avinos-gc-form input[type=email],
    #avinos-gc-form input[type=tel],
    #avinos-gc-form input[type=number],
    #avinos-gc-form select,
    #avinos-gc-form textarea{
      width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:6px;
      font-size:.95rem;font-family:inherit;color:var(--ink);background:#fff;
    }
    #avinos-gc-form input:focus,#avinos-gc-form select:focus,#avinos-gc-form textarea:focus{
      outline:none;border-color:var(--maroon);box-shadow:0 0 0 2px rgba(94,24,19,.12)
    }
    #avinos-gc-form textarea{min-height:96px;resize:vertical}
    #avinos-gc-form .gc-row{display:flex;gap:16px;flex-wrap:wrap}
    #avinos-gc-form .gc-row > div{flex:1;min-width:200px}
    #avinos-gc-form .gc-radios{display:flex;gap:24px;margin-top:6px;flex-wrap:wrap}
    #avinos-gc-form .gc-radios label{display:flex;align-items:center;gap:8px;font-weight:500;margin:0;cursor:pointer}
    #avinos-gc-form .gc-radios input{width:auto;margin:0}
    #avinos-gc-form .gc-amounts{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
    #avinos-gc-form .gc-amt{
      flex:1;min-width:84px;text-align:center;padding:12px 8px;border:1.5px solid var(--line);
      border-radius:6px;background:#fafafa;cursor:pointer;font-weight:600;font-size:1rem;
      transition:.12s;user-select:none
    }
    #avinos-gc-form .gc-amt:hover{border-color:var(--maroon)}
    #avinos-gc-form .gc-amt.active{background:var(--maroon);border-color:var(--maroon);color:#fff}
    #avinos-gc-form .gc-custom-wrap{position:relative;margin-top:12px;max-width:260px}
    #avinos-gc-form .gc-custom-wrap span{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#777}
    #avinos-gc-form #gc-custom{padding-left:26px}
    #avinos-gc-form .gc-fee{font-size:.85rem;color:#777;margin-top:8px}
    #avinos-gc-form .gc-total{font-weight:700;color:var(--maroon);font-size:1.05rem;margin-top:10px}
    #avinos-gc-form .gc-note{font-size:.88rem;color:#555;margin:22px 0 6px}
    #avinos-gc-form .gc-err{color:var(--req);font-size:.85rem;margin-top:4px;display:none}
    #avinos-gc-form .gc-submit{
      width:100%;margin-top:22px;padding:15px;border:none;border-radius:6px;
      background:var(--maroon);color:#fff;font-size:1.05rem;font-weight:600;cursor:pointer;
      letter-spacing:.3px;transition:.12s
    }
    #avinos-gc-form .gc-submit:hover{background:var(--maroon-dark)}
    #avinos-gc-form .gc-pp-note{
      display:flex;align-items:center;justify-content:center;gap:8px;
      margin-top:14px;font-size:.82rem;color:#666;text-align:center
    }
    #avinos-gc-form .gc-hidden{display:none}
  </style>

  <div class="gc-card">
    <h2>Avino's Italian Table Gift Certificate</h2>
    <p class="gc-sub">Order Form</p>

    <form id="gc-order" novalidate>
      <label>Purchaser Name <span class="req">*</span></label>
      <input type="text" id="gc-pname" autocomplete="name">

      <label>Purchaser Phone Number <span class="req">*</span></label>
      <input type="tel" id="gc-phone" autocomplete="tel">

      <label>Purchaser Email <span class="req">*</span></label>
      <input type="email" id="gc-email" autocomplete="email">

      <label>Where should we mail the Gift Certificate? <span class="req">*</span></label>
      <div class="gc-radios">
        <label><input type="radio" name="gc-mailto" value="Purchaser"> Purchaser</label>
        <label><input type="radio" name="gc-mailto" value="Recipient"> Recipient</label>
      </div>
      <div class="gc-err" id="err-mailto">Please choose where to mail the gift certificate.</div>

      <label>Name (if Recipient)</label>
      <input type="text" id="gc-rname">

      <label>Street Address <span class="req">*</span></label>
      <input type="text" id="gc-street" autocomplete="address-line1">

      <label>Address line 2</label>
      <input type="text" id="gc-street2" autocomplete="address-line2">

      <div class="gc-row">
        <div>
          <label>City <span class="req">*</span></label>
          <input type="text" id="gc-city" autocomplete="address-level2">
        </div>
        <div>
          <label>State <span class="req">*</span></label>
          <input type="text" id="gc-state" autocomplete="address-level1">
        </div>
      </div>

      <div class="gc-row">
        <div>
          <label>Postal / Zip Code <span class="req">*</span></label>
          <input type="text" id="gc-zip" autocomplete="postal-code">
        </div>
        <div>
          <label>Country <span class="req">*</span></label>
          <select id="gc-country">
            <option value="">- Country -</option>
            <option value="United States" selected>United States</option>
            <option value="Canada">Canada</option>
            <option value="Other">Other</option>
          </select>
        </div>
      </div>

      <label>Message for Handwritten Note</label>
      <textarea id="gc-message" maxlength="180" placeholder="Your personal message (up to 180 characters)"></textarea>

      <label>Special Instructions (if any)</label>
      <textarea id="gc-special" maxlength="120"></textarea>

      <label>Gift Certificate Amount <span class="req">*</span></label>
      <div class="gc-amounts" id="gc-presets">
        <div class="gc-amt" data-amt="25">$25</div>
        <div class="gc-amt" data-amt="50">$50</div>
        <div class="gc-amt" data-amt="100">$100</div>
        <div class="gc-amt" data-amt="150">$150</div>
        <div class="gc-amt" data-amt="200">$200</div>
      </div>
      <div class="gc-custom-wrap">
        <span>$</span>
        <input type="number" id="gc-custom" min="1" step="1" placeholder="Other amount">
      </div>
      <div class="gc-err" id="err-amount">Please select or enter a gift certificate amount.</div>
      <p class="gc-fee">A certified mail fee of $5.99 will be added at checkout.</p>
      <p class="gc-total" id="gc-total"></p>

      <p class="gc-note">
        When you click <strong>Continue to Payment</strong>, you'll be taken to PayPal's secure
        checkout, where you can pay with a <strong>Credit Card, Debit Card, or PayPal</strong>
        (you do not need a PayPal account).
      </p>
      <div class="gc-err" id="err-fields" style="margin-top:10px">Please fill in all required fields marked with *.</div>

      <button type="submit" class="gc-submit">Continue to Payment →</button>
      <div class="gc-pp-note">🔒 Secure checkout powered by PayPal</div>
    </form>
  </div>

  <script>
  (function(){
    var root   = document.getElementById('avinos-gc-form');
    var form   = root.querySelector('#gc-order');
    var presets= root.querySelector('#gc-presets');
    var custom = root.querySelector('#gc-custom');
    var totalEl= root.querySelector('#gc-total');
    var FEE = 5.99;
    var chosen = null;

    function fmt(n){ return '$' + n.toFixed(2); }

    function updateTotal(){
      if(chosen && chosen > 0){
        totalEl.textContent = 'Gift ' + fmt(chosen) + '  +  Certified mail ' + fmt(FEE)
          + '   =   Total ' + fmt(chosen + FEE);
      } else {
        totalEl.textContent = '';
      }
    }

    presets.addEventListener('click', function(e){
      var b = e.target.closest('.gc-amt');
      if(!b) return;
      presets.querySelectorAll('.gc-amt').forEach(function(x){x.classList.remove('active')});
      b.classList.add('active');
      custom.value = '';
      chosen = parseFloat(b.getAttribute('data-amt'));
      updateTotal();
    });

    custom.addEventListener('input', function(){
      presets.querySelectorAll('.gc-amt').forEach(function(x){x.classList.remove('active')});
      var v = parseFloat(custom.value);
      chosen = (v && v > 0) ? v : null;
      updateTotal();
    });

    function show(id,on){ root.querySelector('#'+id).style.display = on ? 'block' : 'none'; }
    function val(id){ return (root.querySelector('#'+id).value || '').trim(); }

    form.addEventListener('submit', function(e){
      e.preventDefault();
      show('err-fields',false); show('err-mailto',false); show('err-amount',false);
      var ok = true;

      var required = ['gc-pname','gc-phone','gc-email','gc-street','gc-city','gc-state','gc-zip'];
      required.forEach(function(id){
        var el = root.querySelector('#'+id);
        if(!el.value.trim()){ el.style.borderColor = '#c0392b'; ok = false; }
        else { el.style.borderColor = ''; }
      });
      if(!val('gc-country')) ok = false;

      var mailtoEl = form.querySelector('input[name="gc-mailto"]:checked');
      if(!mailtoEl){ show('err-mailto',true); ok = false; }

      if(!chosen || chosen <= 0){ show('err-amount',true); ok = false; }

      if(!ok){ show('err-fields',true);
        root.scrollIntoView({behavior:'smooth',block:'start'}); return; }

      var mailto = mailtoEl.value;
      var amount = chosen.toFixed(2);

      var recipient = val('gc-rname') || (mailto === 'Purchaser' ? val('gc-pname') : '');
      var addr = [val('gc-street'), val('gc-street2'), val('gc-city') + ', ' + val('gc-state') + ' ' + val('gc-zip'), val('gc-country')]
                 .filter(Boolean).join(', ');

      var os_recipient = ('Mail to ' + mailto + ' — ' + recipient + ' — ' + addr).slice(0,199);
      var customStr = ('Purchaser: ' + val('gc-pname') + ' | Ph: ' + val('gc-phone') + ' | Em: ' + val('gc-email')
                       + ' | Note: ' + val('gc-message') + ' | Special: ' + val('gc-special')).slice(0,255);

      var params = {
        cmd:'_xclick',
        business:'avinositaliantable@gmail.com',
        currency_code:'USD',
        item_name:"Avino's Italian Table Gift Certificate",
        amount:amount,
        handling:FEE.toFixed(2),
        quantity:'1',
        no_shipping:'1',
        no_note:'1',
        on0:'Gift Amount', os0:fmt(parseFloat(amount)),
        on1:'Deliver To', os1:os_recipient,
        custom:customStr,
        return:'https://avinositaliantablegiftcards.com/',
        cancel_return:'https://avinositaliantablegiftcards.com/',
        rm:'1'
      };

      var pp = document.createElement('form');
      pp.method = 'post';
      pp.action = 'https://www.paypal.com/cgi-bin/webscr';
      pp.target = '_top';
      pp.className = 'gc-hidden';
      Object.keys(params).forEach(function(k){
        var i = document.createElement('input');
        i.type = 'hidden'; i.name = k; i.value = params[k];
        pp.appendChild(i);
      });
      document.body.appendChild(pp);
      pp.submit();
    });
  })();
  </script>
</div>