@extends('layouts.admin-dashboard')
@section('heading')
Statistics
@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: 31%;
		margin-right: 3.2%;
		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;
	}

</style>

<div class="contentBlkHead clearfix" style="margin-bottom: 50px;">
    <form id="filterByDate" action="" method="GET" class="customform fright">
        <p><label for="start_date">From:</label><input type="text" id="start_date" name="start_date" value="<br />
<b>Warning</b>:  Undefined variable $start_date in <b>/home/dario/Servidor/CodingIt/MyFileRunner/App/app/views/statistics/dashboard.blade.php</b> on line <b>115</b><br />
"><img src="/images/calender_icon.png" id="from" alt="calendar" /></p>
        @if($errors->has('start_date'))<p class="error" style="font-size: 10px;"> {{ $errors->first('start_date') }}</p> @endif
        <p><label for="to">To:</label><input type="text" id="end_date" name="end_date" value="<br />
<b>Warning</b>:  Undefined variable $end_date in <b>/home/dario/Servidor/CodingIt/MyFileRunner/App/app/views/statistics/dashboard.blade.php</b> on line <b>117</b><br />
"><img src="/images/calender_icon.png" alt="calendar" id="end_date" /></p>
        @if($errors->has('end_date'))<p class="error" style="font-size: 10px;"> {{ $errors->first('end_date') }}</p> @endif
        <input type="hidden" name="tmz" id="tmz">
        <input type="submit" id="filter" aria-label="Filter" value="Filter" class="btn btn-bluebg btn-medium">
        <a href="/statistics" style="font-size: 12px; display:inline-block; margin-left: 20px;">Reset To Default</a>
    </form>
    <div class="clearfix"></div>
</div>

<div class="cont-rep-block">
	<div class="col">
		<div class="counter">
			<h2>{{ number_format($data['total_cases']['total'], 0, '.', ',') }}</h2>
			<p class="count-text ">Total cases</p>
		</div>
	</div>

	<div class="col">
		<div class="counter">
			<h2>{{ number_format($data['total_cases']['efilings'], 0, '.', ',') }}</h2>
			<p class="count-text ">Total E-Filings</p>
		</div>
	</div>

	<div class="col">
		<div class="counter">
			<h2>{{ number_format($data['total_cases']['eservices'], 0, '.', ',') }}</h2>
			<p class="count-text ">Total E-Services</p>
		</div>
	</div>
</div>

<div class="cont-rep-block">
	<div class="col">
		<div class="counter">
			<h2>{{ number_format($data['total_vfa']['gold'], 0, '.', ',') }}</h2>
			<h6>$ {{ $data['total_vfa']['gold_amount'] }}</h6>
			<p class="count-text ">VFA Gold</p>
		</div>
	</div>

	<div class="col">
		<div class="counter">
			<h2>{{ number_format($data['total_vfa']['platinum'], 0, '.', ',') }}</h2>
			<h6>$ {{ $data['total_vfa']['platinum_amount'] }}</h6>
			<p class="count-text ">VFA Platinum</p>
		</div>
	</div>
	
	<div class="col">
		<div class="counter">
			<h2>{{ number_format($data['total_vfa']['diamond'], 0, '.', ',') }}</h2>
			<h6>$ {{ $data['total_vfa']['diamond_amount'] }}</h6>
			<p class="count-text ">VFA Diamond</p>
		</div>
	</div>
</div>

<div style="margin-bottom: 20px;">
    <div style="background-color:rgb(107, 100, 97); color: white; padding: 5px 15px;">
        <h3>Created E-Filings
		<span id="exportCreatedCases" aria-label="Export" value="Export" class="btn-padding btn-bluebg export" style="margin-left: 70%;cursor:pointer;">Export</span>
		</h3>
    </div>
    <div>
        <canvas id="chartCreated"></canvas>
    </div>
</div>

