<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>Sudila Printers</title>
<meta name="description" content="overview &amp; stats" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css" />
<!-- page specific plugin styles -->
<!-- text fonts -->
<link rel="stylesheet" href="assets/css/fonts.googleapis.com.css" />
<!-- ace styles -->
<link rel="stylesheet" href="assets/css/chosen.min.css" />
<link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
<!--[if lte IE 9]>
    <link rel="stylesheet" href="assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
<![endif]-->
<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
<!--[if lte IE 9]>
  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
<![endif]-->
<!-- inline styles related to this page -->
<!-- ace settings handler -->
<script src="assets/js/ace-extra.min.js"></script>
<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
<!--[if lte IE 8]>
    <script src="assets/js/html5shiv.min.js"></script>
    <script src="assets/js/respond.min.js"></script>
<![endif]-->
<style>
#preloader{
	background:#efefef4f url(assets/images/loading5.gif) no-repeat center center; height:100%;position:fixed;z-index:9999999;right:0;left:0;bottom:0;top:0;overflow-y:hidden;display:none
}
</style>
</head>
<body class="no-skin">
<div id="preloader"></div>
<?php include 'common/navbar.php'; ?>
<div class="main-container ace-save-state" id="main-container">
  <?php include 'common/sidebar.php'; ?>
  <div class="main-content">
    <div class="main-content-inner">
      <div class="breadcrumbs ace-save-state" id="breadcrumbs">
        <ul class="breadcrumb">
          <li> <i class="ace-icon fa fa-home home-icon"></i> <a href="home">Home</a> </li>
          <li class="active">Send SMS</li>
        </ul>
        <!-- /.breadcrumb --> 
      </div>
      <div class="page-content">
        <div class="page-header">
          <h1> Send SMS </h1>
        </div>
        <div class="row">
          <div class="col-xs-12"> 
            <!-- PAGE CONTENT BEGINS -->
            <div class="widget-box">
              <div class="widget-body">
                <div class="widget-main"><br>
                  <!-- Content -->
				  <form id="form_submit" method="post">
					  <div class="row form-group">
						<div class="radio col-md-12">
							<label class="col-md-3">
								<input name="mtype" type="radio" class="ace" required  value="1"/>
								<span class="lbl"> &nbsp; All Customers</span>
							</label>
						
							<label class="col-md-3">
								<input name="mtype" type="radio" class="ace" checked  value="2"/>
								<span class="lbl"> &nbsp; Selected Customer(s)</span>
							</label>
						</div>
					  </div><br>
					  <div class="form-group" id="tel_list">
						<label>Enter Mobile No(s):<sup class="red">*</sup></label>
						<div class="row">
							<div class="col-md-12">
								<input type="text" name="tel_no" id="form-field-tags" required autocomplete="off" style="width:100%"/>
							</div>
						</div>
						<span class="help-block"></span>
					  </div>
					  <div class="form-group">
						<label>Message:<sup class="red">*</sup></label>
						<div class="row">
							<div class="col-md-12">
								<textarea type="text" name="msg" rows=5 required autocomplete="off" style="width:100%"></textarea>
							</div>
						</div>
						<span class="help-block"></span>
					  </div>
					  <br>
					  <div class="form-group">
						<button class="btn btn-primary btn-sm"> SEND</button>
					  </div>
				  </form>
                  <!-- End Content --> 
                </div>
              </div>
            </div>
            <!-- /End .widget-box --> 
          </div>
        </div>
      </div>
      <!-- /.page-content --> 
    </div>
  </div>
  <!-- /.main-content -->
  <?php include 'common/footer.php'; ?>
</div>
<!-- /.main-container -->

