@extends('frontend.layouts.app')

    <link href="https://enxalata.com/frontend/css/ui.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://enxalata.com/themes/css/main-color.css" id="colors">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

   <style type="text/css">
    .tracking-wrap {
    position: relative;
    background-color: #ddd;
    height: 7px;
    display: flex;
    margin-bottom: 60px;
    margin-top: 50px
}

.tracking-wrap .step {
    flex-grow: 1;
    width: 25%;
    margin-top: -18px;
    text-align: center;
    position: relative
}

.tracking-wrap .step::before {
    height: 7px;
    position: absolute;
    content: "";
    width: 100%;
    left: 0;
    top: 18px
}

.tracking-wrap .icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    position: relative;
    border-radius: 100%;
    background: #ddd
}

.tracking-wrap .text {
    display: block;
    margin-top: 7px
}

.tracking-wrap .step.active .icon {
    background: #3167eb;
    color: #fff
}

.tracking-wrap .step.active .text {
    font-weight: 400;
    color: #000
}

.tracking-wrap .step.active:before {
    background: #3167eb
}
.fa{margin-top: 12px!important};
.active{
    background:#fa3434;
}
.tracking-wrap .step.active:before {
    background: #fa3434;
}
.tracking-wrap .step.active .icon {
    background: #fa3434;
}
.bg-orange {
    background-color: #fa3434;
    color:#fff;
}
</style>
    <!-- poppins font-->
