@extends('front.practitioner.import.template.import')
@section('content')
<style>
  .payment-method-input-box input::placeholder {color: #24303f !important;}
</style>
 <div class="container-fluid">
  <div class="row">
     <nav class="navbar navbar-light bg-light invoice-page-menu notes-menu w-100">
        <a class=" p-0" href="{{ URL::previous() }}">
           <img src="{{asset('assets/images/My Appointments back icon.svg')}}" alt="" class="img-flude" style="min-width: 40px">
        </a>
        <a class="navbar-brand p-0 " href="{{route('practitioner.appointments.index')}}"><img src="{{asset('assets/images/MA Icon Colour.svg')}}" alt="" class="img-flude" style="min-width: 43px"></a>
        <h1 class="page-title eagle-font font-400 "><span class="arca-font"><strong>My</strong> plan</span></h1>
        {{-- <a href="/practitioner/mybilling" id="" style="margin: unset;" class="btn btn-unfill mb-3 ml-auto my-auto my-plan-head-a">Billing</a>
        <a href="#AddServiceModal" id="" class="btn btn-fill mb-3 my-auto my-plan-head-a" data-target="#service-provider-modal" data-toggle="modal">Add service provider</a> --}}
        
     </nav>
     <!-- @include( 'front.practitioner.import.include.navbar' ) -->
     <div class="brdr-bttm w-100"></div>
  </div>
</div>
<div class="todo-list-modal service-provider">

<div class="dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-wrapper my-billing-page">
    <div class="container-fluid" >
        <div class="row">
            <div class="pay-bill-amount-outer myplans-table treatment-note-templates " id="paymet_header">
                <div class="pay-bill-text-left">
                    <h4>Balance</h4>
                    <p ><span id="balance">${{$monthlyCost}} due today<span></p>
                </div>
                <div class="pay-bill-amount-right">
                    <a href="#" class="btn-fill btn-select-all float-right pay-bill-btn " id="PaymentForrenewal">Pay now</a>
                </div>
            </div>
        </div>  
          
  <div class="container-fluid ">
    <div class="row justify-content-center " id="header">
        <div class="myplans-table treatment-note-templates pt-sm-5 pt-4">
          <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 == 2)Premium ${{round($myplan_cost->pricem,0)}} pm @elseif($myPlan->plan_id == 1)Starter ${{round($myplan_cost->price,0)}} pm @endif @endisset</span></th>
                      <th class="align-middle white-space-nowrap">Additional Service provider/s<br><span class="font-w-400">@isset($existingCalendars) {{$existingCalendars}} @endisset</span></th>
                      <th class="align-middle white-space-nowrap">Cost<br><span class="font-w-400">@isset($monthlyCost) ${{$monthlyCost}}@endisset pm</span></th>
                      @isset($myPlan_history)
                            @if($myPlan_history->is_pay == 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">Renewes<br><span class="font-w-400">{{date('d/m/Y', strtotime($end_date))}}</span></th>
                            @else
                            @endif
                        @endisset
                      {{-- <th style="align-middle white-space-nowrap"><a href="#" style="color:#45747a;" data-toggle="modal" data-target="#paycloseaccountmodal">Close account</a></th> --}}
                  </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_data)
        @if(count($ServiceProvider_data) != 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;">{{$parent->status}}</td> --}}
                  <td class="align-middle">Business owner</td>
                </tr>
                  @foreach ($ServiceProvider_data 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" 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></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
     
              </tbody>
              </table>
          </div>
          </div>
          @endif
          @endisset
          
      </div>
      


  </div>
    </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" id="close_button">
                <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" id="display_amount">
                      <p class="payment-amount"></p>
                    </div>

                    <hr class="payment_hr" />

                    {{-- <p class="hidewhennomerchantid mb-3" id="payment_text">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> --}}

                    <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="total_calendars" id="total_calendars" value="1">
                      {{-- <input type="hidden" name="is_calendar" id="is_calendar" value="1"> --}}
                      <input type="hidden" name="isSubscribed" id="isSubscribed" value="">
                      <input type="hidden" name="paybleAmount" id="paybleAmount" value="">
                      <input type="hidden" name="renewal" id="renewal" value="1">
                      <input type="hidden" name="is_add_card" id="is_add_card" value="0">
                      <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 }}">
                      <input type="hidden" name="calendar_count" id="calendar_count" value="0">
                      <input type="hidden" name="calendar_count_flag" id="calendar_count_flag" value="1">
                      @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>

                    <div id="custom-store-label" class="showwheninvoice hidewheninvoice save_card_primary d-none" >
                      <input type="hidden" name="forClientadd" />
                      <input type="hidden" name="forClientid" />
                      <input type="checkbox" class="custom-control-input" name="save_card_primary" value="1" id="save_card_primary1" checked>
                      <label class="custom-control-label " for="save_card_primary1">Save card as Primary payment method</label>
                    </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>
 <!-- pay suremodal modal start -->
 <div class="todo-list-modal clientabpopup sentmodal closeaccountmodal titlelg">
  <div class="modal fade" id="paysuremodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content mdashboard-client-followuparea">
           <div class="modal-header"> 
           <h5 class="modal-title text-center" id="exampleModalLabel1">Are you sure ?</h5>
              <button type="button" class="close bttn-close" data-dismiss="modal" aria-label="Close">
                 <span aria-hidden="true"><img src='{{asset("assets/")}}' alt="" class="img-fluid"></span>
              </button>                      
           </div>
           <div class="modal-body text-center">
              <div class="danger-img">
                 <img src='{{asset("assets/images/danger.png")}}' alt="" class="img-fluid"> 
              </div>
              {{-- <p class="font-14 text-blue">Your account will be deleted at the end of your billing cycle on:</p>
              <h3 class="font-bold font-15 text-blue mb-20">{{date("jS F Y")}}</h3> --}}
              <p class="font-14 text-blue">You will lose access to all of your data. This cannot be undone. </p>
              <div class="text-center mt-30">
                 <a href="#" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 btn-red mr-xl-2 close_account">Yes</a>
                 <a href="#" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 btn-red" data-dismiss="modal" aria-label="Close">No</a>
              </div>
           </div>
        </div>
     </div>
  </div>
