{{--@extends('front.inner-layout.app')
@section('content')--}}

{{-- @extends('front.practitioner.import.template.import') --}}
@extends('front.inner-layout.app')
@section('content')
<meta name="csrf-token" content="{{csrf_token()}}" />
<link href="{{ asset('assets/css/colorPick.css') }}" rel='stylesheet' />
<link href="{{ asset('assets/css/colorPick.dark.theme.css') }}" rel='stylesheet' />
<style>

.price-outer-div.my-plan-page {
    padding-top: 45px;
    padding-bottom: 140px;
}
.one-way-calendar-text {
    font-size: 15px;
    letter-spacing: 0px;
    line-height: 19px;
    color: #24303f;
}
.downgrade-account-outer {
   max-width: 503px;
   min-height: 465px;
   border-radius: 5px;
   background-color: #ffffff;
   border: 0.5px solid #969696;
   padding: 40px 35px;
   position: relative;
   padding-bottom: 60px;
}
.downgrade-account-h4 {
    font-size: 20px;
    line-height: 21px;
    color: #24303f;
    font-weight: bold;
    margin-bottom: 15px;
}
.plan-advan-dis ul li span {
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 22px;
    color: #24303f;
}
.downgrade-account-p {
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 18px;
    color: #24303f;
    margin-top: 35px;
    margin-bottom: 25px;
}
.plan-advan-dis ul {margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;}

.plan-advan-dis ul li img {
    min-width: 28px !important;
    margin-right: 10px;
}
.plan-advan-dis-1 ul li img {
    min-width: 18px !important;
}
.plan-advan-dis ul li {margin-bottom:25px;}
.plan-advan-dis.plan-advan-dis-1 ul {
    margin-left: 4px;
}

