@extends('layouts.simple_admin_base')

@section('stylesheets')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
          integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
          crossorigin=""/>

    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
            integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
            crossorigin=""></script>

@endsection

@section('content')
    <div class="row">
        <div class="col-12">
            <div>
                <h4 class="header-title mb-3">Dashboard</h4>
            </div>
        </div>
    </div>
    <!-- end row -->

    <div class="row">
        <div class="col-12">
            <div>
                <div class="card-box widget-inline">
                    <div class="row">
                        <div class="col-xl-3 col-sm-6 widget-inline-box">
                            <div class="text-center p-3">
                                <h2 class="mt-2"><i class="text-primary mdi mdi-account mr-2"></i> <b>{{ $companyStaffCount }}</b></h2>
                                <p class="text-muted mb-0">Users</p>
                            </div>
                        </div>

                        <div class="col-xl-3 col-sm-6 widget-inline-box">
                            <div class="text-center p-3">
                                <h2 class="mt-2"><i class="text-teal mdi mdi-message-processing mr-2"></i> <b>{{ $enquiryMessages }}</b></h2>
                                <p class="text-muted mb-0">Total Enquiry Messages</p>
                            </div>
                        </div>

                        <div class="col-xl-3 col-sm-6 widget-inline-box">
                            <div class="text-center p-3">
                                <h2 class="mt-2"><i class="text-danger mdi mdi-alert-box mr-2"></i> <b>{{ $alertsCount }}</b></h2>
                                <p class="text-muted mb-0">Total Alerts</p>
                            </div>
                        </div>

                        <div class="col-xl-3 col-sm-6">
                            <div class="text-center p-3">
                                <h2 class="mt-2"><i class="text-info ti ti-location-pin mr-2"></i> <b>{{ $assetsCount }}</b></h2>
                                <p class="text-muted mb-0">Total Assets</p>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--end row -->

    <style type="text/css">
        #map{width: 100%; height:500px;}
    </style>

    <div class="row">
        <div class="col-lg-12">
            <div class="card-box">
                <div id="map"></div>
            </div>
        </div>

    </div>

    <div class="row">
        <div class="col-lg-6">
            <div class="card-box">
                <h5 class="mt-0 font-14">Total Revenue</h5>
                <div class="text-center">
                    <ul class="list-inline chart-detail-list">
                        <li class="list-inline-item">
                            <p class="font-weight-semibold"><i class="fa fa-circle mr-2 text-primary"></i>Series A</p>
                        </li>
                        <li class="list-inline-item">
                            <p class="font-weight-semibold"><i class="fa fa-circle mr-2 text-muted"></i>Series B</p>
                        </li>
                    </ul>
                </div>
                <div id="dashboard-bar-stacked" class="morris-chart" dir="ltr"  style="height: 300px;"></div>
            </div>
        </div>
        <!-- end col -->

        <div class="col-lg-6">
            <div class="card-box">
                <h5 class="mt-0 font-14">Sales Analytics</h5>
                <div class="text-center">
                    <ul class="list-inline chart-detail-list">
                        <li class="list-inline-item">
                            <p class="font-weight-semibold"><i class="fa fa-circle mr-2 text-primary"></i>Mobiles</p>
                        </li>
                        <li class="list-inline-item">
                            <p class="font-weight-semibold"><i class="fa fa-circle mr-2 text-info"></i>Tablets</p>
                        </li>
                    </ul>
                </div>
                <div id="dashboard-line-chart" class="morris-chart" dir="ltr" style="height: 300px;"></div>
            </div>
        </div>
        <!-- end col -->
    </div>
    <!-- end row -->
@endsection

@section('scripts')
    <script src="{{ asset('simple-admin/assets/libs/morris-js/morris.min.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/raphael/raphael.min.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/js/pages/dashboard.init.js') }}"></script>
@endsection

@section('page_scripts')
    <script src="{{ asset('simple-admin/assets/custom/js/marker-styles.js') }}"></script>

{{--    <script>--}}

{{--            var mymap = L.map('map').setView([-15.392484, 28.329333], 13);--}}

