@extends('theme::template_custom')

@section('head')
  <link rel="stylesheet" href="{{ themePath('css/member.css') }}">
  <link rel="stylesheet" href="{{ themePath('css/pretty.css') }}">
@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 member-container">
		<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_shopping_cart') }}
    </span>
    </div>
  </div>
@stop

@section('content')
  <div class="member-wrap" id="app-content">
    <div class="container-fluid member-container">
      <div class="my-cart mt-20 mb-20 clearfix">
        <div class="list-information">
          <div class="list-title">{{ inject('setting')->translate('shop', 'shopping_cart') }}</div>
          <div class="item_from_table">
            <div class="th">
              <div class="td td_select"></div>
              <div class="td-info">
                <div class="td td_product">{{ inject('setting')->translate('shop', 'products') }}</div>
                <div class="td td_price">{{ inject('setting')->translate('shop', 'price') }}</div>
                <div class="td td_quantity">{{ inject('setting')->translate('shop', 'quantity') }}</div>
                <div class="td td_subtotal">{{ inject('setting')->translate('shop', 'subtotal') }}</div>
                <div class="td td_action">{{ inject('setting')->translate('shop', 'action') }}</div>
              </div>
            </div>

            <div id="cart-list" v-if="!loading">
              <template v-if="carts.length > 0">
                <div class="tr" v-for="(item, index) in carts" :key="index">
                  <div class="td td_select">
                    <div class="pretty p-curve p-default">
                      <input name="ids[]" class="id" type="checkbox" :value="item.id" v-model="checkboxModel" @change="checkedItem(index, item.id)" />
                      <div class="state p-info">
                        <label></label>
                      </div>
                    </div>
                  </div>
                  <div class="td td-info">
                    <div class="td td_img">
                      <a :href="homeUrl + '/product/' + item.product.slug + '.html'">
                        <div class="img"><img :src="item.img" :alt="item.title"></div>
                      </a>
                    </div>
                    <div class="prod-info">
                      <div class="td td_product">
                        <div class="shop-info">
                          <a :href="homeUrl + '/product/' + item.product.slug + '.html'">
                            <div class="wz pl-10" >
                              @{{ item.title }}
                            </div>
                          </a>
                        </div>
                      </div>
                      <div class="td td_price">￥<span class="price" v-text="item.price"></span></div>
                      <div class="td td_quantity">
                        <div class="num clearfix">
                          <input class="num-left" type="text" name="numbers" :value="item.num" placeholder="0" @blur="updateNum($event, index)">
                          <div class="num-right">
                            <button class="num-add" @click="addNum(index)">+</button>
                            <button class="num-minus"  @click="minuNum(index)">-</button>
                          </div>
                        </div>
                      </div>
                      <div class="td td_subtotal">
                        <div class="total-price">
                          ￥<span v-text="item.subtotal"></span>
                        </div>
                      </div>
                      <div class="td td_action">
                        <a href="javascript:void(0)" class="order-btn" @click="remove(index, item.id)"><i class="iconfont icon-shanchu"></i></a>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="tr tr-center">
                  <div class="td">
                    <div class="no-content-icon">
                      <i class="iconfont icon-shangcheng"></i>
                      <p>{{ inject('setting')->translate('shop', 'empty_shopping_cart') }}</p>
                    </div>
                  </div>
                </div>
              </template>
            </div>

            <div v-if="loading">
              <div class="tr tr-center">
                <div class="td">
                  <img class="mr-10" src="{{ url('data/assets/images/load02.gif') }}" style="width: 25px; height: 25px;">
                </div>
              </div>
            </div>

            <div v-if="!loading && carts.length > 0">
              <div class="tr">
                <div class="td td_select">
                  <div class="pretty p-curve p-default">
                    <input type="checkbox" v-model='checked' @click='checkedAll' />
                    <div class="state p-info">
                      <label></label>
                    </div>
                  </div>
                </div>
                <div class="td">
                  <div class="all-pay">
                    <a href="javascript:void(0)" class="remove" @click="removeAll">{{ inject('setting')->translate('shop', 'remove') }}</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="list-summary">
          <div class="list_summary_title">{{ inject('setting')->translate('shop', 'order_summary') }}</div>
          <div class="product_price_container">
            <div class="product_price_info total_box clearfix">
              <div class="product_price_title"><label>{{ inject('setting')->translate('shop', 'subtotal') }}</label></div>
              <div class="product_price_value"><strong v-text="'￥' + allPrice"></strong></div>
            </div>
            <div class="button_info">
              <a href="javascript:;" class="now-pay" rel="nofollow" @click="settlement">{{ inject('setting')->translate('shop', 'check_out') }}</a>
              <a href="{{ url('/') }}" class="btn_continue" rel="nofollow">{{ inject('setting')->translate('shop', 'continue_shopping') }}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@stop

