@extends('front.pages.account.index')
@section('account_title')
   {{__('Orders')}}
@endsection
@section('css')
  <link href="{{url('assets/front/css/about.css')}}" rel="stylesheet">
@endsection
@section('account_content')
<main>
<div class="content">
    <div class="row justify-content-center" style="margin-top:10px;">
        <div class="col-lg-4 col-md-4">
            <div class="box_feat">
              <h3 style="color:{{\App\Models\Order::getStatusColor()[1]}}">{{__('pending orders')}}</h3>
              <h3 style="color:{{\App\Models\Order::getStatusColor()[1]}}">{{$pending_count}}</h3>
            </div>
          </div>
          <div class="col-lg-4 col-md-4">
            <div class="box_feat">
              <h3 style="color:{{\App\Models\Order::getStatusColor()[4]}};">{{__('Hold orders')}}</h3>
              <h3 style="color:{{\App\Models\Order::getStatusColor()[4]}};">{{$hold_count}}</h3>
            </div>
          </div>
          <div class="col-lg-4 col-md-4 bg-success text-white">
              <div class="box_feat">
                <h3 style="color:{{\App\Models\Order::getStatusColor()[2]}};">{{__('Canceled')}}</h3>
                <h3 style="color:{{\App\Models\Order::getStatusColor()[2]}};">{{$canceled_count}}</h3>
              </div>
          </div>
          <div class="col-lg-4 col-md-4">
            <div class="box_feat">
              <h3 style="color:{{\App\Models\Order::getStatusColor()[5]}};">{{__('Confirmed orders')}}</h3>
              <h3 style="color:{{\App\Models\Order::getStatusColor()[5]}};">{{$confirmed_count}}</h3>
            </div>
          </div>
          <div class="col-lg-4 col-md-4">
            <div class="box_feat">
              <h3 style="color:{{\App\Models\Order::getStatusColor()[6]}};">{{__('Sending')}}</h3>
              <h3 style="color:{{\App\Models\Order::getStatusColor()[6]}};">{{$shipping_count}}</h3>
            </div>
          </div>
          <div class="col-lg-4 col-md-4">
            <div class="box_feat">
              <h3 style="color:{{\App\Models\Order::getStatusColor()[3]}};">{{__('Delivered')}}</h3>
              <h3 style="color:{{\App\Models\Order::getStatusColor()[3]}};">{{$delivered_count}}</h3>
            </div>
          </div>
          <div class="col-lg-4 col-md-4">
            <div class="box_feat">
              <h3 style="color:{{\App\Models\Order::getStatusColor()[7]}};">{{__('The price is being received')}}</h3>
              <h3 style="color:{{\App\Models\Order::getStatusColor()[7]}};">{{$the_price_being_received_count}}</h3>
            </div>
          </div>
          
          {{-- <div class="col-lg-4 col-md-4">
            <div class="box_feat">
              <h3 style="color:{{\App\Models\Order::getStatusColor()[7]}};">{{__('Commission Paid')}}</h3>
              <h3 style="color:{{\App\Models\Order::getStatusColor()[7]}};">{{$canceled_count}}</h3>
            </div>
          </div> --}}
          
      </div>
      <div class="row mb-4">
        <div class="col-lg-4 m-auto">
          <label for="status">{{__('Status')}}</label>
          <select name="" id="status" class="form-control">
            <option value="">{{__('All')}}</option>
            @foreach($statuses as $status)
              <option value="{{__($status['name'])}}">{{__($status['name'])}}</option>
            @endforeach
           
          </select>
        </div>
      </div>
      <div class="row" style="overflow-x:auto">
          <table class="table table-striped text-center" id="orders_table">
              <thead>
                <tr>
                  <th>
                    #
                  </th>
                  <th>
                      {{__('Customer Name')}}
                  </th>
                  <th>
                    {{__('Commission')}}
                  </th>
                  <th>
                      {{__('Status')}}
                  </th>
                  <th>
                      {{__('Created at')}}
                  </th>
                  <th>
                      {{__('Details')}}
                  </th>
                  <th>
                      {{__('Edit Order')}}
                  </th>
                  <th class="text-center" width="220px">
                      {{__('Change Status')}}
                  </th>
                  <th class="text-center">
                    {{__('Return Product')}}
                  </th>
                </tr>
              </thead>
              <tbody>
                    @foreach($orders as $order)
                    <tr>
                      <td>#{{$order->order_id}}</td>
                      <td>{{$order->name}}</td>
                      <td>{{formated_price($order->commission)}}</td>
                      <td style="color:{{$order->statusColor()}}"><b>{{$order->getStatus()}}</b></td>
                      <td>{{date('d/m/Y',strtotime($order->created_at))}}</td>
                      <td>
                        <a href="{{route('order_details',$order->id)}}"><i class="ti-zoom-in" style="font-size:30px"></i></a>
                      </td>
                      <td>
                        @if($order['status']==1)
                          <a href="{{route('edit_order',$order->id)}}">
                            <i class="fa fa-edit"></i>
                          </a>
                        @else 
                           <span>{{__('Not Available')}}</span>
                        @endif
                      </td>
                     <td>
                      <ul class="list-type-none" style="padding:0px">
                        @if($order->status==1)
                          <li class="display-inline">
                            <a href="{{route('cancel_order',$order->id)}}" class="btn btn-danger btn-sm"><i class="fa fa-ban"></i> {{__('Cancel')}}</a>
                          </li>
                          <li class="display-inline">
                            <a href="{{route('hold_order',$order->id)}}" class="btn btn-primary btn-sm"><i class="fa fa-pause"></i> {{__('Hold')}}</a>
                          </li>
                        @elseif($order->status==4)
                          <li class="display-inline">
                            <a href="{{route('cancel_order',$order->id)}}" class="btn btn-danger btn-sm"><i class="fa fa-ban"></i> {{__('Cancel')}}</a>
                          </li>
                          <li class="display-inline">
                            <a href="{{route('resume_order',$order->id)}}" class="btn btn-primary btn-sm"><i class="fa fa-play"></i> {{__('Resume')}}</a>
                          </li>
                        @else
                           <li>
                              <p class="text-center">{{__('Not Available')}}</p>
                           </li>
                        @endif
                      </ul>
                     </td>
                     <td>
                      @if($order['status']==3||$order['status']==7)
                        <a href="{{route('orders.return_products',$order['id'])}}">
                            <i class="fa fa-undo"></i>
                        </a>
                      @else
                        <p class="text-center">{{__('Not Available')}}</p>
                      @endif
                     </td>
                    </tr>
                    @endforeach            
              </tbody>
            </table>
      </div>
    
</div>
</main>
@endsection
@section('account_scripts')
<script>
  $(document).ready(function(){
      $('#orders').addClass('active');

      var table=$("#orders_table").DataTable({
          "bPaginate": true,
          "bLengthChange": true,
          "bFilter": true,
          "bSort": false,
          "bInfo": false,
          "bAutoWidth": false,
          @if(app()->getLocale()=='ar')
          "language": {
              "lengthMenu": "عرض _MENU_ طلبات فى الصفحه",
              "search":"بحث:",
              "paginate": {
                  "first":"الأولى",
                  "last":"الأخيره",
                  "next":"التاليه",
                  "previous": "السابقه"
              },
              "zeroRecords": "لا يوجد طلبات",
          }
          @endif
      });

      $('#status').change( function() {
            var search_text=$('#status').val();
            if (search_text){
                table
                    .columns(3)
                    .search(search_text, true, false)
                    .draw();
            } 
            else{ 
                table
                    .columns()
                    .search('')
                    .draw(); 

            }
      });
  });

  
</script>
@endsection