gistfile1.phtml

{snippet:site-code_header}

{if get:app != "true"}
  {snippet:site-header}
{/if}

{if get:app != "true"}
  {snippet:partials-hero_short}
{/if}

{!--
{exp:ce_cache:it id="tmpl-cart" tags="{structure:page:entry_id}|low_variables"}
{exp:channel:entries
  channel="template_cart"
  disable="categories|category_fields|member_data|pagination|trackbacks"
  dynamic="on"
}
--}

{exp:store:checkout
  form_id="store-checkout-form"
  return="{global:confirmation_page}/ORDER_HASH"}

<div class="page-content-container" data-template-name="template-checkout">

  {snippet:partials-page_title_row}

  <!-- CART -->
  <section class="content white checkout-container clearfix">

    <div class="row pickup-delivery-row-container clearfix">


      <h3>Pickup or Delivery?</h3>
      <hr/>


      <div class="columns large-12 pickup-delivery-container">
        <div class="row clearfix">
          <div class="columns large-6">
            <a id='pickup-button' class="pickup-delivery-button" href="javascript:;">
              <span>I would like to pickup my Dimo's order.</span>
            </a>
          </div>

          <div class="columns large-6">
            <a id='delivery-button' class="pickup-delivery-button" href="javascript:;">
              <span>I would like to have my order delivered.</span>
            </a>
          </div>
        </div>
      </div><!-- large-12 -->


      <div class="columns large-12 location-selection-container">

        <div class="row">
          <div class="columns large-12 clearfix">
            <a id='back-to-delivery-method' href="javascript:;">Back to delivery method</a>
          </div>
        </div>

        <div class="row clearfix">

          <div class="columns large-6 location-container">

            <div class="row">
              <a id='location-button-wrigleyville' class="location-button large-4 columns" href="javascript:;">
                <div class="location-button-border">&nbsp;</div>
                <img src="/assets/images/location-circle-wrigleyville.png" />
              </a><!-- large-4 -->

              <div class="columns large-8">
                <span class="location-name">Dimo's Wrigleyville</span>
                <address class="location-address">
                  1615 N Damen Ave. <br/>
                  773-525-4580
                </address>
                <span class="location-neighborhoods">Wicker Park, Bucktown</span>
                <a class="view-map" href="javascript:;">View Detailed Map</a>
              </div><!-- large-8 -->
            </div><!-- row -->

          </div><!-- location-container -->

          <div class="columns large-6 location-container">

            <div class="row">
              <a id='location-button-sxc' class="location-button large-4 columns" href="javascript:;">
                <div class="location-button-border">&nbsp;</div>
                <img src="/assets/images/location-circle-sxc.png" />
              </a><!-- large-4 -->

              <div class="columns large-8">
                <span class="location-name">Dimo's Six Corners</span>
                <address class="location-address">
                  1615 N Damen Ave. <br/>
                  773-525-4580
                </address>
                <span class="location-neighborhoods">Wicker Park, Bucktown</span>
                <a class="view-map" href="javascript:;">View Detailed Map</a>
              </div><!-- large-8 -->
            </div><!-- row -->

          </div><!-- location-container -->

        </div><!-- row -->
      </div><!-- location-selection-container -->

      <input type="hidden" name="order_custom1" id="distribution-input" />
      <input type="hidden" name="order_custom2" id="location-input" />

    </div><!-- row -->

    <!-- error message -->
    <div class="row clearfix">
      <div class="grid full">
        <div class='form-error-message {if "{error:payment_method}" != ""}show{/if}'>
          <span class="title">Oops, there was an error</span>
          <p class="message">
            {error:payment_method}
          </p>
        </div>
      </div>
    </div>

    <div class="row payment-row-container">

      <h3 class="payment-title">Payment</h3>
      <hr/>

      <div class="row">

        <div class="columns large-3">

          <h4>
            Billing Information
          </h4>

          <label>Name</label>
          <input name="billing_name" type="text" placeholder="" value="{billing_name}">

          <label>Email</label>
          <input name="order_email" type="text" placeholder="" value="{order_email}">

          <label>Address</label>
          <input name="billing_address1" type="text" placeholder="" value="{billing_address1}">

          <label>Address 2</label>
          <input name="billing_address2" type="text" placeholder="" value="{billing_address2}">

          <label>City</label>
          <input name="billing_city" type="text" placeholder="" value="{billing_city}">

          <label>State</label>

          <div class="select-wrapper" data-default-text="choose a purpose">
            <span class="select-text">{if billing_region_name}{billing_region_name}{if:else}State{/if}</span>
            <span class="ss-dropdown"></span>
            <select name="billing_state" class="hidden-dropdown">
              {billing_region_options}
            </select>
          </div><!-- select-wrapper -->

          <label>Zip</label>
          <input name="billing_postcode" type="text" placeholder="" value="{billing_postcode}">

          <div class="same-as-billing-text clearfix">
            <div>
              <input type="hidden" name="shipping_same_as_billing" value="0" />
              <!--<input {if shipping_same_as_billing}checked="checked"{/if} class="address-secondary" type="checkbox" id="shipping_same_as_billing" name="shipping_same_as_billing" value="1" /> -->
              <input checked="checked" class="address-secondary" type="checkbox" id="shipping_same_as_billing" name="shipping_same_as_billing" value="1" />
            </div>
            <span>Delivery address same as billing address</span>
          </div>

          <div class="delivery-form">

            <h4>Delivery Information</h4>

            <label>Name</label>
            <input name="shipping_name" type="text" placeholder="" value="{shipping_name}">

            <label>Address</label>
            <input name="shipping_address1" type="text" placeholder="" value="{shipping_address1}">

            <label>Address 2</label>
            <input name="shipping_address2" type="text" placeholder="" value="{shipping_address2}">

            <label>City</label>
            <input name="shipping_city" type="text" placeholder="" value="{shipping_city}">

            <label>State</label>
            <div class="select-wrapper" data-default-text="choose a purpose">
              <span class="select-text">{if shipping_region_name}{shipping_region_name}{if:else}State{/if}</span>
              <span class="ss-dropdown"></span>
              <select name="shipping_state" class="hidden-dropdown">
                {shipping_region_options}
              </select>

            </div><!-- select wrapper -->

            <label>Zip</label>
            <input name="shipping_postcode" type="text" placeholder="" value="{shipping_postcode}">

          </div><!-- address-add -->

        </div><!-- large-3 (billing information) -->

        <div class="columns large-3 large-offset-1">

          <h4>Payment Information</h4>

          <label>Name</label>
          <input data-stripe="name" type="text" placeholder="">

          <label>Credit Card Number</label>
          <input data-stripe="number" type="text" placeholder="">

          <div class="cc-wrap clearfix">

            <div class="cc visa">
              <img class="active" src="/assets/images/cc-visa-active.png" alt="">
              <img src="/assets/images/cc-visa.png" alt="">
            </div>

            <div class="cc mastercard">
              <img class="active" src="/assets/images/cc-mc-active.png" alt="">
              <img src="/assets/images/cc-mc.png" alt="">
            </div>

            <div class="cc discover">
              <img class="active" src="/assets/images/cc-discover-active.png" alt="">
              <img src="/assets/images/cc-discover.png" alt="">
            </div>

            <div class="cc amex">
              <img class="active" src="/assets/images/cc-amex-active.png" alt="">
              <img src="/assets/images/cc-amex.png" alt="">
            </div>

          </div>

          <label>Expiration Month</label>
          <div class="select-wrapper">
            <span class="select-text">January</span>
            <span class="ss-dropdown"></span>
            <select data-stripe="exp-month" id="payment_exp_month" class="hidden-dropdown">
              <option value="01" data-text="January">January</option>
              <option value="02" data-text="February">February</option>
              <option value="03" data-text="March">March</option>
              <option value="04" data-text="April">April</option>
              <option value="05" data-text="May">May</option>
              <option value="06" data-text="June">June</option>
              <option value="07" data-text="July">July</option>
              <option value="08" data-text="August">August</option>
              <option value="09" data-text="September">September</option>
              <option value="10" data-text="October">October</option>
              <option value="11" data-text="November">November</option>
              <option value="12" data-text="December">December</option>
            </select>
          </div>

          <label>Expiration Year</label>
          <div class="select-wrapper">
            <span class="select-text">2013</span>
            <span class="ss-dropdown"></span>
            <select data-stripe="exp-year" id="payment_exp_year" class="hidden-dropdown">
              <option value="2013" data-text="2013">2013</option>
              <option value="2014" data-text="2014">2014</option>
              <option value="2015" data-text="2015">2015</option>
              <option value="2016" data-text="2016">2016</option>
              <option value="2017" data-text="2017">2017</option>
              <option value="2018" data-text="2018">2018</option>
              <option value="2019" data-text="2019">2019</option>
              <option value="2020" data-text="2020">2020</option>
            </select>
          </div>

          <label>Card Verification Number</label>
          <input data-stripe="cvc" type="text" placeholder="">

          <input type="hidden" id="payment_token" name="payment[token]" value="" />
          <input type="hidden" name="payment_method" value="stripe">
          <input type="hidden" name="commit" value="yes" />

          <div class="clearfix submit-button-container">
            <button type="submit" class="btn red place-order">Place Order</button>
            <span><img src="/assets/images/ajax-loader.gif" /></span>
          </div>

        </div>

        <div class="columns large-3 large-offset-1">

          <h4>Review Your Order</h4>

          <p class="delivery-caption">
          </p>

          <ul class="order-review-list">
            {items}
            <li>
              <span class="cart-item-title">
                {title} -
                {modifiers}
                  {modifier_value}
                {/modifiers}
              </span>
              <p class="cart-item-description">
                {item_qty} @ {price}/EA
              </p>
            </li>
            {/items}
            <li>
              <span class="cart-item-title">The BBQ Potato - 20˝</span>
              <p class="cart-item-description">
                1 @ $28/EA
              </p>
            </li>
          </ul>

          <table class="order-totals">
            <tr>
              <td>Subtotal:</td>
              <td>{order_subtotal}</td>
            </tr>
            <tr>
            {if promo_code != ""}
            <tr>
              <td>Discount:</td>
              <td>{order_discount}</td>
            </tr>
            {/if}
            <tr>
              <td>Total</td>
              <td>{order_total}</td>
            </tr>
          </table>

        </div>

      </div><!-- row -->

    </div>

  </section>

</div><!-- page-content-container -->

{/exp:store:checkout}

{!--
{/exp:channel:entries}
{/exp:ce_cache:it}
--}

{if get:app != "true"}
  {snippet:partials-panel_footer}
  {snippet:site-footer}
{/if}

{snippet:site-code_footer}