@extends('layouts.frontend.frontend_main')

@section('title')
    @lang('frontend_lang.contact_us')
@endsection
@section('css')
    <style>
        .border-danger-custom {
            border-color: #dc3545 !important;
        }
    </style>
@endsection

@section('content')
    <div class="gambo-Breadcrumb">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('frontend.home.index') }}">@lang('frontend_lang.home')</a></li>
                            <li class="breadcrumb-item active" aria-current="page">@lang('frontend_lang.contact_us')</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <div class="all-product-grid">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12">
                    <div class="default-title mt-4">
                        <h2>@lang('frontend_lang.contact_us')</h2>
                    </div>
                    <div class="panel-group accordion pt-1" id="accordion0">
                        <div class="row">
                            <div class="col-md-6">
                                <h3>How can we help?</h3>
                                <form class="contactform" id="form" action="{{ route('frontend.contact-us.send-mail') }}" method="post">
                                    @csrf
                                    <div class="fcf-form-group">
                                        <label for="Name" class="fcf-label">Your Name</label>
                                        <div class="fcf-input-group">
                                            <input type="text" id="Name" name="name" class="fcf-form-control " >
                                        </div>
                                    </div>

                                    <div class="fcf-form-group">
                                        <label for="Email" class="fcf-label">Your email Address</label>
                                        <div class="fcf-input-group">
                                            <input type="email" id="Email" name="email" class="fcf-form-control"  >
                                        </div>
                                    </div>

                                    <div class="fcf-form-group">
                                        <label for="Email" class="fcf-label">Your Contact Number</label>
                                        <div class="fcf-input-group">
                                            <input type="text" id="contact_number" name="contact_number" class="fcf-form-control" >
                                        </div>
                                    </div>

                                    <div class="fcf-form-group">
                                        <label for="Message" class="fcf-label">Your Message</label>
                                        <div class="fcf-input-group">
                                            <textarea id="Message" name="message" class="fcf-form-control" rows="6" maxlength="3000" ></textarea>
                                        </div>
                                    </div>

                                    <div class="fcf-form-group">
                                        <button type="submit" id="fcf-button" class="fcf-btn fcf-btn-primary fcf-btn-lg fcf-btn-block ">Send Message</button>
                                    </div>
                                </form>
                            </div>

                            <div class="col-md-6">
                                <h3>Our Office Location</h3>
                                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2481.707460270562!2d-0.30096188407417046!3d51.53692391636479!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876123d955960f1%3A0x2ca6af1fb011eda1!2sWorld%20Link!5e0!3m2!1sen!2sin!4v1617659552522!5m2!1sen!2sin" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $('#form').submit(function(e){
            e.preventDefault();
            e.stopPropagation();

            var submit_btn = jQuery(this).find(':submit');
            var btn_name = jQuery(this).find(':submit').html();
            var new_btn_name = 'Loading...';
            var form = jQuery(this);
            var method = jQuery(form).attr('method');
            var url = jQuery(form).attr('action');

            // jQuery(form).ajaxSubmit({
            jQuery.ajax({
                type: method,
                url: url,
                enctype: "multipart/form-data",
                dataType: 'JSON',
                // data: jQuery(form).serialize(),
                data: new FormData(form[0]),
                processData: false,
                contentType: false,
                beforeSend: function () {
                    jQuery(submit_btn).html(new_btn_name);
                    jQuery(submit_btn).attr('disabled', true);
                    jQuery(form).find('.input_text_wrapper').removeClass('has-error');
                    jQuery(form).find('.help-block').remove();
                    showLoading();
                },
                success: function(data){
                    hideLoading();
                    if (data.response.status == STATUS.SUCCESS) {
                        if ( data.message ){
                            successToast(data.message);
                        }
                        if (data.redirect) {
                            location.replace(data.redirect);
                        } else {
                            location.reload();
                        }
                    } else {
                        if (data.redirect) {
                            location.replace(data.redirect);
                        }
                        errorToast(data.message);
                    }
                },
                error: function(data){
                    jQuery.each(data.responseJSON.errors, function (key, index) {
                        var input = jQuery(form).find('[name="' + key + '"]');
                        // input.closest('.input_text_wrapper').addClass('has-error').append('<span class="help-block">' + index[0] + '</span>');
                        input.parent().append('<span class="help-block text-danger">' + index[0] + '</span>');
                    });
                    hideLoading();
                },
                complete: function () {
                    jQuery(submit_btn).html(btn_name);
                    jQuery(submit_btn).attr('disabled', false);
                    hideLoading();
                }
            });
        });
    </script>
@endsection