@extends('layouts.backend.app')
      @section('content')

      <div class="main-panel">
        <div class="content-wrapper">
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">Order Details</h4>
              <div class="row">
                <div class="col-12">

                  <div class="table-responsive">
                    <table id="order-listing" class="table">
                      <thead>
                        <tr>
                        <table id="orderTable" class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Product Image</th>
                                    <th>Product Name</th>
                                    <th>Qty</th>
                                    <th>Price</th>
                                    <th>Total</th>
                                </tr>
                            </thead>
                               <tbody>
                                    @foreach($orderItems as $index => $item)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td><img src="{{ asset('uploads/products/' . $item->product->image) }}" width="50"></td>
                                        <td>{{ $item->product->name }}</td>
                                        <td>{{ $item->quantity }}</td>
                                        <td>{{ number_format($item->price, 2) }}</td>
                                        <td>{{ number_format($item->quantity * $item->price, 2) }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                        </table>
                        <h4>Shipping Details</h4>
                        <table class="table table-striped">
                            <tr><th>Name</th><td>{{ $order->shipping_name }}</td></tr>
                            <tr><th>Email</th><td>{{ $order->shipping_email }}</td></tr>
                            <tr><th>Phone</th><td>{{ $order->shipping_phone }}</td></tr>
                            <tr><th>Address</th><td>{{ $order->shipping_address }}</td></tr>
                            <tr><th>City</th><td>{{ $order->shipping_city }}</td></tr>
                            <tr><th>State</th><td>{{ $order->shipping_state }}</td></tr>
                            <tr><th>Zip</th><td>{{ $order->shipping_zip }}</td></tr>
                            <tr><th>Country</th><td>{{ $order->shipping_country }}</td></tr>
                        </table>
                        <h4>Payment Information</h4>
                        <table class="table table-bordered">
                            <tr><th>Transaction ID</th><td>{{ $payment->transaction_id ?? '-' }}</td></tr>
                            <tr><th>Payment Method</th><td>{{ $payment->method ?? '-' }}</td></tr>
                            <tr><th>Status</th><td>{{ $payment->status ?? '-' }}</td></tr>
                        </table>

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

     <script>
        $(document).ready(function() {
            $('#orderItemsTable').DataTable();
        });
    </script>
      @endsection