<template>
    <div class="text-[16px] font-[500] pb-[15px]">Meal Details</div>
    <div class="grid grid-cols-4 gap-[15px] rounded-default">
        <div class="p-[15px] bg-white">
            <div class="text-[#2f2f2f]">
                <span v-if="data.schedule.running == 1">Running</span>
                <span v-else>Previous</span>
                Schedule
            </div>
            <div class="text-[24px] text-[#333131]">
                {{ data.schedule.name ? data.schedule.name : "N/A" }}
            </div>
        </div>
        <div class="p-[15px] bg-white">
            <div class="text-[#2f2f2f]">Total Employee</div>
            <div class="text-[24px] text-[#333131]">
                {{ data.total ? data.total : "0" }}
            </div>
        </div>
        <div class="p-[15px] bg-white relative">
            <div class="text-[#2f2f2f]">Scanned Employee</div>
            <div class="text-[24px] text-[#333131]">
                {{ data.scanned ? data.scanned : "0" }}
            </div>
            <div class="text-[#2f2f2f]">({{ getPercentage(data.total, data.scanned) }} % of {{ data.total }})</div>
            <div class="w-[100px] h-[70px] ml-auto absolute right-0 top-[20px]">
                <v-chart :option="getRadialOption(getPercentage(data.total, data.scanned))" />
            </div>
        </div>
        <div class="p-[15px] bg-white relative">
            <div class="w-fit">
                <div class="text-[#2f2f2f]">Pending Employee</div>
                <div class="text-[24px] text-[#333131]">
                    {{ data.pending ? data.pending : "0" }}
                </div>
                <div class="text-[#2f2f2f]">({{ getPercentage(data.total, data.pending) }} % of {{ data.total }})</div>
            </div>
            <div class="w-[100px] h-[70px] ml-auto absolute right-0 top-[20px]">
                <v-chart :option="getRadialOption(getPercentage(data.total, data.pending))" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import VChart from "vue-echarts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import { TitleComponent, TooltipComponent, LegendComponent } from "echarts/components";

use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent]);

const data = ref({
    total: 10,
    pending: 200,
    scanned: 100,
    schedule: {
        name: "Testing",
        running: 1,
    },
});

const getRadialOption = (percent: number) => ({
    series: [
        {
            type: "pie",
            radius: ["80%", "100%"],
            avoidLabelOverlap: false,
            silent: true,
            data: [
                { value: percent, itemStyle: { color: "#4a8e57" } },
                { value: 100 - percent, itemStyle: { color: "#e6edf7" } },
            ],
            label: {
                show: true,
                position: "center",
                formatter: `${Math.round(percent)}%`,
                fontSize: 12,
                color: "#6b7280", // Tailwind's gray-500
                fontWeight: 500,
            },
            labelLine: { show: false },
            emphasis: { disabled: true },
            hoverAnimation: false,
        },
    ],
    tooltip: { show: false },
    legend: { show: false },
});

const getPercentage = (total: number, by: number) => {
    if (!by) {
        return 0;
    }
    return parseFloat(((by / total) * 100).toFixed(2));
};
</script>
