<template>
    <div>
        <v-layout row wrap class="border-div pa-0 my-3">
            <v-flex xs12 sm12 class="pa-3 font-weight-bold title">
                <v-icon color="black">business</v-icon> ข้อมูลบริษัท
            </v-flex>
            <v-form enctype="multipart/form-data" @submit.prevent="createJob()" ref="create">
                <v-flex sm12 xs12>
                    <v-layout row wrap class="borderbottom pa-3">                           
                        <v-flex sm4 xs12 class="px-3">
                            <v-layout align-center justify-center fill-height>
                                <input type="file" accept="image/*" class="input-file" ref="inputFile" @change="selectFile">
                                <v-tooltip right>
                                    <template v-slot:activator="{ on }">
                                        <v-layout column align-center>
                                            <img v-on="on" class="img" @click="$refs.inputFile.click()" :src="srcImage" alt="" width="200">
                                            <v-btn color="error" v-if="srcImage !== 'https://asianinteriorservices.com/wp-content/uploads/2018/04/noImg.png'" @click="srcImage = 'https://asianinteriorservices.com/wp-content/uploads/2018/04/noImg.png'">ลบรูปภาพ</v-btn>
                                        </v-layout>
                                    </template>
                                    <span>{{ status }}</span>
                                </v-tooltip>
                            </v-layout>
                        </v-flex>
                        <v-flex sm4 xs12 class="px-3">
                            <label class="font-weight-bold">ชื่อบริษัท <span class="red--text">&nbsp;*</span></label>
                            <v-text-field
                                outline
                                label="ชื่อบริษัท"
                                :rules="[rules.required]"
                                v-model="company_name"
                                class="my-ip"
                            ></v-text-field>
                            <label class="font-weight-bold">ชื่อผู้ติดต่อ <span class="red--text">&nbsp;*</span></label>
                            <v-text-field
                                outline
                                label="ชื่อผู้ติดต่อ"
                                v-model="company_owner"
                                :rules="[rules.required]"
                                class="my-ip"
                            ></v-text-field>
                            <label class="font-weight-bold">เบอร์ผู้ติดต่อ <span class="red--text">&nbsp;*</span></label>
                            <v-text-field
                                outline
                                label="เบอร์ผู้ติดต่อ"
                                v-model="phone_no"
                                :rules="[rules.required]"
                                class="my-ip"
                            ></v-text-field>
                        </v-flex>
                        <v-flex sm4 xs12 class="px-3">                        
                            <label class="font-weight-bold">อีเมล <span class="red--text">&nbsp;*</span></label>
                            <v-text-field
                                outline
                                label="อีเมล"
                                v-model="email"
                                :rules="[rules.required, rules.email]"
                                class="my-ip"
                            ></v-text-field>
                            <label class="font-weight-bold">Fax <span class="red--text"></span></label>
                            <v-text-field
                                outline
                                label="Fax"
                                class="my-ip"
                                v-model="fax"
                            ></v-text-field>
                            <label class="font-weight-bold">เว็บไซต์ <span class="red--text"></span></label>
                            <v-text-field
                                outline
                                label="เว็บไซต์"
                                class="my-ip"
                                v-model="website"
                            ></v-text-field>
                        </v-flex>
                    </v-layout>
                </v-flex>
                <v-flex sm12>
                    <v-layout row wrap class="pa-3">  
                        <v-flex sm6 xs12 class="px-3">
                            <label class="font-weight-bold">ที่อยู่ <span class="red--text">&nbsp;*</span></label>
                            <v-textarea
                                outline
                                label="ที่อยู่"
                                :rules="[rules.required]"
                                v-model="addr"
                                class="my-1"
                            ></v-textarea>
                            <label class="font-weight-bold">จังหวัด <span class="red--text">&nbsp;*</span></label>
                            <v-select
                                :items="provinces"
                                item-text="province"
                                v-model="province"
                                label="เลือกจังหวัด"
                                :rules="[rules.required]"
                                return-object
                                @change="showAmphoes()"
                            ></v-select>

                            <label class="font-weight-bold">เขต/อำเภอ <span class="red--text">&nbsp;*</span></label>
                            <v-select
                                :items="amphoes"
                                item-text="amphoe"
                                label="เลือกเขต/อำเภอ"
                                return-object
                                v-model="amphoe"
                                no-data-text="กรุณาเลือกจังหวัด"
                                :disabled="!openAmphoe"
                                :rules="[rules.required]"
                                @change="showTumbons()"
                            ></v-select>
                            <label class="font-weight-bold">เกี่ยวกับบริษัท</label>
                            <v-textarea
                                outline
                                label="เกี่ยวกับบริษัท"
                                class="my-1"
                                v-model="about"
                            ></v-textarea>
                        </v-flex>
                        <v-flex sm6 xs12 class="px-3">
                            <label class="font-weight-bold">แขวง/ตำบล<span class="red--text">&nbsp;*</span></label>
                            <v-select
                                :items="tumbons"
                                item-text="tumbon"
                                return-object
                                v-model="tumbon"
                                no-data-text="กรุณาเลือกอำเภอ"
                                :rules="[rules.required]"
                                :disabled="!openTumbon"
                                label="เลือกแขวง/ตำบล"
                                @change = "showDetail()"
                            ></v-select>
                            <label class="font-weight-bold">รหัสไปรษณีย์<span class="red--text">&nbsp;*</span></label>
                            <v-text-field
                                :disabled="!openZipCode"
                                label="รหัสไปรษณีย์"
                                v-model="zip_code"
                                :rules="[rules.required]"
                                class="my-ip"
                            ></v-text-field>
                            <label class="font-weight-bold">แผนที่บริษัท</label>
                            <v-layout row wrap class="pa-2">
                                <v-flex sm12 xs12>
                                    <label>รูปภาพแผนที่</label>
                                </v-flex>                           
                                <v-flex sm12 xs12>
                                    <input type="file" accept="image/*" class="input-file" ref="inputFileMap" @change="selectFileMap">
                                    <v-btn color="deep-orange darken-4" class="px-2" small outline @click="$refs.inputFileMap.click()"><v-icon>file_copy</v-icon>&nbsp;เลือกไฟล์</v-btn>
                                    <v-btn color="error" v-if="srcImageMap" @click="srcImageMap = null">ลบรูปภาพ</v-btn>
                                    {{ nameImage }}
                                </v-flex>                            
                                <v-flex sm12 xs12>
                                    <GmapAutocomplete class="form-control form-control-sm my-1" placeholder="ป้อนตำแหน่งใกล้เคียง" @place_changed="setPlace">
                                    </GmapAutocomplete>
                                </v-flex>                             
                                <v-flex sm12 xs12>
                                    <GmapMap v-if="this.place" style="width: 400px; height: 200px;" :zoom="15" :center="{lat: lat, lng: long}">
                                        <GmapMarker
                                            :position="{lat: lat, lng: long}"
                                            :draggable="true"
                                            @dragend="dragMarker"
                                        />
                                    </GmapMap>
                                </v-flex>                           
                            </v-layout>
                            
                        </v-flex>
                    </v-layout>
                    <v-layout row wrap class="borderbottom pa-3"> 
                        <v-flex sm12>
                            <h2 class="font-weight-bold"><span class="red--text">&nbsp;การเดินทาง</span></h2>
                        </v-flex>
                        
                        <v-flex sm3 xs12 class="px-3">
                            <label class="font-weight-bold my-2">ใกล้ BTS</label>
                            <v-select
                                label="เลือก"
                                :items="bts"
                                v-model="bts"
                            ></v-select>
                        </v-flex>
                        <v-flex sm3 xs12 class="px-3">
                            <label class="font-weight-bold">ใกล้ MRT</label>
                            <v-select
                                label="เลือก"
                                :items="mrt"
                                v-model="mrt"
                            ></v-select>
                        </v-flex>
                        <v-flex sm3 xs12 class="px-3">
                            <label class="font-weight-bold">ใกล้ ARL</label>
                            <v-select
                                label="เลือก"
                                :items="arl"
                                v-model="arl"
                            ></v-select>
                        </v-flex>
                        <v-flex sm3 xs12 class="px-3">
                            <label class="font-weight-bold">สายรถเมล์</label>
                            <VTextField
                                label="สายรถเมล์"
                                v-model="bus"
                            ></VTextField>
                        </v-flex>
                        <v-flex sm12 class="px-3">
                            <label class="font-weight-bold">การเดินทางเพิ่มเติม</label>
                        </v-flex>
                        <v-flex sm6 xs12 class="px-3">
                            <v-textarea
                                outline
                                label=""
                                class="my-2"
                                v-model="another"
                            ></v-textarea>
                        </v-flex>
                        <v-flex sm6 xs12 class="px-3 py-3 detail">
                            <span class="red--text">หมายเหตุ : </span>
                            <span >เพื่อความสะดวกในการเดินทางของผู้สมัครงาน กรุณาระบุสถานีรถไฟฟ้าที่ใกล้กับสถานที่ปฏิบัติงาน (ถ้ามี) หรือระบุสายรถเมล์ที่ผ่านสถานที่ประกอบการ และระบุการเดินทางเพิ่มเติม เพื่อให้เข้าใจในการเดินทางมากยิ่งขึ้น</span>
                        </v-flex>
                        <v-layout row wrap justify-center class="my-2">
                            <v-btn color="red" dark="" type="submit">บันทึกข้อมูล</v-btn>
                        </v-layout>
                    </v-layout>
                    <!-- <v-layout row wrap class="borderbottom"> 
                        <v-flex sm6 xs12 class="pa-3">
                            <h2 class="font-weight-bold my-2"><span class="red--text">&nbsp;รายละเอียดงาน</span></h2>
                            <v-flex sm12 xs12 class="pa-3">
                                <label class="font-weight-bold">หัวข้องาน <span class="red--text">&nbsp;*</span></label>
                                <v-text-field
                                    outline
                                    label="หัวข้องาน"
                                    :rules="[rules.required]"
                                    class="my-job"
                                ></v-text-field>
                                <label class="font-weight-bold my-2">ประเภทธุรกิจ <span class="red--text">&nbsp;*</span></label>
                                <VSelect
                                    outline
                                    :items="items"
                                    :rules="[rules.required]"
                                    label="เลือก"
                                    class="my-job"
                                ></VSelect>
                                <label class="font-weight-bold my-2">ตำแหน่งงาน <span class="red--text">&nbsp;*</span></label>
                                <VSelect
                                    outline
                                    :items="items"
                                    :rules="[rules.required]"
                                    label="เลือก"
                                    class="my-job"
                                ></VSelect>
                                <label class="font-weight-bold my-2">ค่าตอบแทน/เงินเดือน</label>
                                <v-text-field
                                    outline
                                    label="ค่าตอบแทน/เงินเดือน"
                                    class="my-job"
                                ></v-text-field>
                                <label class="font-weight-bold my-2">จำนวน(อัตรา) <span class="red--text">&nbsp;*</span></label>
                                <v-text-field
                                    outline
                                    label="จำนวน(อัตรา)"
                                    class="my-job"
                                    :rules="[rules.required]"
                                    min="0"
                                    type="number"
                                ></v-text-field>
                                <label class="font-weight-bold my-2">วันทำงาน <span class="red--text">&nbsp;*</span></label>
                                <v-layout align-center justify-center row fill-height wrap>
                                    <v-flex sm6 xs12 class="px-2">
                                        <v-text-field
                                            outline
                                            label="จาก"
                                            :rules="[rules.required]"
                                            class="my-job"
                                        ></v-text-field>
                                    </v-flex>
                                    <v-flex xs12 sm6 class="px-2">
                                        <v-text-field
                                        outline
                                        :rules="[rules.required]"
                                        label="ถึง"
                                        class="my-job"
                                        ></v-text-field>
                                    </v-flex>
                                    
                                </v-layout>
                                <label class="font-weight-bold my-2">เวลาทำงาน <span class="red--text">&nbsp;*</span></label>
                                <v-layout align-center justify-center row fill-height wrap>
                                    <v-flex sm6 xs12 class="px-2">
                                        <v-menu
                                            ref="time1"
                                            v-model="showTimeFrom"
                                            :close-on-content-click="false"
                                            :nudge-right="40"
                                            lazy
                                            transition="scale-transition"
                                            offset-y
                                            full-width
                                            max-width="290px"
                                            min-width="290px"
                                        >
                                            <template v-slot:activator="{ on }">
                                            <v-text-field
                                                outline
                                                v-model="timeFrom"
                                                label="จาก"
                                                :rules="[rules.required]"
                                                readonly
                                                v-on="on"
                                            ></v-text-field>
                                            </template>
                                            <v-time-picker
                                                v-if="showTimeFrom"
                                                v-model="timeFrom"
                                                full-width
                                                @click:minute="$refs.time1.save(time)"
                                            ></v-time-picker>
                                        </v-menu>
                                    </v-flex>
                                    <v-flex xs12 sm6 class="px-2">
                                        <v-menu
                                            ref="time2"
                                            v-model="showTimeTo"
                                            :close-on-content-click="false"
                                            :nudge-right="40"
                                            lazy
                                            transition="scale-transition"
                                            offset-y
                                            full-width
                                            max-width="290px"
                                            min-width="290px"
                                        >
                                            <template v-slot:activator="{ on }">
                                            <v-text-field
                                                outline
                                                v-model="timeTo"
                                                label="ถึง"
                                                :rules="[rules.required]"
                                                readonly
                                                v-on="on"
                                            ></v-text-field>
                                            </template>
                                            <v-time-picker
                                                v-if="showTimeTo"
                                                v-model="timeTo"
                                                full-width
                                                @click:minute="$refs.time2.save(time)"
                                            ></v-time-picker>
                                        </v-menu>
                                    </v-flex>
                                </v-layout>
                            </v-flex>                                                
                        </v-flex>
                        <v-flex sm6 xs12 class="pa-3">
                            <h2 class="font-weight-bold mt-2"><span class="red--text">&nbsp;หน้าที่รับผิดชอบ</span> <span class="red--text">&nbsp;*</span></h2>
                            <v-flex sm12 xs12 class="pa-3">
                                <v-textarea
                                outline
                                :rules="[rules.required]"
                                label="หน้าที่รับผิดชอบ"
                                ></v-textarea>
                            </v-flex>                                                
                            <h2 class="font-weight-bold"><span class="red--text">&nbsp;คุณสมบัติ</span> <span class="red--text">&nbsp;*</span></h2>
                            <v-flex sm12 xs12 class="pa-3">
                                <v-textarea
                                outline
                                :rules="[rules.required]"
                                label="คุณสมบัติ"
                                ></v-textarea>
                            </v-flex>                                                
                            <h2 class="font-weight-bold"><span class="red--text">&nbsp;สวัสดิการ</span></h2>
                            <v-flex sm12 xs12 class="pa-3">
                                <v-textarea
                                outline
                                label="สวัสดิการ"
                                ></v-textarea>
                            </v-flex>                                                
                        </v-flex>
                        <v-layout justify-center>
                            <v-btn color="success" type="submit">บันทึกข้อมูล</v-btn>
                        </v-layout>
                    </v-layout> -->
                </v-flex>
            </v-form>
        </v-layout>
    </div>
