<script setup>
import { ref } from 'vue'
import GanttChart from '@/components/GanttChart/GanttChart.vue'
import EmployeeSector from '@/components/EmployeeSector.vue'

const selectedDate = ref('1/1/2024')
const employees = Array.from({ length: 10 }, (_, i) => `EM${i + 1}`)
const orders = ref([
  { id: 1, name: 'ORDER1' },
  { id: 2, name: 'ORDER2' }
])

// Drag and drop functionality
const draggedOrder = ref(null)

const handleDragStart = (order) => {
  draggedOrder.value = order
}

const handleDragOver = (event) => {
  event.preventDefault()
}

const handleDrop = (targetOrder) => {
  if (!draggedOrder.value || draggedOrder.value === targetOrder) return

  // Find the indices of the dragged and target orders
  const draggedIndex = orders.value.findIndex((o) => o.id === draggedOrder.value.id)
  const targetIndex = orders.value.findIndex((o) => o.id === targetOrder.id)

  // Remove the dragged order from its original position
  const [removed] = orders.value.splice(draggedIndex, 1)

  // Insert the dragged order at the target position
  orders.value.splice(targetIndex, 0, removed)

  // Reset the dragged order
  draggedOrder.value = null
}
</script>

<template>
  <v-container class="pa-0">
    <!-- Gantt chart -->
    <v-sheet class="pa-1 mb-3"
      style="border-radius: 15px; max-width: 98%; margin-left: auto; margin-right: auto; min-height: 500px;">

      <!-- Timeline -->
      <v-sheet class="pa-3 mb-3">
        <v-col cols="auto" class="d-flex align-center">
          <v-col cols="auto" class="d-flex align-center" style="background-color: #7E9CD3; border-radius: 15px; ">
            <v-btn class="mr-2" style="background-color: #2B2E3F; color: white;  border-radius: 10px;">&lt; Back</v-btn>
            <v-btn style="background-color: white; color: black; min-width: 200px; border-radius: 15px;">{{ selectedDate
            }}</v-btn>
            <v-btn class="ml-2" style="background-color: #2B2E3F; color: white; border-radius: 10px;">Next &gt;</v-btn>
            <v-btn class="ml-2"
              style="background-color: white; color: black; border-radius: 10px;"><v-icon>mdi-dots-horizontal</v-icon></v-btn>
          </v-col>
          <v-btn class="ml-auto"
            style="background-color: #0077D8; font-weight: bold; color: white; border-radius: 12px; padding: 28px; display: flex; align-items: center; justify-content: center; font-size: 18px;">
            Make a queue
          </v-btn>

        </v-col>
        <v-row>
        </v-row>
      </v-sheet>
      <!-- Gantt Chart -->
      <GanttChart />
    </v-sheet>

    <!-- Bottom Section -->
    <v-row class="mt-1" style="max-width: 100%; margin-left: auto; margin-right: auto;">
      <!-- Employee Selection -->
      <v-col cols="6">
        <v-card class="pa-4" style="background-color: white; border-radius: 15px; min-height: 280px;">
          <!-- เลือกพนักงานวางทับตรงนี้ -->
          <EmployeeSector :employees="employees" />
        </v-card>
      </v-col>

      <!-- Order Priority -->
      <v-col cols="6">
        <v-card class="pa-4" style="background-color: white; border-radius: 15px; min-height: 280px">
          <div v-for="order in orders" :key="order.id" class="order-item" draggable="true"
            @dragstart="() => handleDragStart(order)" @dragover="handleDragOver" @drop="() => handleDrop(order)">
            {{ order.name }}
          </div>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>
<!-- ส่วน UI ของปุ่ม Order1--2 -->
<style scoped>
.order-item {
  background-color: #2b2e3f;
  color: white;
  padding: 7px;
  margin-bottom: 8px;
  text-align: center;
  cursor: move;
  user-select: none;
}

.order-item:hover {
  opacity: 0.9;
}
</style>