<!-- ToDo's -->
    <!-- Bereinigen und Kommentieren -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet Training</title>
    
    <!-- Leaflet Stylesheet & Skripte -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.0/leaflet.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.0/leaflet.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.0/leaflet-src.js"></script> -->

    <!-- jQuery Skrip -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js"></script>

    <!-- jQuery UI -->
    <link rel="stylesheet" href="source/jquery-ui.min.css">
    <script src="source/jquery-ui.min.js"></script>

    <!-- Bootstrap Stylesheet & Skript -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="styles.css">

    <!-- Sidebar Plugin -->
    <link rel="stylesheet" href="plugins/sidebar/leaflet-sidebar.css">
    <script src="plugins/sidebar/leaflet-sidebar.js"></script>
     

    <!-- Button Plugin -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css">
    <script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>

    <!-- Font Plugin -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">

    <!-- PolylineMeasure Plugin -->
    <link rel="stylesheet" href="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.css">
    <script src="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.js"></script>

    <!-- MousePosition Plugin -->
    <link rel="stylesheet" href="plugins/mouseposition/L.Control.MousePosition.css">
    <script src="plugins/mouseposition/L.Control.MousePosition.js"></script>

    <!-- Geoman Plugin -->
    <link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css">
    <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.js"></script>

    <!-- Minimap Plugin -->
    <link rel="stylesheet" href="plugins/minimap/Control.MiniMap.min.css">
    <script src="plugins/minimap/Control.MiniMap.min.js"></script>

    <!-- ajax Plugin -->
    <script src="plugins/ajax/leaflet.ajax.js"></script>

    <!-- sweetalert2 Plugin -->
     <script src=" https://cdn.jsdelivr.net/npm/sweetalert2@11.26.24/dist/sweetalert2.all.min.js "></script>
     <link href=" https://cdn.jsdelivr.net/npm/sweetalert2@11.26.24/dist/sweetalert2.min.css " rel="stylesheet">

    <!-- Sidebar Styles -->
    <style>
        .bold {
            font-weight: bold;
            font-size: 16px;
        }

        .errorMsg {
            padding: 0;
            text-align: center;
            background-color: darksalmon;
        }

        .new_feature {
            display: none;
        }

        .successMsg {
            text-align: center;
            background-color: darksalmon;
            font-weight: bold;
        }

        /* .legend {
            background: white;
            padding: 10px 14px;
            border-radius: 5px;
            box-shadow: 0 0 15px rgba(0,0,0,0.2);
            line-height: 24px;
            font-size: 13px;
        }

        .legend h4 {
            margin: 0 0 8px;
            font-size: 15px;
        }

        .legend i {
            width: 14px;
            height: 14px;
            display: inline-block;
            margin-right: 6px;
            border-radius: 50%;
            vertical-align: middle;
        }

        .legend i.line {
            border-radius: 0;
            height: 3px;
            width: 20px;
            vertical-align: middle;
        } */

    </style>



</head>

