@extends('shopify-app::layouts.default')

@section('content')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.css">
    <div class="form-wizard zr__form__wizard">
	  <div class="toast" id="msg_alert" role="alert" aria-live="assertive" aria-atomic="true" style="position: fixed; bottom: 0;left: 50%;transform: translate(-50%, -50%);">
	    <div class="toast-body">
	      <span id="msg_alert_text">Show Message.</span>
	      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
	        	<span aria-hidden="true">&times;</span>
	      </button>
	    </div>
	  </div>
	  <div class="stepper-content">
	  		<div class="col-12" style="padding: 0 15px;">
		    	<div class="progress progress-striped" style="display: none;">
			    	<div class="progress-bar"></div> 
			    	<p class="zeeker-account">Creating Zeeker Account and Widget for the Store. </p>                      
			  	</div> 
		  	</div>
		  	@if ($errors->any())
		        <div class="alert alert-danger">
		            <ul>
		                @foreach ($errors->all() as $error)
		                    <li>{{ $error }}</li>
		                @endforeach
		            </ul>
		        </div>
		    @endif
		    <!-- <div class="alert alert-danger" id="msg_err" style="margin: 15px;font-family: 'Poppins', sans-serif;font-size: 13px; position: relative;padding: 0.75rem 1.25rem;margin-bottom: 1rem;border: 1px solid transparent;border-radius: 0.25rem; display: none;" role="alert">
		  		Error message
		  	</div>
		  	<div class="alert alert-primary" id="msg_suc" style="margin: 15px;font-family: 'Poppins', sans-serif;font-size: 13px; position: relative;padding: 0.75rem 1.25rem;margin-bottom: 1rem;border: 1px solid transparent;border-radius: 0.25rem; display: none;" role="alert">
		  		Success message
		  	</div> -->		  	
		    <div class="step_first" style="display: {{ (isset($setting->step1) && $setting->step1 == 1) ? 'none' : 'block' }};" >
		    	<div class="form-container step_first">
					<form method="POST" action="{{ route('setting.step1') }}" role="form" autocomplete="off">
						@csrf
						@sessionToken
						<input type="hidden" name="shop_owner" value="{{ $shop_data->shop_owner }}">
						<input type="hidden" name="shop_owner_email" value="{{ $shop_data->email }}">
				    	<div class="add-domain">
				    		<div class="col-7">    
				    			<h3>Store Details</h3>
				    			<p><i>Supercharge Website Engagement</i></p>
				    		<!-- </div>                                                                       
					      	<div class="col-7">  -->                    
					      		<div class="ui-card__section">
					      			<!-- ui-card__section -->
							        <div class="form-group">              
							          <div class="tool-frm">	
								          <label>Name of the Organization<span class="red">*</span></label>	
								          <input type="text" placeholder="Max 50 characters" name="org_name" id="org_name" value="{{ isset($setting->org_name) ? $setting->org_name : $shop_data->name }}">
								          <span  class="name_err"></span>
							          </div>
							        </div>                                                                                            
							        <div class="form-group">
							          <div class="tool-frm">	
								          <label>Domain URL<span class="red">*</span></label>
								          <div class="input-group">
										    <div class="input-group-addon">https://</div>
										    <input type="text" class="form-control zr___domain__url_input" name="domain" id="domain" placeholder="www.example.com" value="{{isset($setting->domain) ? $setting->domain : $shop_data->domain}}" readonly>
										    <span class="domain_err"></span>
										  </div>                        
							      	  </div>              
							        </div>
							        <div class="form-group">
							          <div class="tool-frm">	          
								          <label>Widget Name<span class="red">*</span></label>
								          <input type="text" placeholder="Max 20 characters" name="widget_name" id="widget_name" value="{{isset($setting->widget_name) ? $setting->widget_name : $shop_data->name }}">
								          <span class="widget_err"></span>
							          </div>
							        </div>
							        <div class="form-group text-left mar-b-0 zr__main_btn___save">
							        	<button type="submit" class="btn  next second-step startAnim">Create Widget</button>
							        </div>
						        </div>
					        </div>
				      	</div> 
				    </form>
				</div>
		    </div>
		    <div class="second_step" style="display: {{ (isset($setting->step1) && $setting->step1 == 1) ? 'block' : 'none' }};">
		    	<div class="form-container step_second">
					<div class="zr_main_heading">
						<h3>Zeeker: Supercharge Visiter Engagement</h3>
                		<p>Zeeker lets you capture, moderate, and display question, feedback, reviews, and comments from your visitor in a non-disruptive manner.  </p>
                	</div>
		    		<div class="add-domain preview-part">
		    			<div class="col-6">
		    				<div class="zr_cb_title">
		    						<span>This is what your widget looks like</span>
		    						<div class="modal-custmpophold-refresh_icon zr___tooltip tooltips" tooltip="Show updated design" tooltip-position="top" id="refresh_preview" >
		    						<i class="fa fa-refresh" aria-hidden="true"></i>
									</div>
									<!-- <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  									Tooltip with HTML
									</button> -->
		    					</div>
		    				<div class="card-body zr__card_body_bg zr__card_body_bg_mobile_view">
		    					<!-- <div class="zr_cb_title">
		    						<span>This is what your widget looks like</span>
		    					</div> -->
		    					<div class="modal-custmpophold">
		    						<!-- <div class="modal-custmpophold-refresh_icon zr___tooltip" id="refresh_preview">
		    							<i class="fa fa-refresh" aria-hidden="true"></i>
										<span class="zr___tooltiptext">Shows updated design</span>
									</div> -->
								  	<div class="zr_card_box_modl" id="widget_preview">
									    @include('preview')
								  	</div>
								</div>
							</div>
							<div class="Zr____mobile__view_none">
								<div class="zr__foot_wdiget foot-wdiget d-flex">
		                            @if($widget_data)
		                                <a href="https://portal.zeeker.com/widget/update/{{$widget_data->id}}/?token={{$user_data->access_token}}" class="btn btn-sm zr___tooltip tooltips toptip__mobile_edit_mob" tooltip="Customize the look and feel of your widget, the features you want to display (Q&A, Reviews, Comments, Polls etc)" tooltip-position="top" target="_blank">Edit</a>

		                                <a href="https://portal.zeeker.com/widget/stats/{{$widget_data->id}}/?token={{$user_data->access_token}}" class="btn btn-sm zr___tooltip tooltips toptip__mobile_analytics_mob" target="_blank" tooltip="View charts and statistics related to your widget." tooltip-position="top">
		                                	<!-- <span class="zr___tooltiptext">
														View charts and statistics related to your widget.
													</span> -->Analytics</a>
		                                <a href="https://portal.zeeker.com/widget/moderate/{{$widget_data->id}}/?token={{$user_data->access_token}}" class="btn btn-sm zr___tooltip tooltips toptip__mobile_moderate_mob" target="_blank" tooltip="Moderate the content on your widget. You can also reply to posts from other users here." tooltip-position="top">
		                                	<!-- <span class="zr___tooltiptext">
														Moderate the content on your widget. You can also reply to posts from other users here.
													</span> -->Moderate</a>
		                            @else
		                                <a href="#" class="btn btn-sm zr___tooltip btn-outline-secondary tooltips toptip__mobile_edit_mob" tooltip="Customize the look and feel of your widget, the features you want to display (Q&A, Reviews, Comments, Polls etc)" tooltip-position="top">
		                                	<!-- <span class="zr___tooltiptext zr___tooltiptext__left_edit">
														Customize the look and feel of your widget, the features you want to display (Q&A, Reviews, Comments, Polls etc)
													</span> -->Edit</a>
		                                <a href="#" class="btn btn-sm zr___tooltip btn-outline-primary tooltips toptip__mobile_analytics_mob" tooltip="View charts and statistics related to your widget." tooltip-position="top">
		                                	<!-- <span class="zr___tooltiptext">
														View charts and statistics related to your widget.
													</span> -->Analytics</a>
		                                <a href="#" class="btn btn-sm zr___tooltip btn-outline-primary tooltips toptip__mobile_moderate_mob" tooltip="Moderate the content on your widget. You can also reply to posts from other users here." tooltip-position="top">
		                                	<!-- <span class="zr___tooltiptext">
														Moderate the content on your widget. You can also reply to posts from other users here.
													</span> -->Moderate</a>
		                            @endif
                        		</div>
							</div>
		    			</div>
		    			<div class="col-7">
			    			<div class="card-body">
			    				<div class="zr__rigth__card">
			    					<div class="zr__rigth__card_fisrt">Widget Name</div>
			    					<div class="zr__rigth__card_mid">:</div>
			    					<div class="zr__rigth__card_last">{{isset($widget_data->widgetName) ? $widget_data->widgetName : ''}}</div>
			    				</div>
			    				<div class="zr__rigth__card">
			    					<div class="zr__rigth__card_fisrt">Widget ID</div>
			    					<div class="zr__rigth__card_mid">:</div>
			    					<div class="zr__rigth__card_last">{{isset($widget_data->id) ? $widget_data->id : ''}}</div>
			    				</div>
			    				<div class="zr__rigth__card">
			    					<div class="zr__rigth__card_fisrt">Owner Email</div>
			    					<div class="zr__rigth__card_mid">:</div>
			    					<div class="zr__rigth__card_last">{{isset($widget_data->owner->email) ? $widget_data->owner->email : ''}}</div>
			    				</div>
			    				<div class="zr__rigth__card">
			    					<div class="zr__rigth__card_fisrt">Widget Status</div>
			    					<div class="zr__rigth__card_mid">:</div>
			    					<div class="zr__rigth__card_last">
			    						<div class="zr___tooltip">
				    						<div class="form-group">
				    							<input class="tgl tgl-flat" name="script_en" id="script_en" type="checkbox" value="1" {{isset($setting->scripttag_id) ? "checked" : ""}}>
												<label class="tgl-btn"></label>
				    						</div>
				    						<span class="zr___tooltiptext zr___tooltiptext___right sprt" id="script_en_tooltip">
												{{isset($setting->scripttag_id) ? "Turn-off the Widget" : "Turn-on the Widget"}}
											</span>
										</div>
			    					</div>
			    				</div>				    				
			    			</div>
			    			<div class="applicable-box zr__applicable-box">
			    				<div class="zr__applicable-box_title">
			    					<div class="zr__dis_sty_shift">
				    					<h3>Display Options</h3>
				    					<div class="zr___tooltip tooltips toptip__mobile_Display_mob" tooltip="Decide where you want the widget to display. Note that every page will have its own posts." tooltip-position="top">
				    						<i>i</i>
										</div>
									</div>
									<button class="btn" type="button" id="btn_display_options">Save</button>
			    				</div>
			    				<div class="displaycatg">
			    					<form method="POST" id="display_options">
				    					<ul class="displaycatglist">
				    						<li>
				    							<label>
				    								<input type="checkbox" value="1" id="home_page" name="home_page" {{isset($setting->home_page) && $setting->home_page == 1 ? 'checked' : ''}}>
				    								<span></span>Home
				    							</label>
				    						</li>
				    						<li>
				    							<label>
					    							<input type="checkbox" value="1" id="product_page" name="product_page" {{isset($setting->product_page) && $setting->product_page == 1 ? 'checked' : ''}}>
					    							<span></span>Products
				    							</label>
				    							<div id="product_multi" style="display: {{isset($setting->product_page) && $setting->product_page == 1 ? 'block' : 'none'}};">
				    								<select class="product-seach zr_chackbox-collect" id="product_multi_page" name="product_multi_page"  multiple>
					    								@foreach($products as $eachProd)
					    									<option value="/products/{{$eachProd->handle}}" {{isset($setting->product_multi_page) && @in_array('/products/'.$eachProd->handle, json_decode($setting->product_multi_page)) ? 'selected' : ''}}>{{$eachProd->title}}</option>
					    								@endforeach
				    								</select>
				    							</div>	
				    						</li>
				    						<li>
				    							<label>
				    								<input type="checkbox" value="1" id="collection_page" name="collection_page" {{isset($setting->collection_page) && $setting->collection_page == 1 ? 'checked' : ''}}>
				    								<span></span>Collections
				    							</label>
				    							<div id="collection_multi" style="display: {{isset($setting->collection_page) && $setting->collection_page == 1 ? 'block' : 'none'}};">
				    								<select class="collection-seach zr_chackbox-collect" id="collection_multi_page" name="collection_multi_page" multiple>
					    								@foreach($collections as $eachCol)
					    									<option value="/collections/{{$eachCol->handle}}" {{isset($setting->collection_multi_page) && @in_array('/collections/'.$eachCol->handle, json_decode($setting->collection_multi_page)) ? 'selected' : ''}}>{{$eachCol->title}}</option>
					    								@endforeach
					    							</select>
				    							</div>	
				    						</li>
				    						<li>
				    							<label>
				    								<input type="checkbox" value="1" id="blog_page" name="blog_page" {{isset($setting->blog_page) && $setting->blog_page == 1 ? 'checked' : ''}}>
				    								<span></span>Blogs
				    							</label>
				    							<div id="blog_multi" style="display: {{isset($setting->blog_page) && $setting->blog_page == 1 ? 'block' : 'none'}};">
				    								<select class="blog-seach zr_chackbox-collect" id="blog_multi_page" name="blog_multi_page" multiple>
					    								@foreach($blogs as $eachBlog)
					    									<option value="/blogs/{{$eachBlog->handle}}" {{isset($setting->blog_multi_page) && @in_array('/blogs/'.$eachBlog->handle, json_decode($setting->blog_multi_page)) ? 'selected' : ''}}>{{$eachBlog->title}}</option>
					    								@endforeach
					    							</select>
				    							</div>	
				    						</li>
				    						<li>
				    							<label>
				    								<input type="checkbox" value="1" id="other_page" name="other_page" {{isset($setting->other_page) && $setting->other_page == 1 ? 'checked' : ''}}>
				    								<span></span>Other Pages
				    							</label>
				    							<div id="other_multi" style="display: {{isset($setting->other_page) && $setting->other_page == 1 ? 'block' : 'none'}};">
				    								<select class="other-seach zr_chackbox-collect" id="other_multi_page" name="other_multi_page" multiple>
					    								@foreach($pages as $eachPage)
					    									<option value="/pages/{{$eachPage->handle}}" {{isset($setting->other_multi_page) && @in_array('/pages/'.$eachPage->handle, json_decode($setting->other_multi_page)) ? 'selected' : ''}}>{{$eachPage->title}}</option>
					    								@endforeach
					    							</select>
				    							</div>	
					    					</li>
				    					</ul>
			    					</form>
			    				</div>
							</div>
		    			</div>
		    		</div>
		    	<div class="Zr____tsk__view_none">
		    		<div class="zr__all_btn__footer">
                        <div class="zr__foot_wdiget foot-wdiget d-flex">
                            @if($widget_data)
                                <a href="https://portal.zeeker.com/widget/update/{{$widget_data->id}}/?token={{$user_data->access_token}}" class="btn btn-sm zr___tooltip tooltips toptip__dsktop_edit_dsktop" tooltip="Customize the look and feel of your widget, the features you want to display (Q&A, Reviews, Comments, Polls etc)" tooltip-position="top" target="_blank">Edit</a>											
                                <a href="https://portal.zeeker.com/widget/stats/{{$widget_data->id}}/?token={{$user_data->access_token}}" class="btn btn-sm zr___tooltip tooltips" tooltip="View charts and statistics related to your widget." tooltip-position="top" target="_blank" >Analytics</a>

                                <a href="https://portal.zeeker.com/widget/moderate/{{$widget_data->id}}/?token={{$user_data->access_token}}" class="btn btn-sm zr___tooltip tooltips" tooltip="Moderate the content on your widget. You can also reply to posts from other users here." tooltip-position="top" target="_blank" >Moderate</a>
                            @else
                                <a href="#" class="btn btn-sm zr___tooltip btn-outline-secondary" tooltip="Customize the look and feel of your widget, the features you want to display (Q&A, Reviews, Comments, Polls etc)" tooltip-position="top" >Edit</a>
                                <a href="#" class="btn btn-sm zr___tooltip btn-outline-primary " tooltip="View charts and statistics related to your widget." tooltip-position="top">Analytics</a>
                                <a href="#" class="btn btn-sm zr___tooltip btn-outline-primary" tooltip="Moderate the content on your widget. You can also reply to posts from other users here." tooltip-position="top">Moderate</a>
                            @endif
                            </div>
                        
	                        <div class="zr__foot_wdiget_right foot-wdiget d-flex">
	                            <a href="https://www.zeeker.com/contact" class="btn btn-sm zr___tooltip tooltips sprt" tooltip="Support" tooltip-position="top" target="_blank" >Support</a>
	                        </div>
                        </div>
                    </div>
                    <div class="Zr____tsk__view_none_block">
                        	<div class="zr__foot_wdiget_right foot-wdiget d-flex">
                            <a href="https://www.zeeker.com/contact" class="btn btn-sm zr___tooltip sprt tooltips toptip__mobile_support_mob" target="_blank" tooltip="Support" tooltip-position="top">Support</a>
                        </div>
                        </div>
			    </div>
		    </div>
	  </div>
	</div>
