<script src="//cdn.ckeditor.com/4.7.3/standard/ckeditor.js"></script>
<div class="vd_content-wrapper">
      <div class="vd_container">
        <div class="vd_content clearfix">
          <div class="vd_head-section clearfix">
            <div class="vd_panel-header">
              <ul class="breadcrumb">
                <li><a href="<?php echo base_url();?>admin">Home</a> </li>
                <li class="active">NewsLetter</li>
              </ul>
              
 
            </div>
          </div>
          <!-- vd_head-section -->
          
          <div class="vd_title-section clearfix">
            <div class="vd_panel-header">
              <h1>Compose New Email </h1>
              
<!-- vd_panel-menu --> 
            </div>
            <!-- vd_panel-header --> 
          </div>
          <!-- vd_title-section -->
          
          <div class="vd_content-section clearfix">
            	<div class="row">
                <form class="form-horizontal" role="form" action="<?php echo base_url();?>admin/sendmails" method="post">
              <div class="col-md-9">
                <div class="panel widget light-widget">
                  <div class="panel-heading no-title"> </div>
                  <!-- vd_panel-heading -->
                  
                  <div class="panel-body">
                  
                      <div class="form-group clearfix">
                        <label class="col-sm-2 control-label">To</label>
                        <div class="col-sm-10 controls">
                          <input id="email-input" type="text" class="input-border-btm" placeholder="someone@example.com"  >
                        </div>
                      </div>
                      <div class="form-group  clearfix">
                        <label class="col-sm-2 control-label">Subject</label>
                        <div class="col-sm-10 controls">
                          <input type="text" id="subject-input" name="subject" class="input-border-btm" placeholder="Subject Title">
                        </div>
                      </div>
                      <br/>
                      <div class="form-group  clearfix">
                        <label class="col-sm-12 control-label sr-only">Message</label>
                        <div class="col-sm-12 controls">
               <textarea id="message" name="editor1" class="width-100 form-control"  rows="15" placeholder="Write your message here"></textarea>
                        </div>
                      </div>
                      <div class="form-group form-actions">
                        <div class="col-sm-12">
                          <button type="submit" class="btn vd_btn vd_bg-green vd_white"><i class="fa fa-envelope append-icon"></i> SEND</button>
                        </div>
                      </div>
                  </div>
                  <!-- panel-body  --> 
                  
                </div>
                <!-- panel --> 
              </div>
              <!-- col-md-8 -->
              
              <div class="col-md-3">
                <div class="panel widget">
                  <div class="panel-heading vd_bg-yellow">
                    <h3 class="panel-title"> <span class="menu-icon"> <i class="glyphicon glyphicon-book"></i> </span> Address Book </h3>
                  </div>
                  <!-- vd_panel-heading -->
                  
                  <div class="panel-body">
                    <div class="form-group clearfix mgtp-10">
                      <div class="vd_input-wrapper light-theme"> <span class="menu-icon"> <i class="fa fa-filter"></i> </span>
                        <input type="text" id="filter-text" placeholder="Name Filter">
                      </div>
                    </div>
                    <br/>
                    


                           
                          <a href="#" id="check-all">Check All</a> <span class="mgl-10 mgr-10">/</span> <a href="#" id="uncheck-all">Uncheck All</a>  
     
                          <hr class="mgtp-5"/>                   
                          <div class="form-group clearfix" style="height: 250px; overflow-y:scroll;">
                              <div class="col-md-12">
                                <div class="content-list content-menu" id="email-list">
                                  <div class="list-wrapper wrap-25 isotope">
                                    <?php $i=1;foreach($news as $news){?>
                                    <div class="email-item">
                                      <div class="vd_checkbox checkbox-success">
                        <input type="checkbox" id="checkbox-<?php echo $i;?>" value="<?php echo $news->email;?>">
                        <label class="filter-name" for="checkbox-<?php echo $i;?>"><?php echo $news->phone;?> <em class="font-normal"><?php echo $news->email;?></em> </label>
                                      </div>
                                    </div>
                                    <?php $i++;}?>
                                    <?php $i=1;foreach($users as $user){?>
                                    <div class="email-item">
                                      <div class="vd_checkbox checkbox-success">
                        <input type="checkbox" id="checkbox-<?php echo $i;?>" value="<?php echo $user->email;?>">
                        <label class="filter-name" for="checkbox-<?php echo $i;?>"><?php echo $user->first_name;?> <em class="font-normal"><?php echo $user->email;?></em> </label>
                                      </div>
                                    </div>
                                    <?php $i++;}?>
                                  </div>
                                  <!-- list-wrapper --> 
                                </div>
                                <!-- content-list --> 
                              </div>
                              <!-- col-md-12 --> 
                            </div>
                  </div>
                  <!-- panel-body  --> 
                  
                </div>
                <!-- panel --> 
              </div>
              </form>
              <!-- col-md-8 --> 
            </div>
         
          </div>
        </div>
        <!-- .vd_content --> 
      </div>
      <!-- .vd_container --> 
    </div>
  </div>
  <!-- .container --> 
