@extends('action-center.layout')

@section('action_center_title')
Yard Sign
@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;
        }

        .card_widths {
            margin-top:10px;
            width: 90%;
            margin-left: -88px;
            /* height: 40px; */
            height: 40px;
            box-shadow: none;
            border-radius: 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">Order a Yard Campaign Sign</h5>
                                                                <h6 class="text-center text-muted">Answer all requirements and submit</h6>

                                                                <form id="yard-campaigns">
                                                                    @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="4">

                                                                    <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="address" class="form-label">Address</label>
                                                                                <input type="text" class="form-control" id="address" name="address" placeholder="Address for the yard campaign sign to be placed" required>
                                                                            </div>
                                                                        </div>

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

                                                                        <div class="col-lg-12 col-md-6 col-sm-6 mt-4 mb-4 ml-2">
                                                                            <input type="checkbox" name="" id="" style="margin-bottom: 0px;">
                                                                            By clicking this box, you agree we can place a campaign yard sign  at the street address listed above
                                                                        </div>

                                                                        <div class="notification-message text-left"
                                                                            style="color: gray;font-size:0.70rem">
                                                                            <p>By providing your email address or mobile phone number you consent to receive
                                                                                recurring Updates email or text messages from
                                                                                <b>{{ ucwords($user->first_name) . ' ' . ucwords($user->last_name) }}</b> .
                                                                                Message frequency will vary. Message & Data Rates May Apply. Text HELP for
                                                                                Info. Text STOP to opt out. <a
                                                                                    href="{{ asset('uploads/terms-and-conditions/terms-and-conditions.docx') }}"
                                                                                    download> <i>Terms & Conditions </i> and <i>Privacy Policy</i></a>
                                                                            </p>
                                                                        </div>

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

                                                                        <div class="col-6 mt-3">
                                                                            <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="yard_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

        });

        $("#yard-campaigns").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) {
                    if (response["status"] == "fail")
                    {
                        toastr.error('Not Found', response["msg"])
                    }
                    else if(response["status"] == "success")
                    {
                        $("#yard-campaigns").addClass('d-none');
                        $("#yard_finish").removeClass('d-none');

                        toastr.success('Found', response["msg"])
                        $("#yard-campaigns")[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