@extends('layout.store')
@section('title','订单确认')
@section('myCss')
<script text="type/javascript" src="/1/js/input.js"></script>
<script src="/1/js/Area.js" type="text/javascript"></script>
<script src="/1/js/AreaData_min.js" type="text/javascript"></script>
<link rel="stylesheet" href="/1/css/cart.css">
<link rel="stylesheet" href="/1/css/order.css">
<link rel="stylesheet" href="/1/css/input.css">
<script type="text/javascript">
$(function(){
  // getAddress()
  initComplexArea('seachprov', 'seachcity', 'seachdistrict', area_array, sub_array, '11', '0', '0');
});
// 获取用户地址
function getAddress(){
  var url = "{{url('/address/getAddr')}}";
  var data={'_token':'{{csrf_token()}}'}
  var success=function(data){
    for (var i = data.length - 1; i >= 0; i--) {
    $('.add').before("<li class='order_address_checkbox'><div class='addr_name'>"+ data[i]['name'] +"</div><div class='addr_phone'>"+ data[i]['phone'] +"</div><div class='addr_city'>北京市丰台区</div><div class='addr_addr'>诺德中心1期3栋1006室</div></li>")
    };
  };
  $.post(url,data,success,'json');
}

//得到地区码
function getAreaID(){
  var area = 0;
  if($("#seachdistrict").val() != "0"){
    area = $("#seachdistrict").val();
  }else if ($("#seachcity").val() != "0"){
    area = $("#seachcity").val();
  }else{
    area = $("#seachprov").val();
  }
  return area;
}
//根据地区码查询地区名
function getAreaNamebyID(areaID){
  var areaName = "";
  if(areaID.length == 2){
    areaName = area_array[areaID];
  }else if(areaID.length == 4){
    var index1 = areaID.substring(0, 2);
    areaName = area_array[index1] + " " + sub_array[index1][areaID];
  }else if(areaID.length == 6){
    var index1 = areaID.substring(0, 2);
    var index2 = areaID.substring(0, 4);
    areaName = area_array[index1] + " " + sub_array[index1][index2] + " " + sub_arr[index2][areaID];
  }
  return areaName;
}
</script>
@endsection
@section('content')
<div class="shouye">
  <a href="{{url('/')}}"><img src="/1/img/home.gif" height="21px" width="21px" alt=""></a>
  <p>订单确认</p>
</div>
<div class="cart_con">
  <div class="cart_top">
    <img src="/1/img/icon_cart_02.png" alt="">
    <span>订单确认</span>
    <ul class="cart_nav">
      <li>
        <p>STEP01</p>
        <p>购物车</p>
      </li>
      <li class="li_on">
        <p>STEP02</p>
        <p>订单确认</p>
      </li>
      <li>
        <p>STEP03</p>
        <p>付款</p>
      </li>
      <li>
        <p>STEP04</p>
        <p>付款成功</p>
      </li>
    </ul>
  </div>
  <form id="order_create" action="{{url('/order/create')}}" method="post">
  <div class="order_address">
    <div class="order_address_title">收货人信息</div>
    <ul class="order_address_list">@foreach($addresses as $k=>$v) @if($v['isdefault'] == 1)
      <li class="order_address_checkbox addr_li  checked ">@else
        <li class="order_address_checkbox addr_li">@endif
          <input class="addr_idd" type="hidden" value="{{$v['id']}}">
          <div class="addr_name">{{$v['name']}}</div>
          <div class="addr_phone">{{$v['phone']}}</div>
          <div class="addr_city">{{$v['addr']}}</div>
          <div class="addr_addr">{{$v['jiedao']}}</div>
          <div class="addr_caozuo">
            <a class="addr_edit">使用此地址</a>
            <a class="addr_del">删除</a></div>
        </li>@endforeach
        <li class="order_address_checkbox add">
          <div class="order_address_add_icon"></div>
          <div class="order_address_add_text">添加新地址</div></li>
    </ul>
  </div>
  <table style="width:93%;margin:0 auto">
    <thead>
      <div style="clear:both" class="order_goods_title">商品信息</div>
      <tr class="order_thead">
        <th style="width:30%">商品</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th></tr>
    </thead>
    <tbody>@foreach($goods as $k=>$v)
      <tr>
        <td class="order_goods">
          <img class="good_img" src="{{$v['pic']}}" alt="">
          <p>{{$v['title']}}</p>
        </td>
        <td class="zz_price">￥
          <span class="cart_price">{{$v['price']}}</span></td>
        <td>{{$v['num']}}</td>
        <td class="zz_total">￥
          <span class="cart_total">{{$total}}</span></td>
      </tr>@endforeach</tbody>
  </table>
  <div class="order_bottom">
    <div class="fp_more">
      <span>备注</span>
      <textarea name="comment" placeholder="请在此备注发票等相关信息……"></textarea>
    </div>
    <div class="order_bottom_total">
      <p>合计：
        <span class="z_total">{{$total}}</span>
      </p>
      {{csrf_field()}}
      <input type="hidden" name="addr_id" class="addr_id" value="">
      <input type="hidden" name="order_total" value="{{$total}}">
      <a class="cartSubmit">提交订单</a>
    </div>
  </div>
  </form>
