<template>
    <div id="cenik" class="oasis-pricing text-center">

        <Clouds class="clouds">
            <Cloud type="colored" class="cloud" />
            <Cloud type="colored" class="cloud" />
            <Cloud type="colored" class="cloud" />
            <Cloud type="colored" class="cloud" />
        </Clouds>

        <div class="title-wrapper container">
            <h3 class="main-title-sm">
                {{ $t('homepage_pricing_title') }}
            </h3>
            <h4 class="sub-title-sm">
                {{ $t('homepage_pricing_description') }}
            </h4>
        </div>

        <div class="container" style="overflow: hidden">
            <img src="/oasis/trees.svg" alt="oasis-trees" class="trees">
        </div>
        <div class="container">

            <ul v-if="pricing" class="pricing-box">
                <li v-for="(plan, i) in pricing" :key="i" class="box">
                    <folder-icon size="34" class="pricing-icon" />

                    <h5 class="pricing-data">
                        {{ plan.data.attributes.capacity_formatted }}
                    </h5>
                    <b class="pricing-name">
                        {{ plan.data.attributes.name }}
                    </b>
                    <p class="pricing-description">
                        {{ plan.data.attributes.description }}
                    </p>
                    <router-link :to="{name: 'SignUp'}" :class="{'base-button': i == 1,'theme-button': i !== 1, }">
                        {{ plan.data.attributes.price }}/{{ $t('global.monthly_ac') }}
                    </router-link>
                    <small v-if="plan.data.attributes.tax_rates.length > 0" class="pricing-vat">
                        {{ $t('page_pricing_tables.vat_excluded') }}
                    </small>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import {
        FolderIcon,
    } from 'vue-feather-icons'
    import Clouds from '@/Oasis/Homepage/Components/Clouds'
    import Cloud from '@/Oasis/Homepage/Components/Cloud'
    import {mapGetters} from 'vuex'
    import axios from 'axios'

    export default {
        name: 'OasisPricing',
        components: {
            FolderIcon,
            Clouds,
            Cloud,
        },
        computed: {
            ...mapGetters([
                'config'
            ]),
        },
        data() {
            return {
                pricing: undefined
            }
        },
        mounted() {
            axios.get('/api/pricing')
                .then(response => {
                    this.pricing = response.data
                })
        },
    }
</script>

