@extends('test.master', ['nomenu'=>true])
@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-sm-12 content-right">
                <!-- /Wizard container -->
                <div class="mapcontainer mapp" style="width: 100%;">
                    <div class="map"><span>Alternative content for the map</span></div>
                    <div class="myLegend"><span>Alternative content for the legend</span></div>
                    <br>
                    <center>
                        <ul class="text-primary" style="font-size: 10px;">
                            <li>Tap on any area to zoom</li>
                            <li>Tap on any dot to show number</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($acases as $key => $ac)