<template>
  <div>
    <!-- Các nút điều khiển -->
    
    <button :disabled="!canTimeIn" @click="handleTimeIn">Time In</button>
    <button :disabled="!canBreak" @click="handleBreak">Break</button>
    <button :disabled="!canReturn" @click="handleReturn">Return</button>
    <button :disabled="!canTimeOut" @click="handleTimeOut">Time Out</button>

    <!-- Các trường thời gian -->
    <div>
      <label>Time In:</label>
      <input type="text" v-model="time_in" readonly />
    </div>
    <div>
      <label>Break 1 Start:</label>
      <input type="text" v-model="break1_start" readonly />
    </div>
    <div>
      <label>Break 1 End:</label>
      <input type="text" v-model="break1_end" readonly />
    </div>
    <div>
      <label>Break 2 Start:</label>
      <input type="text" v-model="break2_start" readonly />
    </div>
    <div>
      <label>Break 2 End:</label>
      <input type="text" v-model="break2_end" readonly />
    </div>
    <div>
      <label>Time Out:</label>
      <input type="text" v-model="time_out" readonly />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time_in: null,
      break1_start: null,
      break1_end: null,
      break2_start: null,
      break2_end: null,
      time_out: null,
    };
  },
  computed: {
    canTimeIn() {
      return !this.time_in;
    },
    canBreak() {
      if (!this.time_in) return false;
      if (!this.break1_start) return true; // Lần 1 Break
      if (this.break1_end && !this.break2_start) return true; // Lần 2 Break
      return false;
    },
    canReturn() {
      if (this.break1_start && !this.break1_end) return true; // Lần 1 Return
      if (this.break2_start && !this.break2_end) return true; // Lần 2 Return
      return false;
    },
    canTimeOut() {
      if (this.time_out) return false;
      if (this.break1_start && !this.break1_end) return false; 
      if (this.break2_start && !this.break2_end) return false;
      if (!this.time_in) return false;
      return true;
    },
  },
  methods: {
    handleTimeIn() {
      this.time_in = this.getCurrentTime();
    },
    handleBreak() {
      if (!this.break1_start) {
        this.break1_start = this.getCurrentTime(); // Lần 1 Break
      } else if (this.break1_end && !this.break2_start) {
        this.break2_start = this.getCurrentTime(); // Lần 2 Break
      }
    },
    handleReturn() {
      if (this.break1_start && !this.break1_end) {
        this.break1_end = this.getCurrentTime(); // Lần 1 Return
      } else if (this.break2_start && !this.break2_end) {
        this.break2_end = this.getCurrentTime(); // Lần 2 Return
      }
    },
    handleTimeOut() {
      this.time_out = this.getCurrentTime();
    },
    getCurrentTime() {
      const now = new Date();
      return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(
        now.getHours()
      ).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
    },
  },
};
</script>

<style scoped>
button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style>