<template>
    <div class="">
        <v-layout row wrap justify-center >
            <v-flex xs12 sm10 offset-sm-1 class=" body-2 font-weight-bold"><span>หน้าหลัก / ประกาศงาน</span></v-flex>
            <v-flex  xs12 sm10 offset-sm-1 class="ma-2">
                <v-flex class="bg-title pa-2">
                    <v-layout row wrap align-center>
                        <div class="mx-3">
                            <v-icon x-large dark>fas fa-briefcase</v-icon>
                        </div>
                        <div class="pa-0">
                            <v-flex xs12 sm12>
                                <span class="font-title font-weight-bold">ข้อมูลรายละเอียดของงาน</span>
                            </v-flex>                       
                            <v-flex xs12 sm12>
                                <span class="font-subtitle ">(Job description information)</span>
                            </v-flex>                       
                        </div>
                    </v-layout>
                </v-flex>
                <v-flex class="bg-body pa-4">
                    <v-layout row wrap>
                        <v-flex xs12 sm6 class="px-3">
                            <v-text-field
                                label="หัวข้องาน"
                                v-model="job_title"
                                placeholder=" "
                            ></v-text-field>
                            <v-combobox
                                v-model="job_type"
                                :items="items"
                                label="ประเภทงาน"
                                placeholder=" "
                                >
                                <template v-slot:selection="data">
                                    <v-chip
                                    :key="JSON.stringify(data.item)"
                                    :selected="data.selected"
                                    :disabled="data.disabled"
                                    class="v-chip--select-multi"
                                    @click.stop="data.parent.selectedIndex = data.index"
                                    @input="data.parent.selectItem(data.item)"
                                    >
                                    <v-avatar class="accent white--text">
                                        {{ data.item.slice(0, 1).toUpperCase() }}
                                    </v-avatar>
                                    {{ data.item }}
                                    </v-chip>
                                </template>
                            </v-combobox>
                            <v-text-field
                                label="ตำแหน่งงาน "
                                v-model="department"
                                placeholder=" "
                            ></v-text-field>
                            <v-text-field
                                label="ค่าตอบแทน/เงินเดือน  "
                                v-model="salary"
                                placeholder=" "
                            ></v-text-field>
                        </v-flex>
                        <v-flex xs12 sm6 class="px-3">
                            <v-text-field
                                label="สาขาวิชาที่เปิดรับ "
                                v-model="branch"
                                placeholder=" "
                            ></v-text-field>
                            
                            <v-text-field
                                label="วันทำงาน  "
                                v-model="day"
                                placeholder=" "
                            ></v-text-field>
                            <v-text-field
                                label="เวลาทำงาน  "
                                v-model="time"
                                placeholder=" "
                            ></v-text-field>
                            <v-text-field
                                label="จำนวนที่รับ  "
                                v-model="num"
                                placeholder=" "
                                type="number"
                            ></v-text-field>
                        </v-flex>
                    </v-layout>
                   
                </v-flex>
            </v-flex>
            <v-flex  xs12 sm10 offset-sm-1 class="ma-2">
                <v-flex class="bg-title-1 pa-2">
                    <v-layout row wrap align-center>
                        <div class="mx-3">
                            <v-icon x-large dark>fas fa-user-circle</v-icon>
                        </div>
                        <div class="pa-0">
                            <v-flex xs12 sm12>
                                <span class="font-title font-weight-bold">คุณสมบัติของผู้สมัครงาน</span>
                            </v-flex>
                            <v-flex xs12 sm12>
                                <span class="font-subtitle ">(Job applicant qualifications)</span>
                            </v-flex>                       
                        </div>
                    </v-layout>
                </v-flex>
                <v-flex class="bg-body pa-4">
                    <v-layout row wrap>
                        <v-flex xs12 sm6 class="px-3">
                            <v-combobox
                                v-model="gender"
                                :items="items"
                                label="เพศ"
                                placeholder=" "
                                multiple
                                >
                                <template v-slot:selection="data">
                                    <v-chip
                                    :key="JSON.stringify(data.item)"
                                    :selected="data.selected"
                                    :disabled="data.disabled"
                                    class="v-chip--select-multi"
                                    @input="data.parent.selectItem(data.item)"
                                    >
                                    <v-avatar
                                        class="accent white--text"
                                        v-text="data.item.slice(0, 1).toUpperCase()"
                                    ></v-avatar>
                                    {{ data.item }}
                                    </v-chip>
                                </template>
                            </v-combobox>
                            <v-select
                                label="ระดับการศึกษา"
                                v-model="degree"
                                placeholder=" "
                                item-value="text"
                            ></v-select>
                            <v-text-field
                                label="เกรดเฉลี่ย  "
                                v-model="gpax"
                                placeholder=" "
                            ></v-text-field>
                            <v-text-field
                                label="ระยะเวลาในการทำงาน  "
                                v-model="phase"
                                placeholder=" "
                            ></v-text-field>
                            <v-textarea
                                label="คุณสมบัติเพิ่มเติม"
                                v-model="feature"
                                rows="3"
                                outline
                                placeholder=" "
                            ></v-textarea>
                        </v-flex>
                        <v-flex xs12 sm6 class="px-3">
                            <v-textarea
                                outline
                                label="หน้าที่รับผิดชอบ"
                                v-model="role"
                                placeholder=" "
                                rows="7"
                            ></v-textarea>
                            <v-textarea
                                outline
                                label="สวัสดิการ"
                                v-model="welfare"
                                placeholder=" "
                                rows="7"
                            ></v-textarea>
                        </v-flex>
                    </v-layout>
                </v-flex>
            </v-flex>
            <v-flex xs12 sm10 offset-sm-1 class="my-1 text-xs-center text-sm-center."><v-btn round dark color="blue accent-3" class="px-3 white--text">เพิ่มข้อมูลงาน</v-btn></v-flex>
        </v-layout>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        gender: [],
        items: [
          'ชาย',
          'หญิง'
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>
    .bg-title{
        background-color: #00AAFF;
        border-radius: 8px 8px 0 0;
        display: block;
    }
    .bg-body{
        background-color: #fff;
        border-radius:0 0 8px 8px;
        border-bottom:1px solid #dcdcdc ;
        border-left:1px solid #dcdcdc ;
        border-right:1px solid #dcdcdc ;
    }
    .bg-title-1{
        background-color: #89969f;
        border-radius: 8px 8px 0 0;
    }
    .font-title {
        font-size: 20px;
        color: #fff;
        display: block;
        font-family: "Prompt", sans-serif;
    }
    .font-subtitle {
        font-size: 16px;
        color: #2d3f4b;
        display: block;
        font-family: "Prompt", sans-serif;
    }
</style>

