<? global $vis_language;?>
<section id="breadcrumb" class="row m-b m-l-none m-r-none">
   <div class="col-sm-6">
      <h3 class="m-b-xs text-black"><?  echo $vis_language['TXTUPDATETWILIO']; ?></h3>
      <ul class="breadcrumb bg-empty no-border m-b-xxs no-padder">
		<li><a class="link" href="#/home/quick_view/<? echo $vis_language['TXTHOME']; ?>"><? echo $vis_language['TXTHOME']; ?></a></li>
		<li><a class="link" href="#/setting/setting_menu/<? echo $vis_language['TXTSETTINGS'];?>" onclick="$('#vis_workpanel_div').visExecution('load_module','<? echo $vis_language['TXTSETTINGS'];?>',{'vis_module':'setting','vis_operation':'setting_menu'});"><? echo $vis_language['TXTSETTINGS']; ?></a></li>
		<li><a class="link" href="#/setting/twilio/<? echo $vis_language['TXTTWILIO'];?>" onclick="$('#vis_workpanel_div').visExecution('load_module','<? echo $vis_language['TXTTWILIO'];?>',{'vis_module':'setting','vis_operation':'twilio'});"><? echo $vis_language['TXTTWILIO']; ?></a></li>
		<li><a class="link" href="#/setting/twilio_number/<? echo $vis_language['TXTTWILIONUMBER'];?>" onclick="$('#vis_workpanel_div').visExecution('load_module','<? echo $vis_language['TXTTWILIONUMBER'];?>',{'vis_module':'setting','vis_operation':'twilio_number'});"><? echo $vis_language['TXTTWILIONUMBER']; ?></a></li>
		<li class="active"><? echo $vis_language['TXTUPDATETWILIO']; ?></li>
	 </ul>
   </div>
