<?php include('include/head.php'); ?>

<body>
    <!-- Spinner Start -->
    <div id="spinner"
        class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
        <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <!-- Spinner End -->


    <?php include('include/header.php'); ?>


<?php
                $banner = mysqli_query($conn, "SELECT * FROM `banners` where page_name='contact'");
                while($row = mysqli_fetch_array($banner))
                {
                    $photo = $row['banners'];
                }
                ?>
    <!-- Header Start -->
    <div class="container-fluid bg-primary page-header" style="background-image: url('<?php path(); ?>/admin/assets/images/banner-image/<?php echo $photo; ?>');">
        <div class="container ">
            <div class="row justify-content-center">
                <!-- <div class="col-lg-10 text-center">
                    <h1 class="text-white animated slideInDown">Contact</h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb justify-content-center">
                            <li class="breadcrumb-item"><a class="text-white" href="#">Home</a></li>
                            <li class="breadcrumb-item"><a class="text-white" href="#">Pages</a></li>
                            <li class="breadcrumb-item text-white active" aria-current="page">Contact</li>
                        </ol>
                    </nav>
                </div> -->
            </div>
        </div>
    </div>
    <!-- Header End -->

 
    <!-- === contact adresss section start ==== -->
    <section class="contact-adress">
        <div class="container-fluid px-lg-5">
            <div class="row">

                <div class="col-md-4 mt-5 ">
                    <div class="card">
                        <div class="card-body">
                        <div class="text-center">
                    <i class="fa-solid fa-location-dot fa-lg" style="font-size:40px; margin-bottom:10px"> </i> 
                     <p>  <a href="https://maps.app.goo.gl/Dsk5J1nvMH7gput66" target="_blank" >Unit 1: I - 3 UPSIDC Sikandrabad Industrial Area,Dist bulandshahar 203206  </a></p>
                     
                      <p>  <a href="#" >Unit 2: A3 - 32, Gopalpur Industrial Area Sikandrabad Dist bulandshahar 203205  </a></p>
                    </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4  mt-5 ">
                    <div class="card">
                        <div class="card-body">
                        <div class="text-center">
                <i class="fa-solid fa-envelope fa-lg" style="font-size:40px; margin-bottom:10px" ></i>
                <p> <a href="mailto:info@kwikrecycle.com">
                info@kwikrecycle.com </a> </p>
                </div>
                        </div>
                    </div>
                </div>
  
                <div class="col-md-4 mt-5 ">
                    <div class="card">
                        <div class="card-body">
                        <div class="text-center">
                <i class="fa-solid fa-phone fa-lg" style="font-size:40px; margin-bottom:10px"></i> 
                <p> <a href="tel:+91-9654936111"> +91-9654936111 </a> </p>
                <p> <a href="tel:18001209022"> Toll free number 18001209022 </a> </p>
                </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
<!-- === contact adresss section end ==== -->



      <!-- Contact Start -->
      <section class="final-contact">
        <div class="container-fluid  overflow-hidden py-5 px-lg-0">
            <div class="container-fluid px-lg-5 contact-page py-5 ">
                <div class="row g-5 mx-lg-0">

                <div class="col-md-6 wow fadeIn" data-wow-delay="0.1s">

                <img src="img/contact-img.png" alt="" >

                </div>
                  

                    <div class="col-md-6 contact-form wow fadeIn" data-wow-delay="0.1s">
                        <!-- <h6 class="text-secondary text-uppercase">Get In Touch</h6> -->
                        <h1 class="mb-4">Contact For Any Query</h1>
                        
                        <div class="bg-light p-4">
                            <form method="post">
                                <div class="row g-3">

                                    <div class="col-md-6">
                                        <div class="form-floating">
                                            <input type="text" class="form-control" name="name" id="name" placeholder="Your Name">
                                            <label for="name">Your Name</label>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                  <div class="form-floating">
                                  <input type="text" class="form-control phone" name="phone" id="number" placeholder="Your Phone Number" maxlength="10">
                                  <label for="number">Your Number</label>
                                 </div>
                                   </div>


                                    <div class="col-md-12">
                                        <div class="form-floating">
                                            <input type="email" class="form-control" id="email" name="email_id"
                                                placeholder="Your Email">
                                            <label for="email">Your Email</label>
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="form-floating">
                                            <input type="text" class="form-control" id="subject" name="subject" placeholder="Subject">
                                            <label for="subject">Subject</label>
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="form-floating">
                                            <textarea class="form-control" name="message" placeholder="Leave a message here"
                                                id="message" style="height: 100px"></textarea>
                                            <label for="message">Message</label>
                                        </div>
                                    </div>

                                    <div class="col-12 text-center">  
                                        <button class="btn btn-primary py-3" type="submit" name="send-message">Send Message</button>
                                    </div>

                                </div>
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>
    <!-- Contact End -->

