@extends('layout', ['page_title' => 'Contact Us', 'page_slug' => 'contact-us'])
@section('content')
<section class="contact-area section-gap">
    <div class="container">
        <div class="contact-map" id="map"></div>
        <div class="row">
            <div class="col-lg-3">
                <div class="contact-info">
                    <div class="info-item">
                        <i class="fas fa-home"></i>
                        <div class="info-details">
                            <h6>Address</h6>
                            <p>XXXXXX XXXXX, XXXXXX XXXX XXXXXX XXX, XXX XXXX XXXXXXXXX - XXXXXX</p>
                        </div>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-headphones"></i>
                        <div class="info-details">
                            <h6><a href="#">+91 XXXXXXXXXX</a></h6>
                            <p></p>
                        </div>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-envelope"></i>
                        <div class="info-details">
                            <h6><a href="#">nspsindia@gmail.com</a></h6>
                            <p></p>
                        </div>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-clock"></i>
                        <div class="info-details">
                            <h6>Opening Hours</h6>
                            @php
                                $days = ['Monday' => '09:30 AM', 'Tuesday' => '09:30 AM', 'Wednesday' => '09:30 AM', 'Thursday' => '09:30 AM', 'Friday' => '09:30 AM', 'Saturday' => '09:30 AM', 'Sunday' => '09:30 AM']
                            @endphp
                            <p>
                                <ul class="opening-hours">
                                    @foreach ( $days as $key => $value )
                                        <li>
                                            <span class="ohleft">{{$key}}</span>
                                            <span class="ohright">{{$value}}</span>
                                        </li>
                                    @endforeach
                                </ul>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-9">
                <form class="row contact-form" action="" method="post" id="contactForm" novalidate="novalidate">
                    <div class="col-md-6">
                        <div class="form-group">
                            <input type="text" class="form-control" id="name" name="name" placeholder="Enter your name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter your name'" required="">
                        </div>
                        <div class="form-group">
                            <input type="email" class="form-control" id="email" name="email" placeholder="Enter email address" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter email address'" required="">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" id="subject" name="subject" placeholder="Enter Subject" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter Subject'" required="">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <textarea class="form-control" name="message" id="message" rows="1" placeholder="Enter Message" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter Message'" required=""></textarea>
                        </div>
                    </div>
                    <div class="col-md-12 text-right">
                        <button type="submit" value="submit" class="btn submit-btn">Send Message</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
<script>
    function initMap() {
        const myLatLng = {lat: 28.634894, lng: 77.457811 };
        const map = new google.maps.Map(document.getElementById("map"), {
            zoom: 5,
            center: myLatLng,
        });

        new google.maps.Marker({
            position: myLatLng,
            map,
            title: "hello Rajkot!",
        });
    }

    window.initMap = initMap();
</script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key={{ env('GOOGLE_MAP_KEY') }}&callback=initMap"></script>
@endsection