<template>
<v-container>
  <v-row
    align="center"
    justify="center"
    class="flex-column"
  >
    <v-col
      cols="12"
    >
      <div class="content-wrap">
        <div class="content-action">
          <v-spacer></v-spacer>
          <v-btn
            depressed
            color="primary"
            dark
          >
            save
          </v-btn>
          <v-btn
            depressed
            class="ml-2"
          >
            Cancel
          </v-btn>
        </div>
        <!--/.content-action -->
        <div class="content-header">
        </div>
        <!--/.content-header -->
        <div class="content-body">
          <v-stepper 
            v-model="e1" 
            vertical
            non-linear>
            <v-stepper-step
              :complete="e1 > 1"
              step="1"
              editable
            >
              Company
              <small>Summarize if needed</small>
            </v-stepper-step>            
            <v-stepper-content step="1">
              <template>
                <v-expansion-panels v-model="panel1" multiple accordion focusable>
                  <v-expansion-panel>
                    <v-expansion-panel-header>
                      Company information
                    </v-expansion-panel-header>
                    <v-expansion-panel-content>
                      <template>
                        <v-form
                          ref="form"
                          v-model="valid"
                          lazy-validation
                        >
                          <v-row>
                            <v-col cols="4">
                              <v-file-input 
                                label="File input"
                                counter
                                show-size
                                truncate-length="15"
                                @change="Preview_image"
                                v-model="image"
                                required
                                >
                              </v-file-input>
                              <v-img :src="url"></v-img>
                              <v-text-field
                                v-model="email"
                                :rules="emailRules"
                                label="Website"
                                required
                              ></v-text-field>  
                            </v-col>
                            <v-col cols="4">
                              <v-combobox
                                v-model="name"
                                :items="nameItems"
                                :rules="nameRules"
                                label="Company Name"
                                required
                              ></v-combobox>

                              <v-text-field
                                v-model="email"
                                :rules="emailRules"
                                label="Phone"
                                :append-outer-icon="'mdi-plus'"
                                @click:append-outer="addPhoneInput"
                                required
                              ></v-text-field>  
                              <!-- 참고: https://vuetifyjs.com/en/components/text-fields/#icon-events -->

                              <v-text-field
                                v-model="email"
                                :rules="emailRules"
                                label="E-mail"
                                :append-outer-icon="'mdi-minus'"
                                @click:append-outer="addEmailInput"
                                required
                              ></v-text-field>    
                            </v-col>
                            <v-col cols="4">
                              <!-- 참고: https://vuetifyjs.com/en/components/text-fields/#misc -->
                              <v-text-field
                                ref="address"
                                v-model="address"
                                :rules="[
                                  () => !!address || 'This field is required',
                                  () => !!address && address.length <= 25 || 'Address must be less than 25 characters',
                                  addressCheck
                                ]"
                                label="Address Line"
                                counter="25"
                                required
                              ></v-text-field>
                              <v-text-field
                                ref="city"
                                v-model="city"
                                :rules="[() => !!city || 'This field is required', addressCheck]"
                                label="City"
                                required
                              ></v-text-field>
                              <v-text-field
                                ref="state"
                                v-model="state"
                                :rules="[() => !!state || 'This field is required']"
                                label="State/Province/Region"
                                required
                              ></v-text-field>
                              <v-text-field
                                ref="zip"
                                v-model="zip"
                                :rules="[() => !!zip || 'This field is required']"
                                label="ZIP / Postal Code"
                                required
                              ></v-text-field>
                              <v-autocomplete
                                ref="country"
                                v-model="country"
                                :rules="[() => !!country || 'This field is required']"
                                :items="countries"
                                label="Country"
                                required
                              ></v-autocomplete>
     
                            </v-col>
                          </v-row>
                        </v-form>
                      </template>
                    </v-expansion-panel-content>
                  </v-expansion-panel>

                  <v-expansion-panel>
                    <v-expansion-panel-header>
                      Contact 
                    </v-expansion-panel-header>
                    <v-expansion-panel-content>
                      <template>
                        <v-form
                          ref="form"
                          v-model="valid"
                          lazy-validation
                        >
                          <v-row>
                            <v-col cols="4">
                            </v-col>
                            <v-col cols="4">
                              <v-text-field
                                v-model="name"
                                :rules="nameRules"
                                label="Contact Name"
                                required
                              ></v-text-field>
                              
                              <v-text-field
                                v-model="name"
                                :rules="nameRules"
                                label="Title/Position/Authority"
                                required
                              ></v-text-field>

                              <v-text-field
                                v-model="email"
                                :rules="emailRules"
                                label="Phone"
                                :append-outer-icon="'mdi-plus'"
                                @click:append-outer="addPhoneInput"
                                required
                              ></v-text-field>  
                              <!-- 참고: https://vuetifyjs.com/en/components/text-fields/#icon-events -->

                              <v-text-field
                                v-model="email"
                                :rules="emailRules"
                                label="E-mail"
                                :append-outer-icon="'mdi-minus'"
                                @click:append-outer="addEmailInput"
                                required
                              ></v-text-field>    
                            </v-col>
                            <v-col cols="4">
                              <!-- 참고: https://vuetifyjs.com/en/components/text-fields/#misc -->
                              <v-text-field
                                ref="address"
                                v-model="address"
                                :rules="[
                                  () => !!address || 'This field is required',
                                  () => !!address && address.length <= 25 || 'Address must be less than 25 characters',
                                  addressCheck
                                ]"
                                label="Address Line"
                                counter="25"
                                required
                              ></v-text-field>
                              <v-text-field
                                ref="city"
                                v-model="city"
                                :rules="[() => !!city || 'This field is required', addressCheck]"
                                label="City"
                                required
                              ></v-text-field>
                              <v-text-field
                                ref="state"
                                v-model="state"
                                :rules="[() => !!state || 'This field is required']"
                                label="State/Province/Region"
                                required
                              ></v-text-field>
                              <v-text-field
                                ref="zip"
                                v-model="zip"
                                :rules="[() => !!zip || 'This field is required']"
                                label="ZIP / Postal Code"
                                required
                              ></v-text-field>
                              <v-autocomplete
                                ref="country"
                                v-model="country"
                                :rules="[() => !!country || 'This field is required']"
                                :items="countries"
                                label="Country"
                                required
                              ></v-autocomplete>
     
                            </v-col>
                          </v-row>
                        </v-form>
                      </template>
                    </v-expansion-panel-content>
                  </v-expansion-panel>

                  <v-expansion-panel>
                    <v-expansion-panel-header>
                      Optional
                    </v-expansion-panel-header>
                    <v-expansion-panel-content>
                      <template>
                        <v-form
                          ref="form"
                          v-model="valid"
                          lazy-validation
                        >
                          <v-row>
                            <v-col cols="4">
                              <v-text-field
                                label="Total warehouses"
                              ></v-text-field>  
                            </v-col>
                          </v-row>
                        </v-form>
                      </template>
                    </v-expansion-panel-content>
                  </v-expansion-panel>
                </v-expansion-panels>
              </template>
              
              <v-btn
                color="primary"
                @click="e1 = 2"
                class="mt-5"
              >
                Add warehouse
              </v-btn>
            </v-stepper-content>

            <v-stepper-step
              :complete="e1 > 2"
              step="2"
              editable
            >
              Warehouse
            </v-stepper-step>
            <v-stepper-content step="2">
              <template>
                <v-expansion-panels v-model="panel2" multiple accordion focusable>
                  <v-expansion-panel>
                    <v-expansion-panel-header>
                      Warehouse information
                    </v-expansion-panel-header>
                    <v-expansion-panel-content>
                      <template>
                        <v-form
                          ref="form"
                          v-model="valid"
                          lazy-validation
                        >
                          <v-row>
                            <v-col cols="4">
                              <v-file-input 
                                label="File input"
                                counter
                                show-size
                                truncate-length="15"
                                @change="Preview_image"
                                v-model="image"
                                required
                                >
                              </v-file-input>
                              <v-img :src="url"></v-img>
                              <v-text-field
                                v-model="email"
                                :rules="emailRules"
                                label="Website"
                                required
                              ></v-text-field>  
                            </v-col>
                            <v-col cols="4">
                              <v-combobox
                                v-model="name"
                                :items="nameItems"
                                :rules="nameRules"
                                label="Warehouse Name"
                                required
                              ></v-combobox>

                              <v-text-field
                                v-model="email"
                                :rules="emailRules"
                                label="Phone"
                                :append-outer-icon="'mdi-plus'"
                                @click:append-outer="addPhoneInput"
                                required
                              ></v-text-field>  
                              <!-- 참고: https://vuetifyjs.com/en/components/text-fields/#icon-events -->

                              <v-text-field
                                v-model="email"
                                :rules="emailRules"
                                label="E-mail"
                                :append-outer-icon="'mdi-minus'"
                                @click:append-outer="addEmailInput"
                                required
                              ></v-text-field>    
                            </v-col>
                            <v-col cols="4">
                              <!-- 참고: https://vuetifyjs.com/en/components/text-fields/#misc -->
                              <v-text-field
                                ref="address"
                                v-model="address"
                                :rules="[
                                  () => !!address || 'This field is required',
                                  () => !!address && address.length <= 25 || 'Address must be less than 25 characters',
                                  addressCheck
                                ]"
                                label="Address Line"
                                counter="25"
                                required
                              ></v-text-field>
                              <v-text-field
                                ref="city"
                                v-model="city"
                                :rules="[() => !!city || 'This field is required', addressCheck]"
                                label="City"
                                required
                              ></v-text-field>
                              <v-text-field
                                ref="state"
                                v-model="state"
                                :rules="[() => !!state || 'This field is required']"
                                label="State/Province/Region"
                                required
                              ></v-text-field>
                              <v-text-field
                                ref="zip"
                                v-model="zip"
                                :rules="[() => !!zip || 'This field is required']"
                                label="ZIP / Postal Code"
                                required
                              ></v-text-field>
                              <v-autocomplete
                                ref="country"
                                v-model="country"
                                :rules="[() => !!country || 'This field is required']"
                                :items="countries"
                                label="Country"
                                required
                              ></v-autocomplete>
     
                            </v-col>
                          </v-row>
                        </v-form>
                      </template>
                    </v-expansion-panel-content>
                  </v-expansion-panel>

                  <v-expansion-panel>
                    <v-expansion-panel-header>
                      Contact 
                    </v-expansion-panel-header>
                    <v-expansion-panel-content>
                      <template>
                        <v-form
                          ref="form"
                          v-model="valid"
                          lazy-validation
                        >
                          <v-row>
                            <v-col cols="4">
                            </v-col>
                            <v-col cols="4">
                              <v-text-field
                                v-model="name"
                                :rules="nameRules"
                                label="Contact Name"
                                required
                              ></v-text-field>
                              
                              <v-text-field
                                v-model="name"
                                :rules="nameRules"
                                label="Title/Position/Authority"
                                required
                              ></v-text-field>

                              <v-text-field
                                v-model="email"
                                :rules="emailRules"
                                label="Phone"
                                :append-outer-icon="'mdi-plus'"
                                @click:append-outer="addPhoneInput"
                                required
                              ></v-text-field>  
                              <!-- 참고: https://vuetifyjs.com/en/components/text-fields/#icon-events -->

                              <v-text-field
                                v-model="email"
                                :rules="emailRules"
                                label="E-mail"
                                :append-outer-icon="'mdi-minus'"
                                @click:append-outer="addEmailInput"
                                required
                              ></v-text-field>    
                            </v-col>
                            <v-col cols="4">
                              <!-- 참고: https://vuetifyjs.com/en/components/text-fields/#misc -->
                              <v-text-field
                                ref="address"
                                v-model="address"
                                :rules="[
                                  () => !!address || 'This field is required',
                                  () => !!address && address.length <= 25 || 'Address must be less than 25 characters',
                                  addressCheck
                                ]"
                                label="Address Line"
                                counter="25"
                                required
                              ></v-text-field>
                              <v-text-field
                                ref="city"
                                v-model="city"
                                :rules="[() => !!city || 'This field is required', addressCheck]"
                                label="City"
                                required
                              ></v-text-field>
                              <v-text-field
                                ref="state"
                                v-model="state"
                                :rules="[() => !!state || 'This field is required']"
                                label="State/Province/Region"
                                required
                              ></v-text-field>
                              <v-text-field
                                ref="zip"
                                v-model="zip"
                                :rules="[() => !!zip || 'This field is required']"
                                label="ZIP / Postal Code"
                                required
                              ></v-text-field>
                              <v-autocomplete
                                ref="country"
                                v-model="country"
                                :rules="[() => !!country || 'This field is required']"
                                :items="countries"
                                label="Country"
                                required
                              ></v-autocomplete>
     
                            </v-col>
                          </v-row>
                        </v-form>
                      </template>
                    </v-expansion-panel-content>
                  </v-expansion-panel>

                  <v-expansion-panel>
                    <v-expansion-panel-header>
                      Optional
                    </v-expansion-panel-header>
                    <v-expansion-panel-content>
                      <template>
                        <v-form
                          ref="form"
                          v-model="valid"
                          lazy-validation
                        >
                          <v-row>
                            <v-col cols="4">
                              <v-text-field
                                label="Industry category"
                              ></v-text-field> 
                              <v-text-field
                                label="Type of warehouse"
                              ></v-text-field> 
                              <v-text-field
                                label="Hours of operation"
                              ></v-text-field> 
                              <v-text-field
                                label="Floor plan"
                              ></v-text-field> 
                            </v-col>
                            <v-col cols="4">
                              <v-text-field
                                label="Size of warehouse"
                              ></v-text-field>  
                              <v-text-field
                                label="Clear height"
                              ></v-text-field> 
                              <v-text-field
                                label="Dimensions of racks"
                              ></v-text-field>  
                            </v-col>
                            <v-col cols="4">
                              <v-text-field
                                label="Inventory counting cycle"
                              ></v-text-field>  
                              <v-text-field
                                label="Inventory counting system"
                              ></v-text-field> 
                              <v-text-field
                                label="# of inventory clerks"
                              ></v-text-field> 
                            </v-col>
                          </v-row>
                        </v-form>
                      </template>
                    </v-expansion-panel-content>
                  </v-expansion-panel>                  

                  <v-expansion-panel>
                    <v-expansion-panel-header>
                      WIMS Setting 
                    </v-expansion-panel-header>
                    <v-expansion-panel-content>
                      <template>
                        <v-form
                          ref="form"
                          v-model="valid"
                          lazy-validation
                        >
                          <v-row>
                            <v-col cols="12" class="d-flex">
                              <v-checkbox
                                v-model="checkbox1"
                                label="Active WIMS"
                              ></v-checkbox>
                              <v-checkbox
                                v-model="checkbox2"
                                label="WiFi Availability"
                                class="ml-5"
                              ></v-checkbox>
                            </v-col>
                            <v-col cols="12">
                              <v-text-field
                                v-model="name"
                                :rules="nameRules"
                                label="url"
                                required
                              ></v-text-field>
                            </v-col>
                            <v-col cols="6">
                              <v-text-field
                                value="Chattanooga, TN, USA 12/28/2020 06:50 (UTC-8)"
                                label="Location & Location time zone"
                                disabled
                              ></v-text-field>
                            </v-col>
                            <v-col cols="6">
                              <v-text-field
                                value="English"
                                label="Language"
                                disabled
                              ></v-text-field> 
                            </v-col>
                            <v-col cols="3">                        
                              <v-text-field
                                prefix="level1"
                                required
                              ></v-text-field>
                            </v-col> 
                            <v-col cols="3">                        
                              <v-text-field
                                prefix="level2"
                                required
                              ></v-text-field>
                            </v-col>  
                            <v-col cols="3">                        
                              <v-text-field
                                prefix="level3"
                                required
                              ></v-text-field>
                            </v-col>  
                            <v-col cols="3">                        
                              <v-text-field
                                prefix="level4"
                                required
                              ></v-text-field>
                            </v-col>
                            <v-col cols="6">
                              <v-text-field
                                label="Admin Email"
                                required
                              ></v-text-field>     
                            </v-col>
                          </v-row>
                        </v-form>
                      </template>
                    </v-expansion-panel-content>
                  </v-expansion-panel>
                </v-expansion-panels>
              </template>

              <v-btn
                color="primary"
                @click="e1 = 2"
                class="mt-5"
              >
                Add warehouse
              </v-btn>

            </v-stepper-content>
          </v-stepper>
        </div>
        <!--/.content-body -->
      </div>
      <!--/.content-wrap -->
    </v-col>
  </v-row>
</v-container>
</template>

<script>
  export default {
    name: 'CustomerNew',
    data () {
      return {
        e1: 1,
        panel1: [0,1,2,3],
        panel2: [0,1,2,3],
        checkbox1: true,
        checkbox2: true,

        valid: true,
        url: null,
        image: null,
        name: '',
        nameItems: [
          'Kenco Innovation Lab1',
          'Kenco Innovation Lab2',
          'Kenco Innovation Lab3',
          'Kenco Innovation Lab4',
        ],
        nameRules: [
          v => !!v || 'Name is required',
          v => (v && v.length <= 30) || 'Name must be less than 30 characters',
        ],
        email: '',
        emailRules: [
          v => !!v || 'E-mail is required',
          v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
        ],        
      }
    },
    methods: {
      Preview_image() {
        this.url= URL.createObjectURL(this.image)
      },
      addPhoneInput () {
        this.clearMessage()
      },
      addEmailInput () {
        this.clearMessage()
      },
    }
  }
</script>
