@extends('partials.main')
<!-- page title -->
@section('title')
    Map
@endsection

@section('content')

<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>

@php
    $login_user = auth()->user();
@endphp

<!-- 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


<!-- Add location Modal -->
<div class="modal" id="addlocationModal">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content modal-content-demo">
            <div class="modal-body pd-20 pd-sm-40">
                <button type="button" class="close pos-absolute t-15 r-20 tx-26" data-bs-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="modal-title mg-b-5">Map</h5>
                <p class="mg-b-20">Drag and drop pin to select the required location.</p>
                <form id="map-location"  class='mt-3'>
                    @csrf
                    <div class="form-group">
                        <!-- map -->

                        <div class="ht-300" id="mapCanvas"></div>
                    </div><!-- form-group -->
                    <span id="markerStatus"></span>
                    <div class="form-group">
                        <input type="text" class="form-control" id="address" value="" name='location_name'  readonly>
                    </div><!-- form-group -->

                    <div class="form-group">
                        <div class="row">
                            <div class="col-lg-6">
                                <input type="text" class="form-control" id="latitude" value="" name='latitude'  readonly>
                            </div>
                            <div class="col-lg-6">
                            <input type="text" class="form-control" id="longitude" name='longitude'  readonly>

                            </div>
                        </div>

                    </div><!-- form-group -->
                    <div class="form-group">
                        <select name="pin_type" id="" class="form-control" required>
                            <option value="" selected disabled>--Please select type--</option>
                            <option value="sign_location">Pin sign location</option>
                            <option value="door-canvassing">Pin door canvassing</option>
                            <option value="vehicle">Pin your vehicle</option>
                        </select>
                    </div><!-- form-group -->
                    <div class="form-group">
                        <textarea cols="30" rows="2" class="form-control" name='notes' placeholder="Add note" ></textarea>
                    </div>

                    <button class="btn btn-info modalb btn-block " id="door-canvassing"> <i class="fa fa-spinner fa-spin"
                                    style="display:none;"></i> Submit Location</button>
                </form>
            </div><!-- modal-body -->
        </div>
    </div>
</div><!-- modal -->

<div class="modal" id="addfollowerModal">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content modal-content-demo">
            <div class="modal-body pd-20 pd-sm-40">
                <button type="button" class="close pos-absolute t-15 r-20 tx-26" data-bs-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="modal-title mg-b-5">Add Follower</h5>
                <form id="addfollower"  class='mt-3'>
                    @csrf

                    <div class="form-group">
                        <input type="text" class="form-control" id="followeraddress" value="" name='address'  readonly>
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <div class="col-lg-6">
                                <input type="text" class="form-control" id="followerlatitude" value="" name='latitude'  readonly>
                            </div>
                            <div class="col-lg-6">
                            <input type="text" class="form-control" id="followerlongitude" value="" name='longitude'  readonly>

                            </div>
                        </div>

                    </div>




                            <div class="form-group">
                                <input type="text" class="form-control" name='first_name' required placeholder="Enter first name"
                                    required>
                            </div><!-- form-group -->
                            <div class="form-group">
                                <input type="text" class="form-control" name='last_name' required placeholder="Enter last name"
                                    required>
                            </div><!-- form-group -->
                            <div class="form-group">
                                <input type="email" class="form-control" name='email' required placeholder="Enter email address"
                                    required>
                            </div><!-- form-group -->
                            <div class="form-group">
                                <input type="number" class="form-control" name='phone'required placeholder="Enter phone number"
                                    required>
                            </div>
                            <div class="form-group">
                                <input type="number" class="form-control" name='home_phone' placeholder="Enter Home phone number"
                                    >
                            </div>

                            <div class="row">
                                                         <div class="col-md-6">
                             <label for="support">Visit time</label>
                            <div class="form-group">
                                <input type="time" class="form-control" value="{{$time}}" name='visit_time'required placeholder="Enter Home phone number"
                                    required>
                            </div>
                            </div>
                             <div class="col-md-6">
                             <label for="support">Visit Date</label>
                                                         <div class="form-group">
                                <input type="date" class="form-control" name='visit_date' value="{{$date}}" required placeholder="Enter Home phone number"
                                    required>
                            </div>
                            </div>
                            </div>

                            <div class="form-group">
                                <label for="support">Notes</label><br>
                                <textarea  class="form-control" name='notes' placeholder="Enter notes"
                                    ></textarea>
                            </div>
                            <div class="form-group">
                                <label for="support">Are they a supporter?</label><br>
                                <input type="radio" name="supporter" value="2" required> Yes
                                <input type="radio" name="supporter" value="1" required> No
                                <input type="radio" name="supporter" value="0" required> Undecided

                            </div>


                    <button class="btn modalb btn-block " id="door-canvassing"> <i class="fa fa-spinner fa-spin"
                                    style="display:none;"></i> Add Follower</button>
                </form>
            </div><!-- modal-body -->
        </div>
    </div>
</div>

