﻿<style>
    .course-box-price {
        background-color: white;
        padding: 5px;
        border: 1px dashed gainsboro;
        position: relative;
        border-radius: 3px;
        height: 45px;
    }

        .course-box-price.free {
            background-color: #eff7ec;
            color: green;
            font-size: 1.2em;
        }

        .course-box-price::after {
            display: block;
            position: absolute;
            width: 20px;
            border-left: 1px dashed gainsboro;
            height: 20px;
            background-color: white;
            border-radius: 50%;
            top: calc(50% - 10px);
            right: -16px;
            content: '';
        }

        .course-box-price::before {
            display: block;
            position: absolute;
            width: 20px;
            border-right: 1px dashed gainsboro;
            height: 20px;
            background-color: white;
            border-radius: 50%;
            top: calc(50% - 10px);
            left: -16px;
            content: '';
        }

    .course-box-price .old-price .price{
        text-decoration: line-through;
    }

    .discount-label {
        display: inline-block;
        padding: 3px 5px 2px;
        background-color: red;
        color: white;
        margin: 10px 0 0 0;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        font-weight: bold;
    }

    .course-box-price .new-price {
        color: green;
        font-weight: bold;
    }

    .course-box-price .new-price .price{
        font-size: 1.2em;
        font-weight: bold;
    }

    [uk-countdown]{
        color: #0094ff;
    }

    .uk-countdown-number,
    .uk-countdown-separator {
        font-size: 0.9em;
    }

    .rate.fill{
        background-color: white;
    }

    .uk-text-very-small{
        font-size: 0.8em;
    }

    .rank-star {
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
    }
    
    .course-info{
        font-size: 0.8em;
    }

    .uk-badge:not(:first-child){
        margin-right: 5px;
    }
</style>

