@extends('dashboard.dashboard_layouts.dashboard_master')

@section('admin_dashboard_title')
Map
@endsection

@section('admin_dashboard_css')
<style>
    .footc {
        color: #29aae3;
        background: white;
        border: 1px solid #29aae3;
    }

    .footc:hover {
        color: white;
        font-weight: bold;
        background: #29aae3;
        border: 1px solid white;
    }
    .link2:hover{
        cursor: pointer;
    }

    #panel {
        position: absolute;
        top: 230px;
        left: 40%;
        z-index: 5;
        padding: 0px;
        border: 0px solid #999;
        text-align: center;
        background:#0000FF;
        width:150px;
        color:#fff;
    }

    #panel, .panel {
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
    }

    #panel select, #panel input, .panel select, .panel input {
        font-size: 15px;
    }

    #panel select, .panel select {
    width: 100%;
    }

    #panel i, .panel i {
    font-size: 12px;
    }

    .gm-style-iw .gm-style-iw-c {
        max-width: 200px;
    }

</style>
@endsection

@section('admin_dashboard_content')
<div class="content dashboard-content h-100">
    <h1 class="dashboard-content-h1">Map</h1>
    <div class="content-wrap">
        <!-- breadcrumb -->
        <div class="breadcrumb-header justify-content-between">
            <nav class="breadcrumb-4">
                <ol class="breadcrumb breadcrumb-style1">
                    @if($login_user->roles[0]->name == 'Admin')

                    <li class="breadcrumb-item">

                        <a href="{{ route('dashboard') }}">Dashboard</a>

                    </li>
                    @elseif($login_user->roles[0]->name == 'Client')

                    <li class="breadcrumb-item">

                        <a href="{{ route('client-dashboard') }}">Dashboard</a>

                    </li>

                    @endif
                    <li class="breadcrumb-item active">Map</li>
                </ol>
            </nav>
        </div>
        <!-- breadcrumb -->

        @if(!empty($map))
            <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body ">
                        <div class="main-content-label  pb-2 mg-b-5 ">
                            <div class="row">
                                <div class="col-sm-8" style='color:#29aae3'>
                                    Your Map
                                    <br><br>
                                    <small class="text-muted">Manage & track your sign board locations, door canvassing, pin your vehicles & track QR code hits.</small>
                                </div>

                                <div class="col-sm-4 text-right" style='color:#29aae3'>
                                    <button class="btn btn-outline-success"
                                        data-bs-target="#addlocationModal"
                                        data-bs-toggle="modal" href="" onclick="initMap()" ><i class="ti-plus"></i>
                                        Add New Location
                                    </button>
                                </div>
                            </div>
                            <br>
                        </div>
                        <div class="row">
                            <div class="col-sm-9">
                                <div class="row" id="map-analytics" style="display: flex;">
                                    <div class="col-lg-6">
                                        <div class="card">
                                            <div class="card-body text-center ">
                                            <i class="fas fa-map-marker-alt text-success fs-1"></i>
                                            <h1 class="fw-bold fs-1 count-sign-locations">0</h1>
                                                <p class="text-muted fs-5 "
                                                    style="font-family: 'Rubik', sans-serif; !important">Sign Locations</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="card">
                                            <div class="card-body text-center ">

                                                <i class="fas fa-map-marked text-info fs-1"></i>
                                                <h1 class="fw-bold fs-1 count-door-canvasing">0</h1>
                                                <p class="text-muted fs-5" style="font-family: 'rubik', sans-serif; !important">
                                                    Door Canvassing</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="card">
                                            <div class="card-body text-center ">

                                                <i class="fas fa-car text-warning fs-1"></i>
                                                <h1 class="fw-bold fs-1 count-pinned-vehicles">0</h1>
                                                <p class="text-muted fs-5" style="font-family: 'Rubik', sans-serif; !important">
                                                    Pinned Vehicles
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="card">
                                            <div class="card-body text-center">

                                                <i class="fas fa-qrcode text-danger fs-1"></i>
                                                <h1 class="fw-bold fs-1 count-qr-hits">0</h1>
                                                <p class="text-muted fs-5" style="font-family: 'Rubik', sans-serif; !important">
                                                    QR Code Hits
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <div class="row" id="map-pins">
                                    <div class="col-lg-12">
                                        <div class="ht-300" id="map-google" style="display: none; height:450px;"></div>
                                    </div>
                                </div>

                                <span id="doormarkerStatus"></span>


                            </div>
                            <div class="col-sm-3">
                                <div class="row row-sm">

                                    <div class="col-xl-12 bd p-3 text-center footc link2 bg-primary text-white shadow-lg active " id="analytics">

                                        Analytics
                                    </div>

                                    <div class="col-xl-12 bd p-3 text-center footc link2 " id="sign-location" value="sign-location">
                                            Your Sign Locations
                                    </div>
                                        <div class="col-xl-12 bd p-3 text-center footc link2" id="QR-Code" value="QR-Code">
                                            Your QR Code Hits
                                        </div>
                                        <div class="col-xl-12 bd p-3 text-center footc link2" id="door-canvassing"  value="door-canvassing">
                                            Your Door Canvassing
                                        </div>

                                    <div class="col-xl-12 bd p-3 text-center footc link2" id="pin-vehicle" value="pin-vehicle">
                                            Your Pinned Vehicles
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            </div>
        @else
            <div class="row">
                <div class="card ">
                    <div class="card-body">
                        <div class="text-center">
                            <i class="fa fa-exclamation-triangle  text-dark" style="font-size: 3rem;"></i>
                            <br>
                            <p class="text-muted pt-3">Your package is not supported for this feature please upgrade your package, select <br>package to continue</p>
                            <a href="{{route('plans')}}" class="btn btn-info btn-lg"
                                style="border-radius: 60px;">Select Package</a>
                            <br>

                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>

