@extends('layouts.dashboard')

@section('title', 'Manage Products')

@section('myJS')
  <script src="{{url('/')}}/js/admin/admin.js"></script>
@endsection

@section('content')

<div class="padding-top40"></div>
<div class="bs-example">
	<div class="container-fluid">
		<div class="row">
			<div id="exTab1" class="panel panel-default">
				<ul class="nav nav-pills nav-catalog nav-justified">
					<li class="active">
						<a  href="#1a" data-toggle="tab">Product List</a>
					</li>
					<li>
						<a id="allAttHistoryTab" href="#allAttHistory" data-toggle="tab">Product Attribute History</a>
					</li>
					<li>
						<a id="allAttEditTab" href="#allAttEditGrid" data-toggle="tab">Product Attribute Grid</a>
					</li>
				</ul>

				<div class="tab-content clearfix">
					<div class="tab-pane active" id="1a">
						<div class="row" style="margin: 0px; padding-top: 15px;">
							<div class="col-md-2 manage-text">
								<input type="text" id="inputProductCode" class="filter form-control" placeholder="Product Code">
								<span class="prodNameErr" style="padding-left: 3%;color: red"></span>
							</div>
							<div class="col-md-2">
								<button type="button" id="btnAddProduct" class="btn btn-default" style="">Add Product</button>
							</div>
							<div class="col-md-6">
								@if($extraProductConsent)
									<span class="text-danger">Total added products are <strong> {{ $productCount }} </strong></span> <br>
									<span class="text-danger">Product limit as per your package is <strong> {{ $userSubscription->PackageMaximumProducts }} </strong></span>
								@else
									@if($productCount >= $userSubscription->PackageIncludedProducts)
										<span class="text-danger">Total added products are <strong> {{ $productCount }} </strong></span> <br>
										<span class="text-danger">Product limit as per your package is <strong> {{ $userSubscription->PackageIncludedProducts }} </strong></span>
									@else
										<span class="text-success">Total added products are <strong> {{ $productCount }} </strong></span> <br>
										<span class="text-success">Product limit as per your package is <strong> {{ $userSubscription->PackageIncludedProducts }} </strong></span>
									@endif
								@endif

								
								@if(!$extraProductConsent)
									@if($productCount >= $userSubscription->PackageIncludedProducts)
										<br><br>
										<b>
											<span class="text-info">Products in excess of {{$userSubscription->PackageIncludedProducts}} will be charged monthly in arrears, in accordance with our rates available at: <a href="https://www.producty.com/pricing/" target="_blank">https://www.producty.com/pricing/</a>.</span><br>
											<span class="text-info">Please confirm you wish to increase your product limit including additional charges.</span><br>
										</b>
										<a href="{{env('APP_URL')}}extraProductConsent" class="btn btn-default" style="">I agree.</a>
									@endif
								@endif
							</div>
							<!-- <div class="col-md-2">
							<form class="" action="{{url('/exportProducts')}}" method="post">
								@csrf
								<button type="submit" id="exportProducts" name="exportProducts" class="btn btn-default" style="">Export to file</button>
							</form>
							</div> -->
							<div class="col-md-12">
								<input type="text" id="filterProduct" placeholder="Search..." class="filter filterProduct float-right form-control setup-width">
								<br><br>
							</div>
							
							<div id="div_table" class="row table-catalog" style="margin: 0px;">
								<table id="example" data-page-length='50' class="table table-striped table-bordered" cellspacing="0" width="100%">
									<thead>
										<tr>
											<th scope="col" class="col3">Product ID</th>
											<th scope="col" class="col3">Product Code</th>
											<th scope="col" class="col3">Operations</th>
											<th scope="col" class="col4">Create Date/Time</th>
											<!-- <th scope="col" class="col5">Update Date/Time</th> -->
											<th scope="col" class="col6">End of Life Date</th>
											<th scope="col" class="col7">Created By</th>
										</tr>
									</thead>
									<tbody>
										@foreach($allProducts as $product)
											<tr>
												<td class="filter-cell">{{ $product->ProductID }}</td>
												<td class="filter-cell">{{ $product->ProductCode }}</td>
												<td>
													<a href="{{url('/editProduct')}}/{{$product->ProductCode}}" target="_blank" class="EditProduct btn btn-default">Edit Product</a>
												</td>
												<td>{{ $product->CreatedAt }}</td>
												<td>{{ $product->EndOfLifeDate }}</td>
												<td>{{ $product->FirstName}} {{$product->LastName }}</td>
											</tr>
										@endforeach

									</tbody>
								</table>
								<div class="col-md-6">
									<div>Showing {{($allProducts->currentpage()-1)*$allProducts->perpage()+1}} to {{$allProducts->currentpage()*$allProducts->perpage()}}
										of  {{$allProducts->total()}} entries
									</div>
								</div>
								<div class="col-md-6 text-right">
									@include('dashboard.paginator', ['paginator' => $allProducts])
								</div>
							</div>

							<div id="showResult" style="display:none;"></div>
						</div>
					</div>
					<div class="tab-pane" id="allAttHistory">
					</div>

					<div class="tab-pane" id="allAttEditGrid" style="padding: 10px;">
					</div>

				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">

