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

<div class=" dashboard-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.welcomepage') }}"><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="">
            <div class="plan-page">
               <div class="row"> 
                  <div class="col-xl-5 col-lg-4 ">
                     <div class="plan-content">
                        <span>Simple, transparent pricing</span>
                        <h2>Choose the plan that’s right for you</h2>
                        <a class="btn btn-fill" target="_blank" href="https://staging.myappointments.app/pricing">Compare plans</a>
                     </div>

                  </div>   
                  <div class="col-xl-7 col-lg-8">
                     <div class="row plan-price-content">
                        @foreach( $planMasters as $key => $value )
                          @if($value->id == 1 || $value->id == 2)
                              <div class=" col-sm-6">
                                 <div class="plan-price">
                                    @php
                                       $name = "";
                                       $description = "";
                                       if ($value->id == 1) {
                                          $name = "Starter";
                                          $description = "No monthly fee provided you're using our payment processing integration to process card payments.";
                                       } 
                                       if ($value->id == 2) {
                                          $name = "Premium";
                                          $description = "Our all inclusive plan with 75 free sms, unlimited Telehealth + more. Payment processing optional.";
                                       }
                                    @endphp
                                       <h2>${{ round( $value->price, 0 ) }} pm</h2>

                                       <h3>{{ $name }}</h3>

                                       <p>{{ $description }}</p>

                                    @if( $value->id == 1 )
                                       <a data-planid="{{$value->id}}" href="javascript:void(0)" data-redirect="{{ route('practitioner.plan.zero') }}" class="btn choose_plan">Choose {{ $name }}</a>
                                    @else
                                       <a data-planid="{{$value->id}}" href="javascript:void(0)" class="btn choose_plan">Choose {{ $name }}</a>
                                    @endif      
                                    {{-- <h2>${{ round( $value->price, 0 ) }} pm</h2>
                                    <h3>{{ $value->name }}</h3>
                                    <p>{{ $value->description }}</p> --}}
                                    {{-- @if( $value->id == 1 )
                                       <a data-planid="{{$value->id}}" href="javascript:void(0)" data-redirect="{{ route('practitioner.plan.zero') }}" class="btn choose_plan">Choose ${{ round( $value->price, 0 ) }} pm plan</a>
                                    @else
                                       <a data-planid="{{$value->id}}" href="javascript:void(0)" class="btn choose_plan">Choose ${{ round( $value->price, 0 ) }} pm plan</a>
                                    @endif                               --}}


                                 </div>
                              </div>
                           @endif
                        @endforeach
                     </div>
                  </div>   
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- my plan page design end-->
</div>

<!-- My Details Plan Modal Start -->
<div class="choose-plan-area customscroll mydetailmodal">
   <div class="modal fade" id="mydetailmodalplan" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel13" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document" id="payment-getway-model">
         <div class="modal-content">
            <form id="addmydetailafter25plan">
               <div class="popup-marg">
                  <div class="modal-header">
                     <h5 class="modal-title text-center" id="exampleModalLabel13">My details</h5>
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <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">
                     <div class="whitecardbox">
                        <div class="mCustomScrollbar">
                           <div class="boxwhite">
                              <div class="pricing-area">
                                 <div class="label-input">
                                    <div class="row">
                                       <div class="col-lg-5 col-md-6">
                                          <label>Business name <span style="color:red;">*</span></label>
                                       </div>
                                       <div class="col-lg-7 col-md-6">
                                          <div class="form-group">
                                             <input type="text" class="form-control alpha-only" required name="name" id="25name">
                                          </div>
                                          <span class="invalid-feedback d-block"></span>
                                       </div>
                                    </div>
                                 </div>

                                 <div class="label-input">
                                    <div class="row">
                                       <div class="col-lg-5 col-md-6">
                                          <label>Business address <span style="color:red;">*</span></label>
                                       </div>
                                       <div class="col-lg-7 col-md-6">
                                          <div class="form-group">
                                             <input type="text" class="form-control" name="address" id="25address" required>
                                          </div>
                                          <span class="invalid-feedback d-block"></span>
                                       </div>
                                    </div>
                                 </div>

                                 <div class="label-input">
                                    <div class="row">
                                       <div class="col-lg-5 col-md-6">
                                          <label>Business phone number <span style="color:red;">*</span></label>
                                       </div>
                                       <div class="col-lg-7 col-md-6">
                                          <div class="form-group">
                                             <input type="text" class="form-control numeric-only" name="office_phone" id="25officephone" required>

                                          </div>
                                          <span class="invalid-feedback d-block"></span>
                                       </div>
                                    </div>
                                 </div>
                                 
                                 <div>
                                    <input type="hidden" name="errmsg">
                                 </div>
                                 <span class="invalid-feedback d-block"></span>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="modal-footer">
                     <button type="submit" id="submit25plan" class="cursor-pointer d-g-btn w-100" >Submit</button>
                  </div>
               </div>
            </form>
         </div>
      </div>
   </div>
</div>
<!-- My Details Plan modal End -->

{{--<div class="payment-getway-model ">
   <div class="modal" id="nextStepAfterPlanModal" tabindex="-1" role="dialog">
      <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content">
            <div class="">
               <div class="modal-header row">
                  <h5 class="modal-title text-center col-12 mb-4" id="exampleModalLabel2">Great choice!</h5>
                  <div class="img col-12 text-center mb-4">
                     <img src="{{asset('assets/images/Great-choice-tick.svg')}}" alt="" class="img-fluid img-thums text-center" />
                  </div>
               </div>
               <div class="modal-body p-0 text-center">

               <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>
                  <!-- <p>Next we will require some further details from you in order to customize your account.</p>

                  
                  <p>Not all fields are  required to proceed, mandatory fields are marked by a red asterix. You can return to any sections you choose to skip now at any time via My settings tab.</p> -->
               </div>
               <div class="modal-footer justify-content-center">
                  <a href="" id="nextUrlAfterPlanSelection" class="cursor-pointer d-g-btn">Next</a>
               </div>
            </div>
         </div>
      </div>
   </div>
</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() {

      getPlanExpiredStatus();

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

         // var plan_id = '2';
         var plan_id = $(this).data('planid');
         var status = '1';

         if( plan_id == 1 ) {
            window.location.href = $(this).data('redirect');
            /*var redirectUrl = $(this).data('redirect');
            $("#nextUrlAfterPlanSelection").attr( 'href', redirectUrl );
            $("#nextStepAfterPlanModal").modal("show");*/
         } else {
            $.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 );
                     $("#nextUrlAfterPlanSelection").attr( 'href', response.redirect );
                     $("#nextStepAfterPlanModal").modal("show");
                     // window.location.href = response.redirect;
                  } else {
                     toastr.error( response.message );
                  }
               }
            });
         }
      });
   });
</script>
@endsection