@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 Coins History</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" data-toggle="tab" href="#receive" onclick="pointHistory('receive')">Coins Received</a>
							</li>
							<li class="nav-item">
							    <a class="nav-link" data-toggle="tab" href="#used" onclick="pointHistory('used')">Coins used</a>
							</li>
						</ul>
						<div class="tab-content mt-4" id="myTabContent">
							<div class="tab-pane fade show active" id="receive">
								<div id="filter-receive"></div>
			          		</div>
			          		<div class="tab-pane fade" id="used">
			          			<div id="filter-used"></div>
							</div>
		          		</div>
	          		</div>
          	</div>
	    </div>

	</div>
@endsection

@section('scripts')
    <script type="text/javascript">
    	function pointHistory(tabName = 'receive') {
        	$('#pageloader').css('display','flex');
        	console.log(tabName);
            $.ajax({
                type: "POST",
                url: "{{ route('customer.my-points.filter')}}",
                data: {
                    tabName : tabName,
                    _token : '{{ csrf_token()}}'
                },
                success: function(data){
                	$('#pageloader').css('display','none');
                    if (data != "") {
                        $('#filter-'+tabName).html(data);               
                    }
                }
            });
        }
        window.onload = function () { 
        	pointHistory('receive') 
        }

    </script>

@endsection