@extends('layouts.listings')
@section('after_styles')
<style type="text/css">
	.table>tbody>tr>td, .table>tfoot>tr>td{
	    vertical-align: middle;
	}
	@media screen and (max-width: 600px) {
	    table#cart tbody td .form-control{
			width:20%;
			display: inline !important;
		}
		.actions .btn{
			width:36%;
			margin:1.5em 0;
		}

		.actions .btn-info{
			float:left;
		}
		.actions .btn-danger{
			float:right;
		}

		table#cart thead { display: none; }
		table#cart tbody td { display: block; padding: .6rem; min-width:320px;}
		table#cart tbody tr td:first-child { background: #333; color: #fff; }
		table#cart tbody td:before {
			content: attr(data-th); font-weight: bold;
			display: inline-block; width: 8rem;
		}



		table#cart tfoot td{display:block; }
		table#cart tfoot td .btn{display:block;}

	}
</style>
@endsection
@section('content')

<div class="">
	<div class="container">
		<template v-if="cart.total > 0">
			<table id="cart" class="table table-hover table-condensed">
				<thead>
					<tr>
						<th style="width:50%">Product</th>
						<th style="width:10%">Price</th>
						<th style="width:12%">Quantity</th>
						<th style="width:28%" class="text-center">Subtotal</th>
						<th style="width:10%"></th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item in items">
						<td data-th="Product">
							<div class="row">
								<div class="col-sm-2 hidden-xs">
                                    {{-- <img src="{{ Storage::url('item.picture_path') }}" :alt="item.name" class="img-responsive"/> --}}
                                </div>
								<div class="col-sm-8">
									<h4 class="nomargin">@{{ item.name }}</h4>
									<p>@{{ item.description }}</p>
								</div>
							</div>
						</td>
						<td data-th="Price">{{ config('sitedata.currency') }}@{{ item.price }}</td>
						<td data-th="Quantity">
							<input type="number" class="form-control text-center" :value="item.qty" min="1" @change="updateCartItem($event)" :data-row="item.rowId">
						</td>
						<td data-th="Subtotal" class="text-center">{{ config('sitedata.currency') }}@{{ item.subtotal }}</td>
						<td class="actions" data-th="">

							<button class="btn btn-danger btn-sm" v-on:click="deleteItem" :data-row="item.rowId"><i class="fa fa-trash-o"></i></button>
						</td>
					</tr>
				</tbody>
				<tfoot>
					<tr class="visible-xs">
						<td class="text-center"><strong>{{ config('sitedata.currency') }}@{{ cart.total_price }}</strong></td>
					</tr>
					<tr>
						<td><a href="javascript:history.back()" class="btn btn-warning"><i class="fa fa-angle-left"></i> Continue Shopping</a></td>
						<td colspan="2" class="hidden-xs"></td>
						<td class="hidden-xs text-center"><strong>{{ config('sitedata.currency') }}@{{ cart.total_price }}</strong></td>
						<td><a href="{{ url('/cart/checkout')}}" class="btn btn-success btn-block">Checkout <i class="fa fa-angle-right"></i></a></td>
					</tr>
				</tfoot>
			</table>
		</template>
		<div v-else>No item in cart</div>
	</div>
</div>
@endsection