@extends('layouts.admin-dashboard')
@section('heading')
Accepted Filings Report
@stop
@section('content')

<style>
	.cont-rep-block {
		margin-bottom: 20px;
		text-align: justify;
		font-size: 0px;
	}

	.cont-rep-block h2,
	.cont-rep-block h6 {
		margin: 0;
		text-align: center;
	}

	.cont-rep-block .col {
		display: inline-block;
		width: 48%;
		margin-right: 3.2%;
		font-size: 16px;
	}

	.cont-rep-block .col2 {
		display: inline-block;
		width: 49%;
		margin-right: 1%;
		font-size: 16px;
	}

	.cont-rep-block .col:last-child {
		margin-right: 0%;
	}

	.cont-rep-block .counter {
		background-color: #f5f5f5;
		padding: 20px 0;
		border-radius: 5px;
	}

	.cont-rep-block .count-title {
		font-size: 40px;
		font-weight: normal;
		margin-top: 10px;
		margin-bottom: 0;
		text-align: center;
	}

	.cont-rep-block .count-text {
		font-size: 13px;
		font-weight: normal;
		margin-top: 10px;
		margin-bottom: 0;
		text-align: center;
	}

	.cont-rep-block .fa-2x {
		margin: 0 auto;
		float: none;
		display: table;
		color: #4ad1e5;
	}
</style>
<style>
	.collapsible {
		background-color: #008fd5;
		color: white;
		cursor: pointer;
		padding: 18px;
		width: 100%;
		border: none;
		text-align: left;
		outline: none;
		font-size: 15px;
	}

	.active,
	.collapsible:hover {
		background-color: #008fd5;
	}

	.collapsible:after {
		content: '\002B';
		color: white;
		font-weight: bold;
		float: right;
		margin-left: 5px;
	}

	.active:after {
		content: "\2212";
	}

	.collapsible_content {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.2s ease-out;
		background-color: #fefefe;
	}

	.collapsible_content .table {
		margin-top: 0px;
	}

	.collapsible_content .table tbody {
		max-height: 400px;
		overflow-y: auto;
	}

	.scrollable-table-wrapper {
		height: 400px;
		overflow: auto;
	}

	.scrollable-table-wrapper thead tr th {
		position: sticky;
		top: 0;
	}
	.table.table-striped th, .table.table-striped td {
  		font-size: 11px;
	}
</style>
<div class="cont-rep-block">
	<div class="col">
		<div class="counter">
			<h2>{{ number_format($data['avg_monthly_firm_top10'], 0, '.', ',') }}</h2>
			<p class="count-text ">AVG Filings Top 10 Firms</p>
		</div>
	</div>

	<div class="col">
		<div class="counter">
		<h2>{{ number_format($data['avg_monthly_firm_top25'], 0, '.', ',') }}</h2>
			<p class="count-text ">AVG Filings Top 25 Firms</p>
		</div>
	</div>

	
</div>

<div class="cont-rep-block">
<div class="col">
		<div class="counter">
		<h2>{{ number_format($data['avg_monthly_filer_top10'], 0, '.', ',') }}</h2>
			<p class="count-text ">AVG Filings Top 10 Filers</p>
		</div>
	</div>

	<div class="col">
		<div class="counter">
		<h2>{{ number_format($data['avg_monthly_filer_top25'], 0, '.', ',') }}</h2>
			<p class="count-text ">AVG Filings Top 25 Filers</p>
		</div>
	</div>
	
</div>

<div style="margin-bottom: 20px; width:97%; float:left; padding-right: 1%;">
	<div style="background-color:rgb(107, 100, 97); color: white; padding: 5px 15px;">
		<h3>Ranking of organizations from Highest to Lowest filers.
			<span aria-label="Export" value="Export" class="btn-padding btn-bluebg export exportReport" data-report="ranking_firms" style="margin-left: 48%;cursor:pointer;">Export</span>
		</h3>
	</div>
	<div>
		<canvas id="chartRankingFirms"></canvas>
	</div>
</div>

