<?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();

 $to = $_POST['to'];

?>
<!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%);
}
.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;
}

	</style>
	
	<body>
<!------ 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"></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();"></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"></span><span class="small">
                                <p>
                                    Hangup</p>
                            </span>
                        </div>
                        <div class="spanicons active">
                            <span class="glyphicon glyphicon-remove" onclick="remove();"></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');
			 console.log(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;
				window.location = "call_detailssss.php";
			});
      // *************** 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);
            window.location = "call_detailssss.php";
        });
        
			// *************** 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();
                    }
                });
            }
            
            // Redial Call
             Twilio.Device.ready(function (device) {
                $("#log").text("Ready");
                <?php if (!empty($to)) { ?>
                    setTimeout(() => {
                        $("#number").val("<?php echo $to; ?>");
                        $("#callerid").val('+13322308524');
                        call();
                    }, 1000); // wait 1s after ready
                <?php } ?>
            });
            
            


			// *************** 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();
                window.location = "call_detailssss.php";
			}
			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>

		