<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]; 
    }>();

    const stack_label_class = "text-weight-bold text-primary text-uppercase text-caption q-pa-none q-my-none ellipsis";
</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-mt-sm q-mb-md">
                <div class="row no-wrap">

                    <!-- left portion of pay period card -->
                    <div class="col column no-wrap q-px-sm">
                        
                        <!-- Regular hours segment -->
                        <div class="column" :class="$q.screen.lt.md ? 'col' : 'col-8'">
                            <span :class="stack_label_class"> {{ $t('shared.shift_type.regular') }} </span>
                            <span class="text-weight-bolder text-h3 q-py-none"> {{ row.regular_hours }} </span>
                        </div>

                        <q-separator class="q-mx-sm" />

                        <!-- Other hour types segment -->
                        <div class="row q-px-xs">
                            <div class="col column no-wrap">
                                <span :class="stack_label_class" style="font-size: 0.65em;"> {{ $t('shared.shift_type.evening') }} </span>
                                <span class="text-weight-bolder text-h6 q-pa-none" style="line-height: 0.9em;"> {{ row.evening_hours }} </span>
                            </div>

                             <div class="col column no-wrap">
                                <span :class="stack_label_class" style="font-size: 0.65em;"> {{ $t('shared.shift_type.emergency') }} </span>
                                <span class="text-weight-bolder text-h6 q-pa-none" style="line-height: 0.9em;"> {{ row.emergency_hours }} </span>
                            </div>

                             <div class="col column no-wrap">
                                <span :class="stack_label_class" style="font-size: 0.65em;"> {{ $t('shared.shift_type.overtime') }} </span>
                                <span class="text-weight-bolder text-h6 q-pa-none" style="line-height: 0.9em;"> {{ row.overtime_hours }} </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="stack_label_class" 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="stack_label_class" 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>