<template>
	<v-container fluid>
		<v-row>
			<v-col cols="12" md="4">
				<v-card flat class="pa-4">
					<div>
						<div>Unique ID: {{ resourceData_.unique_id }}</div>
						<div>Name: {{ resourceData_.name }}</div>
						<div>Terminal ID: {{ resourceData_.terminal_id }}</div>
						<div>Total Boxes : {{ resourceData_.boxes_count }}</div>
						<div v-if="resourceData_.partner">Manage By: {{ resourceData_.partner.full_name }}</div>
						<div v-if="resourceData_.available_box_types">{{ resourceData_.available_box_types.map((item)=>item.title) }}</div>
					</div>
					<div class="mt-2">
						<v-btn
							v-if="$authUser.isAdmin()"
							outlined small block
							class="text-capitalize"
							@click="prepareEdit()"
						>
							<v-icon left small>mdi-pencil</v-icon> Edit Locker
						</v-btn>
					</div>
				</v-card>
			</v-col>
			<v-col cols="12" md="8">
				<div class="relative">
					<v-slide-group
						v-model="step"
						center-active mandatory show-arrows
					>
						<v-slide-item
							v-for="(tab_item,i) in tab_items"
							:key="i"
							v-slot="{ active, toggle }"
						>
							<v-btn
								text
								class="text-capitalize"
								:input-value="active" active-class="primary--text rounded-b-0"
								@click="toggle"
							>
								{{ tab_item.title }}
							</v-btn>
						</v-slide-item>
					</v-slide-group>
				</div>
				<v-divider class="ma-0"></v-divider>
				<v-window v-model="step">
					<v-window-item>
						<v-row class="ma-0">
							<v-col cols="12">
								<div 
									v-for="(content,i) in [
										{ title : 'address', value: resourceData_.address },
										{ title : 'state', value: resourceData_.state },
										{ title : 'city', value: resourceData_.city },
										{ title : 'pos code', value: resourceData_.pos_code },
										{ title : 'last echo at', value: resourceData_.last_echo_at },
									]"
									:key="i"
									class="pb-1"
								>
									<span class="font-weight-bold text-capitalize">{{ content.title }}:</span>
									<span>{{ content.value }}</span>
								</div>
								<div class="font-weight-bold py-1">Location:</div>
								<GmapMap
									v-if="resourceData_.longitude != 0"
									:center="location_position"
									:zoom="7"
									map-type-id="terrain"
									style="width: 100%; height: 300px"
								>
									<GmapMarker
										:position="location_position"
									/>
								</GmapMap>
							</v-col>
						</v-row>
					</v-window-item>
					<v-window-item>
						<locker-box-list
							:locker="resourceData_"
							@initialize="initialize_()"
						></locker-box-list>
					</v-window-item>
					<v-window-item>
						<LockerScheduleList
							:locker="resourceData_"
							@initialize="initialize_()"
						></LockerScheduleList>
					</v-window-item>
					<v-window-item>
						<OverdrawnBoxInventory
							:locker="resourceData_"
							@initialize="initialize_()"
						></OverdrawnBoxInventory>
					</v-window-item>
					<!-- <v-window-item>
						<PenalizeVault
							:locker="resourceData_"
							@initialize="initialize_()"
						></PenalizeVault>
					</v-window-item> -->
					<v-window-item>
						<LockerBanner
							:locker="resourceData_"
							@initialize="initialize_()"
						></LockerBanner>
					</v-window-item>
				</v-window>
			</v-col>
		</v-row>

		<v-dialog v-model="form_dialog_" max-width="550px" persistent>
			<LockerForm
				:item="form_item_" :action="form_action_" :visible.sync="form_dialog_"
				:role-type="options_.user_type"
				@initialize="initialize_()"
			></LockerForm>
		</v-dialog>
	</v-container>
</template>

<script>
// import WDropdownMenu from "@components/WDropdownMenu"
import { resourceMixin } from "@/js/mixins/ResourceMixin"
import { formActionMixin } from "@/js/mixins/FormActionMixin"
import { errorHandlerMixin } from "@/js/mixins/ErrorHandlerMixin"
import LockerForm from "./LockerForm"
import LockerBoxList from "@views/LockerBoxes/LockerBoxList"
import OverdrawnBoxInventory from "@views/BoxInventories/OverdrawnBoxInventory"
//import PenalizeVault from "@views/BoxInventories/PenalizeVault"
import LockerBanner from "@views/BoxInventories/LockerBanner"
import LockerScheduleList from "@views/LockerSchedules/LockerScheduleList"
export default{
	components: {
		// WDropdownMenu,
		LockerForm,
		LockerBoxList,
		OverdrawnBoxInventory,
		//PenalizeVault,
		LockerScheduleList,
		LockerBanner,
	},
	mixins: [
		resourceMixin,
		formActionMixin,
		errorHandlerMixin
	],
	data(){
		return {
			infoID: null,
			action: '',
			step: 0,
			tab_items: [
				{ title: "Overview" },
				{ title: "Boxes" },
				{ title: "Non-Operating Hours" },
				{ title: "Overdrawn Booking" },
				// { title: "Penalize Vault" },
				{ title: "Banner" },
			],
			refs:{},
			dialog: false,
			markers:[],

			location_position: {
				lat: 0,
				lng: 0
			}
		}
	},
	created(){
		if(this.$route.params.id){
			this.infoID = this.$route.params.id;
		}
		this.initialize_()
	},
	methods:{
		prepareEdit(){
			this.editItem_(this.resourceData_)
		},
		getResourceData_(){
			this.$api.getLockerInfo(this.infoID).then((res) => {
				this.resourceData_ = res.data.result
				this.location_position = this.toCoordinate(this.resourceData_.latitude, this.resourceData_.longitude)
			}).catch((err) => {
				this.errorHandler_(err)
			})
		},
		menu_items(item = {}){
			return [
				{
					icon: "mdi-delete",
					icon_class: "red--text", 
					title: "Delete",
					title_class: "red--text",
					action: () => { this.confirmArchive(item) }
				},
			]
		},
		setPlace(place) {
			console.log(place)
			this.place = place
		},
		toCoordinate(lat = 3.1390, lng = 101.6869){
			return {
				lat: lat,
				lng: lng,
			}
		}
	}
}
</script>