
<?php
 
  require 'connection.php';

include "template/headertop.php";

?>

<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#">
  <!-- <label>Select</label>  -->
  <select style="width: auto;" id="period" class="form-">
    <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>
  <input type="date" name="" id="datebox">
  <input class="form-control" id="myInput" type="text" placeholder="Search Customer Name..">
  

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

                        $qry = "SELECT  * FROM accreg ";

             $run = mysqli_query($connect, $qry) or die(mysqli_error($connect));
    while($row = mysqli_fetch_array($run)){
      $id=$row['accid']*253*253;
?>
                             
    <li value="<?php echo $id;?>" class="list-group-item"><?php echo $row['accname'];?></li>
      <?php } ?>
   
  </ul> 

  <input type="text" name="" id="mybox" style="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>
  
   <table 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()!==""){

if($('#mybox').val()==""){
    var refs = $("#myInput2").val();
  	var dt = $("#period").val();
  	         $.ajax({
        url: 'custlg.php',
        method: 'POST',
       data: {refs: refs, dt: dt},
        success: function(data){
                $('#itemdetail').html(data);
         document.getElementById('itemdetail').scrollIntoView();

        }
      })
}

  else{

    var refs = $("#myInput2").val();
    var dt = 10;
    var dt2 = $("#datebox").val();
             $.ajax({
        url: 'custlg.php',
        method: 'POST',
       data: {refs: refs, dt: dt, dt2: dt2},
        success: function(data){
                $('#itemdetail').html(data);
         document.getElementById('itemdetail').scrollIntoView();

        }
      })
      }    
  	    }  // 1st if end 
  })
 
</script>
<script type="text/javascript">
 $('#datebox').click(function(e){
    $('#mybox').val(1);
  })
 
</script>
<script type="text/javascript">
 $('#period').click(function(e){
    $('#mybox').val("");
  })
 
</script>
 <script type="text/javascript">
    var today = new Date();

document.getElementById("datebox").value = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2);

 </script>

