<?php
session_start();
include("../../php_crud/my_class.php");
include("../../asset/theme/css/myfunc.php");
$obj = new my_class();
?>
<!--map link start-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<script src = "module/ground_water_ex/js/leaflet-providers.js"></script>
<!--map link end-->
<script src="module/ground_water_ex/js/module_dashboard_gwm.js" type="text/javascript"></script>
<style>
  /*map css start*/
      #map{
       	   width: 100%;
           height: 100vh;
    	   }
   	  .map-info-box {
       	   background-color: #fff;
           border: 1px solid #d3d3d3;
           width: 250px;
           /* height:300px; */
           padding: 10px;
           border-radius: 12px;
           z-index: 500;
           position: absolute;
           right: 45px;
           top: 140px;
           cursor: auto;
           display: none; /* Initially hide the info box */ 
           }
           .close {
           font-size: 25px;
           font-weight: 600;
           cursor: pointer;
           float: right;
           }
		  /*map css end*/
</style>

<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; margin-bottom:15px;">
<div class="span3"  style="padding-bottom:20px; padding-top:8px; padding-left:15px;">
    <div class="control-group">
            <label  class="control-level"for="district"><b>Data Type</b><font style="color:#FF0000"></font></label>
            <div class="controls" style="width: 100%">
              <!--  <select name="id" id="id" class="chosen-select" onchange="load_id(this.value)">-->
                <select name="id" id="id" class="chosen-select" onchange="load_map_in_map_holder()">
                   <?php
                  //  $table_name  = "HYDROLOGY.GWM_STATION_TYPE@HYDRO10";
                   $table_name  = "HYDROLOGY.GWM_STATION_TYPE@HYDRO10";
                   $columns     = "*";    
                   $cond        = "STATUS='A' ORDER BY ID ASC";  
                   foreach($obj->View_colmn_By_Cond($table_name,$columns,$cond) as $data_type){
                   
                    echo'<option value="'.$data_type["ID"].'">'.$data_type['TYPE_NAME'].'</option>';
                   }
                   ?>
                </select>
            </div>
        </div>
    </div>

<div class="span3"  style="padding-bottom:20px; padding-top:8px; padding-left:15px;">
    <div class="control-group">
            <label  class="control-level"for="district"><b>District Name</b><font style="color:#FF0000"></font></label>
            <div class="controls" style="width: 100%">
                <select name="gwm_district" id="gwm_district" class="chosen-select" onchange="load_map_in_map_holder()">
                    <option value="">---select district---</option>
                    <?php
                    $table_name ='HYDROLOGY.DISTRICT_TBL@HYDRO10';
                    $columns ='*';
                    $where_cond ='1=1';
                    foreach($obj->View_colmn_By_Cond($table_name,$columns,$where_cond) as $district_list){
                      echo '<option value="'.$district_list['DISTRICT_NO'].'">'.$district_list['DISTRICT_NAME'].'</option>';
                    
                    }
                    ?>
                </select>
            </div>
        </div>
    </div>
   
</div>

<!-- 
<b onclick="show_ground_water_daily_mapinfo()"  class="hover-effect">Ground Water Daily</b> -->
<!--map start-->
<div class="col-sm-12" id="gwm_map_holder">
     
</div>
 <!--map end-->

   <script>
    $( document ).ready(function() {
      load_map_in_map_holder();
    });

    $('.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>