@extends('front.v2.layouts.master')
@section('content')
    <style type="text/css">
        .btn-outline-primary:hover {
            background-color: #007bff;
            border-color: #02a0f9;
        }

        .btn-primary {
            color: #fff !important;
            background-color: #02a0f9;
            border-color: #02a0f9;
            padding: 14px 30px !important;
        }

        .btn-outline-primary {
            color: #02a0f9 !important;
            background-color: rgb(235 234 234);
            background-image: none;
            border-color: #02a0f9;
        }

        .btn-wide {
            padding-left: 30px;
            padding-right: 30px;
        }

        .badge-scroll {
            position: relative;
            background: url({{ asset('front/v2/images/slider/badge-2022-w-2.png') }}) repeat-x 0 0/cover;
            height: auto;
            padding: 130px 0;
            width: 100%;
            -webkit-animation: animate-badge-scroll 30s linear infinite;
            animation: animate-badge-scroll 30s linear infinite;
        }

        .badge-scroll img {
            position: absolute;
            top: 52%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            max-width: 250px;
            width: 100%;
        }

        @keyframes animate-badge-scroll {
            from {
                background-position: 100% 0
            }

            to {
                background-position: 0 0
            }
        }

        .bg-theme-grad {
            background-image: linear-gradient(180deg, #09c778 0%, #04d67f 100%) !important;
        }

    </style>

    <div class="header-banner bg-theme-grad has-ovm">
        <div class="nk-banner">
            <div class="banner banner-page">
                <div class="banner-wrap">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-xl-6 col-lg-9">
                                <div class="banner-caption cpn tc-light text-center">
                                    <div class="cpn-head">
                                        <h2 class="title ttu">{{ __('front.pricing') }}</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- .nk-banner -->
        <div class="nk-ovm shape-a-sm"></div>
    </div>

    <!-- Pricing Section Start -->
    <div id="fteam-pricing" class="fteam-pricing">
        <!-- Style One Start -->
        <div class="style1 pt-50 pb-50 md-pt-50 md-pb-40">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 text-center pb-10">
                        <a class="btn btn-primary btn-wide" style="border-radius: 1.5rem;"><b>Software</b></a>
                        <a href="https://okrinstitute.org/all-courses/" target="_blank"
                            class="btn btn-outline-primary btn-wide" style="border-radius: 1.5rem;"><b>Coaching</b></a>
                    </div>
                    <div
                        class="col-lg-12 col-md-12 {{ empty($priceAltCurrencySymbol) ? 'text-center' : 'text-left' }}">
                        <div class="sec-title text-center mb-20">
                            <p>
                                {{ __('front.simplePricingStartingAt0') }} <span class="text-primary"><small
                                        class="price-currency-symbol">{!! $priceCurrencySymbol !!}</small><span
                                        class="price-starting">{{ number_format($priceStarting, 2, '.', '') }}</span></span>
                                {{ __('front.simplePricingStartingAt2') }}<br>
                                {{ __('front.allPlansIncludesAllFeatures') }}!
                            </p>
                        </div>
                        <div class="btn-group pb-20 {{ empty($priceAltCurrencySymbol) ? '' : 'pull-left' }}" role="group">
                            <button id='onMonthly' type="button" class="btn btn-primary btn-sm btn-wide"
                                onclick="toggle('onMonthly');"
                                style="border-top-left-radius: 1.5rem;border-bottom-left-radius: 1.5rem;">{{ __('front.payMonthly') }}</button>
                            <button id='offMonthly' type="button" class="btn btn-outline-primary btn-sm btn-wide"
                                onclick="toggle('offMonthly');"
                                style="display:none;border-top-left-radius: 1.5rem;border-bottom-left-radius: 1.5rem;">{{ __('front.payMonthly') }}</button>
                            <button id='onYearly' type="button" class="btn btn-primary btn-sm btn-wide"
                                onclick="toggle('onYearly');"
                                style="display:none;border-top-right-radius: 1.5rem;border-bottom-right-radius: 1.5rem;">{{ __('front.payYearly') }}</button>
                            <button id='offYearly' type="button" class="btn btn-outline-primary btn-sm btn-wide"
                                style="border-top-right-radius: 1.5rem;border-bottom-right-radius: 1.5rem;"
                                onclick="toggle('offYearly');">{{ __('front.payYearly') }}</button>
                            <input type="hidden" id="billing" value="month">
                        </div>
                        @if (!empty($priceAltCurrencySymbol))
                            <div class="pull-right">
                                <input type="hidden" id="currency" value="0">
                                <a class="btn btn-sm btn-primary btn-currency-0" style="border-radius: 1.5rem;"
                                    onclick="changeCurrency(0);">{!! $priceCurrencySymbol !!}</a>
                                <a class="btn btn-sm btn-outline-primary btn-currency-1" style="border-radius: 1.5rem;"
                                    onclick="changeCurrency(1);">{!! $priceAltCurrencySymbol !!}</a>
                            </div>
                        @endif
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-6 col-md-6 md-mb-30">
                        <div class="pricing-wrap">
                            <div class="top-part text-center">
                                <div class="plan-detail">
                                    <small class="price-currency-symbol price-currency-symbol-user"
                                        style="display: none">{!! $priceCurrencySymbol !!}</small><span
                                        class="price-monthly">{{ __('front.freeForever') }}</span><span class="price-yearly"
                                        style="display: none">{{ __('front.free') }}</span>
                                </div>
                                <div class=""><span class="time-limit per-user-per-month"><small class="text-info">*
                                        </small>{{ __('front.forPersonalPlan') }}</div>
                            </div>
                            <div class="middle-part">
                                <ul class="text-left">
                                    <li><i class="flaticon-success text-success"></i> {{ __('front.oKRsKPIs') }}</li>
                                    <li><i class="flaticon-success text-success"></i> {{ __('front.taskProject') }}</li>
                                    <li><i class="flaticon-success text-success"></i> {{ __('front.leadClients') }}</li>
                                    <li><i class="flaticon-success text-success"></i> {{ __('front.review') }}</li>
                                    <li><i class="flaticon-success text-success"></i> {{ __('front.attendanceTimelog') }}
                                    </li>
                                    <li><i class="flaticon-success text-success"></i> {{ __('front.employeeReward') }}
                                    </li>
                                    <li><i class="flaticon-success text-success"></i> {{ __('front.supportTickets') }}
                                    </li>
                                    <li><i class="flaticon-success text-success"></i> {{ __('front.learningHub') }}</li>
                                    <li><i class="flaticon-success text-success"></i> {{ __('front.SurveysForms') }}</li>
                                </ul>
                            </div>
                            <div class="bottom-part text-center">
                                @if (empty(auth()->user()))
                                    <a class="readon junior-btn btn-block"
                                        style="z-index: 1 !important"
                                        href="{{ route('front.signup.index') }}">{{ __('front.signUpNow') }}</a>
                                @else
                                    <a class="readon junior-btn btn-block"
                                       style="z-index: 1 !important"
                                        href="{{ route('admin.billing') }}">{{ __('front.subscribeNow') }}</a>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 sm-mb-30">
                        <div class="pricing-wrap pt-4">
                            <div class="top-part text-center pb-0">
                                <div class="plan-detail">
                                    <a href="javascript:minusEmployee(1)"><span class="text-success">-</small></a>
                                    <input id="input-employees" type="number" min="1" max="250" value="1"
                                        style="width:60%; text-align: center; font-size:0.8em !important; padding: 0px; border:1px solid #ccc; border-radius:5px;"
                                        oninput="displayInputEmployee();" onchange="displayInputEmployee(this);">
                                    <span class="total-employees text-muted d-none">1</span>
                                    <a href="javascript:addEmployee(1)"><small class="text-success">+</small></a>
                                </div>
                                <div class="mb-0" style="height:15px">
                                    <input id="total-employees" type="range" min="1" max="250" value="1" style="width:80%"
                                        oninput="displayEmployee();" onchange="displayEmployee(this);">
                                </div>
                                <div style="margin-bottom: 5px">
                                    <span class="time-limit">{{ __('front.totalEmployees') }}</span>
                                </div>
                            </div>

                            <div class="middle-part row text-center">
                                <div class="time-limit text-center text-dark mt-0 mb-10" style="width:100%">
                                    {{ __('app.total') }} <span id="total-billing">{{ __('app.monthly') }}</span>
                                    {{ __('front.payment') }}
                                </div>
                                <div class="plan-detail text-center" style="width:100%">
                                    <small class="price-currency-symbol">{!! $priceCurrencySymbol !!}</small><span
                                        class="total-amount">0.00</span>
                                </div>

                                <div style="line-height:100%;width:100%" class="mt-0">
                                    <small class="saving-monthly text-center">
                                        {{ __('front.freeUpToUser1') }}*<br>{{ __('front.payOnlyOn2') }}.
                                    </small>
                                    <small class="saving-yearly text-center" style="display:none">
                                        {{ __('front.enjoyTotalSavingOf') }}<br>
                                        <span class="text-success"><small
                                                class="price-currency-symbol">{!! $priceCurrencySymbol !!}</small><span
                                                class="total-saving">1000</span></span>
                                        <span class="total-saving-per-year">{{ __('front.perYear') }}</span>!
                                    </small>
                                </div>
                            </div>
                            <div class="bottom-part text-center">
                                <div class="mt-30 mb-30">{{ __('front.needMoreThanUsers') }}?</div>
                                <a class="readon junior-btn btn-block" href="{{config('app.demo_link')}}"
                                    style="z-index: 1 !important"
                                    target="_blank">{{ __('front.contactUsNow') }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div style="width:100%" class="pt-20 pb-100 md-pt-20 md-pb-80 text-center">
            <div class="badge-scroll">
                <a href="https://www.g2.com/products/flowyteam/reviews" rel="noopener" target="_blank">
                    <img alt="Best Return on Investment G2" height="800" loading="lazy"
                        src="{{ asset('front/v2/images/badge/best-support-winter-2023.png') }}" width="705" draggable="false">
                </a>
            </div>
        </div>

    </div>
    <!-- Pricing Section End -->
@endsection
@push('footer-script')
    <script type="text/javascript">
        function displayInputEmployee() {
            var inputEmployees = parseInt($('#input-employees').val());
            $('#total-employees').val(inputEmployees);
            displayEmployee();
        }

        function addEmployee(emp) {
            var totalEmployees = parseInt($('#total-employees').val());
            if (totalEmployees > 0) {
                $('#total-employees').val(totalEmployees + 1);
                displayEmployee();
            }
        }

        function minusEmployee(emp) {
            var totalEmployees = parseInt($('#total-employees').val());
            if (totalEmployees < 501) {
                $('#total-employees').val(totalEmployees - 1);
                displayEmployee();
            }
        }

        function displayEmployee() {
            var totalEmployees = $('#total-employees').val();
            var paidEmployees = totalEmployees - {{ $freeUsers }};
            var billing = $('#billing').val();
            var currency = $('#currency').val();

            $('#input-employees').val(totalEmployees);
            var priceMonthly1 = {{ $priceMonthly1 }};
            var priceMonthly2 = {{ $priceMonthly2 }};
            var priceYearly1 = {{ $priceYearly1 }};
            var priceYearly2 = {{ $priceYearly2 }};
            var priceAltMonthly1 = {{ number_format($priceAltMonthly1, 2, '.', '') }};
            var priceAltMonthly2 = {{ number_format($priceAltMonthly2, 2, '.', '') }};
            var priceAltYearly1 = {{ number_format($priceAltYearly1, 2, '.', '') }};
            var priceAltYearly2 = {{ number_format($priceAltYearly2, 2, '.', '') }};

            if (paidEmployees < 1) {
                paidEmployees = 0;
            }

            if (currency != 0) {
                priceMonthly1 = priceAltMonthly1;
                priceMonthly2 = priceAltMonthly2;
                priceYearly1 = priceAltYearly1;
                priceYearly2 = priceAltYearly2;
            }

            $('.total-employees').html(totalEmployees);

            if (paidEmployees < 1) {
                $('.price-currency-symbol-user').hide();
                $('.price-monthly').html('{{ __('front.free') }}');
                $('.price-yearly').html('{{ __('front.free') }}');
                $('.total-saving').html(displayPrice(0));
                $('.total-amount').html(displayPrice(0));
                $('.per-user-per-month').html('<small class="text-info">* </small>{{ __('front.forPersonalPlan') }}');
            } else if (paidEmployees < ({{ $paidUsers1 }} - {{ $freeUsers }})) {
                $('.price-currency-symbol-user').show();
                $('.price-monthly').html(displayPrice(priceMonthly1));
                $('.price-yearly').html(displayPrice((priceYearly1 / 12)));
                $('.per-user-per-month').html('{{ __('front.perUserPerMonth') }}');

                if (billing == 'year') {
                    totalAmount = twoDecimal(paidEmployees * priceYearly1);
                } else {
                    totalAmount = twoDecimal(paidEmployees * priceMonthly1);
                }

                totalSaving = twoDecimal((paidEmployees * priceMonthly1 * 12) - (paidEmployees * priceYearly1));

                $('.total-saving').html(displayPrice(totalSaving));
                $('.total-amount').html(displayPrice(totalAmount));
            } else {
                $('.price-currency-symbol-user').show();
                $('.price-monthly').html(displayPrice(priceMonthly2));
                $('.price-yearly').html(displayPrice((priceYearly2 / 12)));
                $('.per-user-per-month').html('{{ __('front.perUserPerMonth') }}');

                if (billing == 'year') {
                    totalAmount = twoDecimal(paidEmployees * priceYearly2);
                } else {
                    totalAmount = twoDecimal(paidEmployees * priceMonthly2);
                }

                totalSaving = twoDecimal((paidEmployees * priceMonthly2 * 12) - (paidEmployees * priceYearly2));

                $('.total-saving').html(displayPrice(totalSaving));
                $('.total-amount').html(displayPrice(totalAmount));
            }

            if (billing == 'year') {
                $('#total-billing').html('{{ __('app.yearly') }}');
                if (paidEmployees < 1) {
                    $('.saving-yearly').hide();
                    $('.saving-monthly').html('{{ __('front.freeUpToUser1') }}*<br>{{ __('front.payOnlyOn2') }}.');
                    $('.saving-monthly').show();
                } else {
                    $('.saving-yearly').show();
                    $('.saving-monthly').hide();
                    $('.total-saving-per-year').html('{{ __('front.perYear') }}');
                }
            } else {
                $('#total-billing').html('{{ __('app.monthly') }}');
                if (paidEmployees < 1) {
                    $('.saving-yearly').hide();
                    $('.saving-monthly').html('{{ __('front.freeUpToUser1') }}*<br>{{ __('front.payOnlyOn2') }}.');
                    $('.saving-monthly').show();
                } else if (paidEmployees < ({{ $paidUsers1 }} - {{ $freeUsers }})) {
                    $('.saving-yearly').hide();
                    $('.saving-monthly').html(
                        '{{ __('front.volumeDiscountForCompany') }}<br>{{ __('front.withMoreThanEmployees') }}.');
                    $('.saving-monthly').show();
                } else {
                    $('.saving-yearly').show();
                    $('.saving-monthly').hide();
                    $('.total-saving-per-year').html('{{ __('front.ifPayYearly') }}');
                }
            }
        }

        function toggle(that) {
            switch (that) {
                case 'onMonthly':
                    $('#onMonthly').hide();
                    $('#offMonthly').show();
                    $('#onYearly').show();
                    $('#offYearly').hide();

                    $('#billing').val('year');
                    $('.price-monthly').hide();
                    $('.price-yearly').show();

                    break;
                case 'offMonthly':
                    $('#onMonthly').show();
                    $('#offMonthly').hide();
                    $('#onYearly').hide();
                    $('#offYearly').show();

                    $('#billing').val('month');
                    $('.price-monthly').show();
                    $('.price-yearly').hide();

                    break;
                case 'onYearly':
                    $('#onMonthly').show();
                    $('#offMonthly').hide();
                    $('#onYearly').hide();
                    $('#offYearly').show();

                    $('#billing').val('month');
                    $('.price-monthly').show();
                    $('.price-yearly').hide();

                    break;
                case 'offYearly':
                    $('#onMonthly').hide();
                    $('#offMonthly').show();
                    $('#onYearly').show();
                    $('#offYearly').hide();

                    $('#billing').val('year');
                    $('.price-monthly').hide();
                    $('.price-yearly').show();

                    break;
            }
            displayEmployee();
        }

        function changeCurrency(value) {
            $('#currency').val(value);
            if (value != 0) {
                $('.btn-currency-0').addClass('btn-outline-primary').removeClass('btn-primary');
                $('.btn-currency-1').removeClass('btn-outline-primary').addClass('btn-primary');
                $('.price-currency-symbol').html('{!! $priceAltCurrencySymbol !!}');
                $('.price-starting').html(displayPrice({!! number_format($priceAltStarting, 2, '.', '') !!}));
            } else {
                $('.btn-currency-1').addClass('btn-outline-primary').removeClass('btn-primary');
                $('.btn-currency-0').removeClass('btn-outline-primary').addClass('btn-primary');
                $('.price-currency-symbol').html('{!! $priceCurrencySymbol !!}');
                $('.price-starting').html(displayPrice({!! number_format($priceStarting, 2, '.', '') !!}));
            }
            displayEmployee();
        }

        function twoDecimal(value) {
            return Math.round(value * 100) / 100;
        }

        function displayPrice(value) {
            if (value >= 1000000) {
                value = twoDecimal(value / 1000000);
                return (value.toFixed(0) + 'M');
            } else if (value > 20000) {
                value = twoDecimal(value / 1000);
                return (value.toFixed(0) + 'K');
            } else if (value > 99)
                return (value.toFixed(0));
            else
                return (value.toFixed(2));
        }
    </script>
@endpush
 ?>