@extends('website.includes.master')

@section('title')
    Contact Us
@endsection

@section('content')

    <!--Start breadcrumb area paroller-->
    <section class="breadcrumb-area">
        <div class="breadcrumb-area-bg"
             style="background-image: url({{ URL::asset('admin/assets/uploads/'.$banner->image )}});">
        </div>
        <div class="shape-box"></div>
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="inner-content">

                        <div class="breadcrumb-menu">
                            <ul>
                                <li><a href="{{ route('/') }}">Home</a></li>
                                <li class="active">Contact Us</li>
                            </ul>
                        </div>
                        <div class="title" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="1500">
                            <h2>Contact Us</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--End breadcrumb area-->

    <!--Start Google Map Style2 Area-->
    <section class="google-map-area">
        <div class="auto-container">
            <div class="contact-page-map-outer">
                <!--Map Canvas-->
                {{--                <div id="map" style="width:100%;height:500px;"></div>--}}

                <div class="contact-info-box">
                    <div class="left-box">
                        <h3>
                            <a href="tel:{{ $setting->phone }}">{{ $setting->phone }}</a>
                        </h3>

                    </div>
                    <div class="middle-box">
                        <p style="color:#5BA55B">{{ $setting->location }}</p>
                    </div>
                    <div class="right-box">
                        <h3><a style="color:#5BA55B"
                               href="mailto:{{ $setting->email }}">{{ $setting->email }}</a>
                        </h3>
                    </div>
                </div>

            </div>
        </div>
    </section>
    <!--End Google Map Style2 Area-->



    <!--Start Main Contact Form Area-->
    <section class="main-contact-form-area">
        <div class="container">
            <div class="sec-title text-center">
                <div class="sub-title">
                    <div class="border-box"></div>
                    <h3>Contact with us</h3>
                </div>
                <h2>Write a Message</h2>
            </div>
            <div class="row">
                <div class="col-xl-12">
                    <div class="contact-form">
                        <form class="default-form2"
                              action="{{ route('SaveContactMessage') }}" method="post">
                            @csrf
                            <div class="row">
                                <div class="col-xl-6">
                                    <div class="form-group">
                                        <div class="input-box">
                                            <input type="text" name="name" id="formName"
                                                   placeholder="Full Name" required="">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-6">
                                    <div class="form-group">
                                        <div class="input-box">
                                            <input type="email" name="email" id="formEmail"
                                                   placeholder="Email Address" required="">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-xl-6">
                                    <div class="form-group">
                                        <div class="input-box">
                                            <input type="text" name="phone" required id="formPhone"
                                                   placeholder="Phone">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-6">
                                    <div class="form-group">
                                        <div class="input-box">
                                            <input type="text" name="subject" required id="formSubject"
                                                   placeholder="Subject">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-xl-12">
                                    <div class="form-group">
                                        <div class="input-box">
                                    <textarea name="message" id="formMessage"
                                              placeholder="Write a Message" required=""></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-xl-12 text-center">
                                    <div class="button-box">
                                        <button class="btn-one" type="submit">
                                    <span class="txt">
                                        send a message
                                    </span>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-3">
                                <img src="{{ URL::asset('admin/assets/uploads/'.$setting->contact_image )}}"
                                     class="w-100">
                            </div>

                        </form>
                    </div>

                </div>
            </div>
        </div>
    </section>
    <!--End Main Contact Form Area-->

@endsection

{{--<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=AIzaSyABXn0Dg5Bkbn8UnQFbMaaqbAQBMAsivEc&libraries=places"></script>--}}

{{--<script>--}}

{{--    function initMap(latt, lngg) {--}}
{{--        const myLatlng = {lat: latt, lng: lngg};--}}
{{--        const map = new google.maps.Map(document.getElementById("map"), {--}}
{{--            zoom: 12,--}}
{{--            center: myLatlng,--}}
{{--        });--}}
{{--        const marker = new google.maps.Marker({--}}
{{--            position: myLatlng,--}}
{{--            map,--}}
{{--            title: "Click to zoom",--}}
{{--        });--}}

{{--        map.addListener("center_changed", () => {--}}
{{--            window.setTimeout(() => {--}}
{{--                map.panTo(marker.getPosition());--}}
{{--            }, 3000);--}}
{{--        });--}}
{{--        marker.addListener("click", () => {--}}
{{--            map.setZoom(8);--}}
{{--            map.setCenter(marker.getPosition());--}}
{{--        });--}}
{{--    }--}}

{{--    getLatLongFromAddress('{{ App\Models\Setting::first()->location }}');--}}

{{--    function getLatLongFromAddress(address) {--}}
{{--        var geocoder = new google.maps.Geocoder();--}}
{{--        geocoder.geocode({address: address}, function (results, status) {--}}
{{--            if (status == "OK") {--}}
{{--                var lat = results[0].geometry.location.lat();--}}
{{--                var lng = results[0].geometry.location.lng();--}}
{{--                console.log("Latitude: " + lat + "\nLongitude: " + lng);--}}
{{--                initMap(lat, lng);--}}
{{--            } else {--}}
{{--                console.log("Geocode was not successful for the following reason: " + status);--}}
{{--            }--}}
{{--        });--}}
{{--    }--}}

{{--</script>--}}