<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>
<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;
    }
    
    @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>Delivery-Master</h3>
<br>
<input type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" style="float:right;margin-right:10px;" value="+ Add">
<br><br>
<!-- table -->
<div>
<table class="table table-bordered table-hover " style="border:1px solid lightgrey" id="protable">
    <thead class="table-warning">
<tr>
    <th>Code</th>
    <th>Delivery Site</th>
    <th>Roc Number</th>
    <th>Site</th>
    <th>Edit</th>
    <th>Delete</th>
</tr>

    </thead>
    <tbody>
        <tr>
        <td>Code</td>
    <td>Customer Name</td>
    <td>Product Name</td>
    <td>Rate</td>
            <td><a data-toggle="modal" data-target="#editprd-1"><i class="fas fa-edit edit"></i></a></td>
            <td><a data-toggle="modal" data-target="#prd-1"><i  class="fas fa-trash-alt dele"></a></i></td>
        </tr>
        
    </tbody>



</table>
</div>
<!-- modal -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Add Rate</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
            <!--  -->
          <div class="row">
              <div class="col-sm-3"><label>Vehicle Number</label></div>:
              <div class="col-sm-6"><input type="text" class="form-control" autocomplete="off" name="Vehicle" placeholder="Number"></div>
              
            </div><br>
            <!--  -->
            <div class="row">
              <div class="col-sm-3"><label>Empty-Weight</label></div>:
              <div class="col-sm-6"><input type="text" class="form-control" autocomplete="off" name="hsn" placeholder="Empty-weight"></div>
            </div><br>
            
            <!--  -->
            
            <div class="row">
              <div class="col-sm-3"><label>Company Name</label></div>:
              <div class="col-sm-6">
                
                <select class=" selectpro" name="companyname">
                  <option>--Choose Vehicle--</option>
                </select>
              </div>
            </div><br>
            <!--  -->
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button  class="btn btn-success" data-toggle="modal" data-target="#addpro" >Add</button>
        </div>
        <!-- modal for add -->
<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> Vehicle Have Been Created Successfully</span>
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="submit" type="button" class="btn btn-warning" >Ok</button>
        </div>
        
      </div>
    </div>
  </div>
  
<!-- modal for add -->
      </div>
    </div>
  </div>
<!-- modal -->
<!-- modal for edit -->
<div class="modal fade" id="editprd-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Edit Vehicle</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
            <!--  -->
          <div class="row">
              <div class="col-sm-3"><label>Vehicle Number</label></div>:
              <div class="col-sm-6"><input type="text" class="form-control" autocomplete="off" name="Vehicle" placeholder="Number"></div>
              
            </div><br>
            <!--  -->
            <div class="row">
              <div class="col-sm-3"><label>Empty-Weight</label></div>:
              <div class="col-sm-6"><input type="text" class="form-control" autocomplete="off" name="hsn" placeholder="Empty-weight"></div>
            </div><br>
            
            <!--  -->
            
            <div class="row">
              <div class="col-sm-3"><label>Company Name</label></div>:
              <div class="col-sm-6">
                <select class="form-control selectpro" name="companyname">
                  <option>--Choose Vehicle--</option>
                </select>
              </div>
            </div><br>
            <!--  -->

        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button  class="btn btn-success"data-toggle="modal" data-target="#editpro" >Update</button>
        </div>
        <!-- modal for add -->
<div class="modal fade" id="editpro">
    <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> Vehicle 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>
  
<!-- modal for add -->
      </div>
    </div>
  </div>
<!-- modal for edit -->
<!-- modal for delete -->
<!-- The Modal -->
<div class="modal fade" id="prd-1">
    <div class="modal-dialog modal-sm">
      <div class="modal-content" style="background-color:rgba(247, 2, 80,0.9)">
      
        <!-- Modal Header -->
        
        
        <!-- Modal body -->
        <div class="modal-body" >
         Are You Sure Want To Delete !.
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
        <a href="#?dele=1"><button type="button" class="btn btn-success" data-dismiss="modal">Yes</button></a>
          <button type="button" class="btn btn-warning" data-dismiss="modal">No</button>
        </div>
        
      </div>
    </div>
  </div>
<!-- ,odal for delete -->
<!-- table -->


<!-- main-content-div -->
</div>
<!-- main-content-div -->
</div>
<script>
    $('.selectpro').select2({ width: '100%' });
    
</script>

</body>