@extends('layout.store')
@section('title','购物车')
@section('myCss')
<script text="type/javascript" src="/1/js/input.js"></script>
  <link rel="stylesheet" href="/1/css/cart.css">
  <link rel="stylesheet" href="/1/css/input.css">

@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.png" alt="">
		<span>购物车</span>
		<ul class="cart_nav">
			<li class="li_on">
				<p>STEP01</p>
				<p>购物车</p>
			</li>
			<li>
				<p>STEP02</p>
				<p>订单确认</p>
			</li>
			<li>
				<p>STEP03</p>
				<p>付款</p>
			</li>
			<li>
				<p>STEP04</p>
				<p>付款成功</p>
			</li>
		</ul>
	</div>
	<table>
		<thead>
			<tr>
				<th style="width:8%"><lable><i style="position:relative;top:2px" class='input_style checkbox_bg'><input type="checkbox" name="" value="" class="quanxuan"></i></lable><span style="position:absolute;margin-left:8px">全选</span></th>
				<th style="width:12%">商品图</th>
				<th style="width:25%">商品</th>
				<th style="width:17%">单价</th>
				<th style="width:18%">数量</th>
				<th style="width:13%">小计</th>
				<th style="width:7%">操作</th>
			</tr>
		</thead>
		<form action="{{url('order/insert')}}" class="jiesuan" method="post">
			<tbody>
				@foreach($goods as $k=>$v)
				<tr>
					<td><lable><i class='input_style checkbox_bg'><input type="checkbox" name="good[]" value="{{$v['id']}}"></i></lable></td>
					<td><a href="{{url('goods')}}/{{$v['id']}}" target="_blank"><img class="good_img" src="{{$v['pic']}}" alt="{{$v['title']}}"></a></td>
					<td><a href="{{url('goods')}}/{{$v['id']}}" target="_blank" style="color:#666">{{$v['title']}}</a></td>
					<td class="zz_price">￥<span class="cart_price">{{$v['price']}}</span></td>
					<td>
						<div class="gw_num">
							<em class="buy_jian">-</em>
							<input class="buy_num" type="text" readonly="readonly" value="{{$v['num']}}" class="num"/>
							<em class="buy_add">+</em>
						</div>
					</td>
					<td class="zz_total">￥<span class="cart_total">{{$v['price'] * $v['num']}}</span></td>
					<td><p class="cart_del">&times;</p></td>
				</tr>
				@endforeach
			</tbody>
			{{csrf_field()}}
		</form>
	</table>
	<div class="kong">
		<img src="/1/img/cart_no.png" alt="">
		<p>购物车内还没有商品，赶紧去选购吧~</p>
		<a href="{{url('/')}}">返回商城首页</a>
	</div>
	<div class="cart_footer">
		<div class="cart_footer_left">
			<lable><i style="position:relative;top:9px" class='input_style checkbox_bg'><input style="position:relative;top:-9px" type="checkbox" name="all_goods" value="" class="quanxuan"></i><span style="margin-left:8px">全选</span></lable>
			<p class="del_all">清空购物车</p>
			<p>共 <span class="list_num"></span> 件商品，已选择 <span class="check_num">0</span> 件</p>
		</div>
		<div class="cart_footer_right">
			<a class="cartSubmit">去结算</a>
			<p>合计：<span class="z_total">￥<span class="total">0</span></span></p>
		</div>
	</div>
</div>
@endsection

