<!DOCTYPE html>
<html>
<head>
	<title>Block Signal List</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

  

<style type="text/css">
#hideForm { cursor: pointer; }
	.escalation-main{float:left; width:50%;}
  .escalation-main span{float:left; width:100%; margin:0px 0px; text-align:left;}
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
  #sortable li { float:left; width:100%;  border:1px solid #aeaeae!important; border-bottom:3px solid green!important; border-radius:6px!important; margin:5px 0px!important; padding:2px 0px!important;}
  .drag-drop-main{float:left; width:100%; margin: 15px 0px; }
  #sortable li i{position:relative!important; left:0!important;}
  .list-icon{ width:40%; float:right; text-align:right }
   .list-icon a .fa{font-size: 22px;
padding-top: 13px !important;}
.form-group::after{display:none;}
.form-input-text{width:100%; font-size:12px; line-height:14px; padding-left:10px!important; font-size:12px!important; margin-left:-2%;}
.form-input{width:64%;}

  .lds-roller {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px;

}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 32px 32px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #666;
  margin: -3px 0 0 -3px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 50px;
  left: 50px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 54px;
  left: 45px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 57px;
  left: 39px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 58px;
  left: 32px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 57px;
  left: 25px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 54px;
  left: 19px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 50px;
  left: 14px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 45px;
  left: 10px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.main-loader{width:60px; margin: 50% auto;}
#updateButton{clear:both;}
#border-none{border:none;}
#event-table-right{margin:0!important;}
tbody#escalationTable{overflow-y: auto; overflow-x: hidden; height:520px;display: block;}