</div>
<!-- .content -->

<!-- Footer Start -->
  <footer class="footer-1"  id="footer">      
    <div class="vd_bottom ">
        <div class="container">
            <div class="row">
              <div class=" col-xs-12">
                <div class="copyright">
                  	Copyright &copy;2018 HadesIndia. All Rights Reserved 
                </div>
              </div>
            </div><!-- row -->
        </div><!-- container -->
    </div>
  </footer>
<!-- Footer END -->
  

</div>

<!-- .vd_body END  -->
<a id="back-top" href="#" data-action="backtop" class="vd_back-top visible"> <i class="fa  fa-angle-up"> </i> </a>
<script type="text/javascript" src='<?php echo base_url();?>adminassets/plugins/jquery-ui/jquery-ui.custom.min.js'></script>
<script type="text/javascript" src="<?php echo base_url();?>adminassets/plugins/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>

<script type="text/javascript" src="<?php echo base_url();?>adminassets/js/caroufredsel.js"></script> 
<script type="text/javascript" src="<?php echo base_url();?>adminassets/js/plugins.js"></script>

<script type="text/javascript" src="<?php echo base_url();?>adminassets/plugins/breakpoints/breakpoints.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>adminassets/plugins/prettyPhoto-plugin/js/jquery.prettyPhoto.js"></script> 

<script type="text/javascript" src="<?php echo base_url();?>adminassets/plugins/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>adminassets/plugins/tagsInput/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>adminassets/plugins/bootstrap-switch/bootstrap-switch.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>adminassets/plugins/blockUI/jquery.blockUI.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>adminassets/plugins/pnotify/js/jquery.pnotify.min.js"></script>

<script type="text/javascript" src="<?php echo base_url();?>adminassets/js/theme.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>adminassets/custom/custom.js"></script>

<script type="text/javascript" language="javascript" src="<?php echo base_url();?>adminassets/plugins/isotope/isotope.pkgd.min.js"></script>
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
$(function () {
	"use strict";
	

	  // init Isotope
	  var $container = $('.isotope').isotope({
		itemSelector: '.isotope .email-item',
		layoutMode: 'vertical'
	  });

		
	// User types in search box - call our search function and supply lower-case keyword as argument
	$('#filter-text').bind('keyup', function() {

		var filterValue = this.value.toLowerCase();
		isotopeFilter();

	});
	
	var filterFns = function() {		 
	  var kwd = $('#filter-text').val().toLowerCase();
	  var re = new RegExp(kwd, "gi");
      var name = $(this).find('.filter-name').text();
      return name.match( re );		  
	}
	
	function isotopeFilter(){

		  $container.isotope({ filter: filterFns });	
	}
	
	
	$('#check-all').click(function() {
        $('.email-item input').prop('checked', true);
	});
	$('#uncheck-all').click(function() {
        $('.email-item input').prop('checked', false);
	});	


		
	$('#insert-email-btn').click(function(e) {
          e.preventDefault();
		  var emails='';
		  emails=$('.email-item input:checked').map(function(n){  //map all the checked value to tempValue with `,` seperated
            	return  this.value;
   		  }).get().join(' , ');
		  var comma = $('#email-input').val() ? ' , ' : '';		
		  if (emails)  {
		  	$('#email-input').val($('#email-input').val() + comma + emails);
		  }
    });
		
});
</script>
</body>
</html>