@extends('action-center.layout')

@section('action_center_title')
    Follow
@endsection

@section('action_center_css')
<style>
    .action-cont-wrap{
        margin-bottom:0px !important;
    }
</style>
@endsection

@section('action_center_content')

        <div class="row">
            <div class="col-lg-9">
                <div class="form-wrap-question">
                <h3><a href="#" class="bck-link"><img src="../images/back.svg" alt="back"></a> Follow me</h3>
                    <form>
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="mb-3">
                                <label for="fname" class="form-label">first name</label>
                                <input type="text" class="form-control" id="fname" placeholder="John">
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="mb-3">
                                <label for="lname" class="form-label">last name</label>
                                <input type="text" class="form-control" id="lname" placeholder="Wick">
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="mb-3">
                                <label for="emailadd" class="form-label">Email address</label>
                                <input type="email" class="form-control" id="emailadd" aria-describedby="emailHelp" placeholder="john@john.com">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="mb-3">
                                <label for="ph" class="form-label">cell number</label>
                                <input type="tel" class="form-control" id="ph" placeholder="(780) 201 2166">
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="mb-3">
                                <label for="zip" class="form-label">ZIP / postal</label>
                                <input type="text" class="form-control" id="zip" placeholder="T9M1K9">
                            </div>
                        </div>
                        <div class="col-lg-4">

                        </div>
                    </div>

                    <div class="row">
                    <div class="col-lg-12 text-end">
                    <button type="submit" class="btn btn-prim">follow me</button>
                    </div>
                    </div>
                    </form>
            </div>
            </div>
            <div class="col-lg-3">
                <div class="main-actions-wrap actoin-wrap-question">
                    <h3 class="trigger">common questions</h3>
                    <div class="main-wrap-actions">
                    <div class="actoin-wrap-mob">
                    <div class="row">
                        <div class="col-12">
                            <h3 class="mob-ver">more actions</h3></div>
                        <div class="col-lg-12">
                            <div class="action-link-wrap">
                                <a href="#"><span class="icon-wrap"><img src="../images/order.svg" alt="donate"></span> <i>order a campaign yard sign</i></a>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="action-link-wrap">
                                <a href="#"><span class="icon-wrap"><img src="../images/call.svg" alt="follow"></span> <i>request a phone call</i></a>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="action-link-wrap">
                                <a href="#"><span class="icon-wrap"><img src="../images/meet.svg" alt="question"></span> <i>request a face to face</i></a>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="action-link-wrap">
                                <a href="#"><span class="icon-wrap"><img src="../images/event.svg" alt="volunteer"></span> <i>request candidate to speak at an event</i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                </div>
            </div>
        </div>

        @endsection

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

    <script>
        // Additional code for adding placeholder in search box of select2
        (window.jQuery);
        $(function() {
            'use strict'

            // Input Masks
            $('.phone_number').mask('(+1) 999-999-9999');
            // Filebrowser

        });

        //store follower
        $("#follower_save").on('submit', (function(e) {
            e.preventDefault();
            $.ajax({

                url: "/action/center/storeform",
                type: "POST",
                data: new FormData(this),
                dataType: "JSON",
                processData: false,
                contentType: false,
                cache: false,
                beforeSend: function() {
                    $("#btnSubmit").attr('disabled', true);
                    $(".fa-spin").removeClass('d-none');
                },
                complete: function() {
                    $("#btnSubmit").attr('disabled', false);
                    $(".fa-spin").addClass('d-none');
                },
                success: function(response) {

                    if (response.status == "fail") {
                        toastr.error('Failed', response.msg);
                    } else if (response.status == "success") {
                        $("#follower_save").addClass('d-none');
                        $("#follow_finish").removeClass('d-none');
                        toastr.success('Success', response.msg);
                    }

                },

                error: function(error) {

                    console.log(error);

                }

            });

        }));

        var map;

        function initMap() {
            var centerCoordinates = new google.maps.LatLng(37.6, -95.665);
            var defaultOptions = {
                center: centerCoordinates,
                zoom: 4
            }

            map = new google.maps.Map(mapLayer, defaultOptions);
        }

        locate()

        function locate() {
            if ("geolocation" in navigator) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var currentLatitude = position.coords.latitude;
                    var currentLongitude = position.coords.longitude;

                    var infoWindowHTML = "Latitude: " + currentLatitude + "<br>Longitude: " + currentLongitude;
                    var infoWindow = new google.maps.InfoWindow({
                        map: map,
                        content: infoWindowHTML
                    });
                    var currentLocation = {
                        lat: currentLatitude,
                        lng: currentLongitude
                    };
                    console.log(currentLatitude)
                    $('.latitude').val(currentLatitude);
                    $('.longitude').val(currentLongitude);
                    infoWindow.setPosition(currentLocation);
                });
            }
        }
    </script>
@endsection