@extends('web.layouts.layout')
@section('content')

    <main>


        <!-- ---------- Start breadcrumb ----------- -->

        @include('web.pages.components.header.header')


        <!-- ---------- orders page ----------- -->
        <section class="orders-pg pb-4">
            <div class="container">
                <div class="orders-content">
                    <h3 class="mb-3"> {{__('web.order_details')}} </h3>
                    <div class="order-details">
                        <div class="row gx-0">
                            <div class="col-lg-9">
                                <div class="order-card me-lg-4">
                                    <div class="order-head">
                                        <div class="row justify-content-between">
                                            <div class="col-lg-6">
                                                <div class="r-side d-flex align-items-center">
                                                    <div class="date">
                                                        <div class="text"> {{__('web.order_date')}} :{{$order->date}}  </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="l-side d-flex align-items-end justify-content-lg-end mt-4 mt-lg-0">
                                                    <div class="order-num">
                                                        <div class="text"> {{__('web.order_id')}} : {{$order->id}} </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="order-body">
                                        <div class="order-track">
                                            @foreach($tracks as $key => $row)
                                                <div class="track-item {{($key+1) != count($tracks) ? 'done' : 'waiting'}}">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-3">
                                                        <div class="date text"> {{$row->date}}  </div>
                                                    </div>
                                                    <div class="col-lg-9">
                                                        <div class="cont d-flex align-items-center">
                                                            <span class="icon"> <i class="fal fa-check"></i> <i class="fal fa-hourglass"></i> </span>
                                                            <div class="inf">
                                                                <strong class="text"> {{__('web.order_statuses.'.$row->status)}} </strong>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            @endforeach
                                            @foreach($statuses as $row)
                                                <div class="track-item">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-3">
                                                        <div class="date text">  </div>
                                                    </div>
                                                    <div class="col-lg-9">
                                                        <div class="cont d-flex align-items-center">
                                                            <span class="icon"> <i class="fal fa-check"></i> <i class="fal fa-hourglass"></i> <i class="fal fa-box-check"></i> </span>
                                                            <div class="inf">
                                                                <strong class="text"> {{__('web.order_statuses.'.$row)}} </strong>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            @endforeach
                                        </div>

                                        <div class="prods-cont">
                                            <div class="icon-title-st1">
                                                <h6 class=""> <span class="ico me-2 cr-gray"> <i class="fas fa-box-open-full"></i> </span> <span class="txt"> {{__('web.products_details')}} </span> <span class="text ms-2"> {{__('web.products_details_desc')}} </span> </h6>
                                            </div>
                                            @foreach($order->products as $row)
                                                <div class="item">
                                                    <div class="row justify-content-between">
                                                        <div class="col-lg-12">
                                                            <div class="order-main">
                                                                <div class="text mb-3"> <strong class="text-dark ms-2"> {{__('web.order_statuses.'.$order->status)}} </strong> </div>
                                                                <div class="img-wrapper">
                                                                    <div class="img">
                                                                        <img src="{{asset($row->product->image)}}" alt="" class="img-cover">
                                                                    </div>
                                                                    <div class="inf">
                                                                        <p> {!! $row->product->currentDescription->title !!} </p>
                                                                        <div class="text"> x{{$row->count}} </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="aside">
                                    <div class="price-box bg-light1 mb-4">
                                        <h6 class="text-center border-bottom pb-3"> {{__('web.order_summary')}} </h6>
                                        <ul class="price-list">
                                            <li>
                                                <div class="txt"> <span> {{__('web.total_products')}} </span> <small> ( {{count($order->products)}} {{ __('web.products')}}) </small> </div>
                                                <div class="prc"> {{$order->total_products}} <small> {{__('web.sar')}}. </small> </div>
                                            </li>
                                            <li>
                                                <div class="txt"> <span> {{__('web.tax_cost')}} </span> </div>
                                                <div class="prc"> {{$order->total_tax}} <small> {{__('web.sar')}}. </small> </div>
                                            </li>
                                            <li>
                                                <div class="txt"> <span> {{__('web.total_inc_tax')}} </span> </div>
                                                <div class="prc"> {{$order->total_products + $order->total_tax}} <small> {{__('web.sar')}}. </small> </div>
                                            </li>
                                            @if($order->discount != 0)
                                                <li>
                                                    <div class="txt"> {{__('web.discount')}} </div>
                                                    <div class="prc cr-green"> {{$order->discount}} </div>
                                                </li>
                                            @endif
                                            @if($order->discount_offer != 0)
                                                <li>
                                                    <div class="txt"> {{__('web.discount_offer')}} </div>
                                                    <div class="prc cr-green"> {{$order->discount_offer}} </div>
                                                </li>
                                            @endif
                                            @if($order->on_hand_cost != 0)
                                                <li>
                                                    <div class="txt">  {{__('web.on_hand_cost')}} </div>
                                                    <div class="prc cr-green"> {{$order->on_hand_cost}} </div>
                                                </li>
                                            @endif
                                            <li>
                                                <div class="txt"> {{__('web.shipping')}} </div>
                                                <div class="prc cr-green"> {{$order->shipping_cost  ? $order->shipping_cost  .' '. __('web.sar') : __('web.free_shipping')}} </div>
                                            </li>
                                            <li class="pt-2 mt-3 border-top">
                                                <div class="txt"> <span class="text-dark"> {{__('web.total')}} </span> <small> {{__('web.inc_vat')}} </small> </div>
                                                <div class="prc text-dark fw-bold"> {{$order->total}} <small> {{__('web.sar')}}. </small> </div>
                                            </li>

                                        </ul>
                                    </div>
                                    <div class="price-box bg-light1 mb-4">
                                        <h6 class="text-center border-bottom pb-3 mb-3"> {{__('web.pay_details')}} </h6>
                                        <strong> <span class="butn bg-green py-1 px-3 rounded-3 me-2"> {{ $order->way->currentDescription->title }} </span>  </strong>
                                    </div>
                                    <div class="price-box bg-light1 mb-4">
                                        <h6 class="text-center border-bottom pb-3 mb-3">  {{__('web.address_delivery')}}</h6>
                                        <strong class="mb-3"> <i class="far fa-map-marker me-1"></i> {{__('web.addresses_status.'.$order->address->delivery_status)}} </strong>
                                        <h6 class="mb-1"> {{__('web.delivery_to')}} {{$order->address->user_name}}</h6>
                                        <div class="text"> {{$order->address->address}}  </div>
                                        <div class="text"> {{__('web.phone')}}: {{$order->address->phone}} </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>



        @include('web.layouts.footer_banner')


    </main>

@endsection