@extends('layouts.app')

@push('before-css')
  <!-- This page CSS -->
  <!-- Page CSS -->
  <link href="{{asset('plugins/vendors/bootstrap-checkbox/awesome-bootstrap-checkbox.css')}}" rel="stylesheet" type="text/css">
  <link href="{{asset('assets/css/pages/order-page.css')}}" rel="stylesheet" type="text/css">
@endpush
@section('content')
  <!-- ============================================================== -->
  <!-- Container fluid  -->
  <!-- ============================================================== -->
  <div class="container-fluid">
    <!-- ============================================================== -->
    <!-- Breadcrumbs box -->
    <!-- ============================================================== -->
    <!--
    <nav class="breadcrumb">
      <span class="breadcrumb-item text-dark">Ecommerce</span>
      <a class="breadcrumb-item text-dark" href="{{url('admin/order/list')}}">Orders</a>
      <a class="breadcrumb-item text-primary">Orders Page</a>
    </nav>
    -->
    <!-- ============================================================== -->
    <!-- End Breadcrumbs box -->
    <!-- ============================================================== -->
    <!-- ============================================================== -->
    <!-- Info box -->
    <!-- ============================================================== -->
    <div class="row">
      <!-- Column -->
      <div class="col-lg-12 col-md-12">
        <div class="card">
          <div class="card-body">
            <div class="row">

              <div class="col-lg-8">
                <div class="order-status">
                    @if($order->order_status == "Pending")
                  <ul>
                    <li class="active-link">
                      <div class="white-bg">
                        <div class="circle-top"><div class="circle-1"></div>
                        </div>
                      </div>
                      <span>Pending</span></li>
					
                    <li class="non-active">
                      <div class="white-bg">
                        <div class="circle-top"><div class="circle-1"></div>
                        </div>
                      </div>
                      <button<span>Completed</span></li>
                  </ul>
				  @else
					  <ul>
                    <li class="non-active">
                      <div class="white-bg">
                        <div class="circle-top"><div class="circle-1"></div>
                        </div>
                      </div>
                      <span>Pending</span></li>
					
                    <li class="active-link">
                      <div class="white-bg">
                        <div class="circle-top"><div class="circle-1"></div>
                        </div>
                      </div>
                      <span>Completed</span></li>
                  </ul>
				  @endif
                </div>
              </div>

              <div class="col-lg-4">
                <div class="btn-group pull-right">
                  <div class="dropdown">
                    <button aria-expanded="false" data-toggle="dropdown" class="btn waves-effect waves-light btn-rounded btn-outline-primary dropdown-toggle m-t-10" type="button">Change Order Status <span class="caret"></span></button>
                    <ul role="menu" class="dropdown-menu"> 
                      <li><a href="javascript:void()"  onclick="window.location.href='{{ route('status.pending',[$order->id ]) }}'" class="">Pending</a></li>
                      <li><a href="javascript:void()"  onclick="window.location.href='{{ route('status.completed',[$order->id ]) }}'" class="">Completed</a></li>

                    </ul>
                  </div>
                </div>
              </div>
            </div>


          </div>
        </div>
      </div>
      <!-- Column -->
    </div>
    <!-- ============================================================== -->
    <!-- End Info box -->

    <!--Delivery details -->
    <!-- ============================================================== -->
    <div class="row">
      <!-- Column -->
      <div class="col-lg-12 col-md-12">
        <div class="card">
          <div class="card-body">
            <div class="d-flex m-b-10 no-block">
              <h5 class="card-title m-b-0 align-self-center text-uppercase">Order id  {{$order->id}}</h5>
              <div class="ml-auto">
                <ul class="list-inline m-t-5 text-muted text-uppercase lp-5 font-medium font-12">
                  <li> {{date('F d, Y',strtotime($order->created_at))}}</li>

                </ul>
              </div>
            </div>

            <div class="table-responsive">
              <table class="table product-table color-table primary-table">
                <thead>
                <tr>
				
                  <th>ID </th>
                  <th>Product</th>
                 <th>&nbsp;</th>
                  <th>Language</th>
                  <th>Price</th>
                  <th>QTY</th>
                  <th>Total</th>

                </tr>
                </thead>
                <tbody>
							@foreach($order_products as $order_product)