<template>
    <div>
        <!-- Breadcrumb -->
        <div class="breadcrumb-header justify-content-between">
            <div class="my-auto">
                <h4 class="page-title">Báo cáo doanh số theo Sale</h4>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">Trang chủ</a></li>
                    <li class="breadcrumb-item"><a href="javascript:void(0);">Báo cáo</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Doanh số theo Sale</li>
                </ol>
            </div>
        </div>

        <!-- Search Form -->
        <div class="row row-sm">
            <div class="col-lg-12">
                <div class="card shadow-none">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-search me-2"></i>
                            Tìm kiếm
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-6 col-md-8 mb-3">
                                <label class="form-label">Thời gian</label>
                                <VueDatePicker ref="dateRangePicker" v-model="date" :enable-time-picker="false" range
                                    multi-calendars auto-apply :format="format" @update:model-value="handleDate">
                                    <template #left-sidebar>
                                        <DateRangeSidebar @change-date="onChangeDate"></DateRangeSidebar>
                                    </template>
                                </VueDatePicker>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <button type="button" class="btn btn-primary me-2" @click="search">
                                    <i class="fas fa-search me-2"></i>Tìm kiếm
                                </button>
                                <button type="button" class="btn btn-secondary" @click="resetSearch">
                                    <i class="fas fa-redo me-2"></i>Làm mới
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Số liệu tổng quan -->
        <div class="row row-sm" v-if="reportData.SaleRevenueTotalItem">
            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 grid-margin">
                <div class="card shadow-none mb-3">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-chart-pie me-2"></i>
                            Tổng quan
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <!-- Tổng -->
                            <div class="col-lg-3 col-md-6 mb-3">
                                <div class="card bg-primary text-white">
                                    <div class="card-body">
                                        <h4 class="mb-1">{{
                                            formatCurrency(reportData.SaleRevenueTotalItem.TotalRevenue) }}
                                        </h4>
                                        <p class="mb-1 small card-Count">{{
                                            formatNumber(reportData.SaleRevenueTotalItem.TotalOrders) }}
                                        </p>
                                        <p class="mb-0 small tx-13">COD: {{
                                            formatCurrency(reportData.SaleRevenueTotalItem.TotalCollectAmount) }}
                                        </p>
                                        <div class="mt-2">
                                            <strong>Tổng doanh thu</strong>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Giao thành công -->
                            <div class="col-lg-3 col-md-6 mb-3">
                                <div class="card bg-success text-white">
                                    <div class="card-body">
                                        <h4 class="mb-1">{{
                                            formatCurrency(reportData.SaleRevenueTotalItem.DeliverySuccessRevenue) }}
                                        </h4>
                                        <p class="mb-1 small card-Count">{{
                                            formatNumber(reportData.SaleRevenueTotalItem.DeliverySuccess) }}
                                        </p>
                                        <p class="mb-0 small tx-13">COD: {{
                                            formatCurrency(reportData.SaleRevenueTotalItem.DeliverySuccessCollectAmount)
                                            }}
                                        </p>
                                        <div class="mt-2">
                                            <strong>Giao thành công</strong>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Đang xử lý -->
                            <div class="col-lg-3 col-md-6 mb-3">
                                <div class="card bg-warning text-white">
                                    <div class="card-body">
                                        <h4 class="mb-1">{{
                                            formatNumber(reportData.SaleRevenueTotalItem.TotalInProgress) }}
                                        </h4>
                                        <p class="mb-1 small card-Count">{{
                                            formatNumber(reportData.SaleRevenueTotalItem.TotalInProgress) }}
                                        </p>
                                        <p class="mb-0 small tx-13">Đơn hàng</p>
                                        <div class="mt-2">
                                            <strong>Đang xử lý</strong>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Đã hủy -->
                            <div class="col-lg-3 col-md-6 mb-3">
                                <div class="card bg-secondary text-white">
                                    <div class="card-body">
                                        <h4 class="mb-1">{{
                                            formatCurrency(reportData.SaleRevenueTotalItem.CancelledRevenue || 0) }}
                                        </h4>
                                        <p class="mb-1 small card-Count">{{
                                            formatNumber(reportData.SaleRevenueTotalItem.Cancelled || 0) }}
                                        </p>
                                        <p class="mb-0 small tx-13">COD: {{
                                            formatCurrency(reportData.SaleRevenueTotalItem.CancelledCollectAmount || 0)
                                            }}
                                        </p>
                                        <div class="mt-2">
                                            <strong>Đã hủy</strong>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Biểu đồ -->
        <div class="row row-sm" v-if="reportData.Items && reportData.Items.length > 0">
            <div class="col-lg-6 col-md-12 mb-3">
                <div class="card shadow-none">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-chart-bar me-2"></i>
                            Top 10 Sale theo doanh thu
                        </h5>
                    </div>
                    <div class="card-body">
                        <v-chart ref="barChart" :option="barChartOption" style="height: 300px;"></v-chart>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-12 mb-3">
                <div class="card shadow-none">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-chart-doughnut me-2"></i>
                            Phân bố trạng thái đơn hàng
                        </h5>
                    </div>
                    <div class="card-body">
                        <v-chart ref="doughnutChart" :option="doughnutChartOption" style="height: 300px;"></v-chart>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bảng dữ liệu -->
        <div class="row row-sm">
            <div class="col-lg-12">
                <div class="card shadow-none">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-table me-2"></i>
                            Chi tiết doanh số theo Sale
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead class="table-primary">
                                    <tr>
                                        <th class="wd-15p">Sale</th>
                                        <th class="wd-10p text-center">Tổng doanh thu</th>
                                        <th class="wd-10p text-center">Chờ lấy</th>
                                        <th class="wd-10p text-center">Đang lấy</th>
                                        <th class="wd-10p text-center">Vận chuyển</th>
                                        <th class="wd-10p text-center">Đang giao</th>
                                        <th class="wd-10p text-center">Thành công</th>
                                        <th class="wd-10p text-center">Đã hủy</th>
                                        <th class="wd-10p text-center">Tỷ lệ thành công</th>
                                    </tr>
                                </thead>
                                <tbody v-if="loading">
                                    <tr>
                                        <td colspan="9" class="tx-semibold text-center text-default">
                                            <span class="spinner-border spinner-border-sm"></span>
                                        </td>
                                    </tr>
                                </tbody>
                                <tbody v-if="!loading && (!reportData.Items || reportData.Items.length <= 0)">
                                    <tr>
                                        <td colspan="9" class="tx-semibold text-center text-danger">
                                            Không tìm thấy dữ liệu!
                                        </td>
                                    </tr>
                                </tbody>
                                <tbody v-if="!loading && reportData.Items && reportData.Items.length > 0">
                                    <tr v-for="item in reportData.Items" :key="item.SaleId">
                                        <td>
                                            <div class="fw-bold">{{ item.SaleName }}</div>
                                            <div class="small text-muted">ID: {{ item.SaleId }}</div>
                                            <div class="small text-info">{{ item.SalePhoneNumber }}</div>
                                        </td>
                                        <td class="text-center">
                                            <div class="fw-bold text-primary">{{ formatCurrency(item.TotalRevenue) }}
                                            </div>
                                            <div class="small text-muted">{{ formatNumber(item.TotalOrders) }} đơn</div>
                                            <div class="small text-info">COD: {{
                                                formatCurrency(item.TotalCollectAmount) }}
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <div class="fw-bold text-warning">{{ formatCurrency(item.WaitPickupRevenue)
                                                }}
                                            </div>
                                            <div class="small text-muted">{{ formatNumber(item.WaitPickup) }} đơn</div>
                                            <div class="small text-info">COD: {{
                                                formatCurrency(item.WaitPickupCollectAmount) }}
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <div class="fw-bold text-info">{{ formatCurrency(item.PickingRevenue) }}
                                            </div>
                                            <div class="small text-muted">{{ formatNumber(item.Picking) }} đơn</div>
                                            <div class="small text-info">COD: {{
                                                formatCurrency(item.PickingCollectAmount) }}
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <div class="fw-bold text-secondary">{{
                                                formatCurrency(item.TransportingRevenue) }}
                                            </div>
                                            <div class="small text-muted">{{ formatNumber(item.Transporting) }} đơn
                                            </div>
                                            <div class="small text-info">COD: {{
                                                formatCurrency(item.TransportingCollectAmount) }}
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <div class="fw-bold text-primary">{{ formatCurrency(item.DeliveringRevenue)
                                                }}
                                            </div>
                                            <div class="small text-muted">{{ formatNumber(item.Delivering) }} đơn</div>
                                            <div class="small text-info">COD: {{
                                                formatCurrency(item.DeliveringCollectAmount) }}
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <div class="fw-bold text-success">{{
                                                formatCurrency(item.DeliverySuccessRevenue) }}
                                            </div>
                                            <div class="small text-muted">{{ formatNumber(item.DeliverySuccess) }} đơn
                                            </div>
                                            <div class="small text-info">COD: {{
                                                formatCurrency(item.DeliverySuccessCollectAmount) }}
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <div class="fw-bold text-warning">{{ formatCurrency(item.CancelledRevenue)
                                                }}
                                            </div>
                                            <div class="small text-muted">{{ formatNumber(item.Cancelled) }} đơn</div>
                                            <div class="small text-info">COD: {{
                                                formatCurrency(item.CancelledCollectAmount) }}
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <div class="progress" style="height: 20px;">
                                                <div class="progress-bar bg-success" role="progressbar"
                                                    :style="`width: ${item.SuccessRate}%`"
                                                    :aria-valuenow="item.SuccessRate" aria-valuemin="0"
                                                    aria-valuemax="100">
                                                    {{ formatPercent(item.SuccessRate) }}%
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <!-- Dòng tổng cộng -->
                                    <tr v-if="reportData.SaleRevenueTotalItem" class="table-warning">
                                        <td><strong>{{ reportData.SaleRevenueTotalItem.SaleName }}</strong></td>
                                        <td class="text-center">
                                            <div class="fw-bold text-primary">{{
                                                formatCurrency(reportData.SaleRevenueTotalItem.TotalRevenue) }}
                                            </div>
                                            <div class="small text-muted">{{
                                                formatNumber(reportData.SaleRevenueTotalItem.TotalOrders) }} đơn</div>
                                            <div class="small text-info">COD: {{
                                                formatCurrency(reportData.SaleRevenueTotalItem.TotalCollectAmount) }}
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <div class="fw-bold text-warning">{{
                                                formatCurrency(reportData.SaleRevenueTotalItem.WaitPickupRevenue || 0)
                                                }}
                                            </div>
                                            <div class="small text-muted">{{
                                                formatNumber(reportData.SaleRevenueTotalItem.WaitPickup || 0) }} đơn
                                            </div>
                                            <div class="small text-info">COD: {{
                                                formatCurrency(reportData.SaleRevenueTotalItem.WaitPickupCollectAmount
                                                    || 0) }}
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <div class="fw-bold text-info">{{
                                                formatCurrency(reportData.SaleRevenueTotalItem.PickingRevenue || 0) }}
                                            </div>
                                            <div class="small text-muted">{{
                                                formatNumber(reportData.SaleRevenueTotalItem.Picking || 0) }} đơn</div>
                                            <div class="small text-info">COD: {{
                                                formatCurrency(reportData.SaleRevenueTotalItem.PickingCollectAmount ||
                                                    0) }}
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <div class="fw-bold text-secondary">{{
                                                formatCurrency(reportData.SaleRevenueTotalItem.TransportingRevenue || 0)
                                                }}
                                            </div>
                                            <div class="small text-muted">{{
                                                formatNumber(reportData.SaleRevenueTotalItem.Transporting || 0) }} đơn
                                            </div>
                                            <div class="small text-info">COD: {{
                                                formatCurrency(reportData.SaleRevenueTotalItem.TransportingCollectAmount
                                                    || 0)
                                            }}
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <div class="fw-bold text-primary">{{
                                                formatCurrency(reportData.SaleRevenueTotalItem.DeliveringRevenue || 0)
                                                }}
                                            </div>
                                            <div class="small text-muted">{{
                                                formatNumber(reportData.SaleRevenueTotalItem.Delivering || 0) }} đơn
                                            </div>
                                            <div class="small text-info">COD: {{
                                                formatCurrency(reportData.SaleRevenueTotalItem.DeliveringCollectAmount
                                                    || 0) }}
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <div class="fw-bold text-success">{{
                                                formatCurrency(reportData.SaleRevenueTotalItem.DeliverySuccessRevenue ||
                                                    0) }}
                                            </div>
                                            <div class="small text-muted">{{
                                                formatNumber(reportData.SaleRevenueTotalItem.DeliverySuccess || 0) }}
                                                đơn</div>
                                            <div class="small text-info">COD: {{
                                                formatCurrency(reportData.SaleRevenueTotalItem.DeliverySuccessCollectAmount
                                                    ||
                                                    0) }}
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <div class="fw-bold text-warning">{{
                                                formatCurrency(reportData.SaleRevenueTotalItem.CancelledRevenue || 0) }}
                                            </div>
                                            <div class="small text-muted">{{
                                                formatNumber(reportData.SaleRevenueTotalItem.Cancelled || 0) }} đơn
                                            </div>
                                            <div class="small text-info">COD: {{
                                                formatCurrency(reportData.SaleRevenueTotalItem.CancelledCollectAmount ||
                                                    0) }}
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <div class="progress" style="height: 20px;">
                                                <div class="progress-bar bg-success" role="progressbar"
                                                    :style="`width: ${calculateTotalSuccessRate()}%`"
                                                    :aria-valuenow="calculateTotalSuccessRate()" aria-valuemin="0"
                                                    aria-valuemax="100">
                                                    {{ formatPercent(calculateTotalSuccessRate()) }}%
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
import reportService from "@/services/reportService";
import VChart from 'vue-echarts';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { BarChart, PieChart } from 'echarts/charts';
import {
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GridComponent
} from 'echarts/components';
import VueDatePicker from '@vuepic/vue-datepicker';

