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


@include('front.practitioner.plans.payment_model')


<div class="dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-wrapper my-plan-page">
      @if(isset($myPlan) && $myPlan->is_unsubscribed == 1 && $practitioner->status == 'active')
        <div class="container-fluid">
          <div class="row justify-content-center">
            <div class="myplans-table treatment-note-templates">
                <div class="dr-table communication-table unpaid-invoices-table my-plan-tbale-outer-c" id="myplans-table1">
                  <div class="table-responsive">
                    @if(isset($myPlan) && $myPlan->is_unsubscribed == 1 && $myPlan->is_downgrade_account == 1 && $myPlan->downgrade_plan_id == 2)
                      <table class="table table-striped">
                        <thead class="head-brdr">
                            <tr>
                              <th class="align-middle white-space-nowrap">Account downgrade pending<br><span class="font-w-400">At the end of your current billing cycle, your account will downgrade from yearly to monthly billing</span></th>
                                <th class="align-middle white-space-nowrap "><a id="reinstate_account" style="color:#45747a;">Cancel downgrade</a></th>
                            </tr>
                        </thead>
                      </table>
                    @elseif (isset($myPlan) && $myPlan->is_unsubscribed == 1 && $myPlan->is_downgrade_account == 1 && $myPlan->downgrade_plan_id == 1)
                    <table class="table table-striped">
                      <thead class="head-brdr">
                          <tr>
                            <th class="align-middle white-space-nowrap">Account downgrade pending<br><span class="font-w-400">At the end of your current billing cycle, your account will downgrade from the Premium plan to Starter plan</span></th>
                              <th class="align-middle white-space-nowrap "><a id="reinstate_account" style="color:#45747a;">Cancel downgrade</a></th>
                          </tr>
                      </thead>
                    </table>
                    @else
                      <table class="table table-striped">
                        <thead class="head-brdr">
                            <tr>
                              <th class="align-middle white-space-nowrap">Account closure pending<br><span class="font-w-400">Your account will automatically close at the end of your current billing cycle.</span></th>
                                <th class="align-middle white-space-nowrap "><a id="reinstate_account" style="color:#45747a;">Reinstate account</a></th>
                            </tr>
                        </thead>
                      </table>
                    @endif
                 </div>
                </div>
          </div>
        </div> 
      @endif
        <div class="row justify-content-center">
            <div class="myplans-table treatment-note-templates">
                <div class="dr-table communication-table unpaid-invoices-table" id="myplans-table1">
                  <div class="table-responsive">
                    <table class="table table-striped">
                      <thead class="head-brdr">
                          <tr>
                            <th class="align-middle white-space-nowrap">Your plan<br><span class="font-w-400"> @isset($myPlan) @if ($myPlan->plan_id == 1) Starter @else Premium  @endif @endisset</span></th>
                            <th class="align-middle white-space-nowrap">Additional service provider/ s<br><span class="font-w-400">@isset($ServiceProvider) {{count($ServiceProvider)}} @endisset</span></th>
                            <th class="align-middle white-space-nowrap">Cost<br><span class="font-w-400">@isset($cal_plna_calculation)${{floatval($cal_plna_calculation)}}@endisset @if ($myPlan->plan_id == 3) pa @else pm  @endif</span></th>
                              {{-- @if($myPlan_history->is_pay == 0) --}}
                              @if(count($ServiceProvider) == 0 &&  $parent->is_trial_over == 1 && $myPlan->plan_id == 1)
                                <th class="align-middle white-space-nowrap">Renews<br><span class="font-w-400">Ongoing</span></th>
                              @elseif($parent->is_trial_over == 0)
                                <th class="align-middle white-space-nowrap">Trial expires<br><span class="font-w-400">{{date('d/m/Y', strtotime($end_date))}}</span></th>
                              @elseif($myPlan_history->is_pay == 1)
                                <th class="align-middle white-space-nowrap">Renews<br><span class="font-w-400">{{date('d/m/Y', strtotime($end_date))}} AEST</span></th>
                              {{-- <th class="align-middle white-space-nowrap">@isset($myPlan_history) @if($myPlan_history->is_pay == 0)Trial expires @elseif($myPlan_history->is_pay == 1) Renewes @else '' @endif @endisset<br><span class="font-w-400">@isset($myPlan_history) @if(!empty($myPlan_history)) {{date('d/m/Y', strtotime($myPlan_history->end_date_time))}}@endif @endisset</span></th> --}}
                              @else
                            @endif
                            @if(isset($myPlan) && $myPlan->is_unsubscribed != 1 )
                              @if(isset($myPlan) && $myPlan->plan_id == 1)
                                <th class="align-middle white-space-nowrap "><a href="{{route('practitioner.close_account')}}" style="color:#45747a;">Cancel subscription</a></th>
                              @else
                                <th class="align-middle white-space-nowrap "><a href="{{route('practitioner.cancel_subscription')}}" style="color:#45747a;">Downgrade plan</a></th>
                              @endif
                            @endif
                          </tr>
                      </thead>
                    </table>
                  </div>
                </div>
              </div>
        </div>  
        <div class="row justify-content-center">
    
                  
            <div class="myplans-table treatment-note-templates pt-sm-5 pt-4">
              @isset($ServiceProvider)
              @if(count($ServiceProvider) != 0) 
                <div class="dr-table communication-table unpaid-invoices-table" id="myplans-table">
                  
                <div class="table-responsive">
                    <table class="table table-striped">
                      <thead class="head-brdr">
                          <tr>
                              <th style="width:5%"></th>
                              <th class="align-middle white-space-nowrap">Service Provider</th>
                              <th class="align-middle white-space-nowrap">Profession</th>
                              <th class="align-middle white-space-nowrap">Status</th>
                              <th class="align-middle white-space-nowrap"></th>
                              {{-- <th style="width:5%"></th> --}}
                          </tr>
                      </thead>
                    <tbody id="tablecontents" class="ui-sortable">
                      <tr class="row1" data-id="">
                        <td><img src="{{asset('assets/images/myplan-user-image.png')}}" alt="" class="img-flude" style="min-width: 40px"></td>
                        <td class="align-middle hover-tbold" style="text-transform:capitalize;">{{$parent->first_name.' '.$parent->last_name}}</td>
                        <td class="align-middle" style="text-transform:capitalize;">{{getProfessionHelper($parent->id) == 'Not specified' ?'Administrator': getProfessionHelper($parent->id)}}</td>
                        <td class="align-middle" style="text-transform:capitalize;">Business owner</td>
                      </tr>
                        @foreach ($ServiceProvider as $ServiceProviders)
                            {{-- <tr class="row1" data-id="">
                                <td><img src="{{asset('assets/images/myplan-user-image.png')}}" alt="" class="img-flude" style="min-width: 40px"></td>
                                <td class="align-middle hover-tbold">Jenny Gleeson</td><td class="align-middle">Naturopath</td>
                                <td class="align-middle" style="text-transform:capitalize;">Business owner</td>
                                
                                <td></td>
                            </tr> --}}
                            <tr class="row1" data-id="">
                                <td><img src="{{asset('assets/images/myplan-user-image.png')}}" alt="" class="img-flude" style="min-width: 40px"></td>
                                <td class="align-middle hover-tbold" style="text-transform:capitalize;@if($ServiceProviders->status == 'deactivate')color: #898989;@endif">{{$ServiceProviders->first_name.' '.$ServiceProviders->last_name}}</td>

                                <td class="align-middle" style="text-transform:capitalize;@if($ServiceProviders->status == 'deactivate')color: #898989;@endif">@if ($ServiceProviders->assign_calenders_id == '' || $ServiceProviders->assign_calenders_id == null)Unassigned @else {{getProfessionHelper($ServiceProviders->assign_calenders_id) == 'Not specified' ?'Administrator': getProfessionHelper($ServiceProviders->assign_calenders_id)}} @endif</td>

                                <td class="align-middle" style="text-transform:capitalize;@if($ServiceProviders->status == 'deactivate')color: #898989;@endif">@if ($ServiceProviders->status == 'deactivate')deactivated @else{{$ServiceProviders->status}} @endif</td>
                                @if($ServiceProviders->status == 'active')
                                  <td class="m-auto-center"><a href="#" id="deactivate" onclick="fireSweetAlert({{$ServiceProviders->id}})" class="btn btn-fill" data-id ="{{$ServiceProviders->id}}" data-toggle="modal">Deactivate</a></td>
                                @endif
                                @if($ServiceProviders->status == 'deactivate')  
                                  <td class="m-auto-center"><a href="#" id="reactivate" onclick="reactivated_user({{$ServiceProviders->id}})"class="btn btn-unfill" data-id ="{{$ServiceProviders->id}}" data-toggle="modal">Reactivate</a></td>
                                @endif
                                @if($ServiceProviders->status == 'pending' || $ServiceProviders->status == 'unassigned')
                                  <td>
                                      <div class="dropdown three-dot-dropdown"><a href="#" class="dropdown-toggle three-dot-menu m-auto-center" data-toggle="dropdown"><span></span><span></span><span></span></a>
                                          <div class="dropdown-menu min-width-90" style="left: 35%;">
                                            @if($ServiceProviders->status == 'pending')
                                              @if($ServiceProviders->assign_calenders_id != '' && $ServiceProviders->assign_calenders_id != null)
                                                                                                <a class="dropdown-item cursor-pointer" href="{{ route( 'practitioner.business.editTeamMember',[$id,'cel_id'=>$cel_id]) }}">Edit</a>
                                              @else
                                                <a class="dropdown-item cursor-pointer assignPlan" data-id="{{$ServiceProviders->id}}" href="javascript:void(0)" data-toggle="modal" data-target="edit-plan-modal">Assign</a>
                                              @endif
                                            @else
                                              <a class="dropdown-item cursor-pointer assignPlan" data-id="{{$ServiceProviders->id}}" href="javascript:void(0)" data-toggle="modal" data-target="edit-plan-modal">Assign</a>
                                            @endif
                                              <a id="60" onclick="fireSweetAlert({{$ServiceProviders->id}})" class="dropdown-item cursor-pointer remove-custom-time deactivatePlan" href="#">Deactivate</a>
                                          </div>
                                      </div>
                                  </td>
                                @endif
                            </tr>
                        @endforeach
                        {{-- <tr class="row1" data-id="">
                            <td><img src="{{asset('assets/images/myplan-user-image.png')}}" alt="" class="img-flude" style="min-width: 40px"></td>
                            <td class="align-middle hover-tbold">Stacey Hugh</td><td class="align-middle">Naturopath</td>
                            <td class="align-middle" style="text-transform:capitalize;">Active</td>
                            <td class="m-auto-center"><a href="#AddServiceModal" id="add-service" class="btn btn-fill" data-toggle="modal">Deactivate</a></td>
                        </tr>
                        <tr class="row1" data-id="">
                            <td><img src="{{asset('assets/images/myplan-user-image.png')}}" alt="" class="img-flude" style="min-width: 40px"></td>
                            <td class="align-middle hover-tbold">lenny Bronx</td><td class="align-middle">Naturopath, Nutritionist</td>
                            <td class="align-middle" style="text-transform:capitalize;">Deactivate</td>
                            <td class="m-auto-center"><a href="#AddServiceModal" id="add-service" class="btn btn-unfill" data-toggle="modal">Reactivate</a></td>
                        </tr> --}}
                    </tbody>
                    </table>
                </div>
                </div>
                @endif
                @endisset
                
            </div>
            

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

