{{ header }}
<div id="information-tracking" class="container pro-verify">

	<ul class="breadcrumb">
		{% for breadcrumb in breadcrumbs %}
			<li>
				<a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>
			</li>
		{% endfor %}
	</ul>
	<div class="row">
		<div class="col-sm-12 pro-verify-top-banner">
			<img src="image/catalog/YamahaVerificationBanner_F3.png" style="width:100%;" id="pro-verify-top-img"/>

		</div>
	</div>

	<br/><br/>

	<div class="row">{{ column_left }}
		{% if column_left and column_right %}
			{% set class = 'col-sm-6' %}
		{% elseif column_left or column_right %}
			{% set class = 'col-sm-9' %}
		{% else %}
			{% set class = 'col-sm-12' %}
		{% endif %}
	</div>

	<div id="content" class="{{ class }}">{{ content_top }}
		<div class="row pb-5 mb-5">
			<div class="col-sm-12 col-md-3 pro-verify-genuine-img">
				<img src="image/catalog/genuine.png">
			</div>
			<div class="col-sm-12 col-md-5">
				<div class="col-sm-12" id="pro-verify-form">
					<h1>{{ heading_title }}</h1>
					<p>{{ text_description }}</p>
					<div class="form-group required ">
						<input type="text" name="serial" value="" id="serial" class="form-control"/>
						<div class="text-danger">Serial number is required!!!</div>
					</div>
					<div class="form-group">
						<input id="button-verify" class="btn btn-primary" type="button" value="Check"/>
					</div>
				</div>
			</div>
			<div class="col-sm-12 col-md-4 resultsdiv">
				<div id="sectionwhy" class="col-sm-12 text-center ">
					<h2>Why Verify your Product?</h2>
					<p>Because you deserve the expected tone you paid for.</p>
					<hr>
					<p>Please follow the instructions on the image to find your serial number and enter it into the input box on this page and press 'Check' button</p>
					<p class="text-info">
						* This is only valid for Yamaha F310 & C40 products
					</p>
				</div>
				<div id="isgenuine" class="col-sm-12 text-center ">
					<img src="https://welovemusic.lk/image/catalog/genuine.jpg" width="100px">
					<h3 class="productserial"></h3>
					<h4>Model No:
						<span class="modelnumber">N/A</span>
					</h4>
					<h2>Congratulations!</h2>
					<p>You are experiencing a Genuine Product.</p>
				</div>
				<div id="notgenuine" class="col-sm-12 text-center ">
					<h2>Sorry!</h2>
					<h3 class="productserial"></h3>
					<p>This serial number is invalid.
						<br>Please contact us to check the authenticity of your product</p>
				</div>
			</div>


			{{ content_bottom }}</div>
		{{ column_right }}</div>


</div>
<style>
	.has-error {
		border: solid 1px #a94442 !important;
	}
	.text-danger {
		display: none;
	}
	#isgenuine {
		background-image: url('https://acegif.com/wp-content/gif/confetti-31.gif');
		padding: 25px;
		border-radius: 10px;
		color: #2fbb47;
		display: none;
		border: 1px solid #e8e8e8;
	}
	#isgenuine h2 {
		color: #2fbb47;
		margin-bottom: 3px;
	}
	#isgenuine p {
		color: gray;
		font-size: 17px;
	}
	#isgenuine h3 {
		margin: 5px auto 6px;
		border: 1px dotted gray;
		width: 50%;
		background: #f4f4f4;
		border-radius: 20px;
		padding: 2px 0;
		color: #aaa;
	}
	#notgenuine {
		padding: 25px;
		background-color: #ffbfbf;
		border: solid 2px #e72424;
		border-radius: 10px;
		color: #ff0101;
		display: none;
	}
	#notgenuine h3 {
		margin: 5px auto 6px;
		border: 1px dotted gray;
		width: 50%;
		background: #f4f4f4;
		border-radius: 20px;
		padding: 2px 0;
		color: #aaa;
	}


	@media(max-width : 767px) {
		.pro-verify-genuine-img {
			text-align: center;
		}
		#pro-verify-form {
			text-align: center;

		}
	}
</style>

<script>

	$(document).ready(function () {
$('#button-verify').on('click', function () {
$serial = $("#serial").val().trim();
if ($serial) {
$('#isgenuine').hide();
$('#notgenuine').hide();
$('#sectionwhy').hide();
$('#serial').val("");
$.ajax({
url: 'index.php?route=product/productverifygenuine',


type: 'post',
data: {
'serial': $serial
},
dataType: 'json',
beforeSend: function () {
$('#button-verify').button('loading');
},
complete: function () {
$('#button-verify').button('reset');
},
success: function (json) {
if (json.count === 1) {
$('#isgenuine .productserial').html(json.serial_no);
if (json.model_no != "") {
$('#isgenuine .modelnumber').html(json.model_no);
} else {
$('#isgenuine .modelnumber').html("N/A");
}
$('#isgenuine').show();
} else {
$('#notgenuine .productserial').html(json.serial_no);
$('#notgenuine').show();
}
}
});
} else {
$("#serial").addClass('has-error');
$(".text-danger").show();
}
});
$('#serial').focus(function () {
$("#serial").removeClass('has-error');
$(".text-danger").hide();
});
});
</script>

<script>
	function updateImageSrc() {
var img = document.getElementById('pro-verify-top-img');
if (window.innerWidth <= 600) {
img.src = 'image/catalog/verifyProduvctStep_mobile.png';
} else {
img.src = 'image/catalog/YamahaVerificationBanner_F3.png';
}
}
// Update image on initial load
updateImageSrc();
// Update image on window resize
window.addEventListener('resize', updateImageSrc);
</script>


{{ footer }}