<script setup>
const costChartOptions = {
  chart: {
    type: 'column',
  },
  title: {
    text: null,
  },
  credits: {
    enabled: false,
  },
  xAxis: {
    categories: ['T10', 'T11', 'T12', 'T1', 'T2', 'T3'],
    crosshair: true,
    accessibility: {
      description: 'Tháng',
    },
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Triệu VNĐ',
    },
  },
  tooltip: {
    valueSuffix: ' (triệu VNĐ)',
  },
  plotOptions: {
    column: {
      pointPadding: 0,
      borderWidth: 0,
    },
  },
  series: [
    {
      name: 'Chi phí',
      data: [180, 195, 210, 225, 205, 215],
      showInLegend: false,
    },
  ],
};
const efficiencyChartOptions = {
  chart: {
    type: 'line',
  },
  title: {
    text: null,
  },
  credits: {
    enabled: false,
  },
  xAxis: {
    categories: [
      'T10',
      'T11',
      'T12',
      'T1',
      'T2',
      'T3',
      'T4',
      'T5',
      'T6',
      'T7',
      'T8',
      'T9',
      'T10',
    ],
    crosshair: true,
    accessibility: {
      description: 'Tháng',
    },
  },
  yAxis: {
    min: 0,
    title: {
      text: '%',
    },
  },
  tooltip: {
    valueSuffix: '%',
  },
  plotOptions: {
    series: {
      label: {
        connectorAllowed: false,
      },
    },
  },
  series: [
    {
      name: 'Hiệu suất',
      data: [50, 62, 75, 78, 80, 74, 79, 70, 68, 73, 82, 76, 77],
      showInLegend: false,
    },
  ],
};
const alloChartOptions = {
  chart: {
    type: 'pie',
    zooming: {
      type: 'xy',
    },
    panning: {
      enabled: true,
      type: 'xy',
    },
    panKey: 'shift',
  },
  credits: {
    enabled: false,
  },
  title: {
    text: null,
  },
  tooltip: {
    valueSuffix: '%',
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: [
        {
          enabled: true,
          distance: 20,
        },
        {
          enabled: true,
          distance: -40,
          format: '{point.percentage:.1f}%',
          style: {
            fontSize: '1.2em',
            textOutline: 'none',
            opacity: 0.7,
          },
          filter: {
            operator: '>',
            property: 'percentage',
            value: 10,
          },
        },
      ],
    },
  },
  series: [
    {
      name: 'Percentage',
      colorByPoint: true,
      data: [
        {
          name: 'Kinh doanh',
          y: 43.02,
        },
        {
          name: 'Hành chính',
          y: 26.71,
        },
        {
          name: 'Kế toán',
          y: 10.09,
        },
        {
          name: 'HR',
          y: 15.5,
        },
        {
          name: 'Marketing',
          y: 20.68,
        },
      ],
    },
  ],
};
const barChartOptions = {
  chart: {
    type: 'bar',
  },
  title: {
    text: null,
  },
  credits: {
    enabled: false,
  },
  xAxis: {
    categories: ['Hà Nội', 'TP.HCM', 'Đà Nẵng', 'Cần Thơ'],
    title: {
      text: null,
    },
    gridLineWidth: 1,
    lineWidth: 0,
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Số lượng',
    },
    labels: {
      overflow: 'justify',
    },
    gridLineWidth: 0,
  },
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true,
      },
      groupPadding: 0.1,
    },
  },
  series: [
    {
      name: 'Số lượng',
      data: [24, 33, 30, 19],
      showInLegend: false,
    },
  ],
};
</script>
<template>
  <div class="columns is-multiline">
    <div class="column columns is-12">
      <div class="column is-3">
        <div class="card">
          <div class="card-content">
            <div class="media">
              <p class="">Tổng nhân viên</p>
            </div>
            <div class="content">
              <p class="title is-4">8</p>
              <p class="subtitle is-6">+2 so với tháng trước</p>
            </div>
          </div>
        </div>
      </div>
      <div class="column is-3">
        <div class="card">
          <div class="card-content">
            <div class="media">
              <p class="">Đang làm việc</p>
            </div>
            <div class="content">
              <p class="title is-4">7</p>
              <p class="subtitle is-6">1 nhân viên nghỉ phép</p>
            </div>
          </div>
        </div>
      </div>
      <div class="column is-3">
        <div class="card">
          <div class="card-content">
            <div class="media">
              <p class="">Chấm công hôm nay</p>
            </div>
            <div class="content">
              <p class="title is-4">7</p>
              <p class="subtitle is-6">2 nhân viên đi muộn</p>
            </div>
          </div>
        </div>
      </div>
      <div class="column is-3">
        <div class="card">
          <div class="card-content">
            <div class="media">
              <p class="">Chi phí nhân sự</p>
            </div>
            <div class="content">
              <p class="title is-4">215M</p>
              <p class="subtitle is-6">+4.8% so với tháng trước</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="column columns is-12">
      <div class="column is-6">
        <div class="card">
          <div class="card-content">
            <div class="media">
              <p class="has-text-danger">Cảnh báo hợp đồng sắp hết hạn</p>
            </div>
            <div class="content is-flex is-flex-direction-column is-gap-1">
              <div
                class="card m-0"
                style="box-shadow: none; background-color: #fff5f5"
              >
                <div
                  class="card-content p-3 is-flex is-justify-content-space-between is-align-items-center"
                >
                  <div class="is-flex is-flex-direction-column">
                    <p class="m-0">Trần Thị Bình</p>
                    <p class="m-0 fs-14 has-text-grey">
                      Nhân viên - Showroom Hà Nội
                    </p>
                  </div>
                  <p
                    class="fs-13 has-text-danger px-2 py-1"
                    style="border: 1px solid red; border-radius: 8px"
                  >
                    2026-04-15
                  </p>
                </div>
              </div>
              <div
                class="card m-0"
                style="box-shadow: none; background-color: #fff5f5"
              >
                <div
                  class="card-content p-3 is-flex is-justify-content-space-between is-align-items-center"
                >
                  <div class="is-flex is-flex-direction-column">
                    <p class="m-0">Trần Thị Bình</p>
                    <p class="m-0 fs-14 has-text-grey">
                      Nhân viên - Showroom Hà Nội
                    </p>
                  </div>
                  <p
                    class="fs-13 has-text-danger px-2 py-1"
                    style="border: 1px solid red; border-radius: 8px"
                  >
                    2026-04-15
                  </p>
                </div>
              </div>
              <div
                class="card m-0"
                style="box-shadow: none; background-color: #fff5f5"
              >
                <div
                  class="card-content p-3 is-flex is-justify-content-space-between is-align-items-center"
                >
                  <div class="is-flex is-flex-direction-column">
                    <p class="m-0">Trần Thị Bình</p>
                    <p class="m-0 fs-14 has-text-grey">
                      Nhân viên - Showroom Hà Nội
                    </p>
                  </div>
                  <p
                    class="fs-13 has-text-danger px-2 py-1"
                    style="border: 1px solid red; border-radius: 8px"
                  >
                    2026-04-15
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="column is-6">
        <div class="card h-full">
          <div class="card-content">
            <div class="media">
              <p style="color: #34d">Tình trạng chấm công hôm nay</p>
            </div>
            <div class="content">
              <div class="is-flex is-justify-content-space-between">
                <p class="fs-14">Đúng giờ</p>
                <span class="tag" style="background-color: lightgoldenrodyellow"
                  >4 người</span
                >
              </div>
              <div class="is-flex is-justify-content-space-between">
                <p class="fs-14">Đi muộn</p>
                <span class="tag" style="background-color: lightblue"
                  >2 người</span
                >
              </div>
              <div class="is-flex is-justify-content-space-between">
                <p class="fs-14">Về sớm</p>
                <span class="tag" style="background-color: lightgreen"
                  >1 người</span
                >
              </div>
              <div class="is-flex is-justify-content-space-between">
                <p class="fs-14">Nghỉ phép</p>
                <span class="tag" style="background-color: lightpink"
                  >1 người</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="column columns is-12 is-multiline">
      <div class="column is-6">
        <div class="card">
          <div class="card-content">
            <p class="mb-4">Chi phí nhân sự 6 tháng</p>
            <highcharts :options="costChartOptions" />
          </div>
        </div>
      </div>
      <div class="column is-6">
        <div class="card">
          <div class="card-content">
            <p class="mb-4">Hiệu suất làm việc trung bình</p>
            <highcharts :options="efficiencyChartOptions" />
          </div>
        </div>
      </div>
      <div class="column is-6">
        <div class="card">
          <div class="card-content">
            <p class="mb-4">Phân bổ nhân sự theo phòng ban</p>
            <highcharts :options="alloChartOptions" />
          </div>
        </div>
      </div>
      <div class="column is-6">
        <div class="card">
          <div class="card-content">
            <p class="mb-4">Phân bổ nhân sự theo showroom</p>
            <highcharts :options="barChartOptions" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
