@extends('layouts.master')

@section('title', 'Paid Contacts')
@section('css')
	<link href="{{ URL::asset('build/plugins/datatable/css/dataTables.bootstrap5.min.css') }}" rel="stylesheet" />
@endsection 
@section('content')
<x-page-title title="Contacts" pagetitle="Paid Contacts" />
		<h6 class="mb-0 text-uppercase">DIALED AND PAID</h6>
		<hr>
		<div class="card">
			<div class="card-body">
				<div class="table-responsive">
					<table id="example2" class="table table-striped table-bordered">
						<thead>
							<tr>
								<th>Customer ID</th>
								<th>Mobile</th>
								<th>Reference</th>
								<th>Amount</th>
								<th>Date</th>
							</tr>
						</thead>
                        <tbody>
                            @forelse ($data as $user )
                                <tr>
                                    <td>{{$user->customer_id}}</td>
                                    <td>{{$user->phone_number}}</td>
                                    <td>{{$user->transaction_reference}}</td>
                                    <td>{{$user->amount}}</td>
                                    <td>{{$user->created_at}}</td>

                                </tr>
                            @empty
                                
                            @endforelse
                        </tbody>
						
						<tfoot>
							<tr>
								<th>Customer ID</th>
								<th>Mobile</th>
								<th>Reference</th>
								<th>Amount</th>
								<th>Date</th>
							</tr>
						</tfoot>
					</table>
				</div>
			</div>
		</div>
@endsection 
@section('scripts')  

  <script src="{{ URL::asset('build/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
	<script src="{{ URL::asset('build/plugins/datatable/js/dataTables.bootstrap5.min.js') }}"></script>
	<script>
		$(document).ready(function() {
			$('#example').DataTable();
		  } );
	</script>
	<script>
		$(document).ready(function() {
			var table = $('#example2').DataTable( {
				lengthChange: false,
				buttons: [ 'copy', 'excel', 'pdf', 'print']
			} );
		 
			table.buttons().container()
				.appendTo( '#example2_wrapper .col-md-6:eq(0)' );
		} );
	</script>
@endsection