@extends('layouts.user-inner')
  @section('content') 
   <!-- Ec breadcrumb start -->
   <div class="sticky-header-next-sec  ec-breadcrumb">
       <div class="container">
           <div class="row">
               <div class="col-12">
                   <div class="row ec_breadcrumb_inner">
                       <div class="col-md-12 col-sm-12">
                           <!-- ec-breadcrumb-list start -->
                           <ul class="ec-breadcrumb-list">
                               <li class="ec-breadcrumb-item"><a href="/">Home</a></li>
                               <li class="ec-breadcrumb-item active">Order History</li>
                           </ul>
                           <!-- ec-breadcrumb-list end -->
                       </div>
                   </div>
               </div>
           </div>
       </div>
   </div>
   <!-- Ec breadcrumb end -->

    <!-- Ec cart page -->
    <section class="ec-page-content cart-section section-space-p">
        <div class="container">
            <div class="row">
                <div class="ec-cart-leftside col-lg-12 col-md-12 ">
                    <!-- cart content Start -->
                    <div class="ec-cart-content">
                        <div class="ec-cart-inner">
                            <div class="row">
                                <form action="#">
                                    <div class="table-content cart-table-content">
                                        <table>
                                            <thead>
                                                <tr>
                                                    <th>Order ID</th>
                                                    <th>Order Date</th>
                                                    <th>Total</th>
                                                    <th>Discount</th>
                                                    <th>Grand Total</th>
                                                    <th>Status</th>
                                                    <th></th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @if(count($orders)>0)
                                                @foreach($orders as $ords)
                                                <tr>
                                                    <td data-label="Order Id" >{{ $ords->order_unique_id }}</td>
                                                    <td data-label="Order Date">{{ date('d-m-Y',strtotime($ords->o_date)) }}</td>
                                                    <td data-label="Total"><span
                                                            class="amount">QAR {{ $ords->o_sub_total }}</span></td>
                                                            <td data-label="Discount" class="ec-cart-pro-subtotal">QAR {{ $ords->o_discount }}</td>
                                                    <td data-label="Grand Total" class="ec-cart-pro-subtotal">QAR {{ $ords->o_grand_total }}</td>
                                                   <td data-label="Status" class="ec-cart-pro-status">
                                                    {{$ords->o_tracking_status}}
                                                   </td>
                                                   <td class="ec-cart-pro-track"><a href="javascript:void(0);" onclick="get_ord_detailsfn({{$ords->o_id}})" data-bs-toggle="modal" data-bs-target="#ord_det_modal2" class="btn-track">Details</a></td>
                                                   <td class="ec-cart-pro-track">
                                                    <a href="/track_order?track&ord_id={{$ords->order_unique_id}}" class="btn-track">Track</a>
                                                    
                                                </tr>
                                               @endforeach
                                               @else
                                               <tr>
                                                   <td style="text-align:center;" colspan="8"><i>"No orders yet"</i></td>
                                               </tr>
                                              @endif
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="ec-cart-update-bottom">
                                                <a class="btn btn-red" href="/products">Continue Shopping</a>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!--cart content End -->
                </div>
              
            </div>
        </div>
    </section>
    
    
<div class="modal fade" id="ord_det_modal2" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            
            <div class="modal-body">
                <div class="ec-cart-content">
                        <div class="ec-cart-inner">
                            <div class="row">
                                <form action="#">
                    <div class="table-content cart-table-content">
                                        <table>
                                            <thead>
                                                <tr>
                                                    <th>Product</th>
                                                    <th>Price</th>
                                                    <th style="text-align: center;">Quantity</th>
                                                    <th>Amount</th>
                                                </tr>
                                            </thead>
                                            <tbody id="replace_ord_det_content">
                                                    
                                            </tbody>
                                        </table>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>    


@push('custom-scripts')

<script type="text/javascript">
    function get_ord_detailsfn(ord_id){
        $.ajax({
        type: "POST",
        url: '/get_ord_det_uri',
        data: {
            _token: token,
            ord_id: ord_id,
        },
        success: function (data) {
            $("#replace_ord_det_content").html(data);
        }
        });
    }
</script>

@endpush
    

@endsection