@extends('layouts.app')

@section('content')

@include('common.error')

<div class="row">
    @php $user = Auth::user(); @endphp

    @if ($user->RoleID == 1)
    <div class="col-md-4">
        <div class="card water_card cl_2">
            <img class="img-weffect" src="{{ asset('assets\images\water_effect.png') }}">
            <div class="wd_body">
                <h5 class="">Aaj ka Jal Start</h5>
                <p class="">
                    <span class="">DWLR WL :</span> <strong class="sp">
                        {{ $DWLR_Data }}/{{ $DWLR_Wells }}</strong>
                </p>
            </div>
        </div>

        <div class="card water_card cl_1">
            <img class="img-weffect" src="{{ asset('assets\images\water_effect.png') }}">
            <div class="wd_body">
                <h5 class="">Ground Water Level</h5>
                <p><span>Total Wells: </span> <strong>{{ $Wells }}</strong> </p>
                <p><span>{{ $WL_keys[0] }}: </span> <strong>{{ $WL[$WL_keys[0]] }}(m)</strong> </p>
                <p><span>{{ $WL_keys[1] }}: </span> <strong>{{ $WL[$WL_keys[1]] }}(m)</strong> </p>
                <p><span>{{ $WL_keys[2] }}: </span> <strong>{{ $WL[$WL_keys[2]] }}(m)</strong></p>
            </div>
        </div>

        <div class="card water_card cl_3">
            <img class="img-weffect" src="{{ asset('assets\images\water_effect.png') }}">
            <div class="wd_body">
                <h5 class="">Ground Water Quality</h5>
                <p><span class="">{{ $WQ['date'] }} Total Sample:</span> <strong class="sp">
                        {{ $WQ['Total Sample'] }}</strong> </p>
                <p><span>{{ $WQ_keys[0] }}: </span> <strong>{{ $WQ[$WQ_keys[0]] }}(%)</strong> </p>
                <p><span>{{ $WQ_keys[1] }}: </span> <strong>{{ $WQ[$WQ_keys[1]] }}(%)</strong> </p>
                <p><span>{{ $WQ_keys[2] }}: </span> <strong>{{ $WQ[$WQ_keys[2]] }}(%)</strong></p>
            </div>
        </div>
    </div>
    @else
    <div class="col-md-4">
        <div class="card water_card cl_2">
            <img class="img-weffect" src="{{ asset('assets\images\water_effect.png') }}" />
            <div class="wd_body">
                <h5 class="">Aaj ka Jal Star</h5>
                <p class="">
                    <span class="">DWLR WL :</span> <strong class="sp">
                        {{ $DWLR_Data }}/{{ $DWLR_Wells }}</strong>
                </p>
            </div>
        </div>

        <div class="card water_card cl_1">
            <img class="img-weffect" src="{{ asset('assets\images\water_effect.png') }}" />
            <div class="wd_body">
                <h5 class="">Ground Water Level</h5>
                <p><span>Total Wells: </span> <strong>{{ $Wells }}</strong> </p>
                <p><span>{{ $WL_keys[0] }}: </span> <strong>{{ $WL[$WL_keys[0]] }}(m)</strong> </p>
                <p><span>{{ $WL_keys[1] }}: </span> <strong>{{ $WL[$WL_keys[1]] }}(m)</strong> </p>
                <p><span>{{ $WL_keys[2] }}: </span> <strong>{{ $WL[$WL_keys[2]] }}(m)</strong></p>
            </div>
        </div>

        <div class="card water_card cl_3">
            <img class="img-weffect" src="{{ asset('assets\images\water_effect.png') }}" />
            <div class="wd_body">
                <h5 class="">Ground Water Quality</h5>
                <p><span class="">{{ $WQ['date'] }} Total Sample:</span> <strong class="sp">
                        {{ $WQ['Total Sample'] }}</strong> </p>
                <p><span>{{ $WQ_keys[0] }}: </span> <strong>{{ $WQ[$WQ_keys[0]] }}(%)</strong> </p>
                <p><span>{{ $WQ_keys[1] }}: </span> <strong>{{ $WQ[$WQ_keys[1]] }}(%)</strong> </p>
                <p><span>{{ $WQ_keys[2] }}: </span> <strong>{{ $WQ[$WQ_keys[2]] }}(%)</strong></p>
            </div>
        </div>
    </div>
    @endif

    <div class="col-md-8">
        <div class="homeMap">
            <div class="custom-control custom-radio custom-control-inline">
                <ul>
                    <li>
                        <input type="radio" class="form-control DTypeFilter" name="DTypeFilter" value="wl" checked>
                        <label class="custom-control-label" for="DTypeFilter">WL</label>
                    </li>
                    <li>
                        <input type="radio" class="form-control DTypeFilter" name="DTypeFilter" value="dwlr">
                        <label class="custom-control-label" for="DTypeFilter">DWLR</label>
                    </li>
                    <li>
                        <input type="radio" class="form-control DTypeFilter" name="DTypeFilter" value="wq">
                        <label class="custom-control-label" for="DTypeFilter">WQ</label>
                    </li>
                </ul> 
            </div>
            <div id="map" class="map_bx"></div>
        </div>
    </div>
