@extends('front.practitioner.import.template.import')

@section('content')
<link rel="stylesheet" href="{{ asset('login/css/style.css') }}">
<link rel="stylesheet" href="{{ asset('login/fonts/fonts.css') }}">
<link rel="stylesheet" href="{{ asset('login/css/responsive.css') }}">

<div class="page-content dashboard-wrapper p-0 mdashboard-wrapper">
    <div class="choice-main">
        <div class="container">
            <div class="pricing-detail text-center">
                <div class="section-title">
                    <h1>We hope you’ve enjoyed using the My Appointments platform. Your trial 
                    has now expired</h1>
                </div>
                <p>To continue accessing all of our time saving and money saving features, please select your plan to continue.</p>
            </div>
            <div class="pricing-plan">
                <div class="row align-items-center justify-content-center">
                    <div class="col-sm-12 col-md-4 col-lg-4">
                        <div class="switch-main">
                            <div class="switch-wrapper">
                                <input id="monthly" type="radio" name="switch" checked="">
                                <input id="yearly" type="radio" name="switch">
                                <label for="monthly">Monthly</label>
                                <label for="yearly">Annually</label>
                                <span class="highlighter"></span>

                                <div class="save">
                                    <span>Save</span>
                                    <h6>15%</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-8 col-lg-8">
                        <div class="pricing-list pricing-monthly" style="">
                            <div class="row">
                                <div class="col-sm-6 col-6 col-md-6">
                                    <div class="plan-block">
                                        <h6>Starter</h6>
                                        <h3>$0</h3>
                                        <span>month</span>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-6 col-md-6">
                                    <div class="plan-block popular">
                                        <h6>Growth</h6>
                                        <h3>$39</h3>
                                        <span>month</span>

                                        <div class="ribbon-1 right">Most popular</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="pricing-list pricing-annual" style="display: none;">
                            <div class="row">
                                <div class="col-sm-6 col-6 col-md-6">
                                    <div class="plan-block">
                                        <h6>Starter</h6>
                                        <h3>$0</h3>
                                        <span>Annual</span>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-6 col-md-6">
                                    <div class="plan-block popular">
                                        <h6>Growth</h6>
                                        <h3>$397</h3>
                                        <span>Annual</span>

                                        <div class="ribbon-1 right">Most popular</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pricing-chart pricing-monthly">
                <div class="pricing-block">
                    <ul>
                        <li>Additional practitioners</li>
                        <li>$22 each</li>
                        <li>$15 each</li>
                    </ul>
                    <ul>
                        <li>2-way SMS</li>
                        <li>from 11c</li>
                        <li>75 free pm</li>
                    </ul>
                    <ul>
                        <li>Telehealth
                            <button type="button" class="tooltip-btn" data-toggle="tooltip" data-placement="top" data-custom-class="custom-tooltip" title="Sync your My Appointments calendar with iCal, Google or Outlook.">
                                <img src='{{asset("assets/images/information.svg")}}' trigger="click" alt="information" class="img-fluid">
                            </button>
                        </li>
                        <li>From 22c</li>
                        <li>Unlimited</li>
                    </ul>
                    <ul>
                        <li>Online (no terminal required)</li>
                        <li>1.7%+25c</li>
                        <li>1.5%+25c</li>
                    </ul>
                    <ul>
                        <li>Tap payment
                            <button type="button" class="tooltip-btn" data-toggle="tooltip" data-placement="top" data-custom-class="custom-tooltip" title="Sync your My Appointments calendar with iCal, Google or Outlook.">
                                <img src='{{asset("assets/images/information.svg")}}' trigger="click" alt="information" class="img-fluid">
                            </button>
                        </li>
                        <li>1.5%+25c</li>
                        <li>1.5%+25c</li>
                    </ul>
                    <ul>
                        <li>Credit card authorisation
                            <button type="button" class="tooltip-btn" data-toggle="tooltip" data-placement="top" data-custom-class="custom-tooltip" title="Sync your My Appointments calendar with iCal, Google or Outlook.">
                                <img src='{{asset("assets/images/information.svg")}}' trigger="click" alt="information" class="img-fluid">
                            </button>
                        </li>
                        <li><img src='{{asset("assets/images/remove.svg")}}' class="img-fluid" alt="tick"></li>
                        <li><img src='{{asset("assets/images/tick2.svg")}}' class="img-fluid" alt="tick"></li>
                    </ul>
                    <ul>
                        <li>Online health fund rebates
                            <button type="button" class="tooltip-btn" data-toggle="tooltip" data-placement="top" data-custom-class="custom-tooltip" title="Sync your My Appointments calendar with iCal, Google or Outlook.">
                                <img src='{{asset("assets/images/information.svg")}}' trigger="click" alt="information" class="img-fluid">
                            </button>
                        </li>
                        <li><img src='{{asset("assets/images/remove.svg")}}' class="img-fluid" alt="tick"></li>
                        <li><img src='{{asset("assets/images/tick2.svg")}}' class="img-fluid" alt="tick"></li>
                    </ul>
                    <ul>
                        <li>Calendar sync
                            <button type="button" class="tooltip-btn" data-toggle="tooltip" data-placement="top" data-custom-class="custom-tooltip" title="Sync your My Appointments calendar with iCal, Google or Outlook.">
                                <img src='{{asset("assets/images/information.svg")}}' trigger="click" alt="information" class="img-fluid">
                            </button>
                        </li>
                        <li><img src='{{asset("assets/images/remove.svg")}}' class="img-fluid" alt="tick"></li>
                        <li><img src='{{asset("assets/images/tick2.svg")}}' class="img-fluid" alt="tick"></li>
                    </ul>
                    <ul>
                        <li>Gift vouchers</li>
                        <li><img src='{{asset("assets/images/remove.svg")}}' class="img-fluid" alt="tick"></li>
                        <li><img src='{{asset("assets/images/tick2.svg")}}' class="img-fluid" alt="tick"></li>
                    </ul>
                    <ul>
                        <li>Dedicated SMS numbers
                            <button type="button" class="tooltip-btn" data-toggle="tooltip" data-placement="top" data-custom-class="custom-tooltip" title="Sync your My Appointments calendar with iCal, Google or Outlook.">
                                <img src='{{asset("assets/images/information.svg")}}' trigger="click" alt="information" class="img-fluid">
                            </button>
                        </li>
                        <li>From $75</li>
                        <li><img src='{{asset("assets/images/tick2.svg")}}' class="img-fluid" alt="tick"></li>
                    </ul>
                    <ul>
                        <li>Broadcasts</li>
                        <li>SMS</li>
                        <li>SMS and email</li>
                    </ul>			
                    <ul>
                        <li>Client recalls</li>
                        <li>SMS</li>
                        <li>SMS and email</li>
                    </ul>			
                    <ul>
                        <li></li>
                        <li><a href="#" class="btn btn-border">Choose plan</a></li>
                        <li><a href="#" class="btn">Choose plan</a></li>
                    </ul>			
                </div>
            </div>
            <div class="pricing-chart pricing-annual" style="display: none;">
                <div class="pricing-block">
                    <ul>
                        <li>Additional practitioners</li>
                        <li>$22 each</li>
                        <li>$15 each</li>
                    </ul>
                    <ul>
                        <li>2-way SMS</li>
                        <li>from 11c</li>
                        <li>75 free pm</li>
                    </ul>
                    <ul>
                        <li>Telehealth
                            <button type="button" class="tooltip-btn" data-toggle="tooltip" data-placement="top" data-custom-class="custom-tooltip" title="Sync your My Appointments calendar with iCal, Google or Outlook.">
                                <img src='{{asset("assets/images/information.svg")}}' trigger="click" alt="information" class="img-fluid">
                            </button>
                        </li>
                        <li>From 22c</li>
                        <li>Unlimited</li>
                    </ul>
                    <ul>
                        <li>Online (no terminal required)</li>
                        <li>1.7%+25c</li>
                        <li>1.5%+25c</li>
                    </ul>
                    <ul>
                        <li>Tap payment
                            <button type="button" class="tooltip-btn" data-toggle="tooltip" data-placement="top" data-custom-class="custom-tooltip" title="Sync your My Appointments calendar with iCal, Google or Outlook.">
                                <img src='{{asset("assets/images/information.svg")}}' trigger="click" alt="information" class="img-fluid">
                            </button>
                        </li>
                        <li>1.5%+25c</li>
                        <li>1.5%+25c</li>
                    </ul>
                    <ul>
                        <li>Credit card authorisation
                            <button type="button" class="tooltip-btn" data-toggle="tooltip" data-placement="top" data-custom-class="custom-tooltip" title="Sync your My Appointments calendar with iCal, Google or Outlook.">
                                <img src='{{asset("assets/images/information.svg")}}' trigger="click" alt="information" class="img-fluid">
                            </button>
                        </li>
                        <li><img src='{{asset("assets/images/remove.svg")}}' class="img-fluid" alt="tick"></li>
                        <li><img src='{{asset("assets/images/tick2.svg")}}' class="img-fluid" alt="tick"></li>
                    </ul>
                    <ul>
                        <li>Online health fund rebates
                            <button type="button" class="tooltip-btn" data-toggle="tooltip" data-placement="top" data-custom-class="custom-tooltip" title="Sync your My Appointments calendar with iCal, Google or Outlook.">
                                <img src='{{asset("assets/images/information.svg")}}' trigger="click" alt="information" class="img-fluid">
                            </button>
                        </li>
                        <li><img src='{{asset("assets/images/remove.svg")}}' class="img-fluid" alt="tick"></li>
                        <li><img src='{{asset("assets/images/tick2.svg")}}' class="img-fluid" alt="tick"></li>
                    </ul>
                    <ul>
                        <li>Calendar sync
                            <button type="button" class="tooltip-btn" data-toggle="tooltip" data-placement="top" data-custom-class="custom-tooltip" title="Sync your My Appointments calendar with iCal, Google or Outlook.">
                                <img src='{{asset("assets/images/information.svg")}}' trigger="click" alt="information" class="img-fluid">
                            </button>
                        </li>
                        <li><img src='{{asset("assets/images/remove.svg")}}' class="img-fluid" alt="tick"></li>
                        <li><img src='{{asset("assets/images/tick2.svg")}}' class="img-fluid" alt="tick"></li>
                    </ul>
                    <ul>
                        <li>Gift vouchers</li>
                        <li><img src='{{asset("assets/images/remove.svg")}}' class="img-fluid" alt="tick"></li>
                        <li><img src='{{asset("assets/images/tick2.svg")}}' class="img-fluid" alt="tick"></li>
                    </ul>
                    <ul>
                        <li>Dedicated SMS numbers
                            <button type="button" class="tooltip-btn" data-toggle="tooltip" data-placement="top" data-custom-class="custom-tooltip" title="Sync your My Appointments calendar with iCal, Google or Outlook.">
                                <img src='{{asset("assets/images/information.svg")}}' trigger="click" alt="information" class="img-fluid">
                            </button>
                        </li>
                        <li>From $75</li>
                        <li><img src='{{asset("assets/images/tick2.svg")}}' class="img-fluid" alt="tick"></li>
                    </ul>
                    <ul>
                        <li>Broadcasts</li>
                        <li>SMS</li>
                        <li>SMS and email</li>
                    </ul>						
                    <ul>
                        <li>Client recalls</li>
                        <li>SMS</li>
                        <li>SMS and email</li>
                    </ul>						
                    <ul>
                        <li></li>
                        <li><a href="#" class="btn btn-border">Choose plan</a></li>
                        <li><a href="#" class="btn">Choose plan</a></li>
                    </ul>						
                </div>
            </div>

            <div class="view-detail">
                <a href="#" class="link">View detailed pricing page</a>
            </div>

        </div>
    </div>      
</div>

@endsection

@section('modals')
@endsection

@section('css')

<style>
    .grey-bg {
        background: #FFFFFF;
    }
</style>
@endsection

@section('import-scripts')
<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })
    $(document).ready(function () {
        $("#monthly").click(function (event) {
            $(".pricing-monthly").show();
            $(".pricing-annual").hide();
        });

        $("#yearly").click(function (event) {
            $(".pricing-annual").show();
            $(".pricing-monthly").hide();
        });
    });

	</script>
@endsection