<div style="margin-bottom: 20px;">
    <div style="background-color:rgb(107, 100, 97); color: white; padding: 5px 15px;">
        <h3>Virtual File Assistances</h3>
    </div>
    <div>
        <canvas id="chartVFA"></canvas>
    </div>
	<div>
		<button class="collapsible" style="font-size: 12px; font-weight:bold;">List of VFA</button>
		<div class="collapsible_content">
			<div class="scrollable-table-wrapper">
				<table class="table table-striped">
					<thead>
						<tr>
							<th>Date</th>
							<th>Plan</th>
							<th>Price</th>
							<th>Case Nº</th>
							<th>Case Title</th>
							<th>User</th>
							<th>Firm name</th>
						</tr>
					</thead>
					<tbody>
													<tr>
								<td colspan="7" style="text-align:center;">No records</td>
							</tr>
											</tbody>
				</table>
			</div>
		</div>
	</div>
</div>

<div style="margin-bottom: 20px;">
    <div style="background-color:rgb(107, 100, 97); color: white; padding: 5px 15px;">
        <h3>New users</h3>
    </div>
    <div>
        <canvas id="chartUsers"></canvas>
    </div>
	<div>
		<button class="collapsible" style="font-size: 12px; font-weight:bold;">List of new users</button>
		<div class="collapsible_content">
			<div class="scrollable-table-wrapper">
				<table class="table table-striped">
					<thead>
						<tr>
							<th>Date</th>
							<th>User</th>
							<th>Firm name</th>
							<th>Email</th>
							<th>Role</th>
						</tr>
					</thead>
					<tbody>
													<tr>
								<td colspan="5" style="text-align:center;">No records</td>
							</tr>
											</tbody>
				</table>
			</div>
		</div>
	</div>
</div>

<div style="margin-bottom: 20px;">
    <div style="background-color:rgb(107, 100, 97); color: white; padding: 5px 15px;">
        <h3>New Firms</h3>
    </div>
    <div>
        <canvas id="chartFirms"></canvas>
    </div>
	<div>
		<button class="collapsible" style="font-size: 12px; font-weight:bold;">List of new firms</button>
		<div class="collapsible_content">
			<div class="scrollable-table-wrapper">
				<table class="table table-striped">
					<thead>
						<tr>
							<th>Date</th>
							<th>Firm name</th>
							<th>Address</th>
							<th>City</th>
							<th>Phone</th>
							<th>Invoice Pref.</th>
							<th>Quickbook ID</th>
						</tr>
					</thead>
					<tbody>
													<tr>
								<td colspan="7" style="text-align:center;">No records</td>
							</tr>
											</tbody>
				</table>
			</div>
		</div>
	</div>
</div>

<div style="margin-bottom: 20px;">
    <div style="background-color:rgb(107, 100, 97); color: white; padding: 5px 15px;">
        <h3>Created cases for new Firms, grouped by case created</h3>
    </div>
    <div>
        <canvas id="chartCreatedNewFirms"></canvas>
    </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;
            }
        }

		$("#exportCreatedCases").on('click', function(event) {
            var start_date = dateFormat($('#start_date').val());
            var end_date = dateFormat($('#end_date').val());
            //			var firm = '';
            var url = MFR.siteConfig.base_url + '/statistics/createdcasesexcel?' +
                'start_date=' + start_date + '&end_date=' + end_date;
            // if ($('.report table').length > 0) {
            window.open(url, '_blank');
            // } else {
            //     alert('No data to export.');
            // }

            // 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('chartCreated');
	new Chart(ctx, {
	type: 'bar',
	data: {
		labels: {{ json_encode($data['created_cases']['headers']) }},
		datasets: [
			{
				label: 'Total Cases',
				data: {{ json_encode($data['created_cases']['records']['total']) }},
				borderWidth: 1
			},
			{
				label: 'Drafts',
				data: {{ json_encode($data['created_cases']['records']['drafts']) }},
				borderWidth: 1
			},
			{
				label: 'Sended to tyler',
				data: {{ json_encode($data['created_cases']['records']['sended']) }},
				borderWidth: 1
			},
			{
				label: 'Accepted by tyler',
				data: {{ json_encode($data['created_cases']['records']['sended_accepted']) }},
				borderWidth: 1
			},
			{
				label: 'Invoiced',
				data: {{ json_encode($data['created_cases']['records']['invoiced']) }},
				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