</div>


<script src="{{ asset('assets\js\jquery.min.js') }}"></script>
<link href="{{ asset('assets\leaflet\leaflet.css') }}" rel="stylesheet" />
<link href="{{ asset('assets\leaflet\leaflet.fullscreen.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets\leaflet\leaflet.zoomhome.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets\leaflet\MarkerCluster.css') }}" rel="stylesheet" />
<link href="{{ asset('assets\leaflet\MarkerCluster.Default.css') }}" rel="stylesheet" />
<script type="text/javascript" src="{{ asset('assets\leaflet\leaflet.js') }}"></script>
<script src="{{ asset('assets\leaflet\mlcluster.js') }}"></script>
<script src="{{ asset('assets\leaflet\leaflet.markercluster-src.js') }}"></script>
<script src="{{ asset('assets\leaflet\leaflet.fullscreen.min.js') }}"></script>
<script src="{{ asset('assets\leaflet\leaflet.groupedlayercontrol.min.js') }}"></script>
<script src="{{ asset('assets\leaflet\leaflet.zoomhome.min.js') }}"></script>



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

        var DType = $(".DTypeFilter").val();

        var mapOptions = {
            center: [22.309425, 72.136230],
            zoom: 4,
            maxZoom: 12,
            minZoom: 3,
            zoomSnap: 0.97,
            fullscreenControl: {
                pseudoFullscreen: false
            },
            zoomControl: false,
            zoomsliderControl: true,
            scrollWheelZoom: false,
        };
        var map = L.map('map', mapOptions);

        var outdoors = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
        // map.addControl(new L.Control.Fullscreen());

        L.Control.zoomHome({
            position: 'topleft'
        }).addTo(map);

        function StategetColor(d) {
            debugger;

            if (d == 20) {
                return '#008FFB';
            } else {
                return '#c4c4c4';
            }


        }

        function Statestyle(feature) {
            return {
                //fillColor: StategetColor(feature.properties.gid),
                weight: 1,
                opacity: 1,
                color: '#2B9FB2 ',
                dashArray: '0',
                fillOpacity: 0
            };
        }

        

        var State = L.geoJson(null, {
            style: Statestyle
        }).addTo(map);

        // Add GeoJSON to road layer
        $.getJSON(
            "http://20.198.96.251:8080/geoserver/ne/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ne%3Aindia_2000-2014_state&maxFeatures=500000&outputFormat=application%2Fjson",
            function (data) {
                State.addData(data);
            });

        var District = L.geoJson(null, {
            style: Statestyle
        });

        // Add GeoJSON to road layer
        $.getJSON(
            "http://20.198.96.251:8080/geoserver/ne/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ne%3AIndia%20District_800&maxFeatures=500000&outputFormat=application%2Fjson",
            function (data) {
                District.addData(data);
            });

        var Aquifer = L.geoJson(null, {
            style: Statestyle
        });

        // Add GeoJSON to road layer
        $.getJSON(
            "http://20.198.96.251:8080/geoserver/ne/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ne%3AMajor_Aquifer&maxFeatures=500000&outputFormat=application%2Fjson",
            function (data) {
                Aquifer.addData(data);
            });



        // // Add GeoJSON to road layer
        // $.getJSON("http://20.198.96.251:8080/geoserver/ne/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ne%3Aindia_2000-2014_state&maxFeatures=500000&outputFormat=application%2Fjson", function (data) {
        //     State.addData(data);
        // });


        // var DistLyr = new L.geoJson(gjgeojson, { style: polystyle}).addTo(map);
        // var basin = new L.geoJson(gjgeojson, { style: polystyle }); 

        var baseMaps = {
            "Street": outdoors,
            "Hybrid": L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
                maxZoom: 20,
                subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
            }),
            "Satellite": L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
                maxZoom: 20,
                subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
            }),
            "Terrain": L.tileLayer('http://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}', {
                maxZoom: 20,
                subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
            })
        }

        var overlayMaps = {
            "Boundary Layers": {
                "State": State,
                "District": District,
                "Aquifer": Aquifer


            }
        };

        var options = {
            // Make the "Landmarks" group exclusive (use radio inputs)
            exclusiveGroups: ["Boundary Layers"],
            // Show a checkbox next to non-exclusive group labels for toggling all
            groupCheckboxes: true,
            position: 'topleft'
        };

        var layerControl = L.control.groupedLayers(baseMaps, overlayMaps, options);
        map.addControl(layerControl);
        // console.log(response);


        $('.DTypeFilter').change(function() {
            var DType = $(this).val();
            // console.log(DType);
            fillMap(map, DType,1); // Pass the map variable to the fillMap function
        });

        fillMap(map,DType, 0);

    });    

    

    function fillMap(map,DType,clear) {
        var url1 = '/get-wl-summary';
        if(DType == 'dwlr')
        {
            url1 = '/get-dwlr-summary';
        }else if(DType == 'wq'){
            url1 = '/get-wq-summary';
        }
        // var DType = $("#DTypeFilter").val();
        // console.log(DType);
        $.ajax({
            url: url1,
            type: 'GET',
            data: {},
            success: function (response) {
                // var map = L.map('map').setView([22.309425, 72.136230], 7);


                if(clear == 1)
                {
                    Object.keys(stateMarkers).map(state => {
                        // stateMarkers[state].addTo(map);
                        stateMarkers[state].clearLayers();
                    });
                }

                

                stateLGD = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
                    23, 24, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38];

                $.each(stateLGD, function (i, n) {
                    stateMarkers[n] = L.markerClusterGroup();
                });

                // var markers = L.markerClusterGroup();
                $.each(response, function (i, n) {
                    // console.log(n.state);
                    
                    stateMarkers[n.state].addLayer(L.circle([n.Latitude, n.Longitude], {
                        color: '#006fcc',
                        fillColor: '#008bff',
                        fillOpacity: 0.5,
                        radius: 100
                    }).bindPopup(
                        '<div><table class="table table-borderless text-center" style="width:100%; font-size:14px;"> <thead><tr><td colspan="2"><b>' +
                        n.LocationName +
                        ' </b></td></tr></thead> <tbody> <tr> <td colspan="2">' + n
                            .Village + '/' + n.Block_Taluk + '/' + n.DistrictName +
                        '</td></tr><tr class="border-top border-left border-right"> <td colspan="2">Well depth: ' +
                        n.Well_Depth +
                        '</td></tr><tr class="border-top border-left border-right"> <td colspan="2">GWL: ' +
                        n.Water_level +
                        '</td></tr><tr class="border-bottom border-left border-right"> <td colspan="2">Date: ' +
                        n.date +
                        '</td></tr> <tr class="mt-2"> <td colspan="2"></td> </tr></tbody> </table></div>'
                    ).openPopup());
                });

                Object.keys(stateMarkers).map(state => {
                    stateMarkers[state].addTo(map);
                });
                

                

                // map.addLayer(markers);

                // function polystyle(feature) {
                //     return {
                //         fillColor: '#F9E79F',
                //         weight: 1,
                //         opacity: 2, //1
                //         color: '#17202A',  //Outline color
                //         fillOpacity: 0.5 //5
                //     };
                // }

                // L.geoJson(gjgeoson, { style: polystyle }).addTo(map);

            },
            error: function (xhr, status, error) { }
        });
    }

    function BindRainFallChart() {
        $.ajax({
            url: '/Default/BindRainfallChart',
            type: 'GET',
            data: {},
            success: function (result) {
                $('#rain-fall').html(result);
            },
            error: function (xhr, status, error) { }
        });
    }
</script>
@endsection