import { DateRangeSidebar } from '@/components/index';
import { useDatePickerStore } from "@/stores";
import { useToast } from "vue-toastification";
import moment from "moment";

// Đăng ký ECharts components
use([
    CanvasRenderer,
    BarChart,
    PieChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GridComponent
]);

const toast = useToast();
const datePickerStore = useDatePickerStore();

//#region DATA
const loading = ref(false);
const date = ref();

const dateRangePicker = ref(VueDatePicker);
const reportData = reactive({
    Items: [],
    SaleRevenueTotalItem: null,
    TotalRecord: 0,
    Result: 0,
    Message: ""
});

// Chart refs và options
const barChart = ref();
const doughnutChart = ref();
const barChartOption = ref({});
const doughnutChartOption = ref({});

// Search model
const searchModel = reactive({
    Pagination: {
        Total: 0,
        PageIndex: 1,
        PageSize: 100
    },
    Sort: {
        Predicate: 'TotalRevenue',
        Reverse: true
    },
    Search: {
        PredicateObject: {
            StartDate: null,
            EndDate: null
        }
    },
    IsExport: false
});
//#endregion

//#region LIFECYCLE
onMounted(() => {
    // Set default date range (current month)
    var start = moment().startOf('month').toDate();
    var end = moment().toDate();
    date.value = [start, end];
    handleDate(date.value);
    search();
});
//#endregion

