@extends('layouts.vendors')
@section('content')

<!-- CSS -->
<link rel="stylesheet" href="{{ URL::asset('assets/admin/base/js/exports/jquery.dataTables.min.css') }}">
<link rel="stylesheet" href="{{ URL::asset('assets/admin/base/js/exports/buttons.dataTables.min.css') }}">

<!-- Scripts -->
<script type="text/javascript" src="{{ URL::asset('assets/admin/base/js/exports/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/admin/base/js/exports/dataTables.buttons.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/admin/base/js/exports/jszip.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/admin/base/js/exports/vfs_fonts.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/admin/base/js/exports/buttons.html5.min.js') }}"></script>

<style> 
	.buttons-excel {
		margin-left: 15px;
		margin-top: 2px;
	}
	.pageheader{
		min-height: 50px;
	}
	.breadcrumb li{
		font-size: 15px;
	}
</style>

<div class="pageheader">
	<div class="media">
			<div class="media-body">
				<ul class="breadcrumb">
					<li><a href="{{url('organisations/dashboard')}}"><i class="glyphicon glyphicon-home"></i> @lang('messages.Organization')</a></li>
					<li><a href="javascript:;">Donations</a></li>
				</ul>
			</div>
	</div>
</div>

<div class="contentpanel">
	<table id="DonationsTable" class="table table-striped table-bordered">
		<thead>
			<tr>
				<th>@lang('messages.ID')</th> 
				<th>@lang('messages.Program Name')</th>
				<th>@lang('messages.Organization Name')</th>
				<th>@lang('messages.User Name')</th>
				<th>@lang('messages.Donated Amount')</th>
				<th>@lang('messages.Donated At')</th>
				<th style="width: 120px;">@lang('messages.Payment Status')</th>
				<th style="width: 90px;">@lang('messages.Actions')</th>
			</tr>
	 	</thead>
		<tbody>
			<tr>
				<td class="empty-text" colspan="13" style="background-color: #fff!important;">
					<div class="list-empty-text"> @lang('messages.No records found.') </div>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<script>
	$(function() {
			$('#DonationsTable').DataTable({
			dom: 'lBfrtip', //Export Script
			buttons: [
    			{
    			text: 'Export',
    			extend: 'excelHtml5',
    			title: '10Bucksonly - Donations',
    			autoFilter: true,
    			sheetName: 'Donations',
					exportOptions: {
              columns: [ 0, 1, 2, 3, 4, 5, 6 ]
            }
    			},
			],
			processing: false,
			serverSide: false,
			responsive: true,
			autoWidth:true,
			ajax: '{!! route('ajaxvendordonationslists.data') !!}',
			"order": [],
			"columnDefs": [ {
			"targets"  : 'no-sort',
			"orderable": false,
			"searchable":true,
			"pagingType": "full",
			'exportable': true
			}],
			columns: 
				[
					{ data: 'id', name: 'id',orderable: true },
					{ data: 'program_name', name: 'program_name' },
					{ data: 'organisation_name', name: 'organisation_name' },
					{ data: 'user_name', name: 'user_name' },
					{ data: 'donated_amount', name: 'donated_amount', searchable: true},
					{ data: 'donated_at', name: 'donated_at' },
					{ data: 'payment_status', name: 'payment_status' },
					{ data: 'action', name: 'action', orderable: false, searchable: false}
				],
				drawCallback: function(){
					$('td:has(.td_center)').css('text-align', 'center');
				}
			});
	});
	</script>
@endsection