@extends('backends.layouts.master_layout')
@section('title',"Orders")
@section('page_heading','Orders')
@section('content')

    <style>
        .orderImg {
            width: 100px;
            height: 100px;
        }
    </style>

    <div class="container-fluid">
        <div class="card">
            <div class="card-body">

                <div class="table-responsive">
                    <table class="table header-border table-responsive-sm">
                        <thead>
                        <tr>
                            <th>SL</th>
                            <th>Product ID</th>
                            <th>Title</th>
                            <th>img</th>
                            <th>weight</th>
                            <th>sales_price</th>
                            <th>quantity</th>
                            <th>total_product_price</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($orderItems as $k => $item)
                            <tr>
                                <td>{{ ($orderItems->currentPage() - 1) * $orderItems->perPage() + $loop->iteration }}</td>
                                <td>{{$item->product_id}}</td>
                                <td>{{$item->title}}</td>
                                <td>
                                    <img class="orderImg" src="{{$item->img}}" alt="{{$item->title}}">
                                </td>
                                <td>{{ $item->weight }}</td>
                                <td>{{ $item->sales_price }}</td>
                                <td>{{ $item->quantity }}</td>
                                <td>{{ $item->total_product_price }}</td>
                            </tr>
                        @endforeach

                        </tbody>
                    </table>
                    {{$orderItems->links()}}
                    <a href="{{ route('orders.index') }}" class="btn btn-primary btn-sm" style="padding: 9px 15px"><i class="fa-solid fa-arrow-left"></i> Back</a>
                </div>
            </div>
        </div>
    </div>

@endsection