</div>
<!-- pay suremodal modal end -->
<!-- Pay close account modal start -->
<div class="todo-list-modal clientabpopup sentmodal closeaccountmodal titlelg">
  <div class="modal fade" id="paycloseaccountmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content mdashboard-client-followuparea">
           <div class="modal-header"> 
           <h5 class="modal-title text-center" id="exampleModalLabel1">Close Account?</h5>
              <button type="button" class="close bttn-close" data-dismiss="modal" aria-label="Close">
                 <span aria-hidden="true"><img src='{{asset("assets/")}}' alt="" class="img-fluid"></span>
           </button>                      
           </div>
           <div class="modal-body text-center">
              <div class="danger-img">
                 <img src='{{asset("assets/images/danger.png")}}' alt="" class="img-fluid"> 
              </div>
              <h3 class="font-bold font-15 text-blue mb-20">We are sorry to see you go</h3>
              <p class="font-14 text-blue">What is your reason for leaving? Is there anything we could have done to improve your experience on the My Appointments platform.?</p>
              <div class="form-group mt-40">
                 <textarea class='autoExpandas' class="form-control" rows='1' name="close_account_reason" placeholder=""></textarea>
              </div>
              <div class="text-center mt-30">  
                 <a href="#" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 btn-red" data-toggle="modal" data-target="#paysuremodal" data-dismiss="modal">Close account</a>
              </div>
           </div>
        </div>
     </div>
  </div>
</div>
<!-- Pay close account modal end -->
  
@endsection

{{-- popup design start  --}}

@section('css')

