I’m creating dynamic tabs with dynamic content by using Bootstrap in PHP Mysql. what I want to do here is, display the order_date on the nav-tab and the content of each nav-tab will be displayed by the date of the customer made their orders. The date in each nav-tab can be shown properly according to the condition set, but the content of each nav-tab does not show according to the condition set. It just displays all of the data. Can I know how can I display the content according to the condition set? Let’s say I clicked on the ‘2021-09-09’ tab, the order that is only made on this date will be shown as the content of this nav_tab. Any form of help will be appreciated. thanks in advance!
<?php
$tab_query = "SELECT id,cast(order_datetime as date) AS ordered_date , order_status FROM ordered_items GROUP BY ordered_date order by order_datetime DESC LIMIT 7";
$tab_result = mysqli_query($conn, $tab_query);
$tab_menu = '';
$tab_content = '';
$i = 0;
while($row = mysqli_fetch_array($tab_result))
{
if($i == 0)
{
$tab_menu .= '
<li class="active"><a href="#'.$row["ordered_date"].'" data-toggle="tab">'.$row["ordered_date"].'</a></li>
';
$tab_content .= '
<div id="'.$row["ordered_date"].'" class="tab-pane fade in active">
';
}
else
{
$tab_menu .= '
<li><a href="#'.$row["ordered_date"].'" data-toggle="tab">'.$row["ordered_date"].'</a></li>
';
$tab_content .= '
<div id="'.$row["ordered_date"].'" class="tab-pane fade">
';
}
$product_query = "SELECT*, cast(order_datetime as date) AS products_ordered_date , order_status FROM ordered_items
LEFT JOIN products ON ordered_items.product_id = products.id
WHERE order_datetime = '".$row["ordered_date"]."'";
$product_result = mysqli_query($conn, $product_query);
if(!mysqli_num_rows($product_result)) {
$tab_content .= '<tr>
<td colspan="5">
<div class="badge badge-danger">No Order Found</div>
</td>
</tr>';
}
while($sub_row = mysqli_fetch_array($product_result))
{
$tab_content .= '
<tr>
<td>
#'.$sub_row["order_id"].'
</td>
<td>
'.$sub_row["product_title"].'
</td>
<td>
'.$sub_row["quantity"].'
</td>
<td>
'.$sub_row["products_ordered_date"].'
</td>
<td>
'.$sub_row["delivery_date"].'
</td>
</tr>
';
}
$tab_content .= '<div style="clear:both"></div></div>';
$i++;
}
?>
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title"> All Products</h4>
<span>
<a href="download-list/download-products.php" class="btn btn-info float-right mb-3"><i class="fa fa-download" aria-hidden="true"></i> Download Products List</a>
</span>
<span>
<a href="download-list/download-products.php" class="btn btn-info float-right mb-3"><i class="fa fa-download" aria-hidden="true"></i> Download Products List</a>
</span>
</div>
<div class="card-body">
<ul class="nav nav-tabs">
<li class="nav-item">
<ul class="nav nav-tabs">
<?php echo $tab_menu; ?>
</ul>
</li>
</ul>
</div>
<div class="card-body">
<div class="table-responsive" style="max-height: 70vh">
<table class="table">
<thead class="text-primary">
<th style=" position: sticky;top: 0; background: white" ;>
Order no
</th>
<th style=" position: sticky;top: 0; background: white" ;>
Product Name
</th>
<th style=" position: sticky;top: 0; background: white" ;>
Quantity
</th>
<th style=" position: sticky;top: 0; background: white" ;>
Order Date
</th>
<th style=" position: sticky;top: 0; background: white" ;>
Recieve by
</th>
<tr>
<?php echo $tab_content; ?>
</tr>
</tbody>
</table>
</div>
</div>