<br>
<br>
	<div class="modal get-code-pop">
	  <div class="modal-overlay modal-toggle"></div>
	  <div class="modal-wrapper modal-transition">
	    <div class="modal-header">
	      <h4 class="modal-title">{{ isset($setting->org_name) ? $setting->org_name : '' }}<span>https://{{ isset($setting->domain) ? $setting->domain : ''}}</span></h4>	
	      <button class="modal-close modal-toggle">x</button>
	    </div>
	    <div class="modal-body">
	      <div class="modal-content">
	      	<div class="widget-copy"> 
	      		<div class="input-group-prepend"> 
	      			<span class="input-group-text">Widget Id:</span>
	      		</div> 
	      		<input class="form-control" placeholder="" title="Copy to Clipboard" type="text" value="{{ isset($widget_data->uuid) ? $widget_data->uuid : ''}}">
	      		<div class="input-group-append"> 
	      			<button class="btn btn-light" type="button" >Copy</button> 
	      		</div> 
	      	</div>
	        <div class="tab-teaser">
			    <div class="tab-menu">
			      <ul>
			        <li><a href="#" class="active" data-rel="tab-1">Script</a></li>
			        <!-- <li><a href="#" data-rel="tab-2" class="">AMP Script</a></li> -->
			      </ul>
				</div>

				<div class="tab-main-box">
				    <div class="tab-box" id="tab-1" style="display:block;">
				       <h5>Add  script to your site</h5>
				       <p>Add this html snippet to any webpage where you want Zeeker to display. 
			       		Please contact us if you have any questions</p>
			       		<div class="script-part"> 
			       		  <textarea class="form-control" name="script" rows="10">
			       		  	<script id='zwidget' src='https://zeeker-script-library-prod.s3.amazonaws.com/app.bundle.js?id={{isset($widget_data->uuid) ? $widget_data->uuid : ""}}&tagname='></script>
			       		  </textarea> 
						  <div class="form-group"> 
						  	<!-- <a class="text-left" href="javascript:void(0)">Email Instructions</a>  -->
						  	<button class="btn btn-light" type="button">Copy to Clipboard</button> 
						  </div> 
						</div>
				    </div>
				    <!-- <div class="tab-box" id="tab-2">
				        <h5>Add AMP script to your site</h5>
				       	<p>Add this html snippet to any webpage where you want Zeeker to display. 
			       		Please contact us if you have any questions</p>
			       		<div class="scrol-code">
			       			<div class="alert alert-info"> 
			       			    <p>Include the script code in head section</p> 
			       				<button class="btn btn-light" type="button">Copy</button> 
			       			</div>
			       			<div class="script-part"> 
				       		  <textarea class="form-control" name="script" rows="10"></textarea>  
							</div>
							<div class="alert alert-info"> 
			       			    <p>Include the script code in css section</p> 
			       				<button class="btn btn-light" type="button">Copy</button> 
			       			</div>
			       			<div class="script-part"> 
				       		  <textarea class="form-control" name="script" rows="10"></textarea>  
							</div>
							<div class="alert alert-info"> 
			       			    <p>Include the script code in HTML section</p> 
			       				<button class="btn btn-light" type="button">Copy</button> 
			       			</div>
			       			<div class="script-part"> 
				       		  <textarea class="form-control" name="script" rows="10"></textarea>  
							</div>
			       		</div>
				    </div> -->
				</div>
			</div>
	      </div>
	    </div>
	  </div>
	</div>
