
<?php $this->load->view('includes/head') ?>
<?php $this->load->view('includes/topbar') ?>
<?php $this->load->view('includes/header') ?>
<style type="text/css">
	.table-bordered {
		border-color: #6E1000!important;
	}
	thead{
		background-color: #A50005;
		color: white;
	}
	td{
		font-weight: bold;
	}
	a:hover{
		color: black;
	}
</style>
<main id="main">
	<section  style="background-image: url(<?=base_url('assets/img/elegant-background-with-mandala.png');?>);background-size: auto;">
		<div class="container">

			<script src="<?=base_url('assets/js/jquery-3.6.0.min.js');?>"></script>
			<link href="<?=base_url('assets/css/select2.min.css');?>" rel="stylesheet" />
			<script src="<?=base_url('assets/js/select2.min.js');?>"></script>

			<h2 id="temple-services" class="text-center bottomborder">Managements<br></h2>

			<?php  

			$getManagementCategory = json_decode(json_encode(ManagementGroup()), true)['data'];  

			?>
			<style type="text/css">
				select.select2 {
					width: 250px;
				}
			</style>
			<div class="row">
				<div class="col-md-12 mx-2">
					<div class="mx-auto">
						<!-- <label for="ManagementsCategory">Filter By Group:</label> -->
						<select class="form-select form-control select2" id="ManagementsCategory">
							<?php foreach($getManagementCategory as $key => $item){ ?> 
								<option value="<?=$item['refDataName']?>" <?= ($key==0) ? 'selected' : ''; ?>><?=$item['refDataName']?></option>
							<?php } ?>
						</select>

						<!-- <label for="filterYear">Filter By Year:</label> -->
						<select class="form-select form-control select2" id="filterYear">
							<?php 	for ($i = date('Y'); $i >= date('Y') - 10; $i--){ ?> 
								<option value="<?= $i ?>" <?= ($key==0) ? 'selected' : ''; ?>><?= ($i-1).' - '.$i ?></option>
							<?php } ?>
						</select>
					</div>
				</div>
			</div>

			<div style="padding: 20px;">


				<div class="table table-responsive" style="background-color: #FFE691!important">
					<table class="table table-responsive table-bordered table-hover table-striped" id="dataTable">
						<thead>
							<tr>
								<th>Name</th>
								<th>Designation</th>
								<th>Email</th>
								<th>Phone</th>
								<th>Effective Date</th>
								<th>Expiry Date</th>
							</tr>
						</thead>
						<tbody id="TableBody">

						</tbody>
					</table>

				</div>
			</div>

		</div>
	</section>
</main><!-- End #main -->

<script type="text/javascript">
	$(document).ready(function () {
		$(".select2").select2();

		loader.on();

		var selectedOption = $('#ManagementsCategory').val();
		var selectedYear = $('#filterYear').val();

			// alert(selectedYear);
			// alert(selectedOption);

		$.ajax({
			url: "<?=base_url('ManagementSettings/getMemberDirectoryByGroup')?>",
			type: "POST",
			dataType: "json",
			data: {selectedValue: selectedOption, selectedYear: selectedYear}, 
			success: function(data) 
			{
				$("#TableBody").html(data);
				loader.off();
			}
		});

		$('#ManagementsCategory').change(function() {
			var selectedOption = $(this).val();
		var selectedYear = $('#filterYear').val();

			// 	alert(selectedYear);
			// alert(selectedOption);

			loader.on();
			event.preventDefault();
			$.ajax({
				url: "<?=base_url('ManagementSettings/getMemberDirectoryByGroup')?>",
				type: "POST",
				dataType: "json",
				data: {selectedValue: selectedOption, selectedYear: selectedYear}, 
				success: function(data) 
				{
					$("#TableBody").html(data);
					loader.off();
				}
			});
		});


		$('#filterYear').change(function() {


			var selectedYear = $(this).val();
			var selectedOption = $('#ManagementsCategory').val();

			// alert(selectedYear);
			// alert(selectedOption);
			loader.on();
			event.preventDefault();
			$.ajax({
				url: "<?=base_url('ManagementSettings/getMemberDirectoryByGroup')?>",
				type: "POST",
				dataType: "json",
				data: {selectedValue: selectedOption, selectedYear: selectedYear}, 
				success: function(data) 
				{
					$("#TableBody").html(data);
					loader.off();
				}
			});
		});

	});

</script>
<?php $this->load->view('includes/footer') ?>
<?php $this->load->view('includes/script') ?>



