@extends('layouts.app')

@section('title','Creating the third workspace. View our pricing')

@section('meta')
  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="{{Request::url()}}">
  <meta property="og:title" content="Creating the third workspace. View our pricing">
  <meta property="og:image" content="{{asset('images/reef-rocks-ltd.jpg')}}">
  <meta property="og:description" content="View the pricing for your company. If you have over 100 users, reach out to us to see if you qualify for a discount. Sign up today for a 7 day trial.">

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content="{{Request::url()}}">
  <meta property="twitter:title" content="Creating the third workspace. View our pricing">
  <meta property="twitter:image" content="{{asset('images/reef-rocks-ltd.jpg')}}">

  <meta property="og:image:width" content="600"/>
  <meta property="og:image:height" content="315"/>

  <meta name="description" content="View the pricing for your company. If you have over 100 users, reach out to us to see if you qualify for a discount. Sign up today for a 7 day trial.">
@endsection

@section('header')
	@include('front.partials.header')
@endsection

@section('content')
<div class="page-wrapper">
<section class="standard-block">
    <div class="container">
        <h1 class="text-center mb-4 mb-md-5 pb-0 pb-md-3 pb-lg-4 pb-xl-5 text-uppercase f-45">Work your way</h1>

        <div class="row gy-5 gy-sm-4 gx-4">
            <div class="col-12 col-lg-4 pb-5 pb-lg-0 text-center text-lg-start">
                <h3 class="text-uppercase f-22">Choose billing period</h3>
                <div class="ps-0 ps-lg-4">
                    <ul class="list-inline mb-0 custom-toggler">
                        <li class="list-inline-item me-1 align-middle monthly_toggle">Monthly</li>
                        <li class="list-inline-item me-1 align-middle">
                            <div class="form-check form-switch mb-0">
                                <input name="name" class="form-check-input monthYear" checked type="checkbox" id="checkboxid">
                            </div>
                        </li>
                        <li class="list-inline-item align-middle yearly_toggle color-green">Yearly</li>
                    </ul>
                </div>
                <div class="pt-4 pt-lg-5 d-none d-md-block">
                    <h3 class="h2 text-uppercase f-22">What you get</h3>
                    <ul class="mb-0 f-14">
                        <li><strong>Free hot drinks</strong></li>
                        <li>Unlimited bookings across the UK</li>
                        <li>Remote working perks</li>
                        <li>Mental health & wellbeing perks</li>
                        <li>Discounts of food & drink</li>
                        <li>Invite + collaborate with colleagues</li>
                    </ul>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-lg-4">
                <div class="pricing-box">
                    <div class="icon d-flex align-items-center justify-content-center">
                        <img src="{{asset('images/reef-logo-icon.png')}}" alt="#">
                    </div>
                    <p class="h3 mb-3 mb-md-4 text-center font-bold text-uppercase f-22">Reef Unlimited</p>
                    <p class="price text-center yearly">£50.00 </p>
                    <p class="h3 mb-3 mb-md-4 font-bold color-green text-center yearly f-12">Per user per year</p>
                    <p class="price text-center monthly">£5.00</p>
                    <p class="h3 mb-3 mb-md-4 font-bold color-green text-center monthly f-12">Per user per month</p>
                  
                    {{-- <p class="f-14">For teams the size of 1 - 99 users who utilise hybrid working. </p> --}}
                    {{-- <p class="bottom mb-0 text-center"><a href="{{route('free_trial')}}" class="btn green">Try free for 7 days</a></p> --}}
                    @if(isset($page))
                        @if($page == 'individuals')
                            <p class="bottom mb-0 text-center"><a href="#download-reef" class="btn green">Download Reef</a></p>
                        @elseif($page == 'team')
                        <p class="bottom mb-0 text-center"><a href="{{route('book_your_demo_company')}}" class="btn green">Request a demo</a></p>
                        @else
                        <p class="bottom mb-0 text-center"><a href="{{route('book_your_demo_company')}}" class="btn green">Request a demo</a></p>
                        @endif
                    @else
                    <p class="bottom mb-0 text-center"><a href="{{route('book_your_demo_company')}}" class="btn green">Request a demo</a></p>
                    @endif
                </div>
                <p class="text-center mt-3" style="font-size: 0.8rem;">Prices exclude VAT</p>
            </div>
            <div class="col-12 col-sm-6 col-lg-4">
                <div class="pricing-box">
                    <div class="icon red d-flex align-items-center justify-content-center">
                        <img src="{{asset('images/reef-logo-icon.png')}}" alt="#">
                    </div>
                    <p class="h3 mb-3 mb-md-4 text-center font-bold text-uppercase f-22">Reef Enterprise</p>
                    <p class="price text-center">£POA<sub>+vat</sub></p>
                    <p class="h3 mb-3 mb-md-4 font-bold color-green text-center monthly f-12">Per user per month</p>
                    <p class="h3 mb-3 mb-md-4 font-bold color-green text-center yearly f-12">Per user per year</p>
                    {{-- <p class="f-14">For teams the size of 100+ users who utilise hybrid working. </p> --}}
                    <p class="bottom mb-0 text-center"><a href="{{route('enquire_now')}}" class="btn green invert w160">Enquire now</a></p>
                </div>
            </div>

            <div class="col-12 d-block d-md-none">
                <div class="pt-2 text-center">
                    <h3 class="h2 f-35">What you get</h3>
                    <ul class="list-unstyled mb-0">
                        <li><strong>Free hot drinks</strong></li>
                        <li>Unlimited bookings across the UK</li>
                        <li>Remote working perks</li>
                        <li>Mental health & wellbeing perks</li>
                        <li>Discounts of food & drink</li>
                        <li>Invite + collaborate with colleagues</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

