<html>
  <head>
    <link href="{{ asset('bootstrap.min.css') }}" rel="stylesheet" id="bootstrap-css">
    <script src="{{ asset('bootstrap.min.js') }}"></script>
    <script src="{{ asset('jquery-1.11.1.min.js') }}"></script>
    <!------ Include the above in your HEAD tag ---------->
    
    <style type="text/css">
      .container{max-width:1170px; margin:auto;}
      img{ max-width:100%;}
      .inbox_people {
        background: #f8f8f8 none repeat scroll 0 0;
        float: left;
        overflow: hidden;
        width: 40%; border-right:1px solid #c4c4c4;
      }
      .inbox_msg {
        border: 1px solid #c4c4c4;
        clear: both;
        /*overflow: hidden;*/
      }
      .top_spac{ margin: 20px 0 0;}


      .recent_heading {float: left; width:40%;}
      .srch_bar {
        display: inline-block;
        text-align: right;
        width: 60%; padding:
      }
      .headind_srch{ padding:10px 29px 10px 20px; overflow:hidden; border-bottom:1px solid #c4c4c4;}

      .recent_heading h4 {
        color: #05728f;
        font-size: 21px;
        margin: auto;
      }
      .srch_bar input{ border:1px solid #cdcdcd; border-width:0 0 1px 0; width:80%; padding:2px 0 4px 6px; background:none;}
      .srch_bar .input-group-addon button {
        background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
        border: medium none;
        padding: 0;
        color: #707070;
        font-size: 18px;
      }
      .srch_bar .input-group-addon { margin: 0 0 0 -27px;}

      .chat_ib h5{ font-size:15px; color:#464646; margin:0 0 8px 0;}
      .chat_ib h5 span{ font-size:13px; float:right;}
      .chat_ib p{ font-size:14px; color:#989898; margin:auto}
      .chat_img {
        float: left;
        width: 11%;
      }
      .chat_ib {
        float: left;
        padding: 0 0 0 15px;
        width: 88%;
      }

      .chat_people{ overflow:hidden; clear:both;}
      .chat_list {
        border-bottom: 1px solid #c4c4c4;
        margin: 0;
        padding: 18px 16px 10px;
      }
      .inbox_chat { height: 550px; overflow-y: scroll;}

      .active_chat{ background:#ebebeb;}

      .incoming_msg_img {
        display: inline-block;
        width: 6%;
      }
      .received_msg {
        display: inline-block;
        padding: 0 0 0 10px;
        vertical-align: top;
        width: 92%;
       }
       .received_withd_msg p {
        background: #ebebeb none repeat scroll 0 0;
        border-radius: 3px;
        color: #646464;
        font-size: 14px;
        margin: 0;
        padding: 5px 10px 5px 12px;
        width: 100%;
      }
      .time_date {
        color: #747474;
        display: block;
        font-size: 12px;
        margin: 8px 0 0;
      }
      .received_withd_msg { width: 57%;}
      .mesgs {
        /*float: left;*/
        padding: 30px 15px 0 25px;
        width: 100%;
      }

       .sent_msg p {
        background: #05728f none repeat scroll 0 0;
        border-radius: 3px;
        font-size: 14px;
        margin: 0; color:#fff;
        padding: 5px 10px 5px 12px;
        width:100%;
      }
      .outgoing_msg{ overflow:hidden; margin:26px 0 26px;}
      .sent_msg {
        float: right;
        width: 46%;
      }
      .input_msg_write input {
        background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
        border: medium none;
        color: #4c4c4c;
        font-size: 15px;
        min-height: 48px;
        width: 100%;
      }

      .type_msg {border-top: 1px solid #c4c4c4;height: 70px;padding-top: 10px;}
      .msg_send_btn {
        background: #05728f none repeat scroll 0 0;
        border: medium none;
        border-radius: 50%;
        color: #fff;
        cursor: pointer;
        font-size: 17px;
        height: 33px;
        position: absolute;
        right: 0;
        top: 11px;
        width: 33px;
      }
      .messaging { padding: 0 0 50px 0;}
      .msg_history {
        /*height: 506px;*/
        /*overflow-y: auto;*/
      }

      .bot-opt{
      	cursor: pointer;
      	margin-right: 5px;
      	border-radius: 5px;
      	background: #fff;
      	color: #000;
      	border: solid 1px #007bff;
      }
      .bot-opt:hover{
      	background: #007bff52;
      }
    </style>

    <link href="{{ asset('font-awesome.css') }}" type="text/css" rel="stylesheet">
    <title> Dynamic Forms </title>
  </head>
  <body>
    <div class="container">
      <h3 class=" text-center"> {{ chatbot.botName }}   </h3>
      <div class="messaging">
            <div class="inbox_msg">
             <div class="mesgs">
                <div class="msg_history" id="conversation">
                  <div id="chatbox">
                  	<div class="incoming_msg">
                  		<div class="incoming_msg_img"> 
                  			<img src="{{ asset('template/img/a2.jpg') }}" alt="sunil"> 
                  		</div>
                  		<div class="received_msg">
                  			<div class="received_withd_msg">
                  				<p>
                  					{{ starterMsg }} 
  	                				<br/>
  	                				<br/>
  	                				<button class="btn btn-sm btn-primary" onclick="loadQuestion({{ firstQuestion.order }})">
  	                					CLIQUEZ ICI POUR COMMENCER 
  	                				</button>
                  				</p>
                  				<br/>
                  			</div>
                  		</div>
                    </div>

                	</div>
                  <br/>
                  <div class="incoming_msg" style="display: none;" id="good-bye-div">
                      <div class="received_msg">
                        <div class="received_withd_msg">
                          <p>
                            {{ lastMsg }} 
                            <br/>
                          </p>
                          <br/>
                        </div>
                      </div>
                    </div>
                </div>
                <div class="type_msg">
                	<div style="clear: both; display: block;">
						<div class="input_msg_write" id="answer-box">

						</div>
                	</div>
                </div>
              </div>
            </div>
            
            
            <p class="text-center top_spac"> Design by <a target="_blank" href="#">Sunil Rajput</a></p>
            
      </div>
    </div>

    <script type="text/javascript">
			var botJsonUrl = "{{ path('chatbot_json', {'botlink': chatbot.botLink}) }}";
			const req = new XMLHttpRequest();
			req.open('GET', botJsonUrl, false);
			req.send(null);
			var questions = JSON.parse(req.responseText);
			console.log(questions);
			var chatSummary = Array();

			// var i = 0;
			var answerBox = document.getElementById('answer-box');
			var chatBox = document.getElementById('chatbox');

			function loadQuestion(i){
				var q = questions[i];
				console.log(i);
				if(q !== undefined){
					chatbox.innerHTML += '<div class="incoming_msg"><div class="received_msg"><div class="received_withd_msg"><p>'+ q['question'] +'</p> </div></div></div>';
					var answers = q['answers'];
					if( q['isInput'] === true ){
						var input = document.createElement('input');
						input.setAttribute('id', 'input');
						input.setAttribute('placeholder', 'Votre reponse ici');
						input.setAttribute('class', 'write_msg');
						input.setAttribute('name', 'response');
						input.setAttribute('onkeypress', 'return myKeyPress(event, '+ i +')');
						answerBox.appendChild(input);
					}
					else{
						if(answers == null || answers === undefined){
							console.log('bas asnwers');
						}
						else{
							for (var j = 0;  j < answers.length;  j++) {
								var answer = answers[j];
								var choice = document.createElement('span');
								choice.setAttribute('id', 'opt-'+i+ '-'+j);
								choice.setAttribute('class', 'bot-opt alert alert-info');
								choice.setAttribute('onclick', 'chooseOption('+ i +', '+ j +')');
								choice.innerHTML = answer['option'];
								answerBox.appendChild(choice);			
							}
						}
					}
				}
				else{
					console.log(JSON.parse(chatSummary));
				}
			}


			function chooseOption(q,opt){
				var quest = questions[q];
				var answers = quest['answers'];
				var choice = answers[opt];
				chatSummary.push([quest['idQuest'], choice['id']]);
				// var txt = (document.getElementById('opt-'+q+ '-'+opt)).innerHTML;
				chatbox.innerHTML += '<div class="outgoing_msg"><div class="sent_msg"><p> '+ choice['option'] +' </p></div></div>';

				// var msg = document.createElement('label');
				// msg.innerHTML = choice['option'];
				// msg.style = "display:block;float:left;"
				// chatbox.appendChild(msg);
				answerBox.innerHTML = "";
				q = choice['next'];

        var continueChat = false;
        if(questions[q] !== undefined){
            continueChat = true;
        }
        console.log("next from inout " + q);
        if(continueChat){
          loadQuestion(q);          
        }
        else{
          sayGoodBye();
        }




				scrollBody();
			}

			function answerToTheBot(q){
				var quest = questions[q];
				var input = document.getElementById('input');
				var answer = input.value;
				chatSummary.push([quest['idQuest'], answer]);
				// var msg = document.createElement('label');
				// msg.innerHTML = answer;
				// msg.style = "display:block;float:left;"
				// chatbox.appendChild(msg);
				chatbox.innerHTML += '<div class="outgoing_msg"><div class="sent_msg"><p> '+ answer +' </p>  </div></div>';
				answerBox.innerHTML = "";
        q++;
        var continueChat = false;
        for (var i = q; i < 2000; i++) {
            if(questions[i] !== undefined){
                continueChat = true;
                break;
            };
        }
				q = i;
        console.log("next from inout " + q);
        if(continueChat){
				  loadQuestion(q);          
        }
        else{
          sayGoodBye();
        }
        scrollBody();
			}

			function myKeyPress(e, q){
				var keyNum;
				keyNum = e.keyCode;
				if(keyNum === 13){
					console.log(keyNum);
					answerToTheBot(q);
				}
			}

      function scrollChat(){
        var objDiv = document.getElementById("conversation");
        objDiv.scrollTop = objDiv.scrollHeight;
      }

      function scrollBody(){
        window.scrollTo(0,document.body.scrollHeight);
      }

      function sayGoodBye(){
        document.getElementById('good-bye-div').style.display = "block";
        sendChatRequest();
      }

      function sendChatRequest() {
        var jsonConversation = JSON.stringify(chatSummary);

        $.ajax({
            type: "POST",
            url: "{{ path('save_botconv') }}",
            data: { 'data': jsonConversation }
        }).done(function (data) {
            console.log(data);
        }).error(function (jqXHR, textStatus, errorThrown) {
            alert(jqXHR.responseText || textStatus);
        });
    }
		
		</script>
  </body>
</html>



