@extends('layouts.app')
@section('content')
	<div class="container">
		<div class="row justify-content-center">
			<div class="col-md-12">
				<div class="card card-outline card-info">
					<div class="card-header">
						<div class="card-title">
							<h3>
								<i class="fas fa-solid fa-building"></i>
								@lang('messages.all_payments')
							</h3>
						</div>
					</div>
					<div class="card-body">
						<div class="row mb-4">
							<div class="col-md-12">
								<div class="box-group" id="accordion">
									<div class="panel box box-primary">
					                  <div class="box-header with-border">
					                    <h4 class="box-title">
					                      <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
					                      	<i class="fas fa-filter"></i>
					                        @lang('messages.filter')
					                      </a>
					                    </h4>
					                  </div>
					                  <div id="collapseTwo" class="panel-collapse collapse">
					                    <div class="box-body">
					                    	<div class="row">
									        	<div class="col-md-3">
													<div class="form-group">
										                <label for="filter_by_status">
										                    @lang('messages.payments')
										                </label>
										                <select name="filter_by_status" id="filter_by_status" class="form-control">
										                	<option value="">
									                            @lang('messages.all')
									                        </option>
										                </select>
										            </div>
												</div>
									        </div>
					                    </div>
					                  </div>
					                </div>
				            	</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12">
								<div class="table-responsive">
									<div id="export-btns" class="float-right"></div>
									<table class="table" id="data_table1">
				                        <thead>
				                            <tr>
												<th></th>
				                                <th>@lang('messages.datetime')</th>
				                                <th>@lang('messages.reference')</th>
                                                <th>@lang('messages.name')</th>
                                                <th>@lang('messages.email')</th>
                                                <th>@lang('messages.phone')</th>
                                                <th>@lang('messages.payment_method')</th>
                                                <th>@lang('messages.amount')</th>
                                                <th>@lang('messages.payment_reference')</th>
                                                <th>@lang('messages.status')</th>
				                            </tr>
				                        </thead>
				                        <tbody></tbody>
				                    </table>
				                </div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>		
	</div>
@endsection
@section('footer')
<script type="text/javascript">
	$(document).ready(function(){
		// $.fn.dataTable.ext.errMode = function ( settings, helpPage, message ) { 
		// 	console.log("dataTable Error | settings > %O | helpPage > %O | message > %O", settings, helpPage, message);
		// };
		$.fn.dataTable.ext.errMode = 'none';
		var k = 1;
		var data_table1 = $('#data_table1')
					.on( 'error.dt', function ( e, settings, techNote, message ) {
						console.log("dataTable Error | settings > %O | techNote > %O | message > %O", settings, techNote, message);
					} )
					.DataTable({
						processing: true,
		                serverSide: true,
						// ajax: function (data, callback, settings) {
						// 	callback( JSON.parse( localStorage.getItem('dataTablesData') ) );
						// },
		                ajax:{
		                    url: '/payments',
							type: "GET",
		                    data: function(d) {
		                        // d.status = $('#filter_by_status').val();
								// return $.extend( {}, d, {
								// 	'status': $('#filter_by_status').val()
								// } );
		                    },
							// dataSrc: function ( json ) {
							// 	console.log("dataSrc > %O", json);
							// 	return json.data;
							// },
							complete: function(xhr, responseText){
								console.log("responseText > %s", responseText);
							},
							error: function (xhr, error, code){
								console.log(error, code);
							}
		                },
		                buttons: [
						   	{
						       	extend: 'csv',
						       	footer: true,
						       	exportOptions: {
						            columns: [0,1,2,3,4,5,6,7,8]
						        },
						        title: '{{config("app.name") ."-". __("messages.payments")}}'
						   	},
						   	{
						       	extend: 'excelHtml5',
						       	footer: false,
						       	exportOptions: {
						            columns: [0,1,2,3,4,5,6,7,8]
						        },
						        title: '{{config("app.name") ."-". __("messages.payments")}}'
						   }
						],
						dom: 'lBfrtip',
		                fixedHeader: false,
		                columns: [
							{ data: 'rownum', name: 'payments.rownum'},
							{ data: 'datetime', name: 'payments.payment_time'},
                            { data: 'reference', name: 'payments.reference' },
                            { data: 'payment_name', name: 'payments.payment_name' },
                            { data: 'email', name: 'payments.email' },
                            { data: 'phone', name: 'payments.phone' },
                            { data: 'payment_method', name: 'payments.payment_method' },
                            { data: 'amount', name: 'payments.amount' },
                            { data: 'payment_reference', name: 'payments.payment_reference' },
                            { data: 'payment_status', name: 'payments.payment_status' },
		                ],
						initComplete: function () {
							//console.log("initComplete");
						}
		});

		data_table1.buttons().container().appendTo($('#export-btns'));

		$(document).on('click', '.show_company', function () {
			var url = $(this).data('href');
			$.ajax({
				method: "GET",
				url: url,
				dataType: "html",
				success: function (response) {
					$("#company_modal").html(response).modal('show');
				}
			});
		});

		$(document).on('change', '#filter_by_status', function() {
			data_table1.ajax.reload();
		});
	});
</script>
@endsection