<?= $this->extend('Modules\Admin\Views\index'); ?>
<?= $this->section('content');?>
<!-- Home page !-->
<div class="container-fluid">
	<div class="row mb-md-3">
		<div class="col">
			<h4>Dashboard</h4>
			<!-- Breadcrumb !-->
			<nav aria-label="breadcrumb"><small>
				<ol class="breadcrumb mb-0">
					<li class="breadcrumb-item"><a href="<?= base_url('administrator') ?> ">Home</a></li>
					<li class="breadcrumb-item active" aria-current="page"><?= esc($bcrumb) ?> </li>
				</ol></small>
			</nav>
			<!-- End Breadcrumb !-->
		</div>
	</div>
	<!-- print success message !-->
	<div class="row">
		<div class="col">
			<?php if(session()->getTempdata('success')): ?>
				<div class="alert alert-success" role="alert"><?= session()->getTempdata('success');?></div>
			<?php endif;?>
			<?php if(session()->getTempdata('error')): ?>
				<div class="alert alert-warning" role="alert"><?= session()->getTempdata('warning');?></div>
			<?php endif;?>
			<?php if(session()->getTempdata('error')): ?>
				<div class="alert alert-danger" role="alert"><?= session()->getTempdata('error');?></div>
			<?php endif;?>
			<?php if(isset($validation)): ?>
				<div class="alert alert-danger">
			<?= $validation->listErrors()?>
			</div>
			<?php endif;?>
	</div></div>
	<div class="row d-flex align-items-stretch">
		<div class="col mb-3 d-flex">
			<a href="<?= base_url('administrator/redd/add-client');?>" class="text-dark flex-fill" title="Directory">
				<div class="d-flex bd-highlight bg-white border shadow-sm h-100 summary-card">
					<div class="p-2 flex-grow-1 bd-highlight fw-bold d-flex align-items-center">Add New Client</div>
					<div class="p-2 bd-highlight bg-danger bg-opacity-25 d-flex align-items-center">+</div>
				</div>
			</a>
		</div>
		<div class="col mb-3 d-flex">
			<a href="<?= base_url('administrator/redd');?>" class="text-dark" title="Add Post">
			<div class="d-flex bd-highlight bg-white border shadow-sm h-100 summary-card">
				<div class="p-2 flex-grow-1 bd-highlight fw-bold d-flex align-items-center">Manage Clients</div>
				<div class="p-2 bd-highlight bg-danger bg-opacity-25 d-flex align-items-center">+</div>
			</div>
			</a>
		</div><!-- Orders !-->
		<div class="col mb-3 d-flex">
			<a href="<?= base_url('administrator/redd/projects');?>" class="text-dark" title="Add Page">
			<div class="d-flex bd-highlight bg-white border shadow-sm h-100 summary-card">
				<div class="p-2 flex-grow-1 bd-highlight fw-bold d-flex align-items-center">Manage Projects</div>
				<div class="p-2 bd-highlight bg-danger bg-opacity-25">+</div>
			</div>
			</a>
		</div><!-- Add Page !-->
		<div class="col mb-3">
			<a href="#" class="text-dark" title="Comments">
			<div class="d-flex bd-highlight bg-white border shadow-sm h-100 summary-card">
				<div class="p-2 flex-grow-1 bd-highlight fw-bold d-flex align-items-center">Carbon Data</div>
				<div class="p-2 bd-highlight bg-danger bg-opacity-25">+</div>
			</div>
			</a>
		</div><!-- All Comments !-->
		<div class="col mb-3 d-flex d-none">
			<a href="#" class="text-dark" title="Forum">
			<div class="d-flex bd-highlight bg-white border shadow-sm h-100 summary-card">
				<div class="p-2 flex-grow-1 bd-highlight fw-bold d-flex align-items-center">Payment Management</div>
				<div class="p-2 bd-highlight bg-danger bg-opacity-25">+</div>
			</div>
			</a>
		</div><!-- Forum !-->
	</div><!-- Summary buttons !-->
	<div class="row">
		<div class="col-lg-9 col-md-9 col-sm-8">
			<div class="row">
				<div class="col-lg-3 col-md-3 col-sm-3">
					<div class="d-flex bd-highlight alert-success shadow-sm py-1 px-2 mb-3 mb-mb-4" >
						<div class=" bd-highlight flex-grow-1">
							<h6>Active Clients</h6>
							<span class="display-6 fs-4 fw-bold">
							<?= $allHits; ?>
							</span>
						</div>
						<div class="bd-highlight align-self-center">
							<i class="bi bi-eye fs-4"></i>
						</div>
					</div><!-- Flex !-->
				</div> <!-- Total Visitors !-->
				<div class="col-lg-3 col-md-3 col-sm-3">
					<div class="d-flex bd-highlight alert-primary shadow-sm py-1 px-2 mb-3 mb-mb-4">
						<div class=" bd-highlight flex-grow-1">
							<h6>REDD+ Projects </h6>
							<span class="display-6 fs-4 fw-bold"><?= $countPosts; ?>
						</div>
						<div class="bd-highlight align-self-center">
							<i class="bi bi-boxes fs-4"></i>
						</div>
					</div><!-- Flex !-->
				</div> <!-- Total Posts !-->
				<div class="col-lg-3 col-md-3 col-sm-3">
					<div class="d-flex bd-highlight alert-warning shadow-sm py-1 px-2 mb-3 mb-mb-4">
						<div class=" bd-highlight flex-grow-1">
							<h6>Under Evaluation</h6>
							<span class="display-6 fs-4 fw-bold"><?= $countPages; ?>
						</div>
						<div class="bd-highlight align-self-center">
							<i class="bi bi-people fs-4"></i>
						</div>
					</div><!-- Flex !-->
				</div> <!-- Total Pages !-->
				<div class="col-lg-3 col-md-3 col-sm-3">
					<div class="d-flex bd-highlight alert-danger shadow-sm py-1 px-2 mb-3 mb-mb-4">
						<div class=" bd-highlight flex-grow-1">
							<h6>Rejected Projects</h6>
							<span class="display-6 fs-4 fw-bold"><?= $countDownloads?></span>
						</div>
						<div class="bd-highlight align-self-center">
							<i class="bi bi-envelope fs-4"></i>
						</div>
					</div><!-- Flex !-->
				</div> <!-- Total Downloads !-->
			</div><!-- ROW::Quick View Stats !-->
			<div class="row">
				<div class="col">
					<div class="card border-0 shadow-sm mb-3">
						<div class="card-header bg-white border-0 pb-0">
							<h6 class="card-title mb-0 text-muted">Membership Growth Overview</h6>
						</div>
						<div class="card-body pt-2">
							<div id="linechart_material"></div>
						</div>
					</div>
				</div>
			</div><!-- Graph row !-->
			<div class="row">
				<div class="col-lg-6 col-md-6">
					<div class="card card-body border-0 mb-3">
						<h5 class="dashboard-card-title">Recent Client Registrations </h5>
						<div class="table-responsive">
							<table class="table table-hovered table-sm">
								<tbody style="font-size: 12px">
								  <?php foreach ($popular_posts as $post): ?>
									<tr>
										<td><a href="<?= base_url('administrator/posts/view/'.$post->id.'-'.$post->alias); ?>"><?= $post->title; ?></a></td>
										<td><span class="badge bg-primary"><?= $post->hits; ?></span></td>
									</tr>
								   <?php endforeach; ?>
								</tbody>
							</table>
						</div><!-- table responsive !-->
					</div>
				</div><!--Popular Posts !-->
				<div class="col-lg-6 col-md-6">
					<div class="card card-body border-0 mb-3">
						<h5 class="dashboard-card-title">Recent Posts </h5>
						<div class="table-responsive">
							<table class="table table-hovered table-sm">
								<tbody style="font-size: 12px">
									<?php foreach ($new_posts as $post): ?>
									<tr>
										<td><a href="<?= base_url('administrator/posts/view/'.$post->id.'-'.$post->alias); ?>"><?= $post->title; ?></a></td>
										<td><span class="badge bg-secondary"><small><?= date('jS M Y', strtotime($post->created_at))?></small></span></td>
									</tr>
									<?php endforeach;?>
								</tbody>
							</table>
						</div><!-- table responsive !-->
					</div>
				</div><!--Popular Pages !-->
			</div><!-- ROW Popular / Recent Posts !-->
		</div><!-- Main Col !-->
		<div class="col-lg-3 col-md-3 col-sm-4">
			<div class="card card-body border-0 mb-3">
				<h5 class="dashboard-card-title">Recent Activities </h5>

				<div class="activity"><small>
				<?php foreach($notifications as $n):?>
					<span style="font-size:10px;color:#666;margin-bottom: -5px;display:flex"><?= $n['created_at'] ?></span>
					<?= $n['message']; ?>
				<?php endforeach;?>
				</small>
				</div>
			</div><!-- Notifications !-->
			<div class="card card-body border-0 mb-3">
				<span class="fw-bold">10</span><small>Members Online</small>
			</div><!-- Online users !-->
			<div class="card border-0 shadow-sm">
				<div class="card-header bg-white border-0">
					<h6 class="card-title mb-0 text-muted">Member Demographics</h6>
				</div>
				<div class="card-body">
					<div id="gender_donut_chart"></div>
				</div>
			</div><!-- Members (Male & Female) !-->
		</div><!-- Right Col - Notifications / online users!-->
	</div><!-- row !-->





	
	

	