@endsection 

@section('scripts')
    @parent

    <script>
        actions.TitleBar.create(app, { title: 'Home' });
    </script>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
	
 	<script type="text/javascript">
		$(function(){
			$('.toast').toast();
		});
	</script>
	<script>
		$('.tooltips').append("<span></span>");
		$('.tooltips:not([tooltip-position])').attr('tooltip-position','bottom');
		$(".tooltips").mouseenter(function(){
		$(this).find('span').empty().append($(this).attr('tooltip'));
		});
	</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.js"></script>
	<script src="https://rawgit.com/wasikuss/select2-multi-checkboxes/select2-3.5.x/select2.multi-checkboxes.js"></script>
	
	<script type="text/javascript">

		$( document ).ready(function() {
			jQuery(function($){
			    // $('.select2-multiple').select2MultiCheckboxes({
			    // 	placeholder: "Choose multiple elements",
			    // })
			    // $('.select2-multiple2').select2MultiCheckboxes({
			    // 	formatSelection: function(selected, total) {
			    //   		return "Selected " + selected.length + " of " + total;
			    //   	}
			    // });
			    $('.product-seach').select2({
			    	placeholder: "Specify Products. Leave blank to display in all pages.",
			      	width: "100%"
			    });
			    $('.collection-seach').select2({
			    	placeholder: "Specify Collections. Leave blank to display in all pages.",
			      	width: "100%"
			    });
			    $('.blog-seach').select2({
			    	placeholder: "Specify Blogs. Leave blank to display in all pages.",
			      	width: "100%"
			    });
			    $('.other-seach').select2({
			    	placeholder: "Specify Pages. Leave blank to display in all pages.",
			      	width: "100%"
			    });
			});

			$("#product_page").click(function() {
			    if($(this).is(":checked")) {
			        $("#product_multi").show();
			    } else {
			        $("#product_multi").hide();
			    }
			});

			$("#collection_page").click(function() {
			    if($(this).is(":checked")) {
			        $("#collection_multi").show();
			    } else {
			        $("#collection_multi").hide();
			    }
			});

			$("#blog_page").click(function() {
			    if($(this).is(":checked")) {
			        $("#blog_multi").show();
			    } else {
			        $("#blog_multi").hide();
			    }
			});

			$("#other_page").click(function() {
			    if($(this).is(":checked")) {
			        $("#other_multi").show();
			    } else {
			        $("#other_multi").hide();
			    }
			});
		});

		$('.modal-toggle').on('click', function(e) {
		  e.preventDefault();
		  $('.get-code-pop').toggleClass('is-visible');
		});

		$('.tab-menu li a').on('click', function(){
		   	var target = $(this).attr('data-rel');
			$('.tab-menu li a').removeClass('active');
		   	$(this).addClass('active');
		   	$("#"+target).fadeIn('slow').siblings(".tab-box").hide();
		   	return false;
  		});

		$('#script_en').on('click', function(e) {
			if($(this).prop('checked') == true){
	            $.ajax({
		           type:'POST',
		           url:"{{ route('add.scripttag') }}",
		           data:{script_status: 'enabled', user_id: "{{isset($setting) ? $setting->domain : ''}}" },
		           success:function(data){
		           	  if(data.status == 'success') {
			       	  	$('#msg_alert_text').html(data.message);
		       	  		$('#msg_alert').addClass('show');
		       	  		$('#script_en_tooltip').html("Turn-off the Widget");
			       	  	setTimeout(function(){
						    $("#msg_alert").removeClass("show");
						}, 3000);
			       	  } else {
			       	  	$('#msg_alert_text').html(data.message);
		       	  		$('#msg_alert').addClass('show');
		       	  		$('#script_en_tooltip').html("Turn-on the Widget");
			       	  	setTimeout(function(){
						    $("#msg_alert").removeClass("show");
						}, 3000);
			       	  }
		           }
		        });
			} else {
				$.ajax({
		           type:'POST',
		           url:"{{ route('remove.scripttag') }}",
		           data:{script_status: 'disabled', user_id: "{{isset($setting) ? $setting->domain : ''}}" },
		           success:function(data){
		           	  if(data.status == 'success') {
			       	  	$('#msg_alert_text').html(data.message);
		       	  		$('#msg_alert').addClass('show');
		       	  		$('#script_en_tooltip').html("Turn-on the Widget");
			       	  	setTimeout(function(){
						    $("#msg_alert").removeClass("show");
						}, 3000);
			       	  } else {
			       	  	$('#msg_alert_text').html(data.message);
		       	  		$('#msg_alert').addClass('show');
		       	  		$('#script_en_tooltip').html("Turn-off the Widget");
			       	  	setTimeout(function(){
						    $("#msg_alert").removeClass("show");
						}, 3000);
			       	  }         
		           }
		        });
			}
		});

		$('#btn_display_options').on('click',function() {
			var home_page = 0;
			var product_page = 0;
			var collection_page = 0;
			var blog_page = 0;
			var other_page = 0;
			if($('#home_page').prop('checked') == true) {
				home_page = 1;
			}
			if($('#product_page').prop('checked') == true) {
				product_page = 1;
			}
			if($('#collection_page').prop('checked') == true) {
				collection_page = 1;
			}
			if($('#blog_page').prop('checked') == true) {
				blog_page = 1;
			}
			if($('#other_page').prop('checked') == true) {
				other_page = 1;
			}
			$.ajax({
				type: 'POST',
				url: "{{route('update.applicable.status')}}",
				data: {user_id: "{{isset($setting) ? $setting->domain : ''}}", home_page: home_page, product_page: product_page, collection_page: collection_page, blog_page: blog_page, other_page: other_page, product_multi_page: $('#product_multi_page').val(), collection_multi_page: $('#collection_multi_page').val(), blog_multi_page: $('#blog_multi_page').val(), other_multi_page: $('#other_multi_page').val() },
				success: function(data) {
					if(data.status == 'success') {
			       	  	$('#msg_alert_text').html(data.message);
		       	  		$('#msg_alert').addClass('show');
			       	  	setTimeout(function(){
						    $("#msg_alert").removeClass("show");
						}, 3000);
			       	  } else {
			       	  	$('#msg_alert_text').html(data.message);
		       	  		$('#msg_alert').addClass('show');
			       	  	setTimeout(function(){
						    $("#msg_alert").removeClass("show");
						}, 3000);
			       	  }
				}
			});
		});

		$('#refresh_preview').on('click', function() {
			$.ajax({
				type: 'POST',
				url: "{{route('get.widget')}}",
				data: {user_id: "{{isset($setting) ? $setting->domain : ''}}" },
				success: function(data) {
					// console.log(data);
					$('#widget_preview').html(data);
				}
			});
		});
		
	</script>
    

@endsection