@section('foot')
  <script type="text/javascript">
      new Vue({
          el: '#app-content',
          data: {
              loading: true,
              checked: true,
              homeUrl: HOME_URL,
              carts: {},
              checkboxModel: [],
              allPrice: 0,
              oldNum: 0,
          },
          created: function() {
              this.loadCart();
          },
          watch: {//深度 watcher
              'checkboxModel': {
                  handler: function (val, oldVal) {
                      if (this.checkboxModel.length === this.carts.length) {
                          this.checked = true;
                      }else{
                          this.checked = false;
                      }
                  },
                  deep: true
              }
          },
          methods: {
              loadCart: function() {
                  var _this = this;
                  $.ajax({
                      type: "GET",
                      url: "{{ url('/member/ajax/cart') }}",
                      success: function(json) {
                          _this.loading = true;
                          if (json.status == 'success') {
                              _this.carts = json.data.carts;
                              _this.checkboxModel = json.data.ids;
                              _this.loading = false;
                              _this.totalPrice();
                          }
                      }
                  });
              },
              checkedItem: function(index, id) {
                  this.totalPrice();
                  let status = this.in_array(id, this.checkboxModel) ? 1 : 0;
                  $.ajax({
                      type: 'POST',
                      url: "{{ url('/member/ajax/cart') }}",
                      headers: {
                          'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
                      },
                      data: {'id': id, 'all_status': status, 'action': 'update'},
                      dataType: 'json',
                      success: function (json) {
                      }
                  })
              },
              addNum: function(index) {
                  let _this = this;
                  $.ajax({
                      type: 'POST',
                      url: "{{ url('/member/ajax/cart') }}",
                      headers: {
                          'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
                      },
                      data: {'id': _this.carts[index].id, 'product_id': _this.carts[index].product_id, 'num': parseInt(_this.carts[index].num) + 1, 'subtotal': ((parseInt(_this.carts[index].num) + 1)*parseFloat(_this.carts[index].price)).toFixed(2), 'action': 'update'},
                      dataType: 'json',
                      success: function (json) {
                          if (json.data.num_status == 1) {
                              swal({
                                  title: "",
                                  text: "{{ inject('setting')->translate('shop', 'inventory_shortage') }}",
                                  type: "warning",
                                  showConfirmButton: false,
                                  timer: 2000,
                              });
                          } else {
                              _this.carts[index].num++;
                              _this.carts[index].subtotal = (parseInt(_this.carts[index].num)*parseFloat(_this.carts[index].price)).toFixed(2);
                              _this.totalPrice();
                          }
                      }
                  })

              },
              minuNum: function(index) {
                  let _this = this;
                  if (_this.carts[index].num > 1) _this.carts[index].num--;
                  _this.carts[index].subtotal = (parseInt(_this.carts[index].num)*parseFloat(_this.carts[index].price)).toFixed(2);
                  $.ajax({
                      type: 'POST',
                      url: "{{ url('/member/ajax/cart') }}",
                      headers: {
                          'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
                      },
                      data: {'id': _this.carts[index].id, 'product_id': _this.carts[index].product_id, 'num': _this.carts[index].num, 'subtotal': _this.carts[index].subtotal, 'action': 'update'},
                      dataType: 'json',
                      success: function (json) {
                      }
                  })
                  _this.totalPrice();
              },
              updateNum: function(e, index) {
                  let _this    = this;
                  let num      = e.target.value < 1 ? 1 : e.target.value;
                  _this.oldNum = _this.carts[index].num;
                  $.ajax({
                      type: 'POST',
                      url: "{{ url('/member/ajax/cart') }}",
                      headers: {
                          'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
                      },
                      data: {'id': _this.carts[index].id, 'product_id': _this.carts[index].product_id, 'num': num, 'subtotal': (parseInt(num)*parseFloat(_this.carts[index].price)).toFixed(2), 'action': 'update'},
                      dataType: 'json',
                      success: function (json) {
                          if (json.data.num_status == 1) {
                              swal({
                                  title: "",
                                  text: "{{ inject('setting')->translate('shop', 'inventory_shortage') }}",
                                  type: "warning",
                                  showConfirmButton: false,
                                  timer: 2000,
                              });
                              _this.$set(_this.carts[index], num, _this.oldNum);
                          } else {
                              _this.carts[index].num      = parseInt(num);
                              _this.carts[index].subtotal = (parseInt(num)*parseFloat(_this.carts[index].price)).toFixed(2);
                              _this.totalPrice();
                          }
                      }
                  })
              },
              totalPrice: function() {
                  let _this = this;
                  _this.allPrice = 0;
                  for (i = 0; i < _this.checkboxModel.length; i++) {
                      for (j = 0; j < _this.carts.length; j++) {
                          if (_this.checkboxModel[i] == _this.carts[j].id) {
                              _this.allPrice += parseFloat(_this.carts[j].subtotal);
                          }
                      }
                  }
                  _this.allPrice = parseFloat(_this.allPrice).toFixed(2);
              },
              remove: function(index, id) {
                  let _this = this;
                  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: "DELETE",
                              url: "{{ url('/member/cart') }}" + '/' + id,
                              headers: {
                                  'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
                              },
                              success: function(json) {
                                  if (json.status == 'success') {
                                      swal({
                                          title: "",
                                          text: "{{ inject('setting')->translate('shop', 'success_deleted') }}",
                                          type: "success",
                                          showConfirmButton: false,
                                          timer: 1200,
                                      });
                                      _this.carts.splice(index, 1);
                                      var indexCheck = _this.checkboxModel.indexOf(id);
                                      if (indexCheck > -1) _this.checkboxModel.splice(indexCheck, 1);
                                      _this.totalPrice();
                                      setTimeout("location.reload()", 1200);
                                  } else {
                                      swal("{{ inject('setting')->translate('shop', 'fail_delete') }}");
                                  }
                              }
                          });
                      });
              },
              removeAll: function() {
                  if (this.checkboxModel.length == 0) {
                      swal({
                          title: "",
                          text: "{{ inject('setting')->translate('shop', 'want_delete_item') }}",
                          type: "warning",
                          showConfirmButton: false,
                          timer: 2000,
                      });
                      return false;
                  }
                  let _this = this;
                  let ids = [];
                  $('.id:checked').each(function(){
                      ids.push(this.value);
                  });
                  ids = ids.join('-');
                  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: "DELETE",
                              url: "{{ url('/member/cart') }}" + '/' + ids,
                              headers: {
                                  'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
                              },
                              success: function(json) {
                                  if (json.status == 'success') {
                                      swal({
                                          title: "",
                                          text: "{{ inject('setting')->translate('shop', 'success_deleted') }}",
                                          type: "success",
                                          showConfirmButton: false,
                                          timer: 1200,
                                      });
                                      _this.checkboxModel = [];
                                      _this.totalPrice();
                                      setTimeout("location.reload()", 1200);
                                  } else {
                                      swal("{{ inject('setting')->translate('shop', 'fail_delete') }}");
                                  }
                              }
                          });
                      });
              },
              checkedAll: function() {
                  var _this = this;
                  if (_this.checked) {//实现反选
                      _this.checkboxModel = [];
                      $.ajax({
                          type: 'POST',
                          url: "{{ url('/member/ajax/cart') }}",
                          headers: {
                              'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
                          },
                          data: {'all_status': 0, 'action': 'update'},
                          dataType: 'json',
                          success: function (json) {
                          }
                      })
                  } else {//实现全选
                      _this.checkboxModel = [];
                      _this.carts.forEach(function(item) {
                          _this.checkboxModel.push(item.id);
                      });
                      $.ajax({
                          type: 'POST',
                          url: "{{ url('/member/ajax/cart') }}",
                          headers: {
                              'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
                          },
                          data: {'all_status': 1, 'action': 'update'},
                          dataType: 'json',
                          success: function (json) {
                          }
                      })
                  }
                  _this.totalPrice();

              },
              settlement: function() {
                  if (this.checkboxModel.length == 0) {
                      swal({
                          title: "",
                          text: "{{ inject('setting')->translate('shop', 'at_least_one_item') }}",
                          type: "warning",
                          showConfirmButton: false,
                          timer: 2000,
                      });
                      return false;
                  }
                  location.href = "{{ url('/member/shopping') }}";
              },
              in_array: function(search, array) {
                  for (var i in array) {
                      if (array[i] == search) {
                          return true;
                      }
                  }
                  return false;
              },
          },
      });
  </script>
@stop