<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>
<script src="restriction/vehicle_restriction.js"></script>
<style>
    
    #navbar 
    {
        flex:15%;
        height:100%; 
        flex-direction:row;

        
    }
    #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;
}
.col-sm-3
{
  display:flex;
  }
input[type="text"]
{
    height:30px;
    min-width:40%;
    margin-left:3px;
}
select
{
    height:35px;
    /* padding-bottom:8px; */
}
.cftTable
{
  width:100%;
  line-height:40px;
  margin-bottom:10px;
  text-align:center;
  border:1px solid lightgrey;
}
.cftTable td,th
{
  text-align:center;
  border:1px solid lightgrey;
}
.required
{
   border-radius:3px;
   outline:none;
   border:1px solid lightgrey;
   padding:5px;
}
.required:focus
{
  border-color:skyblue;
  box-shadow:2px 1px 2px 2px skyblue;
}
    @media (max-width: 800px) {
        #fullbody
    {
        display:flex;
        flex-wrap: wrap;
                 
    }
        #navbar,#content {
    flex: 100%;
  }
}
</style>
<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>CFT Calculation</h3>
<br>

<!-- table -->
<div>
  <!-- tab for rate -->
  
  <!-- Tab panes -->
 
    <!--  -->
    
    <!-- entrydiv -->
    
    <!-- enter the entry list -->
    <form action="update_cft.php" method="post">
    <!-- enter the entry list -->

    <div class="row">
      <div class="col-sm-1"></div>
      <div class="col-sm-2"><label>Vehicle No:</label></div>
      <div class="col-sm-3"><input class=" required" placeholder="Vehicle No" id="vehicleNo" readonly value="<?php echo $_GET['vehicle']?>"></input></div>
      <div class="col-sm-2"><label>Chakka Type:</label></div>
      <div class="col-sm-3"><input class=" required" placeholder="Chakka Type" id="chakka"></input></div>
    </div>
    <br>
    <div class="row">
      <div class="col-sm-1"></div>
      <div class="col-sm-2"><label>Length:</label></div>
      <div class="col-sm-3"><input type="text" class="required" placeholder="Length" id="length" autocomplete="off"></input> <input type="text" class="required" placeholder="Length" id="lengthTwo" autocomplete="off"></input></div>
      <div class="col-sm-2"><label>Width:</label></div>
      <div class="col-sm-3"><input type="text" class="required" placeholder="Width" id="width" autocomplete="off"></input><input type="text" class="required" placeholder="Width" id="widthTwo" autocomplete="off"></input></div>
    </div>
    <br>
    <div class="row">
      <div class="col-sm-1"></div>
      <div class="col-sm-2"><label>Height:</label></div>
      <div class="col-sm-3"><input type="text" class="required" placeholder="Height" id="height" autocomplete="off"></input><input type="text"class="required" placeholder="Height" id="heightTwo" autocomplete="off"></input></div>
      <div class="col-sm-2"><label>CFT:</label></div>
      <div class="col-sm-3"><input type="text" class="required" placeholder="CFT" id="cft" readonly autocomplete="off"></input></div>
      <div class="col-sm-1"><label>In FT<sup>3</sup></label></div>
    </div>
        <br>
    <div class="row">
      <div class="col-sm-1"></div>
      <div class="col-sm-2"><label>In Unit:</label></div>
      <div class="col-sm-3"><input class=" required" placeholder="unit" id="unit" readonly></input></div>
      <div class="col-sm-2"><input type="button" class="btn btn-primary"  style="float:left;margin-left:10px;height:40px;" id="addCft" value="Add"></div>
     
    </div>
    <br>
    <table class="cftTable">
      <thead>
        <tr>
          <th>Vehicle</th>
          <th>Chakka</th>
          <th>Lgt</th>
          <th>wdt</th>
          <th>hgt</th>
          <th>CFT</th>
          <th>Unit</th>
          <th>Delete</th>
        </tr>
      </thead>
      <tbody id="cftTbody">
      <?php 
      $vehicleno = $_GET['vehicle'];
      $fetch_cft = mysqli_query($connect,"select  * from cftdetails where vehicleno='$vehicleno'&& status!='deleted'");
     while($cft_dis=mysqli_fetch_array($fetch_cft))
     {?>
     <tr><td><?php echo $cft_dis['vehicleno'] ?><input type="hidden" class="vehicle" name="vehicleno[]" value="<?php echo $cft_dis['vehicleno'] ?>"></td><td><?php echo $cft_dis['chakka'] ?><input type="hidden" class="chakkaType" name="chakka[]" value="<?php echo $cft_dis['chakka'] ?>"></td><td><?php echo $cft_dis['length'] ?><input type="hidden"  name="length[]" value="<?php echo $cft_dis['length'] ?>"></td><td><?php echo $cft_dis['width'] ?><input type="hidden"  name="width[]" value="<?php echo $cft_dis['width'] ?>"></td><td><?php echo $cft_dis['height'] ?><input type="hidden" name="height[]" value="<?php echo $cft_dis['height'] ?>"></td><td><?php echo $cft_dis['cft'] ?><input type="hidden"  name="cft[]" value="<?php echo $cft_dis['cft'] ?>"><input type="hidden"  name="date[]" value="<?php echo $cft_dis['date'] ?>"><input type="hidden"  name="time[]" value="<?php echo $cft_dis['time'] ?>"></td><td><?php echo $cft_dis['unit'] ?><input type="hidden" name="unit[]" value="<?php echo $cft_dis['unit'] ?>"></td><td><i class="fas fa-trash-alt dele"></i></td></tr>
     <?php }?>
        
      </tbody>
    </table>
    <input type="button" class="btn btn-success" data-toggle="modal" data-target="#addpro" style="float:left;margin-left:10px;height:40px;" value="Submit">
<br><br>
            <!-- entry div over  -->
        </div>
                <!-- modal for add confirm -->
<div class="modal fade" id="addpro">
    <div class="modal-dialog modal-sm">
      <div class="modal-content" style="background-color:rgba(77, 219, 106,0.9)">
      
        <!-- Modal Header -->
        
        
        <!-- Modal body -->
        <div class="modal-body">
          <span style="color:white"><i class="fas fa-check" style="font-size:24px"></i> CFT Have Been Updated Successfully</span>
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="submit" type="button" class="btn btn-warning" >Ok</button>
        </div>

      </div>
    </div>
  </div>
</form>
<!-- modal for add confirm -->
        <!--overall entry div over  -->
        
        
    </div>
   <!--  -->


  <!-- tab for rate -->
</div>
<!-- tab for entry area-->




<!-- main-content-div -->
</div>
<!-- main-content-div -->
</div>
<!-- modal to blockdate -->
<button type="button" class="btn btn-primary" id="alertUser" data-toggle="modal" data-target="#advanceLimit" style="display:none">
      </button>

  <!-- The Modal -->
  <div class="modal fade" id="advanceLimit">
    <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>Vehicle No Already Exist</strong>
  </div>
  </div>
  </div>
        
<!-- alert -->
<script>
    $('.selectpro').select2({ width: '100%',height:'420px;' });
    
</script>
<script src="restriction/cft.js"></script>
</body>