@extends('frontend.app')
<!-- Main Container  -->
@section('content')
    <!-- ========== MAIN CONTENT ========== -->
    <!--banner start-->
    <div class="headtoPadd">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-10">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="text-uppercase">MY ORDERS</h4>
                        </div>
                        <div class="col-md-6 col-lg-6 textright">
                            <a href="#" data-toggle="modal" data-target="#searchorder" class="link text-uppercase">SEARCH PAST ORDERS</a>
                        </div>
                    </div>
                   
                    <div class="">
                        <div class="border-bottom"></div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
     
    <div class="site-section pt-1">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-10">


                <div class="myordersData">
                    @if($search['order_id'] || $search['from_order_date'] || $search['to_order_date'])
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="searchedata">
                                Search results:
                                <p> 
                                    @if($search['order_id'])
                                        Order Id #{{$search['order_id']}} 
                                    @endif

                                    @if($search['from_order_date'] && $search['to_order_date'])
                                        From {{$search['from_order_date']}}-{{$search['to_order_date']}}
                                    @endif
                                    <a href="{{url('user/orders')}}"><img src="/assets/frontend/images/closebtn.svg" /></a>
                                
                                </p>
                            </div>
                        </div>
                    </div>
                    @endif
                    @foreach($orders as $order)

                    @foreach ($order->items as $item )
                       
                    <div class="row">
                        <div class="col-sm-4 col-md-3">
                            <a target="_blank" href="{{url('product-details/'.$item->product_attributes['product']['alias'])}}">
                            <div class="proImage">
                                <img src="{{$item->product_attributes['varient']['varient_image_1']}}" alt="">
                            </div>
                            </a>
                        </div>
                        <div class="col-sm-8 col-md-9">
                            <div class="ordeRow1"> 
                                <div class="f-13 playfair">Order placed on: {{ date('jS M Y',strtotime($order->created_at))}}</div>
                                <div>
                                    <span class="mr-3 f-13 playfair">Order Id# {{$order->order_number}}</span>
                                    <a href="#" class="btn btn-dark btn-sm mb-0">{{$item->status}}</a>
                                </div>
                            </div> 
                            <div class="my-4">
                                <div class="proName"><a href="{{url('/user/order/'.$item->item_number)}}">{{$item->product_attributes['product']['title']}}</a></div>
                                <div class="row">
                                    <div class="col-md-6 f-13">
                                        <span>
                                            @if(count($item->product_attributes['varient']['varient_options']))
                                                @foreach ($item->product_attributes['varient']['varient_options'] as $option)
                                                    {{$option['option_name']}}. 
                                                @endforeach
                                            @endif
                                        </span>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="ordeRow1 f-13">
                                            <div>Est. delivery: 3-4 Weeks</div>
                                            <div>Qty: {{(int)$item->quantity}}</div>
                                            <div class="f-15">$ {{round($item->total_amount)}}</div>
                                        </div>
                                    </div>
                                     
                                </div>
                            </div>
                            <div class="ordeRow1">
                                <div>
                                    <a href="/user/order/1/view" data-toggle="modal" data-target="#trackorder" class="btn btn-outline-dark btn-sm">
                                        TRACK YOUR ORDER
                                    </a>
                                    <a href="#" data-toggle="modal" data-target="#orderreturn" class="btn btn-outline-dark btn-sm">
                                        ORDER RETURN
                                    </a>
                                </div>
                                <div class="mt-auto">
                                    <a href="#" class="btn btn-outline-dark btn-sm">
                                        PRINT INVOICE
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                    @if (!$loop->last)
                    <div class="mt-2 mb-4">
                        <div class="border-bottom"></div>
                    </div>   
                    @endif

                    @endforeach

                    @if($orders->isEmpty())
                    <div class="row">
                        <div class="col-md-12"><p>Record not found.</p></div>
                    </div>
                    @endif

                </div>
                

                </div>

            </div>
        </div>
    </div>
    <!-- ========== END MAIN CONTENT ========== -->
    <div class="modal fade rightModal" id="searchorder" tabindex="-1" role="dialog" aria-labelledby="searchorder" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-dialog-slideout" role="document">
            <div class="modal-content">
                <form class="needs-validation" novalidate="" method="get">
                    <div class="modal-header pt-5 pl-5 pr-5 border-0">
                        <div class="popTitle">
                            Search Past Orders
                        </div>
                        <div class="float-right">
                            <button type="button" class="closebtn" data-dismiss="modal" aria-label="Close">Close <img src="/assets/frontend/images/close-line.svg"></button>
                        </div>
                    </div>
                    <div class="modal-body pt-3 pr-5 pl-5">
                        <div class="loginForm">
                            <!-- Form -->
                            

                                <!-- Email -->
                                <div class="md-form">
                                    <input type="date" name="from_order_date"  class="form-control" value="">
                                    <label for="materialdate">From date</label>
                                </div>

                                <div class="md-form">
                                    <input type="date" name="to_order_date" class="form-control" value="">
                                    <label for="materialdate">To date</label>
                                </div>

                                <!-- Password -->
                                <div class="md-form">
                                    <input type="text" id="matrialorderid" class="form-control" name="order_id">
                                    <label for="matrialorderid" class="">Search by Order ID</label>
                                </div>


                                <!-- Sign in button -->
                                <button class="btn btn-outline-dark btn-rounded btn-block mt-5 z-depth-0 waves-effect waves-light"  type="submit">SEARCH ORDERS</button>

                            
                            <!-- Form -->
                        </div>
                    </div></form>
                
            </div>
        </div>
    </div>
@endsection

@section('styles')
    <style type="text/css">
        
    </style>
@endsection 

@section('scripts') 
    @parent
    
@endsection