<template>
  <div class="space-y-8">
    <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
      <MetricCard v-for="metric in metrics" :key="metric.label" v-bind="metric" />
    </section>

    <section class="grid gap-6 xl:grid-cols-[1.5fr_1fr]">
      <div class="rounded-3xl border border-white/10 bg-white/[0.04] p-6">
        <div class="mb-6 flex items-center justify-between">
          <h3 class="text-xl font-semibold">Branch Wise Attendance</h3>
          <span class="text-sm text-cyan-300">Realtime</span>
        </div>
        <div class="space-y-4">
          <div v-for="branch in branches" :key="branch.name">
            <div class="mb-2 flex justify-between text-sm">
              <span>{{ branch.name }}</span>
              <span>{{ branch.present }}/{{ branch.total }}</span>
            </div>
            <div class="h-3 rounded-full bg-slate-800">
              <div class="h-3 rounded-full bg-cyan-400" :style="{ width: `${branch.percent}%` }"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="rounded-3xl border border-white/10 bg-gradient-to-br from-cyan-400/20 to-fuchsia-500/10 p-6">
        <h3 class="text-xl font-semibold">Tomorrow Holidays</h3>
        <div class="mt-5 space-y-3">
          <div v-for="holiday in holidays" :key="holiday" class="rounded-2xl bg-slate-950/50 p-4 text-sm">{{ holiday }}</div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import MetricCard from '../components/MetricCard.vue'

const metrics = [
  { label: 'Total Employees', value: '1,248', tone: 'cyan' },
  { label: 'Present Today', value: '1,086', tone: 'emerald' },
  { label: 'Absent Today', value: '72', tone: 'rose' },
  { label: 'Late In Today', value: '38', tone: 'amber' },
  { label: 'Early Out Today', value: '11', tone: 'violet' },
  { label: 'Overtime Today', value: '214h', tone: 'cyan' },
  { label: 'Salary Pending', value: '$42.8k', tone: 'amber' },
  { label: 'Active Devices', value: '28', tone: 'emerald' }
]

const branches = [
  { name: 'Head Office', present: 420, total: 450, percent: 93 },
  { name: 'Factory A', present: 365, total: 410, percent: 89 },
  { name: 'Factory B', present: 301, total: 388, percent: 78 }
]

const holidays = ['Government Holiday - Dhaka Branch', 'Festival Holiday - Chattogram Branch']
</script>
