<script
    setup
    lang="ts"
>
    import type { PayPeriodOverview } from 'src/modules/timesheet-approval/models/pay-period-overview.models';

    const modelApproval = defineModel<boolean>();
    const { row } = defineProps<{ row: PayPeriodOverview; }>();
    const emit = defineEmits<{
        'clickDetails': [overview: PayPeriodOverview];
    }>();
</script>

<template>
    <div class="q-px-sm q-pb-sm q-mt-sm col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 grid-style-transition">
        <q-card class="rounded-10">
            <!-- Card header with employee name and details button-->
            <q-card-section
                horizontal
                class="q-py-none q-px-sm q-ma-none justify-between items-center"
            >
                <span class="col text-primary text-h5 text-weight-bolder q-pt-xs"> {{ row.employee_name }} </span>

                <!-- Buttons to view detailed shifts or view employee timesheet -->
                <q-btn
                    flat
                    dense
                    square
                    unelevated
                    class="col-auto q-pa-none q-ma-none"
                    color="primary"
                    icon="work_history"
                    @click="emit('clickDetails', row)"
                >
                    <q-tooltip
                        anchor="top middle"
                        self="center middle"
                        class="bg-primary text-uppercase text-weight-bold"
                    >
                        {{ $t('timesheet_approvals.tooltip.button_detailed_view') }}
                    </q-tooltip>
                </q-btn>
            </q-card-section>

            <q-separator size="2px" />

            <!-- Main body of pay period card -->
            <q-card-section class="q-py-none q-px-sm q-my-sm">
                <div class="row">
                    <!-- left portion of pay period card -->
                    <div class="col column q-px-sm">
                        <!-- Regular hours segment -->
                        <div class="col column">
                            <span class="text-weight-bold text-primary text-uppercase q-pa-none q-my-none"> {{ $t('shared.shift_type.regular') }} </span>
                            <span class="text-weight-bolder text-h3 q-py-none"> {{ row.regular_hours }} </span>
                            <q-separator class="q-mx-sm" />
                        </div>

                        <!-- Other hour types segment -->
                        <div class="col-auto row ellipsis q-mt-xs">
                            <div
                                v-for="hour_type, index in row.other_hours"
                                :key="index"
                                class="col-4 column ellipsis"
                                :class="hour_type === 0 ? 'invisible' : ''"
                            >
                                <span
                                    class="text-weight-bold text-primary text-uppercase q-pa-none q-my-none"
                                    style="font-size: 0.7em;"
                                > {{ $t(`shared.shift_type.${index.replace('_hours', '')}`) }} </span>
                                <span
                                    class="text-weight-bolder q-pa-none q-mb-xs"
                                    style="font-size: 1.2em; line-height: 1em;"
                                > {{ hour_type }} </span>
                            </div>
                        </div>
                    </div>

                    <q-separator
                        vertical
                        class="q-mt-xs q-mb-none"
                    />

                    <!-- Right portion of pay period card -->
                    <div class="col-auto column q-px-sm">
                        <div class="col column no-wrap">
                            <span
                                class="text-weight-bold text-primary text-uppercase q-pa-none q-my-none"
                                style="font-size: 0.8em;"
                            > {{ $t('timesheet.expense.types.EXPENSES') }} </span>
                            <span
                                class="text-weight-bolder text-h6 q-pa-none"
                                style="line-height: 0.9em;"
                            > {{ row.expenses }} </span>
                        </div>

                        <div class="col column no-wrap">
                            <span
                                class="text-weight-bold text-primary text-uppercase q-pa-none q-my-none"
                                style="font-size: 0.8em;"
                            > {{ $t('timesheet.expense.types.MILEAGE') }} </span>
                            <span
                                class="text-weight-bolder text-h6 q-pa-none"
                                style="line-height: 0.9em;"
                            > {{ row.mileage }} </span>
                        </div>
                    </div>
                </div>
            </q-card-section>

            <q-separator
                color="primary"
                size="2px"
            />

            <!-- Validate Pay Period section -->
            <q-card-section
                horizontal
                class="justify-between items-center text-weight-bold q-px-sm"
                :class="row.is_approved ? 'text-white bg-primary' : 'bg-dark'"
            >
                <div class="col-auto">
                    <span class="text-uppercase text-h6 q-ml-sm text-weight-bolder"> {{ row.total_hours }} </span>
                    <span class="text-uppercase text-weight-bold text-caption q-ml-xs"> total </span>
                </div>

                <q-checkbox
                    v-model="modelApproval"
                    dense
                    left-label
                    size="lg"
                    checked-icon="lock"
                    unchecked-icon="lock_open"
                    :color="row.is_approved ? 'white' : 'primary'"
                    :label="row.is_approved ? $t('timesheet_approvals.table.verified') : $t('timesheet_approvals.table.unverified')"
                    class="col-auto text-uppercase"
                />
            </q-card-section>
        </q-card>
    </div>
</template>