@extends('frontend.layout.master')
@section('content')
<div class="container mt-5">
    <div class="row">
        <div class="col-md-3 text-right" style="text-align: right;">
            Order Number:
        </div>
        <div class="col-md-4">
            <input class="form-control" id="trackingNo" placeholder="Tracking No">
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-dark btn-lg btn-block" id="formSubmit">Track Your Order</button>
        </div>
        <div class="col-md-3">
        </div>
    </div>
    <table class="table table-striped table-bordered mt-4">
        <thead>
        <tr>
            <th>Order No</th>
            <th>Date</th>
            <th>Number Of Products</th>
            <th>Status</th>
        </tr>
        </thead>
        <tbody id="orderTableBody">
            
        </tbody>        
    </table>
</div>
@endsection
@push('custom-css') 
<style>
    thead{
        background:black;
        color:white;
        font-weight:bold;
    }
    .table td {
   text-align: center;   
}
.table th,td {
   text-align: center;   
}
</style>
@endpush
@push('custom-script')
<script>
    $(document).ready(function(){
        $("#formSubmit").click(function(){
            var orderId = $("#trackingNo").val();
            $('#orderTableBody').html('');
            $.ajax({
            url: '{{ route('web.trackyourordersubmit') }}', // Update with your route
            type: 'GET',
            dataType: 'json',
            data: { orderId: orderId },
            success: function(response) {
                var newRow = `<tr>
                <td>${response.order_no}</td>
                <td>${response.date}</td>
                <td>${response.number_of_products}</td>
                <td>${response.status}</td>
                </tr>`;
                $('#orderTableBody').append(newRow);
            },
                error: function(xhr, status, error) {
                    console.error("AJAX Error:", status, error); // Handle errors
                }
            }); 
        });
    });
</script>
@endpush