<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="datatable/data.css">
<script src="datatable/data.js" type="text/javascript"></script>
<script src="datatable/table.js" type="text/javascript"></script>
<script src="datatable/datatable.js"></script>
<link rel="stylesheet" href="datatable/data-boot.css">
<link href="javascript/select2.css" rel="stylesheet" >
<script src="javascript/selectt2.js"></script>
<link rel="stylesheet" href="calendar-15/calendar-15/fonts/icomoon/style.css">

<link rel="stylesheet" href="calendar-15/calendar-15/css/rome.css">
<link rel="stylesheet" href="calendar-15/calendar-15/css/style.css">
<style>
    
    #navbar
    {
        flex:15%;
        height:100%; 
        flex-direction:row;
        overflow:auto;
        
    }
    #content
    {
        flex:90%;
        overflow:auto;
        padding-left:10px;
        padding-right:10px;
    }
    #fullbody
    {
        display:flex;
        
         height:100%;         
    }
    label
    {
      font-size:20px;
    }
    .edit
    {
        font-size:18px;
        color:green;
        cursor:pointer;
    }
    .dele
    {
        font-size:18px;
        color:red;
        cursor:pointer;
    }
    .edit:hover
    {
        font-size:20px;
        
    }
    .dele:hover
    {
        font-size:20px;
        color:red;
        cursor:pointer;
        
    }
    td
    {
      text-align:center;
      padding:8px;
     border:1px solid rgba(24, 7, 173); 
      background-color:#FFFFE0;
      color:black;
    }
    th
    {
      background-color:rgba(24, 7, 173);
      text-align:center;
      padding:8px;
     border-bottom:1px solid #FFFFE0; 
     color:#FFFFE0;
    }
    li a 
    {
      color:black;
    }
    .page-item.active .page-link {
    
    background-color:yellow;
    border-color: #007bff;
}

.searchfeilds input
{
height:30px;
}
    @media (max-width: 800px) {
        #fullbody
    {
        display:flex;
        flex-wrap: wrap;
                 
    }
        #navbar,#content {
    flex: 100%;
  }
}
</style>
<script>
  $(function () {

// INITIALIZE DATEPICKER PLUGIN
$('.datepicker').datepicker({
    clearBtn: true,
    format: "dd/mm/yyyy"
});


// FOR DEMO PURPOSE
$('#reservationDate').on('change', function () {
    var pickedDate = $('input').val();
    $('#pickedDate').html(pickedDate);
});
});

</script>
<script>
$(document).ready( function () {
    $('#protable').DataTable();
} );
</script>

</head>
<body>
    
    <div id="fullbody"> 
<div id="navbar" class="bg-info"><?php include "navbar.php"?></div>
<div id="content">
<br>
<h3>Age-wise Report</h3>
<br>
<button type="button" style="margin-left:40%;" class="btn btn-primary" data-toggle="collapse" data-target="#searchdiv"><i class="fas fa-filter"></i> &nbsp To Filter</button>
<!-- search collaspe -->
  <div id="searchdiv" class="collapse">
      <!-- search -->
      <br>
  <div class="row searchfeilds">
    <div class="col-sm-1"></div>

 <div class="col-sm-3">
<select class="selectpro" id="customer">
    <option value="0">--Select Customer--</option>
<?php 
$cus=mysqli_query($connect,"select * from customerdetails where status !='deleted'");
while($cusshow = mysqli_fetch_array($cus))
{
?>
<option value="<?php echo $cusshow['code'] ?>"><?php  echo $cusshow['name'] ?></option>
        <?php }?>         
</select>

</div>
   <!-- <div class="col-sm-2">
    <select class="selectpro" id="product">
    <option value="01">--Select Product--</option>
    <?php 
$cus=mysqli_query($connect,"select * from productdetail where status !='deleted'");
while($cusshow = mysqli_fetch_array($cus))
{
?>
<option value="<?php echo $cusshow['productcode'] ?>"><?php  echo $cusshow['productname'] ?></option>
        <?php }?>        
</select>
    </div> -->
    <!-- <div class="col-sm-3">
    <select class="selectpro" id="shift">
    <option value="0">--Select Shift--</option>
    <option value="1">Day</option>
    <option value="2">Night</option>
</select></div> -->
    
           <!-- <div class="col-sm-3">
                <input type="text" class="form-control" id="input_from" autocomplete="off" placeholder="Start Date"></div>
                <div class="col-sm-3">
                            
                <input type="text" class="form-control" id="input_to" autocomplete="off" placeholder="To Date">
              </div> -->
              <div class="col-sm-3"><button class="btn btn-info" id="calender"><i class="fas fa-calendar-check" style="font-size:23px;"></i></button></div>
</div><br>
<!-- search -->
  </div><br><br>

<!-- date -->
<!-- Date Picker Input -->
<!-- search ollapse  -->

<div>
   
   <div id="keyupresult" class="container-fluid" style="border:2px solid yellow;padding:15% 20% 15% 25%;background-color:lightyellow">
       <h4> Please Filter Using Above Button To Fetch Reports </h4>
</div>
<!-- date -->
<div>
    <br>
   
<!-- modal -->
<button type="button" class="btn btn-primary" style="display:none" data-backdrop="static" id="modaldis" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal fade" id="myModal" >
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Agewise-Report</h4><input type="button" class="btn btn-primary" id="excel"value="Excel" style="float:right;margin-left:850px">
          <button type="button" class="close" onclick="window.location.reload();" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
        <?php 
               $proedit=mysqli_query($connect,"select * from partydetail order by id desc");
               while($proshowedi = mysqli_fetch_array($proedit))
               {
                 $party=  $proshowedi['party'];
               }
               
               ?>
         <!-- data entry -->
         <div id="fullreport" class="reportModal">
         <div  id="tbodyReport">
                <div class="spinner-border text-primary" style="margin-left:45%;margin-top:20%;margin-bottom:20%;padding:3%"></div>
         </div>
         </div>
         <!-- data entry -->
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
<!-- modal -->
<!-- table for report -->
</div>

<script>
    $('.selectpro').select2({ width: '100%',height:'420px;' });
    
</script>
<script src="calendar-15/calendar-15/js/rome.js"></script>

<script src="calendar-15/calendar-15/js/main.js"></script>
<script src="js/jsontoexcel.js"></script>
<script src = "js/form_table.js"></script>
<script src = "js/agereport.js"></script>


</body>
</html>