@extends('frontend.layouts.app')

@section('content')
    <!--============================== Breadcumb ============================== -->
    <div class="breadcumb-wrapper " data-bg-src="{{asset('assets/frontend/img/bg/breadcumb-bg.jpg')}}">
        <div class="container">
            <div class="breadcumb-content">
                <h1 class="breadcumb-title">Contact Us</h1>
                <ul class="breadcumb-menu">
                    <li><a href="{{ url('/') }}">Home</a></li>
                    <li>Contact Us</li>
                </ul>
            </div>
        </div>
    </div><!--============================== Contact Area ==============================-->
    <div class="space">
        <div class="container">
            <div class="row gy-4">
                <div class="col-xl-4 col-md-6">
                    <div class="contact-info">
                        <div class="contact-info_icon">
                            <i class="fas fa-location-dot"></i>
                        </div>
                        <div class="media-body">
                            <h4 class="box-title">Our Office Address</h4>
                            <span class="contact-info_text">22 Consett Rd, HILLSFORD BRIDGE, EX35 2LJ<br> United Kingdom</span>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6">
                    <div class="contact-info">
                        <div class="contact-info_icon">
                            <i class="fas fa-phone"></i>
                        </div>
                        <div class="media-body">
                            <h4 class="box-title">Whatsapp Us Anytime</h4>
                            <span class="contact-info_text">
                                <a href="https://wa.link/hdt9rq">+44-786-366-1099</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6">
                    <div class="contact-info">
                        <div class="contact-info_icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div class="media-body">
                            <h4 class="box-title">Send An Email</h4>
                            <span class="contact-info_text">
                                <a href="mailto:support@instalppi.com"><span class="__cf_email__">support@instalppi.com</span></a>
                                <a href="mailto:info@instalppi.com"><span class="__cf_email__">info@instalppi.com</span></a>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!--============================== Contact Area ==============================-->
    <div class="bg-smoke space" data-bg-src="{{asset('assets/frontend/img/bg/contact_bg_1.png')}}" id="contact-sec">
        <div class="container">
            <div class="row">
                <div class="col-xl-8">
                    <div class="title-area mb-35 text-xl-start text-center">
                        <span class="sub-title">
                            <div class="icon-masking me-2">
                                <span class="mask-icon" data-mask-src="{{asset('assets/frontend/img/theme-img/title_shape_2.svg')}}"></span>
                                <img src="{{asset('assets/frontend/img/theme-img/title_shape_2.svg')}}" alt="shape">
                            </div>contact with us!
                        </span>
                        <h2 class="sec-title">Have Any Questions?</h2>
                        <p class="sec-text">Enthusiastically disintermediate one-to-one leadership via business e-commerce. Dramatically reintermediate compelling process improvements rather than empowered relationships.</p>
                    </div>
                    <div id="formSuccessMessage" class="alert alert-success" style="display: none;"></div>
                    <div id="formfailureMessage" class="alert alert-danger" style="display: none;"></div>
                    <form action="{{ route('contact.store') }}" method="POST" class="contact-form" id="contactForm">
                        <div class="row">
                            <div class="form-group col-md-6">
                                <input type="text" class="form-control" name="name" id="name" placeholder="Your Name">
                                <i class="fal fa-user"></i>
                            </div>
                            <div class="form-group col-md-6">
                                <input type="email" class="form-control" name="email" id="email" placeholder="Email Address">
                                <i class="fal fa-envelope"></i>
                            </div>
                            <div class="form-group col-md-6">
                                <input type="text" class="form-control" name="subject" id="subject" placeholder="Your Subject">
                                <i class="fal fa-book"></i>
                            </div>
                            <div class="form-group col-md-6">
                                <input type="tel" class="form-control" name="number" id="number" placeholder="Phone Number">
                                <i class="fal fa-phone"></i>
                            </div>
                            <div class="form-group col-12">
                                <textarea name="message" id="message" cols="30" rows="3" class="form-control" placeholder="Your Message"></textarea>
                                <i class="fal fa-comment"></i>
                            </div>
                            <div class="form-btn text-xl-start text-center col-12">
                                <button type="submit" class="th-btn">Send Message<i class="fa-regular fa-arrow-right ms-2"></i></button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('footer_scripts')
    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $("#contactForm").submit(function(e) {
                e.preventDefault();
            }).validate({
                rules: {
                    name: {
                        required: true,
                        maxlength: 255
                    },
                    email: {
                        email: true,
                        required: true,
                    },
                    subject: {
                        required: true,
                        maxlength: 255
                    },
                    number: {
                        required: true,
                        maxlength: 255
                    },
                    message: {
                        required: true,
                    }
                },

                errorElement: 'span',
                submitHandler: function(form) {
                    var formData = new FormData(form);

                    $.ajax({
                        url: $(form).attr('action'),
                        data: formData,
                        type: 'POST',
                        dataType: 'json',
                        processData: false,
                        contentType: false,
                        success: function(data) {
                            if (data.status) {
                                $('#formSuccessMessage').text(data.message).fadeIn().delay(2000).fadeOut(); // Fade out after 2 seconds
                                $(form)[0].reset();
                            } else {
                                $('#formfailureMessage').text(data.message).fadeIn().delay(10000).fadeOut(); // Fade out after 2 seconds
                            }
                        },
                        error: function(xhr, status, error) {
                            var jsonResponse = JSON.parse(xhr.responseText);
                            var locale = '{{ app()->getLocale() }}'; // Get the current application locale
                            $("#addLanding").modal('hide');
                            if (locale == 'en') {
                                // English error messages
                                var errorMessage = "Validation failed";
                            } else if (locale == 'ro') {
                                // Romanian error messages
                                errorMessage = "Validarea a eșuat";
                            } else if (locale == 'ar') {
                                // Arabic error messages
                                errorMessage = "فشل التحقق من الصحة";
                            } else {
                                // Default to English
                                // errorMessage += Object.values(errors).join(", ");
                            }
                            if (jsonResponse.errors) {
                                errorMessage += ":<br> ";
                                errorMessage += Object.values(jsonResponse.errors).join(
                                    "<br>");
                                $('#formfailureMessage').text(errorMessage).fadeIn().delay(10000).fadeOut(); // Fade out after 2 seconds
                            }
                        }

                    });
                    return false;
                }
            });
        });
    </script>
@endsection