{{> widgets/breadcrumb/breadcrumb}}
<div class="new-card-page relative p-4 mb-4">
	{{{preLoader}}}
	<a class="waves-effect waves-light btn mb-4 modal-trigger" href="#modal1">{{translation.addNewCard}}</a>
	<div id="modal1" class="modal">
		<div class="modal-content">
			<h4>{{translation.addNewCard}}</h4>
		</div>
		<div class="card-form">
			<form action="#" class="form">
				<div class="container-fluid grid">
					<div class="row mx-auto p-3">
						<div class="col s10 m12">
							<div class="well">
								<div class="row app-card-wrapper">
								</div>
								<div class="row ">
									<div class="col s12">
										<div class="form-group mb-3">
											<label>Credit Card Number </label>
											<input type="tel" id="card_number" autocomplete="off" name="number" class="form-control" />
										</div>
									</div>
									<div class="col s12">
										<div class="form-group mb-3">
											<label>Name</label>
											<input type="text" id="card_holder_name" autocomplete="off" name="name" class="form-control" />
										</div>
									</div>
								</div>
								<div class="row">
									<div class="col s12 m12 l6 ">
										<div class="form-group mb-3">
											<label>Expiration</label>
											<input type="text" autocomplete="off" placeholder="MM/YY" name="expiry" class="form-control" />
										</div>
									</div>
									<div class="col s12 m12 l6">
										<div class="form-group mb-3">
											<label>CVV </label>
											<input type="text" autocomplete="off" name="cvv" class="form-control" />
										</div>
									</div>
								</div>
								<div class="row">
									<div class="col s12 text-right">
										<a href="javascript:;" class="modal-close btn btn-success mb-3 waves-effect" onclick="addCard()">Submit</a>
										<button type="button" class="btn  waves-effect btn-info mb-3">Clear</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
	<div class="card__text">
		<div class="border-1">
			<div class="table__overflow style-table table-spacing responsive-scrollx">
				<table class="datatable table theme--light striped">
					<thead>
						<tr>
							<th class="column text-left">Number</th>
							<th class="column text-left">Full Name</th>
							<th class="column text-left">Remove Card</th>
						</tr>
					</thead>
					<tbody>
						{{#each data.creditCard}}
						<tr class="card-wrapper" id="card_{{id}}">
							<td>{{last4Digit}}</td>
							<td>{{cardHolderName}}</td>
							<td>
								<a href="javascript:;" onclick="deleteCard({{id}})">
										<i aria-hidden="true" class="material-icons">close</i>
									</a>
							</td>
						</tr>
						{{/each}}
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
{{#extend 'scripts'}}
<script src="/plugins/card/card.js"></script>
<script type="text/javascript">
	var card = new Card({
		form: document.querySelector('.form'),
		container: '.app-card-wrapper',
		masks: {
			cardNumber: '•' // optional - mask card number
		},
	});

	function deleteCard(data) {
		$('#card_' + data).remove();
		console.log($("table tbody").find("tr").length);
		if ($("table tbody").find("tr").length === 0) {
			$('table tbody').append('<tr><td></td></tr>');
			$('table tbody tr td').text('No Data Available');
		}
	}

	function addCard() {
		var id = $('.card-wrapper:last').attr('id');
		var split_id = id.split('_');
		var new_id = ++split_id[1];
		var number = document.getElementById('card_number').value;
		var name = document.getElementById('card_holder_name').value;
		var mask_number = number.replace(/\d{4}(?= \d{4})/g, "****");
		if (number && name != '') {
			var $info = $(`<tr id="card_` + new_id + `">
										<td>` + mask_number + `</td>
										<td>` + name + `</td>
										<td>
											<a href="javascript:;" onclick="deleteCard(` + new_id + `)">
												<i aria-hidden="true" class="material-icons">close</i>
											</a>
										</td>
									</tr>`);
			var $block = $('#' + id);
			$('.new-card-page .section-preloader-wrapper').addClass('display');
			setTimeout(function() {
				$info.insertAfter($block);
				$(".section-preloader-wrapper").fadeOut("slow").removeClass('display');
			}, 1500);
		}
	}

</script>
{{/extend}}
