<form [formGroup]="form">
  <!-- <h1 class="title">แก้ไขข้อมูลรายวิชา</h1> -->
  <h1 class="title">{{state == 'edit' ? 'แก้ไขข้อมูลรายวิชา' : 'เพิ่มข้อมูลรายวิชา'}}</h1>
  <div class="main">
    <div class="flex flex-col sm:flex-row justify-between">
      <div class="flex flex-row justify-between sm:w-48% w-full">
        <div class="flex flex-col w-48% ">
          <label>รหัสวิชา</label>
          <input nospec oninput="value = value.toUpperCase()" formControlName="subject_code">
        </div>

        <div class="flex flex-col w-48%">
          <label>สถานะ</label>
          <select formControlName="status_id">
            <option *ngFor="let x of statusMock;" [ngValue]="x.id">
              {{x.name}}
            </option>
          </select>
        </div>
      </div>

      <div class="flex flex-col sm:w-48% w-full">
        <label>ระดับการศึกษา</label>
        <select formControlName="education_type_uid">
          <option [ngValue]="null" disabled>
           --เลือกระดับการศึกษา--
          </option>
          <option *ngFor="let x of educationType$ | async" [ngValue]="x.education_type_uid">
            {{x.education_type_name_th}}
          </option>
        </select>
      </div>
    </div>

    <div class="flex flex-row justify-between">
      <div class="flex flex-col w-48%">
        <label>ชื่อวิชา (TH)</label>
        <input type="text" formControlName="subject_name_th">
      </div>

      <div class="flex flex-col w-48%">
        <label>ชื่อวิชา (EN)</label>
        <input type="text" formControlName="subject_name_en" nospec>
        <mat-error *ngIf="form.get('subject_name_en').hasError('pattern')">กรองเป็นภาษาอังกฤษเท่านั้น</mat-error>
      </div>
    </div>

    <div class="flex flex-row justify-between">
      <div class="flex flex-col w-48%">
        <label>ประเภทวิชา</label>
        <select formControlName="subject_type_uid" >
          <option *ngFor="let x of subjectType$ | async" [ngValue]="x.subject_type_uid" >
            {{x.subject_type_name_th}}
          </option>
        </select>
      </div>

      <div class="flex flex-col w-48%">
        <label>คณะที่รับผิดชอบ</label>
        <input #res type="text" formControlName="responsible_faculty_uid" [matAutocomplete]="auto1">
        <mat-autocomplete #auto1="matAutocomplete" [displayWith]="display.bind(this)">
          <mat-option [value]="null">
            --กรุณาเลือก--
          </mat-option>
          <mat-option *ngFor="let x of faculty | searchAuto : res.value : 'faculty_name_th'" [value]="x.faculty_uid" (click)="filterDepartment(x.faculty_uid)">
            {{x.faculty_name_th}}
          </mat-option>
        </mat-autocomplete>
      </div>
    </div>


    <div class="flex flex-col lg:flex-row justify-between">
      <div class="flex flex-col w-full lg:w-48%">
        <!-- <label>ภาควิชา</label>
        <input type="text"  formControlName="major_name_th"> -->
        <label>ภาควิชา</label>
        <select formControlName="major_name_th">
          <option [ngValue]="null" disabled>
            {{filteredDepartmentList.length == 0? '-' : '-กรุณาเลือกภาควิชา-'}}
          </option>
          <option *ngFor="let x of filteredDepartmentList" [ngValue]="x.department_name_th">
            {{x.department_name_th}}
          </option>
        </select>
      </div>

      <div class="flex flex-col lg:flex-row justify-between items-center w-full lg:w-48%">
        <div class="flex flex-col w-full mt-2 lg:mt-0 lg:w-1/4 lg:mr-1">
          <label class="text-xs">&nbsp;</label>

          <input style="display: none;" type="file" (change)="onSelectFile($event)" #fileInput>
          <button class="add-button" (click)="fileInput.click()">แนบไฟล์</button>
        </div>

        <div class="flex flex-col w-full mt-2 lg:mt-0 lg:w-2/3">
          <label>ชื่อไฟล์</label>
          <input type="text" formControlName="file_name" disabled>
        </div>
        <div class="flex flex-col items-end">
          <label>&nbsp;</label>
          <mat-icon (click)="download()">search</mat-icon>
        </div>
      </div>
    </div>

    <div>
      <h1 class="title">หมายเหตุในการสอบสำหรับผู้สอบ</h1>
      <mat-form-field  style="width: 100%" appearance="fill" >
        <textarea matInput formControlName="remark" style="width: 100%; height: 140px"></textarea>
      </mat-form-field>
    </div>

    <div class="flex flex-row justify-center sm:justify-end">
      <button class="search-button mr-1" (click)="save()" [disabled]="form.invalid">บันทึก</button>
      <button class="add-button mr-1 " (click)="delete()" [disabled]="form.get('subject_uid').value == null">ลบข้อมูล</button>
      <button class="clear-button" (click)="cancel()">ยกเลิก</button>
    </div>
  </div>

</form>
 <pre *ngIf="!isHideForm">{{form.getRawValue() | json}}</pre>
