<v-stepper v-model="step" class='checkout-stepper' hidden>
<v-stepper-header>
<v-stepper-step step="1" :complete="step > 1">
Guest's Name
<small>(optional)</small>
</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="2" :complete="step > 2">
Shipping Address
</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="3">
Checkout
</v-stepper-step>
</v-stepper-header>
<v-stepper-content step="1">
<div>
<v-text-field
placeholder="Enter guest's name here (optional)"
hint-persistent
hint=""
class="input-group"
v-model="guestName">
</v-text-field>
<p>
This is optional, and <b>free of charge</b>.
</p>
<p>
Enter you guest's name if you want it to appear on the crate.
<br>
You can <a href="" @click.prevent="step = 2">skip</a> this step.
</p>
</div>
<v-btn primary @click.native="step = 2">Continue</v-btn>
</v-stepper-content>
<v-stepper-content step="2">
<div>
<p>
Where are we shipping to?
</p>
<p>
<small>
Tip: If you can't make it to your property to leave the crate
inside, you can have it shipped directly to the property
and let the guests know that there is a package for them
at the door when they arrive!
</small>
</p>
<v-form ref='form2'>
<v-layout row>
<v-card flat>
<v-card-text>
</v-card-text>
</v-card>
</v-layout>
<v-layout row-sm column child-flex-sm>
<!-- Shipping address -->
<v-card flat>
</v-card-text>
</v-card>
<!-- shipping city -->
<v-layout row wrap>
<v-flex xs12 sm4 md4>
<v-card flat>
<v-card-text>
</v-card-text>
</v-card>
</v-flex>
<!-- shipping state -->
<v-flex xs12 sm4 md4>
<v-card flat>
<v-card-text>
</v-card-text>
</v-card>
</v-flex>
<!-- shipping zip -->
<v-flex xs12 sm4 md4>
<v-card flat>
<v-card-text>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-layout>
</v-form>
</div>
<v-btn accent @click.native='step = 1'>Back</v-btn>
<v-btn primary @click.native="goToStep3">Continue</v-btn>
</v-stepper-content>
<v-stepper-content step="3">
<v-form ref='form3'>
<v-layout row wrap>
<!-- cc fields -->
<v-flex>
<v-card flat class="ma-1 payment-option">
<v-card-text>
<!-- icons -->
<v-card flat>
<v-card-text class='payment-icons'>
<img src="/icons/payments/visa.png" alt="">
<img src="/icons/payments/mastercard.png" alt="">
<img src="/icons/payments/americanexpress.png" alt="">
<img src="/icons/payments/discover.png" alt="">
<a href="">
click here to pay with paypal
</a>
</v-card-text>
</v-card>
<!-- CC number -->
<v-layout>
<v-flex>
<v-card flat>
<v-card-text>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
<!-- CVC, exp -->
<v-layout>
<v-flex>
<v-card flat>
<v-card-text>
<div>Security Code</div>
<div id='cardCvc-mount'></div>
<div class="input-error" v-if='ccCvcError'>{{ccCvcError}}</div>
</v-card-text>
</v-card>
</v-flex>
<v-flex>
<v-card flat>
<v-card-text>
<div>Expiration</div>
<div id='cardExpiry-mount'></div>
<div class="input-error" v-if="ccExpiryError">{{ ccExpiryError }}</div>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
<!-- email, pay button -->
<v-layout>
<v-flex>
<v-card flat>
<v-card-text>
<v-text-field
label='Your e-mail'
:rules="rules.email"
v-model='$store.state.email'
persistent-hint
hint="Your receipt will be sent here">
</v-text-field>
</v-card-text>
</v-card>
<v-btn
block
primary
large
:loading='isSubmitting'
@click='handleCreditCardSubmit'
class="pay-button">
<v-icon left dark>lock</v-icon>
PAY ${{$store.getters.total}}
</v-btn>
</v-flex>
</v-layout>
<!-- /email, pay button -->
</v-card-text>
</v-card>
</v-flex>
<!-- /cc -->
<!-- Summary -->
<v-flex>
<v-card flat class="ma-1">
<v-card-text>
<div class="summary">
<h5>Order Summary</h5>
<div class="summary-items">
<div v-for="(crate, key) in $store.state.crates" :key='key'>
<div>
<input type="text" v-model='$store.state.crates[key].quantity' :value='$store.state.crates[key].quantity'> {{key}} crate
</div>
</div>
</div>
<div class="summary-premium">
<v-switch label="Use Premium crates?"
v-model="$store.state.usePremium"
color="primary"
hide-details>
</v-switch>
</div>
<div class="summary-shipping">
<div>
<h6>Shipping to:</h6>
</div>
{{$store.state.checkout.shipping.name}}<br>
{{$store.state.checkout.shipping.address}}<br>
{{$store.state.checkout.shipping.city}},
{{$store.state.checkout.shipping.state}}
{{$store.state.checkout.shipping.zip}}
</div>
<div class="summary-total" style="display: none">
<span>Total:</span>
<span>{{total}}</span>
</div>
</div>
<!--
<v-flex hidden-sm-and-up>
<v-btn
block
primary
large
:loading='isSubmitting'
@click='handleCreditCardSubmit'
class="pay-button">
<v-icon left dark>lock</v-icon>
PAY ${{$store.getters.total}}
</v-btn>
</v-flex>
-->
</v-card-text>
</v-card>
</v-flex>
<!-- /summary -->
</v-layout>
<v-card v-if='ccSubmitError'>
<v-card-text>
<v-alert error value="true">
{{ ccSubmitError }}
</v-alert>
</v-card-text>
</v-card>
<!-- back button -->
<v-card-text>
<v-btn accent @click.native="step = 2"> Back</v-btn>
</v-card-text>
</v-form>
</v-stepper-content>
</v-stepper>