<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<!-- DataTables -->
<link rel="stylesheet" href="<?php echo $this->config->item('admin_assets_folder'); ?>plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="<?php echo $this->config->item('admin_assets_folder'); ?>plugins/datatables-responsive/css/responsive.bootstrap4.min.css">

<!-- DataTables -->
<script src="<?php echo $this->config->item('admin_assets_folder'); ?>plugins/datatables/jquery.dataTables.min.js"></script>
<script src="<?php echo $this->config->item('admin_assets_folder'); ?>plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="<?php echo $this->config->item('admin_assets_folder'); ?>plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="<?php echo $this->config->item('admin_assets_folder'); ?>plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>


<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<style type="text/css">
	/* bootstrap hack: fix content width inside hidden tabs */
	.tab-content > .tab-pane,
	.pill-content > .pill-pane {
	display: block;     /* undo display:none          */
	height: 0;          /* height:0 is also invisible */ 
	overflow-y: hidden; /* no-overflow                */
	}
	.tab-content > .active,
	.pill-content > .active {
	height: auto;       /* let the content decide it  */
	} /* bootstrap hack end */
</style>

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">

	<!-- Content Header (Page header) -->
	<section class="content-header">
		<div class="container-fluid">
			<div class="row mb-2">
				<div class="col-sm-6">
					<h1><?php echo $meta_title; ?></h1>
				</div>
				<div class="col-sm-6">
					<ol class="breadcrumb float-sm-right">
						<li class="breadcrumb-item"><a href="<?php echo base_url().$this->config->item('admin_folder').'/'.'dashboard'; ?>">Home</a></li>
						<li class="breadcrumb-item active"><?php echo $meta_title; ?></li>
					</ol>
				</div>
			</div>
		</div><!-- /.container-fluid -->
	</section>


	<section class="content">
		<div class="container-fluid">

			<div class="row">
		    	<div class="col-md-6">
					<div class="col-md-12">
						<div class="info-box">
							<!-- <span class="info-box-icon bg-info elevation-1"><i class="fas fa-users"></i></span> -->

							<div class="info-box-content">
								<span class="info-box-text">Website File Size</span>
								<span class="info-box-number" id="website_total_file_size">
									loading...
								</span>
							</div>
							<!-- /.info-box-content -->
						</div>
						<!-- /.info-box -->
					</div>
					<!-- /.col -->
					<div class="col-md-12">
						<div class="info-box mb-3">
							<!-- <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-calendar"></i></span> -->

							<div class="info-box-content">
								<span class="info-box-text">Database Size</span>
								<span class="info-box-number" id="database_size">loading...</span>
							</div>
							<!-- /.info-box-content -->
						</div>
						<!-- /.info-box -->
					</div>
					<!-- /.col -->

					<!-- fix for small devices only -->
					<div class="clearfix hidden-md-up"></div>

					<div class="col-md-12">
						<div class="info-box mb-3">
							<!-- <span class="info-box-icon bg-success elevation-1"><i class="fas fa-arrow-up"></i></span> -->

							<div class="info-box-content">
								<span class="info-box-text">Upload Folder File Size</span>
								<span class="info-box-number" id="upload_total_file_size">loading...</span>
							</div>
							<!-- /.info-box-content -->
						</div>
						<!-- /.info-box -->
					</div>
					<!-- /.col -->

					<div class="col-md-12">
						<div class="info-box mb-3">
							<!-- <span class="info-box-icon bg-warning elevation-1"><i class="fas fa-clock"></i></span> -->

							<div class="info-box-content">
								<span class="info-box-text">Other Setup Size</span>
								<span class="info-box-number" id="other_size">loading...</span>
							</div>
							<!-- /.info-box-content -->
						</div>
						<!-- /.info-box -->
					</div>
					<!-- /.col -->
				</div>

				<div class="col-md-6">
		    		<div class="card">
		                <div class="card-header">
		                	<h4 class="card-title">Total Usage</h4><br>
		                </div>
		                <div class="card-content collapse show">
		                    <div class="card-body">
		                        <div style="text-align: center;font-size: 20px;">
		                        	<div class="height-300">
											   <div id="usage_graph" style="height: 300px;"></div>
											</div>
		                        </div>
		                    </div>
		                </div>
		            </div>
		    	</div>


				<div class="col-md-12">
					<div class="card">
						<div class="card-header">
							<h3 class="card-title">Product Wise Size</h3>
						</div>
						<div class="card-body table-responsive">
							<table class="table table-hover table-bordered text-wrap" id="size_data">
								<thead>
									<tr>
										<th>#</th>
										<th>Product Name</th>
										<th>Size</th>
									</tr>
								</thead>
								<tbody>

								</tbody>
							</table>
						</div>
		         </div>
				</div>

				

			</div>
		</div>
	</section>

</div>
<!-- /.content-wrapper -->

<script type="text/javascript">

	var website_total_file_size_count = 0;
   var database_size_count = 0;
   var upload_total_file_size_count = 0;
   var other_size_count = 0;

	$(document).ready( function() {
		get_analytics_data();
	});


	function get_analytics_data(){

		$("#database_size").html("loading...");
		$("#website_total_file_size").html("loading...");
		$("#upload_total_file_size").html("loading...");
		$("#other_size").html("loading...");
		$("#usage_graph").html("loading...");

		website_total_file_size();
		database_size();
		upload_total_file_size();
		other_size();
		total_usages();
	}


