@extends('front.layouts.main')

@section('content')

@if(count($data) > 0)
<section class="pt-40">
    <div class="container">
        <h2 class="col">TRACK ORDER</h2>
        <div class="cart-page-wrapper">
            @foreach($data as $order)
            <div class="cart-item-row d-flex flex-wrap">
                <div class="m3 s4 col">
                    <figure class="product-det-thumb">
                        <img src="{{ $order['image'] }}" class="center-box" />
                    </figure>
                </div>
                <div class="m9 s8 col">
                    <div class="order-detail d-flex flex-space-between flex-column">
                        <div class="order-info">
                            <div class="order-row">
                                <label>ORDER ID :</label>
                                <strong>{{ $order['order_num'] }}</strong>
                            </div>
                            <div class="order-row mb-10">
                                <label>DATE :</label>
                                <strong>{{ date('d.m.Y',strtotime($order['order_date'])) }}</strong>
                            </div>
                            <div class="order-row">
                                <label>ORDER STATUS :</label>
                                @if($order['pickUpType']== 0)
                                @if($order['status'] == 0)
                                <strong class="text-blue">Your Order has been placed!</strong>
                                @elseif($order['status']== 1)
                                <strong class="text-blue">Your Order has been confirmed and is being prepared!</strong>
                                @elseif($order['status']== 2 || $order['status']== 6)
                                <strong class="text-blue">The Kitchen is Preparing your Food!</strong>
                                @elseif($order['status']== 3)
                                <strong class="text-blue">The rider has your food and is enroute!</strong>
                                @elseif($order['status']== 4)
                                <strong class="text-blue">Your Order has arrived!</strong>
                                @else
                                <strong class="text-red">Your Order has been cancelled!</strong>
                                @endif

                                @elseif($order['pickUpType']== 1)

                                @if($order['status'] == 0)
                                <strong class="text-blue">Your Order has been placed!</strong>
                                @elseif($order['status']== 1)
                                <strong class="text-blue">Your Order has been confirmed and is being prepared!</strong>
                                @elseif($order['status']== 6)
                                <strong class="text-blue">The Kitchen is Preparing your Food!</strong>
                                @elseif($order['status']== 2)
                                <strong class="text-blue">Your Food is ready!</strong>
                                @elseif($order['status']== 4)
                                <strong class="text-blue">Your order has been picked Up!</strong>
                                @else
                                <strong class="text-red">Your Order has been cancelled!</strong>
                                @endif
                                @endif

                            </div>
                            <div class="product-code text-blue mb-10"><strong>{{ config('constants.CURRENCY_SYMBOL')." ". number_format($order['totalPrice']) }}</strong></div>
                            <div class="mb-10"><a href="{{url('user/trackOrderDetails/'.base64_encode($order['orderId']))}}" class="text-light-gray f-bold">VIEW DETAILS</a></div>
                            <div class="text-right">
                                <button type="button" class="btn btn-blue" onclick="viewOrderDetails('{{ $order['orderId'] }}','{{ $order['pickUpType'] }}')">TRACK</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@else
<center>
    <h3>NO ORDERS PLACED YET!</h3>
</center>
@endif



<div class="popup" data-popup="orderDetail_popup" id="orderDetail_popup" tabindex="-1" role="order">
</div>

@endsection
@section('js')
<script type="text/javascript">
    setTimeout(function(){
       window.location.reload(1);
    }, 20000);
    var orderIdPopUp = '';
    var setIntervalId = '';
    var orderpickUpType = '';


    function closePopUp() {
        location.reload();
    }

    function viewOrderDetails(id, pickUpType) {
        orderIdPopUp = id;
        orderpickUpType = pickUpType;
        $('#orderDetail_popup').text('');
        $.ajax({
            url: "{{route('trackpopup')}}",
            type: "GET",
            data: {
                "_token": "{{ csrf_token() }}",
                "id": id,
                "type": pickUpType
            },
            success: function(data) {
                $('#orderDetail_popup').append(data);
                $('#orderDetail_popup, #orderDetail_popup > .overlay').fadeIn(350);
                $('body').addClass('popup-open');
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {}
        });
    }
</script>
@endsection