@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>Billing</strong> </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">
@if($card_flag == 0 && $history_flag == 0)
  <div class="container-fluid">
    <div class="mybilling-data pay-bill-amount-outer d-none">
      <div class="icon">
        <img src='{{asset("assets/images/dollar.svg")}}' alt="" class="img-fluid">
      </div>
      <div class="payment-method-title m-0">
        <h4>Nothing to display</h4>
      </div>
    </div>
  @endif


    {{-- <div class="row justify-content-center d-none" 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 @elseif($myPlan->plan_id == 1)Starter @endif @endisset</span></th>
                      <th class="align-middle white-space-nowrap">Service provider/ s<br><span class="font-w-400">@isset($ServiceProvider) {{$ServiceProvider}} @endisset</span></th>
                      <th class="align-middle white-space-nowrap">Cost<br><span class="font-w-400">@isset($myPlan) @if ($myPlan->plan_id == 2)$25 @elseif($myPlan->plan_id == 1)$0 @endif @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>   --}}
    @if($card_flag != 0 || $history_flag != 0)
      <div class="container-fluid" >
          <div class="row">
              <div class="pay-bill-amount-outer myplans-table treatment-note-templates d-none " id="paymet_header">
                  <div class="pay-bill-text-left">
                      <h4>Balance</h4>
                      <p ><span id="balance"><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="row">
              <div class="payment-method-outer myplans-table treatment-note-templates pt-sm-5 pt-4">
                  <div class="payment-method-title w-100">
                      <h4>Payment method</h4>
                  </div>
                  
                  {{-- <div class="col-6 payment-method-title w-100">
                  
                  </div> --}}
                  <div class="pay-method-box">
                      @isset($cardList)
                          @if($cardList != '' && $cardList!= null)
                              @foreach ($cardList as $cardLists)
                              <div class="payment-method-box-inner payment-method-1">
                                  @php if ($cardLists->card_type == 'MASTERCARD') {
                                      $src = "assets/images/credit-img/master-card.png";
                                    } else if ($cardLists->card_type == 'VISA') {
                                      $src = "assets/images/credit-img/visa-card.png";
                                    }else{
                                      $src = '';
                                    }
                                  @endphp
                                  <div class="payment-method-icon">
                                      <img src="{{asset("".$src."")}}" alt="">
                                  </div>
                                  <div class="payment-method-input-box">
                                      <form action="">
                                        <div class="form-control1">
                                          <input type="text" placeholder="{{$cardLists->name_on_card}}" readonly>
                                        </div>
                                        <div class="form-control1">
                                          <input class="creditCardText" placeholder="xxxx xxxx xxxx {{$cardLists->card_no}}" readonly />
                                        </div>
                                        <div class="form-control1">
                                          <input type="text" placeholder="Exp {{$cardLists->expiry}}" readonly>
                                        </div>
                                          <div class="submit-btn-btm">
                                              <button class="btn-fill @if($cardLists->card_primary != 1) blue-border-btn @endif" data-id={{$cardLists->id}} id="card_primary">@if($cardLists->card_primary == 1) Primary @else Make Primary @endif</button>
                                              {{-- @if($cardLists->card_primary != 1) --}}
                        @if( count($cardList) > 1)
                                                <a href="#" class="clear-all-paymentdetails" data-id={{$cardLists->id}} id="deletepaymentcard">
                                                  <?xml version="1.0" encoding="utf-8"?>
                                                  <!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
                                                  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                                    viewBox="0 0 288 288" style="enable-background:new 0 0 288 288;" xml:space="preserve">
                                                  <style type="text/css">
                                                    .st0{fill:#45747A;}
                                                    .st1{clip-path:url(#SVGID_2_);}
                                                    .st2{clip-path:url(#SVGID_4_);}
                                                  </style>
                                                  <g>
                                                    <g>
                                                      <path class="st0" d="M248.2,12c15.4,0,28,12.6,28,28v208c0,15.4-12.6,28-28,28h-208c-15.4,0-28-12.6-28-28V40
                                                        c0-15.4,12.6-28,28-28H248.2 M248.2,0h-208c-22,0-40,18-40,40v208c0,22,18,40,40,40h208c22,0,40-18,40-40V40
                                                        C288.2,18,270.2,0,248.2,0L248.2,0z"/>
                                                    </g>
                                                    <g id="Artwork_328">
                                                      <g>
                                                        <defs>
                                                          <rect id="SVGID_1_" x="56.7" y="49" width="175.2" height="190"/>
                                                        </defs>
                                                        <clipPath id="SVGID_2_">
                                                          <use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
                                                        </clipPath>
                                                        <g class="st1">
                                                          <g>
                                                            <defs>
                                                              <rect id="SVGID_3_" x="56.7" y="49" width="175.2" height="190"/>
                                                            </defs>
                                                            <clipPath id="SVGID_4_">
                                                              <use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
                                                            </clipPath>
                                                            <g class="st2">
                                                              <path class="st0" d="M224.4,79.8h-44.9v-8.5c0-12.3-10-22.3-22.2-22.3h-26C119,49,109,59,109,71.3v8.5H64.1
                                                                c-4.1,0-7.4,3.3-7.4,7.4c0,4.1,3.3,7.4,7.4,7.4h7.7l9,117.3v0.1c1.4,15.3,14.2,27,29.5,27H178c15.3,0.1,28.2-11.5,29.6-26.8
                                                                c0.5-4.1-2.4-7.8-6.4-8.3c-4.1-0.5-7.8,2.4-8.3,6.4c0,0.2,0,0.3,0,0.5c-0.7,7.6-7.1,13.4-14.8,13.3h-67.6
                                                                c-7.7,0-14.1-5.8-14.8-13.4l-9-116.1h115.2l-6.4,82.2c-0.3,4.1,2.7,7.7,6.8,8c0.2,0,0.4,0,0.6,0c3.9,0,7.1-3,7.4-6.8l6.4-83.3
                                                                h7.7c4.1,0,7.4-3.3,7.4-7.4C231.8,83.1,228.5,79.8,224.4,79.8 M164.6,79.8h-40.8v-8.5c0-4.1,3.3-7.4,7.4-7.4h26
                                                                c4.1,0,7.4,3.3,7.4,7.4L164.6,79.8z"/>
                                                              <path class="st0" d="M110.5,109.5c-4.1,0.2-7.3,3.6-7.1,7.7c0,0,0,0,0,0l3.7,85c0.2,4,3.4,7.1,7.4,7.1h0.3
                                                                c4.1-0.2,7.3-3.7,7.1-7.8l-3.7-85C118.1,112.5,114.6,109.3,110.5,109.5"/>
                                                              <path class="st0" d="M170.2,116.6l-3.7,84.9c-0.2,4.1,3,7.6,7.1,7.8h0.3c4,0,7.2-3.1,7.4-7.1l3.7-84.9
                                                                c0.3-4.1-2.8-7.6-6.9-7.9c-4.1-0.3-7.6,2.8-7.9,6.9C170.3,116.3,170.3,116.4,170.2,116.6"/>
                                                              <path class="st0" d="M136.8,116.9v84.9c0,4.1,3.3,7.4,7.4,7.4c4.1,0,7.4-3.3,7.4-7.4c0,0,0,0,0,0v-84.9c0-4.1-3.3-7.4-7.4-7.4
                                                                C140.2,109.5,136.8,112.8,136.8,116.9C136.8,116.9,136.8,116.9,136.8,116.9"/>
                                                            </g>
                                                          </g>
                                                        </g>
                                                      </g>
                                                    </g>
                                                  </g>
                                                  </svg>
                                                  
                                                </a>
                                              @endif
                                          </div>
                                          
                                      </form>
                                    
                                  </div>
                              </div>
                              @endforeach
                          @endif
                      @endisset
                      <div class="payment-method-title payment-mehtod-add-card w-100">
                        <a id="add_card" class="addNewCartForSubscription mt-0  cursor-pointer d-block" style="padding-top: 30px;font-size: 15px; line-height: 25px; color: #45747a;">Add a new card</a>
                      </div>
                      {{-- <div class=" payment-method-box-inner payment-method-2">
                          <div class="payment-method-icon">
                              <img src="{{asset('assets/images/visa-v1.png')}}" alt="">
                          </div>
                          <div class="payment-method-input-box">
                              <form action="">
                                  <input type="text" placeholder="Jenny Gleeson" >
                                  <input class="creditCardText" placeholder="xxxx xxxx xxxx 1515" />
                                  <input type="text" placeholder="Exp 11/24">
                                  <div class="submit-btn-btm">
                                      <button class="btn-fill">Parimary</button>
                                      <a href="#" class="clear-all-paymentdetails">
                                          <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31 31" width="31" height="31">
                                              <title>Delete bin</title>
                                              <defs>
                                                  <image  width="31" height="31" id="img1" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfCAMAAAAocOYLAAAAAXNSR0IB2cksfwAAAURQTFRFAAAARXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RcitNgAAAGx0Uk5TABme7//i5XhSUBckf5ET/eASTW1sRHCd1xhvfDB9ehw7IAEyI3E6KITjs0e0hScVl+HGmBQCqtjQ2av+7L3P37/r1MDo57by8bfF+q2usQ2gCwrMipSVdzaLHwljTCl7EYJANwiyNK/39gRXETghFgAAAVFJREFUeJyF01dTwkAUBeADOQkBaRaK2ACxgRVFQFSUYi/YxYKo2P//u5ngiLBgzsPO5H6TbMlewGSW2D6S2QSYZMWiWttFtSiyCWbFhk6xKWZIlo4MWCRQ/cdVgtbGY5fd4XDYuxoFa5M7JZfsll1SdwfvYa829rFHdI9Xi4++39HraXK/cDj+Ju8PcGCwkSEOjzTPH2QAISfCo2HYIhjjeMv6JjiJqShijGFawQxnW3yO81iIawUr4jIWudTiCS4jmdI9lcZKJty6/9U1rGd1z6awsSmcTzqHfEH3Qh65pODxIra2dd/ZRXFP8Og+Dqg7D7F/JLiPxyWeaH7KEs7GBD9n5IJLmjt52e7/XfG6zJDmNyzjVvQ73lceEtXHamK4Esw8Cf7MaO3nrdoLXwXHG9/d9XzwQPw+Pr/KjnrKX59/3OD+Gt1/o/4x6j+D/v0Gf1sqCUC75OgAAAAASUVORK5CYII="/>
                                              </defs>
                                              <style>
                                              </style>
                                              <use id="Delete bin" href="#img1" x="0" y="0"/>
                                          </svg>
                                      </a>
                                  </div>
                                  
                              </form>
                          </div>
                      </div> --}}
                      {{-- <div class=" payment-method-box-inner payment-method-2">
                          <div class="payment-method-icon">
                              <img src="{{asset('assets/images/visa-v1.png')}}" alt="">
                          </div>
                          <div class="payment-method-input-box">
                              <form action="">
                                  <input type="text" placeholder="Jenny Gleeson" >
                                  <input class="creditCardText" placeholder="xxxx xxxx xxxx 1515" />
                                  <input type="text" placeholder="Exp 11/24">
                                  <div class="submit-btn-btm">
                                      <button class="btn-fill">Parimary</button>
                                      <a href="#" class="clear-all-paymentdetails">
                                          <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31 31" width="31" height="31">
                                              <title>Delete bin</title>
                                              <defs>
                                                  <image  width="31" height="31" id="img1" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfCAMAAAAocOYLAAAAAXNSR0IB2cksfwAAAURQTFRFAAAARXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RXR5RcitNgAAAGx0Uk5TABme7//i5XhSUBckf5ET/eASTW1sRHCd1xhvfDB9ehw7IAEyI3E6KITjs0e0hScVl+HGmBQCqtjQ2av+7L3P37/r1MDo57by8bfF+q2usQ2gCwrMipSVdzaLHwljTCl7EYJANwiyNK/39gRXETghFgAAAVFJREFUeJyF01dTwkAUBeADOQkBaRaK2ACxgRVFQFSUYi/YxYKo2P//u5ngiLBgzsPO5H6TbMlewGSW2D6S2QSYZMWiWttFtSiyCWbFhk6xKWZIlo4MWCRQ/cdVgtbGY5fd4XDYuxoFa5M7JZfsll1SdwfvYa829rFHdI9Xi4++39HraXK/cDj+Ju8PcGCwkSEOjzTPH2QAISfCo2HYIhjjeMv6JjiJqShijGFawQxnW3yO81iIawUr4jIWudTiCS4jmdI9lcZKJty6/9U1rGd1z6awsSmcTzqHfEH3Qh65pODxIra2dd/ZRXFP8Og+Dqg7D7F/JLiPxyWeaH7KEs7GBD9n5IJLmjt52e7/XfG6zJDmNyzjVvQ73lceEtXHamK4Esw8Cf7MaO3nrdoLXwXHG9/d9XzwQPw+Pr/KjnrKX59/3OD+Gt1/o/4x6j+D/v0Gf1sqCUC75OgAAAAASUVORK5CYII="/>
                                              </defs>
                                              <style>
                                              </style>
                                              <use id="Delete bin" href="#img1" x="0" y="0"/>
                                          </svg>
                                      </a>
                                  </div>
                                  
                              </form>
                          </div>
                      </div> --}}
                      
                    </div>
                    
              </div>
          </div> 
          <div class="row justify-content-center">
                  
              <div class="myplans-table treatment-note-templates ">
                  <div class="title-second-box">
                    <h4>Payment History</h4>  
                  </div>
                  <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 class="align-middle white-space-nowrap">Date</th>
                              <th class="align-middle white-space-nowrap">Invoice number</th>
                              <th class="align-middle white-space-nowrap">Description</th>
                              <th class="align-middle white-space-nowrap">Amount</th>
                          </tr>
                      </thead>
                      <tbody id="tablecontents" class="ui-sortable">
                        @isset($history)
                          @if($history != '' && $history!= null)
                            @foreach ($history as $historys)
                              <tr class="row1" data-id="">
                                
                                  <td class="align-middle">{{date('d/m/Y', strtotime($historys->created_at))}}</td>
                                  {{-- <td class="align-middle"><a href="{{route('practitioner.team.view_history_invoice',['invoice_number' => $historys->plan_invoice_number])}}">{{$historys->plan_invoice_number}}</a></td> --}}
                                  <td class="align-middle"><a  style="cursor: pointer;" class="downloadPaymentHistoryInvoice" data-id="{{$historys->plan_invoice_number}}">{{$historys->plan_invoice_number}}</a></td>
                                  <td class="align-middle" style="text-transform:capitalize;">{{$historys->plan_description}}</td>
                                  <td class="align-middle" style="text-transform:capitalize;">${{number_format( preg_replace("/[^0-9.]/", "",  ($historys->paid_amount)?? 0.00),2) ?? "0.00"}}</td>
                              </tr>
                            @endforeach
                          @endif
                        @endisset
                          {{-- <tr class="row1" data-id="">
                              <td class="align-middle">27/12/22</td>
                              <td class="align-middle">0022</td>
                              <td class="align-middle">Plan Renewal</td>
                              <td class="align-middle" style="text-transform:capitalize;">$29.00</td>
                          </tr>
                          <tr class="row1" data-id="">
                              <td class="align-middle">23/11/22</td>
                              <td class="align-middle">0012</td>
                              <td class="align-middle">Plan Renewal</td>
                              <td class="align-middle" style="text-transform:capitalize;">$29.00</td>
                          </tr> --}}
                      </tbody>
                      </table>
                  </div>
                  </div>
              </div>
              

      
          </div>
      </div>
    @endif

    
</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="0">
                      @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>
   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;
        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 svg {
      width: 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>
@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 -next billing 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() {
        swal.fire({
            icon: 'info',
            title: 'Deactivate -service provider name-?',
            iconColor: '#f7bb85',
            html: el,
            text: 'ddd',
            showConfirmButton: false,
        })
    }

    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() {
        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;
                // 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.appointments.index") }}';
                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