<template>
    <div class="row m-b-15 align-items-end">
        <div class="col-auto">
            <div class="row">
                <div class="col">
                    <div class="font-heading fs-10 muted all-caps">Marking</div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="font-heading all-caps fs-11">{{item.reference}}</div>
                </div>
            </div>
        </div>
        <div class="col-2 text-center">
            <div class="row">
                <div class="col">
                    <div class="font-heading fs-10 muted all-caps">Payments</div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="font-heading all-caps fs-11">MYR {{(Math.round((item.total_payments + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
                </div>
            </div>
        </div>
        <div class="col-2 text-center">
            <div class="row">
                <div class="col">
                    <div class="font-heading fs-10 muted all-caps">Average Daily Spending</div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="font-heading fs-11">MYR {{(Math.round((item.average_spending_per_day + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
                </div>
            </div>
        </div>
        <div class="col-2 text-center">
            <div class="row">
                <div class="col">
                    <div class="font-heading fs-10 muted all-caps">Average Booking Spending</div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="font-heading fs-11">MYR {{(Math.round((item.average_spending_per_booking + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
                </div>
            </div>
        </div>
        <div class="col-auto text-center">
            <div class="row">
                <div class="col">
                    <div class="font-heading fs-10 muted all-caps">Last Payment</div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="font-heading fs-11">{{item.last_payment}}</div>
                </div>
            </div>
        </div>
        <div class="col-auto text-center">
            <div class="row">
                <div class="col">
                    <div class="font-heading fs-10 muted all-caps">Bookings</div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="font-heading all-caps fs-11"><span v-if="item.confirmed_bookings">{{item.confirmed_bookings}} / </span>{{item.bookings.length}}</div>
                </div>
            </div>
        </div>
        <div class="col-2 text-right">
            <div class="row">
                <div class="col">
                    <div class="font-heading fs-10 muted all-caps">Registered On</div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="font-heading all-caps fs-11">{{item.created_at}}</div>
                </div>
            </div>
        </div>
        <div class="col-auto">
            <a :href="route('customer.profile', item.reference)">
                <button type="button" class="btn btn-xs btn-primary fs-11">View</button>
            </a>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, getCurrentInstance } from 'vue';
import { useComponentHandler } from '@/composables/useComponentHandler';
import route from '@/general/functions/router';

const props = defineProps<{
    data: any;
}>();

const { item } = useComponentHandler(props);
const { proxy } = getCurrentInstance() as any;

const state = reactive({
    minWidth: {
        minWidth: '100px',
    },
    minWidth150: {
        minWidth: '150px',
    },
});

const viewCompany = () => {
    proxy.emitter.emit('viewCompany', item);
};

</script>