<style>
  .offer-round-box {min-width: 80px;min-height: 80px;border-radius: 40px;background-color: #68afb5;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;
    }
    
    
    .upgrde-plan-btn a:hover ,.priceing-boxes:hover a {
        background-color: #68afb5;
    }
    .myplans-table .btn {
        transition: all .4s;
        min-width: 141px !important;
    }
    .m-auto-center{
    margin: 0 auto;
    text-align: center !important;
    }
    .priceing-boxes:hover {
        border: 2px solid #68afb5;
    }
    .pay-bill-amount-outer {
        margin: 0 auto;
        background-color: #ffffff;
        border: 0.5px solid #ccc;
        border-radius: 5px;
        padding: 10px 15px 10px 15px !important;
        margin-top: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .pay-bill-btn {
        border-radius: 19px;
        background-color: #68afb5;
        text-align: center;
        padding: 8px 20px;
        min-width: 160px;
        font-size: 19px;
        letter-spacing: 0px;
        line-height: 21px;
        color: #ffffff;
        font-weight: bold;
    }
    .pay-bill-text-left h4{
        font-size: 17px;
        letter-spacing: 1px;
        line-height: 32px;
        color: #24303f;
        font-weight: bold;
    }
    .pay-bill-text-left p{
        font-size: 13px;
        letter-spacing: 1px;
        line-height: 32px;
        color: #24303f;
        margin-bottom: 0;
    }
    .payment-method-title h4 ,.title-second-box h4 {
        font-size: 17px;
        letter-spacing: 1px;
        line-height: 32px;
        color: #24303f;
        font-weight: bold;
    }
    .payment-method-outer {
        margin: 0 auto;
        background-color: #ffffff;
        border: 0.5px solid #ccc;
        border-radius: 5px;
        padding: 10px 15px 10px 15px !important;
        margin-top: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 30px;
        flex-wrap: wrap;
    }
    .pay-method-box {
        display: flex;
        margin-bottom: 35px;
        flex-wrap:wrap;
    }
    .payment-method-box-inner {
        display: flex;
        margin-bottom:20px;
    }
    .payment-method-input-box input {
        line-height: normal;
        width: 100%;
        width: 214px;
        height: 25px;
        border-radius: 5px;
        background-color: #ffffff;
        border: 0.5px solid #ccc;
        margin-bottom: 15px;
        padding: 0px 10px;
        font-size: 15px;
        line-height: 25px;
        color: #24303f;
    }
    .payment-method-input-box input::placeholder { color: #24303f; }
    .payment-method-title {
        margin-bottom: 30px;
    }
    .payment-method-input-box {
        padding: 0px 30px;
    }
    /* .treatment-note-templates {
        max-width: 753px;
        width: 100%;
    } */
    .submit-btn-btm {
        display: flex;
        align-items: center;
        align-content: center;
    }
    .submit-btn-btm button {
        margin-right: 10px;
        height: 32px;
    }
    .clear-all-paymentdetails {
        display: flex;
        height: 32px;
    }
    .mar-b-50 {margin-bottom: 50px;}
    .title-second-box {
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .blue-border-btn {
        border: 1px solid #45747a;
        border-radius: 5px;
        background-color: #ffffff;
        color: #45747a !important;
    }
    .blue-border-btn:hover {color: #ffffff !important;}
    .swal2-icon.swal2-question {
        border-color: #527379;
        color: #527379;
    }
    @media (max-width: 991px){
        .treatment-note-templates {
            margin-top: 0px;
        }
        .payment-method-outer {margin-top: 50px;}
    }
    @media (max-width:767px){
        .pay-method-box ,.pay-bill-amount-outer{
            display: flex;
            flex-wrap: wrap;
        }
        .pay-bill-text-left {width: 100%;}
        .my-plan-head-a {width: 100%;margin-top: 15px !important;}
        .treatment-note-templates {
            max-width: 100%;
            width: 100%;
        }
        .treatment-note-templates {
            margin-top: 10px;
        }
        .my-billing-page{
            padding: 0px 15px;
        }
        .payment-method-2 {margin-top: 30px;}
        
    }
</style>
<style>
  .offer-round-box {min-width: 80px;min-height: 80px;border-radius: 40px;background-color: #68afb5;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:focus + .slider {
    box-shadow: 0 0 1px #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: 0.5px 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;
        max-height: 551px !important;
        position: relative;
    }
    .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: 20px;
        color: #24303f;
        padding: 4px 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;
    }
    .upgrde-plan-btn a:hover ,.priceing-boxes:hover a {
        background-color: #68afb5;
    }
    .myplans-table .btn {
        transition: all .4s;
        min-width: 141px !important;
    }
    .m-auto-center{
    margin: 0 auto;
    text-align: center !important;
    }
    .priceing-boxes:hover , .priceing-boxes-active{
        border: 2px solid #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;
    }
    .switch-btn-outer span {
        color: #898989;
    }
    .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;}
    }
</style>
@endsection

@section('import-scripts')
<script src="https://lateralpayments.com/checkout/scripts/latpay2.js"></script>

<script>
var practitioner_id = "{{ $practitioner->id }}";
$('.creditCardText').keyup(function() {
  var foo = $(this).val().split("-").join(""); // remove hyphens
  if (foo.length > 0) {
    foo = foo.match(new RegExp('.{1,4}', 'g')).join("-");
  }
  $(this).val(foo);
});

    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');
    });


    $(document).ready(function(){
      $(".assignPlan").click(function(){
        // $("#edit-plan-modal").modal();
        // fireSweetAlert();
        $("#deactive_user_popupbtn").click(function(){
            // $("#edit-plan-modal").modal();
            // e.preventdefault()
            // alert('dd');
            deactivated_user();
        });
      });
      $(".deactivatePlan").click(function(){
        // $("#edit-plan-modal").modal();
        // 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() {
        swal.fire({
            icon: 'success',
            title: 'Service provider Deactivated',
            iconColor: '#f7bb85',
        })
    }
    const custom_text_1 = document.createElement('div');
    custom_text_1.innerHTML = "The cost of this calendar will be -insert price- per month<br><br><a href='javascript:void(0);' id='deactive_user_popupbtn' class='btn btn-fill mb-3 my-auto'>Purchase calendar</a>";
    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).ready(function(){
        // paymentCalculation();
    });

    $(document).on('click','#deletepaymentcard',function(){
        var cardid = $(this).data('id');
        Swal.fire({
            title: 'Delete Payment card?',
            text: 'This will remove all data associated with this user payment card. This cannot be undone',
            icon: 'warning',
            confirmButtonText: 'Ok',
            focusConfirm: false,
            showCloseButton: true
          }).then((result) => {
            if (result.value) {
              $.ajax({
                  type: "POST",
                  dataType: "JSON",
                  url: "{{ route('practitioner.team.deletepaymentcard') }}",
                  data: {
                    cardid:cardid,
                    _token: "{{ csrf_token() }}"
                  },
                  success: function(response) { 
                      if(response.status == 'success'){
                        Swal.fire({
                          icon: response.status,
                          title: '',
                          text: response.msg,
                          timer: 2000,
                          showClass: {
                            popup: 'animate__animated animate__fadeInDown'
                          },
                          hideClass: {
                            popup: 'animate__animated animate__fadeOutUp'
                          }
                        });
                        location.reload();
                    }else{
                      Swal.fire({
                          icon: response.status,
                          title: '',
                          text: response.msg,
                          showClass: {
                            popup: 'animate__animated animate__fadeInDown'
                          },
                          hideClass: {
                            popup: 'animate__animated animate__fadeOutUp'
                          }
                        });
                    }
                  }
                });
              }
            });
    });

    $(document).on('click','#card_primary',function(){
      var cardid = $(this).data('id');
      $.ajax({
            type: "POST",
            dataType: "JSON",
            url: "{{ route('practitioner.team.cardprimary') }}",
            data: {
              cardid:cardid,
              _token: "{{ csrf_token() }}"
            },
            success: function(response) {
              if(response.status == 'success'){
                        Swal.fire({
                          icon: response.status,
                          title: '',
                          text: response.msg,
                          timer: 2000,
                          showClass: {
                            popup: 'animate__animated animate__fadeInDown'
                          },
                          hideClass: {
                            popup: 'animate__animated animate__fadeOutUp'
                          }
                        });
                        location.reload();
                    }else{
                      Swal.fire({
                          icon: response.status,
                          title: '',
                          text: response.msg,
                          showClass: {
                            popup: 'animate__animated animate__fadeInDown'
                          },
                          hideClass: {
                            popup: 'animate__animated animate__fadeOutUp'
                          }
                        });
                    }
            }
          });
    })
    function paymentCalculation(){
        $.ajax({
            type: "POST",
            dataType: "JSON",
            url: "{{ route('practitioner.team.mybillingcalculation') }}",
            data: {
              _token: "{{ csrf_token() }}"
            },
            success: function(response) {
              if (response.status == "success") {
                var d = new Date();
                var strDate = d.getDate() + "/" + (d.getMonth()+1) + "/" + d.getFullYear();
                if(response.pay == 0){
                    // $('#balance').text('Next billing date ' +response.end_date_time);
                    $('#header').removeClass('d-none');
                }else if(response.pay == 2){

                  // $('#balance').text('Your balance is $'+response.monthlyCost);
                  $('#header').removeClass('d-none');
                  // $('#PaymentForrenewal').removeClass('d-none');
                }
                else{
                    $('#balance').text('Your balance is $'+response.monthlyCost);
                    $('#paymet_header').removeClass('d-none');
                }
                // if(response.plan == 1){
                //   // $('#PaymentForrenewal').addClass('d-none');
                // }
            }
        }
    });
    }
    $(document).on('click', '#PaymentForrenewal', function(e) {
          // var no_of_calendars = $("#no_of_calendars").val();

          $.ajax({
            type: "POST",
            dataType: "JSON",
            url: "{{ route('practitioner.team.mybillingcalculation') }}",
            data: {
              _token: "{{ csrf_token() }}"
            },
            success: function(response) {
              if (response.status == "success") {
              
                // var val = response.monthlyCost;
                val = "{{$monthlyCost}}";
                // var diffInDays = response.diffInDays;
                $('#calendar_count').val(response.calendar_count);
                $('#calendar_count_flag').val(response.calendar_count_flag);
                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 {
          $(".loading").show();
          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('calendar_count', $('input[name="calendar_count"').val());
        formData.append('calendar_count_flag', $('input[name="calendar_count_flag"').val());
        formData.append('renewal', $('input[name="renewal"').val());
        formData.append('is_add_card', $('input[name="is_add_card"').val());
        formData.append('save_card_primary', $('input[name="save_card_primary"').val());
        formData.append('paid_amount', $('input[name="paid_amount"').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 is_add_card = $('input[name="is_add_card"').val();
        $.ajax({
          type: "POST",
          url: "{{ route('practitioner.latpayPaymentUpgradeSuccess') }}",
          data: {
            is_add_card:is_add_card,
            id: practitioner_id,
            paid_amount:paid_amount,
            isSubscribed: $("#isSubscribed").val(),
            calendarRequested: $("#calendarRequested").val()
          },
          success: function(response) {
            if (response.error == false) {
              Swal.fire({
                icon: 'success',
                title: response.msg,
                timer: 2000,
                showClass: {
                  popup: 'animate__animated animate__fadeInDown'
                },
                hideClass: {
                  popup: 'animate__animated animate__fadeOutUp'
                },
                confirmButtonText: 'Ok',
              });

              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'
                }
              });
            }
          }
        });
      }
      $('.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', '#add_card', function(e) {
            $('#PayNowForCaledarPurchaseModal').modal('show');
            $('#display_amount').addClass('d-none');
            $('.save_card_primary').removeClass('d-none');
            $('#payment_text').text('All transactions are secured & encrypted');
            $('.paytitle').text('Add new card');
            $('#close_button').addClass('close_button');
            // $('.payment_hr').remove();
            $('#planPaymentButton').text('Save card')
            $('#paid_amount').val(0);
            $("#paybleAmount").val(0);
            $("#latpayAmount").val(0);
            $('#is_add_card').val(1);
            $('#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','.close_button',function(){
            location.reload();
        });
        $(document).on('click', '.downloadPaymentHistoryInvoice', function(e) {
          var baseUrl = "{{route('home')}}";
          var invoice_id = $(this).data("id");
          $.redirect(baseUrl + '/practitioner/my_team/view_history_invoice', {
              invoice_id: invoice_id,
              flag: "download"
          }, "GET", "_blank");
        });
    </script>
@endsection