<?php
include "Twilio/autoload.php";
include ('dashboard.php');

use Twilio\Jwt\ClientToken;
// put your Twilio API credentials here
$accountSid = 'AC8bac449b32a1fe6070f736d142cbac1f';
$authToken = '8e489af7dfa15b610298953e184de89d';
// put your TwiML Application Sid here
$appSid = 'APedefbaf42f7a84fd6ee4d1be02f6ca1a';
$capability = new ClientToken($accountSid, $authToken);
$capability->allowClientOutgoing($appSid);
$capability->allowClientIncoming('Jonathan');
 $token = $capability->generateToken();

?>
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Calling..</title>
		<meta charset="utf-8">
		<link rel="icon" type="image/png" href="images/favicon.ico"/>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300">
		<link rel="stylesheet" href="css/font-awesome.min.css">
		<!--link rel="stylesheet" href="css/bootstrap.min.css"-->
		<link rel="stylesheet" href="css/custom.css">
		<script src="js/jquery.min.js"></script>
		<!--script src="js/bootstrap.min.js"></script-->
		
		<!-- Twilio Calling Script & CSS -->
		<!--script type="text/javascript"src="//media.twiliocdn.com/sdk/js/client/v1.3/twilio.min.js"></script-->
		
		<script type="text/javascript" src="https://media.twiliocdn.com/sdk/js/client/v1.7/twilio.min.js"></script>


		
		
		<script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/robcowie/jquery-stopwatch/master/jquery.stopwatch.js"></script>
		<!--script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
		</script-->
		<!--link href="//static0.twilio.com/resources/quickstart/client.css"type="text/css" rel="stylesheet" /-->

	</head>
		<style>
	.container {
    background-color: white;
    width: 450px;
    padding: 20px;
    margin: 30px auto;
    text-align: left;
    box-shadow: 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 22%);
        position: relative;
}
.num-pad {
    text-align: center;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.row_custom_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 !important;
}
div#demo1 {
    text-align: center;
}
button#ca {
    border: none;
    font-size: 22px;
}

.answer-highlight {
    background-color: #dff0d8 !important;
    border: 2px solid green;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px #4CAF50;
    transition: all 0.3s ease;
}
/*-------------------------------------------------------------*/
body{
    background:#F6F6F3 ;
}
.num-pad .span4:nth-child(10) .txt {
    font-size: 60px !important;
    margin-top:20px;
}
.num {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 64px;
     background: transparent !important;
    border: 1px solid #DEE2E6 !important;
}

.txt {
     margin-top: 0px; 
}
.spanicons {
  margin-left: 10px;
  width: 66px;
}
.spanicons span:before{
    font-size: 24px;
}
main {
    top: 58px !important;
    height: 89% !important;
    width: 78% !important;
    left: inherit !important;
    display: flex;
    align-items: center;
    background: none;
    right:0 !important;
}
.container{
    width:fit-content;
    height: fit-content;
    background: none;
    box-shadow: none;
    width: 80%;
    display: flex;
    justify-content: center;
}
.row_custom_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 !important;
}
/*-----------------------------------------------------------*/
input::placeholder {
  color: transparent !important;
}
.col-md-12 input{
    margin-bottom: 28px;
padding-bottom: 0;
    box-shadow: none;
    border-bottom: 1px solid #DBDBDB;
}
.row .col-md-12{
    padding-bottom: 24px;
}
.phone{
    width: 340px !important;
    border-radius: 12px;
    box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.25);
}
.form-control:focus {
     border-color: #DBDBDB; 
    outline: 0;
     -webkit-box-shadow: none; 
    box-shadow: none;
}
.num-pad .span4{
    display: flex;
    justify-content: center;
}
.num-pad{
    padding-left: 0px;
}
.col-md-12 .spanicons .small p{
    font-size: 12px;
    color: #131313;
}
/*----------------------*/
.num-pad .span4:nth-child(10) .txt {
    font-size: 60px !important;
    margin-top:20px;
}
.num {
    display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 50%;
    width: 64px;
    background-color: #cbcbcb;
}
.txt {
     margin-top: 0px; 
     font-size:32px;
     color:#131313;
     font-weight:600;
}
.spanicons {
  margin-left: 10px;
}

