<template>
    <v-layout fill-height>
    <v-layout>
      <v-flex xs7>
        <v-card tile flat color="#ead1ff">
          <v-container fill-height>
           <p class="text-sm-left purple--text font-weight-black title">Subject</p>&nbsp;&nbsp;&nbsp;
          <v-text-field
            v-model="subject"
            label=""
            solo
        ></v-text-field>
        </v-container>
        </v-card>
 <v-container fluid>

    <v-layout row>
      <v-flex xs5>
        <v-subheader>รหัสวิชา</v-subheader>
      </v-flex>
      <v-flex xs8>
        <v-text-field
            v-model="code"
            label=""
            single-line
            outline
        ></v-text-field>
      </v-flex>
    </v-layout>

    <v-layout row>
      <v-flex xs5>
        <v-subheader>คณะ</v-subheader>
      </v-flex>
      <v-flex xs8>
          <v-select
            v-model="e4"
            :items="faculty"
            chips
            label=""
            outline
            single-line
          ></v-select>
      </v-flex>
    </v-layout>

    <v-layout row>
      <v-flex xs5>
        <v-subheader>หน่วยกิตที่ได้รับ</v-subheader>
      </v-flex>
      <v-flex xs3>
        <v-text-field
            v-model="lec"
            label="Lecture"
            single-line
            outline
        ></v-text-field>
      </v-flex>
      &nbsp;&nbsp;&nbsp;
            <v-flex xs3>
        <v-text-field
            v-model="lab"
            label="Lab"
            single-line
            outline
        ></v-text-field>
      </v-flex>
    </v-layout>

    <v-layout row>
      <v-flex xs5>
        <v-subheader>ภาคการศึกษาที่เปิดสอน</v-subheader>
      </v-flex>
      <v-flex xs8>
          <v-select
            v-model="e5"
            :items="simi"
            chips
            label=""
            multiple
            outline
            single-line
          ></v-select>
      </v-flex>
    </v-layout>
        <v-layout row>
      <v-flex xs5>
        <v-subheader>เกรด</v-subheader>
      </v-flex>
      <v-flex xs8>
          <v-select
            v-model="e3"
            :items="grade"
            label=""
            outline
            single-line
          ></v-select>
      </v-flex>
    </v-layout>
        <v-layout row>
      <v-flex xs5>
        <v-subheader>Comment</v-subheader>
      </v-flex>
      <v-flex xs8>
        <v-textarea
            v-model="comment"
            label=""
            full-width
            outline
            single-line
        ></v-textarea>
      </v-flex>
    </v-layout>

  </v-container>
      </v-flex>
      <v-flex xs5>
        <v-card dark tile flat color="#ead1ff">
    <v-container fill-height>
         <v-layout column align-center>
      <v-rating
        v-model="rating"
        background-color="white"
        color="yellow accent-4"
        dense
        half-increments
        hover
        size="26.9"
      ></v-rating>
      <span class="purple--text font-weight-regular subheading">
        ({{ rating }})
      </span>
              <v-flex xs5 color="#ead1ff">
          &nbsp;
              </v-flex>
         </v-layout>
                 </v-container>
        </v-card>
