<!-- begin page-header -->
<h1 class="page-header">Dashboard</h1>
<!-- end page-header -->

			<!-- begin row -->
<div class="row" id="createAppPanel">
	 <!-- begin panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">

                <h4 class="panel-title p-heading">Setup your Chatbot</h4>
            </div>
		<div class="panel-body">
            <form action="/" method="POST">
				<div id="setupwizard">
						<ol>
							<li>
							    Setup your Chatbot
							    <small>Setup your Chatbot and move on to Integrate.</small>
							</li>
							<li>
							    Integrate With Chatbot
							    <small>Steps to Download and Integrate with Chatbot of your choice.</small>
							</li>
							<li>
							    Test the Integration
							    <small>Review and Finish App Creation, Learn more.</small>
							</li>
						</ol>
					<!-- begin wizard step-1 -->
					<div>
                        <div class="jumbotron m-b-0" style="height:370px;padding-top:5px">
                          	<div class="col-md-12">
                              	<strong>Give us the path to your application and we will start gathering data and churn insights for you to act upon.If your app is available on different platforms,please make sure you provide us the path of all the platforms below</strong><br/>
								<div class="col-12 ui-sortable">

									<div class="panel-body">

                                      	<div class="form-horizontal">
                                      		<div class="form-group">
 												<div class="col-md-3">

												</div>
												<div class="col-md-6">
                                         	 		<input type="text" class="form-control appnameStore" placeholder="Chatbot Name"  ng-model="chatbot.name">
                                         	 		<span class="chatbotnameError" style="display: none;">Please enter a valid chatbot name !</span>

                                          		</div>


											</div>

											<div class="form-group">
												<div class="col-md-3">

												</div>
												<div class="col-md-6">
													<input type="checkbox" ng-model="chatbot.facebook" /> Facebook
                                          		</div>

											</div>
											<div class="form-group">
												<div class="col-md-3">

												</div>
												<div class="col-md-6">
													<input type="checkbox" ng-model="chatbot.skype" /> Skype
                                          		</div>

											</div>
											<div class="form-group">
												<div class="col-md-3">

												</div>
												<div class="col-md-6">
													<input type="checkbox" ng-model="chatbot.slack" />
													Slack
                                          		</div>

											</div>
											<div class="form-group">
												<div class="col-md-3">

												</div>
												<div class="col-md-6">
													<span class="platformError" style="display: none;">Please choose at least single platform !</span>
                                          		</div>

											</div>
                                      	</div>

									</div>
								</div>
                            </div>
                            <!-- end row -->
                        </div>
					</div>
					<!-- end wizard step-1 -->

					<!-- begin wizard step-2 -->
					<div>
						<fieldset>
							<legend class="pull-left width-full" style="font-size:12px;font-weight:bold;">Steps to Integrate with chatbot.</legend>
							<!--BEGIN ROW -->
							<div class="row" style="padding-top:40px">
		            			<div class="col-md-12">
										<div class="panel-group" id="accordion">
										<div class="panel panel-inverse overflow-hidden" id="stepAndriod">
											<div class="panel-heading">
												<h3 class="panel-title">
													<a href="#collapseOne" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle accordion-toggle-styled" aria-expanded="true">
						    							<i class="fa fa-plus-circle pull-right"></i>
														STEPS FOR CHATBOT
													</a>
												</h3>
											</div>
											<div style="" aria-expanded="true" id="collapseOne" class="panel-collapse collapse in">
												<div class="panel-body">
								                    <div readonly class="form-control"  style="height:370px" >
								                    	&lt;!-- chatbot Services --&gt;  <br>
								                    	<span ng-repeat="(key, value) in platforms">
								                    	&lt;{{value | uppercase}}<br>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{URL}}/bots/1.0?platform={{value}}&amp;apikey={{api_key}}&amp;appid={{app_id}}&amp;appkey={{app_key}}"&gt; <br>
								                    	<br>
								                    	<br>
								                    	</span>
								                    	&lt;!-- End of required Chatbot --&gt;
								                    </div>
												</div>
											</div>
										</div>
				    				</div>
								</div>
							</div>
	                    	<!-- END ROW -->

	                        <!-- <div class="panel-body">
	           					<form class="form-horizontal">
	                           		<div class="form-group">
	                    			<label  class="col-md-3 control-label">Developer Email ID</label>
	                        			<div class="col-md-6">
	                            		<input type="text" ng-model="chatbot.email"  placeholder="Developer Email ID" class="form-control">
	                        			</div>
	                        			<span id="emailissue"  ></span>

	               					</div>
	               				</form>
	               			</div> -->
                            <!-- end row -->
						</fieldset>
					</div>
					<!-- end wizard step-2 -->

						<!-- begin wizard step-3 -->
						<div>
						    <div class="jumbotron m-b-0 text-center">


                                <h1>App Created!</h1>
                                <img src="" id="app_Image" style="display:none;height: 60px;width: 60px;margin-bottom: 10px;"/>
                                <h3><span id="app_name"></span></h3>
                               <!--  <h3><p class="text-success">Developer Email ID - <span id="dev_emailid"></span></p><h3>-->
                                <p><a style="border-radius: 15px;" class="btn btn-white" role="button" href="dashboard?action=createchatbot#/createchatbot/dashboard/{{app_id}}">Go to my Dashboard</a></p>
                                 <br/><span id="emailissue2" ></span>
                            </div>
						</div>
						<!-- end wizard step-3 -->
					</div>



				</form>
            </div>
        </div>

	<!-- end row -->
</div>
