@extends('layouts.site')

@section('content')

    @php
        /**/ [
            $name,
            $email,
            $phone,
            $whatsapp,
            $google_map_url,
            $addresss,
            $facebook,
            $instagram,
            $twitter,
            $youtube,
            $tiktok,
        ] = getGeneralSettings();
        $lang = app()->getLocale();
        $name = 'name_' . $lang;
    @endphp


    <!--Start Page Header-->
    <section class="page-header">
        <div class="page-header__bg" style="background-image: url({{ asset('assets/front/img/pages/contact.webp') }} )">
        </div>
        <div class="container">
            <div class="page-header__inner text-center">
                <h2>{{ __('Contact Us') }}</h2>
                <ul class="thm-breadcrumb">
                    <li><a href="{{ route('home_index') }}">{{ __('Home') }}</a></li>
                    <li><span class="icon-right-arrow-5"></span></li>
                    <li>{{ __('Contact Us') }}</li>
                </ul>
            </div>
        </div>
        <svg class="wave" viewBox="0 0 1440 40" xmlns="http://www.w3.org/2000/svg">
            <path fill="#fff" fill-opacity="1" d="M0,40 Q360,10 720,30 T1440,40 L1440,50 L0,50Z">
            </path>
        </svg>
    </section>
    <!--Start Contact Page-->
    <section class="contact-page direction">
         <div class="container">
            <div class="row">
                <!--Start Contact Page Contact Info-->
                <div class="col-xl-5 wow fadeInUp" data-wow-delay=".3s">
                    <div class="contact-page__contact-info">
                        <div class="sec-title-style3">
                            <div class="sub-title">
                                <div class="icon">
                                    <img src="{{ asset('assets/front/img/favicon.webp') }}" alt="">
                                </div>
                                <h5>
                                    {{ app()->getLocale() == 'ar' ? 'تواصل معنا' : ' Get In Touch' }}
                                </h5>
                            </div>
                            <h2>{{ __('Contact Us') }}</h2>
                        </div>

                        <ul>
                            <li>
                                <div class="icon-box">
                                    <span class="icon-telephone-call"></span>
                                </div>

                                <div class="text-box">
                                    <p> {{ __('phone') }}</p>
                                    <h2><a href="tel: {{ $phone }}">  {{ $phone }}</a></h2>
                                </div>
                            </li>

                            <li>
                                <div class="icon-box">
                                    <span class="icon-location"></span>
                                </div>

                                <div class="text-box">
                                    <p> {{ app()->getLocale() == 'ar' ? 'العنوان' : 'address' }}
                                    </p>
                                    <h2> <a href="https://maps.app.goo.gl/efVxpc9LaCM6Rpiq9">{{ $addresss }}</a></h2>
                                </div>
                            </li>

                            <li>
                                <div class="icon-box">
                                    <span class="icon-email"></span>
                                </div>

                                <div class="text-box">
                                    <p> {{ __('Email') }} </p>
                                    <h2><a href="mailto:{{ $email }}"> {{ $email }}</a></h2>
                                </div>
                            </li>

                        </ul>
                    </div>
                </div>

                <!--Start Contact Page Form-->
                <div class="col-xl-7 wow fadeInDown" data-wow-delay=".3s">
                    <div class="contact-page__form-box">
                        <div class="title">
                            <h2>

                                 {{ app()->getLocale() == 'ar' ? 'لا تتردد في الكتابة إلينا' : 'Feel free to write Us' }}
                            </h2>
                        </div>

                        <form id="contact-form" action="#" method="post" class="contactForm">
                            @csrf

                            <div class="row">
                                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
                                    <div class="contact-page__input-box">

                                        <input type="text" name="name" placeholder="{{ __('Name') }}"
                                            required="">
                                    </div>
                                </div>
                                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
                                    <div class="contact-page__input-box">
                                        <input type="text" name="mobile" placeholder="{{ __('Mobile') }}"
                                            required="">

                                    </div>
                                </div>

                                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                                    <div class="contact-page__input-box">
                                        <input type="email" name="email" placeholder="{{ __('Email') }}"
                                            required="">
                                    </div>
                                </div>
                                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                                    <div class="contact-page__input-box">

                                        <textarea name="message" placeholder="{{ __('Message') }}"></textarea>
                                    </div>
                                    <div id="contactResponse"></div>
                                    <div class="contact-page__btn">
                                        <button type="submit" class="thm-btn">
                                            <span class="txt">{{ __('Send') }}</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
                <!--End Contact Page Form-->
            </div>
        </div>
    </section>

    <!--Start Google Map Two-->
    <section class="google-map-two wow fadeInUp" data-wow-delay=".3s">
        <iframe width="100%" height="500" id="gmap_canvas" src="{{ $google_map_url }}" frameborder="0" scrolling="no"
            marginheight="0" marginwidth="0"></iframe>
    </section>
 
@stop

@section('scripts')
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.contactForm').submit(function(e) {
                e.preventDefault();
                var formData = $(this).serialize();

                $.ajax({
                    type: 'POST',
                    url: '{{ route('site.contact_Us') }}',
                    data: formData,
                    success: function(response) {
                        $('#contactResponse').html('<div >' +
                            response.message + '</div>');
                        toastr.success(response.message);
                        $('.contactForm')[0].reset();
                    },
                    error: function(xhr) {
                        var errors = xhr.responseJSON.errors;
                        var errorMessages = '';
                        $.each(errors, function(key, value) {
                            errorMessages += '<p class="text-danger">' + value[0] +
                                '</p>';
                        });
                        $('#contactResponse').html(errorMessages);
                    }
                });
            });
        });
    </script>

@stop