.syn-calendar-btn a {
    border-radius: 5px;
    background-color: #68afb5;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 9px;
    color: #ffffff;
    font-weight: bold;
    width: 100%;
    display: flex;
    min-height: 35px;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
    margin-top: 35px;
}
.team-member-calendar-btn a {
    border-radius: 5px;
    background-color: #68afb5;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 9px;
    color: #ffffff;
    font-weight: bold;
    width: 100%;
    display: flex;
    min-height: 35px;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.team-member-input input {
  border-radius: 5px;
  background-color: #ffffff;
  border: 0.5px solid #969696;
  font-size: 13px;
  letter-spacing: 0px;
  line-height: 31px;
  color: #24303f;
  width: 100%;
  margin-top: 10px; 
  padding-left: 15px;
}

.downgrade-bottom-btn {
    bottom: 0px;
    background-color: #45747a;
    width: 95%;
    position: absolute;
    left: 0px;
    width: 100%;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.downgrade-bottom-btn a {
   font-size: 17px;
   letter-spacing: 0px;
   line-height: 62px;
   color: #ffffff;
   width: 100%;
   text-align: center;
}
.downgrade-bottom-btn:hover{  color: #fff!important;
   background: #68afb5!important;
}
.downgrade-bottom-btn a:hover ,.downgrade-bottom-btn a:active ,.downgrade-bottom-btn a:focus ,.downgrade-bottom-btn:hover{  color: #fff!important;

}
.team-member-calendar-btn {margin-top: 25px;}
p.font-14.text-blue {
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 17px;
    color: #24303f;
}
.loading-image  {
    margin-bottom: 20px;
}

.price-outer-div.my-plan-page {
    padding-top: 45px;
    padding-bottom: 140px;
}
.one-way-calendar-text {
    font-size: 15px;
    letter-spacing: 0px;
    line-height: 19px;
    color: #24303f;
}
.downgrade-account-outer {
   max-width: 503px;
   min-height: 465px;
   border-radius: 5px;
   background-color: #ffffff;
   border: 0.5px solid #969696;
   padding: 40px 35px;
   position: relative;
   padding-bottom: 60px;
}
.downgrade-account-h4 {
    font-size: 20px;
    line-height: 21px;
    color: #24303f;
    font-weight: bold;
    margin-bottom: 15px;
}
.plan-advan-dis ul li span {
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 22px;
    color: #24303f;
}
.downgrade-account-p {
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 18px;
    color: #24303f;
    margin-top: 35px;
    margin-bottom: 25px;
}
.plan-advan-dis ul {margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;}

.plan-advan-dis ul li img {
    min-width: 28px !important;
    margin-right: 10px;
}
.plan-advan-dis-1 ul li img {
    min-width: 18px !important;
}
.plan-advan-dis ul li {margin-bottom:25px;}
.plan-advan-dis.plan-advan-dis-1 ul {
    margin-left: 4px;
}

.syn-calendar-btn a {
    border-radius: 5px;
    background-color: #68afb5;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 9px;
    color: #ffffff;
    font-weight: bold;
    width: 100%;
    display: flex;
    min-height: 35px;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
    margin-top: 35px;
}
.team-member-calendar-btn a {
    border-radius: 5px;
    background-color: #68afb5;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 9px;
    color: #ffffff;
    font-weight: bold;
    width: 100%;
    display: flex;
    min-height: 35px;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.team-member-input input {
  border-radius: 5px;
  background-color: #ffffff;
  border: 0.5px solid #969696;
  font-size: 13px;
  letter-spacing: 0px;
  line-height: 31px;
  color: #24303f;
  width: 100%;
  margin-top: 10px;
  padding-left: 15px;
}

.downgrade-bottom-btn {
    bottom: 0px;
    background-color: #45747a;
    width: 95%;
    position: absolute;
    left: 0px;
    width: 100%;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.downgrade-bottom-btn a {
   font-size: 17px;
   letter-spacing: 0px;
   line-height: 62px;
   color: #ffffff;
   width: 100%;
   text-align: center;
}
.downgrade-bottom-btn:hover{  color: #fff!important;
   background: #68afb5!important;
}
.downgrade-bottom-btn a:hover ,.downgrade-bottom-btn a:active ,.downgrade-bottom-btn a:focus ,.downgrade-bottom-btn:hover{  color: #fff!important;

}
.team-member-calendar-btn {margin-top: 25px;}
p.font-14.text-blue {
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 17px;
    color: #24303f;
}
.loading-image  {
    margin-bottom: 20px;
}

#customBtn {
	text-align: center;
      display: flex;
      background: white;
      color: #444;
      width: 242px;
      border-radius: 0px;
      border: 1px solid #4285f4;
      box-shadow: 1px 1px 1px grey;
      box-shadow: 0 2px 4px 0 rgba(0,0,0,.25);
      white-space: nowrap;
      margin:0 auto;
    }
    #customBtn:hover {
      cursor: pointer;
    }
    span.label {
      font-family: 'Roboto';
      font-weight: normal;
    }
    span.icon {
      background: url('https://developers-dot-devsite-v2-prod.appspot.com/identity/sign-in/g-normal.png') transparent 5px 50% no-repeat;
      display: inline-block;
      vertical-align: middle;
      width: 52px;
      height: 52px;
      background-position: center;
    }
    span.buttonText {
      display: inline-block;
      vertical-align: middle;
      font-size: 14px;
      font-weight: bold;
      / Use the Roboto font that is loaded in the <head> /
      font-family: 'Roboto', sans-serif;
    }
#gSignInWrapper{
	text-align: center;
  padding-top: 15px;
  padding-bottom: 30px;
}



.buttonText {
  background-color: #4285f4;
  height: 52px;
  width: 83%;
  align-items: center;
  text-align: center;
  justify-content: center;
  align-items: center;
    display: flex !important;

}
#custombtn {
    display: flex;
    align-items: center;
}
.buttonText a {
    font-size: 16px;
    line-height: 18px;
    background: transparent !important;
    color: #ffffff;
    text-decoration:none;
    font-weight: 500;
}
.disabled-link {
    pointer-events: none;
    opacity: 1; /* or any other styling you want to indicate disabled state */
}

@media (max-width:767px) {
  .price-outer-div.my-plan-page {
    padding: 0 0 40px;
  }
}

