@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') }}">
<style>
    .invoice-page-menu a.navbar-brand img
    {
        max-width: 120%;
    }
    .invoice-page-menu a.navbar-brand img {
        margin: 0px 0px;
    }
    .grey-bg {
        background: #FFFFFF;
    }
    .link{
        color: #45747a !important;
    }
    .choice-main {
        padding: 0px 0 !important;
    }
    .notes-menu {
        justify-content: flex-start;
        padding-left: 30px !important;
        padding-right: 30px !important;
        width: 100% !important;
    }
    .navbar
    {
        padding: .5rem 1rem;
    }
    .invoice-page-menu a.btn {
        color:  #45747a !important;
        font-size: 16px;
        letter-spacing: 1px;
        margin: 0px 0px 0px;
        background: none !important;
        font-weight: 400 important;
    }
    .section-title h2 {
        font-size: 35px;
        line-height: 38px;
        color: #24303f;
        margin: 0px 0 40px;
        font-family: "europa";
        font-weight: 700;
    }
</style>

<div class="align-items-center">
    <nav class="navbar w-100">
        <nav class="navbar navbar-light invoice-page-menu notes-menu w-100">
            <a class="navbar-brand p-0"><img src="{{asset("assets/images/find-my-appointments-tm.png")}}" alt="" class="img-flude" style="min-width: 43px"></a>
            <ul class="list-inline icons-listing mr-auto my-auto"></ul>
            <a href="{{route('practitioner.logout')}}" class="btn  text-center">Logout</a>
        </nav>
    </nav>
    <div class="brdr-bttm w-100"></div>
