@extends('action-center.layout')

@section('action_center_title')
Speak event
@endsection

@section('action_center_css')
<style>
    .action-cont-wrap{
        margin-bottom:0px !important;
    }
    /* Request Face to Face */
    .form-wrap-question label.lable-time {
        font-style: normal;
        font-weight: 700;
        font-size: 10px;
        line-height: 10px;
        text-transform: uppercase;
        color: #000000;
        margin-bottom: 0;
        position: absolute;
        left: 10px;
        top: 5px;
    }
</style>
@endsection

@section('action_center_content')

<div class="row">
    <div class="col-lg-9">
        <div class="form-wrap-question">
        <h3><a href="{{route('action_center',$qr)}}" class="bck-link"><img src="{{ asset('assets/new-figma-data/action-center-images/back.svg') }}" alt="back"></a> request to be guest speaker</h3>

        <form id="speakEvent_form">
            @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="6">

            <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" name="first_name" placeholder="John" required>
                      </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" name="last_name" placeholder="Wick" required>
                      </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" name="email" aria-describedby="emailHelp" placeholder="john@john.com" required>
                      </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 phone_number" id="ph" name="phone" placeholder="(780) 201 2166" required>
                      </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" name="postal_code" placeholder="T9M1K9" required>
                      </div>
                </div>
                <div class="col-lg-4">
                    <div class="mb-3">
                        <label for="city" class="form-label">Event city</label>
                        <input type="text" class="form-control" id="city" name="city" placeholder="city" required>
                      </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4">
                    <div class="mb-3">
                        <label for="address" class="form-label">Event location</label>
                        <input type="text" class="form-control" id="address" name="address" placeholder="123 main street" required>
                      </div>
                </div>
                <div class="col-lg-4">
                    <div class="mb-3">
                        <label for="mdate" class="form-label">Event Date</label>
                        {{-- <input type="date" class="form-control" name="date_event" id="mdate" required> --}}
                        <input type="date" name="date">
                      </div>
                </div>
                <div class="col-lg-4">
                    <div>
                        <label for="mdate" class="form-label">event time</label>
                    </div>
                    <div class="d-flex row">
                        <div class="col-6">
                            <div class="mb-3" style="position: relative;">
                                <label for="" class="lable-time">From</label>
                                <input type="time" class="form-control pt-3 pb-1" id="mdate" name="time_event_from" placeholder="5:30 PM" required>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3" style="position: relative;">
                                <label for="" class="lable-time">To</label>
                                <input type="time" class="form-control pb-1 pt-3" id="mdate" name="time_event_to" placeholder="6:30 PM" required>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12 text-end" id="btnSubmit">
                    <button type="submit" class="btn btn-prim">
                        <i class="fa fa-spinner fa-spin fa-p text-white d-none"></i> request speak an event
                    </button>
                </div>
            </div>
          </form>

          <div id="speakEvent_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 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="{{ url('action/center/yard/sign', $qr) }}"><span class="icon-wrap"><img src="{{ asset('assets/new-figma-data/action-center-images/order.svg') }}" alt="donate" class="image-logo image-logo-1-3-4"></span> <i>order a campaign yard sign</i></a>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="action-link-wrap">
                        <a href="{{ url('action/center/phone/call', $qr) }}"><span class="icon-wrap"><img src="{{ asset('assets/new-figma-data/action-center-images/call.svg') }}" alt="follow" class="image-logo image-logo-2"></span> <i>request a phone call</i></a>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="action-link-wrap">
                        <a href="{{ url('action/center/face/to/face', $qr) }}"><span class="icon-wrap"><img src="{{ asset('assets/new-figma-data/action-center-images/meet.svg') }}" alt="question" class="image-logo image-logo-1-3-4"></span> <i>request a face to face</i></a>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="action-link-wrap">
                        <a href="{{ url('action/center/speak/event', $qr) }}"><span class="icon-wrap"><img src="{{ asset('assets/new-figma-data/action-center-images/event.svg') }}" alt="volunteer" class="image-logo image-logo-1-3-4"></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>

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

        });

        $("#speakEvent_form").on('submit', (function (e) {
            // alert('asd');
            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) {
                    console.log(response)
                    if (response["status"] == "fail")
                    {
                        toastr.error('Not Found', response["msg"])
                    }
                    else if (response["status"] == "success")
                    {

                        $("#speakEvent_form").addClass('d-none');
                        $("#speakEvent_finish").removeClass('d-none');

                        toastr.success('Found', response["msg"])
                        $("#speakEvent_form")[0].reset();

                    }
                },
                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
                    };
                    $('.latitude').val(currentLatitude);
                    $('.longitude').val(currentLongitude);
                    infoWindow.setPosition(currentLocation);
                });
            }
        }

</script>
@endsection