@extends('front.template.master')

@section('title', 'Contact Us | Unilinkindia')

@section('content')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    {!! NoCaptcha::renderJs() !!}

    <!-- Breadcrumb -->
    <!--<div class="breadcrumb-area" data-bgimage="assets/images/bg/breadcrumb-bg-1.jpg" data-black-overlay="4">-->
    <!--    <div class="container">-->
    <!--        <div class="in-breadcrumb">-->
    <!--            <div class="row align-items-center">-->
    <!--                <div class="col">-->
    <!--                    <ul>-->
    <!--                        <li><a href="{{ route('home') }}">Home</a></li>-->
    <!--                        <li>Contact</li>-->
    <!--                    </ul>-->
    <!--                </div>-->
    <!--                <div class="col">-->
    <!--                    <h6>Contact</h6>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
    <!--</div>-->
    <!--// Breadcrumb -->

    <!-- Page Conttent -->
    <main class="page-content">
        <!-- Contact Area -->
        <div class="contact-area in-section section-padding-lg">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-6">
                        <div class="section-title text-center">
                            <h6>CONTACT US AT ANY TIME</h6>
                            <h2>Contact Us</h2>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <!-- contact-form-warp Start -->
                        <div class="contact-form-warp">
                            @include('admin.partials.flash_message')

                            <form action="{{ route('contactForm') }}" method="post">
                                @csrf

                                <div class="row">
                                    <div class="col-lg-6 col-md-6">
                                        <div class="input-box">
                                            <input name="first_name" placeholder="First Name *" type="text">
                                        </div>
                                    </div>

                                    <div class="col-lg-6 col-md-6">
                                        <div class="input-box">
                                            <input name="last_name" placeholder="Last Name *" type="text">
                                        </div>
                                    </div>

                                    <div class="col-lg-6 col-md-6">
                                        <div class="input-box">
                                            <input name="email" placeholder="Email *" type="email">
                                        </div>
                                    </div>

                                    <div class="col-lg-6 col-md-6">
                                        <div class="input-box">
                                            <input name="contact" placeholder="Phone *" type="text">
                                        </div>
                                    </div>

                                    <div class="col-lg-12">
                                        <div class="input-box">
                                            <textarea name="message" placeholder="Your Message *"></textarea>
                                        </div>
                                    </div>

                                    <div class="col-lg-12">
                                        <div class="input-box">
                                            {!! app('captcha')->display() !!}
                                            @if ($errors->has('g-recaptcha-response'))
                                                <span class="help-block">
                                                    <strong>{{ $errors->first('g-recaptcha-response') }}</strong>
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <div class="contact-submit-btn text-center">
                                    <button type="submit" class="submit-btn default-btn">SUBMIT NOW</button>
                                    <p class="form-messege"></p>
                                </div>
                            </form>
                        </div>
                        <!-- contact-form-warp End -->
                    </div>
                </div>
                <!--<div class="row">-->
                <!--    <div class="col">-->
                <!--        <div class="map-area section-padding-top-lg">-->
                <!--            <div id="map"></div>-->
                <!--        </div>-->
                <!--    </div>-->
                <!--</div>-->
            </div>
        </div>
        <!--// Services Area -->
    </main>
    <!--// Page Conttent -->

    <!-- google map js -->
    <!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAq7MrCR1A2qIShmjbtLHSKjcEIEBEEwM"></script> -->
    <!-- <script>
        // When the window has finished loading create our google map below
        google.maps.event.addDomListener(window, 'load', init);

        function init() {
            // Basic options for a simple Google Map
            // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
            var mapOptions = {
                // How zoomed in you want the map to start at (always required)
                zoom: 12,

                scrollwheel: false,

                // The latitude and longitude to center the map (always required)
                center: new google.maps.LatLng(23.761226, 90.40766), // New York

                // How you would like to style the map. 
                // This is where you would paste any style found on Snazzy Maps.
                styles: [{
                        "featureType": "administrative",
                        "elementType": "labels.text.fill",
                        "stylers": [{
                            "color": "#01416e"
                        }]
                    },
                    {
                        "featureType": "landscape",
                        "elementType": "all",
                        "stylers": [{
                            "color": "#13253c"
                        }]
                    },
                    {
                        "featureType": "poi",
                        "elementType": "all",
                        "stylers": [{
                            "visibility": "off"
                        }]
                    },
                    {
                        "featureType": "road",
                        "elementType": "all",
                        "stylers": [{
                                "saturation": -100
                            },
                            {
                                "lightness": 45
                            }
                        ]
                    },
                    {
                        "featureType": "road.highway",
                        "elementType": "all",
                        "stylers": [{
                            "visibility": "simplified"
                        }]
                    },
                    {
                        "featureType": "road.arterial",
                        "elementType": "labels.icon",
                        "stylers": [{
                            "visibility": "off"
                        }]
                    },
                    {
                        "featureType": "transit",
                        "elementType": "all",
                        "stylers": [{
                            "visibility": "off"
                        }]
                    },
                    {
                        "featureType": "water",
                        "elementType": "all",
                        "stylers": [{
                                "color": "#314453"
                            },
                            {
                                "visibility": "on"
                            }
                        ]
                    },
                    {
                        "featureType": "water",
                        "elementType": "geometry.fill",
                        "stylers": [{
                                "lightness": "-12"
                            },
                            {
                                "saturation": "0"
                            },
                            {
                                "color": "#0e3352"
                            }
                        ]
                    }
                ]
            };

            // Get the HTML DOM element that will contain your map 
            // We are using a div with id="map" seen below in the <body>
            var mapElement = document.getElementById('map');

            // Create the Google Map using our element and options defined above
            var map = new google.maps.Map(mapElement, mapOptions);

            // Let's also add a marker while we're at it
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(23.761226, 90.420766),
                map: map,
                title: 'Snazzy!'
            });
        }
    </script> -->

    <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
    <script>
        window.ga = function() {
            ga.q.push(arguments)
        };
        ga.q = [];
        ga.l = +new Date;
        ga('create', 'UA-XXXXX-Y', 'auto');
        ga('send', 'pageview')
    </script>
    <script src="../../www.google-analytics.com/analytics.js" async defer></script>
@endsection