@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', 'check_out') }}
    </span>
    </div>
  </div>
@stop

@section('content')
  <div class="member-wrap" id="app-content">
    <div class="container-fluid member-container">
      <div class="my-shopping mt-30 mb-20">
        <div class="shipping-address">
          <div class="shipping-title">
            {{ inject('setting')->translate('shop', 'shipping_address') }}
            @if(!$address->isEmpty())
              <div class="address_button clearfix">
                <a href="javascript:;" class="btn_address_add" id="addAddress" @click="addAddress">{{ inject('setting')->translate('shop', 'add_new_address') }}</a><i>|</i>
                <a href="javascript:;" class="btn_address_more" id="moreAddress" @click="moreAddress($event)" v-html="addressTxt"></a>
              </div>
            @endif
          </div>
          <div class="address-content">
            @if($address->isEmpty())
              <div class="address-form">
                <div class="input-group clearfix">
                  <div class="w33 fl">
                    <input type="text" name="name" class="input-text" :class="response.name ? 'null' : ''" placeholder="{{ inject('setting')->translate('shop', 'name') }}" v-model="formData.name">
                    <p class="error" v-html="response.name"></p>
                  </div>
                  <div class="w33 phone fl">
                    <input type="text" name="phone" class="input-text" :class="response.phone ? 'null' : ''" placeholder="{{ inject('setting')->translate('shop', 'phone') }}" v-model="formData.phone">
                    <p class="error" v-html="response.phone"></p>
                  </div>
                  <div class="w33 fr">
                    <input type="text" name="post_code" class="input-text" :class="response.post_code ? 'null' : ''" placeholder="{{ inject('setting')->translate('shop', 'postal_code') }}" v-model="formData.post_code">
                    <p class="error" v-html="response.post_code"></p>
                  </div>
                </div>
                <div class="input-group clearfix">
                  <div class="w100 fl">
                    <input type="text" name="address" class="input-text" :class="response.address ? 'null' : ''" placeholder="{{ inject('setting')->translate('shop', 'address') }}" v-model="formData.address">
                    <p class="error" v-html="response.address"></p>
                  </div>
                </div>
                <input type="button" value="{{ inject('setting')->translate('shop', 'save') }}" class="input-btn" @click="saveAddress">
              </div>
            @else
              <div class="address-item">
                @foreach ($address as $value)
                  @if($value->status == 1)
                    <li>
                      <p>{{ $value->name }}<a href="javascript:;" class="edit-address" @click="editAddress('{{ $value->id }}')">{{ inject('setting')->translate('shop', 'edit') }}</a></p>
                      <p>{{ $value->phone }}</p>
                      <p>{{ $value->post_code }}</p>
                      <p>{{ $value->address }}</p>
                    </li>
                  @endif
                @endforeach
              </div>
            @endif
            <div class="address-form" id="add-form">
              <div class="input-group clearfix">
                <div class="w33 fl">
                  <input type="text" name="name" class="input-text" :class="response.name ? 'null' : ''" placeholder="{{ inject('setting')->translate('shop', 'name') }}" v-model="formData.name">
                  <p class="error" v-html="response.name"></p>
                </div>
                <div class="w33 phone fl">
                  <input type="text" name="phone" class="input-text" :class="response.phone ? 'null' : ''" placeholder="{{ inject('setting')->translate('shop', 'phone') }}" v-model="formData.phone">
                  <p class="error" v-html="response.phone"></p>
                </div>
                <div class="w33 fr">
                  <input type="text" name="post_code" class="input-text" :class="response.post_code ? 'null' : ''" placeholder="{{ inject('setting')->translate('shop', 'postal_code') }}" v-model="formData.post_code">
                  <p class="error" v-html="response.post_code"></p>
                </div>
              </div>
              <div class="input-group clearfix">
                <div class="w100 fl">
                  <input type="text" name="address" class="input-text" :class="response.address ? 'null' : ''" placeholder="{{ inject('setting')->translate('shop', 'address') }}" v-model="formData.address">
                  <p class="error" v-html="response.address"></p>
                </div>
              </div>
              <input type="button" value="{{ inject('setting')->translate('shop', 'cancel') }}" @click="cancel" id="cancel_address" class="input-btn">
              <input type="button" value="{{ inject('setting')->translate('shop', 'save') }}" class="input-btn" @click="saveAddress">
            </div>
            <div class="address-list clearfix">
              @if(!$address->isEmpty())
                @foreach ($address as $value)
                  <div class="list-item @if($value->status == 1)current @endif" @click="changeStatus($event, '{{ $value->id }}')">
                    <li>
                      <p class="clearfix">{{ $value->name }}
                        <a href="javascript:;" class="edit-address" @click.stop="editAddress('{{ $value->id }}')">{{ inject('setting')->translate('shop', 'edit') }}</a>
                      </p>
                      <p>{{ $value->phone }}</p>
                      <p>{{ $value->post_code }}</p>
                      <p class="address">{{ $value->address }}</p>
                    </li>
                  </div>
                @endforeach
              @endif
            </div>
          </div>
        </div>
        <div class="shipping-title mt-20 mb-20">{{ inject('setting')->translate('shop', 'payment_method') }}</div>
        <div class="shipping-status">
          <div class="pretty p-default p-round">
            <input name="order_status" type="radio" value="0" v-model="orderStatus">
            <div class="state p-success-o">
              <label>
                <span class="pl-10 pr-10">{{ inject('setting')->translate('shop', 'online_payment') }}</span>
              </label>
            </div>
          </div>
          <div class="pretty p-default p-round">
            <input name="order_status" type="radio" value="1" v-model="orderStatus">
            <div class="state p-success-o">
              <label>
                <span class="pl-10 pr-10">{{ inject('setting')->translate('shop', 'cash_on_delivery') }}</span>
              </label>
            </div>
          </div>
        </div>
        <div class="shipping-title shipping-title-cart mt-30 mb-20">
          {{ inject('setting')->translate('shop', 'order_information') }}
          <a href="{{ url('member/cart') }}">{{ inject('setting')->translate('shop', 'return_shopping_cart') }} >></a>
        </div>
        <ul class="details-list">
          <div class="th">
            <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>

          <div class="itemFrom">
            @foreach ($data as $value)
              <div class="tr">
                <div class="td td-img">
                  <a href="{{ url('product/'.$value->product->slug.'.html') }}" class="img"><img src="{{ url($value->img) }}" /></a>
                </div>
                <div class="prod-info">
                  <div class="td td_product">
                    <a class="text" href="{{ url('product/'.$value->product->slug.'.html') }}">{{ $value->title }}</a>
                  </div>
                  <div class="td td_price">￥{{ $value->price }}</div>
                  <div class="td td_quantity">{{ $value->num }}</div>
                  <div class="td td_subtotal">￥{{ $value->subtotal }}</div>
                </div>
              </div>
            @endforeach
          </div>
        </ul>
        <div class="details-price">{{ inject('setting')->translate('shop', 'grand_total') }}：<span class="total-price" v-text="'￥' + totalPrice"></span></div>
        <div class="order-send">
          <a href="javascript:void(0)" @click="orderSend">{{ inject('setting')->translate('shop', 'place_your_order') }}</a>
        </div>
      </div>
    </div>
  </div>
