Execute foreach loop on clicking a button in laravel-CodePudding

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.