@section('myJs')
<script>
window.onload=function(){

}
	// 下单
	$('.cartSubmit').click(function(){
		if ($('.check_num').html() == 0) {
			swal('','请勾选您需要结算的商品','warning')
		}else{
			$('.jiesuan').submit();
		}
	})

	// 删除单个商品
	$(".cart_del").click(function(){
		var id = $(this).parents('tr').find($("input[name='good[]']:checkbox")).val();
		var wo = $(this)
		swal({
		  // title: '删除',
		  text: "你确定删除该商品么?",
		  type: 'question',   //感叹号图标
		  showCancelButton: true,   //显示取消按钮
		  confirmButtonColor: '#3085d6', //俩个按钮的颜色
		  cancelButtonColor: '#d33',
		  confirmButtonText: '删除', //俩个按钮的文本
		  cancelButtonText: '取消',
		  confirmButtonClass: 'btn btn-success',  //俩个按钮的类样式
		  cancelButtonClass: 'btn btn-danger',

		}).then(function() {    //大部分，then是通用的回调函数
			var url = '{{url('/cart/delete')}}';
			var data={
				'id':id,
				'_token':'{{csrf_token()}}'
				};
			var success=function(response){
				if(response.error==0){
					swal('',response.errmsg,'success')
					wo.parents('tr').remove();
					getTotal()
					getCheck()
					getListNum()
				}else{
					swal('',response.errmsg,'error')
				}
			};
			$.post(url,data,success,'json');
		})
	});

	// 清空购物车
	$(".del_all").click(function(){
		var listNum = $("input[name='good[]']:checkbox").length;
		if (listNum == 0) {
			swal('','您的购物车中没有商品','error')
		}else{
			swal({
			  // title: '删除',
			  text: "你确定清空购物车么?",
			  type: 'question',   //感叹号图标
			  showCancelButton: true,   //显示取消按钮
			  confirmButtonColor: '#3085d6', //俩个按钮的颜色
			  cancelButtonColor: '#d33',
			  confirmButtonText: '清空', //俩个按钮的文本
			  cancelButtonText: '别，别',
			  confirmButtonClass: 'btn btn-success',  //俩个按钮的类样式
			  cancelButtonClass: 'btn btn-danger',

			}).then(function() {    //大部分，then是通用的回调函数
				var url = '{{url('/cart/clearCart')}}';
				var data={
					'_token':'{{csrf_token()}}'
					};
				var success=function(response){
					if(response.error==0){
						swal('',response.errmsg,'success')
						$("input[name='good[]']:checkbox").parents('tr').remove();
						getTotal()
						getCheck()
						getListNum()
					}else{
						swal('',response.errmsg,'error')
					}
				};
				$.post(url,data,success,'json');
			})
		}
	});

	// 赋值商品数量
	$(document).ready(function(){
		getListNum()
	});

	// 全选、反选
	$('.quanxuan').click(function(){
		if(this.checked){
			$("input[name='good[]']").prop('checked', true)
			$('.quanxuan').prop('checked', true)
			$('.buy_num').attr('name','buy_num[]');
		}else{
			$("input[name='good[]']").prop('checked', false)
			$('.quanxuan').prop('checked', false)
			$('.buy_num').removeAttr('name','buy_num[]');
		}
		getTotal()
		getCheck()
	});

	// 单选
	$("input[name='good[]']").click(function(){
		if($(this).prop("checked")==true){
			$(this).parents('tr').find('.buy_num').attr('name','buy_num[]');
		}else{
			$(this).parents('tr').find('.buy_num').removeAttr('name','buy_num[]');
		}
		allchk()
		getTotal()
		getCheck()
	})

	// 设置全选框
	function allchk(){
		//选项总个数
		var chknum = $("input[name='good[]']:checkbox").size();
		var chk = 0;
		$("input[name='good[]']:checkbox").each(function () {
	        if($(this).prop("checked")==true){
				chk++;
			}
	    });
		if(chknum==chk){
			//全选
			$(".quanxuan").prop("checked",true);
		}else{
			//全不选
			$(".quanxuan").prop("checked",false);
		}
	}

	// 购买数量加减
	// 输入
	$('.buy_num').blur(function(){
		var price = $(this).parents('tr').find($('.cart_price')).html();
		var total = price * $(this).val();
		$(this).parents('tr').find($('.cart_total')).html(total);
		getTotal()
		// $(this).val(parseFloat($(this).val()).toFixed(2));
	})
	//加
	$(".buy_add").click(function(){
		var n=$(this).prev().val();
		var num=parseInt(n)+1;
		if(num==0){ return;}
		$(this).prev().val(num);
		var price =$(this).parent().parent().prev().find($('.cart_price')).html();
		var total = price * num;
		$(this).parent().parent().next().find($('.cart_total')).html(total);
		getTotal();
	});
	//减
	$(".buy_jian").click(function(){
		var n=$(this).next().val();
		var num=parseInt(n)-1;
		if(num==0){ return}
		$(this).next().val(num);
		var price =$(this).parent().parent().prev().find($('.cart_price')).html();
		var total = price * num;
		$(this).parent().parent().next().find($('.cart_total')).html(total);
		getTotal();
	});

	// 计算总和并赋值
	function getTotal(){
		var total = 0;
		$("input[name='good[]']:checkbox").each(function () {
	        if($(this).prop("checked")==true){
				total += $(this).parents('tr').find('.cart_total').html()*1;
			}
	    });
	    $('.total').html(total);
	}

	// 商品数量
	function getListNum(){
		var listNum = $("input[name='good[]']:checkbox").length;
		$('.list_num').html(listNum)
		if (listNum == 0) {
			$('.kong').show();
		}
	}

	// 已选择商品数量
	function getCheck(){
		var checkNum = 0;
		$("input[name='good[]']:checkbox").each(function () {
	        if($(this).prop("checked")==true){
	        	checkNum += 1;
			}
	    });
	    $('.check_num').html(checkNum);
	}

</script>
@endsection