//#region FUNCTIONS
function formatNumber(value) {
    if (value == null || value == undefined) return '0';
    return new Intl.NumberFormat('vi-VN').format(value);
}

function formatCurrency(value) {
    if (value == null || value == undefined) return '0 ₫';
    return new Intl.NumberFormat('vi-VN', {
        style: 'currency',
        currency: 'VND'
    }).format(value);
}

function formatPercent(value) {
    if (value == null || value == undefined) return '0.00';
    return parseFloat(value).toFixed(2);
}

function calculateTotalSuccessRate() {
    if (!reportData.SaleRevenueTotalItem) return 0;

    // Nếu API đã cung cấp SuccessRate thì dùng luôn
    if (reportData.SaleRevenueTotalItem.SuccessRate !== undefined && reportData.SaleRevenueTotalItem.SuccessRate !== null) {
        return reportData.SaleRevenueTotalItem.SuccessRate;
    }

    // Nếu không có thì tính toán
    const totalOrders = reportData.SaleRevenueTotalItem.TotalOrders || 0;
    const successOrders = reportData.SaleRevenueTotalItem.DeliverySuccess || 0;

    if (totalOrders === 0) return 0;

    return (successOrders / totalOrders) * 100;
}

const format = (dates) => {
    if (!dates || !Array.isArray(dates) || dates.length !== 2) return '';

    let start = dates[0];
    let end = dates[1];
    const dayStart = start.getDate();
    const monthStart = start.getMonth() + 1;
    const yearStart = start.getFullYear();
    const dayEnd = end.getDate();
    const monthEnd = end.getMonth() + 1;
    const yearEnd = end.getFullYear();

    return `${dayStart}/${monthStart}/${yearStart} - ${dayEnd}/${monthEnd}/${yearEnd}`;
}

