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

<style>
/* close account start */
.close-account-outer {
    max-width: 503px;
    min-height: 528px;
    border-radius: 5px;
    background-color: #ffffff;
    border: 0.5px solid #969696;
    text-align: center;
    padding: 25px 30px 40px 30px;
}
h4.close-aacount-h4 {
    font-size: 17px;
    letter-spacing: 0px;
    line-height: 22px;
    color: #24303f;
    font-weight: bold;
    text-align: center;
    padding-top: 35px;
    padding-bottom: 20px;
}
.close-aacount-p {
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 22px;
    color: #24303f;
    text-align: center;
    margin-bottom: 0px;
}
.close-account-input-inner input {
    border-radius: 5px;
    background-color: #ffffff;
    border: 0.5px solid #969696;
    margin-top: 30px;
    /* margin-bottom: 40px; */
    min-height: 35px;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}
.close-account-inputbox button {
    min-height: 40px;
    border-radius: 8px;
    background-color: #68afb5;
    color: #fff;
    font-size: 17px;
    letter-spacing: 1px;
    line-height: 13px;
    color: #ffffff;
    font-family: "Europa";
    text-align: center;
    outline: none;
    border: none;
    width: 100%;
}
#close_account_error {text-align: left;}
.close-account-input-inner {margin-bottom: 40px;}
/* close account end */
</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 ">Close<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="close-account-outer">
                    <div class="close-account-img-box">
                        <img src="{{asset('assets/images/close-account-icon.png')}}" alt="" class="img-flude" style="min-width: 40px">
                    </div>
                    <div class="close-account-content-box">
                        <h4 class="close-aacount-h4">We’re sorry to see you go</h4>
                        <p class="close-aacount-p">
                            Before you proceed, please note that closing your account is permanent and irreversible. You will lose access to all your data, including any practitioner’s calendars you may have added, invoicing and any account-related information.
                            <br>
                            <br>
                            If you’d like to proceed, please let us know your reason for leaving and if there is anything we could have done better. Your feedback is valuable to us and will help us improve our services.
                        </p>
                        
                    </div>
                    <div class="close-account-inputbox">
                        <form action="#">
                            <div class="close-account-input-inner">
                                <input type="text" placeholder="I’m closing my account because..." id="close_account_reason" name="close_account_reason">
                                <div id="close_account_error"></div>
                            </div>
                            
                            <button type="button" id="Permanently_close">Permanently close my account</button>
                        </form>   
                    </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 != 1)
                    <p class="font-14 text-blue">Your account will be closed as of your next billing date</p>
                @else
                    <p class="font-14 text-blue">You will instantly lose access to your account. This cannot be undone</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>
  <!-- pay suremodal modal end -->
@endsection

{{-- popup design start  --}}

@section('css')

