@extends('layouts.app')

@section('page-header')
	<!--PAGE HEADER -->
	<div class="page-header mt-5-7">
		<div class="page-leftheader">
			<h4 class="page-title mb-0">{{ __('STT Dashboard') }}</h4>
			<ol class="breadcrumb mb-2">
				<li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"><i class="fa fa-magic mr-2 fs-12"></i>{{ __('Admin') }}</a></li>
				<li class="breadcrumb-item" aria-current="page"><a href="{{ route('admin.stt.dashboard') }}"> {{ __('STT Management') }}</a></li>
				<li class="breadcrumb-item active" aria-current="page"><a href="#"> {{ __('STT Dashboard') }}</a></li>
			</ol>
		</div>
	</div>
	<!--END PAGE HEADER -->
@endsection

@section('content')	
	<!-- TOP CSP BOX INFO -->
	<div class="card overflow-hidden border-0">
	    <div class="card-body">
			<div class="row">
				<div class="col-lg-4 col-sm-12">
					<div class="col-lg-12 col-md-12 col-sm-12">
						<div class="card overflow-hidden border-0 mt-2 special-shadow">
							<div class="card-body">
								<div class="d-flex align-items-end justify-content-between">
									<div>
										<p class=" mb-3 fs-12 font-weight-bold">{{ __('AWS Minutes Used') }} <span class="text-muted">({{ __('Current Month') }})</span></p>
										<h2 class="mb-0"><span class="number-font-chars">{{ number_format((float)$vendor_data['aws_month'][0]['data'] / 60, 2) }}</span></h2>									
									</div>
									<img src="{{URL::asset('img/csp/aws-lg.png')}}" class="csp-brand-img" alt="AWS Logo">
								</div>
								<div class="d-flex mt-2">
									<div>
										<span class="text-muted fs-12 mr-1">{{ __('Current Year') }} ({{ __('Total Usage') }}):</span>
										<span class="number-font fs-12"><i class="fa fa-bookmark mr-1 text-info"></i>{{ number_format((float)$vendor_data['aws_year'][0]['data'] / 60, 2) }}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-12 col-md-12 col-sm-12">
						<div class="card overflow-hidden border-0 mb-4 special-shadow">
							<div class="card-body">
								<div class="d-flex align-items-end justify-content-between">
									<div>
										<p class=" mb-3 fs-12 font-weight-bold">{{ __('GCP Minutes Used') }} <span class="text-muted">({{ __('Current Month') }})</span></p>
										<h2 class="mb-0"><span class="number-font-chars">{{ number_format((float)$vendor_data['gcp_month'][0]['data'] / 60, 2) }}</span></h2>
									</div>
									<img src="{{URL::asset('img/csp/gcp-lg.png')}}" class="csp-brand-img" alt="GCP Logo">
								</div>
								<div class="d-flex mt-2">
									<div>
										<span class="text-muted fs-12 mr-1">{{ __('Current Year') }} ({{ __('Total Usage') }})</span>
										<span class="number-font fs-12"><i class="fa fa-bookmark mr-1 text-info"></i>{{ number_format((float)$vendor_data['gcp_year'][0]['data'] / 60, 2) }}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-sm-12">
					<div class="col-lg-12 col-md-12 col-sm-12">
						<div class="card overflow-hidden border-0 mt-2 special-shadow">
							<div class="card-body">
								<p class=" mb-3 mt-1 fs-12 font-weight-bold">{{ __('Free Minutes Used') }} <span class="text-muted">({{ __('Current Month') }})</span></p>
								<h2 class="mb-2 number-font-chars">{{ number_format((float)$tts_data_monthly['free_minutes'][0]['data'] / 60, 2) }}</h2>
								<small class="fs-12 text-muted">{{ __('Compared to Last Month') }} (<span id="free_minutes_past"></span>): </small>
								<span class="fs-12" id="free_minutes"></span>
							</div>									
						</div>
					</div>
					<div class="col-lg-12 col-md-12 col-sm-12">
						<div class="card overflow-hidden border-0 mb-4 special-shadow">
							<div class="card-body">
								<p class=" mb-3 mt-1 fs-12 font-weight-bold">{{ __('Paid Minutes Used') }} <span class="text-muted">({{ __('Current Month') }})</span></p>
								<h2 class="mb-2 number-font-chars">{{ number_format((float)$tts_data_monthly['paid_minutes'][0]['data'] / 60, 2) }}</h2>
								<small class="fs-12 text-muted">{{ __('Compared to Last Month') }} (<span id="paid_minutes_past"></span>): </small>
								<span class="fs-12" id="paid_minutes"></span>
							</div>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-sm-12">
					<div class="col-xl-12 col-md-12">
						<div class="card overflow-hidden border-0 mt-2 special-shadow">
							<div class="card-header">
								<h3 class="card-title">{{ __('Cloud Vendor STT Service Usage') }} <span class="text-muted">({{ __('Current Year') }})</span></h3>
							</div>
							<div class="card-body">
								<div class="country-card">
									<div class="mb-5 mt-2">
										<div class="d-flex">
											<span class="fs-12 font-weight-semibold"><img src="{{URL::asset('img/csp/aws-sm.png')}}" class="w-5 h-5 mr-2" alt="">Amazon Web Services</span>
											<div class="ml-auto"><span class="text-success mr-1"></span><span class="number-font fs-14">{{ number_format((float)$vendor_data['aws_year'][0]['data'] / 60, 2) }}</span> <span class="text-muted fs-12">(<span id="aws"></span>)</span></div>
										</div>
										<div class="progress h-2  mt-1">
											<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" id="aws-bar"></div>
										</div>
									</div>
									<div class="mb-4">
										<div class="d-flex">
											<span class="fs-12 font-weight-semibold"><img src="{{URL::asset('img/csp/gcp-sm.png')}}" class="w-5 h-5 mr-2" alt="">Google Cloud Platform</span>
											<div class="ml-auto"><span class="text-success mr-1"></span><span class="number-font fs-14">{{ number_format((float)$vendor_data['gcp_year'][0]['data'] / 60, 2) }}</span> <span class="text-muted fs-12">(<span id="gcp"></span>)</span></div>
										</div>
										<div class="progress h-2  mt-1">
											<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" id="gcp-bar"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- END TOP CSP BOX INFO -->

    <!-- CURRENT YEAR USAGE ANALYTICS -->
	<div class="row mt-4">
		<div class="col-lg-12 col-md-12 col-sm-12">
			<div class="card overflow-hidden border-0">
				<div class="card-header">
					<h3 class="card-title">{{ __('Speect to Text Metrics') }} <span class="text-muted">({{ __('Current Year') }})</span></h3>
				</div>
				<div class="card-body">
					<div class="row mb-5 mt-2">
						<div class="col-md col-sm-12">
							<p class=" mb-1 fs-12">{{ __('Total Audio Files Transcribed') }}</p>
							<h3 class="mb-0 fs-20 number-font">{{ number_format($tts_data_yearly['total_file_transcribe'][0]['data']) }}</h3>
						</div>
						<div class="col-md col-sm-12">
							<p class=" mb-1 fs-12">{{ __('Total Record & Transcribe Tasks') }}</p>
							<h3 class="mb-0 fs-20 number-font">{{ number_format($tts_data_yearly['total_recording_transcribe'][0]['data']) }}</h3>
						</div>
						<div class="col-md col-sm-12">
							<p class=" mb-1 fs-12">{{ __('Total Live Transcribe Tasks') }}</p>
							<h3 class="mb-0 fs-20 number-font">{{ number_format($tts_data_yearly['total_live_transcribe'][0]['data']) }}</h3>
						</div>
						<div class="col-md col-sm-12">
							<p class=" mb-1 fs-12">{{ __('Total Words Generated') }}</p>
							<h3 class="mb-0 fs-20 number-font">{{ number_format($tts_data_yearly['total_words'][0]['data']) }}</h3>
						</div>
					</div>
					<div class="row">
						<div class="col-lg-12 col-md-12 col-sm-12">
							<div class="">
								<canvas id="chart-stt-audio" class="h-400"></canvas>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- CURRENT YEAR USAGE ANALYTICS -->


	<!-- CURRENT YEAR USAGE ANALYTICS -->
	<div class="row">
		<div class="col-lg-12 col-md-12 col-sm-12">
			<div class="card overflow-hidden border-0">
				<div class="card-header">
					<h3 class="card-title">{{ __('Minutes Usage') }} <span class="text-muted">({{ __('Current Year') }})</span></h3>
				</div>
				<div class="card-body">
					<div class="row mb-5 mt-2">
						<div class="col-md-3 col-sm-12">
							<p class="mb-1 fs-12">{{ __('Total Free Minutes') }}</p>
							<h3 class="mb-0 fs-20 number-font">{{ number_format((float)$tts_data_yearly['total_free_minutes'][0]['data'] / 60, 2) }}</h3>
						</div>
						<div class="col-md-3 col-sm-12">
							<p class=" mb-1 fs-12">{{ __('Total Paid Minutes') }}</p>
							<h3 class="mb-0 fs-20 number-font">{{ number_format((float)$tts_data_yearly['total_paid_minutes'][0]['data'] / 60, 2) }}</h3>
						</div>						
					</div>
					<div class="row">
						<div class="col-lg-12 col-md-12 col-sm-12">
							<div class="">
								<canvas id="chart-stt-minutes" class="h-400"></canvas>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- CURRENT YEAR USAGE ANALYTICS -->