</div><!-- End Container !-->
            

<!-- JS !-->

<!-- Graph & Donut Chart !-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
	google.charts.load('current', {'packages':['line']});
	google.charts.setOnLoadCallback(drawChart);

	function drawChart() {
	var data = new google.visualization.DataTable();
	data.addColumn('string', 'Month');
	data.addColumn('number', 'New Clients');
	data.addColumn('number', 'Active Projects');
	data.addColumn('number', 'Under Evaluation');
	data.addColumn('number', 'Rejected Projects');

	data.addRows([
		['Jan',  45, 320, 28, 5],
		['Feb',  52, 367, 31, 8],
		['Mar',  38, 397, 35, 7],
		['Apr',  42, 432, 29, 6],
		['May',  48, 473, 33, 7],
		['Jun',  35, 501, 38, 9],
		['Jul',  41, 533, 31, 8],
		['Aug',  39, 564, 34, 6],
		['Sep',  46, 604, 37, 9],
		['Oct',  43, 638, 32, 7],
		['Nov',  38, 669, 35, 8],
		['Dec',  41, 702, 29, 5]
	]);

	var options = {
		chart: {
		title: 'REDD+ Registry Analytics Dashboard',
		subtitle: 'Track REDD+ client & project trends'
		},
		width: '100%',
		height: 400,
		colors: ['#4285f4', '#34a853', '#fbbc04', '#ea4335'], // Google Material colors
		backgroundColor: 'transparent',
		chartArea: {
		left: 60,
		top: 60,
		width: '85%',
		height: '75%'
		},
		legend: {
		position: 'bottom',
		alignment: 'center',
		textStyle: {
			fontSize: 12,
			color: '#5f6368'
		}
		},
		hAxis: {
		title: 'Month',
		titleTextStyle: {color: '#5f6368', fontSize: 13},
		textStyle: {color: '#5f6368', fontSize: 11}
		},
		vAxis: {
		title: 'Count',
		titleTextStyle: {color: '#5f6368', fontSize: 13},
		textStyle: {color: '#5f6368', fontSize: 11},
		minValue: 0,
		gridlines: {color: '#f1f3f4', count: 5}
		},
		pointSize: 4,
		lineWidth: 2,
		curveType: 'function', // Smooth curves
		focusTarget: 'category'
	};

	var chart = new google.charts.Line(document.getElementById('linechart_material'));
	chart.draw(data, google.charts.Line.convertOptions(options));
	}

	// Make chart responsive
	window.addEventListener('resize', drawChart);
</script>  
<script>
	google.charts.load("current", {'packages':['corechart']});
	google.charts.setOnLoadCallback(drawDonutChart);

	function drawDonutChart() {
		var data = google.visualization.arrayToDataTable([
			['Gender', 'Count'],
			['Male', 65],
			['Female', 35]
		]);

		var options = {
			pieHole: 0.4, // Makes it a donut
			colors: ['#4285f4', '#ea4335'],
			backgroundColor: 'transparent',
			legend: {
				position: 'bottom',
				alignment: 'center',
				textStyle: {fontSize: 12, color: '#5f6368'}
			},
			chartArea: {width: '90%', height: '75%'},
			pieSliceText: 'percentage',
			pieSliceTextStyle: {fontSize: 12, color: 'white'},
			width: '100%',
			height: 200
		};

		var chart = new google.visualization.PieChart(document.getElementById('gender_donut_chart'));
		chart.draw(data, options);
	}
</script>
<?= $this->endSection();?>