<script setup>
const logisticData = ref([
    {
        icon: 'ri-car-line',
        color: 'primary',
        title: 'On route vehicles',
        value: 42,
        change: 18.2,
        isHover: false,
    },
    {
        icon: 'ri-alert-line',
        color: 'warning',
        title: 'Vehicles with errors',
        value: 8,
        change: -8.7,
        isHover: false,
    },
    {
        icon: 'ri-stackshare-line',
        color: 'error',
        title: 'Deviated from route',
        value: 27,
        change: 4.3,
        isHover: false,
    },
    // {
    //     icon: 'ri-timer-line',
    //     color: 'info',
    //     title: 'Late vehicles',
    //     value: 13,
    //     change: -2.5,
    //     isHover: false,
    // },
])
</script>

<template>
    <VRow>

        <VCol v-for="(data, index) in logisticData" :key="index" cols="12" md="4" sm="6">
            <div>
                <VCard class="logistics-card-statistics cursor-pointer"
                    :style="data.isHover ? `border-block-end-color: rgb(var(--v-theme-${data.color}))` : `border-block-end-color: rgba(var(--v-theme-${data.color}),0.7)`"
                    @mouseenter="data.isHover = true" @mouseleave="data.isHover = false">
                    <VCardText>
                        <div class="d-flex align-center gap-x-4 mb-2">
                            <VAvatar variant="tonal" :color="data.color" rounded>
                                <VIcon :icon="data.icon" size="24" />
                            </VAvatar>
                            <h4 class="text-h4">
                                {{ data.value }}
                            </h4>
                        </div>
                        <h6 class="text-body-1 mb-2">
                            {{ data.title }}
                        </h6>
                        <div class="d-flex gap-x-2 align-center">
                            <div class="text-body-1 font-weight-medium me-2">
                                {{ data.change }}%
                            </div>
                            <span class="text-sm text-disabled">than last week</span>
                        </div>
                    </VCardText>
                </VCard>
            </div>
        </VCol>
    </VRow>
</template>

<style lang="scss" scoped>
@use "@core-scss/base/mixins" as mixins;

.text-h4 {
    font-size: 1.5rem !important;
    font-weight: 500;
    line-height: 2.375rem;
    letter-spacing: normal !important;
    font-family: Public Sans, sans-serif, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol;
    text-transform: none !important;
}

.text-body-1 {
    font-size: .9375rem !important;
    font-weight: 400;
    line-height: 1.375rem;
    letter-spacing: normal !important;
    font-family: Public Sans, sans-serif, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol;
    text-transform: none !important;
}

.logistics-card-statistics {
    border-block-end-style: solid;
    border-block-end-width: 2px;

    &:hover {
        border-block-end-width: 3px;
        margin-block-end: -1px;

        @include mixins.elevation(10);

        transition: all 0.1s ease-out;
    }
}

.skin--bordered {
    .logistics-card-statistics {
        &:hover {
            margin-block-end: -2px;
        }
    }
}
</style>
