<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">
<script src = "ajax/deletereport.js"></script>
<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;
    }
    th
    {
      text-align:center;
    }
    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 ><?php include "navbar.php"?></div>
    <div id="fullbody"> 
<div id="content">
<br>
<h3>Delete 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><br>
<!-- search collaspe -->
  <div id="searchdiv" class="collapse">
     <br> <!-- search -->
  <div class="row searchfeilds">
<div class="col-sm-1"></div>
  <div class="col-sm-3">
                <select class="selectpro" id="reporttype">
                    <option value="0">--Select Report Type--</option>
                    <option value="1">Cancel</option>
                    <option value="2">Delete</option>
                </select></div>
           <div class="col-sm-3">
                <input type="text" class="form-control" id="input_from" placeholder="Start Date"></div>
                <div class="col-sm-3">
                            
                <input type="text" class="form-control" id="input_to" placeholder="To Date">
              </div>
              <div class="col-sm-1"><button class="btn btn-info" id="calender"><i class="fas fa-calendar-check" style="font-size:23px;"></i></button></div>
</div>
<!-- search -->
  </div>
<br>
<!-- date -->
<!-- Date Picker Input -->
<!-- search ollapse  -->

<!-- date -->
<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>
</div>
<!-- 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">Report</h4>
          <button type="button" class="close" onClick="window.location.reload();" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
         <!-- data entry -->
         <div id="fullreport">
         <div class="spinner-border text-primary" style="margin-left:45%;margin-top:20%;margin-bottom:20%;padding:3%"></div>
         </div>
         <!-- data entry -->
        </div>
        
        <!-- Modal footer -->
        
        
      </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>

</body>
</html>