@endsection

@section('js')
	<!-- Chart JS -->
	<script src="{{URL::asset('plugins/chart/chart.bundle.js')}}"></script>
	<script type="text/javascript">
		$(function() {
	
			'use strict';

			var fileData = JSON.parse(`<br />
<b>Warning</b>:  Undefined variable $chart_data in <b>/home/wehostclub608/demo.wehostclub.com/transcript/resources/views/admin/stt/dashboard/index.blade.php</b> on line <b>202</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on value of type null in <b>/home/wehostclub608/demo.wehostclub.com/transcript/resources/views/admin/stt/dashboard/index.blade.php</b> on line <b>202</b><br />
`);
			var fileDataset = Object.values(fileData);
			var recordData = JSON.parse(`<br />
<b>Warning</b>:  Undefined variable $chart_data in <b>/home/wehostclub608/demo.wehostclub.com/transcript/resources/views/admin/stt/dashboard/index.blade.php</b> on line <b>204</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on value of type null in <b>/home/wehostclub608/demo.wehostclub.com/transcript/resources/views/admin/stt/dashboard/index.blade.php</b> on line <b>204</b><br />
`);
			var recordDataset = Object.values(recordData);
			var liveData = JSON.parse(`<br />
<b>Warning</b>:  Undefined variable $chart_data in <b>/home/wehostclub608/demo.wehostclub.com/transcript/resources/views/admin/stt/dashboard/index.blade.php</b> on line <b>206</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on value of type null in <b>/home/wehostclub608/demo.wehostclub.com/transcript/resources/views/admin/stt/dashboard/index.blade.php</b> on line <b>206</b><br />
`);
			var liveDataset = Object.values(liveData);

			var ctx = document.getElementById('chart-stt-audio');
			new Chart(ctx, {
				type: 'bar',
				data: {
					labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
					datasets: [{
						label: 'Audio Transcribe Minutes ',
						data: fileDataset,
						backgroundColor: '#007bff',
						borderWidth: 1,
						fill: true
					}, {
						label: 'Recording Transcribe Minutes ',
						data: recordDataset,
						backgroundColor:  '#1e1e2d',
						borderWidth: 1,
						fill: true
					}, {
						label: 'Live Transcribe Minutes ',
						data: liveDataset,
						backgroundColor:  '#FFAB00',
						borderWidth: 1,
						fill: true
					}]
				},
				options: {
					maintainAspectRatio: false,
					legend: {
						display: false,
						labels: {
							display: false
						}
					},
					responsive: true,
					scales: {
						yAxes: [{
							stacked: true,
							ticks: {
								beginAtZero: true,
								fontSize: 11,
								stepSize: 100,
							},
							gridLines: {
								borderDash: [3, 2]                            
							}
						}],
						xAxes: [{
							barPercentage: 0.5,
							stacked: true,
							ticks: {
								fontSize: 11
							},
							gridLines: {
								borderDash: [3, 2]                            
							}
						}]
					},
					tooltips: {
						cornerRadius: 0,
						xPadding: 10,
						yPadding: 10
					},
					legend: {
						position: 'bottom',
						labels: {
						boxWidth: 10,
						fontSize: 10
						}
					}
				}
			});
			
			var freeData = JSON.parse(`<br />
<b>Warning</b>:  Undefined variable $chart_data in <b>/home/wehostclub608/demo.wehostclub.com/transcript/resources/views/admin/stt/dashboard/index.blade.php</b> on line <b>281</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on value of type null in <b>/home/wehostclub608/demo.wehostclub.com/transcript/resources/views/admin/stt/dashboard/index.blade.php</b> on line <b>281</b><br />
`);
			var freeDataset = Object.values(freeData);
			var paidData = JSON.parse(`<br />
<b>Warning</b>:  Undefined variable $chart_data in <b>/home/wehostclub608/demo.wehostclub.com/transcript/resources/views/admin/stt/dashboard/index.blade.php</b> on line <b>283</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on value of type null in <b>/home/wehostclub608/demo.wehostclub.com/transcript/resources/views/admin/stt/dashboard/index.blade.php</b> on line <b>283</b><br />
`);
			var paidDataset = Object.values(paidData);

			var ctx = document.getElementById('chart-stt-minutes');
			new Chart(ctx, {
				type: 'bar',
				data: {
					labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
					datasets: [{
						label: 'Free Minutes Used ',
						data: freeDataset,
						backgroundColor: '#007bff',
						borderWidth: 1,
						fill: true
					}, {
						label: 'Paid Minutes Used ',
						data: paidDataset,
						backgroundColor:  '#1e1e2d',
						borderWidth: 1,
						fill: true
					}]
				},
				options: {
					maintainAspectRatio: false,
					legend: {
						display: false,
						labels: {
							display: false
						}
					},
					responsive: true,
					scales: {
						yAxes: [{
							stacked: true,
							ticks: {
								beginAtZero: true,
								fontSize: 11,
								stepSize: 100,
							},
							gridLines: {
								borderDash: [3, 2]                            
							}
						}],
						xAxes: [{
							barPercentage: 0.5,
							stacked: true,
							ticks: {
								fontSize: 11
							},
							gridLines: {
								borderDash: [3, 2]                            
							}
						}]
					},
					tooltips: {
						cornerRadius: 0,
						xPadding: 10,
						yPadding: 10
					},
					legend: {
						position: 'bottom',
						labels: {
						boxWidth: 10,
						fontSize: 10
						}
					}
				}
			});

			// Vendor Usage
			var aws_year = JSON.parse(`<br />
<b>Warning</b>:  Undefined variable $percentage in <b>/home/wehostclub608/demo.wehostclub.com/transcript/resources/views/admin/stt/dashboard/index.blade.php</b> on line <b>353</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on value of type null in <b>/home/wehostclub608/demo.wehostclub.com/transcript/resources/views/admin/stt/dashboard/index.blade.php</b> on line <b>353</b><br />
`);							
			var gcp_year= JSON.parse(`<br />
<b>Warning</b>:  Undefined variable $percentage in <b>/home/wehostclub608/demo.wehostclub.com/transcript/resources/views/admin/stt/dashboard/index.blade.php</b> on line <b>354</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on value of type null in <b>/home/wehostclub608/demo.wehostclub.com/transcript/resources/views/admin/stt/dashboard/index.blade.php</b> on line <b>354</b><br />
`);				

			(aws_year[0]['data'] == null) ? aws_year = 0 : aws_year = aws_year[0]['data'];
			(gcp_year[0]['data'] == null) ? gcp_year = 0 : gcp_year = gcp_year[0]['data'];

			var aws_total = parseInt(aws_year);	
			var gcp_total = parseInt(gcp_year);

			var total = aws_total + gcp_total;

			var aws = vendorPercentage(aws_total, total);
			var gcp = vendorPercentage(gcp_total, total);
			
			document.getElementById('aws').innerHTML = aws;
			document.getElementById('gcp').innerHTML = gcp;

			document.getElementById('aws-bar').style.width = aws;
			document.getElementById('gcp-bar').style.width = gcp;

			function vendorPercentage(value, total){
				if (total == 0) {
           			 return 0;
        		}

        		return ((value / total) * 100).toFixed(2) + '%';
			} 

			// Percentage Difference
			var free_current_month = JSON.parse(`<br />
<b>Warning</b>:  Undefined variable $percentage in <b>/home/wehostclub608/demo.wehostclub.com/transcript/resources/views/admin/stt/dashboard/index.blade.php</b> on line <b>382</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on value of type null in <b>/home/wehostclub608/demo.wehostclub.com/transcript/resources/views/admin/stt/dashboard/index.blade.php</b> on line <b>382</b><br />
`);				
			var paid_current_month = JSON.parse(`<br />
<b>Warning</b>:  Undefined variable $percentage in <b>/home/wehostclub608/demo.wehostclub.com/transcript/resources/views/admin/stt/dashboard/index.blade.php</b> on line <b>383</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on value of type null in <b>/home/wehostclub608/demo.wehostclub.com/transcript/resources/views/admin/stt/dashboard/index.blade.php</b> on line <b>383</b><br />
`);			

			(free_current_month[0]['data'] == null) ? free_current_month = 0 : free_current_month = free_current_month[0]['data'];
			(paid_current_month[0]['data'] == null) ? paid_current_month = 0 : paid_current_month = paid_current_month[0]['data'];

			var free_current_total = parseInt(free_current_month);	
			var paid_current_total = parseInt(paid_current_month);	

			var free_past_month = JSON.parse(`<br />
<b>Warning</b>:  Undefined variable $percentage in <b>/home/wehostclub608/demo.wehostclub.com/transcript/resources/views/admin/stt/dashboard/index.blade.php</b> on line <b>391</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on value of type null in <b>/home/wehostclub608/demo.wehostclub.com/transcript/resources/views/admin/stt/dashboard/index.blade.php</b> on line <b>391</b><br />
`);				
			var paid_past_month = JSON.parse(`<br />
<b>Warning</b>:  Undefined variable $percentage in <b>/home/wehostclub608/demo.wehostclub.com/transcript/resources/views/admin/stt/dashboard/index.blade.php</b> on line <b>392</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on value of type null in <b>/home/wehostclub608/demo.wehostclub.com/transcript/resources/views/admin/stt/dashboard/index.blade.php</b> on line <b>392</b><br />
`);			

			(free_past_month[0]['data'] == null) ? free_past_month = 0 : free_past_month = free_past_month[0]['data'];
			(paid_past_month[0]['data'] == null) ? paid_past_month = 0 : paid_past_month = paid_past_month[0]['data'];

			var free_past_total = parseInt(free_past_month);	
			var paid_past_total = parseInt(paid_past_month);	

			var free_view = free_past_total / 60;
			var paid_view = paid_past_total / 60;

			document.getElementById('free_minutes_past').innerHTML = free_view.toFixed(2);
			document.getElementById('paid_minutes_past').innerHTML = paid_view.toFixed(2);

			var free_change = vendorPercentageDifference(free_past_total, free_current_total);
			var paid_change = vendorPercentageDifference(paid_past_total, paid_current_total);

			document.getElementById('free_minutes').innerHTML = free_change;
			document.getElementById('paid_minutes').innerHTML = paid_change;

			function vendorPercentageDifference(past, current) {
				if (past == 0) {
					var change = (current == 0) ? '<span class="text-muted"> 0% No Change</span>' : '<span class="text-success"> 100% Increase</span>';   					
					return change;
				} else if(current == 0) {
					var change = (past == 0) ? '<span class="text-muted"> 0% No Change</span>' : '<span class="text-danger"> 100% Decrease</span>';
					return change;
				} else if(past == current) {
					var change = '<span class="text-muted"> 0% No Change</span>';
					return change; 
				}

				var difference = current - past;
    			var difference_value;
				var result;
    			
				var totalDifference = Math.abs(difference);
				var change = (totalDifference/past) * 100;				

				if (difference > 0) {
					result = '<span class="text-success">' + change.toFixed(1) + '% Increase</span>';
				} else if(difference < 0) {
					result = '<span class="text-danger">' + change.toFixed(1) + '% Decrease</span>';
				} else {
					difference_value = '<span class="text-muted">' + change.toFixed(1) + '% No Change</span>';
				}

				return result;
			}
		});		
	</script>
@endsection