.get_list_btn {
    margin-top: 31px;
    align-items: center;
    height: 33px !important;
}
</style>
<!-- <div class="page-content dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-wrapper">
  <div class="row align-items-center">
    <div class="col-lg-4 col-md-4 col-sm-4">
      <h1 class="page-title eagle-font font-400"><span class="arca-font">My</span> Blockout times
      </h1>
    </div>
    {{--@include('front.inner-layout.header')--}}
  </div>
  <div class="brdr-bttm"></div> -->

  <div class="loading">Loading&#8230;</div>

  <div class="page-content container-fluid">
    <div class="row">
      <nav class="navbar navbar-light invoice-page-menu notes-menu w-100">
        <a class=" p-0" href="{{ url('practitioner/settings/show') }}"><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 m-0"><span class="arca-font">My </span>integrations</h1>
      </nav>
      <div class="brdr-bttm w-100"></div>
    </div>

    <div class="dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-wrapper">
      <!-- set a design  02-08-2021 date  -->
      <!-- <div class="row mb-4">
        <div class="col-sm-6">
          <h1 class="page-title eagle-font font-400 ">Blockout time<span class="arca-font"></span></h1>
          <p class="text-navy d-none">Need to make times as unavailable on your calendar? Enter your details here:</p>
        </div>
        <div class="col-sm-6"><a href="#blockout-time" data-toggle="modal" class="btn-fill float-right">Blockout time</a></div>
      </div> -->

    

    </div>
</div>
  <!-- blockout-time Modal End --->
  @if($myPlan->plan_id == 1)
    <div class="page-content price-outer-div my-plan-page integration-main">
      <div class="container">
          <div class="row row justify-content-center">
              <div class="col-md-8">
                  <div class="downgrade-account-outer">
                    <div class="sync-our-calendar">
                      <div class="health-integration-data">
                        <div class="class-eventsimg">
                          <img src="{{asset('assets/images/Premium_plan.svg')}}" alt="Google">
                        </div>
                        <h4 class="downgrade-account-h4">Integrations are premium features</h4>
                        <p class="one-way-calendar-text">
                            Access these integrations and other premium features for $39/month.
                        </p>
                        <div class="login-other-ac-outer">
                            <ul>
                                <li>
                                    <a href="{{route('practitioner.openCalendar')}}" class="disabled-link"><img src="{{asset('assets/images/social/mailchimp-logo.png')}}" alt="Google">
                                        <!-- <span>Google</span> -->
                                    </a>
                                  
                                </li>
                                <li>
                                    <a href="{{route('practitioner.one_way_ical')}}" class="disabled-link"><img src="{{asset('assets/images/social/maillite.png')}}" alt="Apple">
                                        <!-- <span>iCal</span> -->
                                    </a>
                                    
                                </li>
                                <li>
                                    <a href="{{route('practitioner.one_way_ical')}}" class="disabled-link"><img src="{{asset('assets/images/social/tyro.png')}}" alt="Outlook">
                                        <!-- <span>Outlook</span> -->
                                    </a>
                                    
                                </li>
                                <li>
                                    <a href="{{route('practitioner.one_way_ical')}}" class="disabled-link"><img src="{{asset('assets/images/social/coming-soon.png')}}" alt="Other">
                                        <!-- <span>Other</span> -->
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="premium-btn">
                        <a href="{{route('practitioner.myplan')}}">
                          <button class="btn btn-fill">Upgrade to Premium</button>
                        </a>
                     </div>
                      </div>
                    </div>
                
                  </div>
  
              </div>
          </div>
      </div>
    </div> 
  @else
    <div class="page-content price-outer-div my-plan-page integration-main">
      <div class="container">
          <div class="row row justify-content-center">
              <div class="col-md-8">
                  <div class="downgrade-account-outer">
                    <div class="health-integration-data integration-preview-data ul li a img">
                          <div class="class-eventsimg">
                            <img src="{{asset('assets/images/Premium_plan.svg')}}" alt="Google">
                          </div>
                          <h4 class="downgrade-account-h4">Select an integration</h4>
                          <p class="one-way-calendar-text">       
                              Choose from the options below to connect your account.
                          </p>
                      <div class="login-other-ac-outer">
                          <ul>
                              <li>
                                  <a id="mailchimp" href="#" class=""><img src="{{asset('assets/images/social/mailchimp-logo.png')}}" alt="Google">
                                      <!-- <span>Google</span> -->
                                  </a>
                                  
                              </li>
                              <li>
                                  <a href="#" id="mailerlite" class=""><img src="{{asset('assets/images/social/maillite.png')}}" alt="Apple">
                                      <!-- <span>iCal</span> -->
                                  </a>
                                  
                              </li>
                              <li>
                                  <a data-toggle="modal" class="call-modal cursor-pointer" data-target-modal="#integrationMedipassModel" data-url="{{route('get.integrationmedipass.model')}}"><img src="{{asset('assets/images/social/tyro.png')}}" alt="Outlook">
                                      <!-- <span>Outlook</span> -->
                                  </a>
                                  
                              </li>
                              <li>
                                  <a href="#" class="disabled-link"><img src="{{asset('assets/images/social/coming-soon.png')}}" alt="Other">
                                      <!-- <span>Other</span> -->
                                  </a>
                              </li>
                          </ul>
                      </div>
                    </div>
                
                  </div>
  
              </div>
          </div>
      </div>
    </div> 
  @endif


 
