@extends('layouts.app')

@section('content')
@if(session()->has('message'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <strong>{{ session()->get('message') }}</strong>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
@endif
<h1 class="text-center">{{ __('contact-us.title') }}</h1>
<hr class="my-4" />

<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-9" id="contactDiv">
            <div class="alert alert-success alert-dismissible fade show d-none" role="alert" name="successMessageDiv">
                <strong name="successMessage"></strong>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="alert alert-warning alert-dismissible fade show d-none" role="alert" name="warningMessageDiv">
                <strong name="warningMessage"></strong>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="POST" action="{{ route('sendMessage', [ app()->getLocale(), 'contact-us'] ) }}" id="contactUsForm" class="notifications">
                <input type="hidden" name="token" value="{{ $token }}"/>
                @csrf
                <p>
                    {{ __('contact-us.paragraph') }}
                </p>

                <div class="form-group question component-type-text bmd-form-group" id="question-detail_6367">
                    <div class="component"><label for="detail_6367" class="component-label">{{ __('contact-us.InputLabelName') }}</label>
                        <input id="name" type="text" class="col-md-12 form-control" name="name" value="" data-next="" title="" placeholder="" autocomplete="off">
                        <span class="invalid-feedback offset-md-1" role="alert">
                            <strong></strong>
                        </span>
                    </div>
                </div>

                <div class="form-group question component-type-email bmd-form-group" id="question-email_6295">
                    <div class="component"><label for="email" class="component-label">{{ __('contact-us.InputLabelEmail') }}</label><input id="email" type="email" class="col-md-12 form-control" name="email" value="" data-next="" title="" placeholder="" autocomplete="off">
                        <span class="invalid-feedback offset-md-1" role="alert">
                            <strong></strong>
                        </span>
                    </div>
                </div>

                <div class="form-group question component-type-textbox bmd-form-group is-filled" id="contact-message-textarea-container">
                    <div class="component optional"><label for="contact-message-textarea" class="component-label"></label>
                        <textarea name="message" class="form-control" style="border: solid 2px #F58220;  background-image: none" title="" rows="4" cols="50" data-next="" minlength="" maxlength="500" placeholder="" optional="" autocomplete="off"></textarea>
                        <div class="charNum">500</div>
                        <span class="invalid-feedback offset-md-1" role="alert">
                            <strong></strong>
                        </span>
                    </div>
                </div>

                {{-- ReCaptcha --}}
                <div class="my-4">
                    <div class="d-flex justify-content-center">
                        <div class="g-recaptcha" name="recaptcha" data-sitekey="6LcNV-QZAAAAAKFJgr0ylhG9WOLLwgmUJsufNyzQ"></div>
                        <span class="invalid-feedback offset-md-1" role="alert">
                            <strong></strong>
                        </span>
                    </div>
                </div>

                <div class="col-5">
                    <div class="justify-content-center">
                    </div>
                </div>

                <button class="btn btn-primary w-100 fly-to-top" type="button" id="sendButton">{{ __('contact-us.InputButtonSend') }}</button>
                <button class="btn btn-save w-100" type="button" id="readFaq" onclick="location.href='{{ route('faq', app()->getLocale()) }}'">{{ __('contact-us.InputButtonReadFaq') }}</button>
            </form>

            <hr class="my-4" />

            <h3 class="mt-5 text-center">{{ __('contact-us.companyinfo.title') }}</h3>
            <br>
            <p><strong>{{ __('contact-us.companyinfo.nameTitle') }}</strong> {{ __('contact-us.companyinfo.name') }}<br>
            <strong>{{ __('contact-us.companyinfo.seatTitle') }}</strong> {{ __('contact-us.companyinfo.seat') }}<br>
            <strong>{{ __('contact-us.companyinfo.idTitle') }}</strong> {{ __('contact-us.companyinfo.id') }}<br>
            <strong>{{ __('contact-us.companyinfo.emailTitle') }}</strong> {{ __('contact-us.companyinfo.email') }}</p>
        </div>
    </div>
</div>

@endsection

@section('title')
{{ __('meta.title.contact-us') }}
@endsection

@section('description')
{{ __('meta.description.contact-us') }}
@endsection

@push('scripts')
<script>
$( document ).ready(function() {
var debug = false;
    $('#sendButton').on('click',function (e) {
        e.preventDefault();

        var contactUsForm = $('#contactUsForm');
        hideContactValidation( contactUsForm );
        hideSuccessContactMessage();
        $.ajax({
            type: "POST",
            url: contactUsForm.attr('action'),
            data: contactUsForm.serialize(),
        })
        .done( function(response) {
            console.log('Ajax done');
            if(debug == true) console.log(response);
            showSuccessContactMessage(response);
        })
        .fail( function(error) {
            console.log('Ajax error');
            if(debug == true) console.log(error);
            if(debug == true) console.log(error);
                if ( error.status == 422 ) {
                    error.responseJSON.errors = {
                        'email' : error.responseJSON.error.email,
                        'message' : error.responseJSON.error.message
                    };
                    delete error.responseJSON.error;
                }
                if ( error.status == 404 ) {
                    error.responseJSON.errors = {
                        'recaptcha' : error.responseJSON.error.recaptcha
                    };
                    delete error.responseJSON.error;
                }
                showContactValidation( contactUsForm, error.responseJSON.errors );
        });
    });
});

window.showSuccessContactMessage = function( response )
{
    $(document).find('[name=successMessageDiv]').removeClass('d-none');
    $(document).find('[name=successMessage]').html("{{ __('feedback.sendMessageSuccessful') }}");
}

window.hideSuccessContactMessage = function()
{
    $(document).find('[name=successMessageDiv]').addClass('d-none');
    $(document).find('[name=successMessage]').html('');
}

window.showContactValidation = function( contactUsForm, errors )
{
    $.each( errors, function( name, message ) {
        if (name === 'message' && message != null)
        {
            contactUsForm.find('[name='+name+']').addClass('is-invalid');
            contactUsForm.find('[name='+name+'] + div + .invalid-feedback strong').html(message);
        }
        else
        {
            if (name === 'email' && message != null || name == 'recaptcha' && message != null)
            {
                contactUsForm.find('[name='+name+']').addClass('is-invalid');
                contactUsForm.find('[name='+name+'] + .invalid-feedback strong').html(message);
            }
        }
    });
}

window.hideContactValidation = function( contactUsForm )
{
    contactUsForm.find('.is-invalid + .invalid-feedback strong').html('');
    contactUsForm.find('.is-invalid').removeClass('is-invalid');
}
</script>
@endpush