@extends('theme::template')

@section('head')
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <link rel="stylesheet" href="{{ themePath('css/member.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">
      <span class="anchor">
      <a href="{{ url('/') }}">{{ inject('setting')->translate('shop', 'home') }}</a> >
      <a href="{{ url('member') }}">{{ inject('setting')->translate('shop', 'personal_center') }}</a> >
          {{ inject('setting')->translate('shop', 'shipping_address') }}
      </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" href="{{ url('member/order') }}">{{ inject('setting')->translate('shop', 'my_orders') }}</a>
      <a class="list-title active" 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="member-address">
      <div class="add-address" @click="addAddress">+{{ inject('setting')->translate('shop', 'add_new_address') }}</div>
      <div class="address-lists">
        @if(!$address->isEmpty())
          @foreach($address as $value)
            <div @if($value->status == 1) class="add_item default" @else class="add_item"@endif>
              <div class="rows top">
                <strong>
                  <b>{{$value->name}}</b>
                  <span class="phone">{{$value->phone}}</span>
                </strong>
              </div>
              <div class="addr_detail">{{$value->address}}</div>
              <div class="options">
                <div class="user_action_down">
                  <div class="default_edit fl" @if($value->status == 0) @click="setDefault('{{ $value->id }}')" @endif>
                    <i></i>
                    <a href="javascript:void(0)" name="default" data-id="{{$value->id}}">{{ inject('setting')->translate('shop', 'default') }}</a>
                  </div>
                  <ul class="fr">
                    <li><a href="javascript:void(0)" name="del" data-id="{{$value->id}}" @click="removeAddress('{{ $value->id }}')">{{ inject('setting')->translate('shop', 'remove') }}</a></li>
                    <li><a href="javascript:void(0)" name="edit" @click="editAddress('{{ $value->id }}')">{{ inject('setting')->translate('shop', 'edit') }}</a></li>
                  </ul>
                </div>
              </div>
            </div>
          @endforeach
        @endif
      </div>

      <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', 'cancel') }}" id="cancel_address" @click="cancel" class="input-btn">
        <input type="button" value="{{ inject('setting')->translate('shop', 'save') }}" class="input-btn" @click="saveAddress">
      </div>
    </div>
  </div>
@endsection

@section('foot')
  <script type="text/javascript">
      new Vue({
          el: '#app-content',
          data: {
              isAdd: true,
              formData: {
                  name: '',
                  phone: '',
                  address: '',
                  post_code: '',
                  status: 0
              },
              response: {
                  name: '',
                  phone: '',
                  address: '',
                  post_code: ''
              },
          },
          created: function() {
          },
          methods: {
              addAddress: function () {
                  let _this = this;
                  _this.isAdd = true;
                  $(".address-lists, .add-address").hide();
                  $(".address-form").slideDown(500);
              },
              editAddress: function (id) {
                  let _this = this;
                  _this.isAdd = false;
                  $(".address-lists, .add-address").hide();
                  $(".address-form").slideDown(500);
                  $.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-lists, .add-address').show();
                  $('.address-form').slideUp(500);
              },
              removeAddress: function (id) {
                  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/address') }}" + '/' + 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,
                                      });
                                      setTimeout("location.reload()", 1200);
                                  } else {
                                      swal("{{ inject('setting')->translate('shop', 'fail_delete') }}");
                                  }
                              }
                          });
                      });
              },
              setDefault: function (id) {
                  $.ajax({
                      type: 'POST',
                      url: "{{ url('member/ajax/address') }}",
                      headers: {
                          'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
                      },
                      data: {'action': 'status', 'id': id},
                      success: function (json) {
                          if (json.status == 'success') {
                              location.reload();
                          }
                      }
                  })
              }
          }
      })
  </script>
@endsection