@extends('layout.wap')
@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>
<script src="/1/js/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" href="/1/css/sweetalert2.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>
<style type="text/css">
.addr_mask{display:none;}
</style>
@endsection
@section('content')
<div class="cart_con">
  <div class="cart_top" style="text-align:center;">
    <!--<img src="/1/img/icon_cart_02.png" alt="">-->
    <span>订单确认</span>
  </div>
<style type="text/css">
body{background:#ddd;}
.order_address{
	background:#fff;
	border-radius:10px;
	width:98%;margin:0px auto;
	padding:1%;
}
.addr_name{
	display:inline;
	font-size:1em;
}
.addr_phone{
	display:inline;
	font-size:0.75em;
	color:#666;
}
.addr_city{
	display:inline;
}
.addr_addr{
	display:inline;
}
</style>
<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><br />
          <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>
<style type="text/css">
#order_create{background:#fff;margin-top:2%;border-radius:10px;padding:1%}
.cart_total{display:inline}
</style>
  <form id="order_create" action="{{url('/order/create')}}" method="post">
	<table style="width:93%;margin:0 auto">
		<thead>
			<div style="clear:both" class="order_goods_title">商品信息</div>
			@foreach($goods as $k=>$v)
			<tr class="order_thead">
				<td class="order_goods" width="30%">
				<img class="good_img" src="{{$v['pic']}}" alt="">
				</td>
				<td width="70%">
				<table>
					<tr>
						<td><p>{{$v['title']}}</p></td>
					</tr>
					<tr class="order_thead">
						<td class="zz_price">￥
							<span class="cart_price">{{$v['price']}}*{{$v['num']}}</span>
						</td>
					</tr>
					<tr class="order_thead">
						<td class="zz_total">￥
							<span class="cart_total">{{$total}}</span>
						</td>
					</tr>
				</table>
				</td>
			</tr>
			@endforeach
		</thead>
  </table>
  
 
  <div class="order_bottom">
    <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>
<style type="text/css">
.cartSubmit{
	background: #ff8f00;
	padding: 10px;
	border-radius: 20px;
	margin: auto;
	display: block;
	width: 100px;
	text-align: center;
}
.addr_mask{
	position: absolute;
	z-index: 999;
	width: 100%;
	background: #fff;
	top: 20px;
	min-height: 80%;
	border: 1px solid #999;
}
.add_addr_head{
	text-align:center;
}
#add_addr{
	width:98%;
	margin:0px auto;
}
.add_addr_row{
	
}
.add_addr_row div{
	margin-bottom:1em;
}
.add_addr_row div span{
	color:red;
}
.add_addr_row div input{
	width:20em;
}
.addr_select select{
	width:29%;
	height:2rem;
}
.add_addr_foot button{
	background: #8cd3ff;
	border: 0px;
	color: #5e4c4c;
}
.addr_error{color:red;font-weight:bold;}
</style>
<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>
                <select id="seachcity" name="homecity" onChange="changeCity(this.value,'seachdistrict','seachdistrict');"></select>
                <span id="seachdistrict_div"><select id="seachdistrict" name="seachdistrict"></select></span>
            </div>
          </div>
        </div>
        <div class="add_addr_row inone">
          <div>详细地址<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(/^(((13[0-9]{1})|159|153)+\d{8})$/)){
    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