<?php
$pageTitle = 'Contact Us | IBVTE - Indian Board of Vocational and Technical Education';
$pageDesc  = 'Get in touch with the Indian Board of Vocational and Technical Education (IBVTE). Our contact details and inquiry form.';
require_once __DIR__ . '/includes/header.php';
?>
<link rel="stylesheet" href="<?php echo $base; ?>assets/css/pages.css">

<!-- Page Hero -->
<div class="ibvte-page-hero">
    <div class="container">
        <nav aria-label="breadcrumb" class="ibvte-breadcrumb mb-2">
            <ol class="breadcrumb mb-0 small">
                <li class="breadcrumb-item"><a href="<?php echo $base; ?>index.php">Home</a></li>
                <li class="breadcrumb-item active">Contact Us</li>
            </ol>
        </nav>
        <h1><i class="fas fa-headset me-2"></i>Contact Us</h1>
        <p>We are here to help you. Reach out to us for any queries.</p>
    </div>
</div>

<!-- Main Content -->
<section class="ibvte-section bg-light">
    <div class="container">
        <div class="row g-5">
            <!-- Contact Details -->
            <div class="col-lg-5">
                <div class="ibvte-section-card h-100" data-aos="fade-right">
                    <h2 class="mb-4">Official Communication</h2>
                    
                    <div class="d-flex mb-4">
                        <div class="contact-icon-box me-3">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div>
                            <h5 class="fw-bold mb-1">Registered Address (Meerut)</h5>
                            <p class="text-muted small">60 Futa Road, Samar Garden Colony, Meerut (UP) – 250002</p>
                        </div>
                    </div>

                    <div class="d-flex mb-4">
                        <div class="contact-icon-box me-3">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div>
                            <h5 class="fw-bold mb-1">Delhi Office (Address 2)</h5>
                            <p class="text-muted small">6/23, 33 Futa Road, Kabir Nagar, Shahdara Road, Delhi - 110094</p>
                        </div>
                    </div>

                    <div class="d-flex mb-4">
                        <div class="contact-icon-box me-3">
                            <i class="fas fa-phone-alt"></i>
                        </div>
                        <div>
                            <h5 class="fw-bold mb-1">Phone Numbers</h5>
                            <p class="text-muted small">+91-9627769817<br>+91-9639681797</p>
                        </div>
                    </div>

                    <div class="d-flex mb-4">
                        <div class="contact-icon-box me-3">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div>
                            <h5 class="fw-bold mb-1">Email Address</h5>
                            <p class="text-muted small">ibvtenewdelhi@gmail.com</p>
                        </div>
                    </div>

                    <div class="d-flex mb-4">
                        <div class="contact-icon-box me-3">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div>
                            <h5 class="fw-bold mb-1">Working Hours</h5>
                            <p class="text-muted small">Monday – Saturday: 10:00 AM – 06:00 PM<br>Sunday: Closed</p>
                        </div>
                    </div>

                    <hr class="my-4">
                    
                    <h5 class="fw-bold mb-3">Follow Us</h5>
                    <div class="d-flex gap-2">
                        <a href="#" class="btn btn-primary btn-sm rounded-circle"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="btn btn-info btn-sm rounded-circle text-white"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="btn btn-danger btn-sm rounded-circle"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
            </div>

            <!-- Contact Form -->
            <div class="col-lg-7">
                <div class="ibvte-section-card h-100" data-aos="fade-left">
                    <h2 class="mb-4">Send us a Message</h2>
                    <form id="contactForm" action="<?php echo $base; ?>api/contact_handler.php" method="POST">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label small fw-bold">Full Name</label>
                                <input type="text" name="name" class="form-control" placeholder="Your Name" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-bold">Email Address</label>
                                <input type="email" name="email" class="form-control" placeholder="Your Email" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-bold">Phone Number</label>
                                <input type="tel" name="phone" class="form-control" placeholder="Your Phone" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-bold">Subject</label>
                                <select name="subject" class="form-select" required>
                                    <option value="" selected disabled>Choose Subject</option>
                                    <option value="Affiliation Query">Affiliation Query</option>
                                    <option value="Student Result">Student Result</option>
                                    <option value="Exam Schedule">Exam Schedule</option>
                                    <option value="Other">Other</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label small fw-bold">Your Message</label>
                                <textarea name="message" class="form-control" rows="5" placeholder="How can we help you?" required></textarea>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary px-5 py-2 rounded-pill fw-bold">
                                    <i class="fas fa-paper-plane me-2"></i>Send Message
                                </button>
                            </div>
                        </div>
                        <div id="formResponse" class="mt-3"></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Google Maps Embed (Placeholder for Meerut Location) -->
<section class="py-0">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d111617.98394468696!2d77.63212871141757!3d28.98464402636283!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390c64435ebc1ebf%3A0xd64483758651a08e!2sMeerut%2C%20Uttar%20Pradesh!5e0!3m2!1sen!2sin!4v1714392000000!5m2!1sen!2sin" width="100%" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</section>

<style>
.contact-icon-box {
    width: 45px;
    height: 45px;
    background: #f8f3ff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 1.2rem;
    flex-shrink: 0;
    border: 1px solid #e8d8ff;
}
</style>

<script>
document.getElementById('contactForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const btn = this.querySelector('button[type="submit"]');
    const responseDiv = document.getElementById('formResponse');
    
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Sending...';
    
    const formData = new FormData(this);
    
    fetch(this.action, {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if(data.success) {
            responseDiv.innerHTML = '<div class="alert alert-success">' + data.message + '</div>';
            this.reset();
        } else {
            responseDiv.innerHTML = '<div class="alert alert-danger">' + data.message + '</div>';
        }
    })
    .catch(error => {
        responseDiv.innerHTML = '<div class="alert alert-danger">An error occurred. Please try again.</div>';
    })
    .finally(() => {
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-paper-plane me-2"></i>Send Message';
    });
});
</script>

<?php require_once __DIR__ . '/includes/footer.php'; ?>
