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

<style>
.price-outer-div.my-plan-page {
   padding: 50px 0;
}
.downgrade-account-outer {
   max-width: 503px;
   min-height: 465px;
   border-radius: 5px;
   background-color: #ffffff;
   border: 0.5px solid #969696;
   padding: 25px;
   position: relative;
   padding-bottom: 60px;
}
.downgrade-account-h4 {
    font-size: 17px;
    letter-spacing: 0px;
    line-height: 22px;
    color: #24303f;
    font-weight: bold;
}
.plan-advan-dis ul li span {
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 22px;
    color: #24303f;
}
.downgrade-account-p {
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 18px;
    color: #24303f;
    margin: 15px 0;
}
.plan-advan-dis ul {margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;}
/* .plan-advan-dis ul li img {
    min-width: 28px !important;
    max-width: 28px;
} */
.plan-advan-dis ul li img {
    min-width: 28px !important;
    margin-right: 10px;
}
.plan-advan-dis-1 ul li img {
    min-width: 18px !important;
}
.plan-advan-dis ul li {margin-bottom:15px;}
.plan-advan-dis.plan-advan-dis-1 ul {
    margin-left: 4px;
}



.downgrade-bottom-btn {
    bottom: 0px;
    background-color: #45747a;
    width: 95%;
    position: absolute;
    left: 0px;
    width: 100%;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.downgrade-bottom-btn a {
   font-size: 17px;
   letter-spacing: 0px;
   line-height: 62px;
   color: #ffffff;
   width: 100%;
   text-align: center;
}
.downgrade-bottom-btn:hover{  color: #fff!important;
   background: #68afb5!important;
}
.downgrade-bottom-btn a:hover ,.downgrade-bottom-btn a:active ,.downgrade-bottom-btn a:focus ,.downgrade-bottom-btn:hover{  color: #fff!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 ">Downgrade<span class="arca-font"> <strong>My</strong> </span>Account</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-5">
               <div class="downgrade-account-outer">
                  <h4 class="downgrade-account-h4">Plan downgrade</h4>
                  <p class="downgrade-account-p">
                     At the end of your billing cycle you will no longer receive:
                  </p>
                  <div class="plan-advan-dis">
                     <ul>
                        <li>
                           <img src="{{asset('assets/images/downgrad-down.png')}}" alt="" class="img-flude" >
                           <span>Unlimited telehealth</span>
                        </li>
                        <li><img src="{{asset('assets/images/downgrad-down.png')}}" alt="" class="img-flude" ><span>@if($plan_id != '' && $plan_id == 3) 900 free SMS annually @else 75 free SMS p/m @endif</span></li>
                        <li>
                           <img src="{{asset('assets/images/downgrad-down.png')}}" alt="" class="img-flude" >
                           <span>Credit card authorisation</span>
                        </li>
                        <li>
                           <img src="{{asset('assets/images/downgrad-down.png')}}" alt="" class="img-flude" >
                           <span>Online health fund rebates</span>
                        </li>
                        <li>
                           <img src="{{asset('assets/images/downgrad-down.png')}}" alt="" class="img-flude" >
                           <span>Calendar Sync</span>
                        </li>
                        <li>
                           <img src="{{asset('assets/images/downgrad-down.png')}}" alt="" class="img-flude" >
                           <span>Gift vouchers</span>
                        </li>
                        <li>
                           <img src="{{asset('assets/images/downgrad-down.png')}}" alt="" class="img-flude" >
                           <span>Email broadcasts</span>
                        </li>
                        <li>
                           <img src="{{asset('assets/images/downgrad-down.png')}}" alt="" class="img-flude" >
                           <span>Email recalls</span>
                        </li>
                        <li>
                           <img src="{{asset('assets/images/downgrad-down.png')}}" alt="" class="img-flude" >
                           <span>Dedicated virtual SMS number</span>
                        </li>
                     </ul>
                  </div>
                  <p class="downgrade-account-p">
                     The following costs will increase:
                  </p>
                  <div class="plan-advan-dis plan-advan-dis-1">
                     <ul>
                        <li>
                           <img src="{{asset('assets/images/downgrad-up.png')}}" alt="" class="img-flude" >
                           <span>Payment processing 1.7% + 25c per transaction</span>
                        </li>
                        <li>
                           <img src="{{asset('assets/images/downgrad-up.png')}}" alt="" class="img-flude" >
                           <span>Additional calendars $22 p/m</span></li>
                     </ul>
                  </div>
                  <div class="downgrade-bottom-btn">
                     {{-- <a href="" class = "close_account" data-toggle="modal" data-target="#paysuremodal">Confirm downgrade</a> --}}
                     <a href="#" class="close_account">Confirm downgrade</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> --}}
               @if($plan_id != '' && $plan_id == 3)
                  <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>
               @else
                  <p class="font-14 text-blue">From your next billing date you will be moved to monthly billing losing your annual discount of $0</p>
               @endif
               <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>
 <input type="hidden" id="downgrade_plan_id" name="downgrade_plan_id" value="@if(request()->plan_id){{base64_decode(request()->plan_id)}}@else 1 @endif">
 <!-- pay suremodal modal end -->
@section('css')

<style>

</style>
@endsection

@section('import-scripts')
<script src="https://lateralpayments.com/checkout/scripts/latpay2.js"></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;
                        });
                  }
               });

               // $('#paysuremodal').modal('hide');
               //      setTimeout(function() {
               //          var baseUrl = "{{route('practitioner.myplan')}}";     
               //          window.location.href = baseUrl;
               //      }, 2000); 
            } else {
            }
        });
   });
</script>

@endsection