</div>
<div class="addr_mask">
  <div class="add_addr">
    <div class="add_addr_head">
      <p>添加新地址</p>
      <div class="add_addr_close addr_x"></div>
    </div>
    <form id="add_addr">
      <div class="add_addr_main">
        <div class="add_addr_row intwo">
          <div>收货人姓名<span class="bitian"> *</span><input type="text" name="addr_name"></div>
          <div>收货人电话<span class="bitian"> *</span><input type="text" name="addr_phone"></div>
        </div>
        <div class="add_addr_row">
          <div>收货人地址<span class="bitian"> *</span>
            <div class="addr_select" style="margin-left:6px">
                <select id="seachprov" name="seachprov" onChange="changeComplexProvince(this.value, sub_array, 'seachcity', 'seachdistrict');"></select>&nbsp;&nbsp;
                <select id="seachcity" name="homecity" onChange="changeCity(this.value,'seachdistrict','seachdistrict');"></select>&nbsp;&nbsp;
                <span id="seachdistrict_div"><select id="seachdistrict" name="seachdistrict"></select></span>
            </div>
          </div>
        </div>
        <div class="add_addr_row inone">
          <div><span style="margin:0 7px">详细地址</span><span class="bitian"> *</span><input type="text" name="addr_addr"></div>
        </div>
      </div>
      <p class="addr_error" style="display:block"></p>
      <div class="add_addr_foot">
        <button type="button" class="addr_true">确认</button>
        <button type="button" class="addr_false addr_x">取消</button>
      </div>
      </form>
  </div>
</div>
@endsection

@section('myJs')
<script>
  // 提交订单
  $('.cartSubmit').click(function(){
    var addr_id = $('.checked .addr_idd').val()
    if (!addr_id) {
      swal('','请选择收货地址','warning')
    }else{
      // 获取用户地址id
      $('.addr_id').val(addr_id)
      $('#order_create').submit()
    }
  })
// 删除地址操作
  $('.addr_del').click(function(){
      var zhe = $(this)
      var del = $(this).parent().siblings('input').val()
      swal({
        // title: '删除',
        text: "您确定删除此条地址吗?",
        type: 'question',   //感叹号图标
        showCancelButton: true,   //显示取消按钮
        confirmButtonColor: '#3085d6', //俩个按钮的颜色
        cancelButtonColor: '#d33',
        confirmButtonText: '删除', //俩个按钮的文本
        cancelButtonText: '取消',
        confirmButtonClass: 'btn btn-success',  //俩个按钮的类样式
        cancelButtonClass: 'btn btn-danger',

      }).then(function() {
        // $(del).parents('li').remove();
        var url = '{{url('/address/del')}}';
        var id = del
        var data={
          'id':id,
          '_token':'{{csrf_token()}}'
          };
        var success=function(response){
          if(response.error==1){
            swal('',response.errmsg,'success')
          }else{
            $(zhe).parents('li').remove();
          }
        };
        $.post(url,data,success,'json');
      })
  })

