@extends('front.layouts.app', ['title' => 'Order Detail'])

@section('content')
@include('front.layouts.app-header')

<section class="breadcrumb_sec">
    <div class="container">
        <div class="row">
            <div class="col col-12">
                <div class="breadcrumb">
                    <ul>
                        <li><a href="{{route('home')}}">Home</a></li>
                        <li><a href="{{route('my-account')}}">My Account</a></li>
                        <li><a href="{{route('my-orders')}}">Orders</a></li>
                        <li>#{{$order->order_no}}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="order_details_sec off_bg">
    <div class="container">
        <div class="row">
            <div class="col col-9">
                <div class="order_details_content">
                    <div class="order_details_inner">
                        <div class="card">
                            <div class="card_title">
                                <h3>#{{$order->order_no}}</h3>
                            </div>
                            <div class="card_content">
                                <div class="order_details_header">
                                    <div class="order_details_header_items">
                                        <div class="order_details_img_wrap">
                                            <p>Image</p>
                                        </div>
                                        <div class="order_details_item_details">
                                            <p>Details</p>
                                        </div>
                                        <div class="order_details_item_size">
                                            <p>Size</p>
                                        </div>
                                        <div class="order_details_item_size">
                                            <p>Price</p>
                                        </div>
                                        <div class="order_details_item_quantity">
                                            <p>quantity</p>
                                        </div>
                                        <div class="order_details_item_sub_total">
                                            <p>Sub Total</p>
                                        </div>
                                        {{-- <div class="order_details_item_status">
                                            <p>Status</p>
                                        </div>
                                        <div class="order_details_item_remove">
                                            <p>Action</p>
                                        </div> --}}
                                    </div>
                                </div>
                                <div class="order_details_wrap">
                                    @foreach($order->details as $detail)
                                    <div class="order_details_item">
                                        <div class="order_details_img_wrap" data-title="Image">
                                            <a href="#!">
                                            @if(!empty($detail->product->productsImageFirst->filename) && \Illuminate\Support\Facades\Storage::exists($detail->product->productsImageFirst->filename))
                                        <img src="{{ url('storage') . '/' . $detail->product->productsImageFirst->filename}}">
                                        @else
                                        <img src="{{ url('storage') . '/no_image.png'}}">
                                        @endif
                                            </a>
                                        </div>
                                        <div class="order_details_item_details" data-title="Details">
                                            <h4><a href="#!">{{$detail->product->name}}</a></h4>
                                            <p> {{$detail->product->description}}</p>
                                        </div>
                                        <div class="order_details_item_size" data-title="Size">
                                            @if (isset($detail->variant_id))
                                            <p>{{isset($detail->variant->size->name) ? $detail->variant->size->name : 'N/A'}}</p>
                                            @else
                                            <p>{{isset($detail->variant->size->name) ? $detail->variant->size->name : 'N/A'}}</p>
                                            @endif
                                            
                                        </div>
                                        <div class="order_details_item_price" data-title="Price">
                                            <p>${{$detail->price}}</p>
                                        </div>
                                        <div class="order_details_item_quantity" data-title="quantity">
                                            <p>{{$detail->quantity}}</p>
                                        </div>
                                        <div class="order_details_item_sub_total" data-title="Sub Total">
                                            <p>${{$detail->total}}</p>
                                        </div>
                                        <div class="od_status_box_wrap card">
                                            <div class="od_status_close_btn">
                                                <i class="fa fa-times" aria-hidden="true"></i>
                                            </div>
                                            <ul class="od_status_box" id="">
                                                <li class=" current ">
                                                    <label for="">Pending :</label>
                                                    <span>07-02-2021 09:31</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>

                                <div class="order_details_main_total">
                                    <h4>Totals</h4>
                                    <ul>
                                        <li><label for="">Sub Total</label> <span>${{$order->sub_total}}</span></li>
                                        <li><label for="">Shipping Charge</label> <span>${{$order->shipping_charge ? $order->shipping_charge: '00.00'}}</span></li>
                                        <li><label for="">Total</label> <span>${{$order->total}}</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col col-3">
               <div class="order_details_sidebar_wrap">
                   <div class="card">
                        <div class="card_title">
                            <h3>Payment Method</h3>
                        </div>
                        <div class="card_content">
                            <div class="order_details_peyment_method">
                                <ul>
                                    <li>
                                        <label for="">Payment Method</label>
                                        <span>Stripe</span>
                                    </li>
                                    @if(isset($order->payment) && isset($order->payment->transaction_id))
                                    <li>
                                        <label for="">Transaction Id</label>
                                        <span>{{$order->payment->transaction_id}}</span>
                                    </li>
                                    @endif
                                </ul>
                            </div>
                        </div>
                        <div class="card_title">
                            <h3>Shipping Method</h3>
                        </div>
                        <div class="card_content">
                            <div class="order_details_peyment_method">
                                <ul>
                                    <li>
                                        <label for="">Shipping Method</label>
                                        <span>{{$order->shipping_method == 1 ? 'Pickup from store': 'Fedex'}}</span>
                                    </li>
                                    <li>
                                        <label for="">Tracking Id</label>
                                        <span>{{$order->fedex_tracking_id ? $order->fedex_tracking_id: 'N/A'}}</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="card_title">
                            <h3>Shipping Address</h3>
                        </div>
                        <div class="card_content">
                            <div class="order_details_shipping_address">
                                <p>{{$order->shippingAddress->street_name }}, {{$order->shippingAddress->city }}, 
                                                    {{$order->shippingAddress->state }}, {{$order->shippingAddress->country }}, {{$order->shippingAddress->zipcode->code }}</p>
                            </div>
                        </div>
                   </div>
               </div>
            </div>
        </div>
    </div>
</section>

@include('front.layouts.app-footer')
@endsection