<template>
  <Header />
  <div v-if="user">
    <div class="flex">
      <div class="">
        <SideBar />
      </div>
      <div class="w-full px-10">
        <div class="text-sm breadcrumbs">
          <ul>
            <li>
              <router-link :to="{ name: 'home' }">
                Home
              </router-link>
            </li>
            <li>
              <router-link :to="{ name: 'customer' }">
                Customers
              </router-link>
            </li>
          </ul>
        </div>
        <div class="grid grid-cols-1 rounded-md p-6 ">
          <div class="text-[24px]">Edit employee</div>
          <form class="rounded-md px-8 pt-6 pb-8 mb-4 w-full" enctype="multipart/form-data" @submit.prevent="onSubmit">

            <div class="text-[18px] mt-10 mb-10">General Info</div>

            <!-- first name -->
            <div class="mb-4">
              <label class="block text-white text-sm font-bold mb-2">First Name</label>
              <input v-model="CreateEmployeeForm.basicInfo.employee_first_name"
                class="input input-bordered w-full max-w-xs" id="title" type="text" placeholder="First Name" />
              <span v-if="v$.CreateEmployeeForm.basicInfo.employee_first_name.$error" class="text-red-600 text-center">
                {{ v$.CreateEmployeeForm.basicInfo.employee_first_name.$errors[0].$message }}
              </span>
            </div>


            <!-- last name -->
            <div class="mb-4">
              <label class="block text-white text-sm font-bold mb-2">Last Name</label>
              <input v-model="CreateEmployeeForm.basicInfo.employee_last_name"
                class="input input-bordered w-full max-w-xs" id="title" type="text" placeholder="Last Name" />
              <span v-if="v$.CreateEmployeeForm.basicInfo.employee_last_name.$error" class="text-red-600 text-center">
                {{ v$.CreateEmployeeForm.basicInfo.employee_last_name.$errors[0].$message }}
              </span>
            </div>


            <!-- employee type -->
            <div class="flex gap-5">
              <div class="flex-1 mb-4">
                <label class="block text-white text-sm font-bold mb-2">Type of employee</label>
                <select class="select select-bordered w-full max-w-xs" aria-label="Default select example"
                  id="employee_type" v-model="CreateEmployeeForm.basicInfo.employee_type">
                  <option class="text-white" v-for="(employee, index) in employList" :key="index"
                    :value="employee['value']">
                    {{ employee['text'] }}
                  </option>
                </select>
              </div>
            </div>


            <div class="text-[18px] mt-10 mb-10">Employee Address</div>

            <!-- street address -->
            <div class="col-span-12 mb-5 md:mb-5">
              <label class="block text-white text-sm font-bold mb-2">Street Address</label>
              <input v-model="CreateEmployeeForm.basicInfo.employee_address" class="input input-bordered w-full max-w-xs"
                id="address" type="text" placeholder="Address" />
              <span v-if="v$.CreateEmployeeForm.basicInfo.employee_address.$error" class="text-red-600 text-center">
                {{ v$.CreateEmployeeForm.basicInfo.employee_address.$errors[0].$message }}
              </span>
            </div>

            <!-- apt -->
            <div class="col-span-12 mb-5 md:mb-5">

              <input v-model="CreateEmployeeForm.basicInfo.employee_apt" class="input input-bordered w-full max-w-xs"
                id="apt" type="text" placeholder="Apt, suite, unit, building, floor, etc" />
            </div>

            <!-- employee_town -->
            <div class="col-span-12 md:col-span-4 mb-20 md:mb-5 ">
              <label class="block text-white text-sm font-bold mb-2">Town</label>
              <input v-model="CreateEmployeeForm.basicInfo.employee_town" class="input input-bordered w-full max-w-xs"
                id="city" type="text" placeholder="Town" />
              <span v-if="v$.CreateEmployeeForm.basicInfo.employee_town.$error" class="text-red-600 text-center">
                {{ v$.CreateEmployeeForm.basicInfo.employee_town.$errors[0].$message }}
              </span>
            </div>

            <!-- phone number -->
            <div class="col-span-12 md:col-span-4 mb-5 md:mb-5">
              <label class="block text-white text-sm font-bold mb-2">Phone Number</label>
              <input v-model="CreateEmployeeForm.basicInfo.employee_phone_number" @input="acceptNumber()"
                class="input input-bordered w-full max-w-xs" id="phone number" type="text" placeholder="Phone Number" />
              <span v-if="v$.CreateEmployeeForm.basicInfo.employee_phone_number.$error" class="text-red-600 text-center">
                {{ v$.CreateEmployeeForm.basicInfo.employee_phone_number.$errors[0].$message }}
              </span>
            </div>

            <!-- state -->
            <div class="flex-1 mb-4">
              <label class="block text-white text-sm font-bold mb-2">State</label>
              <select class="select select-bordered w-full max-w-xs" aria-label="Default select example"
                id="employee_state" v-model="CreateEmployeeForm.basicInfo.employee_state">
                <option class="text-white" v-for="(state, index) in stateList" :key="index" defaultValue="state_default"
                  :value="state['value']">
                  {{ state['text'] }}
                </option>
              </select>
              <span v-if="v$.CreateEmployeeForm.basicInfo.employee_state.$error" class="text-red-600 text-center">
                {{ v$.CreateEmployeeForm.basicInfo.employee_state.$errors[0].$message }}
              </span>
            </div>

            <!-- zip -->
            <div class="col-span-12 md:col-span-4 mb-5 md:mb-0">
              <label class="block text-white text-sm font-bold mb-2">Zip Code</label>
              <input v-model="CreateEmployeeForm.basicInfo.employee_zip" class="input input-bordered w-full max-w-xs"
                id="zip" type="text" placeholder="Zip" />
              <span v-if="v$.CreateEmployeeForm.basicInfo.employee_zip.$error" class="text-red-600 text-center">
                {{ v$.CreateEmployeeForm.basicInfo.employee_zip.$errors[0].$message }}
              </span>
            </div>


            <div class="mb-4">
              <label class="block text-white text-sm font-bold mb-2">Employee BirthDay</label>
              <input v-model="CreateEmployeeForm.basicInfo.employee_birthday" class="input input-bordered w-full max-w-xs"
                id="title" type="date" min="1945-01-01" max="2030-01-01" />

            </div>


            <div class="text-[18px] mt-10 mb-10">Employee Dates</div>


            <div class="mb-4">
              <label class="block text-white text-sm font-bold mb-2">Employee Start Date</label>
              <input v-model="CreateEmployeeForm.basicInfo.employee_start_date"
                class="input input-bordered w-full max-w-xs" id="title" type="date" min="2023-01-01" max="2030-01-01" />

            </div>

            <div class="mb-4">
              <label class="block text-white text-sm font-bold mb-2">Employee End Date</label>
              <input v-model="CreateEmployeeForm.basicInfo.employee_end_date" class="input input-bordered w-full max-w-xs"
                id="title" type="date" min="2023-01-01" max="2030-01-01" />

            </div>

            <div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
              <button class="btn">
                Edit Employee
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <Footer />
</template>

<script lang="ts">
import {defineComponent} from 'vue'
import axios from 'axios'
import authHeader from '../../services/auth.header'
import Header from '../../layouts/headers/headerauth.vue'
import SideBar from '../../layouts/sidebar/sidebar.vue'
import Footer from '../../layouts/footers/footer.vue'
import useValidate from "@vuelidate/core";
import {minLength, required} from "@vuelidate/validators";

export default defineComponent({
  name: 'EmployeeEdit',

  components: {
    Header,
    SideBar,
    Footer,
  },

  data() {
    return {
      v$: useValidate(),
      user: null,
      stateList: [],
      employList: [],
      employee_id: '',
      state_default: '',
      CreateEmployeeForm: {
        basicInfo: {
          employee_last_name: "",
          employee_first_name: "",
          employee_town: "",
          employee_address: "",
          employee_apt: "",
          employee_zip: "",
          employee_birthday: "",
          employee_phone_number: "",
          employee_start_date: "",
          employee_end_date: "",
          employee_type: "",
          employee_state: "",

        },
      },
    }
  },
  validations() {
    return {
      CreateEmployeeForm: {
        basicInfo: {
          employee_last_name: {required, minLength: minLength(1)},
          employee_first_name: {required, minLength: minLength(1)},
          employee_town: {required, minLength: minLength(1)},
          employee_type: {required},
          employee_zip: {required, minLength: minLength(5)},
          employee_state: {required},
          employee_apt: {required},
          employee_address: {required},
          employee_birthday: {required},
          employee_phone_number: {required},
          employee_start_date: {required},
        },
      },
    };
  },
  created() {
    this.userStatus()
       this.getEmployee(this.$route.params.id)
  },
  mounted() {
    this.getEmployeeTypeList();
    this.getStatesList();
    this.getEmployee(this.$route.params.id)
  },
    watch: {
    $route() {
      this.getEmployee(this.$route.params.id);
    },
  },
  methods: {
    acceptNumber() {
        let x = this.CreateEmployeeForm.basicInfo.employee_phone_number.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
        if (x){
          this.CreateEmployeeForm.basicInfo.employee_phone_number = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
        }
        else {
          this.CreateEmployeeForm.basicInfo.employee_phone_number = ''
        }
    },
    userStatus() {
      let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
      axios({
        method: 'get',
        url: path,
        withCredentials: true,
        headers: authHeader(),
      })
          .then((response: any) => {
            if (response.data.ok) {
              this.user = response.data.user;
            }
          })
          .catch(() => {
            this.user = null
          })
    },
    EditEmployee(payload: {
      employee_last_name: string;
      employee_first_name: string;
      employee_town: string;
      employee_address: string;
      employee_zip: string;
      employee_apt: string,
      employee_birthday: string;
      employee_phone_number: string;
      employee_start_date: string,
      employee_end_date: string;
      employee_type: string;
      employee_state: string;
    }) {
      let path = import.meta.env.VITE_BASE_URL + "/employee/edit/" + this.employee_id;
      axios({
        method: "post",
        url: path,
        data: payload,
        withCredentials: true,
        headers: authHeader(),
      })
          .then((response: any) => {
            if (response.data.ok) {
              this.$router.push({name: "employeeProfile", params: { id: this.employee_id }});
            }
            if (response.data.error) {
              this.$router.push("/");
            }
          })
    },

    getEmployee (userid:any) {
      let path = import.meta.env.VITE_BASE_URL + "/employee/" + userid;
      axios({
        method: "get",
        url: path,
        withCredentials: true,
        headers: authHeader(),
      })
        .then((response: any) => {
            this.employee_id = response.data.id
            this.CreateEmployeeForm.basicInfo.employee_last_name= response.data.employee_last_name;
            this.CreateEmployeeForm.basicInfo.employee_first_name= response.data.employee_first_name;
            this.CreateEmployeeForm.basicInfo.employee_town= response.data.employee_town;
            this.CreateEmployeeForm.basicInfo.employee_type= response.data.employee_type;
            this.CreateEmployeeForm.basicInfo.employee_state= response.data.employee_state;
            this.CreateEmployeeForm.basicInfo.employee_zip= response.data.employee_zip;
            this.CreateEmployeeForm.basicInfo.employee_apt= response.data.employee_apt;
            this.CreateEmployeeForm.basicInfo.employee_address= response.data.employee_address;
            this.CreateEmployeeForm.basicInfo.employee_birthday= response.data.employee_birthday;
            this.CreateEmployeeForm.basicInfo.employee_phone_number= response.data.employee_phone_number;
            this.CreateEmployeeForm.basicInfo.employee_start_date= response.data.employee_start_date;
            this.CreateEmployeeForm.basicInfo.employee_end_date= response.data.employee_end_date;

        })
    },
    onSubmit() {
      let payload = {
        employee_last_name: this.CreateEmployeeForm.basicInfo.employee_last_name,
        employee_first_name: this.CreateEmployeeForm.basicInfo.employee_first_name,
        employee_town: this.CreateEmployeeForm.basicInfo.employee_town,
        employee_address: this.CreateEmployeeForm.basicInfo.employee_address,
        employee_zip: this.CreateEmployeeForm.basicInfo.employee_zip,
        employee_apt: this.CreateEmployeeForm.basicInfo.employee_apt,
        employee_birthday: this.CreateEmployeeForm.basicInfo.employee_birthday,
        employee_phone_number: this.CreateEmployeeForm.basicInfo.employee_phone_number,
        employee_start_date: this.CreateEmployeeForm.basicInfo.employee_start_date,
        employee_end_date: this.CreateEmployeeForm.basicInfo.employee_end_date,
        employee_type: this.CreateEmployeeForm.basicInfo.employee_type,
        employee_state: this.CreateEmployeeForm.basicInfo.employee_state,
      };
      this.EditEmployee(payload);
    },
    getEmployeeTypeList() {
      let path = import.meta.env.VITE_BASE_URL + "/query/employeetype";
      axios({
        method: "get",
        url: path,
        withCredentials: true,
      })
          .then((response: any) => {
            this.employList = response.data;
          })
          .catch(() => {
          });
    },
    getStatesList() {
      let path = import.meta.env.VITE_BASE_URL + "/query/states";
      axios({
        method: "get",
        url: path,
        withCredentials: true,
      })
          .then((response: any) => {
            this.stateList = response.data;
          })
          .catch(() => {
          });
    },
  },
})
</script>

<style scoped></style>