<?php require_once('header.php'); ?>

<section class="content-header" style="padding: 8px 15px 8px 15px;">
    <div class='box-body' style="margin: 0px 0px;box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;background-color: white;">
    <div class="row" style="padding-left: 10px;padding-right: 10px;">
    			<div class="col-md-5" id="awb-scan">
    			    <div class="search-box">
    			        <label>Scan AWB Number</label>
    				<input placeholder="Scan Awb Number 100016 100014 or 100016,100014" type="text" value="100016" class="form-control" name="awb_scan" id="awb_scan" style="border-radius: 20px;background: cornsilk;"> 
    			    </div>
    			    </div>
    			<div class="col-md-6" style="text-align: right;"> 
        		    <a href="booking-list.php" class="btn btn-primary btn-sm"><i class="fa fa-arrow-left"></i> Back to Shipment List</a>
        		</div>
    </div>
   </div> 
    
        
  <div class='box-body' style="margin: 0px 0px;box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;background-color: white;margin: 10px 0px;" id="content_div">  
    
  </div>
	
	
	
	

 </div> 
    
</section>
<?php require_once('footer.php'); ?>

<script>
    $(document).ready(function() {
        $("#awb_scan").on("keypress", function(event) {
            if (event.which === 13) { // Check if Enter key is pressed
            
            //$("#content_div").empty();
                event.preventDefault();
                var awbNumber = $(this).val();

                if (awbNumber.trim() !== "") {
                    $.ajax({
                        url: "custom-api/volumetrix-ui.php", 
                        type: "POST",
                        data: { awb_scan: awbNumber },
                        success: function(response) {
                            $("#content_div").append(response);
                            $("#awb_scan").val(""); // Clear input after fetching
                        },
                        error: function() {
                            alert("Error fetching AWB data.");
                        }
                    });
                }
            }
        });
    });
    
    

</script>







<style>
    .search-box{
        font-size: 14px;
    }
    .search-box {
        padding: 0px 10px;
        font-size: 14px;
    }
    .result{
        position: absolute;        
        z-index: 999;
        top: 89%;
        left: 0;
    }
    .search-box, .result{
        width: 100%;
        box-sizing: border-box;
    }
    /* Formatting result items */
    .result div{
        margin: 0;
        background: #d4d4d4;
        padding: 1px 5px;
        border: 1px solid #CCCCCC;
        border-top: none;
        cursor: pointer;
        margin-top: 0px;
    }
    .result div:hover{
        background: #00a65a;
        color: white;
        padding:0px;
        font-weight:800;
    }
    .delete:hover{
        background: red;
        color: white;
        padding:5px;
        font-weight:800;
    }
</style>