@extends('layouts.app')

@section('content')
    <div class="container inner-padding mt-lg-5">
        <div class="row mt-4">
            <div class="col-md-8 pe-lg-5">
                <form id="contact_form" method="post">
                    @csrf
                    <div class="row">
                        <div class="col-12 mb30">
                            <h1 class="text-start fw-bold text-main">CONTACT US</h1>
                        </div>
                        <div class="col-12">
                            <div class="form-group pb-4">
                                <div class="input-wrapper">
                                    <i class="icon fa fa-user-circle"></i>
                                    <input type="text" name="full_name" id="full_name" class="form-control m-0"
                                        placeholder="Your Name">
                                </div>
                            </div>
                            <div class="form-group pb-4">
                                <div class="input-wrapper">
                                    <i class="icon fa fa-envelope"></i>
                                    <input type="email" name="email" id="email" class="form-control m-0"
                                        placeholder="Your Email">
                                </div>
                            </div>
                            <div class="form-group pb-4">
                                <div class="input-wrapper">
                                    <i class="icon fa fa-phone-square"></i>
                                    <input type="text" name="phone" id="phone" class="form-control m-0"
                                        placeholder="Your Phone">
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group pb-4">
                                <div class="input-wrapper">
                                    <textarea name="inquiry" id="inquiry" class="form-control m-0" placeholder="Your Message"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="g-recaptcha" data-sitekey="copy-your-site-key-here"></div>
                            <button type="submit" class="theme-btn">
                                Send Messsage
                            </button>
                        </div>
                    </div>
                </form>

                <div id="response_message"></div>
            </div>

            <div id="sidebar" class="col-md-4">
                <div class="widget widget_text">
                    <h3>Contact Info</h3>
                    <address>
                        <span><strong>Address:</strong>100 S Main St, Los Angeles,
                            CA</span>
                        <span><strong>Phone:</strong>(208) 333 9296</span>
                        <span><strong>Fax:</strong>(208) 333 9298</span>
                        <span><strong>Email:</strong><a href="mailto:contact@example.com">contact@example.com</a></span>
                        <span><strong>Web:</strong><a href="#test">http://example.com</a></span>
                        <span><strong>Open</strong>Sunday - Friday 08:00 - 18:00</span>
                    </address>
                </div>
            </div>
        </div>
    </div>

    @include('includes.map')
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.js"></script>
    @if (app()->getLocale() != 'en')
        <script type="module"
            src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/localization/messages_{{ app()->getLocale() }}}}.js">
            </script>
    @endif
    <script>
        $(document).ready(function() {
            $('#contact_form').validate({
                errorClass: "is-invalid",
                validClass: "is-valid",
                errorPlacement: function(error, element) {
                    error.insertAfter(element.parent()).addClass('pt-0 pb-2');
                },
                rules: {
                    full_name: {
                        required: true,
                        minlength: 2,
                        normalizer: function(value) {
                            return $.trim(value);
                        }
                    },
                    email: {
                        required: true,
                        email: true,
                        normalizer: function(value) {
                            return $.trim(value);
                        }
                    },
                    phone: {
                        required: true,
                        minlength: 8,
                        maxlength: 20,
                        normalizer: function(value) {
                            return $.trim(value);
                        }
                    },
                    inquiry: {
                        required: true,
                        minlength: 2,
                        normalizer: function(value) {
                            return $.trim(value);
                        }
                    },
                },
                submitHandler: function(form) {
                    $("#contact_form button").attr('disabled','disabled').addClass('loading');
                    $.ajax({
                        type: 'post',
                        url: '{{ route('contact.store') }}',
                        data: $('#contact_form').serialize(),
                        success: function (data) {
                            var message = $("#response_message").html(data.message)
                            if(data.status){
                                message.addClass('success').show();
                                $("#contact_form")[0].reset();
                            }
                            else{
                                message.addClass('error').show();
                            }
                            setTimeout(() => {
                                message.hide();
                            }, 2000);
                            $("#contact_form button").removeAttr('disabled').removeClass('loading');
                        }
                    });
                }
            })
        });
    </script>
@endsection