<template>
    <div class="uk-card" :id="id">
        <div class="uk-card-media-top uk-position-relative">
            <span v-if="course.discount > 0" class="discount-label uk-margin-small-right uk-position-top-left">{{ digitTrunc(course.discount) }}%</span>
            <a :href="course.url">
                <img :data-src="course.thumbnailUrl" uk-img class="uk-width-1-1" alt="">
            </a>
        </div>
        <div class="uk-card-body uk-padding-small uk-padding-remove-left uk-padding-remove-right">
            <a class="uk-text-bolder uk-link uk-text-emphasis" v-if="!simpleModel" style="display: inline-block;height: 60px;" :href="course.url">{{ course.title }}</a>
            <p class="uk-margin-small-top uk-margin-small-bottom" v-if="!simpleModel">
                <a :href="course.profileLink">{{ course.username }}</a>
            </p>
            <p class="uk-text-small uk-margin-remove" v-if="course.price && course.price > 0 && !simpleModel">
                <span class="uk-text-warning uk-margin-small-left">
                    <span class="uk-text-very-small uk-margin-small-left">{{ (course.rate < 4 ? 4.5 : course.rate).toPrecision(2) }}</span>
                    <i class="rank-star" :uk-icon="'icon: '+rankIcon(1,course.rate < 4 ? 4.5 : course.rate)+'; ratio: 0.6'"></i>
                    <i class="rank-star" :uk-icon="'icon: '+rankIcon(2,course.rate < 4 ? 4.5 : course.rate)+'; ratio: 0.6'"></i>
                    <i class="rank-star" :uk-icon="'icon: '+rankIcon(3,course.rate < 4 ? 4.5 : course.rate)+'; ratio: 0.6'"></i>
                    <i class="rank-star" :uk-icon="'icon: '+rankIcon(4,course.rate < 4 ? 4.5 : course.rate)+'; ratio: 0.6'"></i>
                    <i class="rank-star" :uk-icon="'icon: '+rankIcon(5,course.rate < 4 ? 4.5 : course.rate)+'; ratio: 0.6'"></i>
                </span>
                <span class="uk-text-very-small">({{ digitGroup(course.totalStudents == 0 ? 20 : course.totalStudents) }})</span>
            </p>
            <div class="uk-margin-small-top">
                <span class="uk-badge course-info" v-if="course.hasSupport">پشتیبانی دارد</span>
                <span class="uk-badge uk-label-warning course-info" v-if="!course.hasSupport">پشتیبانی ندارد</span>
                <span class="uk-badge course-info" v-if="course.hasCert">صدور مدرک دارد</span>
                <span class="uk-badge uk-label-warning course-info" v-if="!course.hasCert">صدور مدرک ندارد</span>
            </div>
            <div v-if="course.price && course.price > 0" class="course-box-price uk-grid uk-grid-collapse uk-flex uk-flex-middle" :class="{'uk-margin-top': !simpleModel}">
                <div class="uk-width-1-2 uk-flex uk-flex-right uk-flex-middle" v-if="!simpleModel && course.discount > 0">
                    <div uk-countdown="date: 2026-07-27 24:00:00" class="uk-margin-left uk-margin-small-right">
                        <i uk-icon="icon: clock; ratio: 0.6" class="uk-margin-small-left"></i>
                        <span class="uk-countdown-number uk-countdown-hours"></span>
                        <span class="uk-countdown-separator">:</span>
                        <span class="uk-countdown-number uk-countdown-minutes"></span>
                        <span class="uk-countdown-separator">:</span>
                        <span class="uk-countdown-number uk-countdown-seconds"></span>
                    </div>
                </div>
                <div :class="{'uk-width-1-2': !simpleModel && course.discount > 0, 'uk-width-1-1': simpleModel || course.discount === 0}">
                    <div :class="{'uk-text-left': !simpleModel}" style="padding-left: 5px; margin-top: 3px;">
                        <div class="new-price">
                            <span class="price">{{ priceText(course.priceWithDiscount) }}</span> <span class="currency">تومان</span>
                        </div>
                        <div class="old-price" v-if="course.discount > 0">
                            <span class="price">{{ priceText(course.price) }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else class="course-box-price free uk-grid uk-grid-collapse uk-flex uk-flex-middle" :class="{'uk-margin-top': !simpleModel}">
                <div class="uk-width-1-1 uk-text-center">
                    <span>رایگان</span>
                </div>
            </div>
        </div>
    </div>
    <div :id="popupId" ref="popupContainer" style="display: none;"></div>
</template>

<script src="popper.min"></script>
<script src="tippy-bundle.umd.min"></script>

<script>
    Component(['$filters'], function (filters) {
        var params = this.$params;
        return {
            methods: {
                rankIcon(part, value) {
                    switch (part) {
                        case 1:
                            if (value === 0) {
                                return 'fa-solid-star'
                            }
                            if (value == 0) {
                                return 'fa-regular-star';
                            }
                            if (value > 0 && value < 1) {
                                return 'fa-solid-star-half-alt';
                            }
                            if (value >= 1) {
                                return 'fa-solid-star'
                            }
                            break;
                        case 2:
                            if (value === 0) {
                                return 'fa-solid-star'
                            }
                            if (value <= 1) {
                                return 'fa-regular-star';
                            }
                            if (value > 1 && value < 2) {
                                return 'fa-solid-star-half-alt';
                            }
                            if (value >= 2) {
                                return 'fa-solid-star'
                            }
                            break;
                        case 3:
                            if (value === 0) {
                                return 'fa-solid-star'
                            }
                            if (value <= 2) {
                                return 'fa-regular-star';
                            }
                            if (value > 2 && value < 3) {
                                return 'fa-solid-star-half-alt';
                            }
                            if (value >= 3) {
                                return 'fa-solid-star'
                            }
                            break;
                        case 4:            
                            if (value === 0) {
                                return 'fa-solid-star'
                            }
                            if (value <= 3) {
                                return 'fa-regular-star';
                            }
                            if (value > 3 && value < 4) {
                                return 'fa-solid-star-half-alt';
                            }
                            if (value >= 4) {
                                return 'fa-solid-star'
                            }
                            break;
                        case 5:
                            if (value === 0) {
                                return 'fa-solid-star'
                            }
                            if (value <= 4) {
                                return 'fa-regular-star';
                            }
                            if (value > 4 && value < 5) {
                                return 'fa-solid-star-half-alt';
                            }
                            if (value >= 5) {
                                return 'fa-solid-star'
                            }
                            break;
                    }
                },
                digitGroup: filters['digitGroup'],
                digitTrunc: filters['digitTrunc'],
                priceText: filters['priceText'],
            },
            computed: {
                simpleModel() {
                    if (params)
                        return this.simple || params.simple;
                    return this.simple;
                }
            },
            mounted: function () {
                var self = this;
                self.id = 'course-box-' + Math.trunc(Math.random() * 1000000);
                self.popupId = 'course-popup-' + Math.trunc(Math.random() * 1000000);
                setTimeout(function () {
                    tippy('#' + self.id, {
                        duration: 0,
                        arrow: true,
                        allowHTML: true,
                        appendTo: () => document.body,
                        maxWidth: 450,
                        animation: 'fade',
                        interactive: true,
                        delay: 500,
                        placement: 'right',
                        content: '<div class="uk-padding uk-text-center"><div uk-spinner></div></div>',
                        async onShow(instance) {
                            if (!self.$refs.popupContainer.hasAttribute('data-loaded')) {
                                self.$refs.popupContainer.setAttribute('data-loaded', 'true');
                                var component = await LoadVueComponent('general/course-box-description', {
                                    id: self.course.id,
                                    title: self.course.title,
                                    url: self.course.url,
                                    callback: function () {
                                        setTimeout(function () {
                                            instance.setContent(self.$refs.popupContainer.innerHTML);
                                        }, 100);
                                    }
                                });
                                var app = Vue.createApp(component);
                                app.mount('#' + self.popupId);
                            }
                        }
                    });
                }, 500);
            },
            data: function(){
                return {
                    id: undefined,
                    popupId: undefined
                }
            },
            props: {
                course: Object,
                simple: Boolean
            }
        }
    });
</script>