</template>

<script>
export default {
    data () {
        return {
            status: 'ยังไม่ได้เลือกไฟล์',
            srcImage: 'https://asianinteriorservices.com/wp-content/uploads/2018/04/noImg.png',
            srcImageMap: null,
            nameImage: null,
            rules: {
                required: v => !!v || 'จำเป็นต้องกรอก',
                email: v => /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(v) || 'รูปแบบอีเมลล์ไม่ถูกต้อง'
            },
            timeFrom: null,
            timeTo: null,
            showTimeFrom: false,
            showTimeTo: false,
            provinces: [],
            amphoes: [],
            tumbons: [],
            province: '',
            amphoe: '',
            tumbon: '',
            zip_code: '',
            openAmphoe: false,
            openTumbon: false,
            openZipCode: false,
            bts: [
                'หมอชิต',
                'สะพานควาย',
                'อารีย์',
                'สนามเป้า',
                'อนุสาวรีย์ชัยสมรภูมิ',
                'พญาไท',
                'ราชเทวี',
                'สยาม',
                'ชิดลม',
                'เพลินจิต',
                'นานา',
                'อโศก',
                'พร้อมพงษ์',
                'ทองหล่อ',
                'เอกมัย',
                'พระโขนง',
                'อ่อนนุช',
                'บางจาก',
                'ปุณณวิถี',
                'อุดมสุข',
                'บางนา',
                'สนามกีฬาแห่งชาติ',
                'ราชดำริ',
                'ศาลาแดง',
                'ช่องนนทรี',
                'สุรศักดิ์',
                'สะพานตากสิน',
                'กรุงธนบุรี',
                'วงเวียนใหญ่',
                'โพธิ์นิมิตร',
                'ตลาดพลู',
                'วุฒากาศ',
                'บางหว้า',
                'แบริ่ง'
            ],
            mrt: [
                'หัวลำโพง',
                'สามย่าน',
                'สีลม',
                'ลุมพินี',
                'คลองเตย',
                'ศูนย์การประชุมแห่งชาติสิริกิติ์',
                'สุขุมวิท',
                'เพชรบุรี',
                'พระราม 9',
                'ศูนย์วัฒนธรรมแห่งประเทศไทย',
                'ห้วยขวาง',
                'สุทธิสาร',
                'รัชดาภิเษก',
                'ลาดพร้าว',
                'พหลโยธิน',
                'สวนจตุจักร',
                'กำแพงเพชร',
                'บางซื่อ',
                'เตาปูน',
                'บางซ่อน',
                'วงศสว่าง',
                'แยกติวานนท์',
                'กระทรวงสาธารณะสุข',
                'ศูนย์ราชการนนทบุรี',
                'บางกระสอ',
                'แยกนนทบุรี 1',
                'สะพานพระนั่งเกล้า',
                'ไทรม้า',
                'บางรักน้อยท่าอิฐ',
                'บางรักใหญ่',
                'บางพลู',
                'สามแยกบางใหญ่',
                'ตลาดบางใหญ่',
                'คลองบางไผ่'
            ],
            arl: [
                'สุวรรณภูมิ',
                'ลาดกระบัง',
                'บ้านทับช้าง',
                'หัวหมาก',
                'รามคำแหง',
                'มักกะสัน',
                'ราชปรารภ',
                'พญาไท'
            ],
            place: null,
            lat: 15.1179961,
            long: 104.9016003
        }
    },
    methods: {
        dragMarker (e) {
            this.lat = e.latLng.lat()
            this.long = e.latLng.lng()
        },
        setPlace(place) {
            this.place = place
            this.lat = this.place.geometry.location.lat()
            this.long = this.place.geometry.location.lng()
        },
        selectFile (e) {
            const file = e.target.files
            if (!file.length) {
                return
            }
            const fileReader = new FileReader()
            fileReader.readAsDataURL(file[0])
            fileReader.onload = e => {
                this.srcImage = e.target.result
            }
        },
        selectFileMap (e) {
            const file = e.target.files
            this.nameImage = file[0].name
            if (!file.length) {
                return
            }
            const fileReader = new FileReader()
            fileReader.readAsDataURL(file[0])
            fileReader.onload = e => {
                this.srcImageMap = e.target.result
            }
        },
        createJob () {
            if (this.amphoes.findIndex(x => x.amphoe_code === this.amphoe.amphoe_code) === -1) {this.amphoe = ''}
            if (this.tumbons.findIndex(x => x.tumbon_code === this.tumbon.tumbon_code) === -1) {this.tumbon = ''}
            if (this.$refs.create.validate()) {
                console.log('create job')
            } else {
                this.$Loading.error()
            }
        },
        showProvinces () {
            axios.get('/api/province')
              .then(res => {
                  res.data.forEach(data => {
                      this.provinces.push({
                          province: data.province,
                          province_code: data.province_code
                      })
                  });
              })
              .catch(err => {
                  console.log(err.response)
              })
        },
        showAmphoes () {
            this.amphoes = []
            this.zip_code = ''
            this.openAmphoe = true
            this.openTumbon = false
            this.openZipCode = false
            axios.get(`/api/province/${this.province.province_code}/amphoe`)
              .then(res => {
                  res.data.forEach(data => {
                      this.amphoes.push({
                          amphoe: data.amphoe,
                          amphoe_code: data.amphoe_code
                      })
                  })
              })
              .catch(err => {
                  console.log(err.response)
              })
        },
        showTumbons () {
            this.tumbons = []
            this.openTumbon = true
            this.openZipCode = false
            axios.get(`/api/province/${this.province.province_code}/amphoe/${this.amphoe.amphoe_code}/district`)
              .then(res => {
                  res.data.forEach(data => {
                      this.tumbons.push({
                          tumbon: data.district,
                          tumbon_code: data.district_code
                      })
                  })
              })
              .catch(err => {
                  console.log(err.response)
              })
        },
        showDetail () {
            this.openZipCode = true
            axios.get(`/api/province/${this.province.province_code}/amphoe/${this.amphoe.amphoe_code}/district/${this.tumbon.tumbon_code}`)
              .then(res => {
                  this.zip_code = res.data[0].zipcode
              })
              .catch(err => {
                  console.log(err.resonse)
              })
        }
    },
    mounted() {
        this.showProvinces()
    }
}
</script>


