@extends('layouts.admin_template')
@section('content')
<!-- container Start -->
<div class="container-fluid px-3 px-xxl-5">
	<div class="titel-head pb-4">
        <h1>Wallet Transaction Report</h1>
	</div>
	<div class="flash-message">
		@foreach (['danger', 'warning', 'success', 'info'] as $msg)
		@if(Session::has('alert-' . $msg))
		<div class="alert alert-{{ $msg }} alert-dismissible fade show" role="alert">
			<strong>{{ ucfirst(($msg == 'danger') ? "Error" : $msg) }}!</strong> {{ Session::get('alert-' . $msg) }}
			<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
		</div>
		@endif
		@endforeach
	</div>
	<div class="row g-3">
        <div class="col-lg-12 mt-3 mt-lg-5">
			<div class="row">
				<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
					<div class="form-group mb-3">
						<label><strong>@lang('translate.from') :</strong></label>
						<input type="text" class="form-control form-control-lg bg-dark" name="fromdate" id="fromdate" value="{{ date('Y-m-d',strtotime('-7 day')) }}" readonly />
					</div>
				</div>
				<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
					<div class="form-group mb-3">
						<label><strong>@lang('translate.to') :</strong></label>
						<input type="text" class="form-control form-control-lg bg-dark" name="todate" id="todate" value="{{ date('Y-m-d') }}" readonly />
					</div>
				</div>
				<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
					<div class="form-group mb-3" style="padding-top:20px;">
						<button type="button" id="dateSearch" class="btn btn-sm btn-primary">@lang('translate.search')</button>
					</div>
				</div>
			</div>
			<div class="bg-dark pb-4 rounded-3 box-shadow">
				<div class="table-responsive-lg table-p15">
					<table id="wallethistoryreport_datatable" class="table table-dark table-striped mb-0 text-center table-hover">
						<thead>
							<tr>
								<th>@lang('translate.id')</th>
								<th>@lang('translate.name_email')</th>
								<th>@lang('translate.method')</th>
								<th>@lang('translate.to_deposit')</th>
								<th>@lang('translate.amount')</th>
								<th>@lang('translate.note')</th>
                                <th>Approved By</th>
								<th>@lang('translate.date')</th>								
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript">
  $(function () { 
    var table = $('#wallethistoryreport_datatable').DataTable({
		"autoWidth": false,
		"responsive": true,
		"order": [[0, "desc"]],
		"processing": true,
		"serverSide": true,
		"language": { processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span> '},
		"ajax": {
          url: "{{ route('admin.report.wallettransactionreport') }}",
          data: function (d) {
				d.fromdate = $('#fromdate').val();
                d.todate = $('#todate').val();
            }
        },
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex'},
            {data: 'udata', name: 'udata'},
            {data: 'methodcheck', name: 'methodcheck'},
            {data: 'todeposit', name: 'todeposit'},
            {data: 'amount', name: 'amount'},
            {data: 'note', name: 'note'},
            {data: 'approvedby', name: 'approvedby'},
            
            {data: 'date', name: 'date'},
            
        ],
		dom: 'lBfrtip',
		buttons: [
			{ extend: 'excel'},
		],
		"lengthMenu": [ [10, 25, 50, 100, -1], [10, 25, 50, 100, 'All'] ]
    });
	$('#dateSearch').on('click', function() {
		table.draw();
	});
	$("#fromdate").datepicker({ 
		minDate: $("#fromdate").value,
		dateFormat: 'yy-mm-dd',
		changeYear:true,
		onSelect: function (date) {
			$("#todate").datepicker('option', 'minDate', date);
		}
	});
	$("#todate").datepicker({
		maxDate: $("#todate").value,
		dateFormat: 'yy-mm-dd',
		changeYear:true,
		onSelect: function (date) {
			$("#fromdate").datepicker('option', 'maxDate', date);
		}
	});
  });
</script>
@endsection