@extends('frontend.master')
@section('content')
<div class="content">
	<div class="container">
		<div id="apiKeyGeo">
			<div class="row">
				<div class="col-lg-12">
					<h4>{{ __('messages.api_key_title') }}</h4>
					<p>{{ __('messages.api_key_your_success_key_note') }}</p>
				</div>
			</div>
			<div class="row frames-key">
				<div class="col-lg-12" style="height:10px"></div>
				<div class="col-lg-8 col-sm-12">
					<p class="introduce-api">{{ $keyApi }}</p>
				</div>
				<div class="col-lg-4 col-sm-12 text-center mobi-reset-key">
					<button type="button" class="btn btn-danger btn-reset">{{ __('messages.api_key_reset_secret_key_btn') }}</button>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-12">
					<div style="height:50px"></div>
					<div class="row">
						<div class="col-lg-12 col-sm-12">
							@if (Auth::user()->package_id == 0)
							<h4>{{ __('messages.api_key_plan_type') }}: {{ __('messages.api_key_package_name_TRIAL') }}</h4>
							@elseif (Auth::user()->package_id == 1)
							<h4>{{ __('messages.api_key_plan_type') }}: {{ __('messages.api_key_package_name_STANDARD') }}</h4>
							@else
							<h4>{{ __('messages.api_key_plan_type') }}: {{ __('messages.api_key_package_name_ENTERPRISE') }}</h4>
							@endif
							<div style="height:10px"></div>
							<p>
								@if (Auth::user()->package_id == 0)
									{{ __('messages.api_key_plan_note_TRIAL') }}
								@elseif (Auth::user()->package_id == 1)
									{{ __('messages.api_key_plan_note_STANDARD') }}
								@else
									{{ __('messages.api_key_plan_note_ENTERPRISE') }}
								@endif
							</p>
						</div>
						<div class="col-lg-12 col-sm-12">
							@if (Auth::user()->package_id == 0 || Auth::user()->limit_price > 0 || Auth::user()->limit_price != NULL)
								<div class="progress">
									<div class="progress-bar @if($percent_used_request >= 90) bg-danger @else bg-success @endif" role="progressbar" style="width: {{ $percent_used_request }}%;" aria-valuenow="{{ $percent_used_request }}" aria-valuemin="0" aria-valuemax="100">{{ $percent_used_request }}%</div>
								</div>
							@endif
							<div class="text-right mt-3">
								@if(Auth::user()->package_id == 0)
									<a href="/stripe-payment" class="btn btn-primary">{{ __('messages.api_key_buy_now_btn') }}</a>
								@else
									<button type="button" class="btn btn-primary btn-upgrade" data-toggle="modal" data-target="#exampleModalCenter">{{ __('messages.api_key_increase_limit_btn') }}</button>
								@endif
							</div>
						</div>
					</div>

					<div style="height:30px"></div>
					<h4>{{ __('messages.api_key_sample_api_call') }}</h4>
					<p>{{ __('messages.api_key_sample_api_note') }}</p>
				</div>
			</div>
			<div class="row frames-key">
				<div class="col-lg-12 text-center">
					<p class="api-latlng">{{url ("/")}}/widget/{{$keyApi}}?lat=&lng=&overlay=&zoom=...</p>
				</div>
			</div>
			<div style="height:30px"></div>
			<div class="row">
				<div class="col-lg-12">
					<h4 class="text-center">{{ __('messages.api_key_api_usage') }}</h4>
					<p class="text-center">{{ __('messages.api_key_no_api_usage_to_show') }}</p>
				</div>
				<div class="col-lg-12 text-center">
					<select class="custom-select" name='month'>
						@for ($i = 1; $i <= 12; $i++)
							<option @if ($i == date('m')) selected @endif>{{ $i }}</option>
						@endfor
					</select>
					<select class="custom-select" name='year'>
						@for ($i = date('Y') - 2; $i <= date('Y'); $i++)
							<option @if ($i == date('Y')) selected @endif>{{ $i }}</option>
						@endfor
					</select>
				</div>
				<div style='width:100%;'>
					<canvas id="myChart"></canvas>
				</div>
				<div class="col-lg-12">
					<h4 class="text-center">{{ __('messages.api_key_dates') }}</h4>
					<p>{{ __('messages.api_key_power_note') }}</p>
					<p>{{ __('messages.api_key_more_infor_title') }} <a href="{{ url ('/') }}/faqs">{{ __('messages.api_key_terms_of_service') }}</a></p>
				</div>
			</div>
		</div>
		<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
			<div class="modal-dialog modal-dialog-centered" role="document">
				<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLongTitle">{{ __('messages.api_key_increase_limit_title') }}</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					@if(isset($old_price))
						<p>{{ __('messages.api_key_increase_limit_note_1') }}: {{$old_price}} USD</p>
					@else
						<p>{{ __('messages.api_key_increasee_limit_note_2') }}</p>
					@endif
					<label>{{ __('messages.api_key_increase_limit_title') }}</label>
					<input type="text" name="new_price" id="newPrice">
					<p class="new-price alert-errors"></p>
				</div>
				<div class="modal-footer">
					<!-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> -->
					<button type="button" class="btn btn-primary" id="savePriceLimit">{{ __('messages.api_key_save_changes_btn') }}</button>
				</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
	$( document ).ready(function() {
		var ctx = document.getElementById("myChart").getContext('2d');
		// var labels = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
		var labels = [];

		for (let index = 1; index <= {{ count($arr) }}; index++) {
			if( window.mobileCheck() ){
				if( index % 5 == 0 ){
					labels.push(index)
				}else{
					labels.push('')
				}
			}else{
				labels.push(index)
			}
		}

		var data = [];
		var myVariable = null;
		for (let i=0; i<=Object.keys(myVariable).length ; i++) {
		   data[i] = myVariable[i+1];
		}
		var myChart = new Chart(ctx, {
			type: 'line',
			data: {
				labels: labels,
				datasets: [{
					label: '# {{ __('messages.api_key_request') }}',
					data: data,
					backgroundColor: [
						'rgba(255, 99, 132, 0.2)',
					],
					borderColor: [
						'rgba(255,99,132,1)',
					],
					lineTension: 0,
					borderWidth: 1
				}]
			},
			options: {
				legend: {
					onClick: (e) => e.stopPropagation()
				},
				scales: {
					yAxes: [{
						ticks: {
							beginAtZero:true
						}
					}]
				}
			}
		});

		document.getElementById('newPrice').onkeydown = function(e) {
			if(isNaN(e.key) && e.keyCode != 8){
				return false;
			}
		}

		$('.close').click(function(){

			$('.new-price').text('');
			$('#newPrice').val('');
		})
		$('#savePriceLimit').click(function(){
			var new_price = $('#newPrice').val();
			if(/^[a-zA-Z0-9- ]*$/.test(new_price) == false) {
				$('.new-price').text('{{ __('messages.api_key_increasee_limit_not_contain_special_characters') }}');
				return false;
			}
			if(new_price !== ''){
				if(new_price == 0){
					$('.new-price').text('{{ __('messages.api_key_increasee_limit_must_be_empty_or_greater_than_1') }}');
					return false;
				}
				new_price = parseInt(new_price);
				if(new_price > 999999){
					$('.new-price').text('{{ __('messages.api_key_increasee_limit_the_amount_your_enterd_is_too_big') }}');
					return false;
				}
			}


			var data = {
				new_price : new_price
			};

			$.ajaxSetup({
				headers:
					{
						'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
					}
			});

			$.ajax({
				method: "POST",
				url: '{{ $url_link }}/increase-limit-ajax',
				data: data,
				dataType: 'json',
				beforeSend: function(r, a){
					$(".ajax_waiting").addClass("loading");
				},
				complete: function(r, a){
					$(".ajax_waiting").removeClass("loading");
				},
				success: function (response) {
					if(response.status == 200){
						Swal.fire({
							type: 'success',
							text: '{{ __('messages.api_key_save_successfully') }}',
							confirmButtonText: "{{ __('messages.confirm_text_ok') }}",
						}).then( result => {
							location.reload()
						})
					}
				}
			});
		})

		$('.btn-reset').click(function(){
			$.ajaxSetup({
				headers:
					{
						'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
					}
			});
			$.ajax({
				method: "POST",
				url: '{{ $url_link }}/reset-key-ajax',
				data: '',
				dataType: 'json',
				beforeSend: function(r, a){
					$(".ajax_waiting").addClass("loading");
				},
				complete: function(r, a){
					$(".ajax_waiting").removeClass("loading");
				},
				success: function (response) {
					if(response.status == 200){
						$('.introduce-api').text(response.keyApi);
						$('.api-latlng').text("{{url ("/")}}"+"/widget/"+response.keyApi+"?lat=&lng=&overlay=&zoom=...");
						Swal.fire({
							type: 'success',
							text: '{{ __('messages.api_key_reset_secret_key_success') }}',
							confirmButtonText: "{{ __('messages.confirm_text_ok') }}",
						})
					}
				}
			});
		});

		$("select.custom-select").change(function(){
			var month = $("select[name=month]").val();
			var year = $("select[name=year]").val();

			var data = {
				month : month,
				year : year,
				// package_id : package_id
			}
			$.ajaxSetup({
				headers:
					{
						'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
					}
			});
			$.ajax({
				method: "POST",
				url: '{{ $url_link }}/chart-request',
				data: data,
				dataType: 'json',
				beforeSend: function(r, a){
					$(".ajax_waiting").addClass("loading");
				},
				complete: function(r, a){
					$(".ajax_waiting").removeClass("loading");
				},
				success: function (response) {
					if(response.status == 200){
						var ctx = document.getElementById("myChart").getContext('2d');
						// var labels = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
						var myVariable = response.arr;
						var labels = [];

						for (let index = 1; index <= response.total_days_in_month; index++) {
							if( window.mobileCheck() ){
								if( index % 5 == 0 ){
									labels.push(index)
								}else{
									labels.push('')
								}
							}else{
								labels.push(index)
							}
						}

						var data = [];

						for (let i=0; i<Object.keys(myVariable).length ; i++) {
							data[i] = myVariable[i+1];
						}

						myChart.destroy();
						myChart = new Chart(ctx, {
							type: 'line',
							data: {
								labels: labels,
								datasets: [{
									label: "# {{ __('messages.api_key_request') }}",
									data: data,
									backgroundColor: [
										'rgba(255, 99, 132, 0.2)',
									],
									order:0,
									borderColor: [
										'rgba(255,99,132,1)',
									],
									lineTension: 0,
									borderWidth: 1
								}]
							},
							options: {
								legend: {
									onClick: (e) => e.stopPropagation()
								},
								scales: {
									yAxes: [{
										ticks: {
											beginAtZero:true
										}
									}]
								}
							}
						});
					}
				}
			})
		})
	})

	window.mobileCheck = function() {
        let check = false;
        (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
        return check;
    };
</script>
@endsection