.container{
    width:fit-content;
    height: fit-content;
    background: none;
    box-shadow: none;
    width: 80%;
    display: flex;
    justify-content: center;
}
.row_custom_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 !important;
}
.tel{
    border:none;
    font-size: 27px !important;
    color: #131313 !important;
    text-align: center !important;
    margin-top:20px;
}
.glyphicon-headphones:before{
    content: none;
}
.glyphicon-earphone:before{
    content: none;
}
.glyphicon-remove:before{
    content: none;
}
.num:hover{
    background-color: #253544 !important;
    
}
.span4 .num:hover .txt{
    color: #fff!important;
}
/*----tab---------*/
/*@media (max-width: 1024px) and (min-width: 768px) {*/
/*    .container {*/
/*        left: 130px;*/
/*    }*/
/*}*/

/*--------mobile------------*/
@media (max-width: 767px) {
    
.container{
   margin-bottom: 0;
}

main{
    height: 91% !important;
     align-items: end;
     left: 0;
    width: 100% !important;
    display: flex;
}
.col-md-12 {
    padding:0 !important;
}
.col-md-12 input{
    background: none !important;
}
.span4{
    width: 97px !important;
}
.spanicons:first-child {
    margin-left: 0px;
}
}

/*-------------------*/
@media (max-width: 616px) {

.container{
 width: calc(100% - 32px) !important;
}
}
/*---------------------------*/

@media (max-width: 450px) {
main {
    transform: translate(0%, 0%)!important;
}
.header__search {
    margin-left: 20px;
}
.spanicons {
  width: 66px !important;
  margin-left: 10px;
}
}
@media (max-width:380px) {

    .phone {
        width: 290px !important;
    }

    .span4 {
        width: 77px !important;
    }

    .num {
        width: 50px;
        height: 50px;
    }

    .spanicons {
        margin-left: 0px;
    }
    .txt{
        font-size:24px;
    }
}



	</style>
	
	<body>

	<!--	<nav class="navbar navbar-inverse">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>                        
					</button>
					<a class="navbar-brand" href="index.php"><img src="http://recruitedge.co/admin/img/twilioplatform.png"></a>
				</div>
				<div class="collapse navbar-collapse" id="myNavbar">
					<ul class="nav navbar-nav">
						<li><a href="index.php">Home</a></li>
						<li><a href="send-sms.php">Send SMS</a></li>
						<li class="active"><a href="call.php">Call</a></li>
						<li><a href="message-log.php">Message Log</a></li>
						<li><a href="call-log.php">Call Log</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-right">
						<li><a href="#" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-user"></span> Your Account</a></li>
						<li><a href="../logout.php"><span class="glyphicon glyphicon-log-in"></span> Logout</a></li>
					</ul>
				</div>
			</div>
		</nav>-->



		

<!------ Include the above in your HEAD tag ---------->
<main>
<div class="container">
    <div class="row_custom_wrap" style="    margin-left: -23px;">
        <div class="phone">
		<div class="">
				<!-- <div class="col-sm-12"></div> -->
				<div class="col-sm-12 text-align">
					<div id="log" style="margin: 15px;color:green;font-weight:bold;font-size:18px; text-align: center;">Loading pigeons...</div>
				</div>
		
                <div id="demo1" style="display: none" class="demo">00:00:00</div>
			<!--	<div class="col-sm-3"></div> -->
			</div>
            <div class="row1">
                <div class="col-md-12">
				 <input type="tel" id="number" name="number" class="form-control tel" placeholder="Enter a phone number to call" onkeypress="return isNumber(event)"/>
                    
                    <div class="num-pad">
                    <div class="span4">
                        <div class="num">
                            <div class="txt">
                                1
                            </div>
                        </div>
                    </div>
                    <div class="span4">
                        <div class="num">
                            <div class="txt">
                                2
                            </div>
                        </div>
                    </div>
                    <div class="span4">
                        <div class="num">
                            <div class="txt">
                                3 
                            </div>
                        </div>
                    </div>
                    <div class="span4">
                        <div class="num">
                            <div class="txt">
                                4 
                            </div>
                        </div>
                    </div>
                    <div class="span4">
                        <div class="num">
                            <div class="txt">
                                5 
                            </div>
                        </div>
                    </div>
                    <div class="span4">
                        <div class="num">
                            <div class="txt">
                                6 
                            </div>
                        </div>
                    </div>
                    <div class="span4">
                        <div class="num">
                            <div class="txt">
                                7 
                            </div>
                        </div>
                    </div>
                    <div class="span4">
                        <div class="num">
                            <div class="txt">
                                8 
                            </div>
                        </div>
                    </div>
                    <div class="span4">
                        <div class="num">
                            <div class="txt">
                                9 
                            </div>
                        </div>
                    </div>
                    <div class="span4">
                        <div class="num">
                            <div class="txt">
                                *
                            </div>
                        </div>
                    </div>
                    <div class="span4">
                        <div class="num">
                            <div class="txt">
                                0 
                            </div>
                        </div>
                    </div>
                    <div class="span4">
                        <div class="num">
                            <div class="txt">
                                #
                            </div>
                        </div>
                    </div>
                    </div>
                    <div class="clearfix">
                    </div>
			 <div class="row">
                <!--<div class="col-md-12">-->
                <div class="col-md-12" style="display: flex;justify-content: center;width: 100%;">
                    <div>
                        <div class="spanicons">
                            <span class="call glyphicon glyphicon-headphones" style="color:green" id="Answer">
                                <svg xmlns="http://www.w3.org/2000/svg" width="29" height="28" viewBox="0 0 29 28" fill="none">