<div class="price-outer-div my-plan-page">

    <div class="container">
      @if(isset($myPlan) && ($myPlan->plan_id == 1))
        <div class="row">
            <div class="switch-btn-outer">
                <span class="monthly-span">Monthly</span>
                <label class="switch" id="subscription_switch">
                    <input type="checkbox" name="subscription" id ="subscription" value="" >
                    <span class="slider round"></span>
                </label>
                <span class="annually-span">Annually</span>
              </div>
        </div>
      @endif
        <div class="row row justify-content-center">

            <div class="col-md-4 monthly @isset($myPlan) @if ($myPlan->plan_id == 1) @else d-none @endif @endisset">
                <div class="priceing-boxes @isset($myPlan) @if ($myPlan->plan_id == 1) priceing-boxes-active @endif @endisset">
                    <div class="priceing-tag">
                        <h3>STARTER</h3>
                        <h4>$0</h4>
                        <h3 class="light_gray">PER MONTH</h3>
                    </div>
                    <div class="list-of-services">
                        <ul>
                            <li>Additional service providers $22pm</li>
                            <li>SMS Messages 15c</li>
                            <li>Telehealth from 16.5c per 15 minute block</li>
                            <li>Online payment processing 1.7% + 25c</li>
                            <li>Terminal payment processing 1.5% + 25c</li>
                            {{-- <li>Health fund rebates</li> 
                            <li>Treatment packages</li>
                            <li>Classes & Events</li>
                            <li>Gift Vouchers</li>
                            <li>Online store</li> --}}  
                        </ul>
                    </div>
                    <div class="upgrde-plan-btn">
                        <a style="color: #ffffff;cursor: pointer;" @isset($myPlan) @if ($myPlan->plan_id == 1) @else onclick="upgrade_plan(plan_id=1,plan_type='free')" @endif @endisset>@isset($myPlan) @if ($myPlan->plan_id == 1) Current Plan @else Downgrade Plan @endif @endisset</a>
                    </div>
                </div>
            </div>

            <div class="col-md-4 monthly @isset($myPlan) @if ($myPlan->plan_id == 2 || $myPlan->plan_id == 1) @else d-none @endif @endisset">
                <div class="priceing-boxes @isset($myPlan) @if ($myPlan->plan_id == 2) priceing-boxes-active @endif @endisset">
                    <div class="priceing-tag">
                        <h3>PREMIUM</h3>
                        <h4>$39</h4>
                        <h3 class="light_gray">PER MONTH</h3>
                    </div>
                    <div class="list-of-services">
                        <ul>
                            <li>Additional service providers $15pm</li>
                            {{-- <li>75 free SMS per month</li> --}}
                            <li>75 free SMS per month</li>
                            <li>Unlimited Telehealth</li>
                            <li>Online payment processing 1.5% + 25c</li>
                            <li>Terminal payment processing 1.5% + 25c</li>
                            <li>Credit card authorisation<span class="sms_first_text review-post font-13"></span>
                              <span class="notify_credit_btn cursor-pointer info-btn">
                                <img style="" src='{{asset("assets/images/information-icon-blue.svg")}}' alt="" class="img-fluid info-img" />
                                <div class="send-client-box-geo notify_credit_toggle">
                                  <div class="media">
                                    <img src='{{asset("assets/images/information-icon-blue.svg")}}' class="img-fluid" alt="...">
                                    <div class="media-body">
                                      <h5 class="mt-0 text-left">
                                        Optional. Clients will be required to secure their booking with a credit card. No payment is taken at the time of booking.
                                      </h5>
                                    </div>
                                  </div>
                                </div>
                              </span>
                            </li>
                            <li>Online health fund rebates</li>
                            <li>Calendar Sync</li>
                            <li>Gift vouchers</li>
                            <li>Email broadcasts</li>
                            <li>Email recalls</li>
                            <li>Dedicated virtual SMS number</li>
                            {{-- <li>Treatment packages</li>
                            <li>Classes & Events</li>
                            <li>Online store</li> --}}
                        </ul>
                    </div>
                    <div class="upgrde-plan-btn">
                        <a style="color: #ffffff;cursor: pointer;" @isset($myPlan) @if ($myPlan->plan_id == 2) @else onclick="upgrade_plan(plan_id=2,plan_type='monthly')" @endif @endisset>@isset($myPlan) @if ($myPlan->plan_id == 2) Current Plan @else Upgrade Plan @endif @endisset</a>
                    </div>
                </div>
            </div>
              <div class="col-md-4 annually"@isset($myPlan) @if ($myPlan->plan_id == 1) style="display:none;"@endif @endisset>
              <div class="priceing-boxes">
                <div class="offer-round-box">
                  <span class="offer-cat">Save</span>
                  <span class="offer-price">$71</span>
                </div>
                  <div class="priceing-tag">
                      <h3>PREMIUM</h3>
                      <h4>$397</h4>
                      <h3 class="light_gray">ANNUALLY</h3>
                  </div>
                  <div class="list-of-services">
                      <ul>
                        {{-- <li>Additional service providers $15pm</li>
                        <li>75 free SMS per user per month</li> --}}
                        {{-- <li>Additional SMS 9c each</li> --}}
                        <li>Additional service providers $156 each p/a (Save $24)</li>
                        <li>900 free SMS per year</li>
                        <li>Unlimited Telehealth</li>
                        <li>Online payment processing 1.5% + 25c</li>
                        <li>Terminal payment processing 1.5% + 25c</li>
                        <li>Credit card authorisation<span class="sms_first_text review-post font-13"></span>
                          <span class="notify_credit_btn cursor-pointer info-btn">
                            <img style="" src='{{asset("assets/images/information-icon-blue.svg")}}' alt="" class="img-fluid info-img" />
                            <div class="send-client-box-geo notify_credit_toggle">
                              <div class="media">
                                <img src='{{asset("assets/images/information-icon-blue.svg")}}' class="img-fluid" alt="...">
                                <div class="media-body">
                                  <h5 class="mt-0 text-left">
                                    Optional. Clients will be required to secure their booking with a credit card. No payment is taken at the time of booking.
                                  </h5>
                                </div>
                              </div>
                            </div>
                          </span>
                        </li>
                        <li>Online health fund rebates</li>
                        <li>Calendar Sync</li>
                        <li>Gift vouchers</li>
                        <li>Email broadcasts</li>
                        <li>Email recalls</li>
                        <li>Dedicated virtual SMS number</li>
                          {{-- <li>Additional service providers $15pm</li>
                          <li>200 SMS messages per month</li>
                          <li>Telehealth included</li>
                          <li>Payment processing 1.5% + 25c</li>
                          <li>Health fund rebates</li>
                          <li>Treatment packages</li>
                          <li>Classes & Events</li>
                          <li>Gift Vouchers</li>
                          <li>Online store</li>
                          <li>2 way calendar sync</li> --}}
                      </ul>
                  </div>
                  <div class="upgrde-plan-btn">
                    <a style="color: #ffffff;cursor: pointer;" @isset($myPlan) @if ($myPlan->plan_id == 3) @else  onclick="upgrade_plan(plan_id=3,plan_type='yearly')" @endif @endisset>@isset($myPlan) @if ($myPlan->plan_id == 3) Current Plan @else Upgrade Plan @endif @endisset</a>
                  </div>
              </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <p class="text-center"><a target="_blank" href="https://myappointments.app/pricing/" class="bottom-text-css">View detailed pricing page</a></p>
          </div>
        </div>
    </div>

