I wish if I click button Today then loop related to today would be displayed and if the button month is clicked then foreach loop for month should be displayed.
Here is my controller:
public function render()
{
$this->today=Order_Detail::whereDate('created_at', Carbon::today())->get();
$this->todaySale=Order_Detail::whereDate('created_at', Carbon::today())->sum('amount');
$this->month=Order_Detail::whereMonth('created_at', date('m'))->get();
$this->montlySale=Order_Detail::whereMonth('created_at', date('m'))->sum('amount');
return view('livewire.order');
}
Here is my order.blade.php code:
<!-- Today -->
<div >
<div >
<div >
<div >
<div ><h4 style="float:left">Recent Orders</h4>
</div>
<div >
<Table >
<div style="float:right">
<button type="button" onclick="" id="today" >Today</button>
<button type="button" onclick="" id="today" >Month</button>
</div>
<tbody>
<thead>
<tr>
<th>Product id</th>
<th>Order Id</th>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Total Amount</th>
<th>Discount</th>
<th>Date and Time</th>
</tr>
</thead>
<div id="todayTag">
<label for="">Total Sale Today {{$todaySale}}</label>
@foreach($today as $today)
<tr>
<td>{{$today->product_id}}</td>
<td>{{$today->order_id}}</td>
<td>{{$today->product->product_name}}</td>
<td>{{$today->quantity}}</td>
<td>{{$today->unitprice}}</td>
<td>{{$today->amount}}</td>
<td>{{$today->discount}}</td>
<td>{{$today->created_at}}</td>
<td></td>
</tr>
@endforeach
</div>
<div id="monthTag">
<label for="">Total Sale by Month {{$montlySale}}</label>
@foreach($month as $month)
<tr>
<td>{{$month->product_id}}</td>
<td>{{$month->order_id}}</td>
<td>{{$month->product->product_name}}</td>
<td>{{$month->quantity}}</td>
<td>{{$month->unitprice}}</td>
<td>{{$month->amount}}</td>
<td>{{$month->discount}}</td>
<td>{{$month->created_at}}</td>
<td></td>
</tr>
@endforeach
<div>
<tbody>
</Table>
</div>
</div>
</div>
</div>
</div>
Please suggest a way to put my loops inside of my buttons? through livewire, javascript or any? I have searched a lot but couldn't do it.
CodePudding user response:
Presuming there's no table displayed by default and that you have to click a button first before showing one, I suggest you remove the Today
and Month
buttons from the table and put it right after the card-body
div and right before your table, like this:
<div >
<button type="button" onclick="document.getElementById('todayTable').style.display ='block'; document.getElementById('monthTable').style.display ='none';" id="today">Today</button>
<button type="button" onclick="document.getElementById('todayTable').style.display ='none'; document.getElementById('monthTable').style.display ='block';" id="month">Month</button>
<table >
As for your tables, you can do it like this:
// Today Table
<table id="todayTable" style="display: none;">
<tbody>
<thead>
<tr>
<th>Product id</th>
<th>Order Id</th>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Total Amount</th>
<th>Discount</th>
<th>Date and Time</th>
</tr>
</thead>
<label for="">Total Sale Today {{$todaySale}}</label>
@foreach($today as $today)
<tr>
<td>{{$today->product_id}}</td>
<td>{{$today->order_id}}</td>
<td>{{$today->product->product_name}}</td>
<td>{{$today->quantity}}</td>
<td>{{$today->unitprice}}</td>
<td>{{$today->amount}}</td>
<td>{{$today->discount}}</td>
<td>{{$today->created_at}}</td>
<td></td>
</tr>
@endforeach
</tbody>
</table>
// Month Table
<table id="monthTable" style="display: none;">
<tbody>
<thead>
<tr>
<th>Product id</th>
<th>Order Id</th>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Total Amount</th>
<th>Discount</th>
<th>Date and Time</th>
</tr>
</thead>
<label for="">Total Sale by Month {{$montlySale}}</label>
@foreach($month as $month)
<tr>
<td>{{$month->product_id}}</td>
<td>{{$month->order_id}}</td>
<td>{{$month->product->product_name}}</td>
<td>{{$month->quantity}}</td>
<td>{{$month->unitprice}}</td>
<td>{{$month->amount}}</td>
<td>{{$month->discount}}</td>
<td>{{$month->created_at}}</td>
<td></td>
</tr>
@endforeach
<div>
</tbody>
</table>
With this, tables show and hide according to the button clicked.