@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 Purchases</h4>
            </div>
	        <div class="card-body">
	        	<div class="HisTabs">
                	<ul class="nav" id="myTab" role="tablist">
						<li class="nav-item">
						    <a class="nav-link active" data-toggle="tab" href="#All"  onclick="purchasefilter('all')">
						    	<i class="fa fa-slideshare"></i>
						    	<span>All</span>
						    </a>
						</li>
						<li class="nav-item">
						    <a class="nav-link" data-toggle="tab" href="#Pay" onclick="purchasefilter('pay')">
						    	<i class="fa fa-credit-card"></i>
						    	<span>To Pay</span>
						    </a>
						</li>
						<li class="nav-item">
						    <a class="nav-link" data-toggle="tab" href="#Paid" onclick="purchasefilter('paid')">
						    	<i class="fa fa-credit-card"></i>
						    	<span>Paid</span>
						    </a>
						</li>
					</ul>


					<div class="tab-content" id="myTabContent">
						<div class="tab-pane fade show active mt-4" id="All">
				            <div class="topsearch-bar position-relative">
								<input type="text" name="search" class="form-control input-sm" placeholder="Search by Invoice Number" onkeyup="purchasefilter()" id="search_all">
								<input type="hidden" name="status" value="" id="status_all">
								<button type="submit" class="formicon border-0 p-0 bg-transparent">
									<span class="fa fa-search"></span>
								</button>
							</div>
							<div id="filter-all"></div>
		          		</div>

		          		<!--  Pay Tab List -->
		          		<div class="tab-pane fade mt-4" id="Pay">
							<div class="topsearch-bar position-relative">
								<input type="text" name="search" class="form-control input-sm" placeholder="Search by Invoice Number"  onkeyup="purchasefilter('pay')" id="search_pay">
								<input type="hidden" name="status" value="0" id="status_pay">
								<button type="submit" class="formicon border-0 p-0 bg-transparent">
									<span class="fa fa-search"></span>
								</button>
							</div>
							<div id="filter-pay"></div>
						</div>

						<!--  Paid Tab List -->
						<div class="tab-pane fade mt-4" id="Paid">
							<div class="topsearch-bar position-relative">
								<input type="text" name="search" class="form-control input-sm" placeholder="Search by Invoice Number" onkeyup="purchasefilter('paid')" id="search_paid">
								<input type="hidden" name="status" value="2" id="status_paid">
								<button type="submit" class="formicon border-0 p-0 bg-transparent">
									<span class="fa fa-search"></span>
								</button>
							</div>
							<div id="filter-paid"></div>
						</div>
	          		</div>
          		</div>
	        </div>
	    </div>
	</div>

<!-- Modal -->
<div class="modal fade view-order-detail" id="viewOrder">
	<div class="modal-dialog modal-lg">
	    <div class="modal-content">
	      	<div class="modal-header border-0">
		        {{--<h5 class="modal-title text-primary">View Order</h5>--}}
		        <button type="button" class="close p-0" data-dismiss="modal">
		          <span class="lnr lnr-cross"></span>
		        </button>
		    </div>
		    <div class="modal-body" id="viewOrderData">
		        
			</div>
	    </div>
	</div>
</div>	

@endsection

@section('scripts')
    <script type="text/javascript">
    	function viewOrder(date_of_live='',invoice_id='',inv_number=''){
    		$.ajax({
                type: "POST",
                url: "{{ route('customer.purchase.viewOrder')}}",
                data: {
                    date_of_live : date_of_live,
                    invoice_id : invoice_id,
                    _token : '{{ csrf_token()}}'
                },
                success: function(data){
                    $('#viewOrder').find('#viewOrderData').html(data);
                    $('#viewOrder').modal('show');
                }
            });
    	}
    	
        function purchasefilter(tabName = 'all') {
        	$('#pageloader').css('display','flex');
        	console.log(tabName);
            $.ajax({
                type: "POST",
                url: "{{ route('customer.purchase.filter')}}",
                data: {
                    name : $("#search_"+tabName).val(),
                    status : $("#status_"+tabName).val(),
                    _token : '{{ csrf_token()}}'
                },
                success: function(data){
                	$('#pageloader').css('display','none');
                    if (data != "") {
                        $('#filter-'+tabName).html(data);               
                    }
                }
            });
        }
        window.onload = function () { purchasefilter('all') }
    </script>
@endsection