@extends('web.layouts.app')

@section('title', transWord('تواصل معنا'))
@description(Str::limit(strip_tags(getSetting('desc_seo', app()->getLocale())), 160))
@keywords(implode(',', json_decode(getSetting('keyword', app()->getLocale()))))
@image(asset('storage/' . getSetting('logo')))

@section('sub_header')
    <div class="sub-header">
        <div class="main-container">
            <div class="text-about-header">
                <h2>{{ transWord('تواصل معنا') }}</h2>
                <h6> <a href="{{ route('web.solutions.home') }}"> {{ transWord('الرئيسية') }}</a> <i
                        class="bi bi-chevron-double-left"></i> {{ transWord('تواصل معنا') }}
                </h6>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <section class="contactus-page">

        <div class="contacts mr-section">
            <div class="main-container">
                <div class="row row-gap">
                    <div class="col-lg-4">
                        <a href="mailto::info@retaam.com">
                            <div class="sub-contacts">
                                <div class="icon-contacts">
                                    <i class="bi bi-envelope"></i>
                                </div>
                                <div class="text-contacts">
                                    <h3>{{ transWord('البريد الالكتروني') }}</h3>

                                    <p><a href="mailTo:{{ getSetting('email') }}">{{ getSetting('email') }}</a></p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-4">
                        <a href="tel:{{ getSetting('phone') }}">

                            <div class="sub-contacts">
                                <div class="icon-contacts">
                                    <i class="bi bi-phone"></i>
                                </div>
                                <div class="text-contacts">
                                    <h3>{{ transWord('رقم الجوال') }}</h3>
                                    <p style="direction: ltr;">{{ getSetting('phone') }}</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-4">
                        <div class="sub-contacts">
                            <div class="icon-contacts">
                                <i class="bi bi-geo-alt"></i>
                            </div>
                            <div class="text-contacts">
                                <h3>{{ transWord('العنوان') }}</h3>
                                <p>
                                    {{ transWord(getSetting('address')) }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <!-- start-customer-reviews -->
        <div class=" contact-us mr-section">
            <div class="main-container">
                <div class="title-center">
                    <h2>{{ transWord('تواصل معنا') }}</h2>
                </div>
                <form action="{{ route('web.solutions.contact-us.send-message') }}" method="POST" id="contactForm"
                    class="formss">
                    @csrf
                    <div class="input  text-center ">
                        <div class="form-input">
                            <i class="bi bi-person"></i>
                            <input type="text" name="fullname" id="fullname" placeholder="{{ transWord('الاسم') }}"
                                class="form-control" required>
                        </div>
                        <div class="form-input">
                            <i class="bi bi-envelope"></i>
                            <input type="email" name="email" id="email"
                                placeholder="{{ transWord('البريد الالكتروني') }}" class="form-control" required>
                        </div>
                        <div class="form-input">
                            <i class="bi bi-telephone"></i>
                            <input type="tel" name="phone" id="phone" placeholder="{{ transWord('رقم الهاتف') }}"
                                class="form-control" required>
                        </div>
                        <div class="form-input">
                            <i class="bi bi-chat-left-dots"></i>
                            <textarea name="message" id="message" placeholder="{{ transWord('ادخل رسالتك هنا') }}" class="form-control" required></textarea>
                        </div>
                        <div class="btn-contactus">
                            <button class="ctm-btn w-100">{{ transWord('ارسال') }}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- end-customer-reviews -->


        <div class="end-contactus mr-section">
            <div class="maps" id="map" data-address="{{ transWord(getSetting('address')) }}"></div>
            <input type="hidden" name="lat" id="lat" value="{{ getSetting('lat') }}">
            <input type="hidden" name="lng" id="lng" value="{{ getSetting('lng') }}">
        </div>
    </section>
    @push('js')
        <script
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBdarVlRZOccFIGWJiJ2cFY8-Sr26ibiyY&libraries=places&callback=initAutocomplete&language=ar"
            async defer></script>
        <script src="{{ url('web') }}/js/map.js"></script>
        <script src="{{ asset('web/js/custom/validation/contactForm.js') }}"></script>
    @endpush
@endsection