<path d="M25 18.0367L18.8517 17.325L15.9117 20.265C12.6 18.5803 9.90808 15.8884 8.22334 12.5767L11.175 9.625L10.4633 3.5H4.03501C3.35834 15.3767 13.1233 25.1417 25 24.465V18.0367Z" fill="#0A8D38"/>
<path d="M18.3475 4.3094L17.2035 4L16.5835 6.28793L17.7287 6.59853C18.7288 6.86926 19.6406 7.39747 20.373 8.13047C21.1053 8.86347 21.6328 9.77566 21.9027 10.7761L22.2109 11.92L24.5 11.3024L24.1918 10.1585C23.814 8.7577 23.0755 7.48048 22.05 6.45418C21.0245 5.42788 19.7479 4.68837 18.3475 4.3094ZM17.264 8.31388L16.12 8.00448L15.5 10.2924L16.6452 10.603C16.9451 10.6843 17.2185 10.8427 17.4382 11.0626C17.6578 11.2824 17.816 11.556 17.897 11.856L18.2052 13L20.4943 12.3836L20.1861 11.2384C19.9972 10.538 19.628 9.89942 19.1152 9.38627C18.6025 8.87312 17.9642 8.50337 17.264 8.31388Z" fill="#198754"/>
</svg>
                            </span><span class="small">
                                <p>
                                    Answer</p>
                            </span>
                        </div>
                        <div class="spanicons" id ="call_show">
                            <span class="call glyphicon glyphicon-earphone" style="color:green" onclick="call();">
                                <svg xmlns="http://www.w3.org/2000/svg" width="29" height="28" viewBox="0 0 29 28" fill="none">
<path d="M25 18.0367L18.8517 17.325L15.9117 20.265C12.6 18.5803 9.90808 15.8884 8.22334 12.5767L11.175 9.625L10.4633 3.5H4.03501C3.35834 15.3767 13.1233 25.1417 25 24.465V18.0367Z" fill="#0D6EFD"/>
</svg>
                            </span><span class="small">
                                <p>
                                    Call</p>
                            </span>
                        </div>
                        <div class="spanicons">
                            <span class="hangup call glyphicon  glyphicon-earphone" onclick="hangup();" id="hangh" style="color:red">
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="28" viewBox="0 0 29 28" fill="none">
<path d="M25 18.0367L18.8517 17.325L15.9117 20.265C12.6 18.5803 9.90808 15.8884 8.22334 12.5767L11.175 9.625L10.4633 3.5H4.03501C3.35834 15.3767 13.1233 25.1417 25 24.465V18.0367Z" fill="#FF0000"/>
<rect x="22.3337" y="5.70703" width="1.96857" height="25.2768" transform="rotate(45.8173 22.3337 5.70703)" fill="#FF0000" stroke="white"/>
</svg>
                            </span><span class="small">
                                <p>
                                    Hangup</p>
                            </span>
                        </div>
                        <div class="spanicons active">
                            <span class="glyphicon glyphicon-remove" onclick="remove();">
                                <svg xmlns="http://www.w3.org/2000/svg" width="29" height="28" viewBox="0 0 29 28" fill="none">
