@extends('layout.nojs')
@section('title','购物车')
@section('myCss')
<script text="type/javascript" src="/1/js/input.js"></script>
<script src="/1/js/jquery-1.8.3.min.js"></script>
<!-- 弹框 -->
<script src="/1/js/sweetalert2.js"></script>
<link rel="stylesheet" href="/1/css/sweetalert2.css">
<style type="text/css">
.table-responsive table tbody tr td{min-width:80px;}
.table_desc{margin-bottom:0px;}
.cartSubmit{
	background: red;
	color: #fff !important;
	display: block;
	width: 100px;
	text-align: center;
	margin: auto;
	border-radius: 20px;
}
.cart_footer_left{margin-top:20px;}
.del_all{
	background: #115171;
	width: 150px;
	text-align: center;
	display: inline;
	padding: 5px;
	margin: 5px;
	color: #fff;
}
</style>
@endsection
@section('content')
<!--breadcrumbs area start-->
    <div class="breadcrumbs_area">
        <div class="container">   
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb_content">
                       <h3>cart</h3>
                        <ul>
                            <li><a href="/">home</a></li>
                            <li>Shopping Cart</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>         
    </div>
    <!--breadcrumbs area end-->
    
     <!--shopping cart area start -->
    <div class="shopping_cart_area">
        <div class="container">  
            <form action="{{url('order/insert')}}" class="jiesuan" method="post">
                <div class="row">
                    <div class="col-12">
                        <div class="table_desc">
                            <div class="cart_page table-responsive">
                                <table>
                            <thead>
                                <tr>
                                    <th ><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 class="product_thumb">图片</th>
                                    <th class="product_name">产品</th>
                                    <th class="product-price">价格</th>
                                    <th class="product_quantity">数量</th>
                                    <th class="product_total">总计</th>
                                    <th class="product_remove">删除</th>
                                </tr>
                            </thead>
                            <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 class="product_thumb"><a href="#"><img src="{{$v['pic']}}" alt=""></a></td>
                                    <td class="product_name"><a href="#">{{$v['title']}}</a></td>
                                    <td class="product-price">￥{{$v['price']}}</td>
                                    <td class="product_quantity">
										<label>数量</label> 
										<input class="buy_num" type="text" readonly="readonly" value="{{$v['num']}}" class="num"/>
										<input  type="hidden"  value="{{$v['price'] * $v['num']}}" class="total"/>
									</td>
                                    <td class="product_total">￥<span class="cart_total" style="display:inline">{{$v['price'] * $v['num']}}</span></td>
									<td><p class="cart_del">&times;</p></td>
									
                                </tr>
							@endforeach
							{{csrf_field()}}
                            </tbody>
                        </table>   
                            </div>      
                        </div>
                     </div>
                 </div>
            </form> 
        </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">
				<p>合计：<span class="z_total">￥<span class="total">0</span></span></p>
				<a class="cartSubmit">去结算</a>
			</div>
		</div>		
    </div>
     <!--shopping cart area end -->
@endsection

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

}
	// 下单
	$('.cartSubmit').click(function(){
		if ($('.check_num').html() == 0) {
			alert('请勾选您需要结算的商品!');
			//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