@include('map.map_modal')
@endsection

@section('admin_dashboard_script')
<script  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDLgkbCBN1poChfbWCl7i3yIK_mFI8ORyU&libraries=drawing&v=weekly"></script>

<script>

    //map for door canvansing
    var map, infoWindow,prevInfoWindow;
    var mapMarkers = []
    var geocoder;
    var userLat = "";
    var userLng = "";
    function initMap3() {
        geocoder = new google.maps.Geocoder();
        map = new google.maps.Map(document.getElementById('map-google'), {
            center: {lat: -34.397, lng: 150.644},
            zoom: 11
        });

        infoWindow = new google.maps.InfoWindow;
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };

                userLat = position.coords.latitude
                userLng = position.coords.longitude


                var marker = new google.maps.Marker({
                    position: pos,
                    map: map,
                    draggable: true,
                    title: 'Your position'
                });

                mapMarkers.push(marker)

                map.setCenter(pos);


                updateMarkerPosition3(marker.getPosition());
                geocodePosition(pos);

                // Add dragging event listeners.
                google.maps.event.addListener(marker, 'dragstart', function() {
                    updateMarkerAddress3('Dragging...');
                });

                google.maps.event.addListener(marker, 'drag', function() {
                    updateMarkerStatus3('Dragging...');
                    updateMarkerPosition3(marker.getPosition());
                });

                google.maps.event.addListener(marker, 'dragend', function() {
                    updateMarkerStatus3('Drag ended');
                    geocodePosition(marker.getPosition());
                    map.panTo(marker.getPosition());
                });

                google.maps.event.addListener(map, 'click', function(e) {
                    updateMarkerPosition3(e.latLng);
                    geocodePosition(marker.getPosition());
                    marker.setPosition(e.latLng);
                    map.panTo(marker.getPosition());
                });

            }, function() {
                handleLocationError(true, infoWindow, map.getCenter());
            });
        } else {
            // Browser doesn't support Geolocation
            handleLocationError(false, infoWindow, map.getCenter());
        }
    }


    // Map 2 starts
    var mapEdit, infoWindowEdit;
    var geocoderEdit;

    function initMap2(data) {

        console.log(data)
        geocoderEdit = new google.maps.Geocoder();
        mapEdit = new google.maps.Map(document.getElementById('mapCanvasEdit'), {
            center: {lat: parseFloat(data.latitude), lng: parseFloat(data.longitude)},
            zoom: 14
        });

        var pos = {
            lat: parseFloat(data.latitude),
            lng: parseFloat(data.longitude)
        };



        mapEdit.setCenter(pos);
        geocodePosition(pos);


        infoWindowEdit = new google.maps.InfoWindow;
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var pos = {
                    lat: parseFloat(data.latitude),
                    lng: parseFloat(data.longitude)
                };

                var  marker = new google.maps.Marker({
                    position: pos,
                    map: mapEdit,
                    draggable: true,
                    title: 'Your position'
                });

                mapEdit.setCenter(pos);


                updateMarkerPositions(marker.getPosition());
                geocodePosition2(pos);

                // Add dragging event listeners.
                google.maps.event.addListener(marker, 'dragstart', function() {
                    updateMarkerAddress2('Dragging...');
                });

                google.maps.event.addListener(marker, 'drag', function() {
                    updateMarkerStatus2('Dragging...');
                    updateMarkerPositions(marker.getPosition());
                });

                google.maps.event.addListener(marker, 'dragend', function() {
                   updateMarkerStatus2('Drag ended');
                    geocodePosition2(marker.getPosition());
                    mapEdit.panTo(marker.getPosition());
                });

                google.maps.event.addListener(mapEdit, 'click', function(e) {
                    updateMarkerPositions(e.latLng);
                    geocodePosition2(marker.getPosition());
                    marker.setPosition(e.latLng);
                    mapEdit.panTo(marker.getPosition());
                });

            }, function() {
                handleLocationError2(true, infoWindowEdit, mapEdit.getCenter());
            });
        } else {
            // Browser doesn't support Geolocation
            handleLocationError2(false, infoWindowEdit, mapEdit.getCenter());
        }
    }

    function geocodePosition2(pos) {
        geocoderEdit.geocode({
            latLng: pos
        }, function(responses) {
            if (responses && responses.length > 0) {
            updateMarkerAddress2(responses[0].formatted_address);
            } else {
            updateMarkerAddress2('Cannot determine address at this location.');
            }
        });
    }

    function updateMarkerStatus2(str) {
        document.getElementById('markerStatusEdit').innerHTML = str;
    }

    function updateMarkerPositions(latLng) {
        $("#edit_latitude").val(latLng.lat());
        $("#edit_longitude").val(latLng.lng());
    }

    function updateMarkerAddress2(str) {
        $("#edit_location_name").val(str);
        console.log(str);
    }

    function handleLocationError2(browserHasGeolocation, infoWindow, pos) {
        infoWindowEdit.setPosition(pos);
        infoWindowEdit.setContent(browserHasGeolocation ?
                            'Error: The Geolocation service failed.' :
                            'Error: Your browser doesn\'t support geolocation.');
        infoWindowEdit.open(mapEdit);
    }

    // Map 2 ends

    function geocodePosition(pos) {
        geocoder.geocode({
            latLng: pos
        }, function(responses) {
            if (responses && responses.length > 0) {
            updateMarkerAddress3(responses[0].formatted_address);
            } else {
            updateMarkerAddress3('Cannot determine address at this location.');
            }
        });
    }

    function updateMarkerStatus3(str) {
        document.getElementById('doormarkerStatus').innerHTML = str;
    }

    function updateMarkerPosition3(latLng) {
        $("#followerlatitude").val(latLng.lat());
        $("#followerlongitude").val(latLng.lng());
    }

    function updateMarkerAddress3(str) {
        $("#followeraddress").val(str);
    }

    function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
                            'Error: The Geolocation service failed.' :
                            'Error: Your browser doesn\'t support geolocation.');
        infoWindow.open(map);
    }

    $(document).ready(function () {
        var forms = ["form-sign-location", "form-pin-vehicle", "form-QR-Code"];
        $("#map").hide();
        initMap3()


        $("#sign-location").on('click', function (e) {
            showHideGoogleAnalytics('none','block')
            mapLocation()
        })

        $("#pin-vehicle").on('click', function (e) {
            showHideGoogleAnalytics('none','block')
            mapVehicle()
        })

        $("#QR-Code").on('click', function (e) {
            showHideGoogleAnalytics('none','block')
            qrcodehits()
        })


        $("#door-canvassing").on('click', function (e) {
            showHideGoogleAnalytics('none','block')
            mapDoorCanvassing()
        })

        $("#analytics").on('click', function (e) {


            $("#mapanalytics").show().fadeIn({
                queue: false,
                duration: 'slow'
            });
            $("#doormapCanvas").hide();
            $("#map").hide();
            showHideGoogleAnalytics('flex','none')
        })

        function showHideGoogleAnalytics(analytics,google){
            $("#map-analytics").css('display',analytics)
            $("#map-pins").css('display',google)
            $("#map-google").css('display',google)
        }

        $("#map-location").on('submit', (function (e) {
            e.preventDefault();
            var form_data = new FormData(this);

            var latitude=$("#latitude").val();
            var longitude=$("#longitude").val();
            var location_name=$("#address").val();


            form_data.append("latitude", latitude);
            form_data.append("longitude", longitude);
            form_data.append("location_name", location_name);

            e.preventDefault();
            $.ajax({
                url: "/api/map/store",
                type: "post",
                data: form_data,
                dataType: "JSON",
                processData: false,
                contentType: false,
                cache: false,
                beforeSend: function () {
                    $("#btnSubmit").attr('disabled', true);
                    $(".fa-spin").css('display', 'inline-block');
                },
                complete: function () {
                    $("#btnSubmit").attr('disabled', false);
                    $(".fa-spin").css('display', 'none');
                },
                success: function (response) {
                    if (response["status"] == "fail") {
                        toastr.error('Not Found', response["msg"])
                    } else if (response["status"] == "success") {
                        toastr.success('Found', response["msg"])
                        $('#map-location')["0"].reset()
                        $('#addlocationModal').modal('hide');
                        refreshMap()
                    }
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }));

        //add follower in database
        $("#addfollower").on('submit', (function (e) {
            e.preventDefault();
            var form_data = new FormData(this);
            var latitude=$("#followerlatitude").val();
            var longitude=$("#followerlongitude").val();
            var address=$("#followeraddress").val();
            form_data.append("latitude", latitude);
            form_data.append("longitude", longitude);
            form_data.append("address", address);

            $.ajax({
                url: "/api/follower/add",
                type: "post",
                data: form_data,
                dataType: "JSON",
                processData: false,
                contentType: false,
                cache: false,
                beforeSend: function () {
                    $("#btnSubmit").attr('disabled', true);
                    $(".fa-spin").css('display', 'inline-block');
                },
                complete: function () {
                    $("#btnSubmit").attr('disabled', false);
                    $(".fa-spin").css('display', 'none');
                },
                success: function (response) {
                    if (response["status"] == "fail") {
                        toastr.error('Not Found', response["msg"])
                    } else if (response["status"] == "success") {
                        toastr.success('Found', response["msg"])
                        $('#addfollower')["0"].reset()
                        $('#addfollowerModal').modal('hide');
                        mapDoorCanvassing()
                    }
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }));

        $(document).on('click','.edit-pin',function(e){
          e.preventDefault();

          id = $(this).attr('id');

          $.ajax({
            url:'/map/edit/location/'+id,
            method:'GET',
            success:function(response){

                if (response["status"] == "fail") {

                toastr.error('Failed', response["msg"])

                } else if (response["status"] == "success") {

                    $('#id').val(response.data.id);
                    $('#edit_longitude').val(response.data.longitude);
                    $('#edit_location_name').val(response.data.location_name);
                    $('#edit_latitude').val(response.data.latitude);
                    $('#edit_pin_type').val(response.data.pin_type);
                    $('#edit_notes').val(response.data.notes);
                    initMap2(response["data"])
                    $('#updatelocationModal').modal('show');
                    refreshMap()


                }

            },
            async: false
          });
        });

          $(document).on('click','.pin-edit',function(e){
          e.preventDefault();

          id = $(this).attr('id');

          $.ajax({
            url:'/map/edit/follower/location/'+id,
            method:'GET',
            success:function(response){
              $('#editfollower_id').val(response.data.id);
              $('#editfollower_first_name').val(response.data.first_name);
              $('#editfollower_last_name').val(response.data.last_name);
              $('#editfollower_email').val(response.data.email);
              $('#editfollower_phone').val(response.data.phone);
              $('#editfollower_home_phone').val(response.data.home_phone);


              $('#editfollower_longitude').val(response.data.longitude);
              $('#editfollower_address').val(response.data.address);
               $('#editfollower_latitude').val(response.data.latitude);
               $('#editfollower_notes').val(response.data.notes);

               $(".supporter"+response["data"]["supporter"]).prop('checked',true)
               initMap2(response["data"])

              $('#updatefollowerModal').modal('show');
              mapDoorCanvassing()
            },
            async: false
          });
        });

        $(document).on('click','.delete-pin',function (e){
            var id=$(this).attr('id')
            Swal.fire({
                title: "Are you sure?",
                text: "You will not be able to recover this location!",
                type: "warning",
                buttons: true,
                confirmButtonColor: "#ff5e5e",
                confirmButtonText: "Yes, delete it!",
                closeOnConfirm: false,
                dangerMode: true,
                showCancelButton: true
            })
                .then((deleteThis) => {
                    if (deleteThis.isConfirmed) {
                        $.ajax({
                            url: '/map/delete/pin/'+id,
                            type: "GET",
                            dataType: "JSON",
                            success: function (response) {

                                if (response["status"] == "fail") {
                                    Swal.fire("Failed!", "Failed to delete location.", "error");
                                } else if (response["status"] == "success") {
                                    Swal.fire("Deleted!", "Location has been deleted.",
                                        "success");
                                    refreshMap()
                                }
                            },
                            error: function (error) {
                                console.log(error);
                            },
                            async: false
                        });
                    } else {
                        Swal.close();
                    }
                });
        });

        $("#updatemap-location").on('submit', (function (e) {

            var form_data = new FormData(this);

            var latitude=$("#edit_latitude").val();
            var longitude=$("#edit_longitude").val();
            var location_name=$("#edit_location_name").val();


            form_data.append("latitude", latitude);
            form_data.append("longitude", longitude);
            form_data.append("location_name", location_name);


            e.preventDefault();
            $.ajax({
                url: "/api/map/updatelocation",
                type: "post",
                data: form_data,
                dataType: "JSON",
                processData: false,
                contentType: false,
                cache: false,
                beforeSend: function () {
                    $("#btnSubmit").attr('disabled', true);
                    $(".fa-spin").css('display', 'inline-block');
                },
                complete: function () {
                    $("#btnSubmit").attr('disabled', false);
                    $(".fa-spin").css('display', 'none');
                },
                success: function (response) {
                    if (response["status"] == "fail") {
                        toastr.error('Not Found', response["msg"])
                    } else if (response["status"] == "success") {
                        toastr.success('Found', response["msg"])

                       $('#updatelocationModal').modal('hide');
                       refreshMap()
                    }
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }));

        $("#editfollower").on('submit', (function (e) {
            e.preventDefault();
            var form_data = new FormData(this);
            var latitude=$("#editfollower_latitude").val();
            var longitude=$("#editfollower_longitude").val();
            var address=$("#editfollower_address").val();
            form_data.append("latitude", latitude);
            form_data.append("longitude", longitude);
            form_data.append("address", address);

            $.ajax({
                url: "/api/follower/update",
                type: "post",
                data: form_data,
                dataType: "JSON",
                processData: false,
                contentType: false,
                cache: false,
                beforeSend: function () {
                    $("#btnSubmit").attr('disabled', true);
                    $(".fa-spin").css('display', 'inline-block');
                },
                complete: function () {
                    $("#btnSubmit").attr('disabled', false);
                    $(".fa-spin").css('display', 'none');
                },
                success: function (response) {
                    if (response["status"] == "fail") {
                        toastr.error('Not Found', response["msg"])
                    } else if (response["status"] == "success") {
                        toastr.success('Found', response["msg"])
                        $('#addfollower')["0"].reset()
                        $('#updatefollowerModal').modal('hide');
                        mapDoorCanvassing()
                    }
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }));




        $(document).on('click','.link2',function(e){
            var current = $(this)
            $('.link2').each(function(e){
                $(this).removeClass('bg-primary text-white shadow-lg active');
            })
            current.addClass('bg-primary text-white shadow-lg active')
        })


        // Functions
        function hideAll() {
            $.each(forms, (i, v) => {
                $("#" + v).hide()
            })
        }

        function refreshMap(){
            current = ""
            $('.link2').each(function(e){
                if($(this).hasClass('bg-primary text-white shadow-lg active')){
                    current = $(this)
                }
            })

            if(current != ""){
                var currentId = current.attr('id')
                if(currentId == "sign-location"){
                    mapLocation()
                }

                if(currentId == "door-canvassing"){
                    mapDoorCanvassing()
                }



                if(currentId == "QR-Code"){
                    qrcodehits()
                }

                if(currentId == "pin-vehicle"){
                    mapVehicle()
                }
            }

            mapanalytics()
        }

        function RemoveExistingMap() {
            map.eachLayer((layer) => {
                layer.remove();
            });
            map.invalidateSize()
        }

        function mapLocation(){
            initMap3()
            // add a marker in the given location, attach some popup content to it and open the popup

            $.ajax({
                url: "/api/map/get/pins",
                type: "post",
                data: {pin_type : "sign_location"},
                dataType: "JSON",
                success: function (response) {

                    if (response["status"] == "fail") {
                        toastr.error('Not Found', response["msg"])
                    } else if (response["status"] == "success") {
                       $.each(response["data"],(i,v)=>{


                            var  marker = new google.maps.Marker({
                            position: {lat: parseFloat(v.latitude),lng:  parseFloat(v.longitude)},
                            map: map,
                            title: v.location_name
                        });

                        mapMarkers.push(marker)

                        var content = "<h4>Pin Details</h4><br>"+v.location_name + "<br><p>Notes: <i>"+(v.notes == '' ? '' : v.notes)+"</i></p> <i class='far fa-edit p-2 edit-pin' id='"+v.id+"' latitude='"+v.latitude+"' longitude='"+v.longitude+"'  data-bs-target='#updatelocationModal' data-bs-toggle='modal'> </i>  "+ "<i class='fas fa-trash p-2 delete-pin' id='"+v.id+"' latitude='"+v.latitude+"' longitude='"+v.longitude+"' > </i>";
                        const infoWindow = new google.maps.InfoWindow({
                            content: content
                        });

                        marker.addListener("click",() => {
                            if(prevInfoWindow){
                                prevInfoWindow.close()
                            }

                            prevInfoWindow = infoWindow

                            infoWindow.open({
                                anchor: marker,map,shouldFocus: false,
                            })
                        });

                       })
                    }
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }


        function qrcodehits(){
            initMap3()
           $.ajax({
                url: "/api/map/get/pins",
                type: "post",
                data: {pin_type : "action_center"},
                dataType: "JSON",
                success: function (response) {
                    if (response["status"] == "fail") {
                        toastr.error('Not Found', response["msg"])
                    } else if (response["status"] == "success") {
                       $.each(response["data"],(i,v)=>{

                            var  marker = new google.maps.Marker({
                            position: {lat: parseFloat(v.latitude),lng:  parseFloat(v.longitude)},
                            map: map,
                            title: v.location_name
                        });

                        mapMarkers.push(marker)

                        var content = "<h4>Pin Details</h4><br>"+v.location_name + "<br><p>Notes: <i>"+(v.notes == '' ? '' : v.notes)+"</i></p> <i class='far fa-edit p-2 edit-pin' id='"+v.id+"' latitude='"+v.latitude+"' longitude='"+v.longitude+"'  data-bs-target='#updatelocationModal' data-bs-toggle='modal'> </i>  "+ "<i class='fas fa-trash p-2 delete-pin' id='"+v.id+"' latitude='"+v.latitude+"' longitude='"+v.longitude+"' > </i>";
                        const infoWindow = new google.maps.InfoWindow({
                            content: content
                        });

                        marker.addListener("click",() => {
                            if(prevInfoWindow){
                                prevInfoWindow.close()
                            }

                            prevInfoWindow = infoWindow

                            infoWindow.open({
                                anchor: marker,map,shouldFocus: false,
                            })
                        });
                       })
                    }
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }

        function mapVehicle(){
            initMap3()
            $.ajax({
                url: "/api/map/get/pins",
                type: "post",
                data: {pin_type : "vehicle"},
                dataType: "JSON",
                success: function (response) {
                    if (response["status"] == "fail") {
                        toastr.error('Not Found', response["msg"])
                    } else if (response["status"] == "success") {
                       $.each(response["data"],(i,v)=>{



                        mapMarkers.push(marker)

                                var  marker = new google.maps.Marker({
                            position: {lat: parseFloat(v.latitude),lng:  parseFloat(v.longitude)},
                            map: map,
                            title: v.location_name,
                            color: '#000000',
                            icon: {
                                url: 'https://img.icons8.com/ios-glyphs/30/000000/car--v1.png'
                            }
                        });

                        // var  marker = new google.maps.Marker({
                        //     position: {lat: parseFloat(userLat),lng:  parseFloat(userLng)},
                        //     map: map,

                        //     color: '#000000',
                        //     icon: {
                        //         url: 'https://img.icons8.com/ios-glyphs/30/000000/car--v1.png'
                        //     }
                        // });

                        mapMarkers.push(marker)

                        var content = "<h4>Pin Details</h4><br>"+v.location_name + "<br><p>Notes: <i>"+(v.notes == '' ? '' : v.notes)+"</i></p> <i class='far fa-edit p-2 edit-pin' id='"+v.id+"' latitude='"+v.latitude+"' longitude='"+v.longitude+"'  data-bs-target='#updatelocationModal' data-bs-toggle='modal'> </i>  "+ "<i class='fas fa-trash p-2 delete-pin' id='"+v.id+"' latitude='"+v.latitude+"' longitude='"+v.longitude+"' > </i>";
                        const infoWindow = new google.maps.InfoWindow({
                            content: content
                        });

                        marker.addListener("click",() => {
                            if(prevInfoWindow){
                                prevInfoWindow.close()
                            }

                            prevInfoWindow = infoWindow

                            infoWindow.open({
                                anchor: marker,map,shouldFocus: false,
                            })
                        });
                       })
                    }
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }

        mapanalytics()

        function mapanalytics(){
            $.ajax({
                url: "/api/map/analytics",
                type: "get",
                dataType: "JSON",
                success: function (response) {

                    $(".count-sign-locations").html(response.data.count_sign_locations)
                    $(".count-door-canvasing").html(response.data.count_door_canvasing)
                    $(".count-pinned-vehicles").html(response.data.count_pinned_vehicles)
                    $(".count-qr-hits").html(response.data.count_qr_hits)
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }



        function mapDoorCanvassing(){
            initMap3()
            // $.each(mapMarkers,(i,v)=>{
            //     v.setMap(null)
            // })
            mapMarkers = []

            // Create the DIV to hold the control and call the CenterControl()
              // constructor passing in this DIV.
              const centerControlDiv = document.createElement("div");

              CenterControl(centerControlDiv, map);
              map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);


            $.ajax({
                url: "/api/map/get/pins",
                type: "post",
                data: {pin_type : "door-canvassing"},
                dataType: "JSON",
                success: function (response) {
                  console.log(response)
                    if (response["status"] == "fail") {
                        toastr.error('Not Found', response["msg"])
                    } else if (response["status"] == "success") {
                       $.each(response["data"],(i,v)=>{

                        // notes = v.follower_id == 0 ? v.notes ?
                        color = 'red';
                        if(v.supporter==0)
                        {
                             color = 'red';
                        }
                        else if(v.supporter==1)
                        {
                             color = 'orange';
                        }
                         else if(v.supporter==2)
                        {
                             color = 'green';
                        }

                        var  marker = new google.maps.Marker({
                            position: {lat: parseFloat(v.latitude),lng:  parseFloat(v.longitude)},
                            map: map,

                            icon: {
                                url: 'https://maps.google.com/mapfiles/ms/icons/'+color+'-dot.png'
                            },
                        });

                        mapMarkers.push(marker)

                        var content = "<h4>Pin Details</h4><br>"+v.location_name + "<br><p>Notes: <i>"+(v.notes ? v.notes : '')+"</i></p>"+(v.follower_id == 0 ? '' : followerHTMl(v.follower))+" <i class='far fa-edit p-2 "+(v.follower_id == 0 ? "edit-pin" : "pin-edit")+"' id='"+(v.follower_id == 0 ? v.id : v.follower_id)+"'  latitude='"+v.latitude+"' longitude='"+v.longitude+"'  data-bs-target='"+(v.follower_id == 0 ? "#updatelocationModal" : "#updatefollowerModal")+"' data-bs-toggle='modal'> </i>  "+ "<i class='fas fa-trash p-2 delete-pin' id='"+v.id+"' latitude='"+v.latitude+"' longitude='"+v.longitude+"' > </i>";

                        const infoWindow = new google.maps.InfoWindow({
                            content: content
                        });

                        marker.addListener("click",() => {

                            if(prevInfoWindow){
                                prevInfoWindow.close()
                            }

                            prevInfoWindow = infoWindow

                            infoWindow.open({
                                anchor: marker,map,shouldFocus: false,
                            })
                        });

                       })

                    }
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }

        function followerHTMl(follower){
            var html = ''
            if(follower == '' || follower == null)
            {

            }else{
            html += '<h6>'+follower.first_name+" "+follower.last_name+'</h6>';
            html += '<br>';
            html += '<p><b>Email:&nbsp;&nbsp;</b>'+follower.email+'<br><b>Phone:&nbsp;&nbsp;</b>'+follower.phone+'<br><b>Home:&nbsp;&nbsp;</b>'+follower.home_phone+'<br><b>Notes:&nbsp;&nbsp;</b>'+follower.notes+'</p>';
            }
            return html;
        }

        function CenterControl(controlDiv, map) {
          // Set CSS for the control border.
          const controlUI = document.createElement("div");
          controlUI.setAttribute("id","btn-add-door-canvassing");

          controlUI.style.backgroundColor = "#fff";
          controlUI.style.border = "2px solid #fff";
          controlUI.style.borderRadius = "3px";
          controlUI.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
          controlUI.style.cursor = "pointer";
          controlUI.style.marginTop = "8px";
          controlUI.style.marginBottom = "22px";
          controlUI.style.textAlign = "center";
          controlUI.title = "Click to recenter the map";
          controlDiv.appendChild(controlUI);

          // Set CSS for the control interior.
          const controlText = document.createElement("div");

          controlText.style.color = "rgb(25,25,25)";
          controlText.style.fontFamily = "Roboto,Arial,sans-serif";
          controlText.style.fontSize = "16px";
          controlText.style.lineHeight = "38px";
          controlText.style.paddingLeft = "5px";
          controlText.style.paddingRight = "5px";
          controlText.innerHTML = "Add Follower";
          controlUI.appendChild(controlText);
          // Setup the click event listeners: simply set the map to Chicago.
          controlUI.addEventListener("click", () => {
            map.setCenter(chicago);
          });
        }

        $(document).on('click','#btn-add-door-canvassing',function(e){
            $("#btn-add-door-canvassing").hide()
            var  marker = new google.maps.Marker({
                position: {lat: parseFloat(userLat),lng:  parseFloat(userLng)},
                map: map,
                draggable: true,
                color: '#000000',
                icon: {
                    url: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png'
                }
            });

            mapMarkers.push(marker)

            var userLocName = ""

            google.maps.event.addListener(marker,'dblclick',function(event){
                console.log(event)
                userLat = event.latLng.lat()
                userLng = event.latLng.lng()
                console.log(userLat, userLng);
                $('#addfollowerModal').modal('show');

                $.ajax({
                    url: "https://maps.googleapis.com/maps/api/geocode/json?latlng="+userLat+","+userLng+"&sensor=true&key=AIzaSyDLgkbCBN1poChfbWCl7i3yIK_mFI8ORyU",
                    type: "get",
                    dataType: "JSON",
                    success: function (response) {

                        userLocName = response.results[0].formatted_address
                        console.log(userLocName)
                        $("#followeraddress").val(userLocName)
                        $("#followerlatitude").val(userLat)
                        $("#followerlongitude").val(userLng)
                    },
                    error: function (error) {
                        console.log(error);
                    },
                    async: false
                });
            })



        })
    })

    // Add Goolge Map
    var map, infoWindow;
    var geocoder;

    function initMap() {
        geocoder = new google.maps.Geocoder();
        map = new google.maps.Map(document.getElementById('mapCanvas'), {
            center: {lat: -34.397, lng: 150.644},
            zoom: 14
        });

        infoWindow = new google.maps.InfoWindow;
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };

                var marker = new google.maps.Marker({
                    position: pos,
                    map: map,
                    draggable: true,
                    title: 'Your position'
                });

                map.setCenter(pos);


                updateMarkerPosition(marker.getPosition());
                geocodePosition(pos);

                // Add dragging event listeners.
                google.maps.event.addListener(marker, 'dragstart', function() {
                    updateMarkerAddress('Dragging...');
                });

                google.maps.event.addListener(marker, 'drag', function() {
                    updateMarkerStatus('Dragging...');
                    updateMarkerPosition(marker.getPosition());
                });

                google.maps.event.addListener(marker, 'dragend', function() {
                    updateMarkerStatus('Drag ended');
                    geocodePosition(marker.getPosition());
                    map.panTo(marker.getPosition());
                });

                google.maps.event.addListener(map, 'click', function(e) {
                    updateMarkerPosition(e.latLng);
                    geocodePosition(marker.getPosition());
                    marker.setPosition(e.latLng);
                    map.panTo(marker.getPosition());
                });

            }, function() {
                handleLocationError(true, infoWindow, map.getCenter());
            });
        } else {
            // Browser doesn't support Geolocation
            handleLocationError(false, infoWindow, map.getCenter());
        }
    }

    function geocodePosition(pos) {
        geocoder.geocode({
            latLng: pos
        }, function(responses) {
            if (responses && responses.length > 0) {
            updateMarkerAddress(responses[0].formatted_address);
            } else {
            updateMarkerAddress('Cannot determine address at this location.');
            }
        });
    }

    function updateMarkerStatus(str) {
        document.getElementById('markerStatus').innerHTML = str;
    }

    function updateMarkerPosition(latLng) {
        $("#latitude").val(latLng.lat());
        $("#longitude").val(latLng.lng());
    }

    function updateMarkerAddress(str) {
        $("#address").val(str);
    }

    function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
                            'Error: The Geolocation service failed.' :
                            'Error: Your browser doesn\'t support geolocation.');
        infoWindow.open(map);
    }
    window.onload = function(e)
    {
        @if(isset($qr) && !empty($qr) )
            document.getElementById("QR-Code").click();
        @endif
    }

</script>
@endsection