@extends('layouts.app')

@section('content')

    <!-- Page Title -->
    <div class="page-title">
        <nav class="breadcrumbs">
            <div class="container">
                <ol>
                    <li><a href="{{ route('index') }}">Home</a></li>
                    <li class="current">Contact</li>
                </ol>
            </div>
        </nav>
    </div><!-- End Page Title -->

    <!-- Contact Section -->
    <section id="contact" class="contact section">

        <div class="container" data-aos="fade-up" data-aos-delay="100">
            <div class="row g-5">
                <div class="col-lg-5">
                    <div class="contact-info-wrapper">
                        <div class="contact-info-item" data-aos="fade-up" data-aos-delay="100">
                            <div class="info-icon">
                                <i class="bi bi-geo-alt"></i>
                            </div>
                            <div class="info-content">
                                <h3>Our Address</h3>
                                <p>University of the Punjab</p>
                            </div>
                        </div>

                        <div class="contact-info-item" data-aos="fade-up" data-aos-delay="200">
                            <div class="info-icon">
                                <i class="bi bi-envelope"></i>
                            </div>
                            <div class="info-content">
                                <h3>Email Address</h3>
                                <p>Email</p>
                                <p>Email</p>
                            </div>
                        </div>

                        <div class="contact-info-item" data-aos="fade-up" data-aos-delay="300">
                            <div class="info-icon">
                                <i class="bi bi-headset"></i>
                            </div>
                            <div class="info-content">
                                <h3>Hours of Operation</h3>
                                <p>Sunday-Fri: 9 AM - 6 PM</p>
                                <p>Saturday: 9 AM - 4 PM</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-7">
                    <div class="contact-form-card" data-aos="fade-up" data-aos-delay="200">
                        <h2>Send us a Message</h2>
                        <p class="mb-4">Use this form for general questions, appointment support, or feedback. For emergencies, please call your local emergency number.</p>

                        <form action="" method="post" class="php-email-form">
                            <div class="row g-4">
                                <div class="col-md-6">
                                    <input type="text" class="form-control" name="name" id="name" placeholder="Your Name" required="">
                                </div>

                                <div class="col-md-6">
                                    <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required="">
                                </div>

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

                                <div class="col-12">
                                    <textarea class="form-control" name="message" id="message" placeholder="Your Message" rows="6" required=""></textarea>
                                </div>

                                <div class="col-12">
                                    <div class="loading">Loading</div>
                                    <div class="error-message"></div>
                                    <div class="sent-message">Your message has been sent. Thank you!</div>
                                </div>

                                <div class="col-12">
                                    <button type="submit" class="btn btn-submit">Send Message</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </section><!-- /Contact Section -->

@endsection