<?php require('header.php') ?>

<!-- start page-title -->    
        <section class="page-title">
            <div class="page-title-bg"></div>
            <div class="container">
                <div class="title-box">
                    <h1>Contact us</h1>
                    <ol class="breadcrumb">
                        <li><a href="#">Home</a></li>
                        <li class="active">Contact us</li>
                    </ol>
                </div>
            </div> <!-- end container -->
        </section>
        <!-- end page-title -->


        <!-- start contact-main-content -->
<section class="contact-main-content py-5 bg-light">
    <div class="container">
        <!-- Contact Info -->
        <div class="row text-center mb-5" style="margin-top:50px; margin-bottom:50px;">
            <div class="col-md-4 mb-4">
                <div class="p-3  rounded shadow-sm h-100" style="padding:20px !important; border-radius:10px !important; box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; background-color:white; ">
                    <div class="mb-3  fs-3" style="color:#ff6200;">
                        <i class="fa fa-map-marker " style="font-size:50px;"></i>
                    </div>
                    <h5 class="mb-2">Address</h5>
                    <p class="mb-0"><?php echo $address ?></p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="p-3 border rounded shadow-sm h-100" style="padding:20px !important; border-radius:10px !important; box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; background-color:white; ">
                    <div class="mb-3  fs-3" style="color:#ff6200;">
                        <i class="fa fa-envelope-o" style="font-size:50px;"></i>
                    </div>
                    <h5 class="mb-2">Email</h5>
                    <p class="mb-1"><?php echo $email ?></p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="p-3 border rounded shadow-sm h-100" style="padding:20px !important; border-radius:10px !important; box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; background-color:white;">
                    <div class="mb-3  fs-3" style="color:#ff6200;">
                        <i class="fa fa-phone" style="font-size:50px;"></i>
                    </div>
                    <h5 class="mb-2">Phone</h5>
                    <p class="mb-1"><?php echo $phone ?></p>
                    <p class="mb-0">+91 8178853679</p>
                </div>
            </div>
        </div>

        
    </div>
</section>
<!-- end contact-main-content -->
    <style>
        body {
            background-color: #fff3e0;
            font-family: Arial, sans-serif;
        }
        .contact-container {
            max-width: 1200px;
            margin: 40px auto;
            padding: 30px;
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            border: 2px solid #ff6200;
        }
        h2 {
            color: #ff6200;
            text-align: center;
            margin-bottom: 20px;
        }
        .form-label {
            color: #333;
            font-weight: bold;
        }
        .form-control {
            border-color: #ff8c00;
        }
        .form-control:focus {
            border-color: #e65100;
            box-shadow: 0 0 5px rgba(230, 81, 0, 0.5);
        }
        .btn-orange {
            background-color: #ff6200;
            border-color: #ff6200;
            color: #fff;
          width:200px;
          text-align:center;
        }
        .btn-orange:hover {
            background-color: #e65100;
            border-color: #e65100;
        }
        .error {
            color: #dc3545;
            font-size: 0.875rem;
            display: none;
            margin-top: 5px;
        }
        .contact-info {
            margin-top: 20px;
            text-align: center;
            color: #333;
        }
        .contact-info p {
            margin: 5px 0;
        }
        .contact-info a {
            color: #ff6200;
            text-decoration: none;
        }
        .contact-info a:hover {
            color: #e65100;
        }
    </style>
<div class="container contact-container">
        <h2>Contact Serve Shiksha Foundation</h2>
        <form id="contactForm" action="submit_contact.php" method="POST" onsubmit="return validateForm()">
            <div class="mb-3">
                <label for="name" class="form-label">Full Name</label>
                <input type="text" class="form-control" id="name" name="name" required>
                <div class="error" id="nameError">Please enter your full name</div>
            </div>
            <div class="mb-3">
                <label for="email" class="form-label">Email Address</label>
                <input type="email" class="form-control" id="email" name="email" required>
                <div class="error" id="emailError">Please enter a valid email address</div>
            </div>
            <div class="mb-3">
                <label for="phone" class="form-label">Phone Number</label>
                <input type="tel" class="form-control" id="phone" name="phone">
                <div class="error" id="phoneError">Please enter a valid 10-digit phone number</div>
            </div>
            <div class="mb-3">
                <label for="message" class="form-label">Message</label>
                <textarea class="form-control" id="message" name="message" rows="5" required></textarea>
                <div class="error" id="messageError">Please enter your message</div>
            </div>
            <button type="submit" class="btn btn-orange w-100 mt-4" style="margin-top:5px;">Submit</button>
        </form>
       
    </div>

    <script>
        function validateForm() {
            let isValid = true;

            // Reset error messages
            document.querySelectorAll('.error').forEach(error => error.style.display = 'none');

            // Name validation
            const name = document.getElementById('name').value.trim();
            if (!name) {
                document.getElementById('nameError').style.display = 'block';
                isValid = false;
            }

            // Email validation
            const email = document.getElementById('email').value.trim();
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!email || !emailRegex.test(email)) {
                document.getElementById('emailError').style.display = 'block';
                isValid = false;
            }

            // Phone validation (optional, but if provided, should be valid)
            const phone = document.getElementById('phone').value.trim();
            const phoneRegex = /^[0-9]{10}$/;
            if (phone && !phoneRegex.test(phone)) {
                document.getElementById('phoneError').style.display = 'block';
                isValid = false;
            }

            // Message validation
            const message = document.getElementById('message').value.trim();
            if (!message) {
                document.getElementById('messageError').style.display = 'block';
                isValid = false;
            }

            if (isValid) {
                alert('Form is valid and ready to submit!');
                // Form will submit to the action URL (submit_contact.php)
            }

            return isValid;
        }
    </script>

      <?php require('footer.php') ?>