<path d="M8.97641 6.4148C9.5859 5.82766 10.4035 5.49908 11.2547 5.49915H23.4733C24.1829 5.49915 25.0088 5.69377 25.684 6.10763C26.371 6.52735 27.0011 7.24956 27.0011 8.28363V19.7147C27.0011 20.7487 26.371 21.4698 25.684 21.8907C25.0158 22.2862 24.2521 22.4964 23.4733 22.4991H11.2547C10.4035 22.4992 9.5859 22.1706 8.97641 21.5835L2.62802 15.4682C2.4296 15.277 2.27191 15.0486 2.16424 14.7963C2.05657 14.544 2.0011 14.273 2.0011 13.9991C2.0011 13.7253 2.05657 13.4543 2.16424 13.202C2.27191 12.9497 2.4296 12.7213 2.62802 12.5301L8.97641 6.4148ZM16.8698 11.0329C16.7883 10.9465 16.69 10.8773 16.5809 10.8292C16.4717 10.7811 16.3539 10.7553 16.2344 10.7532C16.1149 10.7511 15.9962 10.7728 15.8854 10.8171C15.7745 10.8613 15.6739 10.9271 15.5894 11.0106C15.5049 11.0941 15.4382 11.1936 15.3935 11.3031C15.3487 11.4126 15.3267 11.5298 15.3288 11.6479C15.331 11.766 15.3571 11.8824 15.4058 11.9903C15.4544 12.0981 15.5245 12.1952 15.612 12.2757L17.3563 13.9991L15.612 15.7226C15.5245 15.8031 15.4544 15.9002 15.4058 16.008C15.3571 16.1159 15.331 16.2323 15.3288 16.3504C15.3267 16.4685 15.3487 16.5857 15.3935 16.6952C15.4382 16.8047 15.5049 16.9042 15.5894 16.9877C15.6739 17.0712 15.7745 17.137 15.8854 17.1812C15.9962 17.2254 16.1149 17.2472 16.2344 17.2451C16.3539 17.243 16.4717 17.2172 16.5809 17.1691C16.69 17.121 16.7883 17.0517 16.8698 16.9654L18.6141 15.2419L20.3584 16.9654C20.4399 17.0517 20.5382 17.121 20.6473 17.1691C20.7565 17.2172 20.8743 17.243 20.9938 17.2451C21.1133 17.2472 21.232 17.2254 21.3428 17.1812C21.4537 17.137 21.5543 17.0712 21.6388 16.9877C21.7233 16.9042 21.79 16.8047 21.8347 16.6952C21.8795 16.5857 21.9015 16.4685 21.8994 16.3504C21.8972 16.2323 21.8711 16.1159 21.8224 16.008C21.7738 15.9002 21.7037 15.8031 21.6162 15.7226L19.8719 13.9991L21.6162 12.2757C21.7037 12.1952 21.7738 12.0981 21.8224 11.9903C21.8711 11.8824 21.8972 11.766 21.8994 11.6479C21.9015 11.5298 21.8795 11.4126 21.8347 11.3031C21.79 11.1936 21.7233 11.0941 21.6388 11.0106C21.5543 10.9271 21.4537 10.8613 21.3428 10.8171C21.232 10.7728 21.1133 10.7511 20.9938 10.7532C20.8743 10.7553 20.7565 10.7811 20.6473 10.8292C20.5382 10.8773 20.4399 10.9465 20.3584 11.0329L18.6141 12.7564L16.8698 11.0329Z" fill="#212529"/>
</svg>
                            </span><span class="small">
                                <p>
                                    Del</p>
                            </span>
                        </div>
                                 <!-- <div class="call_hold" id="call_hold">
                           <button id="ca"><i class="fa fa-pause" aria-hidden="true"></i></button>
                           </div>
                       <div class="call_unhold" id="call_unhold" style="display: none">
                           <button id="can"><i class="fa fa-play" aria-hidden="true"></i></button>
                           </div>-->
                           <div class="call_transfer" id ="transfer_show" style="display: none">
                           <button id="transfer"><i class="fa fa-forward" aria-hidden="true"></i></button>
                           </div>
                           <div class="call_conference" id="conference" style="display: none">
                           <button id="conference"><i class="fa fa-d" aria-hidden="true"></i>add-call</button>
                           </div>
                       <div class="spanicons active" id ="mute_show" style="display: none">
                            <span class="glyphicon glyphicon-volume-off" id="mute"></span><span class="small">
                                <p>
                                    Mute</p>
                            </span>
                        </div>
                        <div class="spanicons active" id ="unmute_show" style="display: none">
                            <span class="glyphicon glyphicon-volume-up" id="unmute"></span><span class="small">
                                <p>
                                    Unmute</p>
                            </span>
                           <input type="hidden" id="call_sid" value="" />
                            <input type="hidden" id="callerid" value="+13322308524"/>
                          
                          
                        </div>
                        

                       
                         <!--<button id="mute">
                             Mute
                        </button>
                                    
                        
                        <button id="unmute">
                             Unmute
                        </button>-->
                    </div>
                </div>
            </div>
          </div>
         </div>	
        <div class="clearfix">
       </div>
      </div>
     </div>
     </div>
  </main>
