@extends('front.layout.master' , ['title' => __('support')])


@section('content')


    <div id="map"></div>
    <div class="main-content">
        <div class="container">
            <div class="portlet">
                <div class="portlet__body">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="main-title text-left">@lang('contact_information')</div>
                            <hr class="mt-2 mb-3"/>
                            <div class="card-papper-content">
                                <div class="card-contact">
                                    <ul>
                                        <li>{{ $settings->valueOf('address') }}</li>

                                    </ul>
                                </div>
                                <div class="card-contact">
                                    <ul>
                                        <li>{{ $settings->valueOf('phone') }}</li>
                                        <li>{{ $settings->valueOf('email') }}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="main-title text-left">@lang('contact_form')</div>
                            <hr class="mt-2 mb-3"/>
                            <div class="card-papper-content">
                                <form class="contact_form" action="{{ route('support.store') }}" method="post">
                                    <div class="d-none" id="errors"></div>

                                    @csrf
                                    <div class="form-group">
                                        <label>@lang('name')</label>
                                        <input class="form-control" type="text" name="name"/>
                                    </div>
                                    <div class="form-group">
                                        <label>@lang('email')</label>
                                        <input class="form-control" type="text" name="email"/>
                                    </div>
                                    <div class="form-group">
                                        <label>@lang('message')</label>
                                        <textarea class="form-control" rows="6" name="message"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <button class="general_btn_lg" type="submit">@lang('send')</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        // Initialize and add the map
        function initMap() {
            // The location of Uluru
            var uluru = { lat: parseFloat({{ $settings->valueOf('latitude') }}), lng: parseFloat({{ $settings->valueOf('longitude') }}) };
            // The map, centered at Uluru
            var map = new google.maps.Map(document.getElementById("map"), {
                zoom: 12,
                center: uluru
            });
            // The marker, positioned at Uluru
            var marker = new google.maps.Marker({
                position: uluru,
                map: map,
                icon: "{{ asset('frontAssets/images/marker.png') }}"
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCcTWZnmuGjZKYeBR5vX8xS6p122spkpBM&amp;callback=initMap"></script>

@endpush