<template>
	<section class="product">
		<div class="row">
			<div class="column is-12">
				<h3 class="title has-no-margin">{{ product.name }}</h3>
			</div>
		</div>
		<div class="row">
			<div class="column is-12 is-desktop-6">
				<section class="product-images">
					<section class="preview">
						<a class="preview-link" href=""><img class="preview-img" src="10.0.0.41/images/categories/category.jpg"></a>
					</section>

					<section class="thumbnails-container">
						<section class="thumbnails">
							<a class="thumbnail" href=""><img class="thumbnail-img" src="10.0.0.41/images/categories/thumb.jpg"></a>
							<a class="thumbnail" href=""><img class="thumbnail-img" src="10.0.0.41/images/categories/thumb.jpg"></a>
							<a class="thumbnail" href=""><img class="thumbnail-img" src="10.0.0.41/images/categories/thumb.jpg"></a>
							<a class="thumbnail" href=""><img class="thumbnail-img" src="10.0.0.41/images/categories/thumb.jpg"></a>
							<a class="thumbnail" href=""><img class="thumbnail-img" src="10.0.0.41/images/categories/thumb.jpg"></a>
						</section>
					</section>
				</section>
			</div>

			<div class="column is-12 is-desktop-6">
				<p class="description paragraph has-max-width has-no-margin">When an unknown printer took a galley of type and scrambled it to make a type specimen book. Electronic typesetting, remaining essentially unchanged It was popularised.</p>

				<section class="variants">

					<section class="variant" v-for="(attribute, index) in product.attributes">
						<select v-bind:key="attribute.name" v-model="selectedOptions[index]" v-on:change="getVariant">
							<option v-for="option in attribute.options" v-bind:value="option.id">{{ option.option }}</option>
						</select>
					</section>

					<!--<button v-on:click="getVariantId">Send</button>-->

					<!--<span>{{ selectedOptions }}<br></span>
					<span>Variant: {{ variant_id }}<br></span>
					<span>Price: {{ price }}<br></span>
					<span>Discount: {{ discount }}<br></span>
					<span>Price before: {{ price_before }}<br></span>
					<span>Stock: {{ stock_quantity }}<br></span>-->
				</section>

				<section class="info-container">
					<section class="info">
						<span class="stock is-red" v-if="variant.stock.quantity == 0">Není skladem</span>
						<span class="stock is-green" v-else-if="variant.stock.quantity <= 15">Skladem {{ variant.stock.quantity }}ks</span>
						<span class="stock is-green" v-else-if="variant.stock.quantity >= 15">Skladem > 15ks</span>

						<a class="stock-link" href="#">Kdy zboží dostanu?</a>
					</section>

					<section class="info">
						<section class="price-container" v-if="variant.discount != null">
							<section class="discount">
								<span class="before">{{ variant.price }}Kč</span>
								<span class="percents">-{{ variant.discount.percents }}%</span>
							</section>
							<span class="price" v-if="variant.discount != null">{{ variant.price_now }}Kč</span>
							<span class="price" v-if="variant.discount == null">{{ variant.price }}Kč</span>
						</section>

						<fieldset class="cart">
							<input class="quantity form-control" type="number" name="quantity" min="1" v-model="quantity">
							<button class="button" v-on:click="addToCart">Přidat do košíku</button>
						</fieldset>
					</section>
				</section>
			</div>
		</div>
		<div class="row">
			<div class="column is-12 is-desktop-6">
				<section class="tabs-container">

					<section class="tab-buttons">
						<button class="tab-button">Popis</button>
						<button class="tab-button is-active">Komentáře</button>
					</section>

					<section class="tabs">
						<section class="tab" id="description">
							<p class="has-max-width has-no-margin">When an unknown printer took a galley of type and scrambled it to make a type specimen book. Electronic typesetting, remaining essentially unchanged It was popularised.</p>
						</section>

						<section class="tab is-active" id="reviews">
							<section class="reviews">

								<section class="review">
									<section class="review-head">
										<span class="name">Richard Závodný</span>
										<span class="date">17.5.2019</span>
									</section>
									<section class="review-body">
										<p class="has-max-width has-no-margin">Dobrý produkt, kvalitní, motiv drží i po několikátém praní.</p>
									</section>
								</section>

								<section class="review">
									<section class="review-head">
										<span class="name">Richard Závodný</span>
										<span class="date">17.5.2019</span>
									</section>
									<section class="review-body">
										<p class="has-max-width has-no-margin">Dobrý produkt, kvalitní, motiv drží i po několikátém praní.</p>
									</section>
								</section>

							</section>
						</section>
					</section>

				</section>
			</div>
		</div>
	</section>
</template>

<script>
	export default {
		data: function() {
			return {
				selectedOptions: [1,5],
				variant_id: null,
				quantity: 1,
				product: null,
				variant: null
			}
		},

		methods: {
			getProduct() {
				axios.get('/api/product/1')
						.then(response => {
							//console.log(response.data);
							this.product = response.data;
						})
						.catch(function(error) {
							//console.log(error.data);
						});
			},

			getVariant() {
				axios.post('/api/product/1/variant', { options: this.selectedOptions })
						.then(response => {
							//console.log(response.data);
							/*this.variant_id = response.data.variant_id;
							this.price = response.data.price;
							this.discount = response.data.discount;
							this.price_before = response.data.price_before;
							this.stock_quantity = response.data.stock_quantity;

							if(response.data.variant_id == null) {
								alert('Varianta neexistuje');
							}*/

							this.variant = response.data;
							this.variant_id = response.data.id;
						})
						.catch(function(error) {
							//console.log(error.data);
						});
			},

			addToCart() {
				axios.post('/api/cart/item/add', { variant_id: this.variant_id, quantity: this.quantity })
						.then(response => {
							//console.log(response.data);
							if(response.data.variant_id == null) {
								alert('Přidáno do košíku');
							}
						})
						.catch(function(error) {
							//console.log(error.data);
						});
			}
		},

		mounted() {
			this.getProduct();
			this.getVariant();
		}
	}
</script>