<style lang="scss" scoped>
    // .my-job{
    //     height: 70px;
    // }
    // .my-ip{
    //     height: 65px;
    // }
    .detail {
        color: #276f86;
        background-color: #f8ffff;
        border:1px solid #a9d5de;
        border-radius: 5px;
        display: inline-block;
        line-height: 26px;
    }
    .borderbottom{
        border-bottom: 1px dotted #dcdcdc ;
    }
    .border-div{
        border:1px solid #dcdcdc;
        border-radius: 5px;
    }
    input {
        overflow: visible;
    }
    .bd-example>.form-control+.form-control {
        margin-top: .5rem;
    }
    .form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg {
        padding-right: 0;
        padding-left: 0;
    }

    .form-control-sm {
        height: calc(1.0em + 0.5rem + 1px);
        padding: 0.15rem 0.5rem;
        font-size: 0.7rem;
        line-height: 1.5;
        border-radius: 0.3rem;
    }
    .form-control {
        display: block;
        width: 100%;
        height: calc(1.5em + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    @media (prefers-reduced-motion: reduce) {
        .form-control {
            transition: none;
        }
    }

    .form-control::-ms-expand {
    background-color: transparent;
    border: 0;
    }

    .form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    .form-control::-webkit-input-placeholder {
    color: #6c757d;
    opacity: 1;
    }

    .form-control::-moz-placeholder {
    color: #6c757d;
    opacity: 1;
    }

    .form-control:-ms-input-placeholder {
    color: #6c757d;
    opacity: 1;
    }

    .form-control::-ms-input-placeholder {
    color: #6c757d;
    opacity: 1;
    }

    .form-control::placeholder {
    color: #6c757d;
    opacity: 1;
    }

    .form-control:disabled, .form-control[readonly] {
    background-color: #e9ecef;
    opacity: 1;
    }

    select.form-control:focus::-ms-value {
    color: #495057;
    background-color: #fff;
    }

    .form-control-file,
    .form-control-range {
    display: block;
    width: 100%;
    }

    .img {
        cursor: pointer;
        border: 1px solid;
    }

    .input-file {
        display: none;
    }
</style>

