@extends('layouts.app')

@section('content')

<div class="container">
          <div class="card border border-info  mb-3 mt-4" style="width: 100%;">
              <div class="card-body">
              <div class="table-responsive-sm">
              @if($Order)
                    <table class="table">
                    <thead>
                    <tr>
                    <th scope="col">Product</th>
                    <th scope="col">image</th>
                    <th scope="col">Features</th>
                    <th scope="col">Price</th>
                    <th scope="col">Quantity</th>
                    <th scope="col">Total</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($Order->orderdetails as $item)
                    <tr>
                    <td>{{$item->product->title}}</td>
                    <td><img style="width:50px; height:50px;" src="{{asset('storage/images/products/'.$item->product->image)}}" alt=""></td>
                    @if($item->OrderProperties()->count() != 0)
                      <td>
                          @foreach($item->OrderProperties as $OrderProperty)
                          <p>{{App\ProductPropertyTypeValue::getValue($OrderProperty->property_value_id)->title}}</p>
                          @endforeach
                      </td>
                      @else
                      <td>Not mentioned</td> 
                      @endif
                    <td>@currency($item->product->sales_amount)</td>
                    <td>{{$item->quantity}}</td>
                    <td>@currency($item->total_amount)</td>
                    </tr>
                    @endforeach
                    </tbody>
                    </table>
                @endif
                </div>
              </div>
              <div class="card-body">
                <p class="float-right"><b>Total:</b><span> @currency($Order->amount)</span></p>
              </div>
            <div class="card-footer">
            <a href="{{route('previousOrders')}}"><button type="submit" class="btn btn-outline-dark">Back</button></a> 
            </div>
          </div> 
</div>

@endsection