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

@section('content')
    <div class="form-wizard">  
	  @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
	  <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>
		  	
		    <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-6">    
				    			<h3>Store Details</h3>
				    			<p><i>Supercharge Website Engagement</i></p>
				    		</div>                                                                       
					      	<div class="col-7">                     
					      		<div class="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" name="domain" id="domain" placeholder="www.example.com" value="{{isset($setting->domain) ? $setting->domain : $shop_data->domain}}">
										    <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-center mar-b-0">
							        	<button type="submit" class="btn btn-primary next second-step startAnim">save</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">
					<form method="POST" action="">
			    		<div class="add-domain widget-card">
			    			<div class="col-6">
				    			<h3>Widgets</h3>                    
				    			<p><i>Embed a Non-Disruptive Discussion Forum Into Your Website</i></p>
				    		</div>
			    			<div class="col-7">
				    			<div class="card-body">
				    				<div class="top-wdiget d-flex">
				    					<label> 
				    						<span class="ze-heading">{{isset($widget_data->owner) ? $widget_data->owner->name : ''}}</span>
				    						<span class="badge badge-light ze-badge">Admin</span>
				    					</label>
				    					<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>
				    				</div>
				    				<h4>{{ isset($setting->org_name) ? $setting->org_name : '' }}</h4>
				    				<p class="card-text"> 
				    					<a target="_blank" href="#">https://{{ isset($setting->domain) ? $setting->domain : ''}}</a>
				    				</p>
				    				<div class="get-comments d-flex">
				    					<div class="comments-i"> 
				    						<span class="text-muted">Comments</span>
				    						<h5>{{ isset($widget_data->totalComments) ? $widget_data->totalComments : 0 }}</h5> 
				    					</div>
				    					<div class="getcode"> 
				    						<button class="btn btn-sm btn-outline-secondary modal-toggle" type="button"> 
				    							<i class="fa fa-code"></i> Get Code 
				    						</button>
				    					 </div>
				    				</div>
				    				<div class="foot-wdiget d-flex">
				    					@if($widget_data)
				    						<a href="http://ec2-54-175-147-211.compute-1.amazonaws.com:8080/widget/moderate/{{$widget_data->id}}/?token={{$user_data->access_token}}" class="btn btn-sm btn-outline-primary" target="_blank">Moderate</a>
				    						<a href="http://ec2-54-175-147-211.compute-1.amazonaws.com:8080/widget/stats/{{$widget_data->id}}/?token={{$user_data->access_token}}" class="btn btn-sm btn-outline-primary" target="_blank">Stats</a>
				    						<a href="http://ec2-54-175-147-211.compute-1.amazonaws.com:8080/widget/update/{{$widget_data->id}}/?token={{$user_data->access_token}}" class="btn btn-sm btn-outline-secondary" target="_blank">Edit</a>
				    					@else
				    						<a href="#" class="btn btn-sm btn-outline-primary">Moderate</a>
				    						<a href="#" class="btn btn-sm btn-outline-primary">Stats</a>
				    						<a href="#" class="btn btn-sm btn-outline-secondary">Edit</a>
				    					@endif
				    				</div>
				    			</div>
			    			</div>
			    		</div>
			    		<div class="add-domain applicable-part">
			    			<div class="col-6">
			    				<h3>Applicable page</h3>
			    			</div>
			    			<div class="col-7">
			    				<div class="applicable-box">
			    					<div class="form-group">
								      <input type="checkbox" id="home" onclick="updateApplicableStatus('home')" {{isset($setting) && ($setting->home_page == 1) ? "checked" : ""}}>
								      <label for="home">Home</label>
								    </div>
								    <div class="form-group">
								      <input type="checkbox" id="collection" onclick="updateApplicableStatus('collection')" {{ isset($setting) && ($setting->collection_page == 1) ? "checked" : ""}}>
								      <label for="collection">Collection</label>
								    </div>
								    <div class="form-group">
								      <input type="checkbox" id="product" onclick="updateApplicableStatus('product')" {{ isset($setting) && ($setting->product_page == 1) ? "checked" : ""}}>
								      <label for="product">Product</label>
								    </div>
								</div>
			    			</div>
			    		</div>
			    	</form>
			    </div>
		    </div>
	  </div>
	</div>

	<div class="modal">
	  <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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        actions.TitleBar.create(app, { title: 'Home' });

  //       $('#next-step').click(function(){
  //           $('div.step_first').hide();
  //           $('.progress').show();
	 //        setTimeout(function(){ 
	 //            $('.progress').hide();
	 //            $('.second_step').show(); 
	 //        }, 3000);
		// });

		$('.modal-toggle').on('click', function(e) {
		  e.preventDefault();
		  $('.modal').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->user_id : ''}} },
		           success:function(data){
		              console.log(data.success);
		           }
		        });
			} else {
				$.ajax({
		           type:'POST',
		           url:"{{ route('remove.scripttag') }}",
		           data:{script_status: 'disabled', user_id: {{isset($setting) ? $setting->user_id : ''}} },
		           success:function(data){
		              console.log(data.success);
		           }
		        });
			}
		});

		function updateApplicableStatus(name='home') {
			var updateStatus = 0;
			if($('#'+name).prop('checked') == true) {
				console.log('checked', name);
				updateStatus = 1;
			}
			$.ajax({
				type: 'POST',
				url: "{{route('update.applicable.status')}}",
				data: {user_id: {{isset($setting) ? $setting->user_id : ''}}, name: name, status: updateStatus },
				success: function(data) {
					console.log(data.success);
				}
			});
		}
    </script>

@endsection