async function onChangeDate(newDates) {
    date.value = newDates;
    dateRangePicker.value.closeMenu();
    handleDate(newDates);
}

function handleDate(modelData) {

    if (modelData != null && Array.isArray(modelData) && modelData.length === 2) {
        searchModel.Search.PredicateObject.StartDate = modelData[0];
        searchModel.Search.PredicateObject.EndDate = modelData[1];
    } else {
        searchModel.Search.PredicateObject.StartDate = null;
        searchModel.Search.PredicateObject.EndDate = null;
    }
}



async function search() {
    loading.value = true;
    try {
        handleDate(date.value);
        const result = await reportService.getSaleRevenueStatistics(searchModel);
        if (result && result.Result === 1) {
            // Clear existing data
            reportData.Items.splice(0, reportData.Items.length);

            // Update data
            if (result.Items && result.Items.length > 0) {
                result.Items.forEach(item => {
                    reportData.Items.push(item);
                });
            }

            reportData.SaleRevenueTotalItem = result.SaleRevenueTotalItem;
            reportData.TotalRecord = result.TotalRecord;
            reportData.Result = result.Result;
            reportData.Message = result.Message;

            // Render charts after data is loaded
            await nextTick();
            renderCharts();
        } else {
            toast.error('Lỗi: ' + (result.Message || 'Không thể tải dữ liệu'));
        }
    } catch (error) {
        console.error('Error searching sale revenue:', error);
        toast.error('Có lỗi xảy ra khi tải dữ liệu');
    } finally {
        loading.value = false;
    }
}

