laravelEcomm/resources/views/orders.blade.php

<x-header />


<!-- Contact Section Begin -->
<section class="contact spad">
    <div class="container">
        <div class="row">

            <div class="col-lg-8 col-md-8 mx-auto">
                <div class="section-title">
                    <h2>My Orders</h2>
                </div>
                <div class="table-responsive">
                    <table class="table table-striped table-bordered" id="myTable">
                        <thead>
                            <tr>
                                <th>S.No.</th>
                                <th>Name</th>
                                <th>Address</th>
                                {{-- <th>Description</th> --}}
                                <th>Phone</th>
                                <th>Status</th>
                                <th>Order Date</th>
                                <th>Total Bill</th>
                                <th>View Products</th>

                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $i = 0;
                            @endphp
                            @foreach ($orders as $item)
                                @php
                                    $i++;
                                @endphp
                                <tr>
                                    <td>{{ $i }}</td>
                                    <td>{{ $item->name }}</td>
                                    <td>{{ $item->address }}</td>
                                    {{-- <td>{{ $item->description }}</td> --}}
                                    <td>{{ $item->phone }}</td>
                                    <td>{{ $item->status }}</td>
                                    <td>{{ $item->created_at }}</td>
                                    <td>{{ $item->bill }}</td>
                                    <td>
                                        <!-- Button to Open the Modal -->
                                        <button type="button" class="btn btn-primary" data-toggle="modal"
                                            data-target="#myModal{{ $i }}">
                                            View Products
                                        </button>

                                        <!-- The Modal -->
                                        <div class="modal" id="myModal{{ $i }}">
                                            <div class="modal-dialog">
                                                <div class="modal-content">

                                                    <!-- Modal Header -->
                                                    <div class="modal-header">
                                                        <h4 class="modal-title">All Products</h4>
                                                        <button type="button" class="close"
                                                            data-dismiss="modal">&times;</button>
                                                    </div>

                                                    <!-- Modal body -->
                                                    <div class="modal-body">
                                                        <table class="table">
                                                            <thead>
                                                                <tr>
                                                                    <th> Name</th>
                                                                    <th> Picture</th>
                                                                    <th> Quantity</th>
                                                                    <th> Price</th>
                                                                    <th> Total</th>


                                                            </thead>

                                                            {{-- old tbody --}}
                                                            {{-- <tbody>
                                                                @foreach ($items as $product)
                                                                    @if ($product->order_id == $item->id)
                                                                        <tr>
                                                                            <td>{{ $product->name }}</td>
                                                                            <td><img src="{{ asset('uploads/products/' . $product->picture) }}"
                                                                                    alt="" width= "100px"
                                                                                    height="100px"></td>
                                                                            <td>{{ $product->quantity }}</td>
                                                                            <td>{{ $product->price }}</td>
                                                                            <td>{{ $product->price * $product->quantity }}
                                                                            </td>
                                                                        </tr>
                                                                    @endif
                                                                @endforeach
                                                            </tbody> --}}

                                                            {{-- new tbody --}}
                                                            <tbody>
                                                                @foreach ($items as $product)
                                                                    @if ($item->id == $product->orderId)
                                                                        <tr>
                                                                            <td>{{ $product->name }}</td>
                                                                            <td><img src="{{ url::asset('uploads/products/' . $product->picture) }}"
                                                                                    class="img-fluid rounded-circle"
                                                                                    alt="" width= "100px"
                                                                                    height="100px"></td>
                                                                            <td>{{ $product->quantity }}</td>
                                                                            <td>{{ $product->price }}</td>
                                                                            <td>{{ $product->price * $product->quantity }}
                                                                            </td>



                                                                        </tr>
                                                                    @endif
                                                                @endforeach

                                                            </tbody>



                                                            <tfoot>
                                                                <tr>
                                                                    <td colspan="4" style="text-align: center;">
                                                                        <strong>Sub Total</strong>
                                                                    </td>
                                                                    <td><strong>{{ $item->bill }}</strong></td>
                                                                </tr>

                                                            </tfoot>

                                                        </table>

                                                    </div>

                                                    <!-- Modal footer -->
                                                    <div class="modal-footer">

                                                        <button type="button" class="btn btn-danger"
                                                            data-dismiss="modal">Close</button>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </td>

                                </tr>
                            @endforeach




                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>
</section>
<!-- Contact Section End -->

<!-- Footer Section Begin -->
<x-footer />
<!-- Footer Section End -->