@extends('action-center.layout')

@section('action_center_title')
Follow
@endsection

@section('action_center_css')
    <style>
        @media (min-width: 768px)
        {
            .main-header {
                z-index: 975 !important;
                width: 100% !important;
                left: 0;
                padding-left: 0px !important;
                position: fixed;
            }
        }

        .desktop-logo {
            height: 4rem;
            text-align: center;
            margin: 0 auto;
            justify-content: center;
        }

        .yes_border {
            border: 2px solid rgba(41, 171, 226, 1) !important;
            background: rgba(41, 171, 226, 1) !important;
            color: white !important;
        }

        .yes_border:hover {

            color: white !important;
        }

        .no_border {
            border: 2px solid rgba(41, 171, 226, 1) !important;
            background: rgba(41, 171, 226, 1) !important;
            color: white !important;
        }

        .no_border:hover {

            color: white !important;
        }

        .image_width {
            width: 160px;
            height: 160px;
            object-fit: cover;
            margin-top: 50px;
            border-radius: 10%;
        }

        .card_width {
            width: 57%;
            margin-left: -19px;
            height: 36px;
            box-shadow: none;
        }

        .bio_width {
            width: 57%;
            margin-left: -19px;
            height: auto;
            box-shadow: none;
        }

        .p_width {
            padding: 6px;
        }

    </style>
@endsection

@section('action_center_content')

<div class="page">

    <!-- main-content opened -->
    <div class="main-content horizontal-content main_content_color" id="horizontal-content">
        <!-- container opened -->
        <div class="container">

            <div class=" shadow-none" style="border:none !important">
                <div class="card-body">
                        <div class="row">

                        <div class="col-lg-12" id="complete">
                            <div id="wizard2">
                                <section>

                                    <div class="row">
                                        <div class="col-lg-12 col-md-12 col-sm-6 mb-2 text-start">
                                            <h6 class="h6-whidth">
                                                <a href="{{route('action_center',$qr)}}"
                                                    class="text-dark" style="text-decoration:none;"> <i class="fas fa-arrow-left"></i>
                                                    Back to Action Center </a>
                                            </h6>
                                        </div>
                                    </div>

                                    <div class="payment-sec-wrap" style="margin:10px 0px;">
                                        <div class="row justify-content-center">
                                            <div class="col-xxl-12 col-xl-12 col-lg-12">

                                                <div class="wrap-section-top">
                                                    <div class="row justify-content-between">
                                                        <div class="col-lg-5 col-6">
                                                            <img src="{{ isset($user->images) ? asset('images/product/'.$user->images) : asset('user.png') }}" class="image_width">
                                                            <h5 class="h5_width">{{ucwords($user->first_name)}} {{ucwords($user->last_name)}}</h5>

                                                            <div class="card card_width">
                                                                @if(!empty($position->position_name))
                                                                    <p class="text-muted p_width">{{ucwords($position->position_name)}}</p>
                                                                @endif
                                                            </div>

                                                            <div class="card bio_width mt-3">
                                                                <p class="text-muted p_width">
                                                                    {{$user->bio}}
                                                                </p>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-7 col-6">
                                                            <div class="who-sec">
                                                                <h5 class="text-center mb-0">Follow {{ucwords($user->first_name)}} {{ucwords($user->last_name)}}</h5>
                                                                <p class="text-center mb-0" style="color: rgba(62, 172, 228, 1);">Subscribe to {{ucwords($user->first_name)}} {{ucwords($user->last_name)}} campaign page and receive <br> direct messages and updates on future events</p>
                                                                <h6 class="text-center text-muted">Answer all requirements and submit</h6>

                                                                <form id="follower_save">
                                                                    @csrf
                                                                    <input type="hidden" name="latitude" class="latitude">
                                                                    <input type="hidden" name="longitude" class="longitude">

                                                                    <input type="hidden" name="client_id" value="{{$code}}">
                                                                    <input type="hidden" name="form_id" value="2">

                                                                    <div class="row">
                                                                        <div class="col-lg-6">
                                                                            <div class="mb-3">
                                                                                <label for="first_name" class="form-label">First name</label>
                                                                                <input type="text" class="form-control" id="first_name" name="first_name" placeholder="First name" required>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-lg-6">
                                                                            <div class="mb-3">
                                                                                <label for="last_name" class="form-label">Last name</label>
                                                                                <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last name" required>
                                                                            </div>
                                                                        </div>

                                                                        <div class="col-lg-6">
                                                                            <div class="mb-3">
                                                                                <label for="email"
                                                                                    class="form-label">Email</label>
                                                                                <input type="email" class="form-control"
                                                                                    id="email" name="email"
                                                                                    placeholder="Email" required>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-lg-6">
                                                                            <div class="mb-3">
                                                                                <label for="phone" class="form-label">Cell Number</label>
                                                                                <input type="text" class="form-control phone_number" id="phone" name="phone" placeholder="Cell Number" required>
                                                                            </div>
                                                                        </div>

                                                                        <div class="col-lg-6">
                                                                            <div class="mb-3">
                                                                                <label for="postal_code" class="form-label">Zip/Postal code</label>
                                                                                <input type="text" class="form-control" id="postal_code" name="postal_code" placeholder="Zip/Postal code" required>
                                                                            </div>
                                                                        </div>

                                                                        <div class="col-lg-6">
                                                                        </div>

                                                                        <div class="col-6 text-end">
                                                                            <a href="{{route('action_center',$qr)}}" class="btn btn-prim">
                                                                                Go Back
                                                                            </a>
                                                                        </div>

                                                                        <div class="col-6">
                                                                            <button class="btn btn-prim" id="btnSubmit">
                                                                                <i class="fa fa-spinner fa-spin fa-p text-white d-none"></i>
                                                                                Submit
                                                                            </button>
                                                                        </div>
                                                                    </div>
                                                                </form>


                                                                <div id="follow_finish" class="mt-5 d-none">

                                                                    <h4 class="text-center" style="color: rgba(41, 171, 226, 1);">Thank You!</h4>

                                                                    <div style="text-align: center;">

                                                                        <img src="{{asset('tick.png')}}" class="img-fluid mt-3 mb-3" style="width:80px">

                                                                        <p style="color: rgba(137, 137, 137, 1); " class="text-center">
                                                                            Your request has been submited
                                                                        </p>

                                                                        <p>
                                                                            <a href="{{route('action_center',$qr)}}" style="text-decoration:none;">
                                                                                <i class=" fas fa-arrow-left"></i>  Back to Action Center
                                                                            </a>
                                                                            <br>
                                                                        </p>
                                                                    </div>
                                                                </div>


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

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

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

                    </div>

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

    </div>

    <!-- Footer opened -->
    {{-- @include('partials.footer') --}}
    <!-- Footer closed -->

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