<template>
    <div class="l-contain tool">
        <div class="tool__matrix">
            <div class="tool__form">

                <div class="tool__title-main">
                    <img src="/img/logo.svg" alt="logo"/>
                    <h1>Analytics tool</h1>
                </div>

                <label class="tool__label">Type verkoop</label>
                <div class="tool__form-field u-margin-between">
                    <button class="tool__button" :data-active="tooltype === 'order' ? 'true' : 'false'"
                            @click="setToolType('order')">
                        Order
                    </button>

                    <button class="tool__button" :data-active="tooltype === 'offerte' ? 'true' : 'false'"
                            @click="setToolType('offerte')">
                        offerte
                    </button>
                </div>

                <label class="tool__label">Budget</label>
                <div class="tool__form-field tool__form-field--input u-margin-between">
                    <input type="number" name="budget" @change="changeInput('budget')" ref="budget" class="tool__input" placeholder="2000">
                </div>

                <label class="tool__label">Gemiddelde kosten per klik: <span class="tool__label-value">€{{cpc}}</span></label>
                <div class="tool__slider-field">
                    <vue-slider v-model="cpc" :min="0.5" :max="10" :interval="0.5"/>
                </div>

                <label class="tool__label">Conversiepercentage: <span class="tool__label-value">{{conversion}}%</span></label>
                <div class="tool__slider-field">
                    <vue-slider v-model="conversion" :min="0" :max="5" :interval="0.5"/>

                </div>

                <template v-if="tooltype === 'offerte'">
                    <label class="tool__label">Scoringspercentage leads: <span class="tool__label-value">{{scoringspercentage}}%</span></label>
                    <div class="tool__slider-field">
                        <vue-slider v-model="scoringspercentage" :min="0" :max="100"/>
                    </div>
                </template>

                <label class="tool__label">Gemiddelde omzet per nieuwe klant</label>
                <div class="tool__form-field tool__form-field--input u-margin-between">
                    <input type="number" name="omzetperklant" class="tool__input" ref="revenuePerCustomer" @change="changeInput('revenuePerCustomer')" placeholder="50.000">
                </div>

                <label class="tool__label">Marge op omzet: <span class="tool__label-value">{{margin}}%</span></label>
                <div class="tool__slider-field">
                    <vue-slider v-model="margin" :min="0" :max="100"/>

                </div>


            </div>
            <div class="tool__sidebar">
                <div class="tool__sidebar-container">
                    <div class="tool__sidebar-item">
                        <span class="tool__sidebar-number">{{ roundNumber(leadNumber) }}</span>
                        <span class="tool__sidebar-label">bezoekers</span>
                    </div>
                    <div class="tool__sidebar-item" v-if="tooltype === 'offerte'">
                        <span class="tool__sidebar-number">{{ roundNumber(requestNumber) }}</span>
                        <span class="tool__sidebar-label">aanvragen</span>
                    </div>
                    <div class="tool__sidebar-item">
                        <span class="tool__sidebar-number">{{ roundNumber(orderNumber) }}</span>
                        <span class="tool__sidebar-label">orders</span>
                    </div>
                </div>
                <div class="tool__sidebar-container">
                    <div class="tool__sidebar-item">
                        <span class="tool__sidebar-number">€{{ formatNumber(roundNumber(revenue)) }}</span>
                        <span class="tool__sidebar-label">omzet</span>
                    </div>
                    <div class="tool__sidebar-item">
                        <span class="tool__sidebar-number">€{{ formatNumber(roundNumber(profit)) }}</span>
                        <span class="tool__sidebar-label">bruto winst</span>
                    </div>
                </div>
                <div class="tool__sidebar-container tool__sidebar-container--result">
                    <div class="tool__sidebar-item">
                        <span class="tool__sidebar-number">€1</span>
                        <span class="tool__sidebar-label">investeren</span>
                        <span class="tool__sidebar-number">=</span>
                        <span class="tool__sidebar-number">€{{roundNumber(result)}}</span>
                        <span class="tool__sidebar-label">winst</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import VueSlider from 'vue-slider-component'

export default {
    name: "tool",
    components: {
        VueSlider
    },
    data() {
        return {
            isMounted: false,
            budget: 0,
            revenuePerCustomer: 0,
            cpc: 5,
            conversion: 2,
            scoringspercentage: 20,
            margin: 10,
            tooltype: 'order',
        }
    },
    mounted(){
        this.isMounted = true;
    },
    methods: {
        setToolType: function (type) {
            this.tooltype = type
        },
        changeInput: function (type) {
            if (type === 'budget') this.budget = this.$refs.budget.value
            if (type === 'revenuePerCustomer') this.revenuePerCustomer = this.$refs.revenuePerCustomer.value
        },
        roundNumber: function(number) {
            return Math.round(number)
        },
        formatNumber: function(num) {
            return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.')
        }
    },
    computed: {
        leadNumber: function () {
            return this.budget / this.cpc
        },
        requestNumber: function () {
            return (this.leadNumber / 100) * this.conversion
        },
        orderNumber: function () {
            if (this.tooltype === 'order') {
                return this.requestNumber
            } else {
                return (this.requestNumber / 100) * this.scoringspercentage
            }
        },
        revenue: function () {
            return Math.round(this.orderNumber) * this.revenuePerCustomer
        },
        profit: function () {
            return (this.revenue / 100) * this.margin
        },
        result: function () {
            return this.budget > 0 ? this.profit / this.budget : 0
        }
    }
}
</script>