<? global $vis_language;?>
<style> .modal-lg {width: 750px!important;}</style>
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title"><? echo$vis_language['TXTCALL']; ?></h4>
        </div>
        <div class="modal-body" id="parent_list">
            <div class="row">
                <div class="col-sm-12">
					<section class="wrapper" id="test">
						<form id="vis_twilio_call_form" class="form-horizontal" name="vis_twilio_call_form" method="post">
						<div class="row ">             
							<div class="col-sm-12"> 
								<div class="form-group">
									<label class="col-sm-3 control-label p-d-sm"><? echo $vis_language['TXTTO']; ?></label>
									<div class="col-sm-9">
										<input class="form-control input-sm" type="text" name="vis_number" id="vis_number"  data-resize="no" placeholder="<? echo $vis_language['TXTSEARCHCLIENT']; ?>" style="width:100%">
										<input type="hidden" name="vis_call_number" id="vis_call_number" value="<? echo $operation['vis_to_number']; ?>">
									</div>
								</div>
								<div  class="form-group">
									<label  class="col-sm-3 control-label"><? echo $vis_language['TXTFROM']; ?></label>
									<div class="col-sm-9">
										<select name="vis_twilio_number" id="vis_twilio_number" class="form-control input-sm selectpicker"<? if(count($twilio_number)>10) echo ' data-live-search="true"';?>>
											<option value="0"> <? echo $vis_language['TXTSELECT']; ?> </option>
											<? if($twilio_number!=-1) for($i=0;$i<count($twilio_number); $i++)
												echo '<option value="'.$twilio_number[$i]['twilio_number'].'">'.$twilio_number[$i]['twilio_number'].' : '.$twilio_number[$i]['title'].'</option>' ?>
										</select>
									</div>
								</div>
								
					
								<div class="form-group">
									<span class="col-sm-3"></span>
									<div class="col-sm-3">
										<div id="btn_calling">
											<button type="button" class="btn btn-primary btn-block" onclick="vis_twilio_calling();"><? echo $vis_language['TXTCALL']; ?></button>
										</div>
										<div id="btn_hangup">
											<button type="button" class="btn vh-danger-bg btn-block" onclick="vis_twilio_hangup();"><? echo $vis_language['TXTHANGUP']; ?></button>
											<input type="hidden" id="vis_call_id" name="vis_call_id">
										</div>
									</div>
								</div>
								<div class="form-group ">
									<div class="col-sm-12 calling_status"></div>
								</div>
							</div>
						</div>
						</form>
					</section>
				</div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
  $(".selectpicker").selectpicker();
	$(document).ready(function() {
		$("#vis_number").tokenInput(
			"index.php?vis_module=client&vis_operation=list_clients&vis_domain=<? echo $operation['domain_id']; ?>",
			{
				theme: "facebook",
				searchDelay: 300,
				minChars: 3,
				queryParam: "vis_data",
				propertyToSearch: "email",
				tokenValue: "contact_number",
				tokenLimit: 1,
				preventDuplicates: true,
				resultsFormatter: function(item) {
					return "<li>" + "<div style='display: inline-block; padding-left: 10px;'><div class='full_name'>" + item.full_name + " < " + item.contact_number + " ></div></div></li>";
				},
				tokenFormatter: function(item) {
					$("#vis_call_number").val(item.contact_number);
					return "<li><p>" + item.contact_number + "</p></li>";
				}
			}
		);
		
		$("div.token-input-dropdown-facebook").css('width', $(".token-input-list-facebook").width() + 2 + 'px');
		<?php if(isset($operation['vis_to_number'])){?>
			$("#vis_number").tokenInput("add", {contact_number: "<?=$operation['vis_to_number']; ?>"});
		<?php }?>
		$("#token-input-vis_number").parent().css('width','100%');
		
	});
   
   
	$("#token-input-vis_number").on('change keyup paste', function() { $("#vis_call_number").val(this.value);});

    $("#btn_hangup").hide();
	function vis_twilio_calling(){
		var data = {'vis_calling':'1', 'vis_action': $("#vis_twilio_call_form input, #vis_twilio_call_form select").serialize() };   
		$(".calling_status").html("<div class='alert alert-success'><?=$vis_language['MSGCONNECTING']?>....</div>");
		$.ajax({
			url: 'index.php?vis_module=voip&vis_operation=twilio_make_call',
			data: data,
			type: "POST",
			dataType: "json",
			success: function(data) {
				if(data.status=='400'){
					$(".calling_status").html("<div class='alert alert-danger'>"+data.message+"</div>");
					$("#btn_hangup").hide();
					$("#btn_calling").show();
				}else if(data.status=='300'){
					$("#vis_global_msg_div").visInterface("load_global_message", "<?=$vis_language['MSGINFOMISS']?>");
					$(".calling_status").html('');
				}else{
					$(".calling_status").html("<div class='alert alert-success'><?=$vis_language['MSGCALLCONNECTED']?></div>");
					$("#btn_calling").hide();
					$("#btn_hangup").show();
					$("#vis_call_id").val(data.sid);
				}
			},
			error: function(xhr, ajaxOptions, thrownError) {$("#vis_global_msg_div").visInterface("load_global_message", "Error: "+xhr.status+" - "+thrownError);}
		});
		
	}
	
	function vis_twilio_hangup(){
		var id = $("#vis_call_id").val();
		var data = {'call_id': id };   
		$(".calling_status").html("<div class='alert alert-success'><?=$vis_language['MSGCALLENDED']?></div>");
		$.ajax({
			url: 'index.php?vis_module=voip&vis_operation=twilio_hangup_call',
			data: data,
			type: "POST",
			dataType: "json",
			success: function(data) {
				$("#btn_hangup").hide();
				$("#btn_calling").show();
			},
			error: function(xhr, ajaxOptions, thrownError) {$("#vis_global_msg_div").visInterface("load_global_message", "Error: "+xhr.status+" - "+thrownError);}
		});
		
	}
</script>
