{% extends 'main/base.html' %}
{% block title %}Contact Us - Monaco Institute{% endblock %}

{% block content %}
<section class="page-banner">
    <div class="container">
        <h1>Contact Us</h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-custom">
                <li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li>
                <li class="breadcrumb-item active">Contact</li>
            </ol>
        </nav>
    </div>
</section>

<section class="py-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 mb-4" data-aos="fade-right">
                <div class="contact-info-card">
                    <h5>Get In Touch</h5>
                    <div class="contact-info-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <div>
                            <strong>Address</strong>
                            <p class="mb-0 small">{{ settings.address }}</p>
                        </div>
                    </div>
                    <div class="contact-info-item">
                        <i class="fas fa-phone"></i>
                        <div>
                            <strong>Phone</strong>
                            <p class="mb-0 small">{{ settings.phone }}</p>
                        </div>
                    </div>
                    <div class="contact-info-item">
                        <i class="fas fa-envelope"></i>
                        <div>
                            <strong>Email</strong>
                            <p class="mb-0 small">{{ settings.email }}</p>
                        </div>
                    </div>
                    <div class="contact-info-item">
                        <i class="fas fa-clock"></i>
                        <div>
                            <strong>Office Hours</strong>
                            <p class="mb-0 small">Mon–Fri: 8:00am – 5:00pm<br>Saturday: 9:00am – 1:00pm</p>
                        </div>
                    </div>
                    <div class="mt-4">
                        <p class="small opacity-75">Follow Us:</p>
                        <div class="footer-social">
                            {% if settings.facebook_url %}<a href="{{ settings.facebook_url }}"><i class="fab fa-facebook-f"></i></a>{% endif %}
                            {% if settings.twitter_url %}<a href="{{ settings.twitter_url }}"><i class="fab fa-twitter"></i></a>{% endif %}
                            {% if settings.linkedin_url %}<a href="{{ settings.linkedin_url }}"><i class="fab fa-linkedin-in"></i></a>{% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-8" data-aos="fade-left">
                <div class="admission-form-wrap">
                    <h3 class="section-title">Send Us a Message</h3>
                    <div class="title-bar mb-4"></div>
                    <form method="post">
                        {% csrf_token %}
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Your Name *</label>
                                {{ form.name }}
                                {% if form.name.errors %}<div class="text-danger small mt-1">{{ form.name.errors.0 }}</div>{% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Email Address *</label>
                                {{ form.email }}
                                {% if form.email.errors %}<div class="text-danger small mt-1">{{ form.email.errors.0 }}</div>{% endif %}
                            </div>
                            <div class="col-12 mb-3">
                                <label class="form-label">Subject *</label>
                                {{ form.subject }}
                                {% if form.subject.errors %}<div class="text-danger small mt-1">{{ form.subject.errors.0 }}</div>{% endif %}
                            </div>
                            <div class="col-12 mb-4">
                                <label class="form-label">Message *</label>
                                {{ form.message }}
                                {% if form.message.errors %}<div class="text-danger small mt-1">{{ form.message.errors.0 }}</div>{% endif %}
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary-custom btn-lg">
                                    <i class="fas fa-paper-plane me-2"></i>Send Message
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Google Maps -->
        <div class="mt-5" data-aos="fade-up">
            <iframe 
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3988.808287994618!2d32.5813!3d0.3476!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x177dba6d5a6d5d6d%3A0x5d4e8f7c8b9a1f2e!2sMbogo%20Road%2C%20Kibuli%2C%20Kampala%2C%20Uganda!5e0!3m2!1sen!2sug!4v1234567890!5m2!1sen!2sug" 
                width="100%" 
                height="350" 
                style="border:0;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.1);" 
                allowfullscreen="" 
                loading="lazy" 
                referrerpolicy="no-referrer-when-downgrade">
            </iframe>
        </div>
    </div>
</section>
{% endblock %}