</div>
<div class="plan-selection d-none">
    <div class="container">
        <div class="section-title">
            <h2>We hope you’ve enjoyed using <br> the My Appointments platform. <br>Your trial has now expired.</h2>
            <p>To continue accessing all of our time saving and money saving features, please select your <br> plan to continue.</p>
        </div>
        <div class="plan-table-main">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Inclusions</th>
                        <th><span>STARTER</span><h2>$0*</h2><p>PER MONTH</p></th>
                        <th><span>PREMIUM</span><h2>$39</h2><p>PER MONTH</p></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <label class="tooltip-new">Practitioners
                                <span class="tooltip-info-icon">                                    
                                      <img src="http://127.0.0.1:8000/assets/images/information-icon-new.svg" alt="" class="img-fluid info-icon mCS_img_loaded">
                                </span>
                                <div class="tooltiptext" wfd-invisible="true">
                                      <div class="media">
                                         <img src="http://127.0.0.1:8000/assets/images/information-icon-new.svg" alt="" class="img-fluid info-icon mr-2 mCS_img_loaded">
                                         <div class="media-body">Number or practitioner accounts. Administrators free.</div>
                                      </div>
                                </div>
                           </label>
                            {{-- <button type="button" class="info-btn" data-toggle="tooltip" data-placement="top" title="Number or practitioner accounts. Administrators free.">
                                <img style="" src='{{asset("assets/images/info-icon.png")}}' alt="" class="img-fluid" />
                            </button> --}}
                        </td>
                        <td>1</td>
                        <td>1</td>
                    </tr>
                    <tr>
                        <td>Extra practitioners</td>
                        <td>$22pm each</td>
                        <td>$15pm each</td>
                    </tr>
                    <tr>
                        <td>Administrators</td>
                        <td>Unlimited</td>
                        <td>Unlimited</td>
                    </tr>
                    <tr>
                        <td>Locations</td>
                        <td>Unlimited</td>
                        <td>Unlimited</td>
                    </tr>
                    <tr>
                        <td>Online bookings</td>
                        <td>
                            <div class="tick-icon"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                            viewBox="0 0 351.3 350.4" style="enable-background:new 0 0 351.3 350.4;" xml:space="preserve">
                            <g>
                                <path class="st0" fill="#46747A" d="M175.7,0C78.7,0,0,78.4,0,175.1C0,272,78.7,350.4,175.7,350.4c97,0,175.7-78.5,175.7-175.3
                                    C351.3,78.4,272.7,0,175.7,0z"/>
                            </g>
                            <path class="st1" fill="#FFFFFF" d="M98,184.5c-1.8,2.1-2.7,4.8-2.5,7.6c0.2,2.8,1.5,5.3,3.6,7.1l51.4,44.1c1.9,1.6,4.3,2.5,6.8,2.5
                                c0.3,0,0.6,0,0.9,0c2.8-0.3,5.4-1.6,7.1-3.8l88-107.1c1.8-2.2,2.6-4.9,2.3-7.6c-0.3-2.8-1.6-5.3-3.8-7L235.9,107
                                c-4.4-3.6-11-3-14.7,1.4l-67.7,82.4l-27.2-23.3c-4.4-3.7-11-3.2-14.7,1.1L98,184.5z"/>
                            </svg>
                            </div>
                        </td>

                        <td>
                            <div class="tick-icon"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                            viewBox="0 0 351.3 350.4" style="enable-background:new 0 0 351.3 350.4;" xml:space="preserve">
                            <g>
                                <path class="st0" fill="#46747A" d="M175.7,0C78.7,0,0,78.4,0,175.1C0,272,78.7,350.4,175.7,350.4c97,0,175.7-78.5,175.7-175.3
                                    C351.3,78.4,272.7,0,175.7,0z"/>
                            </g>
                            <path class="st1" fill="#FFFFFF" d="M98,184.5c-1.8,2.1-2.7,4.8-2.5,7.6c0.2,2.8,1.5,5.3,3.6,7.1l51.4,44.1c1.9,1.6,4.3,2.5,6.8,2.5
                                c0.3,0,0.6,0,0.9,0c2.8-0.3,5.4-1.6,7.1-3.8l88-107.1c1.8-2.2,2.6-4.9,2.3-7.6c-0.3-2.8-1.6-5.3-3.8-7L235.9,107
                                c-4.4-3.6-11-3-14.7,1.4l-67.7,82.4l-27.2-23.3c-4.4-3.7-11-3.2-14.7,1.1L98,184.5z"/>
                            </svg>
                            </div>
                        </td>

                    </tr>

                    <tr>
                        <td>
                            <label class="tooltip-new">2 way SMS
                                <span class="tooltip-info-icon">                                    
                                      <img src="http://127.0.0.1:8000/assets/images/information-icon-new.svg" alt="" class="img-fluid info-icon mCS_img_loaded">
                                </span>
                                <div class="tooltiptext" wfd-invisible="true">
                                      <div class="media">
                                         <img src="http://127.0.0.1:8000/assets/images/information-icon-new.svg" alt="" class="img-fluid info-icon mr-2 mCS_img_loaded">
                                         <div class="media-body">Outbound SMS 11c inc GST (minimum spend $100) or 18c inc GST (minimum spend $20). Inbound SMS free.</div>
                                      </div>
                                </div>
                           </label>
                        {{-- <button type="button" class="info-btn" data-toggle="tooltip" data-placement="top" title="Outbound SMS 11c inc GST (minimum spend $100) or 18c inc GST (minimum spend $20). Inbound SMS free.">
                            <img style="" src='{{asset("assets/images/info-icon.png")}}' alt="" class="img-fluid" />
                        </button> --}}
                        </td>
                        
                        <td>From 11c each</td>
                        <td>75 free per month</td>
                    </tr>
                    <tr>
                        <td>Telehealth</td>
                        <td>From 22c per 15 minute consult</td>
                        <td>Unlimited</td>
                    </tr>
                    <tr>
                        <td>
                            <label class="tooltip-new">Calendar Sync
                                <span class="tooltip-info-icon">                                    
                                      <img src="http://127.0.0.1:8000/assets/images/information-icon-new.svg" alt="" class="img-fluid info-icon mCS_img_loaded">
                                </span>
                                <div class="tooltiptext" wfd-invisible="true">
                                      <div class="media">
                                         <img src="http://127.0.0.1:8000/assets/images/information-icon-new.svg" alt="" class="img-fluid info-icon mr-2 mCS_img_loaded">
                                         <div class="media-body">Sync your My Appointments calendar with iCal, Google or Outlook</div>
                                      </div>
                                </div>
                           </label>
                            {{-- <button type="button" class="info-btn" data-toggle="tooltip" data-placement="top" title="Sync your My Appointments calendar with iCal, Google or Outlook">
                                <img style="" src='{{asset("assets/images/info-icon.png")}}' alt="" class="img-fluid" />
                            </button> --}}
                        </td>
                        <td>-</td>
                        <td>
                            <div class="tick-icon"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                viewBox="0 0 351.3 350.4" style="enable-background:new 0 0 351.3 350.4;" xml:space="preserve">
                                <g>
                                    <path class="st0" fill="#46747A" d="M175.7,0C78.7,0,0,78.4,0,175.1C0,272,78.7,350.4,175.7,350.4c97,0,175.7-78.5,175.7-175.3
                                        C351.3,78.4,272.7,0,175.7,0z"/>
                                </g>
                                <path class="st1" fill="#FFFFFF" d="M98,184.5c-1.8,2.1-2.7,4.8-2.5,7.6c0.2,2.8,1.5,5.3,3.6,7.1l51.4,44.1c1.9,1.6,4.3,2.5,6.8,2.5
                                    c0.3,0,0.6,0,0.9,0c2.8-0.3,5.4-1.6,7.1-3.8l88-107.1c1.8-2.2,2.6-4.9,2.3-7.6c-0.3-2.8-1.6-5.3-3.8-7L235.9,107
                                    c-4.4-3.6-11-3-14.7,1.4l-67.7,82.4l-27.2-23.3c-4.4-3.7-11-3.2-14.7,1.1L98,184.5z"/>
                                </svg>
                                </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label class="tooltip-new">Gift voucher</label>
                        </td>
                        <td>-</td>
                        <td>
                            <div class="tick-icon"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                viewBox="0 0 351.3 350.4" style="enable-background:new 0 0 351.3 350.4;" xml:space="preserve">
                                <g>
                                    <path class="st0" fill="#46747A" d="M175.7,0C78.7,0,0,78.4,0,175.1C0,272,78.7,350.4,175.7,350.4c97,0,175.7-78.5,175.7-175.3
                                        C351.3,78.4,272.7,0,175.7,0z"/>
                                </g>
                                <path class="st1" fill="#FFFFFF" d="M98,184.5c-1.8,2.1-2.7,4.8-2.5,7.6c0.2,2.8,1.5,5.3,3.6,7.1l51.4,44.1c1.9,1.6,4.3,2.5,6.8,2.5
                                    c0.3,0,0.6,0,0.9,0c2.8-0.3,5.4-1.6,7.1-3.8l88-107.1c1.8-2.2,2.6-4.9,2.3-7.6c-0.3-2.8-1.6-5.3-3.8-7L235.9,107
                                    c-4.4-3.6-11-3-14.7,1.4l-67.7,82.4l-27.2-23.3c-4.4-3.7-11-3.2-14.7,1.1L98,184.5z"/>
                                </svg>
                                </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label class="tooltip-new">Dedicated virtual SMS number</label>
                        </td>
                        <td>From $75</td>
                        <td>
                            <div class="tick-icon"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                viewBox="0 0 351.3 350.4" style="enable-background:new 0 0 351.3 350.4;" xml:space="preserve">
                                <g>
                                    <path class="st0" fill="#46747A" d="M175.7,0C78.7,0,0,78.4,0,175.1C0,272,78.7,350.4,175.7,350.4c97,0,175.7-78.5,175.7-175.3
                                        C351.3,78.4,272.7,0,175.7,0z"/>
                                </g>
                                <path class="st1" fill="#FFFFFF" d="M98,184.5c-1.8,2.1-2.7,4.8-2.5,7.6c0.2,2.8,1.5,5.3,3.6,7.1l51.4,44.1c1.9,1.6,4.3,2.5,6.8,2.5
                                    c0.3,0,0.6,0,0.9,0c2.8-0.3,5.4-1.6,7.1-3.8l88-107.1c1.8-2.2,2.6-4.9,2.3-7.6c-0.3-2.8-1.6-5.3-3.8-7L235.9,107
                                    c-4.4-3.6-11-3-14.7,1.4l-67.7,82.4l-27.2-23.3c-4.4-3.7-11-3.2-14.7,1.1L98,184.5z"/>
                                </svg>
                                </div>
                        </td>
                    </tr>
                    <tr>
                        <td>Online payment processing - no terminal required</td>
                        <td>1.7% + 25c</td>
                        <td>1.5% + 25c</td>
                    </tr>
                    <tr>
                        <td>Optional tap payment processing - terminal required</td>
                        <td>1.5% + 25c</td>
                        <td>1.5% + 25c</td>
                    </tr>
                    <tr>
                        <td>Pre-paid appointments</td>
                        <td>
                            <div class="tick-icon"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                            viewBox="0 0 351.3 350.4" style="enable-background:new 0 0 351.3 350.4;" xml:space="preserve">
                            <g>
                                <path class="st0" fill="#46747A" d="M175.7,0C78.7,0,0,78.4,0,175.1C0,272,78.7,350.4,175.7,350.4c97,0,175.7-78.5,175.7-175.3
                                    C351.3,78.4,272.7,0,175.7,0z"/>
                            </g>
                            <path class="st1" fill="#FFFFFF" d="M98,184.5c-1.8,2.1-2.7,4.8-2.5,7.6c0.2,2.8,1.5,5.3,3.6,7.1l51.4,44.1c1.9,1.6,4.3,2.5,6.8,2.5
                                c0.3,0,0.6,0,0.9,0c2.8-0.3,5.4-1.6,7.1-3.8l88-107.1c1.8-2.2,2.6-4.9,2.3-7.6c-0.3-2.8-1.6-5.3-3.8-7L235.9,107
                                c-4.4-3.6-11-3-14.7,1.4l-67.7,82.4l-27.2-23.3c-4.4-3.7-11-3.2-14.7,1.1L98,184.5z"/>
                            </svg>
                            </div>
                        </td>

                        <td>
                            <div class="tick-icon"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                            viewBox="0 0 351.3 350.4" style="enable-background:new 0 0 351.3 350.4;" xml:space="preserve">
                            <g>
                                <path class="st0" fill="#46747A" d="M175.7,0C78.7,0,0,78.4,0,175.1C0,272,78.7,350.4,175.7,350.4c97,0,175.7-78.5,175.7-175.3
                                    C351.3,78.4,272.7,0,175.7,0z"/>
                            </g>
                            <path class="st1" fill="#FFFFFF" d="M98,184.5c-1.8,2.1-2.7,4.8-2.5,7.6c0.2,2.8,1.5,5.3,3.6,7.1l51.4,44.1c1.9,1.6,4.3,2.5,6.8,2.5
                                c0.3,0,0.6,0,0.9,0c2.8-0.3,5.4-1.6,7.1-3.8l88-107.1c1.8-2.2,2.6-4.9,2.3-7.6c-0.3-2.8-1.6-5.3-3.8-7L235.9,107
                                c-4.4-3.6-11-3-14.7,1.4l-67.7,82.4l-27.2-23.3c-4.4-3.7-11-3.2-14.7,1.1L98,184.5z"/>
                            </svg>
                            </div>
                        </td>

                    </tr>
                    <tr>
                        <td>
                            <label class="tooltip-new">Credit card authorisation
                                <span class="tooltip-info-icon">                                    
                                      <img src="http://127.0.0.1:8000/assets/images/information-icon-new.svg" alt="" class="img-fluid info-icon mCS_img_loaded">
                                </span>
                                <div class="tooltiptext" wfd-invisible="true">
                                      <div class="media">
                                         <img src="http://127.0.0.1:8000/assets/images/information-icon-new.svg" alt="" class="img-fluid info-icon mr-2 mCS_img_loaded">
                                         <div class="media-body">Secure online payments with a credit card without taking payment</div>
                                      </div>
                                </div>
                           </label>
                            {{-- <button type="button" class="info-btn" data-toggle="tooltip" data-placement="top" title="Secure online payments with a credit card without taking payment">
                                <img style="" src='{{asset("assets/images/info-icon.png")}}' alt="" class="img-fluid" />
                            </button> --}}
                        </td>
                        <td>-</td>
                        <td>
                            <div class="tick-icon"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                viewBox="0 0 351.3 350.4" style="enable-background:new 0 0 351.3 350.4;" xml:space="preserve">
                                <g>
                                    <path class="st0" fill="#46747A" d="M175.7,0C78.7,0,0,78.4,0,175.1C0,272,78.7,350.4,175.7,350.4c97,0,175.7-78.5,175.7-175.3
                                        C351.3,78.4,272.7,0,175.7,0z"/>
                                </g>
                                <path class="st1" fill="#FFFFFF" d="M98,184.5c-1.8,2.1-2.7,4.8-2.5,7.6c0.2,2.8,1.5,5.3,3.6,7.1l51.4,44.1c1.9,1.6,4.3,2.5,6.8,2.5
                                    c0.3,0,0.6,0,0.9,0c2.8-0.3,5.4-1.6,7.1-3.8l88-107.1c1.8-2.2,2.6-4.9,2.3-7.6c-0.3-2.8-1.6-5.3-3.8-7L235.9,107
                                    c-4.4-3.6-11-3-14.7,1.4l-67.7,82.4l-27.2-23.3c-4.4-3.7-11-3.2-14.7,1.1L98,184.5z"/>
                                </svg>
                                </div>
                        </td>
                    </tr>
                    {{-- <tr>
            
                        <td>Credit card authorisation
                            <button type="button" class="info-btn" data-toggle="tooltip" data-placement="top" title="Optional. Clients will be required to secure their booking with a credit card. No payment is taken at the time of booking.">
                                <img style="" src='{{asset("assets/images/info-icon.png")}}' alt="" class="img-fluid" />
                            </button>
                        </td>

                        <td>
                            -
                        </td>

                        <td>
                            <div class="tick-icon"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                            viewBox="0 0 351.3 350.4" style="enable-background:new 0 0 351.3 350.4;" xml:space="preserve">
                            <g>
                                <path class="st0" fill="#46747A" d="M175.7,0C78.7,0,0,78.4,0,175.1C0,272,78.7,350.4,175.7,350.4c97,0,175.7-78.5,175.7-175.3
                                    C351.3,78.4,272.7,0,175.7,0z"/>
                            </g>
                            <path class="st1" fill="#FFFFFF" d="M98,184.5c-1.8,2.1-2.7,4.8-2.5,7.6c0.2,2.8,1.5,5.3,3.6,7.1l51.4,44.1c1.9,1.6,4.3,2.5,6.8,2.5
                                c0.3,0,0.6,0,0.9,0c2.8-0.3,5.4-1.6,7.1-3.8l88-107.1c1.8-2.2,2.6-4.9,2.3-7.6c-0.3-2.8-1.6-5.3-3.8-7L235.9,107
                                c-4.4-3.6-11-3-14.7,1.4l-67.7,82.4l-27.2-23.3c-4.4-3.7-11-3.2-14.7,1.1L98,184.5z"/>
                            </svg>
                            </div>
                        </td>

                    </tr> --}}
                    <tr>
                        <td>Automated intake forms</td>
                        <td>
                            <div class="tick-icon"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                            viewBox="0 0 351.3 350.4" style="enable-background:new 0 0 351.3 350.4;" xml:space="preserve">
                            <g>
                                <path class="st0" fill="#46747A" d="M175.7,0C78.7,0,0,78.4,0,175.1C0,272,78.7,350.4,175.7,350.4c97,0,175.7-78.5,175.7-175.3
                                    C351.3,78.4,272.7,0,175.7,0z"/>
                            </g>
                            <path class="st1" fill="#FFFFFF" d="M98,184.5c-1.8,2.1-2.7,4.8-2.5,7.6c0.2,2.8,1.5,5.3,3.6,7.1l51.4,44.1c1.9,1.6,4.3,2.5,6.8,2.5
                                c0.3,0,0.6,0,0.9,0c2.8-0.3,5.4-1.6,7.1-3.8l88-107.1c1.8-2.2,2.6-4.9,2.3-7.6c-0.3-2.8-1.6-5.3-3.8-7L235.9,107
                                c-4.4-3.6-11-3-14.7,1.4l-67.7,82.4l-27.2-23.3c-4.4-3.7-11-3.2-14.7,1.1L98,184.5z"/>
                            </svg>
                            </div>
                        </td>

                        <td>
                            <div class="tick-icon"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                            viewBox="0 0 351.3 350.4" style="enable-background:new 0 0 351.3 350.4;" xml:space="preserve">
                            <g>
                                <path class="st0" fill="#46747A" d="M175.7,0C78.7,0,0,78.4,0,175.1C0,272,78.7,350.4,175.7,350.4c97,0,175.7-78.5,175.7-175.3
                                    C351.3,78.4,272.7,0,175.7,0z"/>
                            </g>
                            <path class="st1" fill="#FFFFFF" d="M98,184.5c-1.8,2.1-2.7,4.8-2.5,7.6c0.2,2.8,1.5,5.3,3.6,7.1l51.4,44.1c1.9,1.6,4.3,2.5,6.8,2.5
                                c0.3,0,0.6,0,0.9,0c2.8-0.3,5.4-1.6,7.1-3.8l88-107.1c1.8-2.2,2.6-4.9,2.3-7.6c-0.3-2.8-1.6-5.3-3.8-7L235.9,107
                                c-4.4-3.6-11-3-14.7,1.4l-67.7,82.4l-27.2-23.3c-4.4-3.7-11-3.2-14.7,1.1L98,184.5z"/>
                            </svg>
                            </div>
                        </td>

                    </tr>
                    <tr>
                        <td>
                            <label class="tooltip-new">Online health fund rebates
                                <span class="tooltip-info-icon">                                    
                                      <img src="http://127.0.0.1:8000/assets/images/information-icon-new.svg" alt="" class="img-fluid info-icon mCS_img_loaded">
                                </span>
                                <div class="tooltiptext" wfd-invisible="true">
                                      <div class="media">
                                         <img src="http://127.0.0.1:8000/assets/images/information-icon-new.svg" alt="" class="img-fluid info-icon mr-2 mCS_img_loaded">
                                         <div class="media-body">Requires a free Medipass account. Participating funds only</div>
                                      </div>
                                </div>
                           </label>
                        {{-- <button type="button" class="info-btn" data-toggle="tooltip" data-placement="top" title="Requires a free Medipass account. Participating funds only">
                            <img style="" src='{{asset("assets/images/info-icon.png")}}' alt="" class="img-fluid" />
                        </button> --}}
                        </td>
                        <td>
                           -
                        </td>

                        <td>
                            <div class="tick-icon"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                            viewBox="0 0 351.3 350.4" style="enable-background:new 0 0 351.3 350.4;" xml:space="preserve">
                            <g>
                                <path class="st0" fill="#46747A" d="M175.7,0C78.7,0,0,78.4,0,175.1C0,272,78.7,350.4,175.7,350.4c97,0,175.7-78.5,175.7-175.3
                                    C351.3,78.4,272.7,0,175.7,0z"/>
                            </g>
                            <path class="st1" fill="#FFFFFF" d="M98,184.5c-1.8,2.1-2.7,4.8-2.5,7.6c0.2,2.8,1.5,5.3,3.6,7.1l51.4,44.1c1.9,1.6,4.3,2.5,6.8,2.5
                                c0.3,0,0.6,0,0.9,0c2.8-0.3,5.4-1.6,7.1-3.8l88-107.1c1.8-2.2,2.6-4.9,2.3-7.6c-0.3-2.8-1.6-5.3-3.8-7L235.9,107
                                c-4.4-3.6-11-3-14.7,1.4l-67.7,82.4l-27.2-23.3c-4.4-3.7-11-3.2-14.7,1.1L98,184.5z"/>
                            </svg>
                            </div>
                        </td>

                    </tr>
                    <tr>
                        <td>Broadcasts</td>
                        <td>SMS only</td>
                        <td>Email and SMS</td>
                    </tr>
                    <tr>
                        <td>Recalls</td>
                        <td>SMS only</td>
                        <td>Email and SMS</td>
                    </tr>
                    <tr>
                        <td>iOS and Android App</td>
                        <td>
                            <div class="tick-icon"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                            viewBox="0 0 351.3 350.4" style="enable-background:new 0 0 351.3 350.4;" xml:space="preserve">
                            <g>
                                <path class="st0" fill="#46747A" d="M175.7,0C78.7,0,0,78.4,0,175.1C0,272,78.7,350.4,175.7,350.4c97,0,175.7-78.5,175.7-175.3
                                    C351.3,78.4,272.7,0,175.7,0z"/>
                            </g>
                            <path class="st1" fill="#FFFFFF" d="M98,184.5c-1.8,2.1-2.7,4.8-2.5,7.6c0.2,2.8,1.5,5.3,3.6,7.1l51.4,44.1c1.9,1.6,4.3,2.5,6.8,2.5
                                c0.3,0,0.6,0,0.9,0c2.8-0.3,5.4-1.6,7.1-3.8l88-107.1c1.8-2.2,2.6-4.9,2.3-7.6c-0.3-2.8-1.6-5.3-3.8-7L235.9,107
                                c-4.4-3.6-11-3-14.7,1.4l-67.7,82.4l-27.2-23.3c-4.4-3.7-11-3.2-14.7,1.1L98,184.5z"/>
                            </svg>
                            </div>
                        </td>

                        <td>
                            <div class="tick-icon"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                            viewBox="0 0 351.3 350.4" style="enable-background:new 0 0 351.3 350.4;" xml:space="preserve">
                            <g>
                                <path class="st0" fill="#46747A" d="M175.7,0C78.7,0,0,78.4,0,175.1C0,272,78.7,350.4,175.7,350.4c97,0,175.7-78.5,175.7-175.3
                                    C351.3,78.4,272.7,0,175.7,0z"/>
                            </g>
                            <path class="st1" fill="#FFFFFF" d="M98,184.5c-1.8,2.1-2.7,4.8-2.5,7.6c0.2,2.8,1.5,5.3,3.6,7.1l51.4,44.1c1.9,1.6,4.3,2.5,6.8,2.5
                                c0.3,0,0.6,0,0.9,0c2.8-0.3,5.4-1.6,7.1-3.8l88-107.1c1.8-2.2,2.6-4.9,2.3-7.6c-0.3-2.8-1.6-5.3-3.8-7L235.9,107
                                c-4.4-3.6-11-3-14.7,1.4l-67.7,82.4l-27.2-23.3c-4.4-3.7-11-3.2-14.7,1.1L98,184.5z"/>
                            </svg>
                            </div>
                        </td>

                    </tr>

                    <tr>
                        <td>
                            <label class="tooltip-new">Client product re-ordering
                                <span class="tooltip-info-icon">                                    
                                      <img src="http://127.0.0.1:8000/assets/images/information-icon-new.svg" alt="" class="img-fluid info-icon mCS_img_loaded">
                                </span>
                                <div class="tooltiptext" wfd-invisible="true">
                                      <div class="media">
                                         <img src="http://127.0.0.1:8000/assets/images/information-icon-new.svg" alt="" class="img-fluid info-icon mr-2 mCS_img_loaded">
                                         <div class="media-body">When you prescribe products, clients can re-order and pay for additional items based on your customisable script allowance</div>
                                      </div>
                                </div>
                           </label>
                        {{-- <button type="button" class="info-btn" data-toggle="tooltip" data-placement="top" title="When you prescribe products, clients can re-order and pay for additional items based on your customisable script allowance">
                            <img style="" src='{{asset("assets/images/info-icon.png")}}' alt="" class="img-fluid" />
                        </button> --}}
                        </td>
                        <td>
                            <div class="tick-icon"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                            viewBox="0 0 351.3 350.4" style="enable-background:new 0 0 351.3 350.4;" xml:space="preserve">
                            <g>
                                <path class="st0" fill="#46747A" d="M175.7,0C78.7,0,0,78.4,0,175.1C0,272,78.7,350.4,175.7,350.4c97,0,175.7-78.5,175.7-175.3
                                    C351.3,78.4,272.7,0,175.7,0z"/>
                            </g>
                            <path class="st1" fill="#FFFFFF" d="M98,184.5c-1.8,2.1-2.7,4.8-2.5,7.6c0.2,2.8,1.5,5.3,3.6,7.1l51.4,44.1c1.9,1.6,4.3,2.5,6.8,2.5
                                c0.3,0,0.6,0,0.9,0c2.8-0.3,5.4-1.6,7.1-3.8l88-107.1c1.8-2.2,2.6-4.9,2.3-7.6c-0.3-2.8-1.6-5.3-3.8-7L235.9,107
                                c-4.4-3.6-11-3-14.7,1.4l-67.7,82.4l-27.2-23.3c-4.4-3.7-11-3.2-14.7,1.1L98,184.5z"/>
                            </svg>
                            </div>
                        </td>

                        <td>
                            <div class="tick-icon"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                            viewBox="0 0 351.3 350.4" style="enable-background:new 0 0 351.3 350.4;" xml:space="preserve">
                            <g>
                                <path class="st0" fill="#46747A" d="M175.7,0C78.7,0,0,78.4,0,175.1C0,272,78.7,350.4,175.7,350.4c97,0,175.7-78.5,175.7-175.3
                                    C351.3,78.4,272.7,0,175.7,0z"/>
                            </g>
                            <path class="st1" fill="#FFFFFF" d="M98,184.5c-1.8,2.1-2.7,4.8-2.5,7.6c0.2,2.8,1.5,5.3,3.6,7.1l51.4,44.1c1.9,1.6,4.3,2.5,6.8,2.5
                                c0.3,0,0.6,0,0.9,0c2.8-0.3,5.4-1.6,7.1-3.8l88-107.1c1.8-2.2,2.6-4.9,2.3-7.6c-0.3-2.8-1.6-5.3-3.8-7L235.9,107
                                c-4.4-3.6-11-3-14.7,1.4l-67.7,82.4l-27.2-23.3c-4.4-3.7-11-3.2-14.7,1.1L98,184.5z"/>
                            </svg>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td>Free data import</td>
                        <td>
                            DIY
                        </td>

                        <td>
                            <div class="tick-icon"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                            viewBox="0 0 351.3 350.4" style="enable-background:new 0 0 351.3 350.4;" xml:space="preserve">
                            <g>
                                <path class="st0" fill="#46747A" d="M175.7,0C78.7,0,0,78.4,0,175.1C0,272,78.7,350.4,175.7,350.4c97,0,175.7-78.5,175.7-175.3
                                    C351.3,78.4,272.7,0,175.7,0z"/>
                            </g>
                            <path class="st1" fill="#FFFFFF" d="M98,184.5c-1.8,2.1-2.7,4.8-2.5,7.6c0.2,2.8,1.5,5.3,3.6,7.1l51.4,44.1c1.9,1.6,4.3,2.5,6.8,2.5
                                c0.3,0,0.6,0,0.9,0c2.8-0.3,5.4-1.6,7.1-3.8l88-107.1c1.8-2.2,2.6-4.9,2.3-7.6c-0.3-2.8-1.6-5.3-3.8-7L235.9,107
                                c-4.4-3.6-11-3-14.7,1.4l-67.7,82.4l-27.2-23.3c-4.4-3.7-11-3.2-14.7,1.1L98,184.5z"/>
                            </svg>
                            </div>
                        </td>

                    </tr>
                    <tr>
                        <td></td>
                        <td>
                        <a href="#" class="btn" data-toggle="modal" data-target="#plan-modal">Choose plan</a>
                        </td>
                        <td>
                        <a href="#" class="btn" data-toggle="modal" data-target="#premium-modal">Choose plan</a>
                        </td>

                    </tr>

                </tbody>
            </table>

            <div class="section-title">
                
                <p>*Must be using our online payment processing to qualify for Starter plan. No terminal <br>required</p>
            </div>
        </div>
    </div>
