@extends('frontend.layouts.landing')

@section('title', $data['page']->meta_title)
@section('meta_keywords', $data['page']->meta_keywords)
@section('meta_description', $data['page']->meta_description)

@section('content')
    <style>
        body {
            background-color: #000000 !important;
        }
        #slideshow {
            position:relative;
            height:20px;
            z-index:-1;
            opacity: 0.2;
        }

        #slideshow IMG {
            position:absolute;
            top:0;
            left:0;
            z-index:8;
            opacity:0.0;
        }

        #slideshow IMG.active {
            z-index:10;
            opacity:1.0;
        }

        #slideshow IMG.last-active {
            z-index:9;
        }

        #slideshow img {
            /* Set rules to fill background */
            min-height: 100%;
            min-width: 1024px;

            /* Set up proportionate scaling */
            width: 100%;
            height: auto;

            /* Set up positioning */
            position: fixed;
            top: 0;
            left: 0;
        }

        @media screen and (max-width: 1024px){
            img.bg {
                left: 50%;
                margin-left: -512px;
            }
        }
    </style>
    <div class="cart_area cart-area-padding pt--35">
        <div class="container content-height">

            <div class="row">
                <div class="header page-section-title mb-0" style="left: 0; right:0px;  margin: 0 auto;">
                    <img src="vsi/image/request-session-header.jpg" class="img-responsive" alt="Virtual Consultant Available">
                </div>
                <div class="col-8 offset-2 page-content" style="background-color: #3477BC; color:#FFFFFF;">

                    <div class="row">
                        <div class="col-md-8 pt--25">

                            @include('includes.partials.messages')
                            {!! Form::open(array('method' => 'POST', 'id' => 'frm_request_session')) !!}

                            <div class="row">

                                <div class="col-md-12 col-12 mb--20">
                                    {!! Form::label('email', 'Email Address:') !!}
                                    {!! Form::text('email', null, ['type' => 'email', 'required' => 'required', 'class' => 'form-control', 'placeholder' => 'Enter email address ...', 'id' => 'sp_email']) !!}
                                </div>

                                <div class="col-md-6 col-12 mb--20">
                                    {!! Form::label('first_name', 'First Name:') !!}  
                                    {!! Form::text('first_name', null,['class'=>'form-control', 'required' => 'required', 'placeholder'=>'Enter first name ...']) !!}
                                </div>

                                <div class="col-md-6 col-12 mb--20">
                                    {!! Form::label('last_name', 'Last Name:') !!} 
                                    {!! Form::text('last_name', null,['class'=>'form-control', 'required' => 'required', 'placeholder'=>'Enter last name ...']) !!}
                                </div>

                                <div class="col-md-6 col-12 mb--20">
                                    {!! Form::label('company', 'Company:') !!} <em>(Optional)</em>
                                    {!! Form::text('company', null,['class'=>'form-control', 'placeholder'=>'Enter company name ...']) !!}
                                </div>

                                <div class="col-md-6 col-12 mb--20">
                                    {!! Form::label('phone', 'Phone:') !!} 
                                    {!! Form::text('phone', null,['class'=>'form-control', 'required' => 'required', 'placeholder'=>'Enter phone ...']) !!}
                                </div>

                                <div class="col-md-6 col-12 mb--20">
                                    {!! Form::label('city', 'City:') !!} <em>(Optional)</em>
                                    {!! Form::text('city', null,['class'=>'form-control', 'placeholder'=>'Enter city ...']) !!}
                                </div>

                                <div class="col-md-6 col-12 mb--20">
                                    {!! Form::label('zip', 'Zip / Post Code:') !!} <em>(Optional)</em>
                                    {!! Form::text('zip', null,['class'=>'form-control', 'placeholder'=>'Enter zip / post code ...']) !!}
                                </div>

                                <div class="col-md-12 col-12 mb--20">
                                    {!! Form::label('product', 'Product You Are Interested In:') !!} <em>(Optional)</em>
                                    {!! Form::text('product', null,['class'=>'form-control', 'placeholder'=>'Product You Are Interested In ...']) !!}
                                </div>

                                <div class="col-md-6 col-12 mb--20">
                                    {!! Form::label('role', 'Your Role:') !!} 
                                    {!! Form::select('role',
                                    ['Veterinarian' => 'Veterinarian', 'Dentist' => 'Dentist', 'Technician' => 'Technician', 'Office Manager' => 'Office Manager', 'Clinic Owner' => 'Clinic Owner', 'Associated with Hospital' => 'Associated with Hospital', 'Other' => 'Other']
                                    ,null
                                    ,['class'=>'form-control', 'required' => 'required', 'placeholder'=>'Please Select ...']) !!}
                                </div>

                                <div class="col-md-6 col-12 mb--20">
                                    {!! Form::label('time_to_call', 'Best Time to Call You:') !!} 
                                    {!! Form::select('time_to_call',
                                    ['Morning' => 'Morning', 'Afternoon' => 'Afternoon', 'Evening' => 'Evening']
                                    ,null
                                    ,['class'=>'form-control', 'required' => 'required', 'placeholder'=>'Please Select ...']) !!}
                                </div>

                                <div class="col-md-12 col-12 mb--20">
                                    {!! Form::label('comments', 'Additional Comments:') !!} <em>(Optional)</em>
                                    {!! Form::textarea('comments', null,['class'=>'form-control', 'placeholder'=>'Additional Comments ...', 'rows' => '4']) !!}
                                </div>

                                <div class="col-md-12 col-12 mb--20">
                                    <div class="recaptcha">
                                        <div class="g-recaptcha" data-sitekey="6LfcLOIUAAAAALCab8T2PSUyLVSqwa0sPfpSqLHM"></div>
                                    </div>
                                </div>

                                <div class="col-md-12 col-12 mb--20">
                                    <button type="submit" class="btn-blue">Submit</button>
                                </div>

                            </div>

                            {!! Form::close() !!}
                        </div>
                        <div class="col-md-4 pt--25" style="background-color:#579ee5;">
                            <div class="sidebar-widget">

                                <div class="single-sidebar">

                                    @if($data['zoom']['show_zoom'])
                                        <div class="text-center">
                                            <a href="{{ $data['zoom']['ZOOM_LINK'] }}" target="_blank" title="We Are Live on Zoom Join Now" />
                                            <img src="vsi/image/we-are-live-on-zoom.jpg" alt="We Are Live on Zoom Join Now" class="img-fluid img-thumbnail">
                                            </a>
                                        </div>
                                    @else
                                        <div class="text-center">
                                            <a href="tel:(516) 385 3434" title="Call to Book Live Session"  />
                                                <img src="vsi/image/call-to-book-zoom-session.jpg" alt="Call to Book Live Session" class="img-fluid img-thumbnail">
                                            </a>
                                        </div>
                                    @endif

                                </div>

                                    <div class="single-sidebar">
                                        <h2 class="sidebar-title" style=" color:#FFFFFF; ">SEE OUR RECENT SESSIONS</h2>


                                            <div class="text-center">
                                                <img src="vsi/image/virtual-meeting-1.jpg" class="img-fluid img-thumbnail">
                                                Session with an Expert
                                            </div>
                                            <hr>

                                            <div class="text-center">
                                                <img src="vsi/image/virtual-meeting-2.jpg" class="img-fluid img-thumbnail">
                                                Session with an Expert
                                            </div>
                                            <hr>

                                    </div>

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


                </div>
            </div>
        </div>
    </div>
    <div id="slideshow">
        <img src="vsi/image/live-demo-bg/1.jpg" class="active" />
        <img src="vsi/image/live-demo-bg/2.jpg" />
        <img src="vsi/image/live-demo-bg/3.jpg" />
        <img src="vsi/image/live-demo-bg/4.jpg" />
        <img src="vsi/image/live-demo-bg/5.jpg" />
        <img src="vsi/image/live-demo-bg/6.jpg" />
        <img src="vsi/image/live-demo-bg/7.jpg" />
        <img src="vsi/image/live-demo-bg/8.jpg" />
        <img src="vsi/image/live-demo-bg/9.jpg" />
    </div>
    @push('after-scripts')
    <script src="vsi/js/fullscreenr.js"></script>
    <script type="text/javascript">

        function slideSwitch() {
            var $active = $('#slideshow IMG.active');

            if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

            // use this to pull the images in the order they appear in the markup
            var $next =  $active.next().length ? $active.next()
                : $('#slideshow IMG:first');

            $active.addClass('last-active');

            $next.css({opacity: 0.0})
                .addClass('active')
                .animate({opacity: 1.0}, 1000, function() {
                    $active.removeClass('active last-active');
                });
        }

        $(function() {
            setInterval( "slideSwitch()", 5000 );
        });

    </script>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script>
        document.getElementById("frm_request_session").addEventListener("submit",function(evt)
        {

            var response = grecaptcha.getResponse();
            if(response.length == 0)
            {
                //reCaptcha not verified
                alert("Please verify you are human!");
                evt.preventDefault();
                return false;
            }
        });
    </script>
    @endpush

@endsection