@extends('web.layouts.container')

@section('content')

    <section class="contact section" id="contact">
        <div class="container">
            <div class="content">
                <div class="row">
                    <div class="col-lg-7">
                        <form method="post" action="{{route('contact.store')}}" class="contact_us_form">
                            <div class="form">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group mb-4">
                                            <input type="text" name="name" class="form-control" placeholder="{{__('visitorMessages.name')}}">
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group mb-4">
                                            <input style="direction: rtl" type="email" name="email" class="form-control" placeholder="{{__('visitorMessages.email')}}">
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group mb-4">
                                            <input name="subject" class="form-control" placeholder="{{__('visitorMessages.subject')}}">
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group mb-4">
                                            <textarea name="message" class="form-control" placeholder="{{__('visitorMessages.message')}}" rows="8"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <button class="butn primary_border_butn fw-bold py-3 w-100 text-center contact_us_button" >
                                            <span> {{__('main.send')}} </span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="col-lg-5">
                        <div class="box_item mb-4">
                            <h5 class="title mb-3 border_b">{{__('visitorMessages.contact_info')}}</h5>
                            @if($settings['site_email'] ?? null)
                                <p class="mb-2"> <i class="bi bi-envelope me-1"></i> : {{$settings['site_email']}} </p>
                            @endif
                            @if($settings['site_phone'] ?? null)
                                <p class="mb-2"> <i class="bi bi-phone me-1"></i> : {{$settings['site_phone']}} </p>
                            @endif
                            @if($settings['site_address_'.$lang] ?? null)
                                <p class="mb-0"> <i class="bi bi-geo-alt me-1"></i>: {{$settings['site_address_'.$lang]}}</p>
                            @endif
                        </div>
                        <div class="map box_item p-2">{!! $settings['site_map'] !!}</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection

@section('inner_js')

    <script>

        $('.contact_us_button').click(async function (e) {
            e.preventDefault();

            $(this).prop('disabled', true);

            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){
                $(this).prop('disabled', false);
                toasterError(response.errors);
            }

            if (response.message){
                toasterSuccess(response.message);
                $('input, textarea').val('');
            }

        });

        $(document).ready(function () {
            $('.map_container iframe').attr('width', '100%').attr('height', '550')
        })
    </script>

@endsection