</div>




  @endsection

{{-- popup design start  --}}
  
@section('css')

<style>
  .offer-round-box {min-width: 80px;min-height: 80px;border-radius: 40px;background-color: #45747a;position: absolute; right: -18px; top: -30px; display: flex; flex-wrap: wrap;align-content: center;}
  .offer-cat {font-size: 15px; letter-spacing: 0px; line-height: 22px; color: #ffffff; font-weight: bold; text-align: center;width: 100%;}
  .offer-price {font-size: 27px;letter-spacing: 0px;line-height: 34px;color: #ffffff;font-weight: bold;text-align: center;width: 100%;}
   div.latpay-elements-field {padding: 10px 5px;}
   #latpay-element div.latpay-elements-field>label {font-size: 14px !important;color: #24303f !important;}
   div.latpay-elements-field > input {width: 100%;margin-top: 5px;border: 1px solid #d9d9d9;background: #fff !important;padding: 6px;font-size: 18px !important;color: grey !important;}
   i.latpay-credit-card-brand {position: absolute;right: 8%;margin-top: -37px;display: block;width: 30px;height: 24px;background: no-repeat url(https://www.latpay.com/wp-content/uploads/2020/06/credit-card.svg);}
   #latpay-element div.latpay-elements-field::before {content:"";position:absolute;top: 48px;left: 15px;}
   div#latpay-exp-element, div#latpay-cvc-element {width: 50%;}
   div.latpay-flex {display: flex;justify-content: space-between;padding-bottom: 5%;}
   #main-section{display: none;}
   .navbar{padding: 0rem 1rem;}
   .brdr-bttm{margin-bottom:10px;}
   .page-content {padding: 0;transition: .4s ease all;}
   .welcome-page-menu a.navbar-brand img{max-width:49px;margin: 8px 20px;}
   .welcome-page-menu a.btn{color:#457379;font-size: 16px;letter-spacing: 1px;margin:0px 20px 0px;}
   .dashspace-area .page-content{padding: 0;}
   .welcome-page-menu button{color:#457379;font-size:16px;background-color:transparent;}

    .right-side-nav-plan {
        width: 83%;
        text-align: right;
    }
    .font-w-400 {font-weight: 400;}
    .three-dot-dropdown .dropdown-menu.min-width-90 {width: 120px;}
    .swal2-icon.swal2-info ,.swal2-icon.swal2-info .swal2-icon-content {
        border-color: #f8ba85 !important;
        color: #f8ba85 !important;
    }
    .light-green {color: #45747a;}
    .swal2-icon-info .swal2-cancel, .swal2-icon-info .swal2-confirm {
    border: 1px solid #45b1b6!important;
    background: #45b1b6!important;
    }
    
    .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    margin: 0px 15px;
    }

    .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
    }

    .switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    }

    .switch .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    }
    .switch .slider:before {
      height: 11px;
      width: 11px;
    }
    .switch {
      width: 37px;
      height: 19px;
    }

    .switch input:checked + .slider {
    background-color: #67aeb5;
    }
    

    .switch input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
    }
    .switch input:checked + .slider:before {
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
    }

    /* Rounded sliders */
    .slider.round {
    border-radius: 34px;
    }

    .slider.round:before {
    border-radius: 50%;
    }
    .switch-btn-outer {
        display: flex;
        align-items: center;
        margin: 0 auto;
        margin-bottom: 30px;
    }
    
    .price-outer-div {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .priceing-boxes {
        border-radius: 5px;
        background-color: #ffffff;
        border: 2px solid #cecece;
        text-align: center;
        max-width: 390px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        align-content: flex-start;
        transition: .4s ease-in-out;
        /* min-height: 425px !important;
        max-height: 390px !important; */

        position: relative;
        height: 100%;
        padding-bottom: 50px;
    }
    .upgrde-plan-btn {
        position: absolute;
        bottom: 0;
    }
    .priceing-tag {padding-top: 20px;border-bottom: 0.5px solid #969696;padding-bottom: 15px;width: 100%;}
    .priceing-tag h3 {
        font-size: 15px;
        letter-spacing: 0px;
        line-height: 22px;
        color: #24303f;
        font-weight: bold;
    }
    .priceing-tag h3 {
        font-size: 15px;
        letter-spacing: 0px;
        line-height: 22px;
        color: #24303f;
        font-weight: bold;
    }
    .priceing-tag h3.light_gray{
        font-size: 13px;
        line-height: 34px;
        color: #969696;
    }
    .priceing-tag h4 {
        font-size: 27px;
        letter-spacing: 0px;
        line-height: 34px;
        color: #24303f;
        font-weight: bold;
    }
    .list-of-services {
        padding: 15px 0px;
        width: 100%;
        /* height: 100%; */
    }
    .list-of-services ul {margin: 0 0 0 0;padding: 0 0 0 0;}
    .list-of-services ul li {
        font-size: 13px;
        letter-spacing: 0px;
        line-height: 13px;
        color: #24303f;
        padding: 6px 0px;
    }
    .upgrde-plan-btn {
        width: 100%;
    }
    .upgrde-plan-btn a {
        font-size: 17px;
        letter-spacing: 0px;
        line-height: 25px;
        color: #ffffff;
        font-family: "Europa";
        text-align: center;
        padding: 15px 0px;
        width: 100%;
        display: flex;
        justify-content: center;
        background-color: #45747a;
    }
    
    .myplans-table .btn {
        transition: all .4s;
        min-width: 141px !important;
    }
    .m-auto-center{
    margin: 0 auto;
    text-align: center !important;
    }
    .priceing-boxes:hover {
        border-color: #45747a;
        
    }
    .priceing-boxes-active{
        border-color: #68afb5;
        
    }
    .my-plan-head-a {font-weight:normal}
    .myplans-table .btn {
        font-weight: normal;
    }
    .service-provider .modal-header {border: none;}
    .service-provider .modal-body {margin: 20px auto;}
    .service-provider-cost {
        margin: 30px 0px !important;
    }
    .bottom-text-css {
      font-size: 17px;
      letter-spacing: 0px;
      line-height: 94px;
      color: #45747a;
      text-align: center;
      margin-top: 20px;
      display: block;
    }
    .bottom-text-css:hover, .bottom-text-css:active ,.bottom-text-css:focus{
      color:#68afb5
    }
    .icon-color-custom-css {
      border-color: #527479 !important;
      color: #527479 !important;
    }
    
    .blue-t-color {color:#68afb5 !important;}
    .swal2-actions-custom-css button {
        margin-bottom: 30px;
        width: 100%;
        max-width: 391px;
        min-height: 39px;
    }
    .priceing-boxes-active .upgrde-plan-btn a{background-color: #68afb5;}
    @media (max-width: 991px){
        .treatment-note-templates {
            margin-top: 0px;
        }
        .payment-method-outer {margin-top: 50px;}
        .my-plan-page{
            padding-left: 15px;
            padding-right: 15px;
        }
    }
    @media (max-width: 767px){
        .priceing-boxes {
            margin-bottom: 30px;
        }
        .my-plan-head-a {width: 100%;margin-top: 15px !important;}
    }
    /* .taking-new-table, .service-new-table, .dr-table { border: 0.5px solid #45747a;} */
    .my-plan-tbale-outer-c { border: 0.5px solid #a4babd;}
    
    #myplans-table1.dr-table.unpaid-invoices-table.my-plan-tbale-outer-c .table th {    background-color: #f3f8f8;}
    .my-plan-tbale-outer-c {
        margin-bottom: 20px;
    }
    #myplans-table1.dr-table.unpaid-invoices-table.my-plan-tbale-outer-c .table th:after {display: none;}
    #myplans-table1.dr-table.unpaid-invoices-table.my-plan-tbale-outer-c .table th a{
        font-size: 17px;
        letter-spacing: 1px;
        line-height: 9px;
        color: #45747a;
        font-weight: bold;
        color: #45747a;
        border-radius: 5px;
        /* background-color: #68afb5; */
        max-width: 246px;
        border: 1px solid #45747a;
        padding: 8px 49px;
    }
    #myplans-table1.dr-table.unpaid-invoices-table.my-plan-tbale-outer-c .table th:last-child{
        text-align: right;
        padding-right: 30px !important;
        width: 32%;
    }
    #myplans-table1.dr-table.unpaid-invoices-table .table th a:hover {
      color: #fff !important;
      border: 1px solid #68afb5;
      background: #68afb5;
    }
    .dr-table.communication-table.unpaid-invoices-table.my-plan-tbale-outer-c tr th:first-child {
        padding-left: 30px !important;
    }

    .row .page-title {
      line-height: 1;
    }
    #myplans-table1.dr-table.unpaid-invoices-table .table th a {
        color: #45747a;
        font-size: 15px;
        letter-spacing: 1px;
        line-height: 9px;
        color: #45747a;
        font-weight: bold;
        border-radius: 5px;
        padding: 8px 20px;
        border: 1px solid #45747a;
    }
    .my-plan-tbale-outer-c .head-brdr {border: none;}
    #myplans-table1.dr-table.unpaid-invoices-table .table th:last-child{text-align: right;}
    #myplans-table .head-brdr {
      border-bottom: 0.5px solid #e4e4e4;
    }
    #myplans-table1.dr-table.unpaid-invoices-table.my-plan-tbale-outer-c .table th {
      font-size: 16px !important;
      letter-spacing: 0px;
      line-height: 30px;
      color: #45747a;
      font-weight: bold;
      white-space: normal !important;
    }
    .head-brdr {
      border-bottom: 0.5px solid #e4e4e4;
    }
</style>
@endsection

@section('import-scripts')

<script src="https://lateralpayments.com/checkout/scripts/latpay2.js"></script>

<script>
    var practitioner_id = "{{ $practitioner->id }}";
    equalheight = function(container){

    var currentTallest = 0,
        currentRowStart = 0,
        rowDivs = new Array(),
        $el,
        topPosition = 0;
    $(container).each(function() {

    $el = $(this);
    $($el).height('auto')
    topPostion = $el.position().top;

    if (currentRowStart != topPostion) {
        for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
        rowDivs[currentDiv].height(currentTallest);
        }
        rowDivs.length = 0; // empty the array
        currentRowStart = topPostion;
        currentTallest = $el.height();
        rowDivs.push($el);
    } else {
        rowDivs.push($el);
        currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
    }
    for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
        rowDivs[currentDiv].height(currentTallest);
    }
    });
    }

    $(window).load(function() {
        // equalheight('.priceing-boxes');
        // $('.slider').click(function () {
        //   equalheight('.priceing-boxes');
        // })
    });

    $(document).ready(function(){
        $(".assignPlan").click(function(){
            var cal_id = $(this).data('id');
            var enc = btoa(cal_id);
            var url = '{{ route("practitioner.business.addTeamMember", ":id") }}';
                url = url.replace(':id','id='+enc);
                window.location.href = url;
            // window.location.href = '{{ route("practitioner.business.addTeamMember") }}';
        });
    });
    $(document).ready(function(){
        count_amount();
        var subscription_plan_id = $('input[name="old_plan_id"').val();
        if(subscription_plan_id == 1){
          subscription(); 
        }
     
    });
    $(document).ready(function(){
      // $("#deactivate").click(function(){
      //   fireSweetAlert();
     
      // });
      // $("#reactivate").click(function(){
      //   reactivated_user();
      // });
      
    });
    const el = document.createElement('div')
    el.innerHTML = "From {{date('d/m/Y', strtotime($end_date))}}, they will no longer have an active calendar. If you wish to instantly block them from accessing their account, you can do so from the teams page. </br></br><a href='#' class='light-green'>Read more about deactivating team members</a><br><br>"

    // <a href='javascript:void(0);' id='deactive_user_popupbtn' class='btn btn-fill mb-3 my-auto'>Deactivate account</a>
    function fireSweetAlert(id) {
      $.ajax({
            type: "POST",
            dataType: "JSON",
            url: "{{ route('practitioner.team.getserviceprovider') }}",
            data: {
              id: id,
              _token: "{{ csrf_token() }}"
            },
            success: function(response) {
              if(response.status == 'success'){
                swal.fire({
                icon: 'info',
                title: 'Deactivate '+response.ser_pto_name+'?',
                iconColor: '#f7bb85',
                html: el,
                text: 'ddd',
                confirmButtonText: 'Deactivate account',
                focusConfirm: false,
                showCloseButton: true
              }).then((result) => {
              if (result.value) {
                 $.ajax({
                      type: "POST",
                      dataType: "JSON",
                      url: "{{ route('practitioner.team.deactivate') }}",
                      data: {
                        status:'deactivate',
                        id: id,
                        _token: "{{ csrf_token() }}"
                      },
                      success: function(response) {
                        if(response.status == 'success'){
                          swal.fire({
                              icon: 'success',
                              title: response.ser_pto_name + 'Deactivated',
                              focusConfirm: false,
                              iconColor: '#f7bb85',
                          });
                          window.setTimeout(function() {
                            location.reload()
                          }, 2000);
                        }else{
                          Swal.fire({
                          icon: "error",
                          title: 'Something went wrong',
                          showClass: {
                            popup: 'animate__animated animate__fadeInDown'
                          },
                          hideClass: {
                            popup: 'animate__animated animate__fadeOutUp'
                          }
                        });
                        }
                      
                      }
                    });
                  
                }
              });
              }
             
            }
          });
        
    }
    
    // function deactivated_user() {
    //   // var id = $('#deactivate').data('id');
     
        
    // }
    
    function reactivated_user(id) {
      $("#no_of_calendars").val(1);
      // var id = $('#reactivate').data('id');
      $.ajax({
            type: "POST",
            dataType: "JSON",
            url: "{{ route('practitioner.team.getserviceprovider') }}",
            data: {
               id: id,
              _token: "{{ csrf_token() }}"
            },
            success: function(response) {
              if(response.status == 'success'){
                const  custom_text_1 = document.createElement('div');
                  
                if(response.payment_status == 1){
                  custom_text_1.innerHTML = "The cost of this calendar will be $"+response.priceForSelectedCalendar+" per month<br><br>";
                  buttontext = 'Purchease calender';
                  swal.fire({
                    icon: 'question',
                    title: 'Reactivate '+response.ser_pto_name+'?',
                    html: custom_text_1,
                    iconColor: '#f7bb85',
                    text: 'ddd',
                    confirmButtonText: buttontext,
                    focusConfirm: false,
                    showCloseButton: true,
                    customClass: {
                    icon: 'icon-color-custom-css',
                    actions: 'swal2-actions-custom-css',
                  }
                    
                  }).then((result) => {
                    if (result.value) {
                      var no_of_calendars = $("#no_of_calendars").val();
                      $('#calendar_id').val(id);
                        $.ajax({
                          type: "POST",
                          dataType: "JSON",
                          url: "{{ route('practitioner.team.paymentCalculationAddCalendar') }}",
                          data: {
                            no_of_calendars: no_of_calendars,
                            _token: "{{ csrf_token() }}"
                          },
                          success: function(response) {
                            if (response.status == "success") {
                              var val = response.priceForSelectedCalendar;
                              var diffInDays = response.diffInDays;

                              var isSubscribed = response.is_subscribed;
                              $("#isSubscribed").val(isSubscribed);

                              var calendarRequested = response.calendarRequested;
                              $("#calendarRequested").val(calendarRequested);

                              var user = @json($parent);

                              $('.payment-amount').text("Pay today : $" + val + "");
                              $('#paid_amount').val(val);
                              $("#paybleAmount").val(val);
                              $("#latpayAmount").val(val);
                              $('#is_reactivate').val(1);
                              $('#latpay-element').empty();
                              var merchantId = $("input[name='merchant_id']").val();

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

                              LatpayCheckout.open({
                                merchantid: merchantId,
                                publickey: $("input[name='merchant_public_key']").val(),
                                merchantuserid: merchantId,
                                'status': function(status) {
                                  if (status == 'success') {
                                    $.ajax({
                                      url: url,
                                      type: 'get',
                                    }).done(function(response) {

                                      $("#service-provider-modal").modal("hide");
                                      $("#number_of_days_left").text(diffInDays);
                                      $('#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');
                                    }
                                  }
                                }
                              });
                            } else {
                              console.log(response);
                            }
                          }
                        })
                    }
                  })
                }else{
                  custom_text_1.innerHTML = "User will be assigned to your existing unassigned calendar<br><br>";
                  buttontext = 'Assign to calender';
                  swal.fire({
                  icon: 'question',
                  title: 'Reactivate '+response.ser_pto_name+'?',
                  html: custom_text_1,
                  iconColor: '#f7bb85',
                  text: 'ddd',
                  confirmButtonText: buttontext,
                  focusConfirm: false,
                  showCloseButton: true,
                  customClass: {
                    icon: 'icon-color-custom-css',
                    actions: 'swal2-actions-custom-css',
                  }
              })
              .then((result) => {
              if (result.value) {
                 $.ajax({
                      type: "POST",
                      dataType: "JSON",
                      url: "{{ route('practitioner.team.deactivate') }}",
                      data: {
                        status:'reactivate',
                        id: id,
                        _token: "{{ csrf_token() }}"
                      },
                      success: function(response) {
                        if(response.status == 'success'){
                          swal.fire({
                              icon: 'success',
                              title: response.ser_pto_name + 'Reactivated',
                              focusConfirm: false,
                              iconColor: '#f7bb85',
                          })
                          window.setTimeout(function() {
                            location.reload()
                          },2000);
                        }else{
                          Swal.fire({
                          icon: "error",
                          title: 'Something went wrong',
                          showClass: {
                            popup: 'animate__animated animate__fadeInDown'
                          },
                          hideClass: {
                            popup: 'animate__animated animate__fadeOutUp'
                          }
                        });
                        }
                      
                      }
                    });
                  
                }
              });
                }
                
              }
             
            }
          });
        // swal.fire({
        //     icon: 'question',
        //     title: 'Reactivate dService provider name ?',
        //     html: custom_text_1,
        //     iconColor: '#f7bb85',
        //     showConfirmButton: false,
        // })
    }
    $(document).on("keyup change", "#no_of_calendars", function(e) {       
          count_amount();
          $('#total_calendars').val(this.value);
          $.ajax({
            url: "{{ route('practitioner.team.calculateMonthlyCost')}}",
            method: 'POST',
            data: {
              id: practitioner_id,
              no_of_calendars: this.value
            },
            beforeSend: function(msg) {
              // $(".loading").addClass("d-block");
            },
          }).done(function(response) {
            // $(".loading").removeClass("d-block");
            if (response.status == "success") {
              $("#total_monthly_cost").text(response.monthlyCost);
            } else {}
          }).fail(function(error) {
            $(".loading").removeClass("d-block");
          });
        });
    function count_amount(){
        total_service_provider = $('#no_of_calendars').val();
        cal_price = $('#plans_price').val();
        total_service_cost = total_service_provider*cal_price;
        if(total_service_provider < 1){
            $('#errorMsg').show();
        }
        else{
          $('#errorMsg').hide();
          $('#total_service_cost').text('$'+total_service_cost);
        }
        
      }
       $(document).on('click', '#calculatePaymentForCalendars', function(e) {
          $('#hidewhennomerchantid').addClass('d-none');
          $('#pyment_popup_text_new_line').addClass('d-none');
          $('.add_calender_payment_text').removeClass('d-none');
          var no_of_calendars = $("#no_of_calendars").val();
          $('#is_calendar').val(1);
          $.ajax({
            type: "POST",
            dataType: "JSON",
            url: "{{ route('practitioner.team.paymentCalculationAddCalendar') }}",
            data: {
              no_of_calendars: no_of_calendars,
              _token: "{{ csrf_token() }}"
            },
            success: function(response) {
              if (response.status == "success") {
                var val = response.priceForSelectedCalendar;
                var diffInDays = response.diffInDays;
                $('#calender_number_of_days_left').text(diffInDays);
                var isSubscribed = response.is_subscribed;
                $("#isSubscribed").val(isSubscribed);

                var calendarRequested = response.calendarRequested;
                $("#calendarRequested").val(calendarRequested);

                var user = @json($parent);

                $('.payment-amount').text("Pay today : $" + val + "");
                $('#paid_amount').val(val);
                $("#paybleAmount").val(val);
                $("#latpayAmount").val(val);

                $('#latpay-element').empty();
                var merchantId = $("input[name='merchant_id']").val();

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

                LatpayCheckout.open({
                  merchantid: merchantId,
                  publickey: $("input[name='merchant_public_key']").val(),
                  merchantuserid: merchantId,
                  'status': function(status) {
                    if (status == 'success') {
                      $.ajax({
                        url: url,
                        type: 'get',
                      }).done(function(response) {

                        $("#service-provider-modal").modal("hide");
                        $("#number_of_days_left").text(diffInDays);
                        $('#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');
                      }
                    }
                  }
                });
              } else {
                console.log(response);
              }
            }
          });
        });
         // Add new card
         $(document).on('click', '.addNewCartForSubscription', function(e) {

            $('#latpay-element').empty();
            var merchantId = $("input[name='merchant_id']").val();
            $("input[name='choose-card']").prop('checked', false);

            LatpayCheckout.open({
            merchantid: merchantId,
            publickey: $("input[name='merchant_public_key'").val(),
            merchantuserid: merchantId,
            'status': function(status) {
                if (status == 'success') {
                $('#ifNoCardFound').css('display', 'block');
                $(".addNewCartForSubscription").addClass('d-none');
                $('#ifCardFound').css('display', 'none');
                $("#payment-online").prop('checked', true);
                $("input[name='payment_option_type']").val(2);
                } else {
                if (merchantId) {
                    var title = 'Invalid merchant id, please contact administrator.';
                } else {
                    title = 'Details not found for this merchant, please contact administrator.';
                }

                Swal.fire({
                    icon: "error",
                    title: title,
                    showClass: {
                    popup: 'animate__animated animate__fadeInDown'
                    },
                    hideClass: {
                    popup: 'animate__animated animate__fadeOutUp'
                    }
                });
                }
            }
            });
            });
            $(document).on('click', '#planPaymentButton', function(e) {
              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();
              var reference = makeid(8);

              if (val) {
                callLatpayForCardSubscription(val);
              } else {
                LatpayCheckout.processpayment({
                  "amount": $("input[name='latpayAmount']").val(),
                  "currency": "AUD",
                  "reference": 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 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', practitioner_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 {
                  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'
                          }
                        });
                      }
                    }
                  }
                }
              });
            }

      // Save details after payment is successfull
      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) {
            if (response.error == false) {
              Swal.fire({
                icon: 'success',
                title: response.msg,
                // timer: 2000,
                allowOutsideClick: false,
                showClass: {
                  popup: 'animate__animated animate__fadeInDown'
                },
                hideClass: {
                  popup: 'animate__animated animate__fadeOutUp'
                },
                confirmButtonText: 'Ok',
              }).then((result) => {
                if($('#upgade_plan').val() != 1){
                  var flag = 'add';
                  var pre_id = '';
                  service_provider_payment_modal(flag,pre_id);
                }else{
                  window.location.href = response.redirect;
                }
              });
              // setTimeout(function() {
              //   var url = '{{ route("practitioner.myplan") }}';
              //   window.location.href = url;
              //   // window.location.href = "{{route('practitioner.myplan',['calenders'=>"+calenders+"])}}";

              //   // window.location.href = response.redirect;
              // },2000);
              // window.location.href = "{{route('practitioner.business.addTeamMember')}}";
            } else {
              Swal.fire({
                icon: 'error',
                title: 'Error!',
                text: response.message,
                showClass: {
                  popup: 'animate__animated animate__fadeInDown'
                },
                hideClass: {
                  popup: 'animate__animated animate__fadeOutUp'
                }
              });
            }
          }
        });
      }

      function upgrade_plan(plan_id,plan_type){
        if(plan_id == 1){
            swal.fire({
                icon: 'info',
                title: 'Downgrade your Plan?',
                iconColor: '#f7bb85',
                confirmButtonText: 'Downgrade plan',
                focusConfirm: false,
                showCloseButton: true
              }).then((result) => {
              if (result.value) {
                 $.ajax({
                      type: "POST",
                      dataType: "JSON",
                      url: "{{ route('practitioner.team.downgradeplan') }}",
                      data: {
                        status:'deactivate',
                        plan_id: plan_id,
                        _token: "{{ csrf_token() }}"
                      },
                      success: function(response) {
                        if(response.status == 'success'){
                          swal.fire({
                              icon: 'success',
                              title: 'Downgrade plan successfully',
                              focusConfirm: false,
                              iconColor: '#f7bb85',
                          });
                          window.setTimeout(function() {
                            location.reload()
                          }, 2000);
                        }else{
                          Swal.fire({
                          icon: "error",
                          title: 'Something went wrong',
                          showClass: {
                            popup: 'animate__animated animate__fadeInDown'
                          },
                          hideClass: {
                            popup: 'animate__animated animate__fadeOutUp'
                          }
                        });
                        }
                      
                      }
                    });
                  
                }
              });
        }else{    
        var no_of_calendars = $("#no_of_calendars").val();
        $.ajax({
          type: "POST",
          dataType: "JSON",
          url: "{{ route('practitioner.team.upgradeplancalculation') }}",
          data: {
            plan_type:plan_type,
            plan_id:plan_id,
            no_of_calendars: no_of_calendars,
            _token: "{{ csrf_token() }}"
          },
          success: function(response) {
            if (response.status == "success") {
              var val = response.priceForSelectedCalendar;
              var diffInDays = response.diffInDays;
              var plan_end_date = response.end_date;
              var isSubscribed = response.is_subscribed;
              var deducted_amount = response.deducted_amount
              var current_plan_id = response.current_plan_id;
              var is_trial_over = response.is_trial_over;
              var end_date_old_plan = response.end_date_old_plan
              $("#isSubscribed").val(isSubscribed);

              var calendarRequested = response.calendarRequested;
              $("#calendarRequested").val(calendarRequested);
              var user = @json($parent);
              if(current_plan_id = 1 && plan_id == 3){
                $('#pyment_popup_text').text('Upgrading to a yearly plan is $299 per annum (save $49). Additional service providers are $156 each per annum (save $24).')
              }
              if(current_plan_id = 1 && plan_id == 2){
                $('#pyment_popup_text').text('Enjoy the benefits of a Premium Plan for $39 per month. Additional service providers are charged at $15 per month (save $7 per month).')
              }
              if(current_plan_id = 2 && plan_id == 3){
                $('#pyment_popup_text').text('Upgrading to a yearly plan is $397 per annum (save $71). Additional service providers are $156 each per annum (save $24).')
                $('#plan_end_date2').text(plan_end_date);
                $('#end_date_old_plan').text(end_date_old_plan);
              }
              if(is_trial_over == 0 && plan_id == 2){
                
                if(calendarRequested == 0){
                  $('#pyment_popup_text').html('')
                $('#pyment_popup_text').html('<p>Enjoy the benefits of a Premium Plan for $29 per month. Upgrading today will give you instant access to premium features and commence your monthly plan. Your trial period will end today. Your next billing date will be <span id="plan_end_date2"></span>.<p>')
                }else{
                  $('#pyment_popup_text').html('')
                $('#pyment_popup_text').html('<p>Enjoy the benefits of a Premium Plan for $29 per month. Additional Service Providers are charged at $15 each per month. Upgrading today will give you instant access to premium features and commence your monthly plan. Your trial period will end today. Your next billing date will be <span id="plan_end_date2"></span>.<p>')
                }
                $('#plan_end_date2').html(plan_end_date);
                $('#pyment_popup_text_new_line').addClass('d-none');
              }
              if(is_trial_over == 0 && plan_id == 3){
                
                if(calendarRequested == 0){
                  $('#pyment_popup_text').html('')
                $('#pyment_popup_text').html('<p>Upgrading to a yearly plan is $299 per annum (save $49). Upgrading today will give you instant access to premium features and commence your annual plan. Your trial period will end today. Your next billing date will be <span id="plan_end_date2"></span>.</p>')
                }else{
                  $('#pyment_popup_text').html('')
                $('#pyment_popup_text').html('<p>Upgrading to a yearly plan is $299 per annum (save $49). Additional service providers are $156 each per annum (save $24). Upgrading today will give you instant access to premium features and commence your annual plan. Your trial period will end today. Your next billing date will be <span id="plan_end_date2"></span>.</p>')
                }
                $('#plan_end_date2').text(plan_end_date);
                $('#pyment_popup_text_new_line').addClass('d-none');

              }
              $('.payment-amount').text("Pay today : $" + val + "");
              $('#paid_amount').val(val);
              $("#paybleAmount").val(val);
              $("#latpayAmount").val(val);
              $('#upgade_plan').val(1);
              $('#plan_type').val(response.flag);
              $('#plan_id').val(plan_id);

              $('#latpay-element').empty();
              var merchantId = $("input[name='merchant_id']").val();

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

              LatpayCheckout.open({
                merchantid: merchantId,
                publickey: $("input[name='merchant_public_key']").val(),
                merchantuserid: merchantId,
                'status': function(status) {
                  if (status == 'success') {
                    $.ajax({
                      url: url,
                      type: 'get',
                    }).done(function(response) {

                      $("#service-provider-modal").modal("hide");
                      $("#number_of_days_left").text(diffInDays);
                      $("#plan_end_date").text(plan_end_date);
                      $('#total_cost').text("$"+deducted_amount)
                      $('#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');
						$('.addNewCartForSubscription').removeClass('d-none');
                      } else {


                        $('#ifNoCardFound').css('display', 'block');
                        $('#ifCardFound').css('display', 'none');
                        $('.addNewCartForSubscription').css('display', 'none');
						$('.addNewCartForSubscription').addClass('d-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');
                    }
                  }
                }
              });
            } else {
              console.log(response);
            }
          }
        });
      };
        }
      $('.close_account').click(function () {
      $.ajax({
            url: "{{ route('practitioner.close.account')}}",
            data: {
               close_account_reason : $('textarea[name="close_account_reason"]').val() 
            },
            type: 'POST',
        }).done(function (response) {
            if (response.status == "success") {
                Swal.fire({
                    icon: response.status,
                    title: response.msg,
                    showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                    },
                    hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                    }
                });

               $('#paysuremodal').modal('hide');
               setTimeout(function() {
                  var baseUrl = "{{route('practitioner.logout')}}";     
                  window.location.href = baseUrl;
               }, 2000);
               

            } else {
            }
        });
   });
   $(document).on('click','#reinstate_account',function(){
    swal.fire({
      icon: 'info',
      title: 'Reinstate account?',
      text: 'Clicking ok will cancel your request to downgrade/close your account',
      iconColor: '#f7bb85',
      // confirmButtonText: 'Downgrade plan',
      focusConfirm: false,
      showCloseButton: true
    }).then((result) => {
      if (result.value) {
      $.ajax({
              url: "{{ route('practitioner.reinstate_account')}}",
              type: 'POST',
          }).done(function (response) {
              if (response.status == "success") {
                  Swal.fire({
                      icon: response.status,
                      title: response.msg,
                      showClass: {
                          popup: 'animate__animated animate__fadeInDown'
                      },
                      hideClass: {
                          popup: 'animate__animated animate__fadeOutUp'
                      }
                  });
                  
                //  $('#paysuremodal').modal('hide');
                  setTimeout(function() {
                    // var baseUrl = "{{route('practitioner.logout')}}";     
                    // return false
                    location.reload();
                  }, 2000);
                  
              }
          });
        }
        });
   })
    $(document).on('change','#subscription_switch',function(){
        subscription();
    });
    function subscription(){
      var switchStatus = false;
      if ($('#subscription').is(':checked')) {
          switchStatus = $('#subscription').is(':checked');
          $('.monthly').attr("style", "display: none;");
          $(".annually").removeAttr("style");
          $(".switch-btn-outer").addClass('selected');
          // alert(switchStatus);// To verify
          // $('.monthly').addClass("d-block");
        }
        else {
          switchStatus = $('#subscription').is(':checked');
          $('.annually').attr("style", "display: none;");
          $(".monthly").removeAttr("style");
          $(".switch-btn-outer").removeClass('selected');
        // alert(switchStatus);// To verify
      }
    }
    function service_provider_payment_modal(flag,pre_id){
            $.ajax({
                type: "POST",
                dataType: "JSON",
                url: "{{ route('practitioner.team.checkteamMemberpayment') }}",
                data: {
                  flag:flag,
                  pre_id:pre_id,
                  _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                  if(response.status == 'success'){
                    window.location.href = response.url;
                  }else if(response.status == 'trial_plan'){
                      $('#service-provider-modal-trial-plan').modal("show");
                  }else if(response.status =='old_payment_pay'){
                  Swal.fire({
                  icon: 'error',
                  title: response.msg,
                  text: response.message,
                  showClass: {
                    popup: 'animate__animated animate__fadeInDown'
                  },
                  hideClass: {
                    popup: 'animate__animated animate__fadeOutUp'
                  }
                });
                  }else{
                      $('#service-provider-modal').modal("show");
                  }
                }
            })
      }
      $(document).on('click','#service-provider-modal-my-plan',function(){
          var flag = 'add';
          var pre_id = '';
          service_provider_payment_modal(flag,pre_id);
      });

	  // $(".notify_credit_btn").hover(function() {
    //         $(".notify_credit_toggle").toggle();
    //   });
      // setTimeout(() => {
      //   $(document).on('click','#subscription_switch',function(e){
      //     if ($('.monthly-span').hasClass('blue-t-color')){
      //       e.preventDefault();
      //       console.log('dd');
      //       $('.monthly-span').removeClass('blue-t-color');
      //     } else {
      //       e.preventDefault();
      //       console.log('ddd');
      //       $('.monthly-span').addClass('blue-t-color');
      //     }
      //   });
      // }, 2000);
      
    </script>
@endsection