<!--event information start-->
<?php
session_start();
include("../../php_crud/my_class.php");
$obj = new my_class();
?>
<style>
	/* canvas {
		width: 70%; 
		height: 520px !important;
		width: 70% !important; 
	} */
	.chzn-container-single .chzn-drop .chzn-search input[type="text"] {
		background-image: none !important;
		padding-left: 5px !important; /* adjust as needed */
	}
	.modal-body {overflow-y:visible; }
</style>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="module/ground_water_ex/js/event_info_entry.js" type="text/javascript"></script>

<div id="cover-spin"></div>

<div class="row-fluid">
	<div class="table-header">
		Geotechnical Field Basic Information
		<button type="button" href="#add_geotechnical" data-toggle="modal" onclick="add_geotechncal_info()" id="add_geotechncal_info" class="btn btn-small btn-warning" style="margin-right:10px;margin-top:3px;float:right;hover:cursor;">&nbsp;<i class="fa fa-plus-circle"></i> Add Geotechnical info
		</button>
	</div>
</div>

<div class="row-fluid" style="margin-top: -4px; background-color: #f5f5f5; -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; padding-bottom: 10px">
	<div class="span12" style="margin-top: 5px; margin-bottom: 15px; padding-left: 12px;">
		<!-- Upazila -->
		<div class="span4">
			<div class="control-group">
				<label class="control-label" for="sub_division"><b>Sub-Division</b></label>
				<div class="controls">
					<select id="sub_division" name="sub_division" class="chosen-select">
						<option value="">-- Select Sub-Division --</option>
						<!-- Add options for sub-divisions dynamically using PHP or JavaScript -->
						<?php
						$table_name = 'HYDROLOGY.GW_SUBDIVCODE_TBL@HYDRO10';
						$columns = '*';
						$where_cond = '1=1 ORDER BY SUBDIVISION_NAME ASC';
						foreach ($obj->View_colmn_By_Cond($table_name, $columns, $where_cond) as $subdiv_list) {
							echo '<option value="' . $subdiv_list['HYDSUBDIVCODE'] . '"> ' . $subdiv_list['SUBDIVISION_NAME'] . '</option>';
						}
						?>
					</select>
				</div>
			</div>
		</div>
		<div class="span4">
			<div class="control-group">
				<label class="control-label" for="upazila"><b>Upazila(District)</b></label>
				<div class="controls">
					<select id="upazila" name="upazila" class="chosen-select">
						<option value="">-- Select Upazila --</option>
						<?php 
					$tbl = "HYDROLOGY.UPAZILA_TBL@HYDRO10 UPZ LEFT JOIN HYDROLOGY.DISTRICT_TBL@HYDRO10 DIST ON UPZ.DST_CODE=DIST.DISTRICT_NO";
					$col = "UPZ.UPZL_CODE,UPZ.UPZL_NAME,DIST.DISTRICT_NAME";
					$cond = "1=1 AND UPZL_NAME IS NOT NULL ORDER BY UPZ.UPZL_NAME ASC";

						foreach($obj->View_colmn_By_Cond($tbl,$col,$cond) as $value){
								echo "<option value='".$value['UPZL_CODE']."'>".$value['UPZL_NAME']." (".$value['DISTRICT_NAME'].")</option>";
		
						}
					?>
					</select>
				</div>
			</div>
		</div>
		<!-- Sub-Division -->
		<div class="span4" style="">
			<div class="control-group">
				<label class="control-label">&nbsp;&nbsp;&nbsp;&nbsp;</label>
				<div class="controls">
					<button type="button" name="" style="padding: 4px !important; font-size:13px; margin-top: 0px" class="btn btn-minier btn-info" onclick="show_project_list()"><i class="icon-search"></i>Show</button>
				</div>
			</div>
		</div>
	</div>
</div>


<div id="event_info_datable" style="margin-top: 10px;"></div>


<!--modal view start-->
<div id="modal_event_view" class="modal hide fade" style="overflow-x:show;max-width:80%;min-width:40%; margin-top: -80px;height:fit-content" tabindex="-1" data-backdrop="static">
	<div class="modal-header no-padding">
		<div class="table-header">
			<button type="button" class="close" data-dismiss="modal" style="opacity:1 !important"><i class="fa fa-window-close" style="font-size: 26px;font-weight: bold;color: #FFF;"></i> </button>
			Event Information
		</div>
	</div>
	<div class="modal-body" id="load_event_info_view_modal" style="max-height: 700px; max-width: 700px;">
	</div>
</div>
<!--modal view  end-->
<!--mkodal edit start-->
<div id="modal_event_edit" class="modal hide fade" style=" margin-left: -28%; width: 60%;" tabindex="-1" data-backdrop="static">
	<div class="modal-header no-padding">
		<div class="table-header">
			<button type="button" class="close" data-dismiss="modal" style="opacity:1 !important"><i class="fa fa-window-close" style="font-size: 26px;font-weight: bold;color: #FFF;"></i> </button>
			Event Information
		</div>
	</div>
	<div class="modal-body " id="model_event_edit_body" style="max-height: 600px;">
	</div>
	<div class="modal-footer">
		<div class="row-fluid">
			<button class="btn btn-small btn-success pull-right" type="button" id="btn_update" onclick="update_event_info()">
				<i class="icon-ok bigger-100"></i>
				Update
			</button>
		</div>
	</div>
</div>

<div id="add_geotechnical" class="modal hide fade" style=" margin-left: -28%; width: 60%;" tabindex="-1" data-backdrop="static">
	<div class="modal-header no-padding">
		<div class="table-header">
			<button type="button" class="close" data-dismiss="modal" style="opacity:1 !important"><i class="fa fa-window-close" style="font-size: 26px;font-weight: bold;color: #FFF;"></i> </button>
			Geotechnical Field Basic Information
		</div>
	</div>
	<div class="modal-body " id="model_add_geotechnical_body" style="max-height: 600px;">
	</div>
	<div class="modal-footer">
		<div class="row-fluid">
			<button class="btn btn-small btn-success pull-right" type="button" id="event_info_save" onclick="event_info_save()">
				<i class="icon-ok bigger-100"></i>
				Save
			</button>
		</div>
	</div>
</div>




<!--modal edit end-->
<script type="text/javascript">
	$('.chosen-select').chosen({
		allow_single_deselect: true
	});
	//resize the chosen on window resize
	$(window)
		.off('resize.chosen')
		.on('resize.chosen', function() {
			$('.chosen-select').each(function() {
				var $this = $(this);
				$this.next().css({
					'width': '100%'
				});
			})
		}).trigger('resize.chosen');
	//resize chosen on sidebar collapse/expand
	$(document).on('settings.ace.chosen', function(e, event_name, event_val) {
		if (event_name != 'sidebar_collapsed') return;
		$('.chosen-select').each(function() {
			var $this = $(this);
			$this.next().css({
				'width': '100%'
			});
		})
	});
</script>
<script type="text/javascript">
	$('.date-picker').datepicker().next().on(ace.click_event, function() {
		$(this).prev().focus();

	});
	$(".date-picker").attr("autocomplete", "off");
</script>
<!--Enter Checking-->
<script>
	function call_next_val_loader(e, sel_col_id, next_col_id) {
		if (e.keyCode === 13 || e.keyCode === 9 || e.keyCode === 13) {
			$("#" + next_col_id).select();
		}
	}
</script>
<!--Enter Checking-->
<!--event information end-->