<div class="modal" id="updatefollowerModal">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content modal-content-demo">
            <div class="modal-body pd-20 pd-sm-40">
                <button type="button" class="close pos-absolute t-15 r-20 tx-26" data-bs-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="modal-title mg-b-5">Update Follower</h5>
                <form id="editfollower"  class='mt-3'>


                    <input type="hidden" name="id" id="editfollower_id">

                    <div class="form-group">
                        <input type="text" class="form-control" id="editfollower_address" value="" name='address'  readonly>
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <div class="col-lg-6">
                                <input type="text" class="form-control" id="editfollower_latitude" value="" name='latitude'  readonly>
                            </div>
                            <div class="col-lg-6">
                            <input type="text" class="form-control" id="editfollower_longitude" value="" name='longitude'  readonly>

                            </div>
                        </div>

                    </div>




                            <div class="form-group">
                                <input type="text" class="form-control" id="editfollower_first_name" name='first_name' required placeholder="Enter first name"
                                    required>
                            </div><!-- form-group -->
                            <div class="form-group">
                                <input type="text" class="form-control"   id="editfollower_last_name" name='last_name' required placeholder="Enter last name"
                                    required>
                            </div><!-- form-group -->
                            <div class="form-group">
                                <input type="email" class="form-control email"  id="editfollower_email" name='email' required placeholder="Enter email address"
                                    required>
                            </div><!-- form-group -->
                            <div class="form-group">
                                <input type="number" class="form-control phone"  id="editfollower_phone" name='phone'required placeholder="Enter phone number"
                                    required>
                            </div>
                            <div class="form-group">
                                <input type="number" class="form-control home_phone"  id="editfollower_home_phone" name='home_phone'required placeholder="Enter Home phone number"
                                    required>
                            </div>



                            <div class="form-group">
                                <label for="support">Notes</label><br>
                                <textarea type="date" class="form-control "  id="editfollower_notes" name='notes'required placeholder="Enter notes"
                                    required></textarea>
                            </div>
                            <div class="form-group supporter">
                                <label for="support">Are they a supporter?</label><br>
                                <input type="radio" class="supporter2" name="supporter" value="2" required> Yes
                                <input type="radio" class="supporter1" name="supporter" value="1" > No
                                <input type="radio" class="supporter0" name="supporter" value="0"> Undecided

                            </div>


                    <button class="btn modalb btn-block " id="door-canvassing"> <i class="fa fa-spinner fa-spin"
                                    style="display:none;"></i> Update Follower</button>
                </form>
            </div><!-- modal-body -->
        </div>
    </div>
</div>








<!-- Modal for edit -->
<div class="modal" id="updatelocationModal">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content modal-content-demo">
            <div class="modal-body pd-20 pd-sm-40">
                <button type="button" class="close pos-absolute t-15 r-20 tx-26" data-bs-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="modal-title mg-b-5">Map</h5>
                <p class="mg-b-20">Drag and drop pin to select the required location.</p>
                <form id="updatemap-location"  class='mt-3'>
                    @csrf
                    <input type="hidden" name="id" id="id">
                    <div class="form-group">
                        <!-- map -->
                        <div class="ht-300" id="mapCanvasEdit"></div>
                    </div><!-- form-group -->

                    <span id="markerStatusEdit"></span>
                    <div class="form-group">
                        <input type="text" class="form-control location_name" id="edit_location_name" value="" name='location_name'  readonly>
                    </div><!-- form-group -->


                    <div class="form-group">
                        <div class="row">
                            <div class="col-lg-6">
                                <input type="text" class="form-control latitude" id="edit_latitude" value="" name='latitude'  readonly>
                            </div>
                            <div class="col-lg-6">
                            <input type="text" class="form-control longitude" id="edit_longitude" name='longitude'  readonly>

                            </div>
                        </div>

                    </div><!-- form-group -->
                    <div class="form-group">
                        <select name="pin_type" id="edit_pin_type" class="form-control pin_type" required>
                            <option value="" selected disabled>-- Please Select Type --</option>
                            <option value="sign_location">Pin Sign Location</option>
                            <option value="door-canvassing">Pin door canvassing</option>
                            <option value="vehicle">Pin your vehicle</option>
                        </select>
                    </div><!-- form-group -->
                    <div class="form-group">
                        <textarea cols="30" rows="2" class="form-control notes" id="edit_notes" name='notes' placeholder="Add note" ></textarea>
                    </div>

                    <button class="btn modalb btn-block" id="btnSubmit"> <i class="fa fa-spinner fa-spin"
                                    style="display:none;"></i> Update Location</button>
                </form>
            </div><!-- modal-body -->
        </div>
    </div>
</div>
<!-- End Edit Modal -->




<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDLgkbCBN1poChfbWCl7i3yIK_mFI8ORyU&libraries=drawing&v=weekly"
      async
></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/storemap",
                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:'/editlocation/'+id,
            method:'GET',
            success:function(response){
              $('#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:'/editfollowerlocation/'+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: '/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/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/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/get_pins",
                type: "post",
                data: {pin_type : "QR-Code"},
                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/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)=>{

                          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  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);
                }
            });
        }

        mapanalytics()

        function mapanalytics(){
            $.ajax({
                url: "/api/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/get_pins",
                type: "post",
                data: {pin_type : "door-canvassing"},
                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)=>{

                        // 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 = ''
            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
                });
            })



        })
    })





</script>

<!--Add Goolge Map -->
<script>
    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);
    }
</script>
<!-- ./Add Map  End -->


<!-- ./Update Location end -->

<!-- Google Api -->

<!-- Google Api End -->


@endsection