$(document).ready(function(){

	$.ajaxSetup({
		headers: {
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		}
	});

	$(document).ajaxStart(function () {
        $('#ajaxloader').show();
    })
    .ajaxStop(function () {
        $('#ajaxloader').hide();
    });

	$(".filterProduct").keyup(function(){
        var matchvalue = $(this).val(); // this.value
		console.log(matchvalue);
		
		if(matchvalue != '')
		{
			$('#div_table').hide();
			$.ajax({
				type: "get",
				url: base_url + 'findProduct/' + matchvalue,
				success: function(response){
					$('#showResult').show();
					$('#showResult').html(response);
				}
			});       
		}
		else
		{
			$('#showResult').hide();
			$('#div_table').show();
		}
    });


	// var table = $('#example').DataTable({
		// processing: false,
		// serverSide: true,
		// dataType:'json',
		// ajax: '{{ route("getProducts") }}',
		// columns: [
		// 	{ data: 'ProductID', name: 'ProductID', 'searchable': true },
		// 	{ data: 'ProductCode', name: 'ProductCode', 'searchable': true },
		// 	{ data: 'Operations', name: 'Operations', 'searchable': false },
		// 	{ data: 'CreatedAt', name: 'CreatedAt', 'searchable': false },
		// 	/*{ data: '', name: '' },*/
		// 	{ data: 'EndOfLifeDate', name: 'EndOfLifeDate', 'searchable': false },
		// 	{ data: 'createdBy', 'searchable': false }
		// ],
		// "deferLoading": {{ $productCount }}
	// });

	var inputProductCode = $('#inputProductCode').val();

	// if(inputProductCode.length>0)
	// {
	// 	table.column(1).search( inputProductCode ).draw();
	// }

	// $('#inputProductCode').on( 'keyup', function () {
	// 	table.column(1).search( this.value ).draw();
	// });

	$("#inputProductCode").keyup(function(){
        var matchvalue = $(this).val(); // this.value
		console.log(matchvalue);
		
		if(matchvalue != '')
		{
			$('#div_table').hide();
			$.ajax({
				type: "get",
				url: base_url + 'findProduct/' + matchvalue,
				success: function(response){
					$('#showResult').show();
					$('#showResult').html(response);
				}
			});       
		}
		else
		{
			$('#showResult').hide();
			$('#div_table').show();
		}
    });

	$('#btnAddProduct').click(function(){
		var inputProductCode = $('#inputProductCode').val();
		if(inputProductCode != '' && (inputProductCode.replace(/\s/g, '').length)){
			$.ajax({
				type: "POST",
				url: base_url + 'addProduct',
				data: {"productCode": inputProductCode},
				success: function(response){
          if (response == 'limit exceeded') {
            $(".prodNameErr").text('Product limit exceeded.');
          }
					if(response == "true")
					{
						location.reload();
					}
					if(response == "false")
					{
						$(".prodNameErr").text('Product code exists');
					}
				}
			});
		}
		else
		{
			$(".prodNameErr").text("Please enter product code");
			return  false;
		}
	});

	$("#exTab1").show();

});

</script>

@endsection