{{--            L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibGVuZ2E5NCIsImEiOiJja3RtcWxsYWQyN3psMnVwZXB3ZHR0Y3V0In0.vjYxs4JODTFW_AYHyTewHA', {--}}
{{--                attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',--}}
{{--                maxZoom: 18,--}}
{{--                id: 'mapbox/streets-v11',--}}
{{--                tileSize: 512,--}}
{{--                zoomOffset: -1,--}}
{{--                accessToken: 'pk.eyJ1IjoibGVuZ2E5NCIsImEiOiJja3RtcWxsYWQyN3psMnVwZXB3ZHR0Y3V0In0.vjYxs4JODTFW_AYHyTewHA'--}}
{{--            }).addTo(mymap);--}}

{{--            var marker = L.marker([51.5, -0.09]).addTo(mymap);--}}

{{--            var circle = L.circle([51.508, -0.11], {--}}
{{--                color: 'red',--}}
{{--                fillColor: '#f03',--}}
{{--                fillOpacity: 0.5,--}}
{{--                radius: 500--}}
{{--            }).addTo(mymap);--}}

{{--            var polygon = L.polygon([--}}
{{--                [51.509, -0.08],--}}
{{--                [51.503, -0.06],--}}
{{--                [51.51, -0.047]--}}
{{--            ]).addTo(mymap);--}}

{{--            mymap.on('click', onMapClick);--}}
{{--            marker.bindPopup("<b>Hello world!</b><br>I am a popup.");//.openPopup();--}}
{{--            circle.bindPopup("I am a circle.");--}}
{{--            polygon.bindPopup("I am a polygon.");--}}

{{--            var popup = L.popup();--}}

{{--            function onMapClick(e) {--}}
{{--                popup--}}
{{--                    .setLatLng(e.latlng)--}}
{{--                    .setContent("You clicked the map at " + e.latlng.toString())--}}
{{--                    .openOn(mymap);--}}
{{--            }--}}

{{--            mymap.on('click', onMapClick);--}}

{{--    </script>--}}

{{--    <script>--}}

{{--        var data = null--}}
{{--        $.ajax({--}}
{{--            url: '{{ route('assets.geojson') }}',--}}
{{--            type: 'GET',--}}
{{--            dataType: 'json',--}}
{{--            success: function (response) {--}}
{{--                console.log(response);--}}
{{--                data = response;--}}
{{--            }--}}
{{--        });--}}

{{--        //Point Layer--}}
{{--        function waterPointStyle(feature) {--}}
{{--            return{--}}
{{--                "color": "#1638b4",--}}
{{--                "weight": 8,--}}

{{--            }--}}
{{--        }--}}

{{--        var assetsLayer = L.geoJson(--}}
{{--            university_of_zambia,--}}
{{--            {style: waterPointStyle}--}}

{{--        );--}}

{{--        var OSM = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {--}}
{{--            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',--}}
{{--            maxZoom: 22--}}
{{--        });--}}

{{--        var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {--}}
{{--            attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'--}}
{{--        });--}}


{{--        var map = L.map('map',{--}}
{{--            center: new L.LatLng(-15.392484, 28.329333),--}}
{{--            zoom: 15.4,--}}
{{--            layers: [OSM, Esri_WorldImagery]});--}}
{{--    </script>--}}

    <script>

        var areas = [];
        var buildings = [];
        var sewerLines = [];
        var sewerPoints = [];
        var waterLines = [];
        var waterPoints = [];

        $(document).ready(function () {

            ///Setting the center of the map
            var center = [-15.392484, 28.329333];
            // Create the map
            var map = L.map('map', {
                minZoom: 15.4,
                maxZoom: 18
            }).setView(center, 15.4);

            // Set up the Open Street Map layer
            var OSM = L.tileLayer(
                'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: 'Data © <a href="http://osm.org/copyright">OpenStreetMap</a>',
                    maxZoom: 22
                });

            OSM.addTo(map);

            var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
                attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
            });
            Esri_WorldImagery.addTo(map);

            var redIcon = L.icon({
                iconUrl: '{{ asset("website/assets/images/red-icon.png") }}',

                iconSize:     [25, 41], // size of the icon
                iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
                shadowAnchor: [4, 62],  // the same for the shadow
                popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
            });

            var brownIcon = L.icon({
                iconUrl: '{{ asset("website/assets/images/brown-icon.png") }}',

                iconSize:     [25, 41], // size of the icon
                iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
                shadowAnchor: [4, 62],  // the same for the shadow
                popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
            });

            var lilacIcon = L.icon({
                iconUrl: '{{ asset("website/assets/images/lilac-icon.png") }}',

                iconSize:     [25, 41], // size of the icon
                iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
                shadowAnchor: [4, 62],  // the same for the shadow
                popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
            });

            var greenIcon = L.icon({
                iconUrl: '{{ asset("website/assets/images/green-icon.png") }}',

                iconSize:     [25, 41], // size of the icon
                iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
                shadowAnchor: [4, 62],  // the same for the shadow
                popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
            });

            var purpleIcon = L.icon({
                iconUrl: '{{ asset("website/assets/images/purple-icon.png") }}',

                iconSize:     [25, 41], // size of the icon
                iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
                shadowAnchor: [4, 62],  // the same for the shadow
                popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
            });

            var greyIcon = L.icon({
                iconUrl: '{{ asset("website/assets/images/grey-icon.png") }}',

                iconSize:     [25, 41], // size of the icon
                iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
                shadowAnchor: [4, 62],  // the same for the shadow
                popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
            });

            $.ajax({
                url: '{{ route('assets.geojson') }}',
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    var features = response.features;

                    features.forEach(feature => {

                        var properties = feature.properties;
                        var assetId = properties.id;
                        var assetName = properties.asset_name;
                        var assetCode = properties.asset_code;
                        var assetType = properties.asset_type.name
                        var viewUrl = '{{ route('assets.manage') }}/'+assetId+'/show';

                        var displayStyle;
                        var layer;

                        switch (assetType) {
                            case "Area":
                                displayStyle = {style: areaStyle};
                                layer = L.geoJSON(feature, displayStyle).addTo(map);
                                break;
                            case "Building":
                                displayStyle = {style: buildingStyle};
                                layer = L.geoJSON(feature, displayStyle).addTo(map);
                                break;
                            case "Sewer Line":
                                displayStyle = {style: sewerStyle};
                                layer = L.geoJSON(feature, displayStyle).addTo(map);
                                break;
                            case "Water Line":
                                displayStyle = {style: waterStyle};
                                layer = L.geoJSON(feature, displayStyle).addTo(map);
                                break;
                            case "Fire Hydrant":
                                layer = L.geoJSON(feature, {
                                    pointToLayer: function (feature, latlng) {
                                        return L.marker(latlng, {icon: redIcon});
                                    }
                                }).addTo(map);
                                break;
                            case "Borehole":
                                layer = L.geoJSON(feature, {
                                    pointToLayer: function (feature, latlng) {
                                        return L.marker(latlng, {icon: brownIcon});
                                    }
                                }).addTo(map);
                                break;
                            case "Water Pump":
                                layer = L.geoJSON(feature, {
                                    pointToLayer: function (feature, latlng) {
                                        return L.marker(latlng, {icon: lilacIcon});
                                    }
                                }).addTo(map);
                                break;
                            case "Water Tank":
                                layer = L.geoJSON(feature, {
                                    pointToLayer: function (feature, latlng) {
                                        return L.marker(latlng, {icon: greenIcon});
                                    }
                                }).addTo(map);
                                break;
                            case "Pump House":
                                layer = L.geoJSON(feature, {
                                    pointToLayer: function (feature, latlng) {
                                        return L.marker(latlng, {icon: greyIcon});
                                    }
                                }).addTo(map);
                                break;
                            case "Sewer Point":
                                layer = L.geoJSON(feature, {
                                    pointToLayer: function (feature, latlng) {
                                        return L.marker(latlng, {icon: purpleIcon});
                                    }
                                }).addTo(map);
                                break;
                            default:
                                displayStyle = {style: waterPointStyle};
                                layer = L.geoJSON(feature, displayStyle).addTo(map);
                                break;
                        }

                        layer.bindPopup(`

                                <div class="card-body">
                                    <div class="mb-1">
                                        <strong>Name: </strong> `+assetName+`
                                    </div>
                                    <div class="mb-1">
                                        <strong>Serial Number: </strong> `+assetCode+`
                                    </div>
                                    <div class="mb-1">
                                        <strong>Type: </strong> `+assetType+`
                                    </div>
                                    <div class="mb-1">
                                        <a href="`+viewUrl+`">View</a>
                                    </div>
                                </div>
`                       );

                        switch (assetType) {
                            case "Area":
                                areas.push(layer);
                                break;
                            case "Building":
                                buildings.push(layer);
                                break;
                            case "Sewer Line":
                                sewerLines.push(layer);
                                break;
                            case "Water Line":
                                waterLines.push(layer);
                                break;
                            case "Sewer Point":
                                sewerPoints.push(layer);
                                break;
                            case "Water Point":
                                waterPoints.push(layer);
                                break;
                            default:
                                waterLines.push(layer);
                                break;
                        }
                    });
                }
            });

            var baseMaps = {
                "OpenStreetMap": OSM,
                "ESRI  World Imnagery": Esri_WorldImagery
                //"Google Aerial":GoogleAerial,
                // "Google Roadmap":GoogleRoad,
                //"Google Terrain":GoogleTerrain,
                //"Google Hybrid":GoogleHybrid,
            };

            var overlayMaps = {
                "water point": L.layerGroup(waterPoints),
                "sewer line": L.layerGroup(sewerLines),
                "water line": L.layerGroup(waterLines),
                "building": L.layerGroup(buildings),
                "areas": L.layerGroup(areas),
                "sewer point": L.layerGroup(sewerPoints)
            };

            L.control.layers(baseMaps, overlayMaps).addTo(map);


        });






    </script>
@endsection