
<?php
 
  require 'connection.php';

include "template/headertop.php";

?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style type="text/css">
  .btn {
  border: 2px solid black;
  background-color: white;
  color: black;
  cursor: pointer;
  width: 100px;
}
.info {
  border-color: #2196F3;
  color: dodgerblue;
}

  /* Green */
.info:hover {
  background: #2196F3;
  color: white;
}
.danger {
  border-color: #f44336;
  color: red;
}

.danger:hover {
  background: #f44336;
  color: white;
}


</style>
<br>
          <input  disabled style="width: 100px; display: none;" class="" id="myInput2" type="text" placeholder="Ref#">

  <input class="form-control" id="myInput" type="text" placeholder="Search Customer Group Name...">
  

  <ul class="list-group instore" id="myList" style="display: none;">
          <?php
                    require 'connection.php';

                        $qry = "SELECT  * FROM groupreg where groupid2=2";

             $run = mysqli_query($connect, $qry) or die(mysqli_error($connect));
    while($row = mysqli_fetch_array($run)){
      $id=$row['groupid']*253*253;
?>
                             
    <li value="<?php echo $id;?>" class="list-group-item"><?php echo $row['groupname'];?></li>
      <?php } ?>
   
  </ul> 
  <!-- <label>Select</label>  -->
  <select style="width: auto;" id="period">
    <option value="1">Today</option>
    <option value="2">Yesterday</option>
    <option value="3">Last 7 Days</option>
    <option value="4">This Month</option>
    <option value="5">Last Month</option>

  </select>
<img src="images/ajaxload.gif" id="load" style="width: 30px; height: 30px; display: none;">

  <button id="filtr" class="btn info">Filter</button>
      <button id="clear" class="btn danger">Clear</button>
<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    if($("#myInput").val()==""){
      $('#myList').hide();
    }
    else{
      $('#myList').show();

    }
    var value = $(this).val().toLowerCase();
    $("#myList li").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>
<script type="text/javascript">
$("ul.instore li").click( function() {
    var txt = $(this).text();
    var val = $(this).val();
    $('#myInput').val(txt);
    $('#myInput2').val(val);
    $(this).addClass("active").siblings().removeClass("active");
      $('#myList').hide();

});
      </script>

      <script type="text/javascript">
$("#clear").click( function() {
 
    $('#myInput').val("");
    $('#myInput2').val("");

});

      </script>

 
        
<?php
include "template/headerbottom.php";
include "template/sidebar2.php";
    // This is for calculate total feed bag of this month

    

 ?>
 
<div id="tabless">
            <h2 class="title text-center">Detail Section</h2>
  <input id="myInput22" type="text" class="form-control" style=" display: none;" placeholder="Search...">
   <table id="myTable" class="table  table-stripped col-md-12">
   
                                    
                                    <tbody id="itemdetail">
                              
                              </tbody>
                            </table> 
                            </div> 
<!-- <div id="" style="color: red; font-size: 72px;"></div> -->


	 <!-- *****************TABLE START************************ -->
				  
			
						<!-- ************************************************* -->
	<section>
		<div class="container">
			<div class="row">
				
		
				<div class="col-sm-9 padding-right">
				
					<div id="predlt" class="features_items"><!--features_items-->
						<!-- START FLOCK DETAIL -->
				
						<!-- END FLOCK DETAIL -->

						
						
					</div><!--features_items-->
						<h2 class="title text-center">End Detail Section</h2>
					
				</div>
			</div>
		</div>
	</section>
	
	<?php 
include "template/footer.php";

 ?>

<script type="text/javascript">
 $('#search').click(function(e){
  	// alert($(".dddd").val());
  	  	if($('.dddd').val()!==""){
  	var aname = $(".dddd").val();
  	         $.ajax({
        url: 'dtlflk.php',
        method: 'POST',
       data: {aname: aname},
        success: function(data){
            // $('#prate').val(data);
                $('#itemdetail').html(data);
        document.getElementById('tabless').scrollIntoView();

        }
      })
  	     }
  })
  $('#clear').click(function(e){
  $(".dddd").val("");
  })
</script>


<script type="text/javascript">
 $('#filtr').click(function(e){
  	// alert($(".dddd").val());
if($('#myInput2').val()!==""){


    var refs = $("#myInput2").val();
  	var dt = $("#period").val();
    $('#load').show();
  	         $.ajax({
        url: 'grplg.php',
        method: 'POST',
       data: {refs: refs, dt: dt},
        success: function(data){
    $('#load').hide();
    $('#myInput22').show();


                $('#itemdetail').html(data);
         document.getElementById('myInput22').scrollIntoView();


        }
      })
  	    }    
  })
 
</script>

<script>
$(document).ready(function(){
  $("#myInput22").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>


