@extends('layouts.app')

@section('title') Vouchers @endsection

@section('content')
<div class="container py-5">
	<div>
		<p>Your Vouchers</p>
	</div>

	<div class="row">
		<div class="col-xl-3 col-lg-4 py-5" style="background: #fff8e8;">
			@include('partials.customer_sidebar')
		</div>

		<div class="col-lg-8 col-xl-9">
			<div class="row">
				@foreach ($vouchers as $voucher)
				@php
				$product = $voucher->productVariation->product;
				@endphp
				@if ($product)
				<div class="col-md-4 col-sm-12 mb-4">
				    <div class="card">
				        @foreach ($product->images as $image)
				            @if($image->main_image)
				                <img class="img-fluid card-img reward-voucher-img" src="{{ $image->image }}" alt="{{ $product->name }}">
				            @endif
				        @endforeach
				        <div class="card-container">
				            <p>Voucher</p>
				            <h5><b>{{ $product->name }}</b></h5> 
				            <p class="fa-xs grey-text min-height-30">{{ $product->full_description }}</p> 
				            <div class="row">
				                <div class="col-md-6">
				                    <div class="fa-xs grey-text">Available From:</div>
				                    <div class="fa-xs grey-text mb-2">{{ $product->start_date }}</div>
				                </div>
				                <div class="col-md-6">
				                    <div class="fa-xs grey-text">End From:</div>
				                    <div class="fa-xs grey-text mb-2">{{ $product->end_date }}</div>
				                </div>
				                <div class="col-md-6">
				                    <div class="fa-md m-auto">{{ $product->unit_price }} Points</div>
				                </div>
				                @if($voucher->used)
				                <div class="col-md-6">
				                	<a class="btn btn-sm btn-reward mb-2">Redeemed</a>
				                </div>
				                @else
				                <div class="col-md-6">
				                    <a class="btn btn-sm btn-reward mb-2 view" data-id="{{ $voucher->id }}" data-name="{{ $product->name }}" data-description="{{ $product->full_description }}" data-start="{{ $product->start_date }}" data-end="{{ $product->end_date }}" data-point="{{ $product->unit_price }}">View</a>
				                </div>
				                @endif
				            </div>
				        </div>
				    </div>
				</div>
				@endif
				@endforeach
			</div>
		</div>
	</div>
</div>
<div class="modal" tabindex="-1" role="dialog" aria-hidden="true" id="voucher-view">
    <div class="modal-dialog">
        <div>
        	<button type="button" class="close close-custom" data-dismiss="modal" aria-label="Close">
                <i class="fas fa-times"></i>
            </button>
        	<input type="hidden" name="voucher_id" id="voucher_id">
        	<div class="card">
		        <div class="card-container">
		            <p>Voucher</p>
		            <h5><b id="name"></b></h5> 
		            <p class="fa-xs grey-text min-height-30" id="description"></p> 
		            <div class="row">
		                <div class="col-md-6">
		                    <div class="fa-xs grey-text">Available From:</div>
		                    <div class="fa-xs grey-text mb-2" id="start_date"></div>
		                </div>
		                <div class="col-md-6">
		                    <div class="fa-xs grey-text">End From:</div>
		                    <div class="fa-xs grey-text mb-2" id="end_date"></div>
		                </div>
		                <div class="col-md-6 mb-2">
		                    <div class="fa-md m-auto" id="unit_price"></div>
		                </div>
		                <div class="col-md-6 mb-2">
		                	<button type="button" class="btn btn-sm btn-reward" data-dismiss="modal">Close</button>
		                </div>
		                <div class="col-md-12" id="btn-swipe">
							<span class="swipe-text">Swipe to redeem</span>
							<div id="swiper">
								<i id="locker" class="material-icons">
								</i>
							</div>
		                </div>
		            </div>
		        </div>
		    </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script>
	$('tbody tr').click(function()
	{
		const href = $(this).find('a').attr('href');

		window.location = href;
	});

	$('.view').on("click", function () 
    {  	
    	$("#voucher-view").modal('show');
		$("#voucher_id").val($(this).data('id'));
		$("#name").html($(this).data('name'));
		$("#description").html($(this).data('description'));
		$("#start_date").html($(this).data('start'));
		$("#end_date").html($(this).data('end'));
		$("#unit_price").html($(this).data('point')+' points');
    });

    var initialMouse = 0;
	var slideMovementTotal = 0;
	var mouseIsDown = false;
	var swiper = $("#swiper");

	$(document.body, "#swiper").on("mousedown touchstart", function (event) {
		mouseIsDown = true;
		slideMovementTotal = $("#btn-swipe").width();
		initialMouse = event.clientX || event.originalEvent.touches[0].pageX;
	});

	$(document.body, "#swiper").on("mouseup touchend", function (event) {

		if (!mouseIsDown) return;
		mouseIsDown = false;
		var currentMouse = event.clientX || event.changedTouches[0].pageX;
		var relativeMouse = currentMouse - initialMouse;

		if (!swiper.hasClass('unlocked') && relativeMouse < slideMovementTotal) {
			$(".swipe-text").fadeTo(300, 1);
			swiper.animate(
				{
					left: "0px"
				},
				300
			);
			return;
		}

		$.ajax({
			url:  `{{ route('voucher.used') }} `,
			type: 'POST',
			data: 'id='+$("#voucher_id").val(),
			dataType: 'json'

		}).done(function(data)
		{
			swiper.addClass("unlocked");
			$(".swipe-text").text("Redeemed");
			$(".swipe-text").fadeTo(0,1);
		});
		
	});

	$(document.body, "#swiper").on("mousemove touchmove", function (event) {
		if (!mouseIsDown) return;

		var currentMouse = event.clientX || event.originalEvent.touches[0].pageX;
		var relativeMouse = currentMouse - initialMouse;
		var slidePercent = 1 - relativeMouse / slideMovementTotal;

		if(!swiper.hasClass('unlocked')){
			$(".swipe-text").fadeTo(0, slidePercent);

			if (relativeMouse >= slideMovementTotal + 10) {
				swiper.css({ left: slideMovementTotal + "px" });
				return;
			}
			swiper.css({ left: relativeMouse - 10 });
		}
	});

</script>
@endsection