<script setup>
    import { Link, usePage } from '@inertiajs/vue3';
    import { onMounted, defineProps, computed } from 'vue';
    import { initFlowbite } from 'flowbite';
    import { marked } from 'marked';

    const { block, blockData, frontpage } = defineProps({
        block: {
            type: Object,
            required: true,
        },
        blockData: {
            type: Object,
            default: () => ({})
        },
        frontpage: {
            type: Boolean
        }
    });

    onMounted(() => {
        initFlowbite();
    });

    const page = usePage();
    const userRoles = computed(() => page.props.userRoles);

    /**
     * Check if the user has the given role.
     *
     * @param  string roleName
     * @return boolean
     */

    const hasRole = (roleName) => userRoles.value.includes(roleName);

     /**
      * Calculates the number of days until dd.mm.YYYY
      * 
      * @param  string date
      * @return string
      */

    const calculateDaysUntil = (dateStr) => {
        const [day, month, year] = dateStr.split('.');
        const targetDate = new Date(year, month - 1, day);

        const today = new Date();
        today.setHours(0, 0, 0, 0);

        const differenceInMilliseconds = targetDate - today;
        const differenceInDays = differenceInMilliseconds / (1000 * 60 * 60 * 24);

        return Math.floor(differenceInDays);
    };
</script>

<template>
    <section :id="block.anchorName" class="relative block w-full h-screen overflow-hidden">
        <div class="absolute inset-0 bg-cover" :style="{ backgroundImage: `url('${block.image}')` }"></div>
        <div class="absolute inset-0 bg-black opacity-80"></div>
        <div class="absolute p-12 w-full overflow-auto" style="top: 0; bottom: 0;">
            <div class="flex-row justify-center items-center">
                <h1 class="text-center text-white font-arctic text-2xl md:text-4xl">{{ block.title || 'Medlemskap' }}</h1>
            </div>

            <div class="mx-auto max-w-[1280px]">
                <p v-if="block.showprices" class="mt-2 text-white">
                    Prisen for medlemskap er
                    {{ page.props.pageSettings['membership_fee'] }},- kr per år for voksne eller {{ page.props.pageSettings['membership_child_fee'] }} 
                    for barn/ungdom under {{ page.props.pageSettings['membership_child_age_limit'] }} år. Du må være 
                    {{ page.props.pageSettings['membership_age_limit'] }} år eller eldre for å bli medlem hos oss. Medlemskapet
                    varer i {{ page.props.pageSettings['membership_time_interval_months'] }} måneder
                    <span v-if="page.props.pageSettings['membership_annual']"> eller ut kalenderåret </span>
                    før det må fornyes. Betalinger kan gjøres på nettsiden via vipps <span v-if="page.props.pageSettings['module_stripe_payment']">eller bankkort</span> ved å besøke 
                    <Link :href="route('page-builder.index')" class="text-amber-400 hover:text-amber-300 underline hover:no-underline">
                        din medlemsside
                    </Link>
                    .
                </p>
                <p v-if="$page.props.auth.user && block.showprices" class="mt-2 text-white">
                    <span class="font-semibold">Merk:</span> Priser og betingelser kan variere. Besøk medlemssiden for å se
                    dine spesifike betingelser.
                </p>
                <div class="mt-2 text-white memberShipBlock" v-html="marked(block.text)">
                    
                </div>
            </div>
        </div>
    </section>
</template>