// 添加新地址
  $('.addr_true').click(function(){
    // alert(getAreaID())
    var name =  $("input[name='addr_name']").val()
    var phone =  $("input[name='addr_phone']").val()
    var area =  getAreaNamebyID(getAreaID())
    var addr =  $("input[name='addr_addr']").val()
    if (name == '') {
      $('.addr_error').html('请输入收件人姓名！')
      return false;
    }else if(phone == ''){
      $('.addr_error').html('请输入收件人电话！')
      return false;
    }else if(!phone.match(/^[1][34578][0-9]{9}$/)){
      $('.addr_error').html('请输入正确的手机号码！')
      return false;
    }else if(area.length < 4){
      $('.addr_error').html('请选择收货地址！')
      return false;
    }else if(addr == ''){
      $('.addr_error').html('请输入详细收件地址！')
      return false;
    }else{
      var url = "{{url('/address/insert')}}";
      var data={
        'name':name,
        'phone':phone,
        'area':area,
        'addr':addr,
        'isdefault':1,
        '_token':'{{csrf_token()}}',
        }
      var success=function(response){
        if(response.error==1){
          swal('',response.errmsg,'error')
        }else if(response.len == 1){
          // alert(response.res['id'])
          $('.add').before("<li class='order_address_checkbox checked addr_li'><input type='hidden' class='addr_idd'  value='"+ response.res['id'] +"'><div class='addr_name'>"+ name+"</div><div class='addr_phone'>"+ phone +"</div><div class='addr_city'>"+ area +"</div><div class='addr_addr'>"+ addr +"</div><div class='addr_caozuo'><a onclick='tianjia("+ 'this'+")' class='addr_edit moren'>使用此地址</a><a onclick='shanchu()' class='addr_del'>删除</a></div></li>")
          $('.addr_mask').fadeOut(300);
          $('#add_addr')[0].reset();
        }else{
          $('.add').before("<li class='order_address_checkbox addr_li'><input type='hidden' class='addr_idd' value='"+ response.res['id'] +"'><div class='addr_name'>"+ name+"</div><div class='addr_phone'>"+ phone +"</div><div class='addr_city'>"+ area +"</div><div class='addr_addr'>"+ addr +"</div><div class='addr_caozuo'><a onclick='tianjia("+ 'this'+")' class='addr_edit moren'>使用此地址</a><a onclick='shanchu()' class='addr_del'>删除</a></div></li>")
          $('.addr_mask').fadeOut(300);
          $('#add_addr')[0].reset();
        }
      };
      $.post(url,data,success,'json');
    }
  })
// 地址选择
$('.addr_edit').click(function(){
  $(this).parents('li').siblings().removeClass('checked')
  $(this).parents('li').addClass('checked')
})
function tianjia(obj){
  $(obj).parents('li').siblings().removeClass('checked')
  $(obj).parents('li').addClass('checked')
}
function shanchu(){
  swal('','参数错误，请刷新页面重试','warning')
}

  $("input").blur(function(){
    $('.addr_error').html('')
  });
  $("select").blur(function(){
    $('.addr_error').html('')
  });
  $('.addr_x').click(function(){
    $('.addr_mask').fadeOut(300);
    $('#add_addr')[0].reset();
    $('.addr_error').html('')
  })
  $('.order_address_checkbox.add').click(function(){

    // location.reload();return;
    $('.addr_mask').fadeIn(300);
  })

  $('.order_address_checkbox.add').mouseover(function(){
    $('.order_address_add_icon').css('background-color','#00c3f5')
    $('.order_address_add_text').css('color','#00c3f5')
  })
  $('.order_address_checkbox.add').mouseleave(function(){
    $('.order_address_add_icon').css('background-color','#bdbdbd')
    $('.order_address_add_text').css('color','#bdbdbd')
  })

</script>
@endsection