@extends('layouts.master')
@section('title', 'Contact Us | Myositis India – Get in Touch for Support & Information')
@section('description', 'Get in touch with Myositis India for questions, collaborations, or support.')
@section('canonical', 'https://www.myositisindia.org/contact')
@section('content')

<div class="container">

    <section id="content">



        <!-- Page Heading -->

        <section class="section page-heading animate-onscroll">



            <h1>Contact</h1>

            <p class="breadcrumb"><a href="main-v1.html">Home</a> / Contact</p>



        </section>

        <!-- Page Heading -->







        <!-- Section -->

        <section class="section full-width-bg gray-bg">



            <div class="row">





                <div class="col-lg-9 col-md-9 col-sm-8">



                    <h3 class="animate-onscroll no-margin-top">Our Location</h3>



                    <div class="contact-map">

                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!19m3!1d3501.9358661318397!2d77.20281511440719!3d28.63168419087161!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd503a332f27%3A0x5eb9ba30999646d9!2s23%2C%20Bhai%20Vir%20Singh%20Marg%2C%20Sector%202%2C%20Gole%20Market%2C%20New%20Delhi%2C%20Delhi%20110001!5e0!3m2!1sen!2sin!4v1679550700787!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>                    </div>


<br><br>
                    <div class="row">



                        <div class="col-lg-4 col-md-4 col-sm-6 animate-onscroll">



                            <h6>Mailing Address</h6>

                            <p>23, Bhai Veer Singh Marg, Gole Market, <br>

                                New Delhi - 110001 </p>



                        </div>



                        <div class="col-lg-4 col-md-4 col-sm-6 animate-onscroll">



                            <h6>Phone Numbers</h6>

                          <p>+91 9350646454<br>

                            +91 9810973757</p>



                        </div>



                        <div class="col-lg-4 col-md-4 col-sm-6 animate-onscroll">



                            <h6>Email Addresses</h6>

                            <p><a href="mailto:info@myositisindia.com">info@myositisindia.org</a><br>

                                <a href="mailto:queries@myositisindia.com">india.myositis@gmail.com</a>

                            </p>



                        </div>



                    </div>







                    <h3>We want to hear from you</h3>



                    <p> </p><br>



                    <form id="contact-form" action="php/contact-form.php" method="POST">

<div class="inline-inputs">
    <!-- First Name -->
    <div class="col-lg-6 col-md-6 col-sm-12">
        <label>First name*</label>
        <input type="text" name="contact-firstname" required>
    </div>

    <!-- Last Name -->
    <div class="col-lg-6 col-md-6 col-sm-12">
        <label>Last name*</label>
        <input type="text" name="contact-lastname" required>
    </div>

    <!-- Address -->
    <div class="col-lg-6 col-md-6 col-sm-12">
        <label>Address</label>
        <input type="text" name="contact-address">
    </div>

    <!-- Mobile -->
    <div class="col-lg-6 col-md-6 col-sm-12">
        <label>Mobile*</label>
        <input type="text" name="contact-mobile" required>
    </div>

    <!-- Country -->
    <div class="col-lg-6 col-md-6 col-sm-12">
        <label>Country</label>
        <input type="text" name="contact-country">
    </div>

    <!-- State -->
    <div class="col-lg-6 col-md-6 col-sm-12">
        <label>State</label>
        <input type="text" name="contact-state">
    </div>

    <!-- City -->
    <div class="col-lg-6 col-md-6 col-sm-12">
        <label>City</label>
        <input type="text" name="contact-city">
    </div> 

    <!-- Message -->
    <div class="col-lg-12 col-md-12 col-sm-12">
        <label>Your questions/comments</label>
        <textarea rows="10" name="contact-message" required></textarea>
    </div>
</div>

<!-- Submit Button -->
<input type="submit" value="Submit">

</form>

<script>
// Prevent form submission if JavaScript is handling it
document.getElementById('contact-form').addEventListener('submit', function(event) {
    event.preventDefault(); // Disable default form submission
    // Handle your form submission here if needed
    // Example: validate the form or submit via AJAX
    // In case you want to allow normal form submission, comment out the line above.

    var formData = new FormData(this);
    
    fetch('php/contact-form.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.text())
    .then(data => {
        alert("Form submitted successfully");
        // Optionally, reset the form here
        document.getElementById('contact-form').reset();
    })
    .catch(error => {
        console.error("Error during form submission", error);
    });
});
</script>






                </div>







                <!-- Sidebar -->

                 

                    @include('myositis.sidebarforpages');

                

                <!-- /Sidebar -->







            </div>



        </section>

        <!-- /Section -->



    </section>



</div>

   

@endsection