@section('main-content')
<div class="container-fluid margin-top-20">
    <div class="row sticky-wrapper">
        <div class="col-lg-12 col-md-12 padding-left-30">
            <div id="invoice-print">
                <article class="card">
                    <header class="card-header"> {{__('frontend.my_orders')}} / {{ __('frontend.tracking') }}</header>
                    <div class="card-body">
                        <div class="d-flex flex-wrap justify-content-between">
                            <h6>{{ __('frontend.order') }} #{{ $order->order_code }} </h6>
                            <h6> <span class="float-right"><strong> {{ __('frontend.order_date') }}:
                                    </strong>{{ $order->created_at->format('d M Y, h:i A') }}</span></h6>
                        </div>
                        <div class=" row no-gutters">
                            <div class="col-md-4">
                                <strong>{{ __('frontend.billing_to') }}:</strong>
                                <br> {{__('frontend.name')}}: {{ $order->user->name ?? '' }}
                                <br> {{__('frontend.phone')}}: {{ $order->user->phone ?? '' }}
                                <br> {{__('frontend.address')}}: {{ orderAddress($order->address) }} <br>
                            </div>
                            <div class="col-md-4">
                                <strong>{{__('frontend.shipping_to')}}:</strong>
                                <br> {{__('frontend.phone')}}: {{ $order->mobile ?? '' }}
                                <br> {{__('frontend.address')}}: {{ orderAddress($order->address) }}
                            </div>
                            <div class="col-md-4">
                                <strong>{{__('frontend.status')}}:</strong>
                                <br> {{__('frontend.payment_status')}}:
                                {{ trans('payment_status.' . $order->payment_status) ?? null }}
                                <br> {{__('frontend.payment_method')}}:
                                {{ trans('payment_method.' . $order->payment_method) ?? null }}
                                <br> {{__('levels.order_type')}}:
                                {{ $order->getOrderType }}
                                <br>Pre-Order  Delivery Time:
                                {{ $order->delivery_time }}<br>
                            </div>
                        </div>

                        <div class="tracking-wrap custom-font2">
                            @if($order->status == \App\Enums\OrderStatus::CANCEL)
                            <div class="step active">
                                <span class="icon"> <i class="fa fa-times"></i> </span>
                                <span class="text">Cancel</span>
                            </div>
                            @else
                            <div class="step {{ $order->status >= \App\Enums\OrderStatus::PENDING ? 'active' : ''}}">
                                <span class="icon"> <i class="fa fa-circle-notch"></i> </span>
                                <span class="text">Pending</span>
                            </div>
                            @endif

                            @if($order->status == \App\Enums\OrderStatus::REJECT)
                            <div class="step active">
                                <span class="icon"> <i class="fa fa-times"></i> </span>
                                <span class="text">Reject</span>
                            </div>
                            @else
                            <div class="step {{ $order->status >= \App\Enums\OrderStatus::ACCEPT ? 'active' : ''}}">
                                <span class="icon"> <i class="fa fa-check"></i> </span>
                                <span class="text">Accept</span>
                            </div>
                            @endif


                            <div class="step {{  $order->status >= \App\Enums\OrderStatus::PROCESS ? 'active' : ''}}">
                                <span class="icon"> <i class="fa fa-shopping-bag"></i> </span>
                                <span class="text">Process</span>
                            </div> <!-- step.// -->
                            <div class="step {{  $order->status >= \App\Enums\OrderStatus::ON_THE_WAY ? 'active' : ''}}">
                                <span class="icon"> <i class="fa fa-truck"></i> </span>
                                <span class="text">On the way</span>
                            </div> <!-- step.// -->
                            <div class="step {{  $order->status == \App\Enums\OrderStatus::COMPLETED ? 'active' : ''}}">
                                <span class="icon"> <i class="fa fa-box"></i> </span>
                                <span class="text">Completed</span>
                            </div> <!-- step.// -->
                        </div>
                        <hr>



                    </div> <!-- card-body.// -->
                </article>
                <article class="card mt-3">
                    <div class="card-body">
                        @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status')}}
                        </div>
                        @endif

                        <div class="tab-content custom-tab-content " id="v-pills-tabContent">
                            <div class="p-2 bg-orange d-flex justify-content-between blo">
                                <div scope="col">{{ __('frontend.item') }}</div>
                                <div scope="col" class="text-center">{{ __('frontend.price') }}</div>
                                <div class="text-center">{{ __('frontend.quantity') }}</div>
                                <div class="text-right">{{ __('frontend.totals') }}</div>
                            </div>
                            @foreach($items as $itemKey => $item)
                            <div class="pl-3 pr-3 d-flex justify-content-between">
                                <div scope="row">{{ $item->menuItem->name}}@if($item->username!=NULL)({{ $item->username}})@endif <span class="coupon-message"> {{$item->variation ? (' ( '.$item->variation['name'].' )') : ''}}</span></div>
                                <div class="text-center">{{ currencyFormat($item->unit_price) }}</div>
                                <div class="text-center">{{ $item->quantity }}</div>
                                <div class="text-right">{{ currencyFormat($item->unit_price*$item->quantity) }}</div>
                            </div>
                            @if($item->options)
                            <div class="pl-3 pr-3" style="max-width:300px;">
                                <small class="">{{__('levels.options')}} :
                                    @foreach(json_decode($item->options,true) as $option)
                                    <span class="badge badge-info">{{$option['name']}}</span>
                                    @endforeach
                                </small>
                            </div>
                            @endif
                            @if($item->dates)
                            <div class="pl-3 pr-3" style="max-width:300px;">
                                <small class="">Dates:
                                    @foreach(json_decode($item->dates,true) as $date)
                                    <span class="badge badge-info">{{$date}}</span>
                                    @endforeach
                                </small>
                            </div>
                            @endif
                            @endforeach


                            <table class="table table-striped">
                                <tbody>
                                    @if (!blank($order->discount) && Schema::hasColumn('coupons', 'slug'))
                                    <tr>
                                        <th scope="col">{{ __('frontend.discount') }}</th>
                                        <th scope="col"></th>
                                        <th class="text-right"></th>
                                        <td class="text-right">{{ currencyFormat($order->discount->amount) }}</td>
                                    </tr>
                                    @endif
                                    <tr>
                                        <th scope="col"></th>
                                        <th scope="col"></th>
                                        <th class="text-right"></th>
                                        <th class="text-right">{{ __('frontend.subtotal') }}</th>
                                    </tr>

                                    <tr>
                                        <th scope="col"> {{ __('frontend.order_status') }} :
                                            {{ trans('order_status.'.$order->status) }}
                                        </th>
                                        <th scope="col"></th>
                                        <th class="text-right"></th>
                                        <td class="text-right">{{ currencyFormat($order->sub_total) }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="col"></th>
                                        <th scope="col"></th>
                                        <th class="text-right"></th>
                                        <th class="text-right">Tax</th>
                                    </tr>
                                    <tr>
                                        <th scope="col"></th>
                                        <th scope="col"></th>
                                        <th class="text-right"></th>
                                        <td class="text-right">{{ currencyFormat($order->tax) }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="col"></th>
                                        <th scope="col"></th>
                                        <th class="text-right"></th>
                                        <th class="text-right">Tip</th>
                                    </tr>
                                    <tr>
                                        <th scope="col"></th>
                                        <th scope="col"></th>
                                        <th class="text-right"></th>
                                        <td class="text-right">{{ currencyFormat($order->tip) }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="col"></th>
                                        <th scope="col"></th>
                                        <th class="text-right"></th>
                                        <th class="text-right">{{ __('frontend.delivery_charge') }}</th>
                                    </tr>
                                    <tr>
                                        <th scope="col"></th>
                                        <th scope="col"></th>
                                        <th class="text-right"></th>
                                        <td class="text-right">{{ currencyFormat($order->delivery_charge) }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="col"></th>
                                        <th scope="col"></th>
                                        <th class="text-right"></th>
                                        <th class="text-right">{{ __('frontend.total') }}</th>
                                    </tr>
                                    <tr>
                                        <th scope="col"></th>
                                        <th scope="col"></th>
                                        <th class="text-right"></th>
                                        <td class="text-right">{{ currencyFormat($order->total) }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div> <!-- card-body .// -->
                </article>
            </div>
            <div class="row">
                @if($order->status == \App\Enums\OrderStatus::PENDING)
                <div class="col">
                    <a href="{{ route('account.order.cancel', $order) }}" class="btn btn-danger m-2" onclick="return confirm('{{ __('frontend.cancel_message') }}')"><i class="fa fa-times"></i>
                        {{ __('frontend.cancel_order') }}</a>
                </div>
                @endif

                @if($order->attachment)
                <div class="text-right">
                    <a class="btn btn-info m-2" href="{{ route('account.order.file', $order->id) }}"><i class="fa fa-arrow-circle-down"></i> {{ __('frontend.download') }}</a>
                </div>
                @endif
                <div class="@if(!$order->attachment) col @endif text-right">
                    <button onclick="printDiv('invoice-print')" class="btn btn-warning m-2"><i class="fa fa-print"></i>
                        {{ __('frontend.print') }}</button>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection