@extends('layout.frontend.master')

@section('meta-title', 'My Orders - LEREVE')

@push('asset-top')
@endpush

@section('content')
    <section class="page-content inner-block">
        <div class="account-container">
            <div class="container-fluid">
                <div class="row myaccount">
                    <div class="col-lg-3">
                        <div class="account-left-block">
                            <div class="account-left-head">
                                <div class="account-name">{{__('Hi')}} {{$user['user']->name}}</div>
                                <p>{{$user['user']->email}}</p>
                                <p>{{($user['user']['profile'])?$user['user']['profile']->phone:''}}</p>
                            </div>
                            <div class="account-menu-block">
                                <ul class="account-nav">
                                    <li><a  href="{{route('user.dashboard')}}"><div class="account-icon"> <i class="bi bi-grid"></i></div>{{__('My Dashboard')}} </a></li>
                                    <li class="active"><a  href="{{route('my.account')}}"><div class="account-icon"> <i class="bi bi-person"></i></div> {{__('My Account')}} </a></li>
                                    <li><a  href="{{route('address.book')}}"><div class="account-icon"> <i class="bi bi-geo-alt"></i></div>{{__('Address Book')}}</a></li>
                                    <li><a  href="{{route('my.orders')}}"><div class="account-icon"> <i class="bi bi-cart2"></i></div> {{__('My Orders')}}</a></li>
                                    <li><a  href="{{route('logout')}}"> <div class="account-icon"> <i class="bi bi-box-arrow-right"></i></div>{{__('Logout')}}</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-9">
                        <div class="account-right-block">
                            <div class="account-head"><h4>{{__('Orders')}}</h4></div>
                            <div class="order-block">
                                <div class="accordion accordion-flush" id="accordion-order">
                                    @foreach($user['user']['orders'] as $okey=>$order)
                                        <div class="accordion-item order-list" >
                                            <div class="accordion-header " id="product-order-head-{{$okey}}">
                                                <div class=" order-top">
                                                    <div class="order-left">
                                                        <div class="order-items">
                                                            <div class="order-id">{{__('ID')}}: <strong>#00{{$order->id}}</strong></div>
                                                            <div class="order-date">{{__('Date')}}: {{date('m/d/Y', strtotime($order->created_at))}}</div> 
                                                            
                                                        </div>
                                                        <div class="order-items">
                                                            <div class="order-price price">
                                                                {{__('Total Amount')}} : {{(float)$order->subtotal - (float)$order->discount}} {{__('KWD')}}
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="order-right">
                                                        <div class="order-items"> 
                                                            <!-- <div class="invoice"><a href="invoice.html">Invoice </a></div> -->
                                                        </div>
                                                        <div class="order-items">
                                                            <div class="order-status items-bottom">
                                                                <span class="status-name">{{__('Order Status')}}: </span> 
                                                                <span class="status {{$order->status}}"> {{ucwords($order->status)}}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>                            
                                                <div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#flush-collapse-{{$okey}}" aria-expanded="false" aria-controls="flush-collapse-{{$okey}}">{{__('View Order')}} </div>
                                            </div>
                                            <div id="flush-collapse-{{$okey}}" class="accordion-collapse collapse" aria-labelledby="product-order-head-{{$okey}}" data-bs-parent="#accordion-order">
                                                <div class="accordion-body order-cart">   
                                                    <div class="card-body order-confirm-block shopping-cart">
                                                        <div class="cart-block">
                                                            <ul class="list-group list-group-lg list-group-flush-x mb-6">
                                                                <li class="list-group-item cart-head">
                                                                    <div class="row align-items-center">
                                                                        <div class="col-lg-6 col-md-6">{{__('Product Name')}} </div>
                                                                        <div class="col-lg-2 col-md-2 text-right">
                                                                            <div class="price-heading">{{__('Price')}}</div>
                                                                        </div>
                                                                        <div class="col-lg-2 col-md-2 text-right">{{__('QTY')}}</div>
                                                                        <div class="col-lg-2 col-md-2 text-right">{{__('Subtotal')}}</div>
                                                                    </div>
                                                                </li>
                                                                @foreach($order['items'] as $ikey=>$item)
                                                                    @php
                                                                        $lang = app()->currentLocale();
                                                                    @endphp
                                                                    <li class="list-group-item">
                                                                        <div class="row align-items-center">
                                                                            <div class="col-lg-6 col-md-6">
                                                                                <div class=" product-part-top">
                                                                                    <div class="d-flex  h6 product-cart">
                                                                                        <a class="text-body" href="{{route('single.product',['slug'=>$item['product']->slug])}}">
                                                                                            <h3>
                                                                                                {{($lang=='en')?$item['product']->name_en:$item['product']->name_ar}}
                                                                                            </h3>
                                                                                        </a>
                                                                                        <div class="attribute">
                                                                                            {{__('Weight')}} : {{$item->weight}}
                                                                                        </div>
                                                                                        <ul class="product-delvery-dtls">
                                                                                            <li class="area">{{($lang=='en')?$item['area']->name_en:$item['area']->name_ar}}</li>
                                                                                            <li class="date">{{$item->delivery_date}}</li>
                                                                                            <li class="time">
                                                                                                {{date('h:i A', strtotime($item['slot']->start))}} - {{date('h:i A', strtotime($item['slot']->end))}}
                                                                                            </li>
                                                                                            <li class="message">{{$item->message}}</li>
                                                                                        </ul>
                                                                                    </div>
                                                                                    <div class="ar-review px-4 "><a href="#" class="btn line-button-dark ar-review-btn" data-pid="{{$item->product_id}}" data-bs-toggle="modal" data-bs-target="#ratingBlock">{{__('Write a review')}}</a></div> 
                                                                                </div>

                                                                            </div>
                                                                            <div class="col-lg-2 col-md-2">
                                                                                <div class="price text-right">{{$item->price}} {{__('KWD')}}</div>
                                                                            </div>
                                                                            <div class="col-lg-2 col-md-2">
                                                                                <div class="d-flex align-items-end justify-content-end">
                                                                                    <div class="qty-number">{{$item->quantity}}</div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-lg-2 col-md-2 text-right">
                                                                                <div class="ml-auto price"> {{$item->quantity * $item->price}} {{__('KWD')}}</div>
                                                                            </div>
                                                                        </div>
                                                                        @if($item['addons'])
                                                                            <div class="addons-list">
                                                                              <h4>{{__('Add Ons')}} </h4>
                                                                              <ul class="list-group list-group-lg list-group-flush-x mb-6">
                                                                                 @foreach($item['addons'] as $addon)
                                                                                    <li class="list-group-item">
                                                                                       <div class="row align-items-center">
                                                                                          <div class="col-lg-5 col-md-5">
                                                                                             <div class=" product-part-top">
                                                                                                <div class="product-cart-img">
                                                                                                   <a href="{{route('single.product', ['slug'=>$item['product']->slug])}}">
                                                                                                      <img src="/gallery/addon/{{$addon['addon']->thumbnail}}" alt="" class="img-fluid">
                                                                                                   </a>
                                                                                                </div>
                                                                                                <div class="d-flex  h6 product-cart">
                                                                                                   <h3>{{(app()->currentLocale()=='en')?$addon['addon']->name_en:$addon['addon']->name_ar}}</h3>
                                                                                                </div>
                                                                                             </div>
                                                                                          </div>
                                                                                          <div class="col-lg-2 col-md-2">
                                                                                             <div class="price text-right">{{$addon['price']}} {{__('KWD')}}</div>
                                                                                          </div>
                                                                                          <div class="col-lg-2 col-md-2">
                                                                                             <div class="d-flex align-items-end justify-content-end">
                                                                                                <div class="qty-number">{{$addon['qty']}}</div>
                                                                                             </div>
                                                                                          </div>
                                                                                          <div class="col-lg-2 col-md-2 text-right">
                                                                                             <div class="ml-auto price"> {{$addon['price']*$addon['qty']}} {{__('KWD')}}</div>
                                                                                          </div>
                                                                                       </div>
                                                                                    </li>
                                                                                 @endforeach
                                                                              </ul>
                                                                           </div>
                                                                        @endif
                                                                    </li>
                                                                @endforeach
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-5 col-md-12 ml-auto">
                                                        <div class="cart-right mt-0">
                                                            <div class="card  ">
                                                                <div class="card-body">
                                                                    <ul class="list-group list-group-sm list-group-flush-y list-group-flush-x">
                                                                        <li class="list-group-item d-flex">
                                                                            <span>{{__('Total')}}</span>
                                                                            <span class="ml-auto price">{{$order->subtotal}} {{__('KWD')}}</span>
                                                                        </li>
                                                                        <li class="list-group-item d-flex">
                                                                            <span>{{__('Discount Code')}}  </span> 
                                                                            <span class="ml-auto font-size-sm price">- {{($order->discount)?$order->discount:0}} {{__('KWD')}}</span>
                                                                        </li>
                                                                        <!-- <li class="list-group-item d-flex">
                                                                            <span>Delivery Charge  </span>
                                                                            <span class="ml-auto font-size-sm price">- 2{{__('KWD')}}</span>
                                                                        </li> -->
                                                                        <li class="list-group-item d-flex  subtotal">
                                                                            <span>{{__('Grand Total')}}</span>
                                                                            <span class="ml-auto price">{{(float)$order->subtotal - (float)$order->discount}} {{__('KWD')}}</span>
                                                                        </li>                                                 
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="order-date"><a href="#" data-bs-toggle="modal" data-bs-target="#trackOrder">trackOrder</a></div> -->
            <!-- Rating Popup-->
            <div class="modal fade rating-popup" id="ratingBlock" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"  aria-hidden="true">
               <div class="modal-dialog modal-dialog-centered">
                  <div class="modal-content">
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     <div class="modal-body">
                        <form class="" method="post" action="{{route('review.store')}}">
                            @csrf
                            <input type="hidden" name="user" value="{{session('id')}}">
                            <input type="hidden" name="product" value="">
                            <input type="hidden" name="redirectTo" value="{{route('my.orders')}}">
                            <div class="rating-top">
                                <h4>Rate this product</h4>
                                <div class="star-rating">
                                    <input id="star-5" type="radio" name="rating" value="5" />
                                    <label for="star-5" title="5 stars">
                                        <i class="active fa fa-star" aria-hidden="true"></i>
                                    </label>
                                    <input id="star-4" type="radio" name="rating" value="4" />
                                    <label for="star-4" title="4 stars">
                                        <i class="active fa fa-star" aria-hidden="true"></i>
                                    </label>
                                    <input id="star-3" type="radio" name="rating" value="3" />
                                    <label for="star-3" title="3 stars">
                                        <i class="active fa fa-star" aria-hidden="true"></i>
                                    </label>
                                    <input id="star-2" type="radio" name="rating" value="2" />
                                    <label for="star-2" title="2 stars">
                                        <i class="active fa fa-star" aria-hidden="true"></i>
                                    </label>
                                    <input id="star-1" type="radio" name="rating" value="1" />
                                    <label for="star-1" title="1 star">
                                        <i class="active fa fa-star" aria-hidden="true"></i>
                                    </label>
                                </div>
                            </div>
                            <div  class="rating-bottom">
                                <h4>Review this product</h4>
                                <div class="discription-area">
                                    <textarea rows="8" placeholder="Description..." class="_3kRe7w" spellcheck="false" data-gramm="false" name="review"></textarea>
                                    <button class="btn">Submit</button>
                                </div>
                            </div>
                        </form>
                     </div>
                  </div>
               </div>
            </div>
            <!--Rating popup End -->
            <!-- order Track popup Start-->

            <div class="modal fade track-popup" id="trackOrder" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <!-- Modal Header -->
                        <div class="modal-header">
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            <h4 class="modal-title ">Order Status<br>Order number-673290789</h4> 
                        </div> <!-- Modal body -->
                        <div class="modal-body">
                            <div class="progress-track">
                                <ul id="progressbar">
                                    <li class="step0 active " id="step1">Order placed</li>
                                    <li class="step0   active " id="step2">In Transit</li>
                                    <li class="step0  active complete" id="step3">Out for Delivery</li>
                                    <li class="step0  text-right " id="step4">Delivered</li>
                                </ul>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <div class="details d-table">
                                        <div class="d-table-row">
                                            <div class="d-table-cell"> Estimated Delivery : </div>
                                            <div class="d-table-cell"> 10/02/2024 </div>
                                        </div>
                                    </div>
                                    <div class="delivery-boy-dtls">
                                        <div class="d-boy-icon">
                                            <img src="{{asset('images/delivery-man.png')}}" alt="delivery">
                                        </div>
                                        <h5>Delivery Details</h5>
                                        <p>Arun<br/>
                                        <a href="+919645123456">+91 9645123456</a></p>
                                    </div>
                                </div>                          
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@push('asset-bottom')
<script type="text/javascript">
    jQuery('body').on('click', '.ar-review-btn', function(){
        pid = jQuery(this).data('pid');
        jQuery('input[name="product"]').val(pid);
        jQuery('#ratingBlock form').attr('action','/review/create');
        jQuery.ajax({
            url: '/review/view/'+pid,
            method:'get',
            dataType: 'JSON',
            success: function(res){
                review = res.review;
                jQuery('textarea[name="review"]').val(review.review);
                jQuery('#star-'+review.rating).prop('checked', true);
                console.log(res.review);
                jQuery('#ratingBlock form').attr('action','/review/update/'+review.id);
            },
            error: function(err){
                console.log(err);
            }
        });
    });
</script>
@endpush