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

@section('content')

<div class="page-content dashboard-wrapper mdashboard-wrapper">
   <div>
      <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/MA_Logo_long-bg-white.svg')}}" alt="" class="img-flude" style="height:44px">
               </a>

               @if( $practitioner->is_registered_from_fma == 1 )
                  <a href="javascript:void(0)" class="ml-auto" data-id='{{$practitioner->id}}' data-url="{{ route('practitioner.fma.welcomepage') }}" id="convertToFMA">Edit Find My Appointment profile</a>
                  <a href="{{ route('practitioner.logout') }}" class="btn text-green mb-3 my-auto">Logout</a>
               @else
                  <a href="{{ route('practitioner.logout') }}" class="btn text-green ml-auto mb-3 my-auto">Logout</a>
               @endif
            </nav>
            <div class="brdr-bttm w-100"></div>
         </div>
      </div>

      <div class="dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-wrapper ">
         <div class="container">
            <div class="row">
               <div class="paymentplan-content activate-payment-gateway  text-center">
                  <img src="{{asset('assets/images/comm-img-2.png')}}" alt="" class="img-fluid" />

                  <h2>We hope you’ve enjoyed using the My Appointments platform. Your free trial has now expired.</h2>
                  {{-- <p class="text-navy  mx-auto">To continue accessing all of our time saving and money saving features, <span id="activate-plan"> please activate your payment gateway</span><span class="d-none" id="upgrade-plan">please upgrade your plan</span></p> --}}
                  <p class="text-navy  mx-auto">On our Starter plan you'll never pay a monthly fee provided you're using our payment processing integration to process card payments.<br><span id="activate-plan">To continue on our $0 p/m plan, you'll need to activate<br></span> <span id="activate-plan">payment processing by completing a quick form.</span><span class="d-none" id="upgrade-plan">please upgrade your plan</span></p>
                  <div class="row d-flex justify-content-center">
                     <a href="{{ route('practitioner.paymentpage') }}">Activate my payment gateway</a>
                     {{-- @if( $practitioner->is_registered_from_fma == 1 )
                        <a href="javascript:void(0)" data-id='{{$practitioner->id}}' data-url="{{ route('practitioner.fma.welcomepage') }}" id="convertToFMA">Edit Find My Appointment profile</a>
                     @endif --}}
                  </div>
               </div>
            </div>
            <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%;}
            </style>
         </div>
      </div>
   </div>
</div>

@endsection

@section('modals')
@endsection

@section('css')

<style>
#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;}
#convertToFMA{
   display: inline-block;
   max-width: 313px;
   width: 100%;
   font-size: 19px;
   background-color: #68AEB4;
   color: white;
   height: 40px;
   padding: 5px 17px;
   border-radius: 100px;
}
</style>
@endsection

@section('import-scripts')
<script type="text/javascript">
   $(document).ready( function() {
      $(document).on( 'click', '#convertToFMA', function(e) {
         e.preventDefault();

         var practitioner_id = $(this).data("id");

         $.ajax({
            url: "{{ route('practitioner.ma.convertToFMA')}}",
            type: 'POST',
            data: {
               practitioner_id:practitioner_id
            },
            dataType:"JSON",
         }).done(function(response) {
            if (response.status == "success") {
               window.location.href = response.redirect;
            } else {
               Swal.fire({
                  icon: 'Error',
                  title: 'Something went wrong',
                  text: 'Please contact site admin.',
                  showClass: {
                     popup: 'animate__animated animate__fadeInDown'
                  },
                  hideClass: {
                     popup: 'animate__animated animate__fadeOutUp'
                  }
               });
            }
         });
      });
   });
</script>
@endsection