</div>

<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">                   
                    <h2>We hope you’ve enjoyed using <br> the My Appointments platform. <br>Your trial has now expired.</h2>
                </div>
                <p>To continue accessing all of our time saving and money saving features, please select your plan to continue.</p>
                <p>Below are the key plan differences. View all features via this <a class="link" href="https://myappointments.app/pricing">link</a>.</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
                              <button type="button" class="tooltip-btn" data-toggle="tooltip" data-placement="top" data-custom-class="custom-tooltip" title="Outbound SMS from 11c inc GST. Inbound free.">
                                <img src='{{asset("assets/images/information.svg")}}' trigger="click" alt="information" class="img-fluid">
                            </button>
                        </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="In-built integration. Automated meeting links sent to client 15mins before each consult.">
                                <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="Terminal required. Get in touch for details.">
                                <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="Secure online bookings with a credit card without
 taking payment">
                                <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="Requires a free Tyro health account. Participating
 funds only.">
                                <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="Communicate with your clients using a number exclusively
 for your practice.">
                                <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>Waitlist
                            <button type="button" class="tooltip-btn" data-toggle="tooltip" data-placement="top" data-custom-class="custom-tooltip" title="Manage your waitlist by adding clients or let them join through your booking link.">
                                <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></li>
                        <li><a href="#" class="btn" data-toggle="modal" data-target="#plan-modal">Choose plan</a></li>
                        <li><a href="#" class="btn" data-toggle="modal" data-target="#premium-modal">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
                            <button type="button" class="tooltip-btn" data-toggle="tooltip" data-placement="top" data-custom-class="custom-tooltip" title="Outbound SMS from 11c inc GST. Inbound free.">
                                <img src='{{asset("assets/images/information.svg")}}' trigger="click" alt="information" class="img-fluid">
                            </button>
                        </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="In-built integration. Automated meeting links sent to client 15mins before each consult.">
                                <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="Terminal required. Get in touch for details.">
                                <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="Secure online bookings with a credit card without
 taking payment">
                                <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="Requires a free Tyro health account. Participating
 funds only.">
                                <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="Communicate with your clients using a number exclusively
 for your practice.">
                                <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>Waitlist
                            <button type="button" class="tooltip-btn" data-toggle="tooltip" data-placement="top" data-custom-class="custom-tooltip" title="Manage your waitlist by adding clients or let them join through your booking link.">
                                <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></li>
                        <li><a href="#" class="btn" data-toggle="modal" data-target="#plan-modal">Choose plan</a></li>
                        <li><a href="#" class="btn" data-toggle="modal" data-target="#premium-modal-yearly">Choose plan</a></li>
                    </ul>						
                </div>
            </div>

            <div class="view-detail">
                {{-- <a href="#" class="link">View detailed pricing page</a> --}}
                <p class="text-center"><a target="_blank" href="https://myappointments.app/pricing/" class="bottom-text-css link">View detailed pricing page</a></p>
            </div>

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