@include('front.partials.free_trial_black_bar')


@endsection

@section('footer')
    @include('front.partials.footer')
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function(){
    $('.monthYear').attr('style', 'background-color: #C7F7ED !important');
    $('.monthYear').css('border', 'none');
    if($('.monthYear').is(':checked')) {
            $(this).css('background-color', '#C7F7ED');
            $('.monthYear').css('border', 'none');
            $('.monthly_toggle').removeClass('active');
            $('.monthly_toggle').removeClass('color-green');
            $('.yearly_toggle').addClass('active');
            $('.yearly_toggle').addClass('color-green');

            $('.monthly').hide();
            $('.yearly').show();
            $('.early-bird-box h4').html('Yearly offer');
            $('.early-bird-box .savings').show();


        } else {
            $('.monthly_toggle').addClass('active');
            $('.monthly_toggle').addClass('color-green');
            $('.yearly_toggle').removeClass('active');
            $('.yearly_toggle').removeClass('color-green');

            $('.monthly').show();
            $('.yearly').hide();
            $('.early-bird-box h4').html('Monthly offer');
            $('.early-bird-box .savings').hide();

        }

    $(document).on('change', '.monthYear', function(e){
        e.preventDefault();
        
        if($(this).is(':checked')) {
            $('.monthly_toggle').removeClass('active');
            $('.monthly_toggle').removeClass('color-green');
            $('.yearly_toggle').addClass('active');
            $('.yearly_toggle').addClass('color-green');

            $('.monthly').hide();
            $('.yearly').show();
            $('.early-bird-box h4').html('Yearly offer');
            $('.early-bird-box .savings').show();


        } else {
            $('.monthly_toggle').addClass('active');
            $('.monthly_toggle').addClass('color-green');
            $('.yearly_toggle').removeClass('active');
            $('.yearly_toggle').removeClass('color-green');

            $('.monthly').show();
            $('.yearly').hide();
            $('.early-bird-box h4').html('Monthly offer');
            $('.early-bird-box .savings').hide();

        }
       
    }); 
});

</script>
@endpush