</script>

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<!-- DataTables -->
<script src="<?php echo $this->config->item('admin_assets_folder'); ?>plugins/datatables/jquery.dataTables.min.js"></script>
<script src="<?php echo $this->config->item('admin_assets_folder'); ?>plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="<?php echo $this->config->item('admin_assets_folder'); ?>plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="<?php echo $this->config->item('admin_assets_folder'); ?>plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>

<script>
	var dataTable =$('#size_data').DataTable({
		"paging": true,
		"lengthChange": false,
		"searching": false,
		"ordering": false,
		"info": true,
		"autoWidth": false,
		"pageLength": 10,
		"processing": true, //Feature control the processing indicator.
		"serverSide": true,
		"columnDefs": [
		   { "orderable": false, "width": 150, "targets": [0,1,2] }
		],
		fixedColumns: true,
		"ajax": {
			url : "<?php echo base_url().$this->config->item('admin_folder').'/dashboard/ajax_load_project_wise_size_data'; ?>",
		   type : 'POST',
		   global : false
		},
		'responsive': true
   });

   function website_total_file_size(){
		var base_url = '<?php echo base_url(); ?>';
		var url = "<?php echo base_url().$this->config->item('admin_folder').'/dashboard/get_dashboard_data/website_total_file_size'; ?>";

		$.ajax({
			type: "GET",
			dataType: "json",
			url: url,
			async: false,
			global : false,
			beforeSend:function(){

			},
			success: function(result) {

				if(result["status"] === false){
					console.log(result['message']);
				}else{
					website_total_file_size_count = result['website_total_file_size'];
					$("#website_total_file_size").html(result['website_total_file_size_display']);
				}
			},
			error: function() {
				console.log("Failed to load the data.");
			}
		});

		return true;
	}

	function database_size(){
		var base_url = '<?php echo base_url(); ?>';
		var url = "<?php echo base_url().$this->config->item('admin_folder').'/dashboard/get_dashboard_data/database_size'; ?>";

		$.ajax({
			type: "GET",
			dataType: "json",
			url: url,
			async: false,
			global : false,
			beforeSend:function(){

			},
			success: function(result) {

				if(result["status"] === false){
					console.log(result['message']);
				}else{
					database_size_count = result['database_size'];
					$("#database_size").html(result['database_size_display']);
				}
			},
			error: function() {
				console.log("Failed to load the data.");
			}
		});

		return true;
	}

	function upload_total_file_size(){
		var base_url = '<?php echo base_url(); ?>';
		var url = "<?php echo base_url().$this->config->item('admin_folder').'/dashboard/get_dashboard_data/upload_total_file_size'; ?>";

		$.ajax({
			type: "GET",
			dataType: "json",
			url: url,
			async: false,
			global : false,
			beforeSend:function(){

			},
			success: function(result) {

				if(result["status"] === false){
					console.log(result['message']);
				}else{
					upload_total_file_size_count = result['upload_total_file_size'];
					$("#upload_total_file_size").html(result['upload_total_file_size_display']);
				}
			},
			error: function() {
				console.log("Failed to load the data.");
			}
		});

		return true;
	}

	function other_size(){
		var base_url = '<?php echo base_url(); ?>';
		var url = "<?php echo base_url().$this->config->item('admin_folder').'/dashboard/get_dashboard_data/other_size'; ?>";

		$.ajax({
			type: "GET",
			dataType: "json",
			url: url,
			async: false,
			global : false,
			beforeSend:function(){

			},
			success: function(result) {

				if(result["status"] === false){
					console.log(result['message']);
				}else{
					other_size_count = result['other_size'];
					$("#other_size").html(result['other_size_display']);
				}
			},
			error: function() {
				console.log("Failed to load the data.");
			}
		});

		return true;
	}

	function total_usages(){

		var total_available_space_gb = <?php echo $this->config->item('total_available_space_gb'); ?>;

		var website_size_gb = website_total_file_size_count / (1024 * 1024 * 1024);
		var database_size_gb = database_size_count / (1024 * 1024 * 1024);
		var upload_size_gb = upload_total_file_size_count / (1024 * 1024 * 1024);
		var other_size_gb = other_size_count / (1024 * 1024 * 1024);

		var total_used_space_gb = website_size_gb + database_size_gb + upload_size_gb + other_size_gb;

		var free_space = (total_available_space_gb - total_used_space_gb);

		google.charts.load('current', {'packages':['corechart']});
		google.charts.setOnLoadCallback(function(){
			var data = google.visualization.arrayToDataTable([
				['Type', '%'],
				['Total Usage - '+total_used_space_gb.toFixed(2)+" GB", total_used_space_gb],
				['Free space - '+free_space.toFixed(2)+" GB", free_space]
			]);

			var options = {
				title: 'Usage',
				is3D: true
			};

			var chart = new google.visualization.PieChart(document.getElementById('usage_graph'));

			chart.draw(data, options);
		});
	}

</script>