<div class="modal fade plan-modal" id="plan-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <form action="" id="activateForm1" method="get">
      <div class="modal-content">
          <div class="modal-body">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true"><img style="" src='{{asset("assets/images/close-img.png")}}' alt="" class="img-fluid" /></span>
                  </button>
          <div class="section-title">
            <h2>Payment processing</h2>
            <img src='{{asset("assets/images/Payment-Processing.svg")}}' alt="" width="52" class="img-fluid">
            <p>You’ve chosen the $0 plan. In selecting this plan, you have chosen to use My Appointments as your primary payment processing solution. If you already have an existing payment processor, please return to select our Premium plan.</p>
          </div>
          <a href="#" onclick="upgrade_plan(plan_id=1,plan_type='free')" data-dismiss="modal" class="btn">Continue with $0 plan</a>
          <a href="#" data-dismiss="modal" class="link">Return to choose Premium plan</a>
          </div>
      </div>
    </form>
  </div>
</div>
<div class="modal fade plan-modal" id="premium-modal"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <form action="" id="activateForm" method="get">
      <div class="modal-content">
          <div class="modal-body">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true"><img style="" src='{{asset("assets/images/close-img.png")}}' alt="" class="img-fluid" /></span>
                  </button>
          <div class="section-title">
            <h2>Premium Plan</h2>
            <img src='{{asset("assets/images/Premium-plan.svg")}}' width="52" alt="" class="img-fluid">
            <p>You have chosen the My Appointments Premium plan with free SMS messages, unlimited Telehealth consultations and optional payment processing at 1.5% + 25c per transaction.</p>
          </div>
          <a href="#" onclick="upgrade_plan(plan_id=2,plan_type='monthly')" data-dismiss="modal" class="btn">Continue</a>
          </div>
      </div>
    </form>
  </div>
