@include('home.header')
<style>
    .error {
        color: red;
        font-size: 13px;
        font-weight: 500;
    }
</style>
<main>
    <!-- ==================== Start Slider ==================== -->

    <header class="pg-header style2 style3 product-bg-img valign" style="background-image: url('{{ asset('img/about_us/slide.webp') }}'); background-size: 100%;"
        data-overlay-dark="6">
        <div class="container-xxl ontop">
            <div class="row">
                <div class="col-lg-7 col-md-10">
                    <div class="cont mb-80">
                        <h1 class="fw-800 fz-70">Contact Us .</h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="curve">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 100 100"
                preserveAspectRatio="none">
                <path d="M0 100 0 0 C15 120 35 120 100 0 L 100 100 Z" fill="#191b1d"></path>
            </svg>
        </div>
    </header>

    <!-- ==================== End Slider ==================== -->



    <!-- ==================== Start Contact ==================== -->

    <section class="contact section-padding">
        <div class="container-xxl">
            <div class="row">
                <div class="col-lg-6">
                    <div class="form md-mb50">

                        <h3 class="fw-700 mb-50">Get In Touch.</h3>

                        <form id="contact-form" method="post" action="{{ route('contact.save') }}">
                            @csrf
                            <div class="messages"></div>

                            <div class="controls">

                                <div class="form-group">
                                    <div class="sm-mb30">
                                        <input id="form_name" type="text" name="name" placeholder="Name"
                                            required="required">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div>
                                                <input id="form_phone_number" type="number" name="phone_number" placeholder="Phone Number"
                                                    required="required">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div>
                                                <input id="form_email" type="email" name="email" placeholder="Email"
                                                    required="required">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <input id="form_subject" type="text" name="subject" placeholder="Subject">
                                </div>

                                <div class="form-group">
                                    <textarea id="form_message" name="message" placeholder="Message" rows="4" required="required"></textarea>
                                </div>

                                <button type="submit" class="sub-title mb-0 mt-30"><span>Send
                                        Message</span></button>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-lg-4 offset-lg-1">
                    <div class="cont-info">
                        <h3 class="fw-700 mb-50">Contact Info.</h3>

                        <div class="item pb-30 mb-40 bord-thin-bottom">
                            <span class="mb-15"><a href="mailto:info@lucantechno.com" target="_blank">info@lucantechno.com</a></span>
                            <br>
                            <span>+91 9316614054</span><br>
                            <span>+91 9825806222</span><br>
                            <span>+91 8200282046</span><br>
                            <span>+91 7984266008</span>
                        </div>

                        <div class="item pb-30 bord-thin-bottom">
                            <span>3rd Floor, 57-60, Shri Ram Nagar Society, Above Samsung smart plaza, near Rashi Circle, Laxmikant Ashram Road, Katargam, Surat, Gujarat - 3950004</span>
                        </div>

                        <div class="contact social_icon">
                            <ul class="p-0 w-25 d-flex justify-content-between">
                                <li><a href="https://www.youtube.com/channel/UCjc5suxX6Mrav_iDoegBn8g" target="_blank"> <i class="fab fa-youtube" aria-hidden="true"></i> </a> </li>
                                <li><a href="https://in.linkedin.com/in/lucantechno" target="_blank"> <i class="fab fa-linkedin" aria-hidden="true"></i> </a> </li>
                                <li><a href="https://www.instagram.com/lucantechno/?hl=en" target="_blank"> <i class="fab fa-instagram-square" aria-hidden="true"></i> </a> </li>
                                <li><a href="https://www.facebook.com/Lucantechno/" target="_blank"> <i class="fab fa-facebook" aria-hidden="true"></i> </a> </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ==================== End Contact ==================== -->



    <!-- ==================== Start map ==================== -->

    <div>
        <div class="google-maps mb-100">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d249.6891495210921!2d72.83407967024208!3d21.231595318033563!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be04fa8a9b91789%3A0x52fee9439464542b!2sLucan%20Techno!5e1!3m2!1sen!2sin!4v1688636512064!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
    </div>

    <!-- ==================== End map ==================== -->

</main>
<script>
    $(document).ready(function() {

        $('#contact-form').validate();
        var options = {
            beforeSubmit: showRequest, 
            success: showResponse 
        };

        $('#contact-form').ajaxForm(options);
    });

    function showRequest(formData, jqForm, options) {
        return true;
    }

    function showResponse(responseText, statusText, xhr, $form) {
        if ($form[0]['id'] == "contact-form") {
            if (responseText['status'] == 1) {
                flasher.success(responseText['msg']);

                $('#form_name').val('');
                $('#form_phone_number').val('');
                $('#form_email').val('');
                $('#form_message').val('');
                $('#form_subject').val('');

            } else {
                alert('error');
                flasher.error(responseText['msg']);
            }
        }
    }
</script>
@include('home.footer')