<style lang="scss" scoped>
    @import '@assets/oasis/_components';
    @import '@assets/oasis/_homepage';
    @import '@assets/oasis/_responsive';

    .clouds .cloud {

        &:nth-child(1) {
            opacity: 0.2;
            left: 4%;
            top: 15%;
            @include transform(scale(1.1))
        }

        &:nth-child(2) {
            opacity: 0.15;
            left: 18%;
            top: 41%;
            @include transform(scale(-0.7, 0.7))
        }

        &:nth-child(3) {
            opacity: 0.30;
            right: 9%;
            top: 6%;
            @include transform(scale(-1.55, 1.55))
        }

        &:nth-child(4) {
            opacity: 0.25;
            right: 16%;
            top: 32%;
            @include transform(scale(1))
        }
    }

    .oasis-pricing {
        margin-top: 290px;
        position: relative;

        .main-title-sm,
        .sub-title-sm {
            margin-left: auto;
            margin-right: auto;
        }

        .title-wrapper {
            padding-top: 220px;
            margin-bottom: 110px;
        }

        .theme-button {
            @include font-size(18);
        }
    }

    .trees {
        margin-bottom: -95px;
        margin-left: 250px;
    }

    .pricing-box {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        max-width: 1325px;
        margin: 0 auto;

        .box {
            background: white;
            box-shadow: 0 5px 333px -22px #1B253935;
            border-radius: 12px;
            display: block;
            padding: 38px 40px 35px;
            z-index: 1;

            &:nth-child(2) {
                z-index: 2;
                padding: 65px 40px 20px;
                background: $theme-bg-light;
                margin-top: -40px;
                margin-bottom: -40px;

                .pricing-name, .pricing-data {
                    color: white;
                }

                .pricing-description {
                    color: $text-dark-secondary;
                    margin-bottom: 80px;
                }

                .pricing-data {
                    margin-top: 10px;
                }

                .pricing-vat {
                    color: $text-dark-subtitle;
                }
            }

            .pricing-icon {
                margin-bottom: 45px;

                path {
                    stroke: $theme;
                    stroke-width: 2;
                }
            }

            .pricing-data {
                @include font-size(50);
                font-weight: 900;
                margin-bottom: 10px;
            }

            .pricing-name {
                @include font-size(24);
                font-weight: 800;
                margin-bottom: 30px;
                display: block;
            }

            .pricing-description {
                @include font-size(19);
                margin-bottom: 50px;
            }

            .pricing-vat {
                @include font-size(12);
                color: $text-secondary;
                display: block;
                font-weight: 300;
                opacity: 0.45;
                margin-top: 15px;
            }
        }
    }

    @media only screen and (max-width: 1370px) {

        .oasis-pricing .title-wrapper {
            margin-bottom: 60px;
        }

        .clouds .cloud {

            &:nth-child(1) {
                opacity: 0.2;
                left: 5%;
                top: 10%;
                @include transform(scale(1))
            }

            &:nth-child(2) {
                left: 23%;
                top: 36%;
            }

            &:nth-child(3) {
                opacity: 0.30;
                right: 2%;
                top: 4%;
                @include transform(scale(-1.35, 1.35))
            }

            &:nth-child(4) {
                opacity: 0.2;
                right: 8%;
                top: 31%;
                @include transform(scale(0.9))
            }
        }
    }

    @media only screen and (max-width: 1024px) {

        .clouds .cloud {

            &:nth-child(1) {
                left: -8%;
                top: 6%;
                @include transform(scale(0.8))
            }

            &:nth-child(2) {
                left: 21%;
                top: 32%;
            }

            &:nth-child(3) {
                right: 6%;
                top: 3%;
                @include transform(scale(-1.1, 1.1))
            }

            &:nth-child(4) {
                right: 0%;
                top: 37%;
                @include transform(scale(0.7))
            }
        }

        .oasis-pricing {
            .title-wrapper {
                padding-top: 150px;
                margin-bottom: 0;
            }
        }

        .trees {
            margin-bottom: -110px;
            margin-left: 150px;
            transform: scale(0.75);
        }

        .pricing-box .box {
            padding: 25px 35px;

            &:nth-child(2) {
                padding: 40px 25px 20px;
                margin-top: -25px;
                margin-bottom: -25px;

                .pricing-description {
                    margin-bottom: 50px;
                }
            }
        }
    }

    @media only screen and (max-width: 960px) {

        .clouds .cloud {

            &:nth-child(1) {
                left: 1%;
                top: 4%;
                @include transform(scale(0.6))
            }

            &:nth-child(2) {
                left: 2%;
                top: 25%;
            }

            &:nth-child(3) {
                right: -12%;
                top: 2%;
                @include transform(scale(-0.9, 0.9))
            }

            &:nth-child(4) {
                right: -3%;
                top: 26%;
                @include transform(scale(0.5))
            }
        }

        .pricing-box {
            grid-template-columns: 1fr;
            gap: 25px;

            .box {
                width: 100%;
                max-width: 520px !important;
                margin-left: auto !important;
                margin-right: auto !important;

                &:nth-child(2) {
                    padding: 38px 40px 35px;
                    margin-top: 0px;
                    margin-bottom: 0px;

                    .pricing-data {
                        margin-top: 0;
                    }

                    .pricing-description {
                        margin-bottom: 50px;
                    }
                }
            }
        }
    }

    @media only screen and (max-width: 760px) {

        .oasis-pricing {

            .title-wrapper {
                margin-bottom: -70px;
            }
        }

        .trees {
            margin-bottom: -130px;
            margin-left: 0;
            transform: scale(0.5) translatex(-110px);
        }

        .pricing-box .box {

            .pricing-data {
                @include font-size(36);
                margin-bottom: 0;
            }

            .pricing-description {
                margin-bottom: 35px;
            }
        }

        .clouds .cloud {

            &:nth-child(1) {
                left: -10%;
            }

            &:nth-child(2) {
                left: -18%;
                top: 18%;
                @include transform(scale(-0.5, 0.5))
            }

            &:nth-child(3) {
                right: -22%;
                top: 1%;
            }

            &:nth-child(4) {
                right: 1%;
                top: 24%;
                @include transform(scale(0.4))
            }
        }
    }

    @media (prefers-color-scheme: dark) {

        .oasis-pricing {
            .main-title-sm {
                color: white;
            }
        }

        .pricing-box {

            .box {
                background: darken($theme-bg-dark, 5%);

                .pricing-data,
                .pricing-name,
                .pricing-description,
                .pricing-vat {
                    color: white;
                }
            }
        }
    }
</style>