<style>
    .offer-round-box {min-width: 80px;min-height: 80px;border-radius: 40px;background-color: #68afb5;position: absolute; right: -18px; top: -30px; display: flex; flex-wrap: wrap;align-content: center;}
    .offer-cat {font-size: 15px; letter-spacing: 0px; line-height: 22px; color: #ffffff; font-weight: bold; text-align: center;width: 100%;}
    .offer-price {font-size: 27px;letter-spacing: 0px;line-height: 34px;color: #ffffff;font-weight: bold;text-align: center;width: 100%;}
     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%;}
     #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;}
  
      .right-side-nav-plan {
          width: 83%;
          text-align: right;
      }
      .font-w-400 {font-weight: 400;}
      .three-dot-dropdown .dropdown-menu.min-width-90 {width: 120px;}
      .swal2-icon.swal2-info ,.swal2-icon.swal2-info .swal2-icon-content {
          border-color: #f8ba85 !important;
          color: #f8ba85 !important;
      }
      .light-green {color: #45747a;}
      .swal2-icon-info .swal2-cancel, .swal2-icon-info .swal2-confirm {
      border: 1px solid #45b1b6!important;
      background: #45b1b6!important;
      }
      
      .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
      margin: 0px 15px;
      }
  
      .switch input { 
      opacity: 0;
      width: 0;
      height: 0;
      }
  
      .switch .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: .4s;
      transition: .4s;
      }
  
      .switch .slider:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
      }
      .switch .slider:before {
        height: 11px;
        width: 11px;
      }
      .switch {
        width: 37px;
        height: 19px;
      }
  
      .switch input:checked + .slider {
      background-color: #67aeb5;
      }
  
      .switch input:focus + .slider {
      box-shadow: 0 0 1px #67aeb5;
      }
  
      .switch input:checked + .slider:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
      }
      .switch input:checked + .slider:before {
      -webkit-transform: translateX(18px);
      -ms-transform: translateX(18px);
      transform: translateX(18px);
      }
  
      /* Rounded sliders */
      .slider.round {
      border-radius: 34px;
      }
  
      .slider.round:before {
      border-radius: 50%;
      }
      .switch-btn-outer {
          display: flex;
          align-items: center;
          margin: 0 auto;
          margin-bottom: 30px;
      }
      
      .price-outer-div {
          padding-top: 50px;
          padding-bottom: 50px;
      }
  
      .priceing-boxes {
          border-radius: 5px;
          background-color: #ffffff;
          border: 0.5px solid #cecece;
          text-align: center;
          max-width: 390px;
          margin: 0 auto;
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          align-content: flex-start;
          transition: .4s ease-in-out;
          min-height: 425px !important;
          position: relative;
      }
      .upgrde-plan-btn {
          position: absolute;
          bottom: 0;
      }
      .priceing-tag {padding-top: 20px;border-bottom: 0.5px solid #969696;padding-bottom: 15px;width: 100%;}
      .priceing-tag h3 {
          font-size: 15px;
          letter-spacing: 0px;
          line-height: 22px;
          color: #24303f;
          font-weight: bold;
      }
      .priceing-tag h3 {
          font-size: 15px;
          letter-spacing: 0px;
          line-height: 22px;
          color: #24303f;
          font-weight: bold;
      }
      .priceing-tag h3.light_gray{
          font-size: 13px;
          line-height: 34px;
          color: #969696;
      }
      .priceing-tag h4 {
          font-size: 27px;
          letter-spacing: 0px;
          line-height: 34px;
          color: #24303f;
          font-weight: bold;
      }
      .list-of-services {
          padding: 15px 0px;
          width: 100%;
          /* height: 100%; */
      }
      .list-of-services ul {margin: 0 0 0 0;padding: 0 0 0 0;}
      .list-of-services ul li {
          font-size: 13px;
          letter-spacing: 0px;
          line-height: 20px;
          color: #24303f;
          padding: 4px 0px;
      }
      .upgrde-plan-btn {
          width: 100%;
      }
      .upgrde-plan-btn a {
          font-size: 17px;
          letter-spacing: 0px;
          line-height: 25px;
          color: #ffffff;
          font-family: "Europa";
          text-align: center;
          padding: 15px 0px;
          width: 100%;
          display: flex;
          justify-content: center;
          background-color: #45747a;
      }
      .upgrde-plan-btn a:hover ,.priceing-boxes:hover a {
          background-color: #68afb5;
      }
      .myplans-table .btn {
          transition: all .4s;
          min-width: 141px !important;
      }
      .m-auto-center{
      margin: 0 auto;
      text-align: center !important;
      }
      .priceing-boxes:hover , .priceing-boxes-active{
          border: 2px solid #68afb5;
      }
      .my-plan-head-a {font-weight:normal}
      .myplans-table .btn {
          font-weight: normal;
      }
      .service-provider .modal-header {border: none;}
      .service-provider .modal-body {margin: 20px auto;}
      .service-provider-cost {
          margin: 30px 0px !important;
      }
      .bottom-text-css {
        font-size: 17px;
        letter-spacing: 0px;
        line-height: 94px;
        color: #45747a;
        text-align: center;
        margin-top: 20px;
        display: block;
      }
      .bottom-text-css:hover, .bottom-text-css:active ,.bottom-text-css:focus{
        color:#68afb5
      }
      .icon-color-custom-css {
        border-color: #527479 !important;
        color: #527479 !important;
      }
      .switch-btn-outer span {
          color: #898989;
      }
      .blue-t-color {color:#68afb5 !important;}
      .swal2-actions-custom-css button {
          margin-bottom: 30px;
          width: 100%;
          max-width: 391px;
          min-height: 39px;
      }
      .priceing-boxes-active .upgrde-plan-btn a{background-color: #68afb5;}
      @media (max-width: 991px){
          .treatment-note-templates {
              margin-top: 0px;
          }
          .payment-method-outer {margin-top: 50px;}
          .my-plan-page{
              padding-left: 15px;
              padding-right: 15px;
          }
      }
      @media (max-width: 767px){
          .priceing-boxes {
              margin-bottom: 30px;
          }
          .my-plan-head-a {width: 100%;margin-top: 15px !important;}
      }
  </style>
@endsection

@section('import-scripts')
<script src="https://lateralpayments.com/checkout/scripts/latpay2.js"></script>
<script>
    equalheight = function(container){

var currentTallest = 0,
    currentRowStart = 0,
    rowDivs = new Array(),
    $el,
    topPosition = 0;
$(container).each(function() {

$el = $(this);
$($el).height('auto')
topPostion = $el.position().top;

if (currentRowStart != topPostion) {
    for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
    rowDivs[currentDiv].height(currentTallest);
    }
    rowDivs.length = 0; // empty the array
    currentRowStart = topPostion;
    currentTallest = $el.height();
    rowDivs.push($el);
} else {
    rowDivs.push($el);
    currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
}
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
    rowDivs[currentDiv].height(currentTallest);
}
});
}

$(window).load(function() {
    equalheight('.priceing-boxes');
    $('.slider').click(function () {
      equalheight('.priceing-boxes');
    })
});
$(document).on('click','#Permanently_close',function(){
    $('#close_account_error').text('');
    var reason = $('input[name="close_account_reason"]').val();
    if(reason == ''){
        $("#close_account_error").html('<span style="color:red">Close account reason field is required</span>');
        return false;
    }
    $('#paysuremodal').modal('show');
});
$('.close_account').click(function () {
    $(".loading").show();
    var plan_id = '{{$plan_id}}';
    if(plan_id == 1){
        var url =  "{{ route('practitioner.close.account')}}";
    }else{
        var url = "{{route('practitioner.paid_account_downgrade')}}";
    }
      $.ajax({
            url: url,
            data: {
               close_account_reason : $('input[name="close_account_reason"]').val() 
            },
            type: 'POST',
        }).done(function (response) {
            $(".loading").hide();
            if (response.status == "success") {
                Swal.fire({
                    icon: response.status,
                    title: response.msg,
                    text: 'Thank you for being a part of our community, and we hope to see you again in the future.',
                    allowOutsideClick: false,
                    showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                    },
                    hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                    }
                }).then((result) => {
                  if (result.isConfirmed) {
                    $('#paysuremodal').modal('hide');
                    if(plan_id == 1){
                            setTimeout(function() {
                                var baseUrl = "{{route('practitioner.logout')}}";     
                                window.location.href = baseUrl;
                            });
                        }else{
                            setTimeout(function() {
                                var baseUrl = "{{route('practitioner.myplan')}}";     
                                window.location.href = baseUrl;
                            }); 
                    }
                  }
               });
            } else {
            }
        });
   });
</script>
@endsection