Template

<template>
    <v-container fluid store grid-list-sm>
        <!--        <h1 class="main-title-name uppercase">{{first_name}} {{last_name}}</h1>-->
        <div class="logo">
            <svg
                    class="Icon Icon--logo"
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    width="195.722"
                    height="25"
                    viewBox="0 0 195.722 25"
            >
                <defs>
                    <clipPath id="clip-path">
                        <path
                                id="Path_2"
                                data-name="Path 2"
                                d="M0-7.112H195.722v-25H0Z"
                                transform="translate(0 32.112)"
                        ></path>
                    </clipPath>
                </defs>
                <g id="Group_2" data-name="Group 2" clip-path="url(#clip-path)">
                    <g id="Group_1" data-name="Group 1" transform="translate(0 0)">
                        <path
                                id="Path_1"
                                data-name="Path 1"
                                d="M-4.921-5.039H-15.554l5.412-12.312Zm2.754,6.892h4.18L-8.13-22.358h-3.943L-22.217,1.853h4.14l1.267-3.376H-3.5ZM19.56-15.931c0-2.012,1.774-3.352,4.377-3.352,2.879,0,4.417,1.42,5.047,3.233h4.1c-.868-4.022-3.943-6.7-9.188-6.7-4.889,0-8.241,3.076-8.241,7.176,0,3.9,2.68,5.718,6.033,6.507l4.1.986c2.523.592,3.51,1.577,3.51,3.273,0,2.248-1.854,3.588-4.693,3.588-2.642,0-4.692-1.144-5.481-3.627h-4.18c.867,4.5,4.534,7.1,9.661,7.1,5.008,0,8.636-2.8,8.636-7.334,0-3.628-2.484-5.837-6.27-6.7l-4.22-.986c-2.168-.512-3.194-1.538-3.194-3.154m43.891.243h4.207C66.5-20,63.133-22.753,58.015-22.753c-6.23,0-11,5.047-11,12.5s4.772,12.5,11,12.5c4.863,0,8.177-2.523,9.475-6.547h-4.34A5.457,5.457,0,0,1,58.015-1.46c-4.3,0-6.861-3.746-6.861-8.793,0-5.087,2.6-8.793,6.861-8.793a5.546,5.546,0,0,1,5.436,3.359M83.32,1.853H99.133V-1.814H87.342V-8.754h7.337v-3.588H87.342V-18.73H99.133v-3.628H83.32Zm50.286,0h3.154V-22.358h-3.943v16.8l-14.184-16.8h-3.864V1.853h3.943V-15.774Zm35.722-12.106c0,5.127-3.661,8.833-7.957,8.833s-7.918-3.707-7.918-8.833,3.622-8.833,7.918-8.833,7.957,3.707,7.957,8.833m4.178,0a12.163,12.163,0,0,0-12.135-12.5,12.13,12.13,0,0,0-12.1,12.5,12.155,12.155,0,0,0,12.1,12.5,12.187,12.187,0,0,0,12.135-12.5"
                                transform="translate(22.217 22.753)"
                        ></path>
                    </g>
                </g>
            </svg>
        </div>
        <!--        <h3 class="sub-title-name">STORE</h3>-->
        <v-form v-model="valid" ref="form">
            <v-layout row wrap justify-center fill-height>
                <v-flex d-flex xs12 sm6>
                    <v-layout column>
                        <v-flex d-flex>
                            <v-card color="#D3D3D3" light tile flat>
                                <v-card-title primary-title>
                                    <h3>Your Appointment</h3>
                                </v-card-title>
                                <v-card-text class="card-text-left text-line-bx">
                                    When would you like
                                    your pieces to arrive?
                                </v-card-text>
                                <v-card-text class="card-date-time-bx">
                                    <v-layout row wrap>
                                        <v-flex xs12 sm6 md4 choose-date class="choosedate-bx">
                                            <v-select
                                                    :items="date"
                                                    prepend-inner-icon="event"
                                                    v-model="dateValue"
                                                    box
                                                    solo
                                                    label="Choose date"
                                                    class="date-time"
                                                    @change="onChange($event)"
                                                    :rules="dateRules"
                                            ></v-select>
                                        </v-flex>
                                        <v-flex xs12 sm6 md4 choose-time class="chooosetime-bx">
                                            <v-select
                                                    :items="time"
                                                    prepend-inner-icon="schedule"
                                                    box
                                                    solo
                                                    v-model="timeValue"
                                                    label="Choose time"
                                                    class="date-time"
                                                    :rules="timeRules"
                                            ></v-select>
                                        </v-flex>
                                </v-card-text>
                            </v-card>
                        </v-flex>

                        <v-flex d-flex>
                            <v-card color="#D3D3D3" light tile flat>
                                <v-card-title primary-title>
                                    <div>
                                        <h3>Delivery Address</h3>
                                    </div>
                                </v-card-title>
                                <v-text-field
                                        v-model="address1"
                                        v-if="isActive"
                                        label="Address *"
                                        :rules="address1Rules"
                                        @change="changeAddress()"
                                        box
                                ></v-text-field>
                                <v-text-field
                                        v-model="address2"
                                        v-if="isActive"
                                        label="Apartment, suite, etc. (optional)"
                                        @change="changeAddress()"
                                        box
                                ></v-text-field>

                                <v-text-field
                                        v-model="city"
                                        v-if="isActive"
                                        label="City *"
                                        box
                                        :rules="cityRules"
                                        @change="changeAddress()"
                                ></v-text-field>
                                <v-text-field
                                        v-model="postcode"
                                        v-if="isActive"
                                        label="Postcode *"
                                        box
                                        :rules="postcodeRules"
                                        @change="changeAddress()"
                                ></v-text-field>

                                <vue-google-autocomplete
                                        v-if="!isActive"
                                        ref="address"
                                        id="map"
                                        box
                                        placeResultData
                                        class="form-control google-autocomplete"
                                        placeholder="Please type your address"
                                        v-on:placechanged="getAddressData"
                                        v-model="address"
                                ></vue-google-autocomplete>
                            </v-card>
                        </v-flex>
                        <v-flex d-flex>
                            <v-card color="#D3D3D3" light tile flat>
                                <v-card-title primary-title>
                                    <div>
                                        <h3>Your Details</h3>
                                    </div>
                                </v-card-title>
                                <v-text-field
                                        v-model="email"
                                        label="E-mail *"
                                        box
                                        :rules="emailRules"
                                ></v-text-field>
                                <div>
                                    <div>
                                        <v-flex class="custom-layout-left" xs12 md6>
                                            <v-text-field
                                                    class="namefield"
                                                    v-model="first_name"
                                                    label="First Name *"
                                                    box
                                                    :rules="firstNameRules"
                                            ></v-text-field>
                                        </v-flex>
                                    </div>
                                    <div>
                                        <v-flex class="custom-layout-right" xs12 md6>
                                            <v-text-field
                                                    class="namefiled"
                                                    v-model="last_name"
                                                    label="Last Name *"
                                                    box
                                                    :rules="lastNameRules"
                                            ></v-text-field>
                                        </v-flex>
                                    </div>
                                </div>
                                <div class="contact-bx">
                                    <v-text-field
                                            v-model="contact_number"
                                            label="Contact Number *"
                                            box
                                            :rules="contactNumberRules"
                                    ></v-text-field>
                                </div>
                            </v-card>
                        </v-flex>
                        <v-flex d-flex>
                            <v-card color="#D3D3D3" light tile flat>
                                <v-card-title primary-title>
                                    <div>
                                        <h3>Your Notes</h3>
                                    </div>
                                </v-card-title>
                                <v-textarea
                                        v-model="notes"
                                        label="Add a note for our style concierge team who can help you with extra sizes or pieces"
                                        @change="changeAddress()"
                                        box
                                ></v-textarea>
                            </v-card>
                        </v-flex>
                    </v-layout>
                </v-flex>
                <v-flex d-flex xs12 sm4 class="selection">
                    <v-layout row wrap>
                        <v-flex d-flex class="selection-overauto">
                            <v-card light tile flat class="selection-background-auto">
                                <v-card-text>
                                    <div
                                            id="e3"
                                            class="lighten-3 new-grey-none card-selectin-width"
                                    >
                                        <v-toolbar-title>
                                            <h3>Your Selection</h3>
                                        </v-toolbar-title>
                                        <v-flex xs12 class="selection-bx selection-flex-bx">
                                            <v-card
                                                    class="black--text new-v-card"
                                                    :key="item.id"
                                                    v-for="item in cartDetails"
                                            >
                                                <v-layout class="layout-height-bx layout-bottom">
                                                    <v-flex xs4 class="your-select-flex">
                                                        <v-img
                                                                :src="item.images[0].url"
                                                                height="125px"
                                                                contain
                                                        ></v-img>
                                                    </v-flex>
                                                    <v-flex xs8 class="your-select-flex">
                                                        <div>
                                                            <div class="selection-details-bx">
                                                                <label
                                                                        class="headline"
                                                                >{{item.name}}</label>
                                                                <label class="color-size-font">
                                                                    Color: {{item.colour}} /
                                                                    Size: {{ item.size }}
                                                                </label>
                                                            </div>
                                                            <div>
                                                                <v-card-actions class="pa-3">
                                                                    <label
                                                                            class="qty-label headline2"
                                                                    >Qty: {{item.qty}}</label>
                                                                    <v-spacer></v-spacer>
                                                                    <label class="qty-label">
                                                                        £
                                                                        <label
                                                                                class="headline3"
                                                                        >{{item.price.toString().slice(0, -2)}}</label>
                                                                    </label>
                                                                </v-card-actions>
                                                            </div>
                                                        </div>
                                                    </v-flex>
                                                </v-layout>
                                            </v-card>
                                        </v-flex>
                                        <v-card-actions class="total-bx2">
                                            <label class="total-label-change headline">Service fee</label>
                                            <v-spacer></v-spacer>
                                            <label class="total-label-change">
                                                £
                                                <label class="headline3">FREE</label>
                                            </label>
                                        </v-card-actions>
                                        <v-card-actions class="total-bx3">
                                            <label
                                                    class="total-label-change headline"
                                            >Free for a limited time only</label>
                                            <v-spacer></v-spacer>
                                        </v-card-actions>
                                        <v-card-actions class="total-bx">
                                            <label class="total-label-change headline">Today you pay</label>
                                            <v-spacer></v-spacer>
                                            <label class="total-label-change">
                                                £
                                                <label class="headline3">0</label>
                                            </label>
                                        </v-card-actions>
                                    </div>
                                </v-card-text>
                            </v-card>
                        </v-flex>
                        <v-card-text>
                            <div class="lighten-3 new-grey-none card-selectin-width">
                                <v-flex xs12 class="selection-bx selection-flex-bx">
                                    <v-flex d-flex v-if="!form_valid">
                                        <div>
                                            <label
                                                    class="can-return invalid-form"
                                            >Please check all fields and try again</label>
                                        </div>
                                    </v-flex>

                                    <v-flex d-flex class="confirm-appo-flex">
                                        <v-btn
                                                class="confirm-button"
                                                @click="submit"
                                                :disabled="confirmButtonIsDisabled"
                                        >Confirm Appointment
                                        </v-btn>
                                    </v-flex>
                                </v-flex>
                            </div>
                        </v-card-text>

                        <v-flex d-flex>
                            <div class="cancel-btn">
                                <a class="can-return" :href="return_url">Cancel and back to site</a>
                            </div>
                        </v-flex>
                    </v-layout>
                </v-flex>
            </v-layout>
        </v-form>
        <v-divider class="custom-divider"></v-divider>
        <v-footer class="justify-center footer-new-height new-footer-checkout">
            <h3>
                <strong class="brought-you">Brought to you by</strong>
                <img src="../assets/Logo.svg" height="90" width="90">
            </h3>
        </v-footer>
    </v-container>
</template>