<?php
include ('footer.php');
?>
  </body>
 </html>
 	<script type="text/javascript">
			 //$('#demo1').hide();
			Twilio.Device.setup("<?php echo $token; ?>");
			Twilio.Device.ready(function (device) {
				$("#log").text("Ready");
			});
			Twilio.Device.error(function (error) {
				$('#log').css('color','red');
				$("#log").text("Error: " + error.message);
			});
			Twilio.Device.connect(function (conn) {
			 let call_sid = conn.customParameters.get('call_sid');
		
			    $('#call_sid').val(call_sid);
				$('#log').css('color','green');
				$("#log").text("Successfully established call");
			   });

			Twilio.Device.disconnect(function (conn) {
				$('#log').css('color','green');
				$("#log").text("Call ended");
				 location.reload();
				//isOngoing = false;
			});
      // *************** Incoming call ***************   
	   Twilio.Device.incoming(function (conn) {
            $("#log").text("Incoming call from " + conn.parameters.From);
            
            $("#Answer").closest('.spanicons').addClass('answer-highlight');
            $("#Answer").click(function () {
                conn.accept();
                $("#Answer").closest('.spanicons').removeClass('answer-highlight');
            });
            
        });
        
        Twilio.Device.error(function(error) {
            console.log("Twilio Error: " + error.message);
            $("#log").text("Error: " + error.message);
        });
        
        // Handle when call is rejected or caller hangs up before answer
        Twilio.Device.cancel(function (conn) {
            $('#log').css('color', 'orange');
            $("#log").text("Missed call – Caller hung up");
            setTimeout(() => location.reload(), 5000);
        });
        
			// *************** Outgoing call ***************   
			
            let conn;  // declare globally
            
            function call() {
                let params = {
                    "tocall": $("#number").val(),
                    "callerid": $("#callerid").val()
                };
                conn = Twilio.Device.connect(params);
                
                $("#mute").click(function () {
                    if (conn) {
                        conn.mute(true);
                        $('#mute_show').hide();
                        $('#unmute_show').show();
                    }
                });
                $("#unmute").click(function () {
                    if (conn) {
                        conn.mute(false);
                        $('#unmute_show').hide();
                        $('#mute_show').show();
                    }
                });
            }
            
            


			// *************** End the call ***************   
			
		function hangup() {
				Twilio.Device.disconnectAll();
				//connection.disconnect()
				$('#log').css('color','red');
				$('#mute_show').hide();
				$('#unmute_show').hide();
                $('#transfer_show').hide();
                $('#conference').hide();
                 location.reload();
			}
			function isNumber(evt) {
				evt = (evt) ? evt : window.event;
				var charCode = (evt.which) ? evt.which : evt.keyCode;
				if (charCode > 43 && charCode > 31 && (charCode < 48 || charCode > 57)) {
					return false;
				 }
				return true;
			  }
			
			function remove(){
				$('#number').val(
					function(index, value){
						return value.substr(0, value.length - 1);
				})
			}
		$(document).ready(function () {
				$('.num').click(function () {
					var num = $(this);
					var text = $.trim(num.find('.txt').clone().children().remove().end().text());
					var telNumber = $('#number');
					$(telNumber).val(telNumber.val() + text);
				});
         });
		</script>
		<script src="//media.twiliocdn.com/sdk/js/client/v1.13/twilio.min.js"></script>
