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

<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;
    padding-right: 78px;
  }
  
  .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;
  }
  .syn-cel-generate-link a {margin-bottom: 15px;}
  .syn-cel-generate-link {margin-bottom: 40px;}
  .team-member-calendar-btn {
      margin-top: 15px;
      margin-bottom: 20px;
  }
  .team-member-input input {
      height: 40px;
      border-radius: 5px;
      background-color: #ffffff;
      border: 0.25px solid #898989;
      font-size: 13px;
      letter-spacing: 0px;
      line-height: 16px;
  }
  .team-member-input select {
      height: 40px;
      border-radius: 5px;
      background-color: #ffffff;
      border: 0.25px solid #898989;
  }
  .team-member-input {position: relative;}
  span.attach-icon-outer {
      position: absolute;
      right: 7px;
      top: 17px;
  }
  span.attach-icon-outer span {cursor: pointer;    display: inline-block;}
  .check-tik-cust label:before ,.check-tik-cust label:after {left: 0px;}
  </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/one_way_calendar') }}"><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>Calendar Sync</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 --->

  <div class="page-content price-outer-div my-plan-page">
    <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">
                  <h4 class="downgrade-account-h4">Calendar sync</h4>
                  <p class="one-way-calendar-text">
                    Sync your appointments with your iCal, Outlook or other calendar. Simply generate your link here and paste this link into your calendar. Please note that it can take up to 10 minutes to sync your calendars if you have many past and future appointments. Find out more <a  target="_blank" href="https://myappointments.tawk.help/article/calendar-sync" style="color:#45747a"> here.</a>
                  </p>
                  <p class="one-way-calendar-text">Please keep this URL secure. Anyone with access can subscribe to your MA calendar. If required, you can disable your calendar and re-generate a new link.</p>
                  <div class="syn-calendar-btn syn-cel-generate-link">
                  @if($cal_link == '' || $cal_link  == NULL)
                   <a href="#" id="calenda_sync" class="cursor-pointer">Generate link</a>
                  @endif
                   <div id="link_text" class="team-member-input @if($cal_link == '' || $cal_link  == NULL) d-none @endif">
                    <input type="text"  id="calendar_link"  value="{{$cal_link }}">
                    <span class="attach-icon-outer myDIV">
                      
                      <span class="hovertext" data-text="Copy link" style="position:relative;"><img src="{{asset('assets/images/Link-calendar-icon.svg')}}" width="26" onclick="myFunction('calendar_link')" alt="icon"  ></span>
                      <span class="hovertext" data-text="Disable link"><img src="{{asset('assets/images/Unlink-icon.svg')}}" id="disable_calendar_sync" width="26" alt="icon"></span>
                    </span>
                  </div>
                  </div>
                 
                </div>
              
                @if(isset($teamMember) && count($teamMember) != 0)
              
                <div class="team-member-calendar">
                  <h4 class="downgrade-account-h4">Team members calendars</h4>
                  <p class="one-way-calendar-text">
                    Team members can individually sync their calendars. Generate their unique link below, share it with your team member and ask them to paste it into their calendar when logged in. 
                  </p>
                  <div class="team-member-input">
                    <div class="form-group brdrfull marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child select-arrow-none">
                      <select class="form-control  js-example-basic-single font-13 text-left" style="width:100%"  name="calendar_sync_teammember" id="calendar_sync_teammember">
                       
                         <option value="">Select team members calendars</option>
                         @if($teamMember != NULL && $teamMember != '')
                          @foreach($teamMember as $teamMembers)
                            <option value="{{$teamMembers->id}}">{{$teamMembers->first_name.' '.$teamMembers->last_name }}</option>
                          @endforeach
                        @endif
                      </select>
                      <span id="error_calendar_sync_teammember" style="color: red;"></span>
                   </div>
                  </div>
                    <div  class="team-member-calendar-btn">
                      <a href="#" id="calenda_sync_teammember">Generate link</a>
                    </div> 
                    <div id="teammember_link_text" class="team-member-input d-none">
                      <input type="text" id="calendar_link_teammember">
                      <span class="attach-icon-outer">
                        <span class="hovertext" data-text="Copy link"><img src="{{asset('assets/images/Link-calendar-icon.svg')}}" alt="icon" width="26" onclick="myFunction('calendar_link_teammember')"></span>
                        <span class="hovertext" data-text="Disable link"><img src="{{asset('assets/images/Unlink-icon.svg')}}" width="26" id="disable_calendar_sync_teammember" alt="icon"></span>
                      </span>
                    </div>                 
                  </div> 
                    
                @endif
              </div>
            </div>
        </div>
    </div>
  </div> 

  {{-- <div class="price-outer-div my-plan-page">
    <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">
                  <h4 class="downgrade-account-h4">Sync your calendar</h4>
                  <p class="one-way-calendar-text">
                   Sync your MA appointments with your Google calendar. Please note that it can take up to 5-10mins to sync  calendars if you have many past and future appointments.
                  </p>
                  <p class="one-way-calendar-text">Need to sync with your Outlook or iCal? Find out how here.</p>
                  <div class="syn-calendar-btn">
                   
                   <a id="calenda_sync" class="cursor-pointer">Sync calendar</a>
                   
                  </div>
                </div>
                <div class="team-member-calendar">
                  <h4 class="downgrade-account-h4">Team members calendars</h4>
                  <p class="one-way-calendar-text">
                    Team members can also individually sync their calendars. Share this link and ask them to paste into their browser once logged in and follow the steps.
                  </p>
                  <div class="team-member-input">
                    <input type="text" placeholder="calendarsync.com" id="calendar_link">
                  </div>
                    <div class="team-member-calendar-btn">
                      <a href="#" onclick="myFunction('calendar_link')"
                      >Copy link</a>
                      <a href="#" id="disable_calendar_sync">Copy link</a>
                    </div>                  
                  </div> 
            
              </div>
            </div>
        </div>
    </div>
  </div>  --}}
 
 <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">Please wait</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="loading-image">
                 <img src='{{asset("assets/images/loading-icon.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> --}}
              
                 <p class="font-14 text-blue">Calendar sync can take up to 10 minutes if you have many past and future appointments. Please do not click back or refresh your browser</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;}
      .hovertext:before {
      content: attr(data-text);
      visibility: hidden;
      opacity: 0;
      width: max-content;
      background-color: black;
      color: #24303f;
      text-align: center;
      border-radius: 5px;
      padding: 5px 25px;
      transition: opacity 1s ease-in-out;

      position: absolute;
      z-index: 1;
      left: -30px;
      top: 110%;
      z-index: 1060;
    display: block;
    max-width: 276px;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    white-space: normal;
    word-spacing: normal;
    line-break: auto;
    font-size: .875rem;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 0.3rem;
    }
      .hovertext:hover:before {
        visibility: visible;
        opacity: 1;
    }

    </style>
   
  @endsection
  