function resetSearch() {
    // Reset date to current month
    const now = new Date();
    const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
    const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);

    date.value = [startOfMonth, endOfMonth];
    handleDate(date.value);

    // Search again
    search();
}



function renderCharts() {
    renderBarChart();
    renderDoughnutChart();
}

function renderBarChart() {
    if (!reportData.Items || reportData.Items.length === 0) return;

    // Take top 10 sales by revenue
    const top10Sales = reportData.Items.slice(0, 10);
    const labels = top10Sales.map(item => item.SaleName);
    const revenueData = top10Sales.map(item => item.TotalRevenue);

    barChartOption.value = {
        title: {
            text: 'Top 10 Sale theo doanh thu',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function (params) {
                const param = params[0];
                return param.name + '<br/>' +
                    param.marker + 'Doanh thu: ' +
                    new Intl.NumberFormat('vi-VN', {
                        style: 'currency',
                        currency: 'VND'
                    }).format(param.value);
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '15%',
            top: '15%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: labels,
            axisLabel: {
                rotate: 45,
                interval: 0
            }
        },
        yAxis: {
            type: 'value',
            min: 0,
            axisLabel: {
                formatter: function (value) {
                    return new Intl.NumberFormat('vi-VN').format(value);
                }
            }
        },
        series: [{
            name: 'Doanh thu',
            type: 'bar',
            data: revenueData,
            itemStyle: {
                color: '#007bff'
            }
        }]
    };
}

function renderDoughnutChart() {
    if (!reportData.SaleRevenueTotalItem) return;

    const totalItem = reportData.SaleRevenueTotalItem;
    const pieData = [
        { value: totalItem.WaitPickup || 0, name: 'Chờ lấy hàng' },
        { value: totalItem.Picking || 0, name: 'Đang lấy' },
        { value: totalItem.Transporting || 0, name: 'Vận chuyển' },
        { value: totalItem.Delivering || 0, name: 'Đang giao' },
        { value: totalItem.DeliverySuccess || 0, name: 'Giao thành công' },
        { value: totalItem.Cancelled || 0, name: 'Đã hủy' }
    ];

    doughnutChartOption.value = {
        title: {
            text: 'Phân bố trạng thái đơn hàng',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            top: 'middle'
        },
        series: [
            {
                name: 'Trạng thái',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['60%', '50%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '18',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: pieData
            }
        ]
    };
}
//#endregion
</script>

<style scoped>
.card-Count {
    position: absolute;
    bottom: -19px;
    right: 10px;
    font-size: 60px;
    opacity: .55;
}

.progress {
    background-color: rgba(255, 255, 255, 0.2);
}

.table th {
    font-weight: 600;
    font-size: 0.875rem;
}

.table td {
    vertical-align: middle;
}

.fw-bold {
    font-weight: 600;
}
</style>
