@extends('layouts.agent')

@section('styles')
<style type="text/css">
	.add-item-btn, .add-item-qty-btn, .minus-item-qty-btn{
		color: rgba(0,0,21,.5);
		background-color: #f7bd47 !important;
		border-color: #f7bd47 !important;
	}
	.add-item-btn:hover, .add-item-qty-btn:hover, .minus-item-qty-btn:hover{
		color: rgba(0,0,21,.7);
	}

	@media (max-width: 575.98px) { 
		.add-item-qty-btn, .minus-item-qty-btn{
			border-radius: 50%;
			width: 30px;
			height: 30px;
		}
	}

	@media (min-width: 576px) and (max-width: 767.98px) { 
		.add-item-qty-btn, .minus-item-qty-btn{
			border-radius: 50%;
			width: 40px;
			height: 40px;
		}
	}

	@media (min-width: 768px) and (max-width: 991.98px) { 
		.add-item-qty-btn, .minus-item-qty-btn{
			border-radius: 50%;
			width: 40px;
			height: 40px;
		}
	}

	@media (min-width: 992px) and (max-width: 1199.98px) { 
		.add-item-qty-btn, .minus-item-qty-btn{
			border-radius: 50%;
			width: 40px;
			height: 40px;
		}
	}	

	@media (min-width: 1200px) { 
		.add-item-qty-btn, .minus-item-qty-btn{
			border-radius: 50%;
			width: 40px;
			height: 40px;
		}
	}
</style>
@endsection
@livewireStyles

@section('content')
<div class="card mb-0">
	<div class="row">
    	<div class="col-md-12">
			@foreach ($products as $key => $product)
        		<div class="product {{ ($loop->last) ? '' : 'pb-3' }}">
	        		<div class="d-flex">
	        			<div class="w-25">
	        				<img class="d-block w-100" src="{{ url('products') . '/' . $product->picture }}" alt="{{ $product->product_name }}">
	        			</div>
		        		
	        			<div class="w-75">
			        		<table class="table table-borderless h-100">
			        			<tbody>
		        					<tr>
		        						{{-- <input type="hidden" class="product_id" value="{{ $product->id }}"> --}}
				        				<td colspan="2">{{ $product->product_name }}</td>
			        				</tr>
			        				<tr>
				        				<td class="w-50">
				        					<p class="mb-0">RM{{ $product->sell_price }}</p>
				        					<small>RM{{ $product->sell_price }}/Each</small>
				        				</td>
				        				<td class="w-50" align="center">
				        					<button class="btn add-item-btn" id="add-to-cart-{{ $key }}" data-row="{{ $key }}" data-product="{{ $product->id }}">Add</button>
				        					<div class="d-flex justify-content-center" id="add-to-cart-qty-{{ $key }}" data-row="{{ $key }}" style="display: none !important;">
				        						<button class="btn btn-sm minus-item-qty-btn mr-1">-</button>
					        					<input type="number" min="1" max="99" maxlength="2" class="form-control-plaintext qty-input text-center w-25" name="item-qty" value="0" />
					        					<button class="btn btn-sm add-item-qty-btn ml-1">+</button>
				        					</div>
				        				</td>
			        				</tr>
			        			</tbody>
			        		</table>
			        	</div>
	        		</div>
	        	</div>
			@endforeach
			{{-- {{ $products->links() }} --}}
    	</div>
	</div>
</div>
@endsection

@section('scripts')
@livewireScripts
{{-- <script src="{{ asset('js/cart.js') }}"  type="text/javascript"></script> --}}
@endsection