@section('js')
<script src='{{ asset("assets/js/jquery-3.2.1.slim.min.js")}}'></script>

<script src='{{ asset("assets/js/jquery.min.js")}}'></script>
<script type="text/javascript">
  $.ajaxSetup({
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
  });
  </script>
  <script>

    var practitioner = '{{$practitioner->id}}';
    $(document).on('click','#disable_calendar_sync',function(){
      var id = practitioner;
       Swal.fire({
                title: 'Disable calendar?',
                text: "This will automatically cancel your calendar sync. No future appointments will be synced with your calendar. Please note, this will not remove past appointments from your calendar.",
                icon: 'warning',
                
                // showCancelButton: true,
                showCloseButton: true,
                // buttonsStyling: false,
                confirmButtonColor: '#68afb5',
                confirmButtonText: 'Disable calendar',
                cancelButtonText: 'Cancel',
                footer: '<a href="" style="margin-top: -40px;height: 43px;font-size: 15px;letter-spacing: 1px;line-height: 13px;color: #45747a;font-family: "Europa";text-align: center;">cancel</a>'
            }).then((result) => {
                if (result.value) {
                        
                $(".loading").show();
                $.ajax({
                    url: "{{route('practitioner.disable_calenda_sync')}}",
                    type: 'POST',
                    data:{id:id}
                }).done(function(response) {
                    if (response.status == "success") {
                        $(".loading").hide();
                        Swal.fire({
                          icon: response.status,
                          title: response.message,
                          // text: response.msg,
                          showClass: {
                              popup: 'animate__animated animate__fadeInDown'
                          },
                          hideClass: {
                              popup: 'animate__animated animate__fadeOutUp'
                          }
                        });
                        setTimeout(function() {
                          window.location.href = "{{ route('practitioner.one_way_ical')}}";
                        }, 2000);
                    }else{
                        $(".loading").hide();
                        
                    }
                });
              }
              });
    });
    $(document).on('click','#disable_calendar_sync_teammember',function(){

      var id = $('#calendar_sync_teammember').val();
      $('#error_calendar_sync_teammember').text('');
      if(id == ''){
          $('#error_calendar_sync_teammember').text('Please select team member');
          return false;
      }
      Swal.fire({
      title: 'Disable calendar?',
                text: "This will automatically cancel your calendar sync. No future appointments will be synced with your calendar. Please note, this will not remove past appointments from your calendar.",
                icon: 'warning',
                // showCancelButton: true,
                showCloseButton: true,
                // buttonsStyling: false,
                confirmButtonColor: '#68afb5',
                confirmButtonText: 'Disable calendar',
                footer: '<a href="" style="margin-top: -40px;height: 43px;font-size: 15px;letter-spacing: 1px;line-height: 13px;color: #45747a;font-family: "Europa";text-align: center;">cancel</a>'
            }).then((result) => {
                if (result.value) {
      $(".loading").show();
      $.ajax({
          url: "{{route('practitioner.disable_calenda_sync')}}",
          type: 'POST',
          data:{id:id},
      }).done(function(response) {
          if (response.status == "success") {
              $(".loading").hide();
              Swal.fire({
                icon: response.status,
                title: response.message,
                // text: response.msg,
                showClass: {
                    popup: 'animate__animated animate__fadeInDown'
                },
                hideClass: {
                    popup: 'animate__animated animate__fadeOutUp'
                }
              });
              setTimeout(function() {
                window.location.href = "{{ route('practitioner.one_way_ical')}}";
              }, 2000);
          }else{
              $(".loading").hide();
              
          }
      });
    }
  });
    });
   
    $('#calenda_sync').on('click', function (ev) {
   // $(document).on('click','#calenda_sync',function(){
        var id = practitioner;
        $(".loading").show();
        $.ajax({
            url: "{{route('practitioner.calenda_sync')}}",
            type: 'POST',
            data:{id:id}
        }).done(function(response) {
            if (response.status == "success") {
                $('#calendar_link').val(response.link)
                $('#calenda_sync').addClass('d-none');
                $('#link_text').removeClass('d-none');
                $(".loading").hide();
            }else{
                $(".loading").hide();
                
            }
        });
    });
    $('#calenda_sync_teammember').on('click', function (ev) {
    //$(document).on('click','#calenda_sync_teammember',function(){
        var id = $('#calendar_sync_teammember').val();
        $('#error_calendar_sync_teammember').text('');
        if(id == ''){
            $('#error_calendar_sync_teammember').text('Please select team member');
            return false;
        }
        $(".loading").show();
        $.ajax({
            url: "{{route('practitioner.calenda_sync')}}",
            type: 'POST',
            data:{id:id}
        }).done(function(response) {
            if (response.status == "success") {
                $('#calendar_link_teammember').val(response.link)
                $('#calenda_sync_teammember').addClass('d-none');
                $('#teammember_link_text').removeClass('d-none');
                $(".loading").hide();
            }else{
                $(".loading").hide();
                
            }
        });
    });
    $(document).on('change','#calendar_sync_teammember',function(){
      $('#calendar_link_teammember').val('');
      var id = $('#calendar_sync_teammember').val();
        $.ajax({
            url: "{{route('practitioner.teammember_calenda_sync_link')}}",
            type: 'POST',
            data:{id:id}
        }).done(function(response) {
            if (response.status == "success") {
                $('#calendar_link_teammember').val(response.link)
                if(response.link != ''){
                  $('#calenda_sync_teammember').addClass('d-none');
                  $('#teammember_link_text').removeClass('d-none');
                }else{
                  $('#calenda_sync_teammember').removeClass('d-none');
                  $('#teammember_link_text').addClass('d-none');
                }
            }else{
                $(".loading").hide();
                
            }
        });
    })
    function myFunction(val) {
      /* Get the text field */

      var copyText = document.getElementById(val).innerHTML;
      copy = document.getElementById(val);
      copy.select();
      copy.setSelectionRange(0, 99999); /* For mobile devices */
      // /* Copy the text inside the text field */
      document.execCommand("copy");

      // /* Alert the copied text */
      var status =  status = 'Link';
      Swal.fire({
         icon: 'success',   
         title: status+' copied',
         showCancelButton: false,
         showConfirmButton: false,
         // cancelButtonText : 'Close',
         showClass: {
            popup: 'animate__animated animate__fadeInDown'
         },
         hideClass: {
            popup: 'animate__animated animate__fadeOutUp'
         }
      });
      
      //alert("Copied the text: " + copyText.value);

   }
    </script>
    @endsection