@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="{{ 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="{{ 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"></h1>
          @if( Auth::guard('practitioner')->check() )
             <a href="{{ route('practitioner.logout') }}" id="" class="btn text-green mb-3 ml-auto my-auto" >Logout</a>
          @endif
       </nav>
       <!-- @include( 'front.practitioner.import.include.navbar' ) -->
       <div class="brdr-bttm w-100"></div>
    </div>
 </div>
    <div class="error-wrapper">
      <div class="error-img">
        <img src='{{asset('assets/images/ops.png')}}' alt="404 img" class="img-flude" />
      </div>
      <div class="error-content">
        <h1>Something went wrong</h1> 
     
        @if(isset($pre_myPlan) && $pre_myPlan->plan_id == 1 && $pre_myPlan->free_plan_status == 'fail')
        <p>On {{$end_date}} we attempted to debit your scheduled monthly payment in the amount of $@isset($monthlyCost ){{$monthlyCost}} @endisset however, the payment was unsuccessful. Please bring your account up to date to continue uninterrupted use of your My Appointments account.</p>
          <p>If you no longer need additional calendars for your service provider/s, you can deactivate them by going to the <a href="{{route('practitioner.myplan')}}" style="color: #4b7b8a;">My Plan page.</a> </p>
        @else
          <p>On {{$end_date}} we attempted to debit your scheduled monthly payment in the amount of $@isset($monthlyCost ){{$monthlyCost}} @endisset however, the payment was unsuccessful. Please bring your account up to date to continue uninterrupted use of your My Appointments account.</p>
          
          @endif
          <p><a href="{{ route('practitioner.upgrade.plan', $id ) }}" class="btn btn-fill pay-now-btn">Pay now</a></p>
        <!-- <p><a href="#" target="_blank" class="btn-pay-later">Pay later</a></p> -->
        <p><a href="#exampleModal" class="popup-link"  class="btn-pay-later" data-toggle="modal" data-target="#exampleModal1" style="color: #45747a;">Pay later</a></p>
      </div>
    </div>
    <div class="modal fade-in" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document" style="max-width: 453px;margin-bottom:0px">
          <div class="modal-body bg-white text-center">
            <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 class="popup-emj-svg">
                <?xml version="1.0" encoding="UTF-8"?><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 464.8 464.81"><defs><style>.cls-1{fill:#24303f;}</style></defs><g id="Layer_2"><g><path class="cls-1" d="m416.63,90.8C378.81,41.59,324.09,10.05,262.54,2c-60.94-7.97-121.34,8.04-170.3,45.07l-17.7-17.73c-5.05-5.06-9.71-3.37-10.36,3.75l-5.81,63.46c-.65,7.11,4.64,12.41,11.76,11.77l63.46-5.73c7.12-.64,8.81-5.31,3.76-10.36l-18.36-18.39c40.31-28.89,89.3-41.25,138.71-34.78,51.65,6.76,97.57,33.22,129.31,74.52,31.74,41.3,45.49,92.48,38.73,144.12-4.8,36.68-19.54,70.47-42.47,98.35-9.36,11.37-20.08,21.76-32.05,30.96-41.3,31.74-92.48,45.5-144.13,38.74-51.64-6.76-97.56-33.22-129.3-74.52-30.92-40.23-44.83-90.14-39.18-140.55,1.15-10.26-6.23-19.51-16.49-20.65-10.25-1.15-19.5,6.23-20.64,16.49-6.75,60.07,9.83,119.55,46.68,167.49,37.82,49.21,92.55,80.75,154.09,88.8,61.54,8.05,122.53-8.35,171.75-46.17,14.26-10.95,27.04-23.34,38.19-36.89,27.34-33.22,44.89-73.48,50.62-117.19,8.05-61.54-8.34-122.54-46.16-171.75Z"/><path class="cls-1" d="m223.27,81.15c-8.35,0-15.13,6.77-15.13,15.12v150.75l137.87,71.26c2.22,1.15,4.6,1.7,6.93,1.7,5.48,0,10.77-2.98,13.45-8.18,3.84-7.42.93-16.55-6.49-20.39l-121.5-62.81V96.28c0-8.35-6.78-15.13-15.14-15.13Z"/></g></g></svg>
      
              </div>
            <h2 class="popup-title">Pay later</h2>
            <p class="popup-content-text">
              You’ll have until {{$end_date_add_days}} to bring your account up to date. We’ll remind you every time you login. 
            </p>
        </div>
      </div>
      <p class="ok-btn" style="    max-width: 453px;
        margin: 0 auto;
        text-align: center;
        background-color: #ffffff;
        padding-top: 0px;
        padding-bottom: 30px;"><a href="{{$url}}" class="btn btn-fill pay-now-btn" style="min-height: 40px; border-radius: 8px; background-color: #45b1b6; padding-top: 7px;">Pay later</a></
    </div>
  @endsection
  @section('import-scripts')
  @endsection
  <style>
    body{
      background-color: white;
      margin: 0px 0px;
    }
    
    * {  font-family: "europa", sans-serif; }

    .error-wrapper {display: flex;justify-content: center;flex-direction: column;min-height: 100vh;font-family: "europa", sans-serif;;padding: 20px 0px;}
    .error-img {text-align: right;margin-right: -20px;margin-bottom: 40px;}
    .error-img img {width: 100%;}
    .error-content {text-align: center;color: #24303f;}
    .error-content h1 {font-size: 35px;margin: 0 0 35px;font-family: "europa", sans-serif;font-weight: bold;}
    .error-content p { font-weight: normal; margin: 0 0 86px; font-family: "europa", sans-serif; font-size: 15px; letter-spacing: 0px; line-height: 27px; color: #203040;max-width: 820px; margin: 0 auto;margin-bottom: 30px;}
    .error-content .btn {font-size: 28px;line-height: 1;font-weight: bold;color: #fff;background: #68afb5;width: 313px;height: 66px;padding: 8px 12px;border-radius: 5px;transition: all .5s;cursor: pointer;text-decoration: none;display: inline-flex;align-items: center;justify-content: center;font-family: "europa", sans-serif;}
    .error-content .btn:hover {background: #4F7379;}
    a.btn-pay-later { font-size: 15px; letter-spacing: 0px; line-height: 27px; color: #45747a; }
    a.btn.btn-fill.pay-now-btn { font-size: 17px; letter-spacing: 0px; line-height: 19px; color: #ffffff; font-weight: bold; border-radius: 20px; background-color: #68afb5; padding: 1px; height: 35px; max-width: 295px; }
    / responsive start /
    @media (max-width: 767px) {
      .error-content h1 {font-size: 30px;margin: 0 0 25px;}
      .error-content p {font-size: 26px;margin: 0 0 56px;}
      .error-content .btn {width: 243px;height: 50px;font-size: 22px;}
    }

    @media (max-width: 575px) {
      .error-wrapper {padding: 15px;}
      .error-img {margin-right: -15px;}
      .error-content p {font-size: 20px;}
    }

    .error-img {
        text-align: right;
        margin-right: 0px;
        margin-bottom: 40px;
    }
    .popup-title {font-size: 31px !important; letter-spacing: 2px; line-height: 5px; color: #000000;padding-top: 40px;padding-bottom: 26px;}
    .popup-content-text {font-size: 13px; letter-spacing: 1px; line-height: 21px; color: #000000;}
    .popup-emj-svg {
        width: 83px;
        height: 78px;
        margin: 0 auto;
        margin-bottom: 41PX;
    }

    .modal-dialog .close {
        color: #24303f;
        opacity: 1;
    }
  </style>