@extends('front.practitioner.import.template.import')
@section('content')
<link href="{{ asset('assets/css/colorPick.css') }}" rel='stylesheet' />
<link href="{{ asset('assets/css/colorPick.dark.theme.css') }}" rel='stylesheet' />
<link href="{{ asset('assets/css/croppie.min.css') }}" rel='stylesheet' />


<style>
   .timezoneDiv .select2-selection__arrow
   {
      display: none;
   }
   .newBusinessDetailsPage .top-pading{ 
      margin-top: 0.25rem !important; 
   }
   .sidebar-menu {
    display: none;
   }
   body.grey-bg {
    background: #f7f7f7;
   }
   .autosizetextaria {
        overflow-y: hidden; 
        resize: none; 
    }
    .error-message{
      font-size: 80%;
    }
    .notes-menu {
        background: #f7f7f7 !important;
    }

    h3 {
        font-size: 20px;
        color: #24303f;
        font-weight: 600;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        background-color: #f6f6f6;
    }
</style>

    <div class="voucher-setting-main packages-setting-main">
        <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="{{$redirectUrl}}"><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 "><span class="arca-font"> </span>Waitlist Settings</h1>
                </nav>
                <div class="brdr-bttm w-100"></div>
            </div>
        </div>

        <div class="voucher-setting-box waitlist-box">
            <div id="accordion">
                <div class="card">
                    <br>
                    <br>
                    {{-- <div class="card-header" id="headingOne">
                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            Waitlist settings
                        </button>
                    </div> --}}
    
                    <div class="show">
						<form id="addWaitlistSettings" name="addWaitlistSettings" method="POST" autocomplete="off">
						@csrf
                        <input type="hidden" name="tab_number" id="tab_number" value="1">
                        <input type="hidden" name="id" id="id" value="@if(isset($packageSettings)) {{$packageSettings->id}} @endif">
                        <div class="card-body">
                            <div class="seting-card-body">  
                                
                                <div class="form-group d-none">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-5">  
                                            <label class="tooltip-new">Show waitlist on calendar?</label>                                        
                                        </div>
                                        <div class="col-sm-12 col-md-7">
                                            <div class="row">
                                                <div class="col-sm-12 col-md-6">
                                                    <div class="age-title">
                                                        <input type="radio" id="show_on_calendar_yes" checked name="show_on_calendar" value="1" @if(isset($newWaitlistsSettings->show_on_calendar) && $newWaitlistsSettings->show_on_calendar == '1') checked @endif  autocomplete="off">
                                                        <label for="show_on_calendar_yes" class="w-100 text-center ">Yes</label>
                                                    </div>
                                                    <span class="invalid-feedback d-block"></span> 

                                                </div>
                                                <div class="col-sm-12 col-md-6">
                                                    <div class="age-title">
                                                        <input type="radio" id="show_on_calendar_no" name="show_on_calendar" value="0" @if(isset($newWaitlistsSettings->show_on_calendar) && $newWaitlistsSettings->show_on_calendar == '0') checked @endif autocomplete="off">
                                                        <label for="show_on_calendar_no" class="w-100 text-center">No</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-5">  
                                            <label class="tooltip-new">Show waitlist on booking link?</label>                                        
                                        </div>
                                        <div class="col-sm-12 col-md-7">
                                            <div class="row">
                                                <div class="col-sm-12 col-md-6">
                                                    <div class="age-title">
                                                        <input type="radio" id="show_on_booking_link_yes" name="show_on_booking_link" value="1" @if(isset($newWaitlistsSettings->show_on_booking_link) && $newWaitlistsSettings->show_on_booking_link == '1') checked @endif  autocomplete="off">
                                                        <label for="show_on_booking_link_yes" class="w-100 text-center ">Yes</label>
                                                    </div>
                                                   <span class="invalid-feedback d-block"></span>  
                                                </div>
                                                <div class="col-sm-12 col-md-6">
                                                    <div class="age-title">
                                                        <input type="radio" id="show_on_booking_link_no" name="show_on_booking_link" value="0" @if(isset($newWaitlistsSettings->show_on_booking_link) && $newWaitlistsSettings->show_on_booking_link == '0') checked @endif autocomplete="off">
                                                        <label for="show_on_booking_link_no" class="w-100 text-center">No</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-12">  
                                            <label class="tooltip-new">Enable waitlist for which locations?</label>                                        
                                        </div>
                                        <div class="col-sm-12 col-md-12">
                                            <div class="form-group select2-multiple-autoselect">
                                                <select aria-placeholder="Select location"  class="form-control text-capitalize select2-form-control" id="preferred_locations" name="preferred_locations[]" multiple="multiple">     
                                                    @if(isset($newWaitlistsSettings) && in_array("Any",explode(',',$newWaitlistsSettings->preferred_locations)) || $locations->count() > 1)
                                                       
                                                        <option class="text-capitalize" value="Any" @if(isset($newWaitlistsSettings) && in_array("Any",explode(',',$newWaitlistsSettings->preferred_locations))) selected @endif>Any</option>  
                                                    @endif                                       
                                                    @foreach ($locations as $loc)
                                                    <option @if($loc !='Any' && count($locations) == 1) selected @endif  class="text-capitalize" value="{{$loc->id}}" 
                                                        @if(isset($newWaitlistsSettings) && in_array($loc->id,explode(',',$newWaitlistsSettings->preferred_locations))) selected @endif>{{$loc->address}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <span class="invalid-feedback d-block"></span>
                                        </div>       
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-12">  
                                            <label class="tooltip-new">Enable waitlist for which service providers?</label>                                        
                                        </div>
                                        <div class="col-sm-12 col-md-12">
                                            <div class="form-group select2-multiple-autoselect">
                                                <select aria-placeholder="Select service"  class="form-control text-capitalize select2-form-control" id="service-providers" name="service_providers[]" multiple="multiple">  
                                                    @if(isset($newWaitlistsSettings) && in_array("Any",explode(',',$newWaitlistsSettings->service_providers)) || $serviceProviders->count() > 1)
                                                        <option class="text-capitalize" value="Any" @if(isset($newWaitlistsSettings) && in_array("Any",explode(',',$newWaitlistsSettings->service_providers))) selected @endif>Any</option>  
                                                    @endif                                           
                                                    @foreach ($serviceProviders as $sp)
                                                    <option @if($sp !='Any' && count($serviceProviders) == 1) selected @endif class="text-capitalize" value="{{$sp->id}}"
                                                        @if(isset($newWaitlistsSettings) && in_array($sp->id,explode(',',$newWaitlistsSettings->service_providers))) selected @endif>{{$sp->first_name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <span class="invalid-feedback d-block"></span>  
                                        </div>       
                                    </div>
                                </div>

                                  <div class="form-group">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-12">  
                                            <label class="tooltip-new">Enable waitlist for which services?</label>                                        
                                        </div>
                                           <div class="col-sm-12 col-md-12">
                                            <div class="form-group select2-multiple-autoselect">
                                                <select aria-placeholder="Select service"  class="form-control text-capitalize select2-form-control" id="Service-providers-available-for-online-consults" name="applicable_services[]" multiple="multiple">     
                                                    
                                                    
                                                    @if(isset($newWaitlistsSettings) && in_array("Any",explode(',',$newWaitlistsSettings->applicable_services)) || $practitonerAppointmentTypes->count() > 1)
                                                        <option 
                                                        @if(isset($newWaitlistsSettings) && in_array('Any',explode(',',$newWaitlistsSettings->applicable_services))) selected @endif
                                                        class="text-capitalize" 
                                                        value="Any" >Any</option>   
                                                    @endif                                                
                                                    @foreach ($practitonerAppointmentTypes as $appointmentType)
                                                    <option @if($appointmentType !='Any' && count($practitonerAppointmentTypes) == 1) selected @endif class="text-capitalize" value="{{$appointmentType->id}}"
                                                        @if(isset($newWaitlistsSettings) && in_array($appointmentType->id,explode(',',$newWaitlistsSettings->applicable_services))) selected @endif>{{$appointmentType->appointment_type}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <span class="invalid-feedback d-block"></span>  
                                        </div>   
                                    </div>
                                </div>

                                {{-- <div class="form-group">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-12">  
                                            <label class="tooltip-new">Which days can clients choose as preferred days for an appointment?</label>                                        
                                        </div>
                                       <div class="col-sm-12 col-md-12">
                                            <div class="row be-select">
                                                @foreach($days as $key=>$day)
                                                    <div class="col-sm-2 col-md-2">                                                   
                                                        <div class="age-title">
                                                            <input type="checkbox" class="day-checkbox" name="preferred_day" id="day_{{$day}}" value="{{$day}}" autocomplete="off" 
                                                            @if(optional($newWaitlistsSettings)->$key == 1)
                                                                checked
                                                            @endif>
                                                            <label for="day_{{$day}}" class="w-100 text-center ">{{$day}}</label>
                                                        </div>
                                                    </div>
                                                @endforeach 
                                            </div>
                                            <span class="invalid-feedback d-block" id="prefered_day_error"></span>
                                        </div>   
                                    </div>
                                </div> --}}

                                <div class="form-group small-padding-group">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-12">
                                            <label class="tooltip-new">Waitlist join link
                                                <span class="tooltip-info-icon">
                                                    <img src='{{asset("assets/images/information-icon-new.svg")}}' alt="" class="img-fluid info-icon">
                                                </span>
                                                <div class="tooltiptext">
                                                    <div class="media">
                                                        <div class="media-body">Send this link for clients to add themselves to your waitlist</div>
                                                    </div>
                                                </div>
                                            </label>
                                        </div>
                                        <div class="col-sm-12 col-md-12">
                                            <div class="copy-link-input">
                                                <textarea 
                                                    name="purchase_link" id="purchase_code_link" class="form-control" placeholder="https://staging.myappointments.app/portal/public/get-embeded-code?business_id=Njk5">{{ $packageSettings->purchase_link ?? "" }}</textarea>
                                                    <a href="javascript:void(0)" onclick="myFunction('purchase_code_link')" class="copy-link">Copy</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                                        
                            </div>
                        </div>
                        <div class="voucher-footer">
                            <button type="submit" class="cursor-pointer btn-fill">Update and save</button>
                        </div>
						</form>
                    </div>
                </div>             
             
            </div>
        </div>
    </div>


@endsection


@section('import-scripts')
<script src='{{ asset("assets/js/colorPick.js")}}'></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script src="{{asset('assets/js/practitioner/my-settings.js')}}" type="text/javascript"></script>
<script src='{{ asset("assets/js/croppie.js")}}'></script>
<script type="text/javascript">

    $(document).ready(function() {
        var businessId = @json($businessProfile->id);
        var baseUrl = "{{route('home')}}";
        var url = baseUrl + "/get_waitlist?" + 'business_id=' + btoa(businessId);
        $("#purchase_code_link").html(url);
        OnlinePurchaseFields();
    });

   
    $('.custom-control-input').on('change', function() {
      if (this.checked) {
        $('.autosizetextaria').each(function() {
          this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
        }).on('input', function() {
          this.style.height = 'auto';
          this.style.height = (this.scrollHeight) + 'px';
        });
      }
    });

  
    $(".notify_credit_btn").hover(function() {
      $(".notify_credit_toggle").toggle();
    });

    $('#Service-providers-available-for-online-consults').on("change",function() {
      var selectedTypes = $(this).val();
      $.each(selectedTypes, function (index,value) {
        if( value == 'Any' ) {
          $('#Service-providers-available-for-online-consults').val('Any');
          return false;
        }
      });
    });

    $('#service-providers').on("change",function() {
      var selectedTypes = $(this).val();
      $.each(selectedTypes, function (index,value) {
        if( value == 'Any' ) {
          $('#service-providers').val('Any');
          return false;
        }
      });
    });

    $('#preferred_locations').on("change",function() {
      var selectedTypes = $(this).val();
      $.each(selectedTypes, function (index,value) {
        if( value == 'Any' ) {
          $('#preferred_locations').val('Any');
          return false;
        }
      });
    });

    $(document).ready(function () {
        $('#preferred_locations').select2({
            placeholder: "Select location",
            tokenSeparators: [",", " "],
        });
         $('#service-providers').select2({
            placeholder: "Select service provider",
            tokenSeparators: [",", " "],
        });
        $('#Service-providers-available-for-online-consults').select2({
            placeholder: "Select service",
            tokenSeparators: [",", " "],
        });
        
        $(".js-example-basic-single").select2({ minimumResultsForSearch: -1 });

        $(".single-select2").select2({
        placeholder: function () {
            $(this).data('placeholder');
        },
        closeOnSelect: true,
        dropdownPosition: 'below',
        });
	});

	$(document).on( 'submit', '#addWaitlistSettings', function(e) {
        e.preventDefault();
        var isValid = true; 
        $('.invalid-feedback').text(''); 

         var selectedDays = new Array();
         $(".be-select").each(function() {
            var arr = new Array();
            $(this).find("input").each(function(index) {
               if ($(this).is(":checked")) {
                  arr.push(1);
               } else {
                  arr.push(0);
               }
            });
            selectedDays.push(arr);
         });

        var formData = new FormData(this); 
        var selectedDays = JSON.stringify(selectedDays);   
        formData.append( 'selectedDays',selectedDays);
        $.ajax({
          type: "post",
          url: "{{ route('practitioner.waitlist.setting.store') }}",
          data: formData,
          dataType: "JSON",
          cache: false,
          processData: false,
          contentType: false,
          beforeSend: function(msg) {
            $(".loading").addClass("d-block");
          }
        }).done( function(response) {
          $(".loading").removeClass("d-block");
          if( response.status == 'success' ) {
            Swal.fire({
            icon: response.status,
            title: response.msg,
            showClass: {
              popup: 'animate__animated animate__fadeInDown'
              },
              hideClass: {
                popup: 'animate__animated animate__fadeOutUp'
              }
            })
            setTimeout(function() {
				// var baseUrl = "{{route('practitioner.settings.my.gift.vouchers')}}";     
                // window.location.href = baseUrl;
                window.location.reload();
				
			}, 2000);
            
          }else{

             $('.invalid-feedback').text('');
            $.each(response.errors, function(key, value) {

                $('#prefered_day_error').text('');
                if(key == 'prefered_day')
                {
                    $('#prefered_day_error').text('This field is required');
                }

                let input = $('input[name=' + key + ']');
                // Generic case for other fields
                input.addClass('is-invalid');
                input.parent().next('.invalid-feedback').text(value[0]);

                let select = $('select[name="' + key + '[]"]');
                if (select.length) {
                    select.addClass('is-invalid');
                    select.parent().next('.invalid-feedback').text(value[0]);
                }                       
            });

            // Swal.fire({
            // icon: response.status,
            // title: response.msg,
            // showClass: {
            //   popup: 'animate__animated animate__fadeInDown'
            //   },
            //   hideClass: {
            //     popup: 'animate__animated animate__fadeOutUp'
            //   }
            // })
        }
        }).fail(function (error) {
          $(".loading").removeClass("d-block");
        });
    });

	$(".selprepo").change(function() {
      var val = $(this).val();
      console.log("val: " + val);
      if (val != "" && val != null) {
        var id = $(this).closest(".main-div").find('.append-text').attr("id");
        $(this).closest(".main-div").find('.append-text').trigger('input');
        console.log(id);
        insertAtCaret(id, val);
      }
    });

    $("input[name='is_allow_online_purchase']").on('change', function() { 
        OnlinePurchaseFields();
    });
    function OnlinePurchaseFields() {
        //var isonlinepurchase = $(this).val();
        var isonlinepurchase = $("input[name='is_allow_online_purchase']:checked").val();
        if(isonlinepurchase == '1'){
            $('.purchase_link_div').removeClass('d-none');
        }else{
            $('.purchase_link_div').addClass('d-none');
        }
    }      
    
    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");

      Swal.fire({
         icon: 'success',   
         title: 'Waitlist link copied',
         showCancelButton: false,
         showConfirmButton: false,
         // cancelButtonText : 'Close',
         showClass: {
            popup: 'animate__animated animate__fadeInDown'
         },
         hideClass: {
            popup: 'animate__animated animate__fadeOutUp'
         }
      });   
   }
</script>
@endsection