<template>
  <section class="space-y-6 p-4 md:p-8">
    <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
      <div>
        <h2 class="text-3xl font-black">Employee Management</h2>
        <p class="mt-1 text-slate-500">Profiles, hierarchy, documents, transfers, device IDs, and salary data.</p>
      </div>
      <button class="rounded-2xl bg-ink px-5 py-3 text-sm font-bold text-white">Add Employee</button>
    </div>

    <div class="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-soft">
      <table class="w-full min-w-[760px] text-left text-sm">
        <thead class="bg-slate-50 text-slate-500">
          <tr>
            <th class="p-4">Code</th><th class="p-4">Name</th><th class="p-4">Branch</th><th class="p-4">Department</th><th class="p-4">Device IDs</th><th class="p-4">Status</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="employee in employees" :key="employee.code" class="border-t border-slate-100">
            <td class="p-4 font-bold">{{ employee.employee_code }}</td>
            <td class="p-4">{{ employee.name }}</td>
            <td class="p-4">{{ employee.branch }}</td>
            <td class="p-4">{{ employee.department }}</td>
            <td class="p-4 text-slate-500">FP: {{ employee.fingerprint_id }}, RFID: {{ employee.rfid_card_no }}</td>
            <td class="p-4"><span class="rounded-full bg-emerald-50 px-3 py-1 text-xs font-bold text-emerald-700">{{ employee.status }}</span></td>
          </tr>
        </tbody>
      </table>
    </div>
  </section>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { getJson } from '../services/api.js';

const employees = ref([]);

onMounted(async () => {
  try {
    const response = await getJson('/employees');
    employees.value = response.data;
  } catch (error) {
    console.warn(error.message);
  }
});
</script>
