{% extends 'website/layouts/base.html' %}
{% load static %}

{% block title %}Contact Us{% endblock %}

{% block content %}


<section class="page-hero bg_cover p-r z-1" data-src="{% static 'assets/images/choose-bg.jpg' %}">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="page-content text-center">
                    <h1>Contact Us</h1>
                    <ul>
                        <li><a href="{% url 'home' %}">Home</a></li>
                        <li>Contact Us</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="orbia-contact-info-sec pt-80 pb-80">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-5 col-lg-5">
                <div class="orbia-content-box">
                    <div class="section-title">
                        <span class="sub-title" data-aos="fade-down" data-aos-duration="800">Get in touch</span>
                        <h2 class="text-anm">Contact with Us <span> For Your Any Help </span> </h2>
                    </div>
                    <p class="mb-20" data-aos="fade-up" data-aos-duration="1000">We’d love to hear from you! Whether you
                        have questions, need more information, or are ready to discuss how we can help you.</p>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="info-list mb-15" data-aos="fade-up" data-aos-duration="1000">
                                <h6>Call Center:</h6>
                                <p class="m-0"><a href="tel:8929 222 448">8929 222 448</a></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-list mb-15" data-aos="fade-up" data-aos-duration="1100">
                                <h6>Our Location:</h6>
                                <p class="m-0">3rd Floor, NDM-1, NSP, Pitampura, Delhi 110034</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-list mb-15" data-aos="fade-up" data-aos-duration="1200">
                                <h6>Our Social:</h6>
                                <div class="social-box mt-10">
                                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                                    <a href="#"><i class="fab fa-twitter"></i></a>
                                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                                    <a href="#"><i class="fab fa-youtube"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-list mb-15" data-aos="fade-up" data-aos-duration="1300">
                                <h6>Our Email:</h6>
                                <p class="m-0"><a href="mailto:sales@aidigitalranker.com">sales@aidigitalranker.com</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-7 col-lg-7 orbia-contact_three">
                <div class="contact-wrapper text-center" data-aos="fade-up" data-aos-duration="1000">
                    <h3 class="title">Get In Touch</h3>
                    {% if success %}
                    <div class="alert alert-success alert-dismissible fade show text-start mb-4" role="alert">
                        <strong>Success!</strong> Your message has been sent successfully. We will get back to you shortly.
                    </div>
                    {% endif %}
                    {% if messages %}
                        {% for message in messages %}
                            {% if message.tags != 'success' %}
                            <div class="alert alert-danger alert-dismissible fade show text-start mb-4" role="alert">
                                {{ message }}
                            </div>
                            {% endif %}
                        {% endfor %}
                    {% endif %}
                    <form method="post" action="{% url 'contact' %}">
                        {% csrf_token %}

                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <input type="text" class="form_control" placeholder="Your name" name="name"
                                        required>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <input type="email" class="form_control" placeholder="Email Address" name="email"
                                        required>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <input type="text" class="form_control" placeholder="Phone Number" name="phone"
                                        required>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <input type="text" class="form_control" placeholder="Subject" name="subject"
                                        required>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <textarea class="form_control" placeholder="Message" rows="5"
                                        name="message"></textarea>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <button class="theme-btn gradient-btn">Send Message<i
                                            class="fa fa-arrow-right"></i></button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="pb-80">
    <div class="container-fluid p0">
        <div class="row justify-content-center">
            <div class="col-lg-12">
                <div class="map-box" data-aos="fade-up" data-aos-duration="1200">
                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3499.966570745626!2d77.14845237457521!3d28.690646581440923!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390d023491c857d5%3A0x20dcb31b3c25ce1d!2sN%20D%20M%201!5e0!3m2!1sen!2sin!4v1785399930056!5m2!1sen!2sin"
                        width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                        referrerpolicy="strict-origin-when-cross-origin"></iframe>
                </div>
            </div>
        </div>
    </div>
</section>



{% endblock %}