	<template>
		
		<div class="col-md-12" >
			<div class="col-md-6 left-side" >
				<div class="logo" >
					<img src="img/logo-cosmos.gif" alt="Cosmos" >
					<h3 style="padding: 10px 50px 6px 50px;">Félicitations!!!</h3>
					
				</div>
				<br>
				<div class="spin">
					<img class="img-responsive" src="img/succes.png" alt="Cosmos" >	
				</div>

			</div><!--col-sm-6-->

			<div class="col-md-6 right-side">

				<div :class="spinHasError.join(' ')" id="div-info">
						<h3 class="vousAvezGagner">Vous avez gagné </h3>
					<img class="img-responsive"  :src="image" alt="Cosmos" >	
					
					<p class="fontSmaller ">
							<!-- Pour récuperer votre cadeau, veuillez<br> -->

						<p class="vousAvezGagner"><b>Un Bon Cadeau vous a été envoyé sur votre adresse : {{email}}</b>
						<br>
							Pour en bénéficier merci de le présenter lors de votre passage à Cosmos.
						</p>
						<br>
						<a href="https://www.cosmoselectro.ma/"> CosmosElectro.ma </a>

						<span class="help-block" v-if="spinHasError.includes('has-error')">
                            <strong > Votre token api est invalide<br> actualiser la page </strong>
                        </span>

						<p class="info fontSmaller">
							<br>Informations :  <br>* Votre "Bon Cadeau" est valable dans <a href="https://www.cosmoselectro.ma/index.php?route=information/information&information_id=4"> le magasin COSMOS</a>  de votre choix.<br>
							* Ce bon est valable une seule fois et ce jusqu'au 30 septembre 2017.<br>
							* Merci de présenter impérativement votre bon "Imprimé" ou "Téléchargé" pour bénéficier de votre gain.
						</p>
					</p>

				</div>

			</div><!--col-sm-6-->	

		</div><!--col-sm-8-->
	</template>

<script>
	
	export default {
		data(){
			return {
				image : '',
				intitule : '',
				email : '',
				spinHasError : ['spin'],
			}
		},
		mounted(){

			this.image = this.$parent.image
			this.intitule = this.$parent.rewardIntitule
			this.email = this.$parent.email

		},
		methods:{
			printVoucher(){
				var vm = this;

				// $.get('api/getCode?api_token='+vm.$parent.api_token, function(data) {

				// 	var e = $('#printable').remove('#notPrintable')
				// 	var ifr = document.createElement('iframe');
				// 		ifr.style='height: 0px; width: 0px; position: absolute'
				// 		document.body.appendChild(ifr);

				// 		$(e).clone().appendTo(ifr.contentDocument.body);
				// 		ifr.contentWindow.print();

				// 		ifr.parentElement.removeChild(ifr);
				// }).fail(function(){
				// 	vm.spinHasError.push('has-error')
				// });

			},
			downloadVoucher() {
				var vm = this;

				$.get('api/getCode?api_token='+vm.$parent.api_token, function(cdata) {

					var filename = "mon Bon Cadeau Cosmos.html"
					var type = "html"
					var data = `
						<center> <h1 >Félicitations!!!</h1> <br>
							<h2> Vous avez gagné </h2><br>

							<h3> Votre Bon Cadeau  : <bold>`+ cdata.code +`</bold></h3>
						</center>
							`

					
				    var file = new Blob([data], {type: type});
				    if (window.navigator.msSaveOrOpenBlob) // IE10+
				        window.navigator.msSaveOrOpenBlob(file, filename);
				    else { // Others
				        var a = document.createElement("a"),
				                url = URL.createObjectURL(file);
				        a.href = url;
				        a.download = filename;
				        document.body.appendChild(a);
				        a.click();
				        setTimeout(function() {
				            document.body.removeChild(a);
				            window.URL.revokeObjectURL(url);  
				        }, 0); 
			    	}
				}).fail(function(){
					vm.spinHasError.push('has-error')
				});

			}

		}
	}
</script>

<style>
	
	.info{
		text-align: left;
	}

	body{
		font-family: 'Raleway', sans-serif;
/*		background: url(../../img/bgsuc.jpg) no-repeat center center fixed; 
*/		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		/*overflow: hidden;*/
	}
	.fontSmaller{
		font-size: smaller;
	}

	.right-side p{
		padding-bottom: 0;
	}

	.img-responsive{
		display: inline;
	}
	.vousAvezGagner {
		text-align: center; 
		padding: 0px !important;
	}
	p.vousAvezGagner > b{
		color: #fc6719;
	}
	#div-info > img{
		margin-top: 10px;
	}
</style>