<template>
    <section>
        <div v-if="!showVideo" class="course-preview mb-4" :style="'background-image: url(' + course?.thumbnail + ');'">
            <span v-if="course?.video" @click="playVideo()" class="play-btn d-flex rounded-circle bg-primary px-2">
                <i class="bi bi-play-fill"></i>
            </span>
        </div>
        <video v-if="showVideo" :src="course?.video" width="100%" height="100%" controls autoplay></video>
        <div class="p-3 rounded-3 mb-4 theme-shadow" style="background: #F1F5F9;">
            <div class="d-inline-block mb-4 me-2">
                <span class="bg-white px-2 py-2 text-muted rounded">{{ $t('Lifetime Course Access') }}</span>
            </div>

            <div class="d-inline-block mb-4 me-2">
                <span class="bg-white px-2 py-2 text-muted rounded">{{ course?.video_count }} {{ $t('Video Lectures')
                }}</span>
            </div>

            <div class="d-inline-block mb-4 me-2">
                <span class="bg-white px-2 py-2 text-muted rounded">{{ course?.audio_count }} {{ $t('Audio Content')
                }}</span>
            </div>

            <div class="d-inline-block mb-4 me-2">
                <span class="bg-white px-2 py-2 text-muted rounded">{{ course?.note_count }} {{ $t('Notes') }}</span>
            </div>

            <div class="d-inline-block me-2">
                <span class="bg-white px-2 py-2 text-muted rounded">{{ course?.free_video }} {{ $t('Free Videos')
                }}</span>
            </div>

            <div class="d-inline-block me-2">
                <span class="bg-white px-2 py-2 text-muted rounded">{{ course?.free_content }} {{ $t('Free Content')
                }}</span>
            </div>

            <div v-if="course?.certificate_available" class="d-inline-block me-2">
                <span class="bg-white px-2 py-2 text-muted rounded">{{ $t('Certificate Available') }}</span>
            </div>
        </div>

        <div v-if="!course?.is_free && !course?.is_enrolled" class="enroll-action border border-primary rounded-3 pt-3">
            <div class="text-center mb-4">
                <span class="d-block">{{ $t('Course Fee') }}</span>
                <div v-if="course?.price && course?.regular_price">
                    <strong v-if="masterStore?.masterData?.currency_position == 'Left'" class="fs-2 me-2">{{
                        masterStore?.masterData?.currency_symbol
                        }}{{ course?.price }}</strong>
                    <strong v-else class="fs-2 me-2">{{ course?.price
                        }}{{ masterStore?.masterData?.currency_symbol }}</strong>
                    <span v-if="masterStore?.masterData?.currency_position == 'Left'"
                        class="fs-3 text-muted text-decoration-line-through">{{ masterStore?.masterData?.currency_symbol
                        }}{{ course?.regular_price }}</span>
                    <span v-else class="fs-3 text-muted text-decoration-line-through">{{ course?.regular_price
                        }}{{ masterStore?.masterData?.currency_symbol }}</span>
                </div>
                <div v-else-if="!course?.price && course?.regular_price">
                    <strong v-if="masterStore?.masterData?.currency_position == 'Left'" class="fs-2 me-2">{{
                        masterStore?.masterData?.currency_symbol
                        }}{{ course?.regular_price }}</strong>
                    <strong v-else class="fs-2 me-2">{{ course?.regular_price
                        }}{{ masterStore?.masterData?.currency_symbol }}</strong>
                </div>
            </div>

            <router-link :to="'/checkout/' + course?.id" @click.prevent="handleRoute"
                class="enroll-btn btn btn-primary py-3 w-100">Enroll Now<i
                    class="bi bi-arrow-right ms-2"></i></router-link>
        </div>
        <router-link v-else :to="course?.check_subscription
            ? '/dashboard/plan-renewal-history?plan_id=' + course?.current_plan_id
            : (course?.is_enrolled && !course?.check_subscription)
                ? '/play/' + course?.id
                : '/checkout/' + course?.id" @click.prevent="handleWaring" class="btn btn-primary w-100">
            {{
                course?.check_subscription
                    ? $t('Subscribe Now')
                    : (course?.is_enrolled && !course?.check_subscription)
                        ? $t('Play Now')
                        : $t('Enroll Now')
            }}
        </router-link>
    </section>
</template>

<style lang="scss" scoped>
.course-preview {
    height: 225px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2rem;
    font-weight: bold;

    .play-btn {
        cursor: pointer;
        border: 5px solid #ffffffbd;
        border-radius: 50%;
    }
}

.student-count {
    background-color: #f0ffef;
}

.lesson-count {
    background-color: #fff6f5;
}

.resource-count {
    background-color: #f3f9ff;
}

.enroll-action {
    background-color: #faf6fe;

    .enroll-btn {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
    }
}
</style>

<script setup>
import { onMounted, ref } from "vue";
import Swal from "sweetalert2";
import { useAuthStore } from "@/stores/auth";
import { useMasterStore } from "@/stores/master";

const authStore = useAuthStore();
const masterStore = useMasterStore();

let props = defineProps({
    course: Object,
    chapters: Array,
});

const showVideo = ref(false);

function playVideo() {
    showVideo.value = true;
}

const handleRoute = () => {
    localStorage.setItem("handle_course_id", props.course.id);
}

let handleWaring = () => {
    if (!authStore.userData) {
        Swal.fire({
            icon: "error",
            title: "Sorry...",
            text: "You need to log in to access this page.",
            confirmButtonText: "Go to Login",
        }).then((result) => {
            if (result.isConfirmed) {
                // Redirect to the login page when the user clicks the button
                window.location.href = "/login"; // Replace "/login" with your actual login URL
            }
        });
    }
};


onMounted(() => {
    localStorage.removeItem("handle_course_id");
});



</script>