.green_img{background:#14c237; width:12px; height:60px; padding:0px; }
    .grey_img{ background: #b1b1b2; width:12px; height:60px;padding:0px;}
	#event-table-right tr{border:none!important;}
	#event-table-right tr td{border-top: 1px solid #0c1d49; width:46.5%!important;}
	#event-table-right_paginate{border-top: 1px solid #0c1d49!important;}
@media all and (min-width:2200px) and (max-width:2900px){
	 .grey_img{height:60.5px!important;}  
	
}


.new_navigation {padding:42px 0px;   background-color: rgb(244, 245, 247); min-height:650px;  width: 23%;
    margin-right: 2%;}

.sm-side {
       background-color: rgb(244, 245, 247);
    border-radius: 4px 0 0 4px;
    width: 100%;
}

.sm-side {
    display: table-cell;
    float: none;
    height: 100%;
    padding: 0;
    vertical-align: top;
}

ul.inbox-nav {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 100%;
}

ul.inbox-nav li {
    display: inline-block;
    line-height: 45px;
    width: 100%;
}

ul.inbox-nav li a:hover, ul.inbox-nav li.active a, ul.inbox-nav li a:focus {
        background-color: rgba(9, 30, 66, 0.04);
    color:rgb(0, 82, 204);
	fill: rgba(9, 30, 66, 0.04); margin: 0px 14px;
    width: 90%;
    border-radius: 3px; padding-top: 3px;
}
ul.inbox-nav li a {
    color: #6a6a6a;
    display: inline-block;
    line-height: 45px;
    padding: 0 20px;
    width: 100%;
}


.mail-box {
    border-collapse: collapse;
    border-spacing: 0;
    display: table;
    table-layout: fixed;
    width: 100%;
}
.mail-box aside {
    display: table-cell;
    float: none;
    height: 100%;
    padding: 0;
    vertical-align: top;
}
.mail-box .sm-side {
    background: none repeat scroll 0 0 #e5e8ef;
    border-radius: 4px 0 0 4px;
    width: 25%;
}
.mail-box .lg-side {
    background: none repeat scroll 0 0 #fff;
    border-radius: 0 4px 4px 0;
    width: 75%;
}
.mail-box .sm-side .user-head {
    background: none repeat scroll 0 0 #00a8b3;
    border-radius: 4px 0 0;
    color: #fff;
    min-height: 80px;
    padding: 10px;
}
.user-head .inbox-avatar {
    float: left;
    width: 65px;
}
.user-head .inbox-avatar img {
    border-radius: 4px;
}
.user-head .user-name {
    display: inline-block;
    margin: 0 0 0 10px;
}
.user-head .user-name h5 {
    font-size: 14px;
    font-weight: 300;
    margin-bottom: 0;
    margin-top: 15px;
}
.user-head .user-name h5 a {
    color: #fff;
}
.user-head .user-name span a {
    color: #87e2e7;
    font-size: 12px;
}
a.mail-dropdown {
    background: none repeat scroll 0 0 #80d3d9;
    border-radius: 2px;
    color: #01a7b3;
    font-size: 10px;
    margin-top: 20px;
    padding: 3px 5px;
}
.inbox-body {
    padding: 0px 20px;
}
.btn-compose {
    background:#0061ff;
    color: #fff;
    padding: 12px 0;
    text-align: center;
    width: 100%;
}
.btn-compose:hover {
    background: #0056b3;
    color: #fff;
}
ul.inbox-nav {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 100%;
}

ul.inbox-nav li {
    display: inline-block;
    line-height: 45px;
    width: 100%;
}
ul.inbox-nav li a {
    color: #6a6a6a;
    display: inline-block;
    line-height: 45px;
    padding: 0 20px;
    width: 100%;
}

ul.inbox-nav li a i {
    color: #6a6a6a;
    font-size: 16px;
    padding-right: 10px;
}

ul.labels-info li h4 {
    color: #5c5c5e;
    font-size: 13px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    text-transform: uppercase;
}
ul.labels-info li {
    margin: 0;
}
ul.labels-info li a {
    border-radius: 0;
    color: #6a6a6a;
}
ul.labels-info li a:hover, ul.labels-info li a:focus {
    background: none repeat scroll 0 0 #d5d7de;
    color: #6a6a6a;
}
ul.labels-info li a i {
    padding-right: 10px;
}
.nav.nav-pills.nav-stacked.labels-info p {
    color: #9d9f9e;
    font-size: 11px;
    margin-bottom: 0;
    padding: 0 22px;
}
.inbox-head {
    background: none repeat scroll 0 0 #41cac0;
    border-radius: 0 4px 0 0;
    color: #fff;
    min-height: 80px;
    padding: 20px;
}
.inbox-head h3 {
    display: inline-block;
    font-weight: 300;
    margin: 0;
    padding-top: 6px;
}
.inbox-head .sr-input {
    border: medium none;
    border-radius: 4px 0 0 4px;
    box-shadow: none;
    color: #8a8a8a;
    float: left;
    height: 40px;
    padding: 0 10px;
}
.inbox-head .sr-btn {
    background: none repeat scroll 0 0 #00a6b2;
    border: medium none;
    border-radius: 0 4px 4px 0;
    color: #fff;
    height: 40px;
    padding: 0 20px;
}
.table-inbox {
    border: 1px solid #d3d3d3;
    margin-bottom: 0;
}
.table-inbox tr td {
    padding: 12px !important;
}
.table-inbox tr td:hover {
    cursor: pointer;
}
.table-inbox tr td .fa-star.inbox-started, .table-inbox tr td .fa-star:hover {
    color: #f78a09;
}
.table-inbox tr td .fa-star {
    color: #d5d5d5;
}
.table-inbox tr.unread td {
    background: none repeat scroll 0 0 #f7f7f7;
    font-weight: 600;
}
ul.inbox-pagination {
    float: right;
}
ul.inbox-pagination li {
    float: left;
}
.mail-option {
    display: inline-block;
    
    width: 100%;
}
.mail-option .chk-all, .mail-option .btn-group {
    margin-right: 5px;
}
.mail-option .chk-all, .mail-option .btn-group a.btn {
    background: none repeat scroll 0 0 #fcfcfc;
    border: 1px solid #e7e7e7;
    border-radius: 3px !important;
    color: #afafaf;
    display: inline-block;
    padding: 5px 10px;
}
.inbox-pagination a.np-btn {
    background: none repeat scroll 0 0 #fcfcfc;
    border: 1px solid #e7e7e7;
    border-radius: 3px !important;
    color: #afafaf;
    display: inline-block;
    padding: 5px 15px;
}
.mail-option .chk-all input[type="checkbox"] {
    margin-top: 0;
}
.mail-option .btn-group a.all {
    border: medium none;
    padding: 0;
}
.inbox-pagination a.np-btn {
    margin-left: 5px;
}
.inbox-pagination li span {
    display: inline-block;
    margin-right: 5px;
    margin-top: 7px;
}
.fileinput-button {
    background: none repeat scroll 0 0 #0061ff; color:#fff;
    border: 1px solid #0056b3;
}
.inbox-body .modal .modal-body input, .inbox-body .modal .modal-body textarea {
    border: 1px solid #e6e6e6;
    box-shadow: none;
}

.sync_data{background:#0061ff;   margin-top:20px;}
.sync_data a:hover{background:#0056b3!important;}

.buttonload{ margin-top:20px; background:#0061ff; padding:12px 12px; color:#fff; border-radius:5px; border:1px solid #0056b3; float:left; width:74%; margin-left:34px; font-size:17px }
.last_sync{color:#666; font-size:10px; padding-top:10px; float:left; width:100%; text-align:center;}


</style>
</head>
<body>
<div class="container">
	<div class="row">
		<!-- <div class="col-sm-3 pull-left" style="position:relative; padding-left:0px;">
				<div class="box-right-loan-top" style="border-right:2px solid #0c1d49;">
                              <div class="col-sm-12">
                                 <span class="main-tab-box-h">
                                 <span class="loan-worker">ASM Block List</span>
                                 </span>
                              </div>
		
					</div>
		
		</div> -->

			<div class="col-lg-3 new_navigation">
			
					<aside class="sm-side">                    
						  <ul class="inbox-nav inbox-divider">
							  <li class="active">
								  <a href="#"> <i class="fa fa-ban" aria-hidden="true" style=" color:rgb(0, 82, 204);
	fill: rgba(9, 30, 66, 0.04);"></i>  Block List </a>
							  </li>
						
							  
								  
							 					   
						  </ul> 

								  
							 
							  
							  <button type="button" class="buttonload btn btn-info btn-lg">
								  <!--i class="fa fa-refresh fa-spin"></i -->
<i class="fa fa-refresh"></i>								  
								  &nbsp;  Sync with ASM
							</button>
							
							<span class="last_sync"></span> 
						 
					  </aside>
			</div>


		<div class="col-lg-6" >
			<div class="row" style=" float:left; width:100%; padding:26px 0px 0px 0px !important; ">
				<div class="col-sm-8 pull-left text-left" style="padding-left:0px;">
					<h3><span class="loan-worker" style="padding-top:8px;">Block List<br></span></h3>
				</div>
			<div class="col-sm-4 pull-left text-right" style="padding-right:0px;">
				<a href="javascript:void(0)">
					<span class="loan-worker" id="loan-worker" style="border: 1px solid rgb(124, 121, 121); padding: 6px 24px 6px 0px; border-radius: 20px; font-size: 16px; width: 96px; float: right; display: block;">
						<i class="fa fa-plus" aria-hidden="true"></i>
						Add
					</span>
				</a>
			</div>

			<span class="col-sm-12" style="font-size:11px; line-height:15px; font-style:italic; padding-top:16px; text-align:center">
				Numbers added in this list will not appear in ASM signalling and will be blocked until removed. To add phone numbers, please click on the Add button.
			</span>

			<div>
				<table id="datatable">
					<thead style="">
						<tr>
							<th>Number</th>
							<th>Action</th>
						</tr>
					</thead>
					<tbody>
						<?php
							if( !empty($number) ){
								for( $var=0; $var<count($number); $var++ ){
									echo '<tr><td>'.$number[$var]['number'].'</td><td><a href="javascript:void(0)" class="removeNumber" data-blocknumber="'.$number[$var]['id'].'">Remove</a></td></tr>';
								}
							}
						?>
					</tbody>
				</table>
        <input type="hidden" id="syncRunning">
				<br>
				<div id="errorMsg"></div>
			</div>

			</div>
		</div>
		<div class="col-lg-3" style="padding:0px; border-left:2px solid green; min-height:650px; height:100%;">

			<div class="row">
				<div id="loader_image" style="display: none;">
					<div style="float:left; width:100%; margin-top:35%;">
						<div class="main-loader">
							<div class="lds-roller">
								<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
							</div>
						</div> 
					</div>
				</div>
				<div id="form_div" class="animated fadeIn" style="float: left;margin-left: 17%;width: 100%; display: none;">							   
					<div class="" id="heading_div" style=" float:left; width:100%; padding:28px 0px 28px 0px !important;">
						<div class="col-sm-10 pull-left text-left">
							<h3><span class="loan-worker" style="padding-top:10px; margin-left: -4%">
								Add Number to Block list
							</span></h3>
						</div>
						<div class="col-sm-2 pull-left text-left" id="close_div">
							<span class="loan-worker" id="hideForm" style="padding-top:10px;">
								<i class="fa fa-times" aria-hidden="true"></i>
							</span>
						</div>
					</div>
					<div id="animated" class="animated fadeIn">
						<form class="newForm" id="asmblocklistform">
							<div class="form-group is-empty">
								<label class="form-input-text">Mobile number </label>
								<input minlength="7" maxlength="20" onkeypress="return isNumberKey(event)" name="Mobile" id="Mobile" value="" class="form-input" aria-label="Mobile">
							</div>
							<div class="form-group is-empty text-center" id="submit_button" style="float:left;">
								<input style="" value="Add to Block list" name="submit" id="apply-btn" type="submit">
							</div>
						</form>
					</div>
					<div id="error_msg" style="clear: both;"></div>
				</div>
			</div>
		</div>
	</div>
</div>


  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>
  <!-- End Modal -->


<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
function isNumberKey(evt)
{
   var charCode = (evt.which) ? evt.which : evt.keyCode
   if (charCode > 31 && (charCode < 48 || charCode > 57))
      return false;


   return true;
}

$(document).ready(function(){
	$('#datatable').DataTable();
	//alert();

	$('#loan-worker').click(function(){
		$('#loader_image').show();
		setTimeout(function() {
		    $('#loader_image').hide();
		    $('#form_div').show();
		    $('#form_div').removeClass('fadeOut');
		    $('#form_div').addClass('fadeIn');
		    //$('.newForm').attr('id','createnewcontract');
		    $('#form_div').fadeIn();
		  }, 1000);
	});

	$('#hideForm').click(function(){
		 $('#form_div').fadeOut();
		 $('#asmblocklistform')[0].reset();
	});

	$('#asmblocklistform').submit(function(e){
		e.preventDefault();
		$.ajax({
              url: '<?php echo base_url(); ?>index.php/tracking/addNumberBlock',
              type: 'post',
              dataType: 'json',
              data: $('#asmblocklistform').serialize(),
              success:function(response){
                  if( response.error == 0 ){
                  	//$('#error_msg').show();
                    	$('#error_msg').html('<div class="alert alert-success" role="alert"> Number added to Block List</div>');
                    	setTimeout(function(){
                    		window.location.href='<?php echo base_url(); ?>index.php/tracking/blocklist';
                    	}, 2000);
                  }if( response.error == 1 ){
                  	//$('#errorMsg').show();
                    	$('#error_msg').html('<div class="alert alert-danger" role="alert">'+response.message+'!</div>');
                    	setTimeout(function(){
		                	//$('#error_msg').fadeOut();
		                	$('#error_msg').text(' ');
                    	}, 2000);
                  }
              }
          });
	});

	$('.removeNumber').click(function(){
		var numberID = $(this).data('blocknumber');
		$('#error_msg').text(' ');
		$.ajax({
              url: '<?php echo base_url(); ?>index.php/tracking/removeBlockNumber',
              type: 'post',
              dataType: 'json',
              data: { id: numberID },
              beforeSend:function(){
              		$('#errorMsg').html('<div class="alert alert-warning" role="alert"> Processing...</div>');
              },
              success:function(response){
                  if( response.error == 0 ){
                  	$('#errorMsg').fadeIn();
                    	$('#errorMsg').html('<div class="alert alert-success" role="alert"> Number removed from Block List</div>');
                    	setTimeout(function(){
                    		window.location.href='<?php echo base_url(); ?>index.php/tracking/blocklist';
                    	}, 2000);
                  }if( response.error == 1 ){
                  	$('#errorMsg').fadeIn();
                    	$('#errorMsg').html('<div class="alert alert-danger" role="alert">'+response.message+'!</div>');
                    	setTimeout(function(){
		                	$('#errorMsg').fadeOut();
		                	$('#errorMsg').text(' ');
                    	}, 2000);
                  }
              }
          });
	});

  $('.buttonload').click(function(){
	  
      $('.fa-refresh').addClass('fa-spin');
      $('#syncRunning').val('1');
      $('.buttonload').attr('disabled','disabled');
      $.ajax({
          url: '<?php echo base_url() ?>index.php/check/',
          type: 'get',
          dataType: 'json',
          success:function(response){
            //console.log(response);
            $('.last_sync').html('Last sync done at '+response.last_run+'<br>'+response.message);
            $('.fa-refresh').removeClass('fa-spin');
            $('.buttonload').removeAttr('disabled');
            $('#syncRunning').val('0')
          }

      });
  });


  /*$('.syncing').contents().find('container').bind('click', function(e) {
          //if( $('body').hasClass('syncing') ){
              alert('clicked');
          //}
  });*/

  // $('.container').click(function(){

  //     setTimeout(funtion(){}, 1000){

  //     }

  //       if( $('#syncRunning').val() == '1' ){
  //             alert('clicked');
  //       }
  // });
});


</script>
</body>
</html>