</section>
<section class="padder">
   <section class="panel panel-default">
      <header class="panel-heading sub_header"><? echo $vis_language['TXTUPDATETWILIO']; ?></header>
      <form class="form-horizontal" data-validate="parsley" id="vis_new_twilio_num" name="vis_new_twilio_num" method="post" >
	  <input type="hidden" name="vis_twilio_id" value="<? echo $twilio_details['twilio_id']; ?>" />
         <div class="panel-body">
            <div class="col-md-12">
               <div class="wrapper">
				   <div class="form-group">
                     <label class="col-sm-2 control-label p-d-sm"><? echo $vis_language['TXTAPP']; ?></label>
                     <div class="col-sm-10">
                        <select name="vis_integration_id" id="vis_integration_id" class="form-control input-sm selectpicker"<? if(count($integration_details)>10) echo ' data-live-search="true"';?>  onchange="javascript:vis_change_app()">
							<option value="0"> <? echo $vis_language['TXTSELECT']; ?> </option>
							<? if($integration_details!=-1)
								for($i=0;$i<count($integration_details); $i++){
									$selected = ($integration_details[$i]['integration_id']==$twilio_details['integration_id'])?'selected="selected"':'';
									echo '<option value="'.$integration_details[$i]['integration_id'].'" '.$selected.'>'.$integration_details[$i]['db_name'].'</option>';
								}
								?>
						</select>
                     </div>

                  </div>
                  <div class="form-group">
					<label class="col-sm-2 control-label p-d-sm"><? echo $vis_language['TXTTITLE']; ?></label>
                    <div class="col-sm-10">
                        <input class="form-control input-sm" type="text" name="vis_title" id="vis_title" value="<?= htmlentities($twilio_details['title'], ENT_COMPAT, 'UTF-8');?>">
                     </div>
				  </div>
				  <div class="form-group">
                    <label class="col-sm-2 control-label p-d-sm"><? echo $vis_language['TXTTWILIONUMBER']; ?></label>
                    <div class="col-sm-10">
                       <input class="form-control input-sm" type="text"  name="vis_twilio_number" id="vis_twilio_number" value="<?=$twilio_details['twilio_number']?>"  placeholder="<? echo $vis_language['TXTPHONEEG']; ?>">
                    </div>
				  </div>
                   <div class="form-group">
                     <label class="col-sm-2 control-label p-d-sm"><? echo $vis_language['TXTWELCOMEMSG']; ?></label>
                     <div class="col-sm-10">
                        <input class="form-control input-sm" type="text" name="vis_welcome_msg" id="vis_welcome_msg" value="<?=$twilio_details['message']?>">
                     </div>
                  </div>
				  <div class="form-group">
                     <label class="col-sm-2 control-label p-d-sm"><? echo $vis_language['TXTALLOWOUTBOUND']; ?></label>
                     <div class="col-sm-8">
                        <label class="checkbox-inline i-checks">
							<input id="vis_inbound_outbound" type="checkbox" <?php echo ($twilio_details['is_outbound']==1)?'checked="checked"':'';?>  name="vis_inbound_outbound" value="0"><i></i>‌
						</label>
                     </div>
					 <div class="col-sm-2">
						  <label>
						  <button type="button" class="btn btn-primary btn-xs"  onclick="javascript:vis_add_new()"><? echo $vis_language['TXTADDNEW']; ?></button>
						  </label>
					   </div>
                  </div>

                  <div id="change_twilio_app">
					<?php
					for($k=0;$k<count($key_details);$k++){?>
						<div id="call_details_div<?=$k?>">
							<div class="line b-b line-lg pull-in"></div><br/>
							<div class="form-group">
								<label for="vis_firstname" class="col-sm-2 control-label"><? echo $vis_language['TXTKEY']; ?></label>
								<div class="col-sm-2">
									<select name="vis_key_press<?=$k?>" id="vis_key_press<?=$k?>" class="form-control input-sm selectpicker">
										<?
										for($i=0;$i<10;$i++){
											$selected = ($key_details[$k]['key_press']==$i)?'selected="selected"':'';
											echo '<option value="'.$i.'" '.$selected.'>Key press '.$i.'</option>';
										}  ?>
									</select>
								</div>
								<label for="vis_firstname" class="col-sm-1 control-label"><? echo $vis_language['TXTKEYMSG']; ?></label>
								<div class="col-sm-3">
									<input class="form-control input-sm" type="text"  name="vis_key_messages<?=$k?>" id="vis_key_messages<?=$k?>" value="<?=$key_details[$k]['key_messages']?>" placeholder="<?=$vis_language['TXTKEYMSGPLACEHOLDER']; ?>">
								</div>
								<label for="vis_firstname" class="col-sm-1 control-label"><? echo $vis_language['TXTDEPARTMENT']; ?></label>
								<div class="col-sm-2">
									<select name="vis_department<?=$k?>" id="vis_department<?=$k?>" class="form-control input-sm selectpicker"<? if(count($departments)>10) echo ' data-live-search="true"';?>  onchange="vis_change_department(<?=$k?>)">
										<option value="0"> <? echo $vis_language['TXTSELECT']; ?> </option>
										<? if($departments!=-1)
											for($i=0;$i<count($departments); $i++){
												$selected = ($key_details[$k]['department_id']==$departments[$i]['department_id'])?'selected="selected"':'';
												echo '<option value="'.$departments[$i]['domain_id'].':'.$departments[$i]['department_id'].'" '.$selected.'>'.$departments[$i]['domain_name'].' :: '.$departments[$i]['department_name'].'</option>';
											} ?>
									</select>
								</div>
								<label style="cursor:pointer" onclick="javascript:close_call_details(<?=$k?>)" class="col-sm-1"><i class="vh vh-cross  m-t-sm"></i></label>
							</div>
							<div id="vis_dept_list_section<?=$k?>" >
								<?php
								$filter='is_enabled=1';
								$staff=$staff_object->get_staff($filter, VIS_STAFF_ID, VIS_LOCATION_AREA, $key_details[$k]['department_id']);
								$forward_to = $key_details[$k]['forward_to'];
								if($staff!=-1){?>
								<div class="form-group">
									<label for="vis_firstname" class="col-sm-2 control-label"><? echo $vis_language['TXTCALLFORWARDING']; ?></label>
									<div class="col-sm-10">
										 <div class="radio i-checks m-r-lg pull-left"><label>
										  <input type="radio" name="vis_forward_type<?=$k?>" <? echo ($forward_to==0)?'checked="checked"':''?> id="vis_forward_phone<?=$k?>" value="0"><i></i>
										  <?= $vis_language['TXTTOPHONE']; ?></label>  </div>
										  <div class="radio i-checks m-r-lg pull-left"><label>
										  <input type="radio"  name="vis_forward_type<?=$k?>" id="vis_forward_browser<?=$k?>" value="1" <? echo ($forward_to==1)?'checked="checked"':''?>><i></i>
										   <?= $vis_language['TXTTOSTAFFBROWSER']; ?></label>  </div>
									</div>
								</div>

								<div class="form-group" id="forward_to_phone<?=$k?>" style="display:<? echo ($forward_to==0)?'block':'none'?>">
									<label for="vis_firstname" class="col-sm-2 control-label"><? echo $vis_language['TXTFORWARDINGNUM']; ?></label>
									<div class="col-sm-9">
										<input class="form-control input-sm" type="text" name="vis_forward_number<?=$k?>" id="vis_forward_number<?=$k?>" value="<? echo ($forward_to==0)?$key_details[$k]['staff']:''?>"  placeholder="<?=$vis_language['MSGFORWARNUMBER']; ?>">
									</div>
								</div>

								<div class="form-group"  id="forward_to_browser<?=$k?>" style="display:<? echo ($forward_to==1)?'block':'none'?>" >
									<label class="col-sm-2 control-label"></label>
									<div class="col-sm-9">
										<div class="dept_access_list">

										<?php $staff_array = explode(',', $key_details[$k]['staff']);

											for($i=0;$i<count($staff);$i++) {
												$checked ='';
												if(in_array($staff[$i]['staff_id'], $staff_array))$checked = 'checked="checked"';
												if($forward_to==0)$checked = 'checked="checked"';
											?>
											<label class="checkbox-inline i-checks">
												<input type="checkbox"  value="<? echo $staff[$i]['staff_id']; ?>" id="vis_staff_<?=$i?>_<?=$k?>" name="vis_staff<?=$k?>_<?=$i?>" <?=$checked?> /> <i></i><? echo $staff[$i]['first_name'].' '.$staff[$i]['last_name'];?>
											</label><br/>

										<? }?>
										</div>
										<input type="hidden" name="vis_total_staff<?=$k?>" id="vis_total_staff<?=$k?>" value="<?=count($staff)?>">
									</div>
								</div>
								<script type="text/javascript">
								  $(".selectpicker").selectpicker();

									$("#vis_forward_phone<?=$k?>").click( function(){
										$('#forward_to_phone<?=$k?>').show();
										$('#forward_to_browser<?=$k?>').hide();
									});
									$("#vis_forward_browser<?=$k?>").click( function(){
										$('#forward_to_phone<?=$k?>').hide();
										$('#forward_to_browser<?=$k?>').show();
									});
								 </script>
								<?php
								}
								?>
							</div>
						</div>
					<?php
					}
					?>
				  </div>
				<input type="hidden" name="total_call_details" id="total_call_details" value="<?=count($key_details)?>">
               </div>
            </div>
            </div>
      </form>
        <div class="padder">
		    <div class="line b-b line-lg pull-in"></div><br/>
         <div class="col-sm col-sm-offset-2">
            <button type="button" class="btn btn-primary" onclick="$('#vis_workpanel_div').visExecution('submit_form',{'vis_module':'setting', 'vis_operation':'update_twilio_number', 'vis_form':'vis_new_twilio_num' })"><? echo $vis_language['TXTUPDATE']; ?></button>
         </div><br/>
      </div>
   </section>
