<template>
<v-card flat>
  <h1 class="orange--text">ข้อมุลผู้สมัคร</h1>
  <v-card-title>
    <v-spacer></v-spacer>
    <v-flex sm4 xs12>
      <v-text-field
        v-model="search"
        append-icon="search"
        label="ค้นหา"
        single-line
        hide-details
      ></v-text-field>
    </v-flex>  
  </v-card-title>
  <v-data-table
    :headers="headers"
    :items="items"
    class="elevation-1"
    :search="search"
    rows-per-page-text="จำนวนเเถวต่อหน้า"
    no-results-text="ไม่พบข้อมูล"
    no-data-text="ไม่มีข้อมูล"
  >
    <template v-slot:items="props">
      <td width="10%" class="text-sm-center">{{ props.item.name }}</td>
      <td width="35%" class="text-sm-left">{{ props.item.job_title }}</td>
      <td width="10%" class="text-sm-center">{{ props.item.email }}</td>
      <td width="10%" class="text-sm-center">{{ props.item.degree }}</td>
      <td width="10%" class="text-sm-center">{{ props.item.major }}</td>
      <td width="10%" class="text-sm-center">{{ props.item.faculty }}</td>
      <td width="10%" class="text-sm-center">{{ props.item.university }}</td>
      <td width="5%" class="text-sm-center">{{ props.item.gpax }}</td>
    </template>
  </v-data-table>
  <v-layout row wrap justify-center>
    <v-btn color="error" class="text-sm-center text-xs-center" dark @click="$router.push('/employer')">ย้อนกลับ</v-btn>
  </v-layout>
</v-card>
</template>

<script>
export default {
  data () {
    return {
      search: '',
      headers: [
        { text: 'ชื่อผุ้สมัคร', value: 'name', align: 'center' },
        { text: 'หัวข้องาน', value: 'job_title', align: 'center' },
        { text: 'อีเมล', value: 'email', align: 'center' },
        { text: 'ระดับการศึกษา', value: 'degree', align: 'center' },
        { text: 'สาขา', value: 'major', align: 'center' },
        { text: 'คณะ', value: 'faculty', align: 'center' },
        { text: 'สถาบัน', value: 'university', align: 'center' },
        { text: 'gpax', value: 'gpax', align: 'center' }
        
      ],
      items: []
    }
  },
  beforeMount () {
    this.$store.dispatch('checkEmployer')
      .then(res => {
        axios.get(`/api/applicants/${res.id}`)
          .then(res => {
            console.log(res)
            this.items = []
            res.data.applicants.forEach(item => {
              this.items.push({
                name: item.name,
                job_title: item.job_title,
                email: item.email,
                degree: item.degree,
                major: item.major,
                faculty: item.faculty,
                university: item.university,
                gpax: item.gpax
              })
            });
          })
          .catch(err => {console.log(err.response)})
      })
      .catch(err => {
        console.log(err.response)
      })
  }
}
</script>