<template>
<v-container
  fluid
>
  <v-row
    align="center"
    justify="center"
    class="flex-column"
  >
    <v-col
      cols="12"
    >
      <div class="content-wrap">
        <div class="content-body">
          <template>
            <v-card class="card-detail">
              <div class="card-detail-header">
                <v-row>
                  <v-col
                    cols="3"
                  >
                    <v-img
                      src="https://picsum.photos/150/165?random"
                      max-height="130"
                      contain
                    ></v-img>
                  </v-col>
                  <v-col
                    cols="7"
                  >
                    <div class="px-5">
                      <small class="joindate">Join Date: 11/05/2020</small>
                      <h3 class="warehouse-name">Kenco Innovation Lab</h3>
                      <div class="hq-phone">1-800-758-3289</div>
                      <div class="hq-email">debra.phillips@kencogroup.com</div>
                      <div class="hq-website">https://www.kencogroup.com/</div>
                      <div class="hq-address">2001 Riverside Drive Chattanooga, TN 37406</div>
                    </div>
                  </v-col>
                  <v-col
                    class="text-right"
                    cols="2"
                  >
                    <v-menu
                      bottom
                      left
                      transition="slide-y-transition"
                    >
                      <template v-slot:activator="{ on, attrs }">
                        <v-btn
                          small
                        >
                          Go to WIMS
                        </v-btn>
                        <v-btn
                          icon
                          v-bind="attrs"
                          v-on="on"
                        >
                          <v-icon>mdi-dots-vertical</v-icon>
                        </v-btn>
                      </template>
                      <v-list>
                        <v-list-item>
                            <v-list-item-title>Edit</v-list-item-title>
                        </v-list-item>
                        <v-list-item>
                            <v-list-item-title>Delete</v-list-item-title>
                        </v-list-item>
                      </v-list>
                    </v-menu>
                  </v-col>
                </v-row>
              </div>
              <!--/.card-detail-header -->
              <div class="card-detail-body">
                <v-row>
                  <v-col
                    cols="3"
                  >
                  </v-col>
                  <v-col
                    cols="9"
                  >
                    <v-card-title>
                      Contact
                    </v-card-title>
                    <v-card-subtitle>
                      <h4 class="contact-name">Hong Gildong</h4>
                      <div class="hq-position">Officer</div>
                      <div class="hq-phone">1-800-758-3289</div>
                      <div class="hq-email">debra.phillips@kencogroup.com</div>
                      <div class="hq-website">https://www.kencogroup.com/</div>
                      <div class="hq-address">2001 Riverside Drive Chattanooga, TN 37406</div>
                    </v-card-subtitle>
                  </v-col>
                </v-row>

                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn
                    icon
                    @click="show = !show"
                  >
                    <v-icon>{{ show ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
                  </v-btn>
                </v-card-actions>

                <v-expand-transition>
                  <div v-show="show">
                    <v-divider></v-divider>
                    <v-row>
                    <v-col
                      cols="3"
                    >
                    </v-col>
                      <v-col
                        cols="9"
                      >
                        <v-card-title>
                          Optional
                        </v-card-title>
                        <v-card-subtitle>
                          <div>Industry category: -</div>
                          <div>Type of warehouse: -</div>
                          <div>Hours of operation: -</div>
                          <div>Floor plan: -</div>

                          <div>Size of warehouse: -</div>
                          <div>Clear height: -</div>
                          <div>Dimensions of racks: -</div>

                          <div>Inventory counting cycle: -</div>
                          <div>Inventory counting system: -</div>
                          <div># of inventory clerks: -</div>
                        </v-card-subtitle>
                      </v-col>
                    </v-row>
                  </div>
                </v-expand-transition>
              </div>
              <!--/.card-detail-body -->
            </v-card>
          </template>
        </div>
        <!--/.content-body -->
      </div>
      <!--/.content-wrap -->
    </v-col>
  </v-row>
  <v-row
    align="center"
    justify="center"
    class="flex-column"
  >
    <v-col
      cols="12"
    >
      <template>
        <v-card>
          <v-tabs
            v-model="tab"
            background-color="blue-grey"
            dark
          >
            <v-tab
              v-for="item in items"
              :key="item.tab"
            >
              {{ item.tab }}
            </v-tab>
          </v-tabs>

          <v-tabs-items v-model="tab">
            <v-tab-item
              v-for="item in items"
              :key="item.tab"
            >
              <v-card flat class="pa-5">
                <div class="content-wrap">
                  <div class="content-header">
                    <h3>{{ item.tab }}</h3>
                    <v-spacer></v-spacer>
                    <v-chip
                      color="green"
                      text-color="white"
                    >
                      Statement: Active
                    </v-chip>
                    <v-chip
                      color="blue"
                      text-color="white"
                      class="ml-2"
                    >
                      Wifi: Availability
                    </v-chip>
                    <v-btn
                      :loading="isUpdating"
                      depressed
                      @click="isUpdating = true"
                      class="ml-2"
                    >
                      <v-icon left>
                        mdi-update
                      </v-icon>
                      Update Setting
                    </v-btn>
                    <!-- 참고: https://vuetifyjs.com/en/components/autocompletes/#item-and-selection -->
                    <v-btn
                      depressed
                      class="ml-2"
                    >
                      Update WIMS
                    </v-btn>
                    <v-btn
                      depressed
                      class="ml-2"
                    >
                      Reset WMIS Admin password
                    </v-btn>
                  </div>
                  <!--/.content-header -->
                  <div class="content-body" :loading="isUpdating">
                    <template>
                      <v-form>
                        <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
                              value="http://localhost:8080/warehouseDetail"
                              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"
                              value="Rack"
                              required
                            ></v-text-field>
                          </v-col> 
                          <v-col cols="3">                        
                            <v-text-field
                              prefix="level2"
                              value="Bay"
                              required
                            ></v-text-field>
                          </v-col>  
                          <v-col cols="3">                        
                            <v-text-field
                              prefix="level3"
                              value="Row"
                              required
                            ></v-text-field>
                          </v-col>  
                          <v-col cols="3">                        
                            <v-text-field
                              prefix="level4"
                              value="Column"
                              required
                            ></v-text-field>
                          </v-col>
                          <v-col cols="6">
                            <v-text-field
                              label="Admin Email"
                              value="admin@warehoouse.com"
                              required
                            ></v-text-field>     
                          </v-col>
                        </v-row>
                      </v-form>
                    </template>
                  </div>
                  <!--/.content-body -->
                </div>
                <!--/.content-wrap -->
              </v-card>
            </v-tab-item>
          </v-tabs-items>
        </v-card>
      </template>
    </v-col>
  </v-row>
</v-container>
</template>

<script>
  export default {
    name: 'WarehouseDetail',

    data: () => ({
      show: false,

      tab: null,
      items: [
        { tab: 'WIMS Setting' },
      ],
      
      checkbox1: true,
      checkbox2: true,

      isUpdating: false,
    }),

    watch: {
      isUpdating (val) {
        if (val) {
          setTimeout(() => (this.isUpdating = false), 3000)
        }
      },
    },
  }
</script>