@stop

@section('foot')
  <script type="text/javascript">
      new Vue({
          el: '#app-content',
          data: {
              loading: true,
              url: "{{ url('member/address') }}",
              orderStatus: 0,
              checkStatus: "{{ $addressId }}",
              formData: {
                  name: '',
                  phone: '',
                  address: '',
                  post_code: '',
                  status: 0
              },
              id: 0,
              isAdd: true,
              response: {
                  name: '',
                  phone: '',
                  address: '',
                  post_code: ''
              },
              addressTxt: "{{ inject('setting')->translate('shop', 'more_address') }}"
          },
          computed: {
              totalPrice () {
                  return Number("{{ $totalPrice }}").toFixed(2)
              }
          },
          methods: {
              editAddress: function (id) {
                  $('.address-item, .address-list, .address_button').hide();
                  $('#add-form').slideDown(500);
                  let _this = this;
                  $.ajax({
                      type: 'GET',
                      url: "{{ url('member/address') }}" + "/" + id,
                      data: {},
                      success: function (json) {
                          if (json.status == 'success') {
                              _this.formData = json.data;
                              _this.id = id;
                              _this.isAdd = false;
                          }
                      }
                  })
              },
              saveAddress: function () {
                  let _this = this;
                  let formData = _this.formData;
                  _this.response = {
                      name: '',
                      phone: '',
                      address: '',
                      post_code: ''
                  };
                  if (_this.isAdd) {
                      $.ajax({
                          type: 'POST',
                          url: "{{ url('member/address') }}",
                          headers: {
                              'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
                          },
                          data: {
                              'formData': formData
                          },
                          success: function(json) {
                              if (json.status == 'success') {
                                  window.location.reload();
                              }
                          },
                          error: function (res) {
                              Object.keys(res.responseJSON).forEach(function(key){
                                  let k = key.split(".")[1];
                                  _this.response[k] = res.responseJSON[key][0]
                              })
                          }
                      });
                  } else {
                      $.ajax({
                          type: 'PUT',
                          url: "{{ url('member/address') }}" + "/" + _this.id,
                          headers: {
                              'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
                          },
                          data: {
                              'formData': formData
                          },
                          success: function(json) {
                              if (json.status == 'success') {
                                  window.location.reload();
                              }
                          },
                          error: function (res) {
                              Object.keys(res.responseJSON).forEach(function(key){
                                  let k = key.split(".")[1];
                                  _this.response[k] = res.responseJSON[key][0]
                              })
                          }
                      });
                  }
              },
              cancel: function () {
                  $('.address-item, .address_button').show(500);
                  $('#add-form').slideUp(500);
                  let _this = this;
                  _this.formData = {
                      name: '',
                      phone: '',
                      address: '',
                      post_code: '',
                      status: 0
                  }
              },
              orderSend: function () {
                  let _this = this;
                  if (_this.checkStatus == '') {
                      swal({
                          title: "",
                          text: "{{ inject('setting')->translate('shop', 'select_shipping_address') }}",
                          type: "warning",
                          showConfirmButton: false,
                          timer: 2000,
                      });
                      return false;
                  }
                  location.href = "{{ url('member/order/store?orderId='.$orderId) }}" + '&order_status=' + _this.orderStatus;
              },
              addAddress: function () {
                  $('#add-form').slideDown(500);
                  $('.address-item, .address-list, .address_button').hide();
              },
              moreAddress: function (e) {
                  let _this = this;
                  let obj = $('.address-list');
                  $('.address-item').hide();
                  $('.address-list').slideDown(500);
                  if (obj.hasClass('address_show')) {
                      _this.addressTxt = "{{ inject('setting')->translate('shop', 'more_address') }}";
                      $('.address-item').show(500);
                      obj.removeClass('address_show').hide();
                  } else {
                      _this.addressTxt = "{{ inject('setting')->translate('shop', 'fold_address') }}";
                      $('.address-item').hide();
                      obj.addClass('address_show').slideDown(500);
                  }
              },
              changeStatus: function (e, id) {
                  let _this = this;
                  $('.address-list').removeClass('address_show').hide();
                  _this.addressTxt = "{{ inject('setting')->translate('shop', 'more_address') }}";
                  $.ajax({
                      type: 'POST',
                      url: "{{ url('member/ajax/address') }}",
                      headers: {
                          'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
                      },
                      data: {'id': id, 'action': 'status'},
                      success: function(json) {
                          if (json.status == 'success') {
                              window.location.reload();
                          }
                      }
                  });
              }
          }
      });

      $(".address-list .list-item").click(function () {
          $(this).addClass('current').siblings().removeClass('current');
          $('.address-item').html($(this).html()).show(500);
      })
  </script>
@stop