@extends('test.master')
@section('title', 'COVID-19 Heat Map')

@section('levelCSS') @endsection

@section('body')

    <style>
        .mapael .map {
            position: relative;
        }
        /* For all zoom buttons */
        .mapael .zoomButton {
            background-color: #fff;
            border: 1px solid #ccc;
            color: #000;
            width: 15px;
            height: 15px;
            line-height: 15px;
            text-align: center;
            border-radius: 3px;
            cursor: pointer;
            position: absolute;
            top: 0;
            font-weight: bold;
            left: 10px;

            -webkit-user-select: none;
            -khtml-user-select : none;
            -moz-user-select: none;
            -o-user-select : none;
            user-select: none;
        }

        /* Reset Zoom button first */
        .mapael .zoomReset {
            top: 10px;
        }

        /* Then Zoom In button */
        .mapael .zoomIn {
            top: 30px;
        }

        /* Then Zoom Out button */
        .mapael .zoomOut {
            top: 50px;
        }
        .mapael .mapTooltip {
            position: absolute;
            background-color: #fff;
            moz-opacity: 0.70;
            opacity: 0.70;
            filter: alpha(opacity=70);
            border-radius: 10px;
            padding: 10px;
            z-index: 1000;
            max-width: 200px;
            display: none;
            color: #343434;
        }
    </style>

    <div class="container-fluid full-height">
        <div class="row ">
            <div class="col-md-3 content-left">
                <div class="content-left-wrapper">
                    <div id="social">
                    </div>
                    <!-- /social -->
                    <div>
                        <h2>COVID-19 Heat Map</h2>
                        <p>Visualize COVID-19 Cases (Active, Recovery and Death) in Nigeria down by State.</p>
                        {{--<a href="#start" class="btn_1 rounded mobile_btn">Start Now!</a>--}}
                    </div>
                    <div class="copy">&copy; {{date('Y')}} <strong>e&acute;Clat</strong> Healthcare Ltd.</div>
                </div>
                <!-- /content-left-wrapper -->
            </div>
            <!-- /content-left -->

            <div class="col-md-9 content-right">
                <!-- /Wizard container -->
                <div class="mapcontainer mapp" style="width: 80%;">
                    <div class="map"><span>Heat Map is loading</span></div>
                    <div class="myLegend"><span>....</span></div>
                    <br>
                    <center>
                        <ul class="text-primary" style="font-size: 10px;">
                            <li>Tap on any area to zoom</li>
                        </ul>
                    </center>
                </div>
            </div>
            <!-- /content-right-->
        </div>
        <!-- /row-->
    </div>
    <!-- /container-fluid -->

@endsection

@section('levelJS')
    <script src="{{asset('vendors/raphael/raphael.min.js')}}"></script>
    <script src="{{asset('vendors/jquery-mapael/jquery.mapael.min.js')}}"></script>
    <script src="{{asset('vendors/jquery-mapael/france_departments.min.js')}}"></script>
    <script src="{{asset('js/nigeria.js')}}"></script>
    {{--    <script src="{{asset('js/mapael_example_1.js')}}"></script>--}}
    <script>
        $(function() {
            'use strict';
            if ($(".mapp").length) {
                $(".mapp").mapael({
                    map: {
                        name: "nigeria",
                        zoom: {
                            enabled: true,
                            maxLevel: 10
                        },
                        defaultArea: {
                            attrsHover: {
                                fill: "#a4e100",
                                stroke: "#ef5350",
                                "stroke-width": 0.5,
                                "stroke-linejoin": "round"
                            },
                            eventHandlers: {
                                click: function (e, id) {
                                    $(".mapp").trigger('zoom', {
                                        area: id,
                                        areaMargin: 10
                                    });
                                }
                            }
                        }
                    },
                    legend: {
                        plot: {
                            cssClass: 'myLegend',
                            mode: 'horizontal',
                            labelAttrs: {
                                fill: "#4a4a4a"
                            },
                            titleAttrs: {
                                fill: "#4a4a4a"
                            },
                            marginBottom: 20,
                            marginLeft: 10,
                            hideElemsOnClick: {
                                opacity: 0
                            },
                            title: "COVID-19 Heat Map",
                            slices: [{
//                                size: 6,
                                type: "circle",
                                max: 1,
                                attrs: {
                                    fill: "#f9a825"
                                },
                                label: "Active Case"
                            }, {
//                                size: 6,
                                type: "circle",
                                max: 2,
                                attrs: {
                                    fill: "#43a047"
                                },
                                label: "Recovery Case"
                            }, {
//                                size: 6,
                                type: "circle",
                                max: 3,
                                attrs: {
                                    fill: "#b71c1c"
                                },
                                label: "Death Case"
                            }]
                        }
                    },
                    plots: {
                        @foreach($map_legends as $key=>$legend_data)
                                                                @foreach($cases as $ac)
                            "{{$ac->name}}-{{$key}}": {
                                value: "{{$value}}",
                                size : '@if($ac->count+3<12) {{$ac->count+3}} @else 12 @endif',
                                latitude: '{{$ac->lat}}',
                                longitude: '{{$ac->long}}',
                                href: "#",
                                tooltip: {
                                    content: "<span style=\"font-weight:bold;\">{{$ac->name}}</span><br />{{$content}} : {{$ac->count}}"
                                }
                            },
                            @endforeach
                        @endforeach
                    }

                });
            }
        });
    </script>
@endsection