@extends('layouts.appNew')
@section('content')
<!--begin::Toolbar-->
<div class="toolbar py-5 pb-lg-15" id="kt_toolbar">
	<!--begin::Container-->
	<div id="kt_toolbar_container" class="container-xxl d-flex flex-stack flex-wrap">
		<!--begin::Page title-->
		<div class="page-title d-flex flex-column me-3">
			<!--begin::Title-->
			<h1 class="d-flex text-white fw-bold my-1 fs-3">Deposit History</h1>
			<!--end::Title-->
		</div>
		<!--end::Page title-->
		<!--begin::Actions-->
		<div class="d-flex align-items-center py-3 py-md-1">
			<!--begin::Button-->
			<a href="{{ route('home') }}" data-bs-theme="light" class="btn bg-body btn-active-color-primary" data-bs-target="#kt_modal_create_app" id="kt_toolbar_primary_button">Dashboard</a>
			<!--end::Button-->
		</div>
		<!--end::Actions-->
	</div>
	<!--end::Container-->
</div>
<!--end::Toolbar-->
<!--begin::Container-->
<div id="kt_content_container" class="d-flex flex-column-fluid align-items-start container-xxl">
	<!--begin::Post-->
	<div class="content flex-row-fluid" id="kt_content">
		<div class="card mb-5 mb-xxl-8">
			<div class="card-body pt-9 pb-0">
				<!--begin::Details-->
				<div class="d-flex flex-wrap flex-sm-nowrap">
					<!--begin::Info-->
					<div class="flex-grow-1">
						<!--begin::Title-->
						<div>
							@if(count($errors) > 0)
						      <div class="alert alert-danger">
						          <ul>
						              @foreach($errors->all() as $error)
						                  <li>{{$error}}</li>
						              @endforeach
						          </ul>
						      </div>
						    @endif
							<!--begin::Form-->
							<!-- <form action="#" class="form mb-15" method="post" enctype="multipart/form-data" id="kt_contact_form">
								@csrf -->	
								<meta name="csrf-token" content="{{ csrf_token() }}">
								<!--begin::Input group-->
									<div class="row mb-10">
										<!--begin::Select2-->
										<select class="form-select mb-2" name="status" data-control="select2" data-hide-search="true" data-placeholder="Select an option" id="status">
											<option selected disabled>Any Status</option>
											<option value="pending">Only Pending</option>
											<option value="success">Only Success</option>
											<option value="rejected">Only Rejected</option>
											<option value="cancelled">Only Cancelled</option>
										</select>
										<!--end::Select2-->
									</div>	
								<!--end::Input group-->	
								<!--begin::Input group-->
									<div class="row mb-10">
										<!--begin::Select2-->
										<select class="form-select mb-2" name="time" data-control="select2" data-hide-search="true" data-placeholder="Select an option" id="time">
											<option selected disabled>All Time</option>
											<option value="month">This Month</option>
											<option value="previous_month">Previous Month</option>
											<option value="year">This Year</option>
											<option value="previous_year">Previous Year</option>
										</select>
										<!--end::Select2-->
									</div>	
								<!--end::Input group-->	
								<!--begin::Input group-->
									<!-- <div class="row mb-10"> -->
										<!--begin::Select2-->
										<!-- <select class="form-select mb-2" name="account" data-control="select2" data-hide-search="true" data-placeholder="Select an option">
											<option>Any Account</option>
											@foreach($account as $row)
												<option value="{{$row->id}}">{{ $row->id }}</option>
											@endforeach
										</select> -->
										<!--end::Select2-->
									<!-- </div>	 -->
								<!--end::Input group-->	
								<!--begin::Submit-->
									<button class="btn btn-primary" id="fetchDataBtn">
										<!--begin::Indicator label-->
										<span class="indicator-label">Apply Filter</span>
										<!--end::Indicator label-->
										<!--begin::Indicator progress-->
										<span class="indicator-progress">Please wait... 
										<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
										<!--end::Indicator progress-->
									</button>
									<div class="row mb-10"></div>
								<!--end::Submit-->	
							<!-- </form> -->
							<!-- end::Form -->
							<table id="deposit-table" class="table table-bordered table-hover">
			                  <thead>
			                  <tr>
			                    <th>Request Id</th>
			                    <th>Status</th>
			                    <th>Account</th>
			                    <th>Amount</th>
			                    <th>Details</th>
			                    <th>Created</th>
			                  </tr>
			                  </thead>
			                  <tbody>
			                  	@if($Deposit->count() > 0)
				                  	@foreach($Deposit as $row)
				                  	<tr>
				                  		<td>{{$row->id}}</td>
				                  		<td>{{$row->status}}</td>
				                  		<td>{{$row->account_id}}</td>
				                  		<td>$ {{$row->amount}}</td>
				                  		<td>{{$row->PaymentMethod->name}}</td>
				                  		<td>{{$row->created_at}}</td>
				                  	</tr>
				                  	@endforeach
				                @else
				                  <tr><td align="center" colspan="5">No data found</td></tr>
				                @endif
			                  </tbody>
			                </table>
						</div>
						<!--end::Title-->
					</div>
					<!--end::Info-->
				</div>
				<!--end::Details-->
			</div>
		</div>
	</div>
	<!--end::Post-->
</div>
<!--end::Container-->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<script>
$(document).ready(function () {
	$('#fetchDataBtn').on('click', function() {
    // Get selected values from dropdowns
	    var selectedValue1 = $('#status').val();
	    var selectedValue2 = $('#time').val();

		if (selectedValue1 && selectedValue2) {
		    // Make AJAX call to fetch data
		    $.ajax({
		        url: '{{ route('fetchdatadeposit') }}',  // Replace with your server-side endpoint
		        method: 'POST',  
		        headers: {
		            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		        },           // Use 'GET' or 'POST' based on your server-side implementation
		        data: {
		            status: selectedValue1,
		            time: selectedValue2
		        },
		        success: function(data) {
		            // Update the table with the received data
		            $('#deposit-table tbody').empty();

		            if (data !== null && data !== undefined) {
					    if (data.length > 0) {
					        data.forEach(function (item) {
					            var row = '<tr>';
					            row += '<td>' + item.id + '</td>';  // Replace with actual column names
					            row += '<td>' + item.status + '</td>';
					            row += '<td>' + item.account_id + '</td>';
					            row += '<td>' + '$ ' +item.amount + '</td>';
					            row += '<td>' + item.payment_method.name + '</td>';

					             // Format the date to display only the date part (YYYY-MM-DD)
					            var dateObject = new Date(item.created_at);
					            var formattedDate = dateObject.toISOString().split('T')[0];

					            row += '<td>' + formattedDate + '</td>';
					            // Add more columns as needed
					            row += '</tr>';
					            $('#deposit-table tbody').append(row);
					        });
					    } else {
					        var emptyRow = '<tr>';
					        emptyRow += '<td colspan="5" align="center">' + 'No Data found according to your search' + '</td>';
					        emptyRow += '</tr>';
					        $('#deposit-table tbody').append(emptyRow);
					    }
					} else {
					    console.error('Data is null or undefined.');
					}
		            
		        },
		        error: function(error) {
		            console.error('Error fetching data:', error);
		        }
		    });
		}
		else{
			alert('Please select values from both status and time.');
		}
	});

 });
</script>
@endsection