<body>

    <div id="sidebar" class="sidebar collapsed">
	    <!-- Nav tabs -->
	    <div class="sidebar-tabs">
	        <ul role="tablist">
	           	<li><a href="#home" role="tab"><i class="fa fa-home"></i></a></li>
	            <li><a href="#valve" role="tab"><i class="fa fa-puzzle-piece"></i></a></li>
	            <li><a href="#pipeline" role="tab"><i class="fa fa-sliders"></i></a></li>
	            <li><a href="#building" role="tab"><i class="fa fa-building"></i></a></li>        
	        </ul>
	    </div>

	    <!-- Tab panes -->
	    <div class="sidebar-content">
            <div class="sidebar-pane" id="home">
                <h1 class="sidebar-header">
                    Home
                    <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
                </h1>

                <div id="divhome" class="col-xs-12">
                    <div class="col-xs-12" style="height: 10px;"></div>

                    <div class="col-xs-12">
                        <p class="text-center bold">Area Filter</p>
                    </div>

                    <div id="home_error" class="errorMsg col-xs-12"></div>

                    <div class="col-xs-12" style="height: 10px;"></div>

                    <div class="form-group">
                        <div class="col-xs-6">
                            <input type="text" id="dma_id" class="form-control" placeholder="DMA ID">
                        </div>
                        <div class="col-xs-6">
                            <button id="filter_dma" class="btn btn-primary btn-block">Filter Area</button>
                        </div>
                    </div>
                    <div class="col-xs-12" id="home_information">
                        
                    </div>
                </div>


            </div>

            <div class="sidebar-pane" id="valve">
                <h1 class="sidebar-header">
                    Valves
                    <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
                </h1>

                <div id="divValve" class="col-xs-12">
                    <div class="col-xs-12" style="height: 10px;"></div>

                    <div class="col-xs-12">
                        <p class="text-center bold">Valve Information</p>
                    </div>

                    <div id="valve_error" class="errorMsg col-xs-12"></div>

                    <div class="col-xs-12" style="height: 10px;"></div>

                    <div class="form-group">
                        <div class="col-xs-6">
                            <input type="text" id="valve_id" class="form-control" placeholder="Valve ID">
                        </div>
                        <div class="col-xs-6">
                            <button id="findValve" class="btn btn-primary btn-block">Find Valve</button>
                        </div>
                    </div>
                    <div class="col-xs-12" id="valve_information">
                        
                    </div>
                </div>

                <div class="col-xs-12" style="height: 60px;"></div>

                <div id="newValve" class="col-xs-12">
                    
                    <div class="col-xs-8">
                        <button type="button" class="btn btn-info btn-block" id="btn_valve_form">Insert New Valve</button>
                    </div>
                    <div class="col-xs-4">
                        <button type="button" class="btn btn-success btn-block" id="btn_valve_refresh">Refresh</button>
                    </div>

                    <div class="col-xs-12" style="height: 10px;"></div>

                    <div id="new_valve_information" class="col-xs-12 new_feature">
                        
                        <label class="control-label col-sm-4" for="valve_id_new">Valve ID</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="valve_id_new" id="valve_id_new">
                        </div>

                        <div class="col-xs-12" style="height: 10px;"></div>

                        <label class="control-label col-sm-4" for="valve_type">Valve Type</label>
                        <div class="col-sm-8">
                            <select class="form-control" name="valve_type" id="valve_type">
                                <option value=""></option>
                                <option value="Gate Valve">Gate Valve</option>
                                <option value="Washout Valve">Washout Valve</option>
                                <option value="Air Release Valve">Air Release Valve</option>
                            </select>
                        </div>

                        <div class="col-xs-12" style="height: 10px;"></div>

                        <label class="control-label col-sm-4" for="valve_dma_id">DMA ID</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="valve_dma_id" id="valve_dma_id">
                        </div>

                        <div class="col-xs-12" style="height: 10px;"></div>

                        <label class="control-label col-sm-4" for="valve_diameter">Diameter (mm)</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="valve_diameter" id="valve_diameter">
                        </div>

                        <div class="col-xs-12" style="height: 10px;"></div>

                        <label class="control-label col-sm-4" for="valve_visibility">Visibility</label>
                        <div class="col-sm-8">
                            <select class="form-control" name="valve_visibility" id="valve_visibility">
                                <option value=""></option>
                                <option value="Visible">Visible</option>
                                <option value="Invisible">Invisible</option>
                            </select>
                        </div>

                        <div class="col-xs-12" style="height: 10px;"></div>

                        <label class="control-label col-sm-4" for="valve_location">Location</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="valve_location" id="valve_location">
                        </div>

                        <div class="col-xs-12" style="height: 10px;"></div>

                        <label class="control-label col-sm-4" for="valve_geometry">Geometry</label>
                        <div class="col-sm-8">
                            <textarea name="valve_geometry" id="valve_geometry" disabled></textarea>
                        </div>

                        <div class="col-xs-12" style="height: 10px;"></div>
                        
                        <div class="col-sm-6">
                            <button type="button" class="btn btn-danger btn-block" id="btn_valve_cancel">Cancel</button>	
                        </div>
                        <div class="col-sm-6">
                            <button type="button" class="btn btn-success btn-block" id="btn_valve_insert">Insert Valve</button>	
                        </div>
                    </div>
                </div>

                <div class="col-xs-12" style="height: 10px;"></div>
                <div id="valve_status" class="col-xs-12 successMsg"></div>  
            </div>

            <div class="sidebar-pane" id="pipeline">
                <h1 class="sidebar-header">
                    Pipelines
                    <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
                </h1>

                <div id="divPipeline" class="col-xs-12">
                    <div class="col-xs-12" style="height: 10px;"></div>

                    <div class="col-xs-12">
                        <p class="text-center bold">Pipeline Information</p>
                    </div>

                    <div id="pipeline_error" class="errorMsg col-xs-12"></div>

                    <div class="col-xs-12" style="height: 10px;"></div>

                    <div class="form-group">
                        <div class="col-xs-6">
                            <input type="text" id="pipeline_id" class="form-control" placeholder="Pipeline ID">
                        </div>
                        <div class="col-xs-6">
                            <button id="findPipeline" class="btn btn-primary btn-block">Find Pipeline</button>
                        </div>
                    </div>
                    <div class="col-xs-12" id="pipeline_information">
                        
                    </div>
                    
                </div>

                <div class="col-xs-12" style="height: 60px;"></div>

                <div id="newPipeline" class="col-xs-12">
                    
                    <div class="col-xs-8">
                        <button type="button" class="btn btn-info btn-block" id="btn_pipeline_form">Insert New Pipeline</button>
                    </div>
                    <div class="col-xs-4">
                        <button type="button" class="btn btn-success btn-block" id="btn_pipeline_refresh">Refresh</button>
                    </div>

                    <div class="col-xs-12" style="height: 10px;"></div>

                    <div id="new_pipeline_information" class="col-xs-12 new_feature">
                        
                        <label class="control-label col-sm-4" for="new_pipeline_id">Pipe ID</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="new_pipeline_id" id="new_pipeline_id">
                        </div>

                        <div class="col-xs-12" style="height: 10px;"></div>

                        <label class="control-label col-sm-4" for="pipeline_category">Category</label>
                        <div class="col-sm-8">
                            <select class="form-control" name="pipeline_category" id="pipeline_category">
                                <option value=""></option>
                                <option value="Distribution Pipeline">Distribution Pipeline</option>
                                <option value="Reticulation Pipeline">Reticulation Pipeline</option>
                                <option value="Transmission Pipeline">Transmission Pipeline</option>
                            </select>
                        </div>

                        <div class="col-xs-12" style="height: 10px;"></div>

                        <label class="control-label col-sm-4" for="pipeline_dma_id">DMA ID</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="pipeline_dma_id" id="pipeline_dma_id">
                        </div>

                        <div class="col-xs-12" style="height: 10px;"></div>

                        <label class="control-label col-sm-4" for="pipeline_diameter">Diameter (mm)</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="pipeline_diameter" id="pipeline_diameter">
                        </div>

                        <div class="col-xs-12" style="height: 10px;"></div>

                        <label class="control-label col-sm-4" for="pipeline_method">Construction Method</label>
                        <div class="col-sm-8">
                            <select class="form-control" name="pipeline_method" id="pipeline_method">
                                <option value=""></option>
                                <option value="OT">OT</option>
                                <option value="HDD">HDD</option>
                            </select>
                        </div>

                        <div class="col-xs-12" style="height: 10px;"></div>

                        <label class="control-label col-sm-4" for="pipeline_location">Location</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="pipeline_location" id="pipeline_location">
                        </div>

                        <div class="col-xs-12" style="height: 10px;"></div>

                        <label class="control-label col-sm-4" for="pipeline_geometry">Geometry</label>
                        <div class="col-sm-8">
                            <textarea name="pipeline_geometry" id="pipeline_geometry" disabled></textarea>
                        </div>

                        <div class="col-xs-12" style="height: 10px;"></div>
                        
                        <div class="col-sm-6">
                            <button type="button" class="btn btn-danger btn-block" id="btn_pipeline_cancel">Cancel</button>	
                        </div>
                        <div class="col-sm-6">
                            <button type="button" class="btn btn-success btn-block" id="btn_pipeline_insert">Insert Pipeline</button>	
                        </div>
                    </div>
                </div>

                <div class="col-xs-12" style="height: 10px;"></div>
                <div id="pipeline_status" class="col-xs-12 successMsg"></div>  
                
            </div>

            <div class="sidebar-pane" id="building">
                <h1 class="sidebar-header">
                    Buildings
                    <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
                </h1>

                <div id="divbuilding" class="col-xs-12">
                    <div class="col-xs-12" style="height: 10px;"></div>

                    <div class="col-xs-12">
                        <p class="text-center bold">Building Information</p>
                    </div>

                    <div id="building_error" class="errorMsg col-xs-12"></div>

                    <div class="col-xs-12" style="height: 10px;"></div>

                    <div class="form-group">
                        <div class="col-xs-6">
                            <input type="text" id="building_id" class="form-control" placeholder="Building ID">
                        </div>
                        <div class="col-xs-6">
                            <button id="findBuilding" class="btn btn-primary btn-block">Find Building</button>
                        </div>
                    </div>
                    <div class="col-xs-12" id="building_information">
                        
                    </div>
                    
                </div>

                <div class="col-xs-12" style="height: 60px;"></div>

                <div id="newBuilding" class="col-xs-12">
                    
                    <div class="col-xs-8">
                        <button type="button" class="btn btn-info btn-block" id="btn_building_form">Insert New Building</button>
                    </div>
                    <div class="col-xs-4">
                        <button type="button" class="btn btn-success btn-block" id="btn_building_refresh">Refresh</button>
                    </div>

                    <div class="col-xs-12" style="height: 10px;"></div>

                    <div id="new_building_information" class="col-xs-12 new_feature">
                        
                        <label class="control-label col-sm-4" for="new_building_id">Building ID</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="new_building_id" id="new_building_id">
                        </div>

                        <div class="col-xs-12" style="height: 10px;"></div>

                        <label class="control-label col-sm-4" for="building_category">Category</label>
                        <div class="col-sm-8">
                            <select class="form-control" name="building_category" id="building_category">
                                <option value=""></option>
                                <option value="Building">Building</option>
                                <option value="Tin Shed">Tin Shed</option>
                                <option value="Under Construction">Under Construction</option>
                                <option value="Open Plot">Open Plot</option>
                            </select>
                        </div>

                        <div class="col-xs-12" style="height: 10px;"></div>

                        <label class="control-label col-sm-4" for="building_dma_id">DMA ID</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="building_dma_id" id="building_dma_id">
                        </div>

                        <div class="col-xs-12" style="height: 10px;"></div>

                        <label class="control-label col-sm-4" for="building_storey">Storey</label>
                        <div class="col-sm-8">
                            <input type="number" class="form-control" name="building_storey" id="building_storey">
                        </div>

                        <div class="col-xs-12" style="height: 10px;"></div>

                        <label class="control-label col-sm-4" for="building_population">Population</label>
                        <div class="col-sm-8">
                            <input type="number" class="form-control" name="building_population" id="building_population">
                        </div>

                        <div class="col-xs-12" style="height: 10px;"></div>

                        <label class="control-label col-sm-4" for="building_location">Location</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="building_location" id="building_location">
                        </div>

                        <div class="col-xs-12" style="height: 10px;"></div>

                        <label class="control-label col-sm-4" for="building_geometry">Geometry</label>
                        <div class="col-sm-8">
                            <textarea name="building_geometry" id="building_geometry" disabled></textarea>
                        </div>

                        <div class="col-xs-12" style="height: 10px;"></div>
                        
                        <div class="col-sm-6">
                            <button type="button" class="btn btn-danger btn-block" id="btn_building_cancel">Cancel</button>	
                        </div>
                        <div class="col-sm-6">
                            <button type="button" class="btn btn-success btn-block" id="btn_building_insert">Insert building</button>	
                        </div>
                    </div>
                </div>

                <div class="col-xs-12" style="height: 10px;"></div>
                <div id="building_status" class="col-xs-12 successMsg"></div>  

                
            </div>
	    </div>
	</div>
    
    <div id="mapdiv" class="col-md-12"></div>

    <script>
        var mymap;
        var baseLayers;
        var overlays;
        var lyrSearch;
        
        var layerValves;
        var layerPipelines;
        var layerBuildings;
        var raster_data;

        var valves_array = [];
        var pipelines_array = [];
        var buildings_array = [];

        var dma_id;


        // Map Canvas
        var mymap = L.map('mapdiv', {
            center: [23.78573, 90.44378],
            zoom: 12.5,
            attributionControl: false,
            zoomControl: false,
            
        });
        
        // Background Maps
        var OpenStreetMap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: 'OpenStreetMap Contributors',
            maxZoom: 20,
        })

        var CartoDB = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
            attribution: 'Carto Contributors',
            maxZoom: 20,
        })

        var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
            attribution: 'ESRI',
            maxZoom: 20,        
        })

        var Esri_WorldImagery_Minimap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
            attribution: 'ESRI',
            maxZoom: 20,        
        })

		var GoogleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
			maxZoom: 20,
			subdomains:['mt0','mt1','mt2','mt3']
		});

        var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
            maxZoom: 20,
        });
        
        CartoDB.addTo(mymap);


        // Sidebar
        var sidebar = L.control.sidebar('sidebar', {
            position: 'left'
        });

        mymap.addControl(sidebar);
        
        // Zoom Control
        L.control.zoom({
            position: "topright",
        }).addTo(mymap);

        // Measure Tool
        L.control.polylineMeasure({
            position: 'topright',
        }).addTo(mymap);

        // Geoman Plugin
        mymap.pm.addControls({  
            position: 'topright',
            drawMarker: true,
            drawPolyline: true,
            drawPolygon: true,
            drawCircleMarker: false,
            drawCircle: false,
            drawText: false,
            drawRectangle: false,
            editMode: false,
            dragMode: false,
            cutPolygon: false,
            removalMode: true,
            rotateMode: false,
        });
        
        mymap.on("pm:create", function(e) {
            var jsn = e.layer.toGeoJSON().geometry;
            var jsn_modified;

            if (e.shape == 'Marker') {
                
                if(confirm("Add Valve?")) {
                    jsn_modified = {type:"Point", coordinates:jsn.coordinates}
                    $("#valve_geometry").val(JSON.stringify(jsn_modified));
                }
            }

            if (e.shape == 'Line') {
                
                if(confirm("Add Pipeline?")) {
                    jsn_modified = {type:"MultiLineString", coordinates:[jsn.coordinates]}
                    $("#pipeline_geometry").val(JSON.stringify(jsn_modified));
                }
            }

            if (e.shape == 'Polygon') {
                
                if(confirm("Add Building?")) {
                    jsn_modified = {type:"MultiPolygon", coordinates:[jsn.coordinates]}
                    $("#building_geometry").val(JSON.stringify(jsn_modified));
                }
            }
        });

        // Layer Control
        var baseLayers = {
            "Google Streets": GoogleStreets,
            "OpenStreetMap": OpenStreetMap,
            "CartoDB": CartoDB,
            "ESRI Satelite": Esri_WorldImagery,
            "OpenTopoMap": OpenTopoMap,
        };

        var control_layers = L.control.layers(baseLayers, overlays).addTo(mymap)

        // Scale Display
        L.control.scale({
            position: 'bottomright',
            maxWidth: 250,
            imperial: false,
        }).addTo(mymap)

        // Mouse-Position
        L.control.mousePosition({
            position: 'bottomright',
        }).addTo(mymap);

        // Minimap Plugin
        var miniMap = new L.Control.MiniMap(Esri_WorldImagery_Minimap, {
            position: "bottomright",
            height: 200,
            width: 200,
            toggleDisplay: true,
        }).addTo(mymap);


        // Legend Control
        // var legend = L.control({ position: 'bottomleft' });

        // legend.onAdd = function (map) {
        //     var div = L.DomUtil.create('div', 'legend');
        //     div.innerHTML = `
        //         <h4>Legende</h4>
        //         <b>Valves</b><br>
        //         <i style="background:#2E7D32"></i> Air Release Valve<br>
        //         <i style="background:#43A047"></i> Gate Valve<br>
        //         <i style="background:#66BB6A"></i> Washout Valve<br><br>
        //         <b>Pipelines</b><br>
        //         <i class="line" style="background:#1565C0"></i> Distribution<br>
        //         <i class="line" style="background:#797DA4"></i> Reticulation<br>
        //         <i class="line" style="background:#1E88E5"></i> Transmission<br><br>
        //         <b>Buildings</b><br>
        //         <i style="background:#B71C1C"></i> 10+ Storey<br>
        //         <i style="background:#D32F2F"></i> 5-9 Storey<br>
        //         <i style="background:#F44336"></i> 1-2 Storey<br>
        //         <i style="background:#EF5350"></i> Tin Shed<br>
        //         <i style="background:#E57373"></i> Open Plot<br>
        //     `;
        //     return div;
        // };

        // legend.addTo(mymap);

        
        // Data Control

        // HOME
        $("#filter_dma").click(function() {
            dma_id = $("#dma_id").val();

            if (!dma_id) {
                $("#home_error").html("Please provide a DMA ID first!")
            } else {
                load_valves(dma_id);
                load_pipelines(dma_id);
                load_buildings(dma_id);
                load_rasterdata(dma_id);

            }
        });
        
        
        

        // Point Features
        function load_valves (dma_id) {
            $.ajax({
                url:'load_data.php',
                data: {table:'valves', dma_id:dma_id},
                type: 'POST',
                success: function(response) {
                    if (response.trim().substr(0, 5)=="ERROR") {
                        console.log(response);
                    } else {
                        var jsnValve = JSON.parse(response);

                        if (layerValves) {
                            layerValves.remove();
                            control_layers.removeLayer(layerValves)
                        }

                        layerValves = L.geoJSON(jsnValve, {
                            pointToLayer:style_valves
                        }).addTo(mymap);

                        control_layers.addOverlay(layerValves, "Valves");
                        mymap.fitBounds(layerValves.getBounds());
                    }
                },
                error: function(xhr, status, error) {
                    console.log("Error: "+error);
                }
            });
        }

        function refresh_valves (dma_id) {
            $.ajax({
                url:'load_data.php',
                data: {table:'valves', dma_id:dma_id},
                type: 'POST',
                success: function(response) {
                    if (response.trim().substr(0, 5)=="ERROR") {
                        console.log(response);
                    } else {
                        var jsnValve = JSON.parse(response);

                        if (layerValves) {
                            layerValves.remove();
                            control_layers.removeLayer(layerValves)
                        }

                        layerValves = L.geoJSON(jsnValve, {
                            pointToLayer:style_valves
                        }).addTo(mymap);

                        control_layers.addOverlay(layerValves, "Valves");
                    }
                },
                error: function(xhr, status, error) {
                    console.log("Error: "+error);
                }
            });
        }

        $("#valve_id").autocomplete({
                source:valves_array,
                appendTo: "#sidebar"
            })

        function style_valves(json, latlng) {
            var att = json.properties;
            var color;
            var fill_color;
            var radius = 5;
            var fill_opacity = 1;

            valves_array.push(att.valve_id);

            switch (att.valve_type) {
                case 'Air Release Valve':
                    color = '#2e7d32';
                    fill_color = '#2E7D32';                  
                    break;
                case 'Gate Valve':
                    color = '#43A047';
                    fill_color = '#43A047';                  
                    break;
                case 'Washout Valve':
                    color = '#66BB6A';
                    fill_color = '#66BB6A';                  
                    break;
                default:
                    color = '#616161'
                    fill_color = '#616161'
                    break;
            }
        
            var style = {radius:radius, color:color, fillColor:fill_color, fillOpacity:fill_opacity};

            return L.circleMarker(latlng, style).bindTooltip("Valve ID: "+att.valve_id+"<br>Valve Type: "+att.valve_type+"<br>Diameter: "+att.valve_diameter+" mm<br>Location: "+att.valve_location+"<br>Visibility: "+att.valve_visibility).bindPopup(
                `<div class="popup-container">
                    <input type="hidden" name="webgis_id" class="updateValve" value='${att.webgis_id}'>

                    <input type="hidden" name="valve_id_old" class="updateValve" value='${att.valve_id}'>
                    
                    <div class="popup-form-group">
                        <label class="control-label popup-label">Valve ID</label>
                        <input type="text" class="form-control popup-input text-center updateValve" value='${att.valve_id}' name="valve_id">			
                    </div>
                    <div class="popup-form-group">
                        <label class="control-label popup-label">DMA ID</label>
                        <input type="text" class="form-control popup-input text-center updateValve" value='${att.valve_dma_id}' name="valve_dma_id">			
                    </div>
                    <div class="popup-form-group">
                        <label class="control-label popup-label">Type</label>
                        <input type="text" class="form-control popup-input text-center updateValve" value='${att.valve_type}' name="valve_type">			
                    </div>
                    <div class="popup-form-group">
                        <label class="control-label popup-label">Diameter (mm)</label>
                        <input type="number" class="form-control popup-input text-center updateValve" value='${att.valve_diameter}' name="valve_diameter">			
                    </div>
                    <div class="popup-form-group">
                        <label class="control-label popup-label">Location</label>
                        <input type="text" class="form-control popup-input text-center updateValve" value='${att.valve_location}' name="valve_location">			
                    </div>
                    <div class="popup-form-group">
                        <label class="control-label popup-label">Visibility</label>
                        <input type="text" class="form-control popup-input text-center updateValve" value='${att.valve_visibility}' name="valve_visibility">			
                    </div>
                    
                    <div class="popup-button-group">
                        <button type="submit" class="btn btn-success popup-button" onclick='updateValve()'>Update</button>
                        <button type="submit" class="btn btn-danger popup-button" onclick='deleteValve()'>Delete</button>
                    </div>

                </div>`
                );
		}


			function updateValve(){
				var jsn = returnFormData('updateValve');
				jsn.request = "valves";

				Swal.fire({
					title: "Do you want to save this Valve?",
				 	showDenyButton: true,
				 	showCancelButton: true,
				 	confirmButtonText: "Save",
				 	denyButtonText: `Don't save`
				}).then((result) => {
					if (result.isConfirmed) {
						$.ajax({
							url:'update_data.php',
							data:jsn,
							type: 'POST',
							success: function(response){
								if (response.trim().substr(0, 5) == "ERROR") {
                                    Swal.fire("Error!", response, "error");
                                } else {
                                    Swal.fire("Saved!", "", "success");
                                    refresh_valves(dma_id);
                                }
							},
							error: function(error){
								console.log("ERROR: "+error);
							}
						});
				    	
					} else if (result.isDenied) {
						Swal.fire("Valve not saved", "", "info");
					}
				});
			}

			function deleteValve(){
				var jsn = returnFormData('updateValve');
				jsn.request = "valves";

				Swal.fire({
					title: "Do you want to delete this Valve?",
				 	showDenyButton: true,
				 	showCancelButton: true,
				 	confirmButtonText: "Delete",
				 	denyButtonText: `Don't Delete`
				}).then((result) => {
					if (result.isConfirmed) {
						$.ajax({
							url:'delete_data.php',
							data:jsn,
							type: 'POST',
							success: function(response){
                                if (response.trim().substr(0, 5) == "ERROR") {
                                    Swal.fire("Error!", response, "error");
                                } else {
                                    Swal.fire("Deleted!", "", "success");
                                    refresh_valves(dma_id);
                                }
                            },
							error: function(error){
								console.log("ERROR: "+error);
							}
						});
				    	
					} else if (result.isDenied) {
						Swal.fire("Valve not deleted!", "", "info");
					}
				});
			}
        

        // jQuery
        $("#findValve").click(function() {
            var valve_id = $("#valve_id").val();
            
            returnLayerByAttribute("valves", "valve_id", valve_id, function(lyr) {
                $("#valve_error").html("");
                $("#valve_information").html("");
                
                if (lyrSearch) {
                    mymap.removeLayer(lyrSearch);
                }

                if (lyr) {
                    var att = lyr.feature.properties;
                    lyrSearch = L.circle(lyr.getLatLng(), {radius:10, color:'red', weight:10, opacity:0.5, fillOpacity:0.25}).addTo(mymap);

                    mymap.setView(lyr.getLatLng(), 20);
               
                    layerValves.bringToFront();

                    $("#valve_information").html("Valve ID: "+att.valve_id+"<br>Valve Type: "+att.valve_type+"<br>Diameter: "+att.valve_diameter+" mm<br>Location: "+att.valve_location+"<br>Visibility: "+att.valve_visibility);

                } else {
                    $("#valve_error").html("Valve not found!");
                }
            });
        });


        $("#btn_valve_form").click(function() {
            $("#new_valve_information").show();
        })

        $("#btn_valve_cancel").click(function() {
            $("#new_valve_information").hide();
        })

        $("#btn_valve_insert").click(function() {
            var valve_id = $("#valve_id_new").val();
            var valve_type = $("#valve_type").val();
            var valve_dma_id = $("#valve_dma_id").val();
            var valve_diameter = $("#valve_diameter").val();
            var valve_visibility = $("#valve_visibility").val();
            var valve_location = $("#valve_location").val();
            var valve_geometry = $("#valve_geometry").val();

            if (valve_id=="" || valve_type=="" || valve_dma_id=="" || valve_geometry =="") {
                $("#valve_status").html("Please fill up all Fields.")
            } else {
                $.ajax({
                    url:'insert_data.php',
                    data:{valve_id:valve_id, valve_type:valve_type, valve_dma_id:valve_dma_id, valve_diameter:valve_diameter, valve_visibility:valve_visibility, valve_location:valve_location, valve_geometry:valve_geometry, request:'valves'},
                    type: "POST",
                    success:function(response) {
                        if (response.trim().substr(0, 5)=="ERROR") {
                            console.log(response);
                            $("#valve_status").html(response)
                        } else {
                            $("#valve_status").html("Valve inserted successfully!")
                            refresh_valves(dma_id);

                            $("#valve_id_new").val("");
                            $("#valve_type").val("");
                            $("#valve_dma_id").val("");
                            $("#valve_diameter").val("");
                            $("#valve_visibility").val("");
                            $("#valve_location").val("");
                            $("#valve_geometry").val("");
                        }
                    },
                    error:function(xhr, status, error) {
                        $("#valve_status").html(error)
                    }
                })
            }
        });

        $("#btn_valve_refresh").click(function() {
            refresh_valves(dma_id);
        })

        // Line Features
        function load_pipelines(dma_id) {
            $.ajax({
                url:'load_data.php',
                data: {table:'pipelines', dma_id:dma_id},
                type: 'POST',
                success: function(response) {
                    if (response.trim().substr(0, 5)=="ERROR") {
                        console.log(response);
                    } else {
                        var jsnPipeline = JSON.parse(response);

                        if (layerPipelines) {
                            layerPipelines.remove();
                            control_layers.removeLayer(layerPipelines)
                        }

                        layerPipelines = L.geoJSON(jsnPipeline, {
                            style:style_pipelines,
                            onEachFeature:process_pipelines,
                        }).addTo(mymap);

                        control_layers.addOverlay(layerPipelines, "Pipelines");
                    }
                },
                error: function(xhr, status, error) {
                    console.log("Error: "+error);
                }
            });
        }

        $("#pipeline_id").autocomplete({
                source:pipelines_array,
                appendTo: "#sidebar",
            })

        function style_pipelines(json) {
            var att = json.properties;
            var color;

            pipelines_array.push(att.pipeline_id);

            switch (att.pipeline_category) {
                case 'Distribution Pipeline':
                    color = '#1565C0';
                    break;
                case 'Reticulation Pipeline':
                    color = '#797DA4';
                    break;
                case 'Transmission Pipeline':
                    color = '#1E88E5';
                    break;
                default:
                    color = '#616161'
                    break;
            }
            
            return {color:color};
        }

        function process_pipelines(json, lyr) {
            var att = json.properties
            lyr.bindTooltip("Pipe ID: "+att.pipeline_id+"<br>Category: "+att.pipeline_category+"<br>Diameter: "+att.pipeline_diameter+" mm"+"<br>Length: "+att.pipeline_length+" m"+"<br>Location: "+att.pipeline_location).bindPopup(
                `<div class="popup-container">

						<input type="hidden" name="webgis_id" class="updatePipeline" value='${att.webgis_id}'>

						<input type="hidden" name="pipeline_id_old" class="updatePipeline" value='${att.pipeline_id}'>
						
						<div class="popup-form-group">
							<label class="control-label popup-label">Pipe ID</label>
							<input type="text" class="form-control popup-input text-center updatePipeline" value='${att.pipeline_id}' name="pipeline_id">			
						</div>
						<div class="popup-form-group">
							<label class="control-label popup-label">DMA ID</label>
							<input type="text" class="form-control popup-input text-center updatePipeline" value='${att.pipeline_dma_id}' name="pipeline_dma_id">			
						</div>
						<div class="popup-form-group">
							<label class="control-label popup-label">Diameter (mm)</label>
							<input type="number" class="form-control popup-input text-center updatePipeline" value='${att.pipeline_diameter}' name="pipeline_diameter">			
						</div>
						<div class="popup-form-group">
							<label class="control-label popup-label">Location</label>
							<input type="text" class="form-control popup-input text-center updatePipeline" value='${att.pipeline_location}' name="pipeline_location">			
						</div>
						<div class="popup-form-group">
							<label class="control-label popup-label">Category</label>
							<input type="text" class="form-control popup-input text-center updatePipeline" value='${att.pipeline_category}' name="pipeline_category">			
						</div>
						<div class="popup-form-group">
							<label class="control-label popup-label">Length (m)</label>
							<input type="number" step="any" class="form-control popup-input text-center updatePipeline" value='${att.pipeline_length}' name="pipeline_length">			
						</div>
						
						<div class="popup-button-group">
							<button type="submit" class="btn btn-success popup-button" onclick='updatePipeline()'>Update</button>
							<button type="submit" class="btn btn-danger popup-button" onclick='deletePipeline()'>Delete</button>
						</div>

					</div>`
					);
			}

			function updatePipeline(){
				var jsn = returnFormData('updatePipeline');
				jsn.request = "pipelines";

				Swal.fire({
					title: "Do you want to save the changes?",
				 	showDenyButton: true,
				 	showCancelButton: true,
				 	confirmButtonText: "Save",
				 	denyButtonText: `Don't save`
				}).then((result) => {
					if (result.isConfirmed) {
						$.ajax({
							url:'update_data.php',
							data:jsn,
							type: 'POST',
							success: function(response){
                                if (response.trim().substr(0, 5) == "ERROR") {
                                    Swal.fire("Error!", response, "error");
                                } else {
                                    Swal.fire("Saved!", "", "success");
                                    load_pipelines(dma_id);
                                }
                            },
							error: function(error){
								console.log("ERROR: "+error);
							}
						});
				    	
					} else if (result.isDenied) {
						Swal.fire("Changes are not saved", "", "info");
					}
				});
			}

			function deletePipeline(){
				var jsn = returnFormData('updatePipeline');
				jsn.request = "pipelines";

				Swal.fire({
					title: "Do you want to delete this pipeline?",
				 	showDenyButton: true,
				 	showCancelButton: true,
				 	confirmButtonText: "Delete",
				 	denyButtonText: `Don't Delete`
				}).then((result) => {
					if (result.isConfirmed) {
						$.ajax({
							url:'delete_data.php',
							data:jsn,
							type: 'POST',
							success: function(response){
                                if (response.trim().substr(0, 5) == "ERROR") {
                                    Swal.fire("Error!", response, "error");
                                } else {
                                    Swal.fire("Deleted!", "", "success");
                                    load_pipelines(dma_id);
                                }
                            },
							error: function(error){
								console.log("ERROR: "+error);
							}
						});
				    	
					} else if (result.isDenied) {
						Swal.fire("Pipeline not deleted!", "", "info");
					}
				});
			}


    
        // jQuery
        $("#findPipeline").click(function() {
            var pipeline_id = $("#pipeline_id").val();
            
            returnLayerByAttribute("pipelines", "pipeline_id", pipeline_id, function(lyr) {
                $("#pipeline_error").html("");
                $("#pipeline_information").html("");

                if (lyrSearch) {
                    mymap.removeLayer(lyrSearch);
                }

                if (lyr) {
                    var att = lyr.feature.properties;
            
                    lyrSearch = L.geoJSON(lyr.toGeoJSON(), {style:{color:'red', weight:10, opacity:0.5}}).addTo(mymap);

                    mymap.fitBounds(lyr.getBounds());
                    layerPipelines.bringToFront();
                                    
                    $("#pipeline_information").html("Pipe ID: "+att.pipeline_id+"<br>Category: "+att.pipeline_category+"<br>Diameter: "+att.pipeline_diameter+" mm"+"<br>Length: "+att.pipeline_length+" m"+"<br>Location: "+att.pipeline_location);

                } else {
                    $("#pipeline_error").html("Pipeline not found!");
                }
            });
        })


        $("#btn_pipeline_form").click(function() {
            $("#new_pipeline_information").show();
        })

        $("#btn_pipeline_cancel").click(function() {
            $("#new_pipeline_information").hide();
        })

        $("#btn_pipeline_insert").click(function() {
            var pipeline_id = $("#new_pipeline_id").val();
            var pipeline_category = $("#pipeline_category").val();
            var pipeline_dma_id = $("#pipeline_dma_id").val();
            var pipeline_diameter = $("#pipeline_diameter").val();
            var pipeline_method = $("#pipeline_method").val();
            var pipeline_location = $("#pipeline_location").val();
            var pipeline_geometry = $("#pipeline_geometry").val();

            if (pipeline_id == "" || pipeline_category == "" || pipeline_geometry == "") {
                $("#pipeline_status").html("Please fill up all Fields.")
            } else {
                $.ajax({
                    url:'insert_data.php',
                    data: {pipeline_id:pipeline_id, pipeline_category:pipeline_category, pipeline_dma_id:pipeline_dma_id, pipeline_diameter:pipeline_diameter, pipeline_method:pipeline_method, pipeline_location:pipeline_location, pipeline_geometry:pipeline_geometry, request:'pipelines'},
                    type: "POST",
                    success:function(response) {
                        if (response.trim().substr(0, 5)=="ERROR") {
                            console.log(response);
                            $("#pipeline_status").html(response)
                        } else {
                            $("#pipeline_status").html("Pipeline inserted successfully!")
                            load_pipelines(dma_id);

                            $("#new_pipeline_id").val("");
                            $("#pipeline_category").val("");
                            $("#pipeline_dma_id").val("");
                            $("#pipeline_diameter").val("");
                            $("#pipeline_method").val("");
                            $("#pipeline_location").val("");
                            $("#pipeline_geometry").val("");
                        }
                    },
                    error:function(xhr, status, error) {
                        $("#pipeline_status").html(error)
                    }
                })
            }
        })

        $("#btn_pipeline_refresh").click(function() {
            load_pipelines(dma_id);
        })


        // Polygon Features
        function load_buildings (dma_id) {
            $.ajax({
                url:'load_data.php',
                data: {table:'buildings', dma_id:dma_id},
                type: 'POST',
                success: function(response) {
                    if (response.trim().substr(0, 5)=="ERROR") {
                        console.log(response);
                    } else {
                        var jsnBuilding = JSON.parse(response);

                        if (layerBuildings) {
                            layerBuildings.remove();
                            control_layers.removeLayer(layerBuildings)
                        }

                        layerBuildings = L.geoJSON(jsnBuilding, {
                            style:style_buildings,
                            onEachFeature:process_buildings,
                        }).addTo(mymap);

                        control_layers.addOverlay(layerBuildings, "Buildings");
                    }
                },
                error: function(xhr, status, error) {
                    console.log("Error: "+error);
                }
            });
        }

        $("#building_id").autocomplete({
                source:buildings_array,
                appendTo: "#sidebar"
            })
        
        function style_buildings(json) {
            var att = json.properties;
            var storey = att.building_storey
            var color;
            var fill_color;
            var fill_opacity = 1;

            buildings_array.push(att.building_id);

            switch (att.building_category) {
                case 'Building':
                    if (storey>=10) {
                        color = '#B71C1C';
                        fill_color = '#B71C1C';
                    } else if (storey>=7) {
                        color = '#C62828';
                        fill_color = '#C62828';
                    } else if (storey>=5) {
                        color = '#D32F2F';
                        fill_color = '#D32F2F';
                    } else if (storey>=3) {
                        color = '#E53935';
                        fill_color = '#E53935';
                    } else {
                        color = '#F44336';
                        fill_color = "#F44336";
                    }
                    break;
                case 'Tin Shed':
                    color = '#EF5350';
                    fill_color = '#EF5350';
                    break;
                case 'Open Plot':
                    color = '#E57373';
                    fill_color = '#E57373';                    
                    break;
                default:
                    color = '#EF9A9A'
                    fill_color = '#EF9A9A'
                    break;
            }

        return {color:color, fillColor:fill_color, fillOpacity:fill_opacity}
        }

        function process_buildings(json, lyr) {
            var att = json.properties;

            lyr.bindTooltip("Building ID: "+att.building_id+"<br>Account Number: "+att.account_no+"<br>Category: "+att.building_category+"<br>Storey: "+att.building_storey+"<br>Population: "+att.building_population+"<br>Location: "+att.building_location).bindPopup(
                `<div class="popup-container">
        
                    <input type="hidden" name="webgis_id" class="updateBuilding" value='${att.webgis_id}'>
                    <input type="hidden" name="account_no_old" class="updateBuilding" value='${att.account_no}'>

                    <div class="popup-form-group">
                        <label class="control-label popup-label">Account Number</label>
                        <input type="text" class="form-control popup-input text-center updateBuilding" value='${att.account_no}' name="account_no">
                    </div>

                    <div class="popup-form-group">
                        <label class="control-label popup-label">DMA ID</label>
                        <input type="text" class="form-control popup-input text-center updateBuilding" value='${att.building_dma_id}' name="building_dma_id">
                    </div>

                    <div class="popup-form-group">
                        <label class="control-label popup-label">Category</label>
                        <input type="text" class="form-control popup-input text-center updateBuilding" value='${att.building_category}' name="building_category">
                    </div>

                    <div class="popup-form-group">
                        <label class="control-label popup-label">Storey</label>
                        <input type="number" class="form-control popup-input text-center updateBuilding" value='${att.building_storey}' name="building_storey">
                    </div>

                    <div class="popup-form-group">
                        <label class="control-label popup-label">Population</label>
                        <input type="number" class="form-control popup-input text-center updateBuilding" value='${att.building_population}' name="building_population">
                    </div>

                    <div class="popup-form-group">
                        <label class="control-label popup-label">Location</label>
                        <input type="text" class="form-control popup-input text-center updateBuilding" value='${att.building_location}' name="building_location">
                    </div>

                    <div class="popup-button-group">
                        <button type="submit" class="btn btn-success popup-button" onclick='updateBuilding()'>Update</button>
                        <button type="submit" class="btn btn-danger popup-button" onclick='deleteBuilding()'>Delete</button>
                    </div>

                </div>`
            );
        }
    

        function updateBuilding() {
            var jsn = returnFormData('updateBuilding');
            jsn.request = "buildings";

            Swal.fire({
                title: "Do you want to save this Building?",
                showDenyButton: true,
                showCancelButton: true,
                confirmButtonText: "Save",
                denyButtonText: `Don't save`
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url:'update_data.php',
                        data:jsn,
                        type:'POST',
                        success: function(response){
                            if (response.trim().substr(0, 5) == "ERROR") {
                                Swal.fire("Error!", response, "error");
                            } else {
                                Swal.fire("Saved!", "", "success");
                                load_buildings(dma_id);
                            }
                        },
                        error: function(error) {
                            console.log("ERROR: "+error);
                        },
                    })
                } 
                else if (result.isDenied) {
                    Swal.fire("Building not saved", "", "info");
                }
            });
        };

        function deleteBuilding() {
            var jsn = returnFormData('updateBuilding');
            jsn.request = "buildings";

            Swal.fire({
                title: "Do you want to delete this Building?",
                showDenyButton: true,
                showCancelButton: true,
                confirmButtonText: "Delete",
                denyButtonText: `Don't delete`
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url:'delete_data.php',
                        data:jsn,
                        type:'POST',
                        success: function(response){
                            if (response.trim().substr(0, 5) == "ERROR") {
                                Swal.fire("Error!", response, "error");
                            } else {
                                Swal.fire("Deleted!", "", "success");
                                load_buildings(dma_id);
                            }
                        },
                        error: function(error) {
                            console.log("ERROR: "+error);
                        },
                    })
                } 
                else if (result.isDenied) {
                    Swal.fire("Building not deleted!", "", "info");
                }
            });



        }

        // jQuery
        $("#findBuilding").click(function() {
            var building_id = $("#building_id").val();
            
            returnLayerByAttribute("buildings", "building_id", building_id, function(lyr) {
                $("#building_error").html("");
                $("#building_information").html("");

                if (lyrSearch) {
                    mymap.removeLayer(lyrSearch);
                }

                if (lyr) {
                    var att = lyr.feature.properties;
                    
                    lyrSearch = L.geoJSON(lyr.toGeoJSON(), {style:{color:'red', weight:10, opacity:1.0, fillOpacity:0.0}}).addTo(mymap);

                    mymap.fitBounds(lyr.getBounds());
                    // buildings.bringToFront();
                                
                    $("#building_information").html("Building ID: "+att.building_id+"<br>Account Number: "+att.account_no+"<br>Category: "+att.building_category+"<br>Storey: "+att.building_storey+"<br>Population: "+att.building_population+"<br>Location: "+att.building_location);

                } else {
                    $("#building_error").html("Building not found!");
                }
            });
        })
        

        $("#btn_building_form").click(function() {
            $("#new_building_information").show();
        })

        $("#btn_building_cancel").click(function() {
            $("#new_building_information").hide();
        })


        $("#btn_building_insert").click(function(){
            var account_no = $("#new_building_id").val();
            var building_category = $("#building_category").val();
            var building_dma_id = $("#building_dma_id").val();
            var building_storey = $("#building_storey").val();
            var building_population = $("#building_population").val();
            var building_location = $("#building_location").val();
            var building_geometry = $("#building_geometry").val();

            if (account_no == "" || building_category == "" || building_dma_id == "" || building_storey =="" || building_geometry =="") {
                $("#building_status").html("Please fill up all Fields");
            } else {
                $.ajax({
                    url:'insert_data.php',
                    data:{account_no:account_no, building_category:building_category, building_dma_id:building_dma_id, building_storey:building_storey, building_population:building_population, building_location:building_location, building_geometry:building_geometry, request:'buildings'},
                    type:'POST',
                    success:function(response) {

                        if (response.trim().substr(0,5)=='ERROR') {
                            console.log(response);
                            $("#building_status").html(response);
                        } else {
                            $("#building_status").html("Building inserted successfully!");
                            load_buildings(dma_id);

                            $("#new_building_id").val("");
                            $("#building_category").val("");
                            $("#building_dma_id").val("");
                            $("#building_storey").val("");
                            $("#building_population").val("");
                            $("#building_location").val("");
                            $("#building_geometry").val("");
                        }	
                    },
                    error:function(xhr, status, error){
                        $("#building_status").html(error);
                    }

                })
            }

        });


        $("#btn_building_refresh").click(function(){
            load_buildings(dma_id);
        });



        // RASTER DATA

        function load_rasterdata(dma_id) {

            if (raster_data) {
                raster_data.remove();
                control_layers.removeLayer(raster_data)
            }

            var path = 'https://localhost/webgisCourse/webgisPortal/raster_data/'+dma_id+'/{z}/{x}/{y}.png';

            raster_data = L.tileLayer(path, {
                tms:1,
                opacity:1,
                attribution:"",
                maxZoom:22
            });
            
            control_layers.addOverlay(raster_data, "Drone Image");
        }




        // GENERAL FUNCTIONS
        function returnLayerByAttribute(table, field, value, callback) {
            $.ajax({
                url:'find_data.php',
                data:{table:table, field:field, value:value},
                type:'POST',
                success:function(response) {
                    if (response.trim().substr(0, 5)=="ERROR") {
                        console.log(response);
                        callback(false)
                    } else {
                        var jsn = JSON.parse(response);
                        var layer = L.geoJSON(jsn);
                        var layers = layer.getLayers();

                        if (layers.length>0) {
                            callback(layers[0])
                        } else {
                            callback(false)
                        }
                    }
                },
                error:function(xhr, status, error){
                    console.log("ERROR: "+error);
                }      
            })
        };


        function returnFormData(inpClass) {
            var objFormData = {};

            $("."+inpClass).each(function(){
                objFormData[this.name] = this.value;
            });

            return objFormData
        };

    </script>


</body>
</html>