@extends('layout.master')
@section('meta_title', 'Get in Touch with Our IT Experts')
@section('meta_description', 'Trusted by businesses worldwide for delivering scalable and high-performance IT solutions.')

@section('content')
    <div class="page-header bg-main-section parallaxie">
        <div class="page-header-box">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="page-header-content">
                            <h1 class="wow fadeInUp">Contact <span>Us</span></h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="page-contact-us">
        <div class="container">
            <div class="row section-row align-items-center">
                <div class="col-lg-7 col-md-9">

                    <div class="section-title">
                        <h3 class="wow fadeInUp">get in touch</h3>
                        <h2 class="wow fadeInUp" data-wow-delay="0.25s">Let’s Build Something <br />
                            <span>Great Together</span>
                        </h2>
                    </div>

                </div>


            </div>
            <div class="row align-items-center">
                <div class="col-lg-6">

                    <div class="contact-us-form">

                        <div class="contact-us-title">
                            <h3 class="wow fadeInUp">send a message</h3>
                            <p class="wow fadeInUp" data-wow-delay="0.2s">Have a project in mind? Curious about what we
                                do? Just want to say hi? You’re in the right place.</p>
                        </div>

                        <form id="contactForm" action="{{ route('contact.submit') }}" method="POST" data-toggle="validator"
                            class="wow fadeInUp" data-wow-delay="0.4s">
                            @csrf

                            <div class="row">

                                <div class="form-group col-md-6 mb-4">
                                    <input type="text" name="fname" class="form-control" placeholder="First Name">
                                    <small class="text-danger fname_error"></small>
                                </div>

                                <div class="form-group col-md-6 mb-4">
                                    <input type="text" name="lname" class="form-control" placeholder="Last Name">
                                    <small class="text-danger lname_error"></small>
                                </div>

                                <div class="form-group col-md-6 mb-4">
                                    <input type="email" name="email" class="form-control" placeholder="Email Address">
                                    <small class="text-danger email_error"></small>
                                </div>

                                <div class="form-group col-md-6 mb-4">
                                    <input type="text" name="phone" class="form-control" placeholder="Phone Number">
                                    <small class="text-danger phone_error"></small>
                                </div>

                                <div class="form-group col-md-12 mb-4">
                                    <textarea name="message" class="form-control" rows="4" placeholder="Message"></textarea>
                                    <small class="text-danger message_error"></small>
                                </div>

                                <div class="col-lg-12">
                                    <button type="submit" class="btn-default">Submit Message</button>
                                    <div id="msgSubmit" class="mt-3"></div>
                                </div>

                            </div>
                        </form>


                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="contact-information">
                        <div class="contact-info-item wow fadeInUp">

                            <!-- <div class="contact-info-contant">
                                        <h3>call us</h3>
                                    </div> -->

                            <div class="contact-info-body">
                                <div class="icon-box">
                                    <img src="{{ asset('front/images/icon-phone.svg') }}" alt="">
                                </div>

                                <div class="contact-info-title">
                                    <h3>+44 7447 133450</h3>
                                </div>
                            </div>

                        </div>

                        <div class="contact-info-item wow fadeInUp" data-wow-delay="0.25s">

                            <!-- <div class="contact-info-contant">
                                        <h3>email us</h3>
                                    </div> -->

                            <div class="contact-info-body">
                                <div class="icon-box">
                                    <img src="{{ asset('front/images/icon-mail.svg') }}" alt="">
                                </div>

                                <div class="contact-info-title">
                                    <h3>contact@steservicesltd.com</h3>
                                </div>
                            </div>

                        </div>

                        <div class="contact-info-item wow fadeInUp" data-wow-delay="0.5s">

                            <!-- <div class="contact-info-contant">
                                        <h3>visit us</h3>
                                    </div> -->

                            <div class="contact-info-body">
                                <div class="icon-box">
                                    <img src="{{ asset('front/images/icon-location.svg') }}" alt="">
                                </div>

                                <div class="contact-info-title">
                                    <h3>1-5 The Parade Monarch Way, Ilford, IG2 7HT</h3>
                                </div>
                            </div>

                        </div>

                        <div class="gmap_part">
                            <iframe
                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2479.631380502666!2d0.08579287690288372!3d51.57499080576292!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a70cecccb2d1%3A0x71bc0cf8451b62fc!2sBio%20Luminuex%20Health%20Care%20Ltd!5e0!3m2!1sen!2sin!4v1758107711995!5m2!1sen!2sin"
                                allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" height="280"
                                width="100%"></iframe>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection


@push('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>

        $(document).ready(function() {

    $('#contactForm').submit(function(e) {
        e.preventDefault();

        let form = $(this);
        let btn = form.find('button[type="submit"]');

        // reset errors
        $('.text-danger').text('');

        btn.prop('disabled', true).text('Sending...');

        $.ajax({
            url: form.attr('action'),
            type: "POST",
            data: form.serialize(),

            success: function(res) {

                btn.prop('disabled', false).text('Submit Message');

                if (res.status) {

                    toastr.success(res.message);

                    form[0].reset();

                } else {
                    toastr.error('Something went wrong!');
                }
            },

            error: function(xhr) {

                btn.prop('disabled', false).text('Submit Message');

                if (xhr.status === 422) {

                    let errors = xhr.responseJSON.errors;

                    $.each(errors, function(key, value) {
                        toastr.error(value[0]);
                    });

                } else {
                    toastr.error('Something went wrong!');
                }
            }
        });
    });

});
    </script>
@endpush