<?php
            if(isset($_POST['send-message']))
            {
$contact_name=$_POST['name'];
$contact_phone=$_POST['phone'];
$contact_email=$_POST['email_id'];
$location=$_POST['subject'];
$message = $_POST['message'];
   
$to = "info@kwikrecycle.com";
$subject = "Website Enquiry Data";

$output ="
<html>
<head>
<title>Send Messages</title>
</head>
<body>
<p>Send Messages!</p>
<table border='1'>
<tr>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
<th>Subject</th>
<th>Message</th>
</tr>
<tr>
<td>$contact_name</td>
<td>$contact_phone</td>
<td>$contact_email</td>
<td>$location</td>
<td>$message</td>
</tr>
</table>
</body>
</html>
";

// Always set content-type when sending HTML email
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";

// More headers
$headers .= 'From:'. $contact_email .  "\r\n";
$headers .= 'Cc: myboss@example.com' . "\r\n";

$mail_send = mail($to,$subject,$output,$headers);   
if($mail_send){
  echo "<script>
window.location = 'https://kwikrecycle.com/thank-you';</script>";
}else{
    echo "Something Went Wrongs";
}
            }
?>  

    <!-- ==== number validation start ==== -->
    <script>
    document.getElementById('number').addEventListener('input', function () {
        var numberInput = document.getElementById('number');
        var numberValue = numberInput.value;

        // Remove non-digit characters
        numberValue = numberValue.replace(/\D/g, '');

        // Limit to 10 digits
        if (numberValue.length > 10) {
            numberValue = numberValue.substring(0, 10);
        }

        numberInput.value = numberValue;
    });

    document.querySelector('form').addEventListener('submit', function (event) {
        var numberValue = document.getElementById('number').value;
        if (numberValue.length !== 10) {
            alert('Please enter exactly 10 digits.');
            event.preventDefault(); // Prevent form submission
        }
    });
</script>
<!-- ==== number validation end ==== -->



    <!-- ==== map section start ==== -->
    <section>
        <div class="container-fluid px-lg-5">

        <div class="row">

        <div class="col-md-12">

        <!--<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3500.948014763248!2d77.42405357422415!3d28.661275182777295!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cf1cb70ffffff%3A0x1c86644827f30a6e!2s240%2C%20Purani%20Munsafi%2C%20Ghantaghar%2C%20Naya%20Ganj%2C%20Ghaziabad%2C%20Uttar%20Pradesh%20201001!5e0!3m2!1sen!2sin!4v1716361754434!5m2!1sen!2sin" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>-->
        
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3507.200233482211!2d77.6715129!3d28.473515900000002!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cbdc84ebefe03%3A0x7e6fb7d84707b499!2sKWIKSTOP%20RECYCLING%20SOLUTIONS%20PVT.%20LTD.!5e0!3m2!1sen!2sin!4v1719207513629!5m2!1sen!2sin" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>

        </div>

        </div>

    </section>


    <!-- ==== map section end ==== -->















    <?php include('include/footer.php'); ?>


</body>

</html>