<div style="margin-bottom: 20px; width:97%; float:left;padding-left: 1%;">
	<div style="background-color:rgb(107, 100, 97); color: white; padding: 5px 15px;">
		<h3>Ranking of individuals from Highest to Lowest filers.
		<span aria-label="Export" value="Export" class="btn-padding btn-bluebg export exportReport" data-report="ranking_filers" style="margin-left: 50%;cursor:pointer;">Export</span>
		</h3>
	</div>
	<div>
		<canvas id="chartRankingFilers"></canvas>
	</div>
</div>


<div style="margin-bottom: 20px; clear: both;">
    <div style="background-color:rgb(107, 100, 97); color: white; padding: 5px 15px;">
        <h3> Avg monthly filings per firm
		<span aria-label="Export" value="Export" class="btn-padding btn-bluebg export exportReport" data-report="avg_monthly_firms" style="margin-left: 67%;cursor:pointer;">Export</span>
		</h3>
    </div>
	<div>
		<div class="collapsible_content22">
			<div class="scrollable-table-wrapper">
				<table class="table table-striped">
					<thead>
						<tr>
							<th>Firm Name</th>
							<th>Avg Filings</th>
						</tr>
					</thead>
					<tbody>
													<tr>
								<td colspan="2" style="text-align:center;">No records</td>
							</tr>
											</tbody>
				</table>
			</div>
		</div>
	</div>
</div>


<div style="margin-bottom: 20px; clear: both;">
    <div style="background-color:rgb(107, 100, 97); color: white; padding: 5px 15px;">
        <h3> Avg monthly filings per individual
		<span aria-label="Export" value="Export" class="btn-padding btn-bluebg export exportReport" data-report="avg_monthly_filers" style="margin-left: 64%;cursor:pointer;">Export</span>
		</h3>
    </div>
	<div>
		<div class="collapsible_content22">
			<div class="scrollable-table-wrapper">
				<table class="table table-striped">
					<thead>
						<tr>
							<th>Filer Name</th>
							<th>Firm Name</th>
							<th>Avg Filings</th>
						</tr>
					</thead>
					<tbody>
													<tr>
								<td colspan="3" style="text-align:center;">No records</td>
							</tr>
											</tbody>
				</table>
			</div>
		</div>
	</div>
</div>

<div style="margin-bottom: 20px; clear: both;">
    <div style="background-color:rgb(107, 100, 97); color: white; padding: 5px 15px;">
        <h3> Firms who have not filed in the past 3 months
		<span aria-label="Export" value="Export" class="btn-padding btn-bluebg export exportReport" data-report="list_firms_without_filings" style="margin-left: 56%;cursor:pointer;">Export</span>
		</h3>
    </div>
	<div>
		<div class="collapsible_content22">
			<div class="scrollable-table-wrapper">
				<table class="table table-striped">
					<thead>
						<tr>
							<th>Firm Name</th>
							<th>Address</th>
							<th>City</th>
						</tr>
					</thead>
					<tbody>
													<tr>
								<td colspan="3" style="text-align:center;">No records</td>
							</tr>
											</tbody>
				</table>
			</div>
		</div>
	</div>
</div>

<div style="margin-bottom: 20px; clear: both;">
    <div style="background-color:rgb(107, 100, 97); color: white; padding: 5px 15px;">
        <h3> New firms that have filed with us in the past 6 months
		<span aria-label="Export" value="Export" class="btn-padding btn-bluebg export exportReport" data-report="list_newfirms_without_filings" style="margin-left: 50%;cursor:pointer;">Export</span>
		</h3>
    </div>
	<div>
		<div class="collapsible_content22">
			<div class="scrollable-table-wrapper">
				<table class="table table-striped">
					<thead>
						<tr>
							<th>Firm Name</th>
							<th>Address</th>
							<th>City</th>
						</tr>
					</thead>
					<tbody>
													<tr>
								<td colspan="3" style="text-align:center;">No records</td>
							</tr>
											</tbody>
				</table>
			</div>
		</div>
	</div>
</div>

