<?php session_start();
$pageSequence = $_SESSION['sequence'];
$toDiv = "contentZone" . $pageSequence;
$resultZoneDiv = "resultZone" . $pageSequence;
$formName = "form". $pageSequence;
$_SESSION['sequence']++;
//echo  dirname(__FILE__);  
//echo $_SERVER['DOCUMENT_ROOT'] . "   ".dirname(__FILE__)."  ".str_replace($_SERVER['DOCUMENT_ROOT'],"",dirname(__FILE__)) . " SELF :" .$_SERVER['PHP_SELF']  ;

$currentBaseDir = dirname($_SERVER['PHP_SELF']);
include($_SESSION['basedir']."core.php");

$res = $dba->getTicketComments($_REQUEST['item'],$_SESSION['ownerId'],$_SESSION['right']) ;
//$callreasonres = $dba->getSCCCallReasonDetails();

?>
<div id="chatzone">

<style type="text/css">
.container{max-width:850px; 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%;
}
.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%;
}
.outgoing_msg_img {
  display:inline-block;
  float :right;
  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: 16px;
  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: 90%;
}

 .sent_msg p {
  background: #05728f none repeat scroll 0 0;
  border-radius: 3px;
  font-size: 16px;
  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;position: relative;}
.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: 516px;
  overflow-y: auto;
}

    .btn-file {
        position: relative;
        overflow: hidden;
    }
    .btn-file input[type=file] {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 100%;
        min-height: 100%;
        font-size: 100px;
        text-align: right;
        filter: alpha(opacity=0);
        opacity: 0;
        outline: none;
        background: white;
        cursor: inherit;
        display: block;
    }
</style>

<div class="container">
<div class="messaging">
      <div class="inbox_msg">
        <div class="mesgs">
          <div class="msg_history">
          
             <?php
				
				$cmpt = 1;
				for ($i = 0; $i < count($res); $i++) {
					
					if($res[$i]['comment_type_n'] ==  0 ) {
						// Customer Request
				
		     ?>
             <div class="incoming_msg">
              <div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
              <div class="received_msg">
                <div class="received_withd_msg">
                  <p><?php echo $res[$i]['comment_v']; ?></p>
                  <span class="time_date"> <em> <?php echo $res[$i]['customer_name_v']; ?> </em>   |    <?php echo $res[$i]['eventDate']; ?></span></div>
              </div>
            </div>
          
          <?php  }  else {  ?>
            
            <div class="outgoing_msg">
             <div class="outgoing_msg_img"> <img src="images/user-profile.png"> </div>
              <div class="sent_msg">
                <p><?php echo $res[$i]['comment_v']; ?></p>
                <span class="time_date"> <em> <?php echo $res[$i]['user_name_v']; ?> </em>     |    <?php echo $res[$i]['eventDate']; ?></span> </div>
            </div>
            
            <?php } 
			
			
				} ?>
           
            
            
          </div>
   <form action="<?php echo $currentBaseDir; ?>/exec_new_comment.php" method="post" enctype="multipart/form-data"  id="<?php echo $formName; ?>"  toDiv="<?php echo $toDiv; ?>" returnPage="<?php echo $_SERVER['PHP_SELF']; ?>?item=<?php echo $_REQUEST['item']; ?>" onsubmit="return false;">
    <div class="type_msg">
            <div class="input_msg_write">
             
                 
    <select id="commentType" name="commentType" class="form-control">
      <option value="-1"  selected="selected"> -- Type de commentaire --</option>
      <option value="0">Client</option>
      <option value="1">Agent</option>
    </select>
    <label class="btn btn-default btn-file">
        <i class="cus-attach" aria-hidden="true"></i> <input type="file" name="attachFile" id="attachFile" style="display: none;">
    </label>
    <input type="hidden" name="csrId" value="<?php echo $_REQUEST['item'] ; ?>" />
    <input type="hidden" name="customerName" value="<?php echo $res[0]['customer_name_v'] ; ?>" />
     <input type="text" name="csrComment" class="write_msg" placeholder="Tapez votre commentaire..." />
              <button class="msg_send_btn" type="submit"><i class="fa fa-paper-plane-o" aria-hidden="true"></i></button>
            </div>
          </div>
   </form> 
        </div>
      </div>
      
      
      
    </div></div>
  </div>              


<script type="text/javascript">

$('#closeTicket').on('click', function(e){
	document.getElementById('actionType').value = 3;
   $(this).parents('form').submit() ;
});

$('form').on("submit", function(event) {
	
		var toDiv =  $( "#<?php echo $formName; ?>" ).attr('toDiv');
    var rpage =  $( "#<?php echo $formName; ?>" ).attr('returnPage') ;
	
	//alert (  toDiv + " ----------- " + rpage );
	
	 $.post($(this).attr("action"), $(this).serialize(), function(data) {
 
		   var obj = jQuery.parseJSON( data);
		   
		   if(obj.errorCode == 0 ) {
			   
			   //alert( obj.errorMessage );
			 
			 //    $.alert( obj.errorMessage );
			 
			 $.alert({
				 icon: 'glyphicon glyphicon-ok',
				 title: 'RESULTAT',
                 content: obj.errorMessage,
                 type: 'green',
                 typeAnimated: true,
				 buttons: {
                        ok: function () {
                           //  $("#chatzone").load(rpage);
						   $('.modal-body').empty();
						   $('.modal-body').load(rpage, function(){
						     
							 $('.modal-body').fadeIn(1000);
						   
						   });
								
                          }
				 }

				});
			    //  alert(data);
				//$("#<?php echo $toDiv; ?>").html();
          // $("#<?php echo $toDiv; ?>").load("<?php echo $_SERVER['PHP_SELF']; ?>");
		  
		
            //$('#loader').hide();
			   
		   }
		   else {
			   
			   $.alert({
				     icon: 'glyphicon glyphicon-warning-sign',
					 title: 'RESULTAT',
                     content: obj.errorMessage,
                     type: 'red',
                     typeAnimated: true
				});
			   
			  // $.alert( obj.errorMessage );
		   }
         
        });
       // return false; // prevent normal submit
   
	
  event.preventDefault();
	
	/*
        var postData = $(this).serializeArray();
        var formURL = $(this).attr("action");
		
        $.ajax({
            url: formURL,
            type: "POST",
            data: postData,
            success: function(data, textStatus, jqXHR) {
              
			  alert("Processing the form...");
			
            },
            error: function(jqXHR, status, error) {
                console.log(status + ": " + error);
            }
        });
        event.preventDefault(); */
    });

</script>
 
<link rel="stylesheet" href="css/jquery-confirm.min.css">
<script src="js/jquery-confirm.min.js"></script>