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


<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="{{route('practitioner.myplan')}}">
             <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 ">Downgrade<span class="arca-font"> <strong>My</strong> </span>Subscription</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>
<!-- Pay close account modal end -->

<div class="price-outer-div my-plan-page">
    <div class="container">
        <div class="row row justify-content-center">

            <div class="col-md-4 monthly">
                <div class="priceing-boxes @isset($myPlan) @if ($myPlan->plan_id == 1) priceing-boxes-active @endif @endisset">
                    <div class="priceing-tag">
                        <h3>STARTER</h3>
                        <h4>$0*</h4>
                        <h3 class="light_gray">PER MONTH</h3>
                    </div>
                    <div class="list-of-services">
                        <ul>
                            <li>Additional service providers $22pm</li>
                            <li>SMS Messages from 11c</li>
                            <li>Telehealth from 22c per 15 minute block</li>
                            <li>Online payment processing 1.7% + 25c</li>
                            <li>Terminal payment processing 1.5% + 25c</li>

                        </ul>
                    </div>
                    <div class="upgrde-plan-btn">
                        <a href="{{route('practitioner.downgrade_account',['plan_id' =>base64_encode(1)])}}" >@isset($myPlan) @if ($myPlan->plan_id == 1) Cancel plan @else Downgrade Plan @endif @endisset</a>
                    </div>
                </div>
                <div class="cancel-subscription-bottom-text">
                    <p class="cancel-subscription-bottom-tex-p">*Must be using online credit card payment processing to qualify for Starter plan</p>
                </div>
            </div>

            <div class="col-md-4 monthly">
                <div class="priceing-boxes @isset($myPlan) @if ($myPlan->plan_id == 2) priceing-boxes-active @endif @endisset">
                    <div class="priceing-tag">
                        <h3>PREMIUM</h3>
                        <h4>$39</h4>
                        <h3 class="light_gray">PER MONTH</h3>
                    </div>
                    <div class="list-of-services">
                        <ul>
                            <li>Additional service providers $15pm</li>
                            <li>75 free SMS per month</li>
                            <li>Unlimited Telehealth</li>
                            <li>Online payment processing 1.5% + 25c</li>
                            <li>Terminal payment processing 1.5% + 25c</li>
                            <li>Online health fund rebates</li>
                            <li>Calendar Sync</li>
                            <li>Gift vouchers</li>
                            <li>Email broadcasts</li>
                            <li>Email recalls</li>
                            <li>Dedicated virtual SMS number</li>
                            <li>Waitlist</li>
                        </ul>
                    </div>
                    <div class="upgrde-plan-btn">
                        {{-- <a href="@isset($myPlan) @if ($myPlan->plan_id == 2) {{route('practitioner.close_account')}} @else {{route('practitioner.downgrade_account',['plan_id' =>base64_encode(2)])}} @endif @endisset">@isset($myPlan) @if ($myPlan->plan_id == 2) Cancel plan @else Switch to monthly @endif @endisset</a> --}}
                        @isset($myPlan) 
                            @if ($myPlan->plan_id == 3)
                            <input type="hidden" id="downgrade_plan_id" name="downgrade_plan_id" value="2">

                            @else
                            <input type="hidden" id="downgrade_plan_id" name="downgrade_plan_id" value="1">

                        @endif
                        @endisset
                        <a @isset($myPlan) @if ($myPlan->plan_id == 2) href="{{route('practitioner.close_account')}}" @else href="" data-toggle="modal" data-target="#paysuremodal" @endif @endisset>@isset($myPlan) @if ($myPlan->plan_id == 2) Cancel plan @else Switch to monthly @endif @endisset</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 annually @isset($myPlan) @if ($myPlan->plan_id != 3) d-none @endif @endisset">
                <div class="priceing-boxes @isset($myPlan) @if ($myPlan->plan_id == 3) priceing-boxes-active @endif @endisset">
                    <div class="offer-round-box">
                        <span class="offer-cat">Save</span>
                        <span class="offer-price">$71</span>
                    </div>
                  <div class="priceing-tag">
                      <h3>PREMIUM</h3>
                      <h4>$397</h4>
                      <h3 class="light_gray">ANNUALLY</h3>
                  </div>
                  <div class="list-of-services">
                      <ul>
                        {{-- <li>Additional service providers $155 each p/a (Save $25)</li> --}}
                        <li>Additional service providers $156 each p/a (Save $24)</li>
                        <li>900 free SMS per year</li>
                        <li>Unlimited Telehealth</li>
                        <li>Online payment processing 1.5% + 25c</li>
                        <li>Terminal payment processing 1.5% + 25c</li>
                        <li>Online health fund rebates</li>
                        <li>Calendar Sync</li>
                        <li>Gift vouchers</li>
                        <li>Email broadcasts</li>
                        <li>Email recalls</li>
                        <li>Dedicated virtual SMS number</li>
                        <li>Waitlist</li>
                      </ul>
                  </div>
                  <div class="upgrde-plan-btn">
                    <a href="{{route('practitioner.close_account')}}">@isset($myPlan) @if ($myPlan->plan_id == 3) Cancel plan @else Upgrade Plan @endif @endisset</a>
                  </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" style="width:30px;">
                   <span aria-hidden="true">
                      <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 63 63" style="enable-background:new 0 0 63 63;" xml:space="preserve">
                         <style type="text/css">
                         .st0check{fill:#24303F;}
                         </style>
                         <g>
                         <path class="st0check" d="M19.8,19.6h7.1l4.9,7.3l4.8-7.3h6.9l-8.3,11.5l8.8,12.3h-7.2l-5.4-8.1L26,43.4h-6.8L28,31.1L19.8,19.6z"></path>
                         </g>
                         </svg>
                   </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">From your next billing date you will be moved to monthly billing losing your annual discount of $49</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 -->
@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;
      }
      
      .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: 2px solid #cecece;
        text-align: center;
        max-width: 390px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        align-content: flex-start;
        transition: .4s ease-in-out;
        /* min-height: 425px !important;
        max-height: 390px !important; */

        position: relative;
        height: 100%;
        padding-bottom: 50px;
      }
      .upgrde-plan-btn {
          position: absolute;
          bottom: 0;
      }
      .priceing-tag {padding-top: 20px;border-bottom: 0.5px solid #969696;padding-bottom: 15px;width: 100%;}
      .priceing-tag h3 {
          font-size: 15px;
          letter-spacing: 0px;
          line-height: 22px;
          color: #24303f;
          font-weight: bold;
      }
      .priceing-tag h3 {
          font-size: 15px;
          letter-spacing: 0px;
          line-height: 22px;
          color: #24303f;
          font-weight: bold;
      }
      .priceing-tag h3.light_gray{
          font-size: 13px;
          line-height: 34px;
          color: #969696;
      }
      .priceing-tag h4 {
          font-size: 27px;
          letter-spacing: 0px;
          line-height: 34px;
          color: #24303f;
          font-weight: bold;
      }
      .list-of-services {
          padding: 15px 0px;
          width: 100%;
          /* height: 100%; */
      }
      .list-of-services ul {margin: 0 0 0 0;padding: 0 0 0 0;}
      .list-of-services ul li {
          font-size: 13px;
          letter-spacing: 0px;
          line-height: 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;}
      }
      .cancel-subscription-bottom-tex-p {
        font-size: 13px;
        letter-spacing: 1px;
        line-height: 22px;
        color: #24303f;
        text-align: center;
        margin-top: 10px;
      }
  </style>
