@extends('web.layouts.container')

@section('header')
    <div class="inner-header text-center" style="background-image: url({{$image ? asset($image) : asset('assets/web/images/contact.jpg')}});">
        <h4><span>{{$title ?? __('contacts.inner_page')}}</span></h4>
    </div>
@endsection

@section('content')
    <div class="contact2">
        <div class="contact-inf section-padding">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="items text-center">
                            <div class="icons">
                                <img src="{{asset('assets/web/')}}/images/call.svg" alt="">
                            </div>
                            <p>{{__('contacts.phone')}}</p>
                            <h5>{{settings('site_phone')}}</h5>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="items text-center">
                            <div class="icons">
                                <img src="{{asset('assets/web/')}}/images/mail.svg" alt="">
                            </div>
                            <p>{{__('contacts.email')}}</p>
                            <h5>{{settings('site_email')}}</h5>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="items text-center">
                            <div class="icons">
                                <img src="{{asset('assets/web/')}}/images/pin.svg" alt="">
                            </div>
                            <p>{{__('contacts.address')}}</p>
                            <h5>{{settings('site_address')}}</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-4">
                    <div class="social_cont text-center">
                        <a target="_blank" href="{{settings('facebook')}}"><i class="fab fa-facebook-f"></i></a>
                        <a target="_blank" href="{{settings('twitter')}}"><i class="fab fa-twitter"></i></a>
                        <a target="_blank" href="{{settings('instagram')}}"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="contact-for section-padding">
            <div class="container">
                <div class="alert alert-success ajaxSuccess d-none"></div>
                <div class="alert alert-danger ajaxError d-none"></div>
                <form action="{{route('sendContactUs')}}" method="post" class="form-row contact_us_form">
                    @csrf()
                    <div class="form-group col-lg-6">
                        <label>{{__('contacts.name')}}</label>
                        <input type="text" name="name" class="form-control" placeholder="{{__('contacts.name')}}">
                    </div>
                    <div class="form-group col-lg-6">
                        <label>{{__('contacts.email')}}</label>
                        <input type="email" name="email" class="form-control" placeholder="{{__('contacts.name')}}">
                    </div>
                    <div class="form-group col-lg-12">
                        <label>{{__('contacts.message_title')}}</label>
                        <input type="text" name="subject" class="form-control" placeholder="{{__('contacts.message_title')}}">
                    </div>
                    <div class="form-group col-lg-12">
                        <label>{{__('contacts.message')}}</label>
                        <textarea rows="6" class="form-control" name="message" placeholder="{{__('contacts.message')}}"></textarea>
                    </div>
                    <div class="form-group col-lg-12 text-center">
                        <button class="butn color contact_us_button"><span>{{__('contacts.send')}}</span></button>
                    </div>
                </form>
            </div>
        </div>
        <div class="map">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d237685.06929497214!2d39.70645988306184!3d21.435957142471135!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x15c21b4ced818775%3A0x98ab2469cf70c9ce!2sMecca%20Saudi%20Arabia!5e0!3m2!1sen!2seg!4v1603966641402!5m2!1sen!2seg"
                    width="100%" height="400" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
        </div>
    </div>
@endsection

@section('inner_js')
    <script>
        $(document).ready(function () {
            $('.contact_us_button').click(async function (e) {
                e.preventDefault();

                let interval = setInterval(function () {
                    $('.ajaxError, .ajaxSuccess').slideUp(400);
                    clearInterval(interval)
                }, 3000);

                let form = $('.contact_us_form'),
                    data = new FormData(form[0]),
                    url = form.attr('action'),
                    method = form.attr('method');

                const response=await ajax({
                    url,
                    data,
                    dataType: 'json',
                    method
                });

                if (response.errors) {
                    $('.ajaxError').removeClass('d-none').slideDown().html(response.errors);
                    $('.ajaxSuccess').addClass('d-none');
                }
                if (response.message) {
                    $('.ajaxSuccess').removeClass('d-none').slideDown().html(response.message);
                    $('.ajaxError').addClass('d-none');
                    $('.contact_us_form input, textarea').val('')
                }
            });
        });
    </script>
@endsection