<div style="margin-bottom: 20px; clear: both;">
    <div style="background-color:rgb(107, 100, 97); color: white; padding: 5px 15px;">
        <h3> New individuals that have filed with us in the past 3 months
		<span aria-label="Export" value="Export" class="btn-padding btn-bluebg export exportReport" data-report="list_newfilers_without_filings" style="margin-left: 46%;cursor:pointer;">Export</span>
		</h3>
    </div>
	<div>
		<div class="collapsible_content22">
			<div class="scrollable-table-wrapper">
				<table class="table table-striped">
					<thead>
						<tr>
							<th>Last Name</th>
							<th>First Name</th>
							<th>Email</th>
						</tr>
					</thead>
					<tbody>
													<tr>
								<td colspan="3" style="text-align:center;">No records</td>
							</tr>
											</tbody>
				</table>
			</div>
		</div>
	</div>
</div>


@stop
@section('scripts_bottom')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="/js/jquery.quicksearch.js"></script>
<script type="text/javascript" src="/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="/js/jquery.validate.min.js"></script>

<script type="text/javascript">
	$(document).ready(function() {
		$(function() {
			$("#start_date,#end_date").datepicker({
				dateFormat: 'yy-mm-dd'
			});
		});

		function dateFormat(date) {
			if (date.indexOf('/') !== -1) {
				var splits = date.split('/');
				return splits[2] + '-' + splits[0] + '-' + splits[1];
			} else {
				return date;
			}
		}

		$(".exportReport").on('click', function(event) {
			var func = $(this).data('report');
			var url = MFR.siteConfig.base_url + '/statistics/newstatdetail?' +
				'function=' + func;
			window.open(url, '_blank');

			// IF CSV, don't do event.preventDefault() or return false
			// We actually need this to be a typical hyperlink
		});
	});
</script>

