<script>
import ManageSidebar from '@/views/manage/sidebar.vue';
import ManageFooter from '@/views/manage/footer.vue';
import { mapGetters, mapActions } from 'vuex';
import axios from 'axios';
import Swal from 'sweetalert2';
import { Pie } from "vue-chartjs";
import { Chart, registerables } from "chart.js";

Chart.register(...registerables);

export default {
    name: 'DashboardComponent',
    components: { ManageSidebar, ManageFooter },
    data() {
        return {
            personData: { personIn: 0, personOut: 0 },
            vehicleData: { vehicleIn: 0, vehicleOut: 0 },
            usersCount: 0,
            superadminCount: 0,
            generalManagerCount: 0,
            managerCount: 0,
            asmanCount: 0,
            securityCount: 0,
            employeeCount: 0,
            teamLeaderCount: 0,
            tadCount: 0,
            visitorCount: 0,
            cctvCount: 0,
            cctvAreaCount: 0,
            buildingCount: 0,
            officeCount: 0,
            plateNumberCount: 0,
            subjectCount: 0,
            subjects: [],
            isDataLoaded: false,
        };
    },

    computed: {
        ...mapGetters(['user', 'authToken', 'refreshToken']),
        formattedLastLogin() {
            if (!this.user || !this.user.last_login) return 'N/A';
            const date = new Date(this.user.last_login.replace('Z', ''));
            return date.toLocaleString('id-ID');
        }
    },

    methods: {
        ...mapActions(['logout', 'setAuthToken', 'setRefreshToken']),

        async fetchSummaryData() {
            try {
                const today = new Date().toISOString().split('T')[0];

                const response = await axios.post(
                    "/api/v1/sensors/all-detection-summary",
                    { date: today },
                    { headers: { Authorization: `Bearer ${this.authToken}` } }
                );

                if (response.data && response.data.data) {
                    const data = response.data.data;
                    console.log("Fetched Data:", data);

                    this.personData = {
                        personIn: data.personIn || 0,
                        personOut: data.personOut || 0,
                    };

                    this.vehicleData = {
                        vehicleIn: data.vehicleIn || 0,
                        vehicleOut: data.vehicleOut || 0,
                    };

                    // Perbarui data di chart jika sudah ada
                    if (this.personChart) {
                        this.personChart.data.datasets[0].data = [
                            this.personData.personIn,
                            this.personData.personOut,
                        ];
                        this.personChart.update();
                    }

                    if (this.vehicleChart) {
                        this.vehicleChart.data.datasets[0].data = [
                            this.vehicleData.vehicleIn,
                            this.vehicleData.vehicleOut,
                        ];
                        this.vehicleChart.update();
                    }
                } else {
                    console.error("Invalid response data:", response.data);
                }
            } catch (error) {
                console.error("Error fetching summary data:", error);
            }
        },
        renderPersonChart() {
            const canvas = document.getElementById("personPieChart");
            if (!canvas) return; // Hindari error jika elemen tidak ditemukan

            const ctx = canvas.getContext("2d");
            if (!ctx) return;

            this.personChart = new Chart(ctx, {
                type: "pie",
                data: {
                    labels: ["Person In", "Person Out"],
                    datasets: [
                        {
                            label: "Person Detection",
                            data: [this.personData.personIn, this.personData.personOut],
                            backgroundColor: ["#4caf50", "#f44336"],
                            hoverOffset: 4,
                        },
                    ],
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: "bottom",
                        },
                    },
                },
            });
        },
        renderVehicleChart() {
            const canvas = document.getElementById("vehiclePieChart");
            if (!canvas) return; // Hindari error jika elemen tidak ditemukan

            const ctx = canvas.getContext("2d");
            if (!ctx) return;

            this.vehicleChart = new Chart(ctx, {
                type: "pie",
                data: {
                    labels: ["Vehicle In", "Vehicle Out"],
                    datasets: [
                        {
                            label: "Vehicle Detection",
                            data: [this.vehicleData.vehicleIn, this.vehicleData.vehicleOut],
                            backgroundColor: ["#3f51b5", "#ff9800"],
                            hoverOffset: 4,
                        },
                    ],
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: "bottom",
                        },
                    },
                },
            });
        },

        renderUsersChart() {
            const canvas = document.getElementById("usersChart");
            if (!canvas) return; // Hindari error jika elemen tidak ditemukan

            const ctx = canvas.getContext("2d");
            if (!ctx) return;

            new Chart(ctx, {
                type: "bar",
                data: {
                    labels: [
                        "Superadmin",
                        "General Manager (GM)",
                        "Manager",
                        "Assistant Manager",
                        "Team Leader",
                        "Security",
                        "Pegawai",
                        "TAD",
                        "Visitor"
                    ],
                    datasets: [
                        {
                            label: "User Roles",
                            data: [
                                this.superadminCount,
                                this.generalManagerCount,
                                this.managerCount,
                                this.asmanCount,
                                this.teamLeaderCount,
                                this.securityCount,
                                this.employeeCount,
                                this.tadCount,
                                this.visitorCount,
                            ],
                            backgroundColor: [
                                "#000000", // Superadmin - Merah
                                "#ff8c00", // GM - Oranye
                                "#ffd700", // Manager - Kuning Emas
                                "#32cd32", // Assistant Manager - Hijau Cerah
                                "#4169e1", // Team Leader - Biru Kobalt
                                "#8b4513", // Security - Coklat
                                "#800080", // Employee - Ungu
                                "#ff1493", // TAD - Pink Tua
                                "#a9a9a9", // Visitor - Abu-abu
                            ],
                            borderColor: "#fff",
                            borderWidth: 0.5,
                        },
                    ],
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false, // Biarkan tinggi bisa disesuaikan
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                stepSize: 5, // Mengontrol interval angka di sumbu Y
                            },
                        },
                    },
                    plugins: {
                        // legend: {
                        //     position: "bottom",
                        // },
                    },
                },
            });
        },

        async fetchCounts() {
            try {
                const response = await axios.post(
                    '/api/dashboard-counts',
                    {},
                    {
                        headers: { Authorization: `Bearer ${this.authToken}` },
                        params: { id_user: this.user.id }
                    }
                );

                // Assign data safely
                this.usersCount = response.data.usersCount || 0;
                this.superadminCount = response.data.superadminCount || 0;
                this.generalManagerCount = response.data.generalManagerCount || 0;
                this.managerCount = response.data.managerCount || 0;
                this.asmanCount = response.data.asmanCount || 0;
                this.teamLeaderCount = response.data.teamLeaderCount || 0;
                this.securityCount = response.data.securityCount || 0;
                this.employeeCount = response.data.employeeCount || 0;
                this.tadCount = response.data.tadCount || 0;
                this.visitorCount = response.data.visitorCount || 0;
                this.cctvCount = response.data.cctvCount || 0;
                this.cctvAreaCount = response.data.cctvAreaCount || 0;
                this.buildingCount = response.data.buildingCount || 0;
                this.officeCount = response.data.officeCount || 0;
                this.plateNumberCount = response.data.plateNumberCount || 0;
                this.isDataLoaded = true;

                // Render chart setelah data di-fetch
                this.$nextTick(() => {
                    this.renderUsersChart();
                });

            } catch (error) {
                console.error('Error fetching counts:', error);
                // this.showErrorAlert('Failed to fetch dashboard counts.');
                if (error.response?.status === 401) {
                    await this.handleTokenRefresh();
                    this.fetchCounts();
                }
            }
        },

        async fetchSubjects() {
            try {
                const response = await axios.get('/api/api-cpf/subjects', {
                    headers: { Authorization: `Bearer ${this.authToken}` }
                });

                this.subjects = response.data.subjects || [];
                this.subjectCount = this.subjects.length;
            } catch (error) {
                console.error('Error fetching subjects:', error);
                // this.showErrorAlert('Failed to fetch subjects.');
                if (error.response?.status === 401) {
                    await this.handleTokenRefresh();
                    this.fetchSubjects();
                }
            }
        },

        async handleTokenRefresh() {
            try {
                const refresh_token = this.refreshToken;
                if (!refresh_token) throw new Error('No refresh token available');
                const response = await axios.post('/api/refresh-token', { token: refresh_token });
                const { token, refresh_token: newRefreshToken } = response.data;

                this.setAuthToken(token);
                this.setRefreshToken(newRefreshToken);
                this.setAxiosDefaults(token);
                return token;
            } catch (error) {
                console.error('Error refreshing token:', error);
                this.logout();
                this.$router.push({ name: 'Login' });
            }
        },

        setAxiosDefaults(token) {
            axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
        },

        setupAxiosInterceptors() {
            axios.interceptors.response.use(
                (response) => response,
                async (error) => {
                    if (error.response?.status === 401 && !error.config._retry) {
                        error.config._retry = true;
                        const newToken = await this.handleTokenRefresh();
                        if (newToken) {
                            error.config.headers['Authorization'] = `Bearer ${newToken}`;
                            return axios(error.config);
                        }
                    }
                    return Promise.reject(error);
                }
            );
        },

        showErrorAlert(message) {
            Swal.fire({
                icon: 'error',
                title: message,
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000
            });
        }
    },

    mounted() {
        if (!this.user || !this.authToken) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'You do not have access. Please log in first.',
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000
            }).then(() => {
                this.logout();
                this.$router.push({ name: 'Login' });
            });
        } else {
            this.fetchSummaryData();
            this.fetchCounts();
            this.fetchSubjects();
            // this.renderUsersChart();

            // **Cek user level sebelum memuat fitur tertentu**
            if ([1, 2, 3, 4, 7].includes(this.user.user_level.id)) {
                ''
                // Render awal chart
                this.renderPersonChart();
                this.renderVehicleChart();

                // Mulai interval untuk memperbarui data setiap 1 detik
                this.refreshIntervalId = setInterval(() => {
                    this.fetchSummaryData();
                }, 1000);

                // Refresh data setiap 5 menit
                this.intervalId = setInterval(() => {
                    this.fetchCounts();
                    this.fetchSubjects();
                }, 10000); // 5 menit (300.000 ms)
            }
            this.setupAxiosInterceptors();
        }
    },

    beforeUnmount() {
        if (this.intervalId) clearInterval(this.intervalId);
        if (this.refreshIntervalId) clearInterval(this.refreshIntervalId);
    }
};
</script>

