@extends('theme::template')

@section('head')
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <link rel="stylesheet" href="{{ themePath('css/member.css') }}">
  <link rel="stylesheet" href="{{ config('system.icon_url') }}">
@stop

@section('banner')
  <div class="nbanner">
    <img src="{{ inject('ad')->single(4, 0, 'img') }}" alt="{{ inject('ad')->single(4, 0, 'title') }}">
  </div>
@stop

@section('anchor')
  <div id="anchor">
    <div class="container-fluid">
      <span class="anchor">
      <a href="{{ url('/') }}">{{ inject('setting')->translate('shop', 'home') }}</a> >
      <a href="{{ url('member/order') }}">{{ inject('setting')->translate('shop', 'order_center') }}</a> >
          {{ inject('setting')->translate('shop', 'my_orders') }}
      </span>
    </div>
  </div>
@stop

@section('left')
  <h3 class="left-title">{{ inject('setting')->translate('shop', 'personal_center') }}</h3>
  <ul class="cate-list">
    <div class="category">
      <a class="list-title active" href="{{ url('member/order') }}">{{ inject('setting')->translate('shop', 'my_orders') }}</a>
      <a class="list-title" href="{{ url('member/address') }}">{{ inject('setting')->translate('shop', 'shipping_address') }}</a>
      <a class="list-title" href="{{ url('member/change-pwd') }}">{{ inject('setting')->translate('shop', 'change_password') }}</a>
    </div>
  </ul>
@endsection

@section('right')
  <div class="member-wrap" id="app-content">
    <div class="my-order">
      <ul class="order-sort">
        <li v-for="(item, index) in status" :class="{'active': index == isActive}">
          <a v-text="item" :href="homeUrl + '/member/order?status=' +index"></a>
        </li>
      </ul>

      <div class="orders_list_table">
        @if(!$data->isEmpty())
          @foreach ($data as $value)
            <div class="orders_item">
              <div class="list_oid">
                <span class="dateTime">
                  <span class="date">{{ $value->created_at }}</span>
                </span>
                <span class="orderNumber">
                  <span class="number">{{ inject('setting')->translate('shop', 'order_number') }}：{{ $value->order_id }}</span>
                  @if($value->status >= 2)
                    <span class="number">{{ inject('setting')->translate('shop', 'express') }}：{{ $value->express->name }}</span>
                    <span class="number">{{ inject('setting')->translate('shop', 'express_order') }}：{{ $value->express_order }}</span>
                  @endif
                </span>
              </div>
              <div class="list_opl clearfix">
                <div class="opl_item detail">
                  @foreach ($value->list as $k => $val)
                    <div class="list">
                      <div class="clearfix">
                        <a href="{{ url('product/'.$val->product->slug.'.html') }}" class="pic">
                          <img src="{{ url($val->img) }}" alt="{{ $val->title }}">
                        </a>
                        <div class="desc">
                          <p class="name">{{ $val->title }}</p>
                          <span class="p_price">￥{{ $val->price }} <i>x {{ $val->num }}</i></span>
                        </div>
                      </div>
                    </div>
                  @endforeach
                </div>
                <div class="opl_item o_price">￥{{ $value->total_fee }}</div>
                <div class="opl_item o_status">
                  @if($value->order_status == 1)
                    {{ inject('setting')->translate('shop', 'cash_on_delivery') }}
                  @else
                    {{ inject('setting')->translate('shop', 'online_payment') }}
                  @endif
                </div>
                <div class="opl_item o_status">
                  <span v-html="status[{{ $value->status }} + 1]"></span>
                </div>
                @if($value->order_status == 0 && $value->status == 0)
                  <div class="opl_item options">
                      <a href="{{ url('member/pay?orderId='.$value->order_id) }}" class="order-btn pay">{{ inject('setting')->translate('shop', 'pay_now') }}</a>
                      <a href="javascript:void(0)" class="order-btn cancel" @click="removeOrder({{ $value->id }}, '{{ $value->order_id }}')">{{ inject('setting')->translate('shop', 'cancel_order') }}</a>
                  </div>
                @endif
              </div>
            </div>
          @endforeach
        @else
          <div class="no-content-icon">
            <i class="iconfont icon-dingdan"></i>
            <p>{{ inject('setting')->translate('shop', 'empty_order') }}</p>
          </div>
        @endif
      </div>
    </div>
  </div>
@endsection

@section('foot')
  <script type="text/javascript">
      new Vue({
          el: '#app-content',
          data: {
              homeUrl: HOME_URL,
              isActive: '{{ $status }}',
              status: ["{{ inject('setting')->translate('shop', 'all') }}", "{{ inject('setting')->translate('shop', 'await_pay') }}", "{{ inject('setting')->translate('shop', 'await_delivery') }}", "{{ inject('setting')->translate('shop', 'shipped') }}", "{{ inject('setting')->translate('shop', 'finished') }}"]
          },
          methods: {
              removeOrder: function(id, orderId) {
                  swal({
                          title: "",
                          text: "{{ inject('setting')->translate('shop', 'irretrievable_deletion') }}",
                          type: "warning",
                          showCancelButton: true,
                          confirmButtonColor: "#1890ff",
                          confirmButtonText: "Confirm",
                          cancelButtonText: "Cancel",
                          closeOnConfirm: false,
                          closeOnCancel: true
                      },
                      function() {
                          $.ajax({
                              type: "POST",
                              url: "{{ url('/member/ajax/order') }}",
                              headers: {
                                  'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
                              },
                              data: {'id': id, 'orderId': orderId, 'action': 'delete'},
                              success: function(json) {
                                  if (json.status == 'success') {
                                      swal({
                                          title: "",
                                          text: "{{ inject('setting')->translate('shop', 'success_deleted') }}",
                                          type: "success",
                                          showConfirmButton: false,
                                          timer: 1200,
                                      });
                                      setTimeout("location.reload()", 1200);
                                  } else {
                                      swal("{{ inject('setting')->translate('shop', 'fail_delete') }}");
                                  }
                              }
                          });
                      });
              },
          },
      });
  </script>
@endsection