@extends('layout.master')
@section('title', 'COVID-19 Heat Map')
@section('map', 'active')
@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="col-md-12">
        <div class="tab-content tab-transparent-content pb-0">
            <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
                <div class="row">

                    <div class="col-lg-12 stretch-card grid-margin grid-margin-lg-0">
                        <div class="card">
                            <div class="card-body">
                                <div class="container">
                                    <div class="mapcontainer mapp">
                                        <div class="map"><span>Map is loading...</span></div>
                                        <div class="myLegend"><span>Please wait</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

@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: "Reported COVID-19 Heat Map",
                            slices: [{
//                                size: 6,
                                type: "circle",
                                max: 1,
                                attrs: {
                                    fill: "#f9a825"
                                },
                                label: "Total Case"
                            }, {
//                                size: 6,
                                type: "circle",
                                max: 2,
                                attrs: {
                                    fill: "#43a047"
                                },
                                label: "Male Case"
                            }, {
//                                size: 6,
                                type: "circle",
                                max: 3,
                                attrs: {
                                    fill: "#b71c1c"
                                },
                                label: "Female 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