<script>
	/**
	 * Collapsable containers
	 */
	let coll = document.getElementsByClassName("collapsible");
	let i_coll;

	for (i_coll = 0; i_coll < coll.length; i_coll++) {
		coll[i_coll].addEventListener("click", function() {
			this.classList.toggle("active");
			var content = this.nextElementSibling;
			if (content.style.maxHeight) {
				content.style.maxHeight = null;
			} else {
				content.style.maxHeight = content.scrollHeight + "px"; // "400px"; // 
			}
		});
	}


	/**
	 * Charts
	 */
	const ctx = document.getElementById('chartRankingFirms');
	new Chart(ctx, {
		type: 'bar',
		options: {
			indexAxis: 'y',
			// elements: {
			// 	bar: {
			// 		borderWidth: 1,
			// 	}
			// }
			plugins: {
				// legend: {
				// 	labels: {
				// 		// This more specific font property overrides the global property
				// 		font: {
				// 			size: 24
				// 		}
				// 	}
				// },
			},
			scales: {
				y: {
					ticks: {
						font: {
							size: 9,
						}
					}
				}
			},
			locale: 'en-US'
		},

		data: {
			labels: {{ json_encode($data['ranking_firms']['headers']) }},
			datasets: [{
				label: 'Total EFilings',
				data: {{ json_encode($data['ranking_firms']['records']) }},
				borderWidth: 1,
			}]
		}
	});

	const ctx2 = document.getElementById('chartRankingFilers');
	new Chart(ctx2, {
		type: 'bar',
		options: {
			indexAxis: 'y',
			// elements: {
			// 	bar: {
			// 		borderWidth: 1,
			// 	}
			// }
			scales: {
				y: {
					ticks: {
						font: {
							size: 9,
						}
					}
				}
			},
			locale: 'en-US'
		},
		data: {
			labels: {{ json_encode($data['ranking_filers']['headers']) }},
			datasets: [{
				label: 'Total EFilings',
				data: {{ json_encode($data['ranking_filers']['records']) }},
				borderWidth: 1
			}]
		}
	});


	// const ctx2 = document.getElementById('chartCreatedNewFirms');
	// new Chart(ctx2, {
	// 	type: 'bar',
	// 	data: {
	// 		labels: {
	// 			{
	// 				json_encode($data['created_cases_new_firms']['headers'])
	// 			}
	// 		},
	// 		datasets: [{
	// 				label: 'Total created',
	// 				data: {
	// 					{
	// 						json_encode($data['created_cases_new_firms']['records']['total'])
	// 					}
	// 				},
	// 				borderWidth: 1
	// 			},
	// 			{
	// 				label: 'Drafts',
	// 				data: {
	// 					{
	// 						json_encode($data['created_cases_new_firms']['records']['drafts'])
	// 					}
	// 				},
	// 				borderWidth: 1
	// 			},
	// 			{
	// 				label: 'Sended to tyler',
	// 				data: {
	// 					{
	// 						json_encode($data['created_cases_new_firms']['records']['sended'])
	// 					}
	// 				},
	// 				borderWidth: 1
	// 			},
	// 			{
	// 				label: 'Accepted by tyler',
	// 				data: {
	// 					{
	// 						json_encode($data['created_cases_new_firms']['records']['sended_accepted'])
	// 					}
	// 				},
	// 				borderWidth: 1
	// 			},
	// 			{
	// 				label: 'Invoiced',
	// 				data: {
	// 					{
	// 						json_encode($data['created_cases_new_firms']['records']['invoiced'])
	// 					}
	// 				},
	// 				borderWidth: 1
	// 			},
	// 		]
	// 	}
	// });


	// const ctx3 = document.getElementById('chartUsers');
	// new Chart(ctx3, {
	// 	type: 'bar',
	// 	data: {
	// 		labels: {
	// 			{
	// 				json_encode($data['new_users']['headers'])
	// 			}
	// 		},
	// 		datasets: [{
	// 				label: 'Total created',
	// 				data: {
	// 					{
	// 						json_encode($data['new_users']['records']['total'])
	// 					}
	// 				},
	// 				borderWidth: 1
	// 			},
	// 			{
	// 				label: 'Filer',
	// 				data: {
	// 					{
	// 						json_encode($data['new_users']['records']['filer'])
	// 					}
	// 				},
	// 				borderWidth: 1
	// 			},
	// 			{
	// 				label: 'Attorney',
	// 				data: {
	// 					{
	// 						json_encode($data['new_users']['records']['attorney'])
	// 					}
	// 				},
	// 				borderWidth: 1
	// 			},
	// 			{
	// 				label: 'Individual',
	// 				data: {
	// 					{
	// 						json_encode($data['new_users']['records']['individual'])
	// 					}
	// 				},
	// 				borderWidth: 1
	// 			},
	// 		]
	// 	}
	// });


	// const ctx4 = document.getElementById('chartFirms');
	// new Chart(ctx4, {
	// 	type: 'bar',
	// 	data: {
	// 		labels: {
	// 			{
	// 				json_encode($data['new_firms']['headers'])
	// 			}
	// 		},
	// 		datasets: [{
	// 			label: 'Total created',
	// 			data: {
	// 				{
	// 					json_encode($data['new_firms']['records']['total'])
	// 				}
	// 			},
	// 			borderWidth: 1
	// 		}]
	// 	}
	// });


	// const ctx5 = document.getElementById('chartVFA');
	// new Chart(ctx5, {
	// 	type: 'bar',
	// 	data: {
	// 		labels: {
	// 			{
	// 				json_encode($data['created_vfa']['headers'])
	// 			}
	// 		},
	// 		datasets: [{
	// 				label: 'Total created',
	// 				data: {
	// 					{
	// 						json_encode($data['created_vfa']['records']['total'])
	// 					}
	// 				},
	// 				borderWidth: 1
	// 			},
	// 			{
	// 				label: 'Diamond',
	// 				data: {
	// 					{
	// 						json_encode($data['created_vfa']['records']['diamond'])
	// 					}
	// 				},
	// 				borderWidth: 1
	// 			},
	// 			{
	// 				label: 'Platinum',
	// 				data: {
	// 					{
	// 						json_encode($data['created_vfa']['records']['platinum'])
	// 					}
	// 				},
	// 				borderWidth: 1
	// 			},
	// 			{
	// 				label: 'Gold',
	// 				data: {
	// 					{
	// 						json_encode($data['created_vfa']['records']['gold'])
	// 					}
	// 				},
	// 				borderWidth: 1
	// 			},
	// 		]
	// 	}
	// });
</script>
@stop