<v-flex> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </v-flex>
        <div align="right">
       <v-btn color="#B39DDB" @click="add()">Submit</v-btn> </div>
      </v-flex>
    </v-layout>
      <v-flex xs6>
        <v-card tile flat height="max-height"  color="#f7edff"> <!-- max-height -->
          <v-container fluid>
           <p class="text-sm-left purple--text font-weight-black headline">Status</p>
           <p class="text-xs-left purple--text">กรุณาให้คะแนนในแต่ละด้านของวิชานี้</p>
          <p class="text-xs-left red--text">*หมายเหตุ คะแนนในแต่ละด้านหมายถึง เนื้อหาหรือส่วนประกอบที่จะต้องเจอในการเรียนวิชานี้</p>
        </v-container>
        <v-container>
        <v-card tile flat color="#ffffff">
        <v-container>
    <v-layout row>
      <v-flex xs3>
        <v-subheader>Math</v-subheader>
      </v-flex>
      <v-flex xs2>
          <v-select
            v-model="g1"
            :items="rat"
            label=""
            outline
            single-line
          ></v-select>
      </v-flex>
      <v-flex xs1>
        &nbsp;
      </v-flex>
            <v-flex xs3>
        <v-subheader>Social science</v-subheader>
      </v-flex>
      <v-flex xs2>
          <v-select
            v-model="g2"
            :items="rat"
            label=""
            outline
            single-line
          ></v-select>
      </v-flex>
    </v-layout>
        <v-layout row>
      <v-flex xs3>
        <v-subheader>Science</v-subheader>
      </v-flex>
      <v-flex xs2>
          <v-select
            v-model="g3"
            :items="rat"
            label=""
            outline
            single-line
          ></v-select>
      </v-flex>
      <v-flex xs1>
        &nbsp;
      </v-flex>
            <v-flex xs3>
        <v-subheader>Liberal Arts</v-subheader>
      </v-flex>
      <v-flex xs2>
          <v-select
            v-model="g4"
            :items="rat"
            label=""
            outline
            single-line
          ></v-select>
      </v-flex>
    </v-layout>
        <v-layout row>
      <v-flex xs3>
        <v-subheader>Applied Science</v-subheader>
      </v-flex>
      <v-flex xs2>
          <v-select
            v-model="g5"
            :items="rat"
            label=""
            outline
            single-line
          ></v-select>
      </v-flex>
      <v-flex xs1>
        &nbsp;
      </v-flex>
        <v-flex xs3>
        <v-subheader>Language</v-subheader>
      </v-flex>
      <v-flex xs2>
          <v-select
            v-model="g6"
            :items="rat"
            label=""
            outline
            single-line
          ></v-select>
      </v-flex>
    </v-layout>
        <v-layout row>
      <v-flex xs3>
        <v-subheader>Analyze</v-subheader>
      </v-flex>
      <v-flex xs2>
          <v-select
            v-model="g7"
            :items="rat"
            label=""
            outline
            single-line
          ></v-select>
      </v-flex>
      <v-flex xs1>
        &nbsp;
      </v-flex>
      <v-flex xs3>
        <v-subheader>Memory</v-subheader>
      </v-flex>
      <v-flex xs2>
          <v-select
            v-model="g8"
            :items="rat"
            label=""
            outline
            single-line
          ></v-select>
      </v-flex>
    </v-layout>
        <v-layout row>
      <v-flex xs3>
        <v-subheader>Health</v-subheader>
      </v-flex>
      <v-flex xs2>
          <v-select
            v-model="g9"
            :items="rat"
            label=""
            outline
            single-line
          ></v-select>
      </v-flex>
      <v-flex xs1>
        &nbsp;
      </v-flex>
            <v-flex xs3>
        <v-subheader>Activity</v-subheader>
      </v-flex>
      <v-flex xs2>
          <v-select
            v-model="g10"
            :items="rat"
            label=""
            outline
            single-line
          ></v-select>
      </v-flex>
    </v-layout>
           <v-layout row>
      <v-flex xs3>
        <v-subheader>Homework</v-subheader>
      </v-flex>
      <v-flex xs2>
          <v-select
            v-model="g11"
            :items="rat"
            label=""
            outline
            single-line
          ></v-select>
      </v-flex>
      <v-flex xs1>
        &nbsp;
      </v-flex>
            <v-flex xs3>
        <v-subheader>Teamwork</v-subheader>
      </v-flex>
      <v-flex xs2>
          <v-select
            v-model="g12"
            :items="rat"
            label=""
            outline
            single-line
          ></v-select>
      </v-flex>
    </v-layout>
        <div align="right">
       <v-btn color="#B39DDB" @click="add()">Submit</v-btn> </div>


</v-container>
        </v-card>
  <v-flex>
    &nbsp;
  </v-flex>
        <v-card tile flat color="#ffffff">
        <v-container>
          <p class="text-xs-left black--text">
            Math มีการเรียนการสอนทางด้านคณิตศาสตร์<br>
            Social science มีการเรียนการสอนด้านสังคม เศรษฐศาสตร์ การเมือง <br>
            Language มีการเรียนการสอนทางด้านภาษา<br>
            Science มีการเรียนการสอนทางด้านวิทยาศาสตร์ ตัวอย่างเช่น ฟิสิกส์ เคมี ชีวะ สิ่งแวดล้อม<br>
            Applied Science มีการเรียนการสอนทางด้านวิทยาศาสตร์ ตัวอย่างเช่น ไฟฟ้า โปรแกรมคอมพิวเตอร์<br>
            Liberal Arts มีการเรียนการสอนทางด้านศิลปศาสตร์<br>
            Analyze มีการเรียนการสอนทางด้านการวิเคราะห์<br>
            Health  มีการเรียนการสอนทางด้านสายสุขภาพ<br>
            Homework มีปริมาณการบ้าน หรือ ความยากของการบ้าน  <br>
            Sociability การเข้าสังคม การร่วมงานเป็นกลุ่ม<br>
            Activity มีการเรียนการสอนโดยการทำกิจกรรม<br>
            Teamwork มีงานกลุ่ม
          </p>
          </v-container>
        </v-card>

        </v-container>
        </v-card>

      </v-flex>
    </v-layout>
</template>