@extends('layouts.app')

@section('content')
<div class="contact-area pb-90">
    <div class="container">
        <div class="contact-info-wrap mb-50">

            <div class="row">
                <div class="col-lg-12 col-md-12">
                    <div class="single-contact-info text-center mb-30">
                        <i class="ti-location-pin"></i>
                        <h4>our address</h4>
                        <p><strong>{{ COMPANY_INFO }}</strong></p>
                        <p>{!! nl2br(COMPANY_ADDRESS) !!}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="get-in-touch-wrap">
            <h3>Get In Touch</h3>
            <p>Do you have questions? Let us promptly address and resolve all of them.</p>
            <div class="contact-shadow">
                <div class="contact-from">
                    <form id="contact-form" action="{{route('contact_us.post')}}" method="post">
                        @csrf
                        @method('POST')
                        <div class="user-profile-wrap">
                            <div class="user-profile-info">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <label>Name <abbr class="required" title="required">*</abbr></label>
                                        <input name="name" type="text" value="@if(auth()->check()){{auth()->user()->full_name}}@endif" required>
                                    </div>
                                    <div class="col-lg-6">
                                        <label>Email <abbr class="required" title="required">*</abbr></label>
                                        <input name="email" type="email" value="@if(auth()->check()){{auth()->user()->email}}@endif" required>
                                    </div>
                                    <div class="col-lg-12">
                                        <label>Subject <abbr class="required" title="required">*</abbr></label>
                                        <input name="subject" type="text" required>
                                    </div>
                                    <div class="col-lg-12">
                                        <label>Your Message <abbr class="required" title="required">*</abbr></label>
                                        <textarea name="message" required></textarea>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="g-recaptcha mb-30" data-sitekey="6LdJKmgjAAAAAAtvxWLr8Dhp73JQ9lxtO46sfDQg"></div>
                                    </div>
                                    <div class="col-lg-12">
                                        <button class="submit" type="submit">SEND MESSAGE</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="contact-success-error-wrap mt-20">
                    <div class="contact_success">
                    </div>
                    <div class="contact_errors error">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<!-- google captcha js -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
var currentRequest = null;
$("#contact-form").validate({
    rules: {
        name: {
            required: true,
            noSpace: true,
            alpha: true
        },
        email: {
            required: true,
            noSpace: true,
            email: true
        },
        subject: {
            required: true,
            noSpace: true
        },
        message: {
            required: true,
            noSpace: true
        },
        'g-recaptcha-response' : {
            required: true
        }
    },
    messages: {
        'g-recaptcha-response': {
            required: 'Google captcha required'
        },
    },
    submitHandler: function(form) {
        $('#loading').show();
        $('.contact_errors').html('');
        $('.contact_success').html('');
        var formData = new FormData(form);
        currentRequest = jQuery.ajax({
            type: 'POST',
            data: formData,
            url: "{{ route('contact_us.post') }}",
            dataType: 'JSON',
            processData: false,
            contentType: false,
            beforeSend : function()    {
                if(currentRequest != null) {
                    currentRequest.abort();
                }
            },
            success: function(data) {
                $('#loading').hide();
                if(data.status == 0) {
                    var errors = data.errors;
                    $.each(errors, function(i, val) {
                        if(i == 'g-recaptcha-response') {
                            val = 'The google recaptcha field is required.';
                        }
                        $('.contact_errors').append('<div class="alert alert-danger alert-dismissible fade show" role="alert">'+val+'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
                    })
                }
                else {
                    $('.contact_success').html('<div class="alert alert-success alert-dismissible fade show" role="alert">'+data.message+'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
                    $("#contact-form")[0].reset();
                }
                setTimeout(() => {
                    $('.contact_errors').html('');
                    $('.contact_success').html('');
                }, 3000);
            },
            error:function(e){
            // Error
                $('#loading').hide();
                return false;
            }
        });
        return false;
    }
});
</script>
@endsection