<style>
canvas {
    max-width: 100%;
}

.title-count-summary {
    margin-top: 10px;
    font-size: 40px;
}
</style>

<template>
    <div>
        <manage-sidebar />
        <div class="page-wrapper">

            <!-- Page header -->
            <div class="page-header d-print-none">
                <div class="container-fluid">
                    <div class="row g-2 align-items-center">
                        <div class="col">
                            <div class="page-pretitle">Manage</div>
                            <h2 class="page-title">Dashboard</h2>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Page body -->
            <div class="page-body" style="min-height: 79vh">
                <div class="container-fluid">

                    <div class="row mb-3">
                        <div class="col-xl-8">
                            <div class="card h-100">
                                <div class="card-body py-4">
                                    <h1 class="mt-4 mb-2 text-warning" style="font-size: 22px;">
                                        Hai, <strong>{{ user.nama_lengkap }}</strong>
                                    </h1>
                                    <h2 class="mb-2 mt-2" style="font-size: 24px;">
                                        Selamat datang di Aplikasi CCTV Stream
                                    </h2>
                                    <h1 class="text-info">
                                        PLN - UID KALBAR
                                    </h1>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-4">
                            <div class="card h-100">
                                <div class="card-body p-3">
                                    <table class="table table-sm table-hover table-borderless">
                                        <tbody>
                                            <tr>
                                                <th>Username</th>
                                                <td>:</td>
                                                <td>{{ user.username }}</td>
                                            </tr>
                                            <tr>
                                                <th>NIP / ID</th>
                                                <td>:</td>
                                                <td>{{ user.nip }}</td>
                                            </tr>
                                            <tr>
                                                <th>Role</th>
                                                <td>:</td>
                                                <td>{{ user.user_level.level_name }}</td>
                                            </tr>
                                            <tr>
                                                <th>Email</th>
                                                <td>:</td>
                                                <td>{{ user.email }}</td>
                                            </tr>
                                            <tr>
                                                <th>Office</th>
                                                <td>:</td>
                                                <td>{{ user.office.office_name }}</td>
                                            </tr>
                                            <tr>
                                                <th>Last Login</th>
                                                <td>:</td>
                                                <td>{{ formattedLastLogin }} WIB</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <div class="row" v-if="[1, 2, 3, 4, 7].includes(user.user_level.id)">
                                <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12 col-12 mb-3">
                                    <div class="card">
                                        <div class="card-header py-2">Chart Log Person IN/OUT</div>
                                        <div class="card-body">
                                            <canvas id="personPieChart"></canvas>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12 col-12 mb-3">
                                    <div class="card">
                                        <div class="card-header py-2">Chart Log Vehicle IN/OUT</div>
                                        <div class="card-body">
                                            <canvas id="vehiclePieChart"></canvas>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12 col-12 mb-2">
                                    <div class="card">
                                        <div class="card-header py-2">Chart Users Account By Role</div>
                                        <div class="card-body">
                                            <canvas id="usersChart" style="height: 270px;"></canvas>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div class="row">
                                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 col-12">
                                    <div class="row">
                                        <div class="col-xl-3 col-lg-3 col-sm-6 col-6">
                                            <div class="alert alert-success">
                                                PERSON IN TODAY
                                                <hr>
                                                <h1 class="title-count-summary">
                                                    {{ this.personData.personIn }}
                                                </h1>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-lg-3 col-sm-6 col-6">
                                            <div class="alert alert-danger">
                                                PERSON OUT TODAY
                                                <hr>
                                                <h1 class="title-count-summary">
                                                    {{ this.personData.personOut }}
                                                </h1>
                                            </div>
                                        </div>

                                        <div class="col-xl-3 col-lg-3 col-sm-6 col-6">
                                            <div class="alert alert-primary">
                                                VEHICLE IN TODAY
                                                <hr>
                                                <h1 class="title-count-summary">
                                                    {{ this.vehicleData.vehicleIn }}
                                                </h1>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-lg-3 col-sm-6 col-6">
                                            <div class="alert alert-orange">
                                                VEHICLE OUT TODAY
                                                <hr>
                                                <h1 class="title-count-summary">
                                                    {{ this.vehicleData.vehicleOut }}
                                                </h1>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-12 mb-3">

                            <div class="row">
                                <div class="col-xl-2 col-lg- col-md-6 col-sm-6 col-6 mb-2">
                                    <div class="card card-sm">
                                        <div class="card-body pb-0">
                                            <div class="row">
                                                <div class="col-auto d-none d-lg-block pt-2">
                                                    <i class="fa fa-3x fa-robot"></i>
                                                </div>
                                                <div class="col-auto">
                                                    <h1 class="text-count text-orange mb-1">{{ subjectCount }}</h1>
                                                    <h5>
                                                        SUBJECTS / LABEL AI
                                                    </h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-2 col-lg- col-md-6 col-sm-6 col-6 mb-2"
                                    v-if="[1, 2, 3, 4, 7].includes(user.user_level.id)">
                                    <div class="card card-sm">
                                        <div class="card-body pb-0">
                                            <div class="row">
                                                <div class="col-auto d-none d-lg-block pt-2">
                                                    <i class="fa fa-3x fa-users"></i>
                                                </div>
                                                <div class="col-auto">
                                                    <h1 class="text-count text-orange mb-1">{{ usersCount }}</h1>
                                                    <h5>USERS ACCOUNT</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-2 col-lg- col-md-6 col-sm-6 col-6 mb-2"
                                    v-if="[1, 2, 3, 4, 7].includes(user.user_level.id)">
                                    <div class="card card-sm">
                                        <div class="card-body pb-0">
                                            <div class="row">
                                                <div class="col-auto d-none d-lg-block pt-2">
                                                    <i class="fa fa-3x fa-user-tie"></i>
                                                </div>
                                                <div class="col-auto">
                                                    <h1 class="text-count text-orange mb-1">{{ generalManagerCount }}
                                                    </h1>
                                                    <h5>GENERAL MANAGER</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xl-2 col-lg- col-md-6 col-sm-6 col-6 mb-2"
                                    v-if="[1, 2, 3, 4, 7].includes(user.user_level.id)">
                                    <div class="card card-sm">
                                        <div class="card-body pb-0">
                                            <div class="row">
                                                <div class="col-auto d-none d-lg-block pt-2">
                                                    <i class="fa fa-3x fa-user-tie"></i>
                                                </div>
                                                <div class="col-auto">
                                                    <h1 class="text-count text-orange mb-1">{{ managerCount }}</h1>
                                                    <h5>MANAGER</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <div class="col-xl-2 col-lg- col-md-6 col-sm-6 col-6 mb-2"
                                    v-if="[1, 2, 3, 4, 7].includes(user.user_level.id)">
                                    <div class="card card-sm">
                                        <div class="card-body pb-0">
                                            <div class="row">
                                                <div class="col-auto d-none d-lg-block pt-2">
                                                    <i class="fa fa-3x fa-user-tie"></i>
                                                </div>
                                                <div class="col-auto">
                                                    <h1 class="text-count text-orange mb-1">{{ asmanCount }}</h1>
                                                    <h5>ASSISTANT MANAGER</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xl-2 col-lg- col-md-6 col-sm-6 col-6 mb-2"
                                    v-if="[1, 2, 3, 4, 7].includes(user.user_level.id)">
                                    <div class="card card-sm">
                                        <div class="card-body pb-0">
                                            <div class="row">
                                                <div class="col-auto d-none d-lg-block pt-2">
                                                    <i class="fa fa-3x fa-users-rectangle"></i>
                                                </div>
                                                <div class="col-auto">
                                                    <h1 class="text-count text-orange mb-1">{{ teamLeaderCount }}</h1>
                                                    <h5>TEAM LEADER</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xl-2 col-lg- col-md-6 col-sm-6 col-6 mb-2"
                                    v-if="[1, 2, 3, 4, 7].includes(user.user_level.id)">
                                    <div class="card card-sm">
                                        <div class="card-body pb-0">
                                            <div class="row">
                                                <div class="col-auto d-none d-lg-block pt-2">
                                                    <i class="fa fa-3x fa-users-rectangle"></i>
                                                </div>
                                                <div class="col-auto">
                                                    <h1 class="text-count text-orange mb-1">{{ employeeCount }}</h1>
                                                    <h5>PEGAWAI</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xl-2 col-lg- col-md-6 col-sm-6 col-6 mb-2"
                                    v-if="[1, 2, 3, 4, 7].includes(user.user_level.id)">
                                    <div class="card card-sm">
                                        <div class="card-body pb-0">
                                            <div class="row">
                                                <div class="col-auto d-none d-lg-block pt-2">
                                                    <i class="fa fa-3x fa-users-rectangle"></i>
                                                </div>
                                                <div class="col-auto">
                                                    <h1 class="text-count text-orange mb-1">{{ tadCount }}</h1>
                                                    <h5>TAD</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xl-2 col-lg- col-md-6 col-sm-6 col-6 mb-2"
                                    v-if="[1, 2, 3, 4, 7].includes(user.user_level.id)">
                                    <div class="card card-sm">
                                        <div class="card-body pb-0">
                                            <div class="row">
                                                <div class="col-auto d-none d-lg-block pt-2">
                                                    <i class="fa fa-3x fa-user-secret"></i>
                                                </div>
                                                <div class="col-auto">
                                                    <h1 class="text-count text-orange mb-1">{{ securityCount }}</h1>
                                                    <h5>SECURITY</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xl-2 col-lg- col-md-6 col-sm-6 col-6 mb-2"
                                    v-if="[1, 2, 3, 4, 7].includes(user.user_level.id)">
                                    <div class="card card-sm">
                                        <div class="card-body pb-0">
                                            <div class="row">
                                                <div class="col-auto d-none d-lg-block pt-2">
                                                    <i class="fa fa-3x fa-users-line"></i>
                                                </div>
                                                <div class="col-auto">
                                                    <h1 class="text-count text-orange mb-1">{{ visitorCount }}</h1>
                                                    <h5>VISITOR</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xl-2 col-lg- col-md-6 col-sm-6 col-4 mb-2">
                                    <div class="card card-sm">
                                        <div class="card-body pb-0">
                                            <div class="row">
                                                <div class="col-auto d-none d-lg-block pt-2">
                                                    <i class="fa fa-3x fa-building-columns"></i>
                                                </div>
                                                <div class="col-auto">
                                                    <h1 class="text-count text-orange mb-1">{{ officeCount }}</h1>
                                                    <h5>OFFICE</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-2 col-lg- col-md-6 col-sm-6 col-4 mb-2">
                                    <div class="card card-sm">
                                        <div class="card-body pb-0">
                                            <div class="row">
                                                <div class="col-auto d-none d-lg-block pt-2">
                                                    <i class="fa fa-3x fa-building-flag"></i>
                                                </div>
                                                <div class="col-auto">
                                                    <h1 class="text-count text-orange mb-1">{{ buildingCount }}</h1>
                                                    <h5>BUILDING</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-2 col-lg- col-md-6 col-sm-6 col-4 mb-2">
                                    <div class="card card-sm">
                                        <div class="card-body pb-0">
                                            <div class="row">
                                                <div class="col-auto d-none d-lg-block pt-2">
                                                    <i class="fa fa-3x fa-video"></i>
                                                </div>
                                                <div class="col-auto">
                                                    <h1 class="text-count text-orange mb-1">{{ cctvCount }}</h1>
                                                    <h5>CCTV</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xl-2 col-lg- col-md-6 col-sm-6 col-12 mb-2">
                                    <div class="card card-sm">
                                        <div class="card-body pb-0">
                                            <div class="row">
                                                <div class="col-auto d-none d-lg-block pt-2">
                                                    <i class="fa fa-3x fa-hashtag"></i>
                                                </div>
                                                <div class="col-auto">
                                                    <h1 class="text-count text-orange mb-1">{{ plateNumberCount }}</h1>
                                                    <h5>PLATE NUMBER REGISTERED</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>

                </div>
            </div>

            <manage-footer />
        </div>
    </div>
</template>
