<script setup>
import { ref } from 'vue';
import { getDateTime } from '@Controllers/DateController';

import Header     from '@Holos/Modal/Elements/Header.vue';
import ShowModal  from '@Holos/Modal/Show.vue';
import GoogleIcon from '@Shared/GoogleIcon.vue';

/** Eventos */
const emit = defineEmits([
    'close', 
    'reload'
]);

/** Propiedades */
const model    = ref(null);

/** Referencias */
const modalRef = ref(null);

/** Métodos */
function close() {
    model.value = null;

    emit('close');
}

/** Exposiciones */
defineExpose({
    open: (data) => {
        model.value = data;
        modalRef.value.open();
    }
});
</script>

<template>
    <ShowModal
        ref="modalRef"
        @close="close"
    >
        <div v-if="model">
            <Header
                :title="model.name"
                :subtitle="model.certification_type"
            >
            </Header>
            <div class="flex w-full p-4">
                <GoogleIcon 
                    class="text-xl text-success"
                    name="school"
                />
                <div class="pl-3">
                    <p class="font-bold text-lg leading-none pb-2">
                        {{ $t('details') }}
                    </p>
                    <p>
                        <b>{{ $t('name') }}: </b>
                        {{ model.name }}
                    </p>
                    <p>
                        <b>{{ $t('certification_type') }}: </b>
                        {{ model.certification_type ?? '-' }}
                    </p>
                    <p>
                        <b>{{ $t('cost') }}: </b>
                        {{ model.cost }} {{ model.cost_currency }}
                    </p>
                    <p>
                        <b>{{ $t('duration') }}: </b>
                        {{ model.duration ?? '-' }} días
                    </p>
                    <p>
                        <b>{{ $t('description') }}: </b>
                        {{ model.description ?? '-' }}
                    </p>
                    <p v-if="model.url">
                        <b>{{ $t('url') }}: </b>
                        <a :href="model.url" target="_blank" class="text-blue-600 hover:text-blue-800 underline">
                            {{ model.url }}
                        </a>
                    </p>
                    <p>
                        <b>{{ $t('certification_name') }}: </b>
                        {{ model.certification_name ?? '-' }}
                    </p>
                    <p>
                        <b>{{ $t('status') }}: </b>
                        <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold"
                            :class="{
                                'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300': model.status_ek === 'Pendiente',
                                'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300': model.status_ek === 'Aprobado',
                                'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300': model.status_ek === 'Rechazado'
                            }">
                            {{ model.status_ek }}
                        </span>
                    </p>
                    <p>
                        <b>{{ $t('department') }}: </b>
                        {{ model.department?.name ?? '-' }}
                    </p>
                    <p>
                        <b>{{ $t('created_at') }}: </b>
                        {{ getDateTime(model.created_at) }}
                    </p>
                    <p>
                        <b>{{ $t('updated_at') }}: </b>
                        {{ getDateTime(model.updated_at) }}
                    </p>
                </div>
            </div>
        </div>
    </ShowModal>
</template>