@endsection

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

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

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

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

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

</script>
<script>
    $('.close_account').click(function () {
        $(".loading").show();
          var url = "{{route('practitioner.paid_account_downgrade')}}";
          var downgrade_account = 1;
          $.ajax({
                url: url,
                data: {
                   close_account_reason : $('input[name="close_account_reason"]').val(),
                   downgrade_account : downgrade_account,
                   downgrade_plan_id:$('input[name="downgrade_plan_id"]').val(),
                    
                },
                type: 'POST',
            }).done(function (response) {
                $(".loading").hide();
                if (response.status == "success") {
                    Swal.fire({
                        icon: response.status,
                        title: 'Account downgraded',
                        text: 'Changes will take effect as of '+response.end_date,
                        allowOutsideClick: false,
                        showClass: {
                            popup: 'animate__animated animate__fadeInDown'
                        },
                        hideClass: {
                            popup: 'animate__animated animate__fadeOutUp'
                        }
                    }).then((result) => {
                        if (result.isConfirmed) {
                            $('#paysuremodal').modal('hide');
                            setTimeout(function() {
                                var baseUrl = "{{route('practitioner.myplan')}}";     
                                window.location.href = baseUrl;
                            }); 
                        }
                    });
                } else {
                }
            });
       });
    </script>
@endsection