@extends('website.layout.master')

@section('title')
    Contact
@endsection

@section('content')
    <style>
        .float {
            position: fixed;
            width: 60px;
            height: 60px;
            bottom: 40px;
            right: 40px;
            background-color: #25d366;
            color: #FFF;
            border-radius: 50px;
            text-align: center;
            font-size: 30px;
            box-shadow: 2px 2px 3px #999;
            z-index: 100;
        }

        .my-float {
            margin-top: 16px;
        }
    </style>
    <!--Page Header Start-->
    <section class="page-header">
        <div class="page-header-bg"
             style="background-image: url({{ URL::asset('website/images/backgrounds/con-bg.jpg')}})">
        </div>
        <div class="page-header__overly"></div>
        <div class="container">
            <div class="page-header__inner">
                <ul class="thm-breadcrumb list-unstyled">
                    <li><a href="{{route("home")}}">Home</a></li>
                    <li><span>/</span></li>
                    <li>contact</li>
                </ul>
                <h2>contact us</h2>
            </div>
        </div>
    </section>
    <!--Page Header End-->

    <!--Contact Page Start-->
    <section class="contact-page" style="background-color: black">
        <div class="container">
            <div class="section-title text-center">
                <span class="section-title__tagline">get in touch with us</span>
                <h2 class="section-title__title MyWhite">Write us anytime</h2>
                <p class="MyWhite">Reach out to our team today to talk about how we can assist you with your
                    project.<br>We'll work closely with you to understand your requirements and provide
                    tailored solutions.
                    <br>Take the first step and get in touch with us today to begin the process.
                </p>
            </div>
            <div class="contact-page__inner">
                <form action="{{ route('save_contact_message') }}" class="MyForm" method="post">
                    @csrf
                    <div class="row">
                        <div class="col-xl-6">
                            <div class="contact-page__input-box">
                                <input type="text" placeholder="Your Name" name="name" required>
                            </div>
                        </div>
                        <div class="col-xl-6">
                            <div class="contact-page__input-box">
                                <input type="email" placeholder="Email Address" name="email" required>
                            </div>
                        </div>
                        <div class="col-xl-6">
                            <div class="contact-page__input-box">
                                <input type="text" placeholder="Phone Number" name="phone" required>
                            </div>
                        </div>
                        <div class="col-xl-6">
                            <div class="contact-page__input-box">
                                <input type="text" placeholder="Subject" name="subject" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="contact-page__input-box text-message-box">
                                <textarea name="message" placeholder="Write Message" required></textarea>
                            </div>
                            <div class="contact-page__btn-box">
                                <button type="submit" class="thm-btn contact-page__btn MyButton" style="background-color:#221c13">Send a message</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>
    <!--Contact Page End-->
    <a href="https://wa.me/{{ $setting->whatsapp }}/?text=how may i help you ?/" class="float" target="_blank">
        <i class="fab fa-whatsapp my-float"></i>
    </a>
    <!--Location Start-->
    <section class="location" style="background-color: black">
        <div class="location-shape-1 float-bob-x">
            <img src="{{ URL::asset('website/images/images/shapes/location-shape-1.png')}}" alt="">
        </div>
        <div class="container">
            <div class="row">
                <!--Location single Start-->
                <div class="col-xl-3 col-lg-6 col-md-6">
                    <div class="location__single">
                        <h4 class="location__title" style="color: #ffffff">Phone</h4>
                        <div class="location__phone-email">
                            <a class="MyWhite" href="tel:{{ $setting->phone }}">{{ $setting->phone }}
                            </a>
                        </div>
                    </div>
                </div>
                <!--Location single End-->
                <!--Location single Start-->
                <div class="col-xl-3 col-lg-6 col-md-6">
                    <div class="location__single">
                        <h4 class="location__title" style="color: #ffffff">Email</h4>
                        <div class="location__phone-email">
                            <a class="MyWhite" href="mailto:{{ $setting->email }}">{{ $setting->email }}</a> <br>
                        </div>
                    </div>
                </div>
                <!--Location single End-->
                <!--Location single Start-->
                <div class="col-xl-3 col-lg-6 col-md-6">
                    <div class="location__single">
                        <h4 class="location__title" style="color: #ffffff">Address</h4>
                        <div class="location__phone-email MyWhite">
                            {{ $setting->location }}<br>
                        </div>
                    </div>
                </div>
                <!--Location single End-->
                <!--Location single Start-->
                <div class="col-xl-3 col-lg-6 col-md-6">
                    <div class="location__single">
                        <h4 class="location__title" style="color: #ffffff">Opening Hours</h4>
                        <div class="location__phone-email">
                            <a class="MyWhite">{{ $setting->timing }}</a> <br>
                        </div>
                    </div>
                </div>
                <!--Location single End-->
            </div>
        </div>
    </section>
    <!--Location End-->

    <!--Google Map Start-->
    <section class="contact-page-google-map" style="background-color: black">
        <div id="map" style="width:100%;height:500px"></div>

    </section>
    <!--Google Map End-->

@endsection

@section('script')
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyABXn0Dg5Bkbn8UnQFbMaaqbAQBMAsivEc&callback=initMap" async defer></script>
    <script>

        function initMap() {

            // Address you want to display on the map
            const address = "{{ $setting->location }}";

            // Create a map object centered on a default location
            const map = new google.maps.Map(document.getElementById('map'), {
                zoom: 15,
                center: { lat: -34.397, lng: 150.644 } // Default location, will be updated after geocoding
            });

            // Geocode the address
            const geocoder = new google.maps.Geocoder();
            geocodeAddress(geocoder, map, address);
        }

        function geocodeAddress(geocoder, map, address) {
            geocoder.geocode({ 'address': address }, (results, status) => {
                if (status === 'OK') {
                    map.setCenter(results[0].geometry.location);
                    new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });
        }

    </script>
@endsection