<?php
	session_start();
	include("../../php_crud/my_class.php");
	$obj = new my_class();
	echo '<script src="module/ground_water/js/auto_menu_data_repport.js" type="text/javascript"></script>';
?>
<style>
	input[type="text"], textarea, select{
		width: 100%;
	}
	.hover-effect {
    /* Define the default styles */
    /* background-color: #3498db; */
    color: #3A87AD;
    /* padding: 10px 20px; */
    /* border: none; */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Add a smooth transition effect */

    /* Define the hover styles */
    /* These styles will be applied when the element is hovered */
    /* For example, we'll change the background color and add a box shadow */
   /* &:hover {
        /* background-color: #2980b9; */
        /* box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); */
    }
/* } */
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<div class="row-fluid" id="form_data">
<?php
// if ($_SESSION['add'] == 'Y') {
    ?>
        <form action="" id="groundWaterReportForm" method="post"> 
			<!-- <div class="row-fluid">
				<legend STYLE="TEXT-ALIGN: CENTER; FONT-WEIGHT:BOLD;FONT-SIZE: 18PX;">AUTOMATIC REAL TIME DATA OF GWOUND WATER HYDROLOGY </legend> 
			</div> -->
			<!-- <div class="row-fluid"> -->
				<!-- <div class="row-fluid">-->
					<div class="table-header"><i class="fas fa-list"></i>Ground Water Automated and Manual Data Comparision Report</div>
				<!--	<legend>Equipment Failure Study</legend> 	
				</div> -->
				<div class="row-fluid" style="background-color:#f5f5f5; -webkit-box-shadow:0px 8px 6px -6px black; -moz-box-shadow:0px 8px 6px -6px black; box-shadow:opx 8px 6px -6px black;">
				<input type="hidden" name="station_id" id="station_id" value="">
				<div class="row-fluid">
				<div class="span3" style="margin-top: 7px; padding-left: 25px;">
		                        <div class="control-group">
                                               
                                        <!-- <b>
					        <b href="#modal_station_list"  class="hover-effect" data-toggle="modal" data-target="#modal_station_list" onclick="load_device_info()" style="border-bottom: 1px solid blue; color: blue;">
					       Show Station List</b>
					</b> -->
					<b>
					        <b href="#modal_station_list"  class="hover-effect" data-toggle="modal" data-target="#modal_station_list" onclick="load_device_info()">
					       Show Station List</b>
					</b>
                                        <!-- <input style="width: 90%;" type="text" name="pick_no" id="pick_no" class="form-control" readonly value="<?php echo $station_info['ID'];?>" /> -->
                                        <input style="width: 90%; height: 13px !important;"  type="text" name="new_id" id="new_id" class="form-control" placeholder="" readonly value="<?php echo $station_info['NEW_ID'];?>" />
		                       </div> 
	                        </div>	
                                <div class="span3" style="margin-top: 5px; padding-left: 25px;">
		                        <div class="control-group">
                                        <label class="control-level" for="year"><b>Year</b><font style="color:#FF0000"></font></label>
                                        <div class="controls" style="width: 100%;">
                                          <input type="text" style="width: 94%; height: 13px !important; font-weight:bold;" id="year" name="year"  value="<?php echo $year ;?>" maxlength="4"/>
                                         </div>
		                       </div>
	                        </div>
                                <div class="span3" style="margin-top: 5px; padding-left: 25px;">
		                        <div class="control-group">
                                                 <label class="control-label" for="form-field-2"><b>Month<font color="#FF0000"></font></b></label>
                                                 <div class="controls">
                                                <select id="month" name="month" class="chosen-select" onchange="flushData()">
                                                                        <option value=""></option>
                                                                        <option value="01">January</option>
                                                                        <option value="02">February</option>
                                                                        <option value="03">March</option>
                                                                        <option value="04">April</option>
                                                                        <option value="05">May</option>
                                                                        <option value="06">June</option>
                                                                        <option value="07">July</option>
                                                                        <option value="08">August</option>
                                                                        <option value="09">September</option>
                                                                        <option value="10">October</option>
                                                                        <option value="11">November</option>
                                                                        <option value="12">December</option>
                                                                        </select>
                                                </div>
		                       </div>
	                        </div> 
                               
                                <div class="span3" style="margin-top: 25px; padding-left: 25px;">
                        <div class="control-group">
            <div class="controls">
                <button type="button"  class="btn btn-small btn-info"  onclick="load_am_data()">
                <i class="icon-search"></i><b style="font-size: 12px;">Search</b></button>
            </div>
        </div>
	                        </div>
				</div>
				</div>
		</form>
<?php //} ?>		
</div>
<!--<div id="view_am_data_table"></div>-->
<!--Show Data-->
<div class="row-fluid" style="margin-top: 15px;">
    <div class="col-sm-6 widget-container-col" id="widget-container-col-10">
	    <div class="widget-box" id="widget-box-10">
            <!--Top-->
		    <div class="widget-header widget-header-large">
				<div class="widget-toolbar no-border">
					<ul class="nav nav-tabs" id="myTab">
						<!-- <li class="active">
							<a data-toggle="tab" href="#data_list">Data List</a>
						</li> -->
						<li class="active">
							<a data-toggle="tab" href="#am_graph_data" onclick="show_am_graph()">Graph Data</a>
						</li>
						<li>
							<a data-toggle="tab" href="#data_list" onclick="show_am_data()">Data List</a>
						</li>
					</ul>
				</div>
			</div>
            <!--Top -->

            <!--graph-->
			<div class="widget-body">
				<div class="widget-main padding-5">
					<div class="tab-content">
						<!-- <div id="data_list" class="tab-pane">
				            <div id="view_data_table"></div>
						</div> -->
						<div id="am_graph_data" class="tab-pane active">  
                          <canvas id="lineChart"></canvas>   
              			</div>
						  <div id="data_list" class="tab-pane">
				            <div id="view_am_data_table"></div>
						</div>
					</div>
			    </div>
			</div>
            <!--graph-->
		</div>
	</div>
</div>




<div id="modal_station_list" class="modal hide fade modal-fullscreen" style="overflow-x:show;" tabindex="-1">
	<div class="modal-header no-padding">
		<div class="table-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			Station List
		</div>
	</div>
	<div class="modal-body" id="station_list_body" style="min-height: 450px;"></div>									
</div>

<script type="text/javascript">
	$(".date-picker").datepicker( {
		format: "mm-yyyy",
		viewMode: "months", 
		minViewMode: "months"
	});
    $('.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>
