@extends('front.inner-layout.app')
{{-- {{Session::get('message', 'info')}} --}}
@section('content')

<div class="page-content dashboard-wrapper mdashboard-wrapper">
   <!-- my plan page design start-->

   <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.plans') }}"><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="{{ URL::previous() }}"><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">My </span>Plan</h1>

         </nav>

         <div class="brdr-bttm w-100"></div>
      </div>
   </div>

   <div>

      <div class="dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-wrapper ">
        <div class="container">
            <div class="row">
               <div class="paymentplan-content text-center">
                  <h2>$0 pm</h2>
                  <p>You’ve chosen our $0 pm plan with integrated payment processing. Our payment partners take up to 24 business hours to activate payment processing. Would you like to apply now or take a look around My Appointments first? If you choose to take a look around, you'll have up to one month to activate your payment processing.</p>
                  <div class="row d-flex justify-content-around">
                     <a data-status="1" href="javascript:void(0)" class="choose_plan">Activate payment processing</a>
                     <a data-status="0" href="javascript:void(0)" class="choose_plan">Take a look around</a>
                  </div>
               </div>
            </div>
         </div>
      </div>

<!-- my plan page design end-->
</div>

<div class="cilent-popup invoicefilterpop setup-completepop">
   <div class="modal setup-complete" id="nextStepAfterPlanModal" role="dialog">
      <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content" style="max-width: 500px !important;">
            <div class="modal-body">
               <div class="setuptext-area">
                  <h4>Great choice!</h4>
                  <div class="hand-img">
                     <img style="width:60px;" src="{{asset('assets/images/great_choice_tick.png')}}" alt="">
                  </div>
                  <p>To get you started, we require a few details in order to customise your account. This includes setting your availability, business details and adding at least 1 service. Any sections you choose to skip now, can be revisited any time via the My settings tab.</p>
               </div>
            </div>
            <div class="modal-footer justify-content-center">
               <a style="right: 0px !important;" href="" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-30 mb-0 " id="nextUrlAfterPlanSelection">Next</a>
            </div>
         </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;}
</style>
@endsection

@section('js')
<script type="text/javascript">

   function getPlanExpiredStatus()
   {
      $.ajax({
         url: "{{ route('practitioner.plans.getPlanTrialStatus') }}",
         type: 'GET'
      }).done(function(response) {
         console.log( response );

         if( response.status == "trialexpired" ) {
            var cur_url = $(location).attr("href");
            var latpay_url = "{{ route('practitioner.paymentpage') }}";
            if( cur_url != latpay_url ) {
               window.location.href = response.redirect;
            }
         }
      });
   }

   $(document).ready( function() {
      $(".choose_plan").click( function(e) {
         e.preventDefault();

         var plan_id = '1';
         var status = $(this).data("status");

         $.ajax({
            type: "POST",
            url: "{{ route('practitioner.plan.save') }}",
            data: { plan_id:plan_id, status:status },
            success: function( response ) {
               console.log( response );

               if( response.error == false ) {
                  toastr.success( response.message );

                  if( status == 1 ) {
                     window.location.href = response.redirect;
                  } else {
                     $("#nextUrlAfterPlanSelection").attr( 'href', response.redirect );
                     $("#nextStepAfterPlanModal").modal("show");
                  }
               } else {
                  toastr.error( response.message );
               }
            }
         });
      });

      getPlanExpiredStatus();
   });
</script>
@endsection