</div>

<div class="modal fade plan-modal" id="premium-modal-yearly"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <form action="" id="activateForm" method="get">
        <div class="modal-content">
            <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                       <span aria-hidden="true"><img style="" src='{{asset("assets/images/close-img.png")}}' alt="" class="img-fluid" /></span>
                    </button>
            <div class="section-title">
              <h2>Premium Plan</h2>
              <img src='{{asset("assets/images/Premium-plan.svg")}}' width="52" alt="" class="img-fluid">
              <p>You have chosen the My Appointments Premium plan with free SMS messages, unlimited Telehealth consultations and optional payment processing at 1.5% + 25c per transaction.</p>
            </div>
            <a href="#" onclick="upgrade_plan(plan_id=3,plan_type='yearly')" data-dismiss="modal" class="btn">Continue</a>
            </div>
        </div>
      </form>
    </div>
  </div>

<div class=" login-modal clientintakeModal customscroll clientabpopup invoicemodal">
    <div class="modal fade AddCardModalPopup" id="PayNowForCaledarPurchaseModal" tabindex="-1" role="dialog">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="popup-marg">
            <div class="modal-header">
              <h5 class="modal-title text-center eagle-font paytitle ">Pay today</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true"><img src='{{asset("assets/images/close-img.png")}}' alt="" class="img-fluid"></span>
              </button>
            </div>
            <div class="modal-body p-0">
              <form id="paid_plan_latpay_from">
                <div id="payment-meth-main" class="mCustomScrollbar">
                  <div class="shipping-method-area comm-form">
                    <div class="payment-meth-box mt-30">
                      <p class="payment-amount"></p>
                    </div>

                    <hr />

                    {{-- <p class="hidewhennomerchantid mb-3">Today's payment will be calculated on a pro-rata basis to take you up to your next billing cycle. You have <span id="number_of_days_left"></span> days before your next billing date</p> --}}
                    <p class="hidewhennomerchantid mb-3">You will be billed every 30 days. No lock in contracts, cancel anytime.</p>

                    <input type="hidden" name="payment_option_type" value="">
                    <div class="payment-card-main" style="display:none" id="ifNoCardFound">
                      <input type="hidden" name="calendarRequested" id="calendarRequested" value="">
                      <input type="hidden" name="paid_amount" id="paid_amount" value="">
                      <input type="hidden" name="is_reactivate" id="is_reactivate" value="0">
                      <input type="hidden" name="upgade_plan" id="upgade_plan" value="1">
                      <input type="hidden" name="plan_type" id="plan_type" value="0">
                      <input type="hidden" name="old_plan_id" id="old_plan_id" value="{{$myPlan->plan_id ?? ""}}">
                      <input type="hidden" name="plan_id" id="plan_id" value="0">
                      <input type="hidden" name="calendar_id" id="calendar_id" value="0">
                      <input type="hidden" name="total_calendars" id="total_calendars" value="1">
                      <input type="hidden" name="is_calendar" id="is_calendar" value="0">
                      <input type="hidden" name="isSubscribed" id="isSubscribed" value="">
                      <input type="hidden" name="paybleAmount" id="paybleAmount" value="">
                      <input type="hidden" name="latpayAmount" id="latpayAmount" value="">
                      <input type="hidden" name="latpayUserFirstName" value="{{ $practitioner->first_name }}">
                      <input type="hidden" name="latpayUserLastName" value="{{ $practitioner->last_name }}">
                      <input type="hidden" name="latpayUserEmail" value="{{ $practitioner->email }}">
                      <input type="hidden" name="merchant_id" value="{{ $settings->merchant_id }}">
                      <input type="hidden" name="merchant_password" value="{{ $settings->merchant_password }}">
                      <input type="hidden" name="merchant_public_key" value="{{ $settings->merchant_public_key }}">
                      <input type="hidden" name="cardHolderName" value="{{ $practitioner->first_name.' '.$practitioner->last_name }}">
                      <input type="hidden" name="practitioner_id" value="{{ $practitioner->id }}">
                      @csrf
                      <div id="latpay-element"> </div>
                      <center><input style="display: none;" type="submit" id="button-confirm" class="btn btn-success" value="Pay"></center>
                    </div>

                    <div class="choose-saved-card" style="display:none" id="ifCardFound">
                      <p class="removeforinvoice">Choose payment method</p>
                      <div id="appendPaymentCard"></div>
                    </div>

                    <a href="#" class="addNewCartForSubscription add-new-cart-link" role="button">Add a new card</a>

                  </div>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button id="planPaymentButton" type="button" class=" mt-0 btn-fill cursor-pointer w-100 d-block">Process payment</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
{{-- <script src="https://stopthebill.com.au/default/js/jquery.min.js"></script> --}}
<script src="https://lateralpayments.com/checkout/scripts/latpay2.js"></script>

<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>
<script>
    var practitioner_id = "{{ $practitioner->id }}";
    function upgrade_plan(plan_id,plan_type){
        if(plan_id == 1){
            $.ajax({
                type: "POST",
                dataType: "JSON",
                url: "{{ route('practitioner.team.downgradeplan') }}",
                data: {
                status:'deactivate',
                plan_id: plan_id,
                flag: 'expired',
                _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    if(response.status == 'success'){
                        swal.fire({
                            icon: 'success',
                            title: 'Starter plan chosen',
                            focusConfirm: false,
                            iconColor: '#f7bb85',
                        });
                        window.setTimeout(function() {
                            var existingCalendars_count = @json($existingCalendars);
                            if(existingCalendars_count > 0){
                                window.location.href = "{{ route('practitioner.freeplanbilling') }}";
                            }else{
                                window.location.href = "{{ route('practitioner.appointments.index') }}";
                            }
                        }, 2000);
                    }else{
                        Swal.fire({
                        icon: "error",
                        title: 'Something went wrong',
                        showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                        },
                        hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                        }
                    });
                    }                
                }
            });
        } else{
            var existingCalendars_count = @json($existingCalendars);
            if(existingCalendars_count > 0){
                $.ajax({
                type: "POST",
                dataType: "JSON",
                url: "{{ route('practitioner.team.downgradeplan') }}",
                data: {
                status:'deactivate',
                plan_id: plan_id,
                flag: 'expired',
                _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    if(response.status == 'success'){
                        window.location.href = "{{ route('practitioner.freeplanbilling') }}";
                    }else{
                        Swal.fire({
                        icon: "error",
                        title: 'Something went wrong',
                        showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                        },
                        hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                        }
                    });
                    }                
                }
            });
             return false;
            }
            var user= @json($practitioner);
            var plan= @json($plan);
            var settings= @json($settings);
            // var user= btoa(user.id);
            // var upgrade_route = "{{ url('upgrade-plan')}}/"+user;
            // window.location.href =  upgrade_route;
            if(plan_id == 3)
            {
                var yearlyPlan= @json($yearly_plan ?? null);
                if(yearlyPlan == null){
                    var yearly_plan_price = 397;
                }else{
                    var yearly_plan_price = yearlyPlan.price ?? 397;
                }
                $('.payment-amount').text("Pay today : $"+yearly_plan_price);
                $('#paid_amount').val(yearly_plan_price);
                $("#paybleAmount").val(yearly_plan_price);
                $("#latpayAmount").val(yearly_plan_price);
                $('#upgade_plan').val($('input[name="upgade_plan"').val());
                $('#plan_type').val(plan_type);
                $('#plan_id').val(3);
            }else
            {
                $('.payment-amount').text("Pay today : $" + plan.price + "");
                $('#paid_amount').val(plan.price);
                $("#paybleAmount").val(plan.price);
                $("#latpayAmount").val(plan.price);
                $('#upgade_plan').val($('input[name="upgade_plan"').val());
                $('#plan_type').val('monthly');
                $('#plan_id').val(2);
            }
         

            $('#latpay-element').empty();
            var merchantId = settings.merchant_id;
            var publickey = settings.merchant_public_key;

            var url = "{{route('get.practitioner.getPaymentCard',':id')}}";
            url = url.replace(':id', user.id);

            LatpayCheckout.open({
                merchantid: merchantId,
                publickey: publickey,
                merchantuserid: merchantId,
                'status': function(status) {
                if (status == 'success') {
                    $.ajax({
                    url: url,
                    type: 'get',
                    }).done(function(response) {

                    $("#service-provider-modal").modal("hide");
                    $('#PayNowForCaledarPurchaseModal').modal('show');

                    if (response.status == 'success') {
                        $("#appendPaymentCard").empty();
                        $.each(response.data, function(key, value) {
                        var html = '';
                        var checkDefault = '';
                        var src = '{{asset("assets/images/credit-img/visa-card.png")}}';
                        if (value.card_type == 'MASTERCARD') {
                            src = '{{asset("assets/images/credit-img/master-card.png")}}';
                        } else if (value.card_type == 'VISA') {
                            src = '{{asset("assets/images/credit-img/visa-card.png")}}';
                        }

                        if (value.is_for_monthly_payment == 1) {
                            checkDefault = 'Checked';
                        }
                        html += '<div class="popup-more-filter "> <div class="popup-label position-relative"> <div class="custom-control custom-checkbox"> <input ' + checkDefault + ' type="radio" class="custom-control-input shipping_charge payment_option" value="' + value.card_token + '" name="choose-card" id="' + value.card_token + '"> <label class="custom-control-label" for="' + value.card_token + '"> <span><img class="img-fluid" src="' + src + '"></span> •••• •••• •••• ' + value.card_no + ' </label> </div> <button type="button" class="close d-none removeclientcard" data-cardid=' + value.id + ' aria-label="Close"><span aria-hidden="true">&times;</span></button> </div> </div>';
                        $("#appendPaymentCard").append(html);
                        });

                        if ($("input[name='LatPayflag']").val() == 'create_invoice_new') {
                        $(".removeclientcard").removeClass('d-none');
                        }
                        $('#ifNoCardFound').css('display', 'none');
                        $('#ifCardFound').css('display', 'block');
                        $('.addNewCartForSubscription').css('display', 'block');
                    } else {


                        $('#ifNoCardFound').css('display', 'block');
                        $('#ifCardFound').css('display', 'none');
                        $('.addNewCartForSubscription').css('display', 'none');
                    }
                    });
                } else {
                    if (merchantId) {
                    var title = 'Invalid merchant id, please contact administrator.';
                    } else {
                    if ($("input[name='LatPayflag']").val() != 'create_invoice_new') {
                        title = 'Details not found for this merchant, please contact administrator.';
                    }
                    }
                    if (title) {
                    Swal.fire({
                        icon: "error",
                        title: title,
                        showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                        },
                        hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                        }
                    });
                    } else {
                    $('#PayNowForCaledarPurchaseModal').modal('show');
                    }
                }
                }
            });
        } 
    }

    $('#planPaymentButton').on('click', function (e) {
    //$(document).on('click', '#planPaymentButton', function(e) {
        console.log("click _planPaymentButton");
        if ($("input[name='paybleAmount']").val() == '') {
            Swal.fire({
            title: '',
            text: "Please add amount to pay",
            icon: 'warning',
            showCancelButton: false,
            confirmButtonText: 'Ok',
            });
            return false;
        }

        var checkval = $('input[name="payment_option_type"]').val();

        if ($('input[name="payment_option_type"]').val() == '' && $("input[name='choose-card']:checked").val() == undefined && $("#appendPaymentCard").html() !== "") {
        Swal.fire({
            title: '',
            text: "Please select a payment method",
            icon: 'warning',
            showCancelButton: false,
            confirmButtonText: 'Ok',
        });
        return false;
        }

        $("input[name='cardHolderName']").val($("#lpscardcardholder").val());
        var val = $("input[name='choose-card']:checked").val();

        if (val) {
        callLatpayForCardSubscription(val);
        } else {
        LatpayCheckout.processpayment({
            "amount": $("input[name='latpayAmount']").val(),
            "currency": "AUD",
            "reference": "3811b2a16309ba9f20d8e51ebce782b8a09962eb",
            "description": "3811b2a16309ba9f20d8e51ebce782b8a09962eb",
            "firstname": $("input[name='latpayUserFirstName']").val(),
            "lastname": $("input[name='latpayUserLastName']").val(),
            "email": $("input[name='latpayUserEmail']").val(),
            "status": function(status) {
            if (status == "success") {
                $(".loading").show();
                var TransToken = $('#TransToken').val();

                //Once you got the transtoken, submit the latpay_from by using jquery.
                if (TransToken) {
                callLatpayForNewSubscription();
                }
            } else {
                $(".loading").hide();
                $("#button-confirm").val('Submit Payment');
                e.preventDefault();
            }
            }
        });
        }
    });

            // If card already saved and choosen from saved card
    function callLatpayForCardSubscription(val) {
    $(".loading").show();
    var user= @json($practitioner);
    var formData = new FormData();
    formData.append('is_calendar', $('input[name="is_calendar"').val());
    formData.append('plan_id', $('input[name="plan_id"').val());
    formData.append('old_plan_id', $('input[name="old_plan_id"').val());
    formData.append('upgade_plan', $('input[name="upgade_plan"').val());
    formData.append('plan_type', $('input[name="plan_type"').val());
    formData.append('paid_amount', $('input[name="paid_amount"').val());
    formData.append('calendar_id', $('input[name="calendar_id"').val());
    formData.append('is_reactivate', $('input[name="is_reactivate"').val());
    formData.append('total_calendars', $('input[name="total_calendars"').val());
    formData.append('isSubscribed', $('input[name="isSubscribed"').val());
    formData.append('calendarRequested', $('input[name="calendarRequested"').val());
    formData.append('latpayAmount', $('input[name="latpayAmount"').val());
    formData.append('latpayUserFirstName', $('input[name="latpayUserFirstName"').val());
    formData.append('latpayUserLastName', $('input[name="latpayUserLastName"').val());
    formData.append('latpayUserEmail', $('input[name="latpayUserEmail"').val());
    formData.append('merchant_id', $('input[name="merchant_id"').val());
    formData.append('merchant_password', $('input[name="merchant_password"').val());
    formData.append('merchant_public_key', $('input[name="merchant_public_key"').val());
    formData.append('cardToken', val);
    formData.append('practitioner_id', user.id);

    $.ajax({
        url: "{{route('practitioner.latpayPaymentUpgradePlan')}}",
        data: formData,
        type: 'POST',
        contentType: false,
        processData: false,
    }).done(function(response) {
        // $(".loading").hide();
        if (response.status == "success") {
        callAfterLatpaySubscriptionSuccess();
        } else {
        $(".loading").hide();
        if (response.status_code == "1003") {
            Swal.fire({
            icon: 'warning',
            title: 'Transaction limit exceeded',
            text: "Amount cannot exceed $1000",
            showClass: {
                popup: 'animate__animated animate__fadeInDown'
            },
            hideClass: {
                popup: 'animate__animated animate__fadeOutUp'
            }
            });
        } else {
            if (response.status_code == "14" || response.status_code == "54" || response.status_code == "82") {
            $(".latpay-error").html('<span style="color:red">' + response.msg + '</span>');
            } else {
            Swal.fire({
                icon: response.status,
                //title: 'Error!',
                //text: response.msg,
                title: 'Unable to process card payment',
                text: 'Please check card details & try again',
                showClass: {
                popup: 'animate__animated animate__fadeInDown'
                },
                hideClass: {
                popup: 'animate__animated animate__fadeOutUp'
                }
            });
            }
        }
        }
    });
    }

        // Payment with new card and save it as default card to make monthly payment
    function callLatpayForNewSubscription() {
        $(".loading").show();
        var modal = $("#PayNowNew");

        $.ajax({
        url: "{{route('practitioner.latpayPaymentUpgradePlan')}}",
        data: $('#paid_plan_latpay_from').serialize(),
        type: 'POST',
        }).done(function(response) {
        $(".loading").hide();
        if (response.status == "success") {
            callAfterLatpaySubscriptionSuccess();
        } else {
            if (response.status_code == "1003") {
            Swal.fire({
                icon: 'warning',
                title: 'Transaction limit exceeded',
                text: "Amount cannot exceed $1000",
                showClass: {
                popup: 'animate__animated animate__fadeInDown'
                },
                hideClass: {
                popup: 'animate__animated animate__fadeOutUp'
                }
            });
            } else {
            if (response.msg == "Prescreen Failed") {
                Swal.fire({
                icon: "error",
                title: "Invalid Card",
                text: "Please check the card details and try again",
                showClass: {
                    popup: 'animate__animated animate__fadeInDown'
                },
                hideClass: {
                    popup: 'animate__animated animate__fadeOutUp'
                }
                });
            } else {
                if (response.status_code == "14" || response.status_code == "54" || response.status_code == "82") {
                $(".latpay-error").html('<span style="color:red">' + response.msg + '</span>');
                } else {
                Swal.fire({
                    icon: response.status,
                    //title: 'Error!',
                    //text: response.msg,
                    title: 'Unable to process card payment',
                    text: 'Please check card details & try again',
                    showClass: {
                    popup: 'animate__animated animate__fadeInDown'
                    },
                    hideClass: {
                    popup: 'animate__animated animate__fadeOutUp'
                    }
                });
                }
            }
            }
        }
        });
    }
    
    function callAfterLatpaySubscriptionSuccess() {
        var calenders = $('input[name="no_of_calendars"]').val();
        var paid_amount = $('input[name="paid_amount"').val();
        var upgade_plan = $('input[name="upgade_plan"').val();
        var old_plan_id = $('input[name="old_plan_id"').val();
        var plan_type = $('input[name="plan_type"').val();
        $.ajax({
          type: "POST",
          url: "{{ route('practitioner.latpayPaymentUpgradeSuccess') }}",
          data: {
            id: practitioner_id,
            paid_amount:paid_amount,
            upgade_plan:upgade_plan,
            old_plan_id:old_plan_id,
            plan_type:plan_type,
            isSubscribed: $("#isSubscribed").val(),
            calendarRequested: $("#calendarRequested").val()
          },
          success: function(response) {
            $(".loading").hide();
            if (response.error == false) {
              Swal.fire({
                icon: 'success',
                //title: response.msg,
                title: 'Premium plan chosen',
                timer: 2000,
                showClass: {
                  popup: 'animate__animated animate__fadeInDown'
                },
                hideClass: {
                  popup: 'animate__animated animate__fadeOutUp'
                },
                confirmButtonText: 'Ok',
              });
              var existingCalendars_count = @json($existingCalendars);
              if(existingCalendars_count > 0){
                window.location.href = "{{ route('practitioner.freeplanbilling') }}";
              }else{
                window.location.href = "{{ route('practitioner.appointments.index') }}";
              }
           
            } else {
              Swal.fire({
                icon: 'error',
                title: 'Error!',
                text: response.message,
                showClass: {
                  popup: 'animate__animated animate__fadeInDown'
                },
                hideClass: {
                  popup: 'animate__animated animate__fadeOutUp'
                }
              });
            }
          }
        });
      }
    
</script>

@endsection