<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/loadoutreport1.js"></script>
<script src = "ajax/loadoutreport2.js"></script>
<script src = "ajax/loadoutreport3.js"></script> -->
<script src="js/loadoutreport.js"></script>
<style>
    
    #navbar
    {
        flex:15%;
        height:100%; 
        flex-direction:row;
        overflow:auto;
        
    }
    #content
    {
        flex:90%;
        overflow:auto;
        padding-left:5px;
        padding-right:5px;
    }
    #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;
}
.reportModal
{
  height:800px;
}
.searchfeilds input
{
height:30px;
}
.daterow
{
  margin-top:10px;
}
    @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>Load Out 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 container-fluid">
      <!-- search -->
      <br>
  <div class="row searchfeilds" >
  <div class="col-sm-1"></div>  
  <div class="col-sm-1"></div> 
  <!-- <div class="col-sm-2">
<select class="selectpro" id="customertype">
    <option value="0">--Select Customer Type--</option>
<option>cash</option> 
<option>credit</option>  
<option>contract</option>
</select>

</div> -->

<div class="col-sm-2">
<select class="selectpro" id="customer">
    <option value="">--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="">--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="vehicle">
    <option value="">--Select Vehicle--</option>
<?php 
$cus=mysqli_query($connect,"select distinct vehicleno from second_transaction where status !='deleted'
union
select distinct vehicleno from second_transaction_est where status !='deleted'
union
select distinct vehicleno from purchasedetails where status !='deleted'
union
select distinct vehicleno from single_transaction where status !='deleted'");
while($cusshow = mysqli_fetch_array($cus))
{
?>
<option value="<?php echo $cusshow['vehicleno'] ?>"><?php  echo $cusshow['vehicleno'] ?></option>
        <?php }?>         
</select>

</div>
</div>
<!-- date -->
<div class="row daterow" style="overflow:auto">  
                <div class="col-sm-2"></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>
            <!-- date-->
            <!-- date -->
            <div class="row daterow" style="overflow:auto">  
                <div class="col-sm-2"></div>
           <div class="col-sm-3">
                <input type="text" class="form-control" value="00:00:00" id="timefrom" placeholder="Start Date"></div>
                <div class="col-sm-3">
                            
                <input type="text" class="form-control" value="23:59:59" id="timeto" placeholder="To Date">
              </div>
              
              <!-- <div class="col-sm-1"><button class="btn btn-info" id="calender2"><i class="fas fa-calendar-check" style="font-size:23px;"></i></button></div> -->
              
            </div>
            <!-- date-->
<!-- tkt -->
<div class="row daterow" style="overflow:auto">  
                <div class="col-sm-2"></div>
                <div class="col-sm-3">
                <select class="selectpro" name="modetrans" id="modeTrans">
    <option value="">--Select Mode--</option>
    <option value="cash">Cash</option>
    <option value="credit">Credit</option>
    <option value="donation">Donation</option>
    <option value="purchase">Purchase</option>
  </select></div>
           <div class="col-sm-3">
           <select class="selectpro" id="tktfrom">
    <option value="">--Select Ticket--</option>
    <?php 
$cus=mysqli_query($connect,"select ticket from second_transaction where status !='deleted'
union
select ticket from single_transaction where status !='deleted'
");
while($cusshow = mysqli_fetch_array($cus))
{
?>
<option value="<?php echo $cusshow['ticket'] ?>"><?php  echo $cusshow['ticket'] ?></option>
        <?php }?>        
</select></div>
                <!-- <div class="col-sm-3">
                            
                <select class="selectpro" id="tktto">
    <option value="02">--Select Ticket--</option>
    <?php 
// $cus=mysqli_query($connect,"select ticket from second_transaction where status !='deleted'
// union
// select ticket from single_transaction where status !='deleted'");
// while($cusshow = mysqli_fetch_array($cus))
// {
?>
<option value="<?php //echo $cusshow['ticket'] ?>"><?php // echo $cusshow['ticket'] ?></option>
        <?php// }?>        
</select>
              </div> -->
              
              <!-- <div class="col-sm-1"><button class="btn btn-info" id="calender3"><i class="fas fa-calendar-check" style="font-size:23px;"></i></button></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>
            <!-- tkt -->
            
<!-- search -->
  </div>

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

<!-- date -->
<div>
    <br>
    <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>
<!-- 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><input type="button" class="btn btn-primary" id="excel"value="Excel" style="float:right;margin-left:900px">
          <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" class="reportModal">
         <br><br>
           <table>
             <thead>
               <?php 
               $proedit=mysqli_query($connect,"select * from partydetail order by id desc");
               while($proshowedi = mysqli_fetch_array($proedit))
               {
                 $party=  $proshowedi['party'];
               }
               
               ?>
               <tr align="center"><th colspan="26"><?php echo $party ?></th></tr>
               <tr align="center"><th colspan="26">Load Out Report</th></tr>
               <tr>
                 <th>Sno</th>
                 <th>Ticket</th>
                 <th>TripNo</th>
                 <th>Customer</th>
                 <th>Product</th>
                 <th>VehicleNo</th>
                 <th>Chakka</th>
                 <th>Delivery</th>
                 <th>EntryDate</th>
                 <th>EntryTime</th>
                 <th>EmptyWeight</th>
                 <th>ExitDate</th>
                 <th>ExitTime</th>
                 <th>LoadWeight</th>
                 <th>NetWeight</th>
                 <th>Capacity</th>
                 <th>NetQty</th>
                 <th>QtyAdjed</th>
                 <th>Price</th>
                 <th>Priceori</th>
                 <th>Totalamount</th>
                 <th>Mode</th>
                 <th>Adj</th>
                 <th>AdjKg</th>
				 <th>driver Batta</th>
                 <th>Employee</th>
                 <th>Remarks</th>
               </tr>
             </thead>
             <tbody id="tbodyReport">

             </tbody>
           </table>
         <div class="spinner-border text-primary spindiv" style="margin-left:45%;margin-top:20%;margin-bottom:20%;padding:3%"></div>
         </div>
         <!-- data entry -->
        </div>
        
        <!-- Modal footer -->
        
        
      </div>
    </div>
  </div>
  <!-- alert5 for ticket-->
<button type="button" style="display:none" class="btn btn-primary alertbuttontkt"  data-toggle="modal" data-target="#Modal">
      </button>

  <!-- The Modal -->
  <div class="modal fade" id="Modal">
    <div class="modal-dialog modal-lg">
     <div class="alert alert-danger alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong> From Ticketno Should Be Greater Than To Ticketno</strong>
  </div>
  </div>
        </div>
<!-- alert -->
<!-- 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>
</body>
</html>