@extends('layouts.app')

@section('content')

<section class="my_order_detai_sec">
         <div class="container">
            <div class="order-wrapper">
            <button class="back-btn" onclick="history.back()">← Back </button>
             <div class="row">
             <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
             <div class="order_detai_head">
             <h3>Order <span>#{{ $order->order_number }}</span></h3>
             <small>Placed on {{ $order->created_at->format('d M Y') }}</small>
             </div>    
             </div>
             <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                 <div class="order_details_statu">
                    <div class="status processing">Processing</div>
                </div>
                 </div> 
             </div>
             <div class="tracking">
              <div class="step active">
                 <div class="circle"></div>
                 <span>Placed</span>
              </div>
              <div class="step active">
                 <div class="circle"></div>
                 <span>Processing</span>
              </div>
              <div class="step">
                 <div class="circle"></div>
                 <span>Shipped</span>
              </div>
              <div class="step">
                 <div class="circle"></div>
                 <span>Delivered</span>
              </div>
              </div>
             
        
            <div class="order_detail_items_box">
            <h3>Ordered Items</h3>
            <div class="row">
            @foreach($order->items as $item)
                        <div class="col-xl-12 col-lg-12">
              <div class="product">
              <div class="product_de_img">
              <img src="{{ asset('storage/' . $item->product->primary_image) }}" alt="">
              </div>
              <div class="product_de_info_deta">
                 <h4>{{ $item->product->name ?? 'Product deleted' }}</h4>
                 <div class="text-sm text-muted">
                  @php
                        $attributes = json_decode($item->custom_attribute, true);
                    @endphp

                    <div class="order_deta_featu">
                    @if(is_array($attributes))
                    @foreach($attributes as $key => $value)
                        @if(!empty($value))
                            <div>
                                <span>{{ $key }} :&nbsp;</span> 
                                @if(is_array($value))
                                    {{ implode(', ', $value) }}
                                @else
                                    {{ $value }}
                                @endif
                            </div>
                        @endif
                    @endforeach
                @endif

                 <div><span>Qty : </span>{{ $item->quantity }}</div>
                </div>

                 <div class="product-footer"><span>Price :</span><span class="price">£ {{ $item->price }}</span></div>
                 </div>
              </div>

            </div>
               </div>
                @endforeach

               </div>    
            </div>
            
            <hr>
            <div class="order_deta_add_inf">
            <div class="row">
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
            <div class="card-modern">
                                     <h6 class="card-title">Delivery Address</h6>
                     <p>
                      {{$order->customerAddress->first_name.' '.$order->customerAddress->last_name}}<br>
                      {{$order->customerAddress->address}} {{$order->customerAddress->apartment}} {{$order->customerAddress->city}}
                      {{$order->customerAddress->state}}, {{$order->customerAddress->country}} - {{$order->customerAddress->zipcode}}</p>
                    <p>Phone: {{$order->customerAddress->phone}}</p>
                </div>
            </div>
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
            <div class="card-modern">
                    <h6 class="card-title">Payment Summary</h6>
                    <ul class="summary-list">
                        <li><span>Items Total</span><span>£ {{ $order->total }}</span></li>
                        <li><span>Delivery</span><span>£ 0.00</span></li>
                        <li><span>Tax</span><span>£0.00</span></li>
                        <li class="total"><span>Total</span><span>£ {{ $order->total }}</span></li>
                    </ul>
                </div>
            </div>
            </div>
            </div>
            <div class="order-footer">
            <button class="btn btn-danger">Cancel Order</button>
            <span class="status completed">Completed</span>
        </div>
            </div>
         </div>
      </section>
@endsection