<? 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['TXTSENDMESSAGE']; ?></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_msg_form" class="form-horizontal" name="vis_twilio_msg_form" method="post">
						<div class="row ">             
							<div class="col-sm-12"> 
								<div class="form-group">
									<label for="vis_firstname" class="col-sm-3 control-label"><? echo $vis_language['TXTTO']; ?></label>
									<div class="col-sm-9">
										<input type="text" class="form-control input-sm" data-resize="no" name="vis_msg_to" id="vis_msg_to" placeholder="<? echo $vis_language['TXTSEARCHCLIENT']; ?>" style="width:100%">
										<input type="hidden" name="vis_to_num" id="vis_to_num">
									</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">
									<label for="vis_lastname" class="col-sm-3 control-label"><? echo $vis_language['TXTMESSAGE']; ?></label>
									<div class="col-sm-9">
										<textarea class="form-control input-sm" name="vis_message" id="vis_message"></textarea>
									</div>
								</div>   
							</div>
						</div>
						</form>
					</section>
				</div>
            </div>
        </div>
		<div class="modal-footer">
            <a class="btn btn-default" data-dismiss="modal"><? echo $vis_language['TXTCANCEL']; ?></a>
		    <button type="button" class="btn btn-primary m-l" onclick="$(this).visExecution('submit_form', {'vis_module': 'voip', 'vis_operation': 'send_twilio_msg', 'vis_form': 'vis_twilio_msg_form'})"><? echo $vis_language['TXTSENDMESSAGE']; ?></button>
		</div>
    </div>
</div>

<script type="text/javascript">
  $(".selectpicker").selectpicker();
	$(document).ready(function() {
		$("#vis_msg_to").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_to_num").val(item.contact_number);
					return "<li><p>" + item.contact_number + "</p></li>";
				}
			}
		);
		$("#token-input-vis_msg_to").parent().css('width','100%');
	});
	$("#token-input-vis_msg_to").on('change keyup paste', function() { $("#vis_to_num").val(this.value);});
</script>