<div class="todo-list-modal clientabpopup sentmodal closeaccountmodal titlelg">
  <div class="modal fade" id="paysuremodal1" 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">Sync in Progress</h5>
           </div>
           <div class="modal-body text-center">
              <div class="loading-image">
                 <img src='{{asset("assets/images/loading-icon.png")}}' alt="" class="img-fluid"> 
              </div>              
                <p class="font-14 text-blue">We’re sending your contacts to Mailchimp. This can take a few minutes depending on the size of your list. Please don’t close this window or navigate away until the sync is complete.</p>
           </div>
        </div>
     </div>
  </div>
</div>

{{-- for mailerlite --}}

<div class="todo-list-modal clientabpopup sentmodal closeaccountmodal titlelg">
  <div class="modal fade" id="paysuremodal2" 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">Sync in Progress</h5>
           </div>
           <div class="modal-body text-center">
              <div class="loading-image">
                 <img src='{{asset("assets/images/loading-icon.png")}}' alt="" class="img-fluid"> 
              </div>              
                <p class="font-14 text-blue">We’re sending your contacts to MailerLite. This can take a few minutes depending on the size of your list. Please don’t close this window or navigate away until the sync is complete.</p>
           </div>
        </div>
     </div>
  </div>
</div>
 
  @endsection
  @section('css')
    <style>
      .timePicker .form-select {display: block;width: 100%;padding: 0.375rem 2.25rem 0.375rem 0.75rem;-moz-padding-start: calc(.75rem - 3px);font-size: 1rem;font-weight: 400;line-height: 1.5;color: #888;background-color: #fff;margin: 0 10px;background-repeat: no-repeat;background-position: right 0.75rem center;background-size: 16px 12px;border: 1px solid #ced4da;border-radius: 0.4rem;transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
      .timePicker .btn-group input{display: none;}
      .timePicker .btn-group label{margin: 0;padding: 0.375rem 1rem;color: #68afb5;border: 1px solid;}
      .timePicker .btn-group label:hover{color: white;background-color: #68afb5;}
      .label-am{border-radius: 0.4rem 0 0 0.4rem !important;border-right: none !important;}
      .lable-pm{border-radius: 0 0.4rem 0.4rem 0;border-left: none !important;}
      .select2-container--default .select2-selection--single {border: 1px solid #c7c7c7 !important; height: 33px !important;}
      #InvoiceAddServiceModal .form-control.disabled,
      #myclienthide .form-control.disabled {background-color: #e9ecef !important;}
      .select2-search__field {width: 200px !important;}
      .select2-search{display: none !important;}
      .select2-container .select2-dropdown{padding: 0 !important;overflow: hidden !important;}
      .select2-container .select2-dropdown .select2-results ul.select2-results__options li{padding: 4px 16px !important;}
      .select2-container .select2-dropdown .select2-results ul.select2-results__options li:hover{background-color: #68afb5 !important;color: white !important;}
    </style>
  @endsection

@section('modals')
<div id="load-modal"></div>

<div class="client-follow-popup login-modal customscroll   clientabpopup businessdetails integration-modal-area">
    <div class="modal fade" id="mailchimp_integration" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel13" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content" style="max-width: 670px;">
            <div class="popup-marg">
                <div class="modal-header">
                    <h5 class="modal-title downgrade-account-h4" id="exampleModalLabel13">Mailchimp integration</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 pb-3">
                    <div class="boxwhite mt-30">
                    <div class="medipass-area ">                       
                        <div class="meditext mb-4 text-center">                           
                            <p>To connect your Mailchimp account, enter your API key below and click Connect. If you’re on a paid Mailchimp plan, you can choose the audience you'd like to sync with. Free plans are limited to one default audience.</p>
                            <p>For help integrating your account, view our <a  target="_blank" href="https://myappointments.tawk.help/article/mailchimp-integration" style="color:#45747a"> help desk article.</a></p>
                        </div>
                        <form method="POST" id="mailchimpForm">
                            @csrf

                            <div class="form-group text-left mb-3">
                                <div class="row">
                                    <div class="col-md-9">
                                        <label>Add your Mailchimp API key</label>
                                        <input type="text" name="mailchimp_api_key" id="mailchimp_api_key" class="form-control font-15" placeholder="API KEY" maxlength="255">
                                        <span class="invalid-feedback d-block"></span>
                                    </div>
                                    <div class="col-md-3" style="padding-left: 5px;">
                                        <button type="button" id="get_mailchimp_list" class="get_list_btn btn btn-fill w-80 mb-3">Connect</button>
                                    </div>
                                </div>
                            </div>
                                

                            <div class="form-group text-left mb-3">
                                <label>Select your Mailchimp audience name</label>
                                <select name="mailchimp_list_id" id="mailchimp_list_id" class="form-control select2 font-15">
                                <option value="">Select audience</option> 
                                </select>
                                {{-- <input type="text" name="mailchimp_list_id" id="mailchimp_list_id" class="form-control font-15" placeholder="Audience Name" maxlength="255" value=""> --}}
                                <span id="mailchimp_list_id_error" class="invalid-feedback d-block"></span>
                            </div>

                            <!-- Integrations TABLE DESIGN END -->
                            <div class="modal-footer p-0">
                                <div class="text-center">
                                <button type="button" data-id="button" id="saveMailchimp" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 w-100">Sync contacts</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>

<div class="client-follow-popup login-modal customscroll   clientabpopup businessdetails integration-modal-area">
    <div class="modal fade" id="mailerlite_integration" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel13" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content" style="max-width: 670px;">
            <div class="popup-marg">
                <div class="modal-header">
                    <h5 class="modal-title downgrade-account-h4" id="exampleModalLabel13">Mailerlite integration</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 pb-3">
                    <div class="boxwhite mt-30">
                    <div class="medipass-area ">                       
                        <div class="meditext mb-4 text-center">                           
                            {{-- <p>To connect your Mailerlite account, enter your API key below and click Connect. If you’re on a paid Mailerlite plan, you can choose the audience you'd like to sync with. Free plans are limited to one default audience.</p> --}}
                            <p>To connect your Mailerlite account, enter your API key below.</p>
                            <p>For help integrating your account, view our <a  target="_blank" href="https://myappointments.tawk.help/article/mailerlite-integration" style="color:#45747a"> help desk article.</a></p>
                        </div>
                        <form method="POST" id="mailerliteForm">
                            @csrf

                            <div class="form-group text-left mb-3">
                                <div class="row">
                                    <div class="col-md-12">
                                        <label>Add your Mailerlite API key</label>
                                        <textarea name="mailerlite_api_key" id="mailerlite_api_key" class="form-control font-15" placeholder="API KEY"></textarea>
                                        <span class="invalid-feedback d-block"></span>
                                    </div>
                                    {{-- <div class="col-md-3" style="padding-left: 5px;">
                                        <button type="button" id="get_mailerlite_group" class="get_list_btn btn btn-fill w-80 mb-3">Connect</button>
                                    </div> --}}
                                </div>
                            </div>

                            {{-- <div class="form-group text-left mb-3">
                                <label>Select your group</label>
                                <select name="mailerlite_group_id" id="mailerlite_group_id" class="form-control select2 font-15">
                                <option value="">Select group</option> 
                                </select>
                            </div> --}}
                            <!-- Integrations TABLE DESIGN END -->
                            <div class="modal-footer p-0">
                                <div class="text-center">
                                <button type="button" data-id="button" id="saveMailerlite" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 w-100">Sync contacts</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>


@endsection


@section('js')
{{-- <script src='{{ URL::asset("assets/js/jquery-3.2.1.slim.min.js")}}'></script> --}}
{{-- <script src='{{ URL::asset("assets/js/jquery.min.js")}}'></script> --}}
{{-- <script src='{{ asset("assets/js/toastr.min.js")}}'></script>
<script src='{{ asset("assets/js/intlTelInput.js")}}'></script> --}}
{{-- <script src="{{asset('assets/js/practitioner/my-settings.js')}}" type="text/javascript"></script> --}}

<script type="text/javascript">

    $('#mailchimp_list_id').select2({
        placeholder: "Select audience",
    });

    $(document).on('click', '.call-modal', function(e) {
        console.log('hi');
        $('.modal').modal('hide');
        e.preventDefault();
        var el = $(this);
        var url = el.data('url');
        var target = el.data('target-modal');
        console.log(url);
        console.log(target);
        $(".loading").show();
        $.ajax({
            type: "GET",
            url: url,
            dataType: "json",

        }).always(function() {
            console.log($('#load-modal'));
            $('#load-modal').html(' ');
            $(".loading").hide();
        }).done(function(res) {
            $('#load-modal').html(res.html);
            $(".mCustomScrollbar").mCustomScrollbar();
            $(target).modal('toggle');
            $(".loading").hide();

        }).fail(function(error) {
            $(".loading").hide();
            alert('something went wrong error.');
        });
    });

    $(document).on('click', '#mailchimp', function() {

        /// create ajax function to check mailchimp is connected or not
        $.ajax({
            url: "{{route('practitioner.check.mailchimp')}}",
            type: 'GET',
            dataType: 'json',
        }).done(function(response) {
            if (response.mailchimp == 0) {
                Swal.fire({
                title: 'Connect your Mailchimp account?',
                // text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes',
                cancelButtonText: 'No'
                }).then((result) => {
                if (result.isConfirmed) {
                    $('#mailchimpForm')[0].reset();
                    $('#mailchimp_list_id').empty();
                    $('#mailchimp_list_id').val(null).trigger('change');
                    $('#mailchimp_integration').modal('show');
                }
                });
                
            } else {
                Swal.fire({
                title: 'Disconnect your Mailchimp account?',
                // text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes',
                cancelButtonText: 'No'
                }).then((result) => {
                if (result.isConfirmed) {
                $.ajax({
                    url: "{{route('practitioner.disconnect.mailchimp')}}",
                    type: 'POST',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content')
                    }
                }).done(function(response) {
                    if (response.status == "success") {
                        Swal.fire({
                            icon: response.status,
                            title: 'Mailchimp Disconnected',
                            text: "Your Mailchimp account has been disconnected. No further client data will be sent to Mailchimp unless you reconnect your account.",
                            showClass: {
                                popup: 'animate__animated animate__fadeInDown'
                            },
                            hideClass: {
                                popup: 'animate__animated animate__fadeOutUp'
                            }
                        });
                    }
                });
                //location.reload();
                }else {
                    //$('#mailchimp_integration').modal('show');
                }
                });
            }
        });
    });

    $(document).on('click', '#saveMailchimp', function() {
        var mailchimp_api_key = $('#mailchimp_api_key').val();
        var mailchimp_list_id = $('#mailchimp_list_id').val();

        if(mailchimp_api_key == '' || mailchimp_list_id == '' || mailchimp_api_key == null || mailchimp_list_id == null) {
            Swal.fire({
                icon: 'warning',
                title: 'Connect your API to continue',
                showClass: {
                    popup: 'animate__animated animate__fadeInDown'
                },
                hideClass: {
                    popup: 'animate__animated animate__fadeOutUp'
                }
            });
            return;
        }

        console.log(mailchimp_api_key, mailchimp_list_id);

        if((mailchimp_api_key !='' || mailchimp_api_key != null) && (mailchimp_list_id != '' && mailchimp_list_id != null)) {
            $('#paysuremodal1').modal('show');
            $('#mailchimp_integration').modal('hide');
            $('#paysuremodal1').modal('show');
        }
        $.ajax({
            url: "{{route('practitioner.store.mailchimp')}}",
            type: 'POST',
            data: {
                mailchimp_api_key: mailchimp_api_key,
                mailchimp_list_id: mailchimp_list_id
            },
            beforeSend: function(msg) {
                //$(".loading").addClass("d-block");
            },
        }).done(function(response) {
            //$(".loading").removeClass("d-block");
            $('#paysuremodal1').modal('hide');
            if (response.status == "success") {
                Swal.fire({
                    icon: response.status,
                    title: 'Sync complete',
                    text:"All clients with a valid email address have been synced to your Mailchimp account. Any new clients added will be sent through automatically.",
                    showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                    },
                    hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                    }
                });
                $(".is-invalid").removeClass("is-invalid");
                $('#mailchimp_integration').modal('hide');

                // setTimeout(function() {
                //     location.reload();
                // }, 3000);       
            } else {
              $('.invalid-feedback').text('');
                $.each(response.errors, function(key, value) {
                    console.log(key, value);
                    let input = $('input[name=' + key + ']');
                    input.addClass('is-invalid');
                    input.next('.invalid-feedback').text(value[0]);

                    if (key == 'mailchimp_list_id') {
                        $('#mailchimp_list_id').addClass('is-invalid');
                        $('#mailchimp_list_id_error').text(value[0]);
                    }
                });
            }
        }).fail(function(error) {
            $(".loading").removeClass("d-block");
            Swal.fire({
                icon: 'error',
                title: 'Something went wrong',
                text: error.responseJSON.message,
                showClass: {
                    popup: 'animate__animated animate__fadeInDown'
                },
                hideClass: {
                    popup: 'animate__animated animate__fadeOutUp'
                }
            });
        });
    });

    $(document).on('click', '#get_mailchimp_list', function() {
        var mailchimp_api_key = $('#mailchimp_api_key').val();
        if (mailchimp_api_key == '') {
            Swal.fire({
                icon: 'error',
                title: 'Please enter your Mailchimp API key',
                showClass: {
                    popup: 'animate__animated animate__fadeInDown'
                },
                hideClass: {
                    popup: 'animate__animated animate__fadeOutUp'
                }
            });
            return false;
        }
        $.ajax({
            url: "{{route('practitioner.get.mailchimp.list')}}",
            type: 'POST',
            data: {
                mailchimp_api_key: mailchimp_api_key,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function(msg) {
              $(".loading").addClass("d-block");
            },
        }).done(function(response) {
            $(".loading").removeClass("d-block");
            if (response.status == "success") {
                $('#mailchimp_list_id').empty();
                // $('#mailchimp_list_id').append('<option value="">Select audience</option>');
                $.each(response.data, function(key, value) {
                    $('#mailchimp_list_id').append('<option value="' + value.id + '">' + value.name + '</option>');
                });
                $('#mailchimp_list_id').select2().trigger('change');
            } else {
              Swal.fire({
                  icon: 'error',
                  title: response.message,
                  showClass: {
                      popup: 'animate__animated animate__fadeInDown'
                  },
                  hideClass: {
                      popup: 'animate__animated animate__fadeOutUp'
                  }
              });
            }
        }).fail(function(error) {
          $(".loading").removeClass("d-block");
            Swal.fire({
                icon: 'warning',
                title: 'Invalid API Key',
                text: 'Please check your API key and try again.',
                showClass: {
                    popup: 'animate__animated animate__fadeInDown'
                },
                hideClass: {
                    popup: 'animate__animated animate__fadeOutUp'
                }
            });
        });
    }); 

    $(document).on('click', '#mailerlite', function() {
        /// create ajax function to check mailerlite is connected or not
        $.ajax({
            url: "{{route('practitioner.check.mailerlite')}}",
            type: 'GET',
            dataType: 'json',
        }).done(function(response) {
            if (response.mailerlite == 0) {
                Swal.fire({
                title: 'Connect your MailerLite account?',
                // text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes',
                cancelButtonText: 'No'
                }).then((result) => {
                if (result.isConfirmed) {
                    $('#mailerliteForm')[0].reset();
                    $('#mailerlite_integration').modal('show');
                }
                });
                
            } else {
                Swal.fire({
                title: 'Disconnect your MailerLite account?',
                // text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes',
                cancelButtonText: 'No'
                }).then((result) => {
                if (result.isConfirmed) {
                $.ajax({
                    url: "{{route('practitioner.disconnect.mailerlite')}}",
                    type: 'POST',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content')
                    }
                }).done(function(response) {
                    if (response.status == "success") {
                        Swal.fire({
                            icon: response.status,
                            title: 'MailerLite Disconnected',
                            text: "Your MailerLite account has been disconnected. No further client data will be sent to MailerLite unless you reconnect your account.",
                            showClass: {
                                popup: 'animate__animated animate__fadeInDown'
                            },
                            hideClass: {
                                popup: 'animate__animated animate__fadeOutUp'
                            }
                        });
                    }
                });
                //location.reload();
                }else {
                    //$('#mailchimp_integration').modal('show');
                }
                });
            }
        });
    });

    $(document).on('click', '#saveMailerlite', function() {
        var mailerlite_api_key = $('#mailerlite_api_key').val();

        if(mailerlite_api_key == '') {
            Swal.fire({
                icon: 'error',
                title: 'Please enter your MailerLite API key',
                showClass: {
                    popup: 'animate__animated animate__fadeInDown'
                },
                hideClass: {
                    popup: 'animate__animated animate__fadeOutUp'
                }
            });
            return false;
        }else
        {
            $.ajax({
            url: "{{route('practitioner.check.mailerliteKetIsValid')}}",
            type: 'POST',
            data: {
                mailerlite_api_key: mailerlite_api_key,
            },
            }).done(function(response) {
               
                if(mailerlite_api_key !='') {
                    $('#mailerlite_integration').modal('hide');
                    $('#paysuremodal2').modal('show');
                }
                $.ajax({
                    url: "{{route('practitioner.store.mailerlite')}}",
                    type: 'POST',
                    data: {
                        mailerlite_api_key: mailerlite_api_key,
                        mailerlite_group_id: $('#mailerlite_group_id').val(),
                    },
                    beforeSend: function(msg) {
                        //$(".loading").addClass("d-block");
                    },
                }).done(function(response) {
                    //$(".loading").removeClass("d-block");
                    $('#paysuremodal2').modal('hide');
                    if (response.status == "success") {
                        Swal.fire({
                            icon: response.status,
                            title: 'Sync complete',
                            text:"All clients with a valid email address have been synced to your Mailerlite account. Any new clients added will be sent through automatically.",
                            showClass: {
                                popup: 'animate__animated animate__fadeInDown'
                            },
                            hideClass: {
                                popup: 'animate__animated animate__fadeOutUp'
                            }
                        });
                        $(".is-invalid").removeClass("is-invalid");
                        $('#mailerlite_integration').modal('hide');
                        // setTimeout(function() {
                        //     location.reload();
                        // }, 3000);       
                    } else {
                    $('.invalid-feedback').text('');
                        $.each(response.errors, function(key, value) {
                            console.log(key, value);
                            let input = $('textarea[name=' + key + ']');
                            input.addClass('is-invalid');
                            input.next('.invalid-feedback').text(value[0]);
                        });
                    }
                }).fail(function(error) {
                    $(".loading").removeClass("d-block");
                    Swal.fire({
                        icon: 'error',
                        title: 'Something went wrong',
                        text: error.responseJSON.message,
                        showClass: {
                            popup: 'animate__animated animate__fadeInDown'
                        },
                        hideClass: {
                            popup: 'animate__animated animate__fadeOutUp'
                        }
                    });
                });

            }).fail(function(error) {
                $(".loading").removeClass("d-block");
                Swal.fire({
                    icon: 'warning',
                    title: 'Invalid API Key',
                    text: 'Please check your API key and try again.',
                    showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                    },
                    hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                    }
                });
            });
        }
    });

    $(document).on('click', '#get_mailerlite_group', function() {
        var mailerlite_api_key = $('#mailerlite_api_key').val();
        if (mailerlite_api_key == '') {
            Swal.fire({
                icon: 'error',
                title: 'Please enter your Mailerlite API key',
                showClass: {
                    popup: 'animate__animated animate__fadeInDown'
                },
                hideClass: {
                    popup: 'animate__animated animate__fadeOutUp'
                }
            });
            return false;
        }
        $.ajax({
            url: "{{route('practitioner.get.mailerlite.group')}}",
            type: 'POST',
            data: {
                mailerlite_api_key: mailerlite_api_key,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function(msg) {
              $(".loading").addClass("d-block");
            },
        }).done(function(response) {
            $(".loading").removeClass("d-block");
            if (response.status == "success") {
                $('#mailerlite_group_id').empty();
                $.each(response.data, function(key, value) {
                    $('#mailerlite_group_id').append('<option value="' + value.id + '">' + value.name + '</option>');
                });
                $('#mailerlite_group_id').select2().trigger('change');
            } else {
              Swal.fire({
                  icon: 'error',
                  title: response.message,
                  showClass: {
                      popup: 'animate__animated animate__fadeInDown'
                  },
                  hideClass: {
                      popup: 'animate__animated animate__fadeOutUp'
                  }
              });
            }
        }).fail(function(error) {
          $(".loading").removeClass("d-block");
          Swal.fire({
              icon: 'error',
              title: 'Something went wrong',
              text: error.responseJSON.message,
              showClass: {
                  popup: 'animate__animated animate__fadeInDown'
              },
              hideClass: {
                  popup: 'animate__animated animate__fadeOutUp'
              }
          });
        });
    }); 

</script>
@endsection