<!-- basic scripts --> 
<!--[if !IE]> -->
<script src="assets/js/jquery-2.1.4.min.js"></script>
<!-- <![endif]--> 
<!--[if IE]>
<script src="assets/js/jquery-1.11.3.min.js"></script>
<![endif]--> 
<script type="text/javascript">
	if('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script> 
<script src="assets/js/bootstrap.min.js"></script> 
<!-- page specific plugin scripts --> 
<!--[if lte IE 8]>
  <script src="assets/js/excanvas.min.js"></script>
<![endif]-->
<script src="assets/js/jquery.dataTables.min.js"></script>
<script src="assets/js/jquery-typeahead.js"></script>
<script src="assets/js/jquery.dataTables.bootstrap.min.js"></script>
<!-- ace scripts -->
<script src="assets/js/ace-elements.min.js"></script>
<script src="assets/js/chosen.jquery.min.js"></script>
<script src="assets/js/ace.min.js"></script>
<script src="assets/jquery.validate.min.js"></script>
<link rel="stylesheet" href="bootstrap-sweetalert/lib/sweet-alert.css" />
<script src="bootstrap-sweetalert/lib/sweet-alert.min.js"></script>
<script src="assets/js/bootstrap-tag.min.js"></script>
<!-- inline scripts related to this page --> 
<script type="text/javascript">
jQuery(function ($) {
	//initiate dataTables plugin
	var myTable =
	$('#dynamic-table')
	//.wrap("<div class='dataTables_borderWrap' />")   //if you are applying horizontal scrolling (sScrollX)
	.DataTable({
		bAutoWidth: false,
		"aaSorting": [],
	});
	
	if(!ace.vars['touch']) {
		$('.chosen-select').chosen({allow_single_deselect:true}); 
		//resize the chosen on window resize

		$(window)
		.off('resize.chosen')
		.on('resize.chosen', function() {
			$('.chosen-select').each(function() {
				 var $this = $(this);
				 $this.next().css({'width': $this.parent().width()});
			})
		}).trigger('resize.chosen');
		//resize chosen on sidebar collapse/expand
		$(document).on('settings.ace.chosen', function(e, event_name, event_val) {
			if(event_name != 'sidebar_collapsed') return;
			$('.chosen-select').each(function() {
				 var $this = $(this);
				 $this.next().css({'width': $this.parent().width()});
			})
		});
	}
	
	$('#id-input-file-1 , #id-input-file-2').ace_file_input({
		no_file:'No File ...',
		btn_choose:'Choose',
		btn_change:'Change',
		droppable:false,
		onchange:null,
		thumbnail:false, //| true | large
		whitelist:'png|jpg|jpeg',
		blacklist:'exe|php|html',
		onchange:'',
	});
	
	///////////////////
	
	var TelNo_Arr =[];
	
	<?php $sql_au = mysqli_query($conn, "SELECT tel_no FROM order_details GROUP BY tel_no");
	while($row_au = mysqli_fetch_array($sql_au)) {
	?>
		TelNo_Arr.push('<?php echo $row_au['tel_no']; ?>');
	<?php } ?>
		
	//typeahead.js
	//example taken from plugin's page at: https://twitter.github.io/typeahead.js/examples/
	var substringMatcher = function(strs) {
		return function findMatches(q, cb) {
			var matches, substringRegex;
		 
			// an array that will be populated with substring matches
			matches = [];
		 
			// regex used to determine if a string contains the substring `q`
			substrRegex = new RegExp(q, 'i');
		 
			// iterate through the pool of strings and for any string that
			// contains the substring `q`, add it to the `matches` array
			$.each(strs, function(i, str) {
				if (substrRegex.test(str)) {
					// the typeahead jQuery plugin expects suggestions to a
					// JavaScript object, refer to typeahead docs for more info
					matches.push({ value: str });
				}
			});

			cb(matches);
		}
	 }
	 
	var tag_input = $('#form-field-tags');
	try{
		tag_input.tag(
		  {
			placeholder:tag_input.attr('placeholder'),
			//enable typeahead by specifying the source array
			source: TelNo_Arr,//defined in ace.js >> ace.enable_search_ahead
			/**
			//or fetch data from database, fetch those that match "query"
			source: function(query, process) {
			  $.ajax({url: 'remote_source.php?q='+encodeURIComponent(query)})
			  .done(function(result_items){
				process(result_items);
			  });
			}
			*/
		  }
		)
		
		var $tag_obj = $('#form-field-tags').data('tag');
		//programmatically add/remove a tag
		/*var $tag_obj = $('#form-field-tags').data('tag');
		$tag_obj.add('Programmatically Added');
		
		var index = $tag_obj.inValues('some tag');
		$tag_obj.remove(index);*/
	}
	catch(e) {
		//display a textarea for old IE, because it doesn't support this plugin or another one I tried!
		tag_input.after('<textarea id="'+tag_input.attr('id')+'" name="'+tag_input.attr('name')+'" rows="3">'+tag_input.val()+'</textarea>').remove();
		//autosize($('#form-field-tags'));
	}
});


$('document').ready(function()
{
	$.validator.setDefaults({ ignore: ":hidden:not(select)" }); //for all select
   $("#form_submit").validate({
	   ignore: [],
	rules: {

	},
	 messages:
	{

	},
	 errorPlacement : function(error, element) {
		$(element).closest('.form-group').find('.help-block').html(error.html());
	 },
	 highlight : function(element) {
		$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
	 },
	 unhighlight: function(element, errorClass, validClass) {
		$(element).closest('.form-group').removeClass('has-error');
		$(element).closest('.form-group').find('.help-block').html('');
	 },
		  submitHandler: submitForm
	});
	function submitForm(){
		$("#preloader").fadeIn();
		//disable the default form submission
		event.preventDefault();
		//grab all form data  
		var formData = new FormData($('#form_submit')[0]);
	    $.ajax({
			  url: 'connection/sms_conn',
			  type: 'POST',
			  data: formData,
			  async: false,
			  cache: false,
			  contentType: false,
			  processData: false,
			  dataType: 'json',
		})
		 .done(function(data){
			$("#preloader").fadeOut("slow");
			if($.trim(data) == '') {
				swal("", "Something went wrong! Please Try Again!", "warning");
			
			} else {
				if($.trim(data) === 'error') {
					swal("", "Something went wrong! Please Try Again!", "warning");
				
				} else if(data.status == "1602") {
					swal({
						title: "",
						text: "Error occurred while SMS save into database!",
						type: "warning",
						timer: 2000,
						showConfirmButton: false,
					});
				
				} else if(data.status == '1601') {
					swal({
					  title: "",
					  text: "Your message has been successfully sent!",
					  type: "success",
					  confirmButtonText: "OK"
						},
						function (isConfirm) {
					  if (isConfirm) {
						  window.location.href = "send_sms";
					  }
					});
				
				} else if(data.status == '1603') {
					swal("", "Please recharge your account!", "warning");
				
				} else if(data.status == '1604') {
					swal("", "Invalid Phone number!", "warning");
				
				} else {
					swal("", "Error occurred while sending SMS!", "warning");
				}
			}
		 })
		 .fail(function(){
			 $("#preloader").fadeOut("slow");
			  swal("", "Something went wrong! Please Try Again!", "warning");
		 });
	}
});

$("input[name='mtype']").on('change', function() {
	var val = $(this).val();
	
	if(val == '2') {
		$("#tel_list").show();
		$('#form-field-tags').prop('required',true);
	
	} else {
		$("#tel_list").hide();
		$('#form-field-tags').prop('required',false);
		$('#form-field-tags').val('');
	}
});

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