@extends('layouts.customer')

@section('content')

	<div class="middle__content">

	    <div class="card rounded-0 border-0">
	        <div class="card-header bg-transparent">
                <h4 class="mb-0">My Rewards</h4>
            </div>
            <div class="card-body">
		        <div class="HisTabs">
		            <ul class="nav nav-fill" id="myTab" role="tablist">
						<li class="nav-item">
						    <a class="nav-link active show" data-toggle="tab" href="#redeem" onclick="vouchersList('redeem')">Redeem</a>
						</li>
						<li class="nav-item">
						    <a class="nav-link" data-toggle="tab" href="#wallet" onclick="vouchersList('wallet')">Wallet</a>
						</li>
					</ul>
		        </div>
                
		        <div class="tab-redeem">
		            <div class="tab-content mt-4" id="myTabContent">
                    	    {{--<div class="sort-filter">
                    	        <div class="row justify-content-between">
                    	            <div class="col-12 col-lg-4">
                    	                <div class="category">
                    	                    <label>Category</label>
                    	                    <select class="form-control">
                    	                        <option value="1">Digital</option>
                    	                        <option value="1">Entertainment</option>
                    	                        <option value="1">Accessories</option>
                    	                    </select>
                    	                </div>
                    	            </div>
                    	            <div class="col-12 col-lg-3">
                    	                 <div class="category ">
                    	                     <label>Sort & Filter </label>
                    	                    <select class="form-control">
                    	                        <option value="1">Popularity</option>
                    	                        <option value="1">Latest</option>
                    	                        <option value="1">Features</option>
                    	                        <option value="1">Rating</option>
                    	                        <option value="1">Price</option>
                    	                    </select>
                    	                </div>
                    	            </div>
                    	        </div>
                    	    </div>--}}

                    	

                    	<div class="tab-pane fade show active" id="redeem">
                    	    <div class="row" id="filter-redeem"></div>
                    	</div>
                    	
                    	<div class="tab-pane fade" id="wallet">
                    	    <div class="row" id="filter-wallet"></div>
                    	</div>
                    </div>
		        </div>
			</div>
	    </div>
	</div>
@endsection



@section('scripts')
<script type="text/javascript" src="{{ asset('js/sweet-alert/sweetalert2@9.js') }}"></script>
    <script type="text/javascript">
    	function vouchersList(tabName = 'redeem') {
        	$('#pageloader').css('display','flex');
        	console.log(tabName);
            $.ajax({
                type: "POST",
                url: "{{ route('customer.my-rewards.filter')}}",
                data: {
                    tabName : tabName,
                    _token : '{{ csrf_token()}}'
                },
                success: function(data){
                	$('#pageloader').css('display','none');
                    if (data != "") {
                        $('#filter-'+tabName).html(data);               
                    }
                }
            });
        }
        window.onload = function () { 
        	vouchersList('redeem') 
        }

    </script>

<script type="text/javascript">
  $(document).ready( function(){
       $(document).on('click','.redeem_reward',function(event){
        var thisElement = $(this);
        var redemption_point_voucher_id = $(this).data('redemption_point_voucher_id');
        var status = $(this).val();
            Swal.fire({
                title: 'Are you sure',
                text: "Do you want to redeem this reward?",
                icon: "question",
                showCancelButton : true,
            })
            .then((result) => {
                if(!result.isDismissed) {
                    $.ajax({
                        type: "POST",
                        url: "{{ route('customer.my-rewards.redeemReward') }}",
                        data:{ 
                            _token: "{{csrf_token()}}",
                            redemption_point_voucher_id:redemption_point_voucher_id,
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response){
                            if(response.success){
                                Swal.fire("Reward redeemed!", response.message, "success");
                                window.location.href = response.redirect;
                            }else{
                                Swal.fire("Error", response.message, "error");
                            }
                        },
                        error:function (response) 
                        {
                            console.log(response.responseText);
                            Swal.fire("Error",response.responseText.message,"error");
                        }
                   });
                }else {
                   return false;
                }
          });
     });

  });

</script>

@endsection