</section>
<script type="text/javascript">
  $(".selectpicker").selectpicker();
	function vis_change_app(){
		$("#change_twilio_app").html('');
		$("#total_call_details").val(0);
	}
    function vis_add_new(){
		var integration_id = $("#vis_integration_id").val();
		var total_call_details = $("#total_call_details").val();
		if(integration_id==0){
			$('#change_twilio_app').html('');
		}else{
			$("#total_call_details").val(parseInt(total_call_details)+1);
			var data = {'integration_id':integration_id,'type_id':total_call_details};
			$.ajax({
				url: 'index.php?vis_module=setting&vis_operation=get_twilio_call_department',
				data: data,
				type: "POST",
				success: function(data) {
					$("#change_twilio_app").append(data);
				},
				error: function(xhr, ajaxOptions, thrownError) {$("#vis_global_msg_div").visInterface("load_global_message", "Error: "+xhr.status+" - "+thrownError);}
			});
		}
	}
	function vis_change_department(id){
	    var department_id = $("#vis_department"+id).val();
		if(department_id==0){
			$("#vis_dept_list_section"+id).html('');
		}else{
			var result = department_id.split(':');
			var data = {'department_id':result[1],'type_id':id};
			$.ajax({
				url: 'index.php?vis_module=setting&vis_operation=get_department_staff',
				data: data,
				type: "POST",
				success: function(data) {
					$("#vis_dept_list_section"+id).html(data);
				},
				error: function(xhr, ajaxOptions, thrownError) {$("#vis_global_msg_div").visInterface("load_global_message", "Error: "+xhr.status+" - "+thrownError);}
			});
		}
	}
	function close_call_details(id){
		$("#call_details_div"+id).html('');
		$("#call_details_div"+id).hide();
	}

</script>
