{% extends "base.html" %}
{% load static %}
<title>{% block title %}{% endblock %}</title>
{% block content %}

<!-- PAGE TITLE
    ================================================== -->
        <section class="page-title-section bg-img cover-background top-position1 left-overlay-secondary" data-overlay-dark="8" data-background="{% static 'img/banner/5.png' %}">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-8 text-center">
                        <h1>Contact <span class="fw-bold text-primary">us</span></h1>
                        <ul class="list-unstyled d-inline-flex gap-2">
                            <li><a href="{% url 'home' %}">Home</a></li>
                            <li>/</li>
                            <li>Contact us</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="line-animated">
                <span class="animated">&nbsp;</span>
                <span class="animated">&nbsp;</span>
                <span class="animated">&nbsp;</span>
                <span class="animated">&nbsp;</span>
                <span class="animated">&nbsp;</span>
            </div>
        </section>

       <!-- CONTACT DETAILS ================================================== -->
<section class="contact-style01">
    <div class="container">
        <div class="row mt-n1-9">

            <!-- Left Section (Contact Blocks) -->
            <div class="col-lg-6 mt-1-9">
                <div class="pe-xl-6">

                    <div class="row mt-n1-9">

                        <div class="col-md-6 mt-1-9">
                            <div class="contact-bg rounded text-center">
                                <div class="icon"><i class="fa-solid fa-location-dot"></i></div>
                                <h4 class="mb-3">Address</h4>
                                <p class="mb-0">
                                    D.No 20-9-30 & 20-9-34/A, Etukur Road,<br>
                                    Opp. Saketh Nath Ricemill, Near Kanyakaparmeswari Temple,<br>
                                    Guntur, Andhra Pradesh, 522003.
                                </p>
                            </div>
                        </div>

                        <div class="col-md-6 mt-1-9">
                            <div class="contact-bg rounded text-center">
                                <div class="icon"><i class="fa-solid fa-headset"></i></div>
                                <h4 class="mb-3">24/7 Support</h4>
                                <p class="mb-0">
                                    Real-time assistance and guidance for projects.
                                </p>
                            </div>
                        </div>

                        <div class="col-md-6 mt-1-9">
                            <div class="contact-bg rounded text-center">
                                <div class="icon"><i class="fa-regular fa-clock"></i></div>
                                <h4 class="mb-3">Working Hours</h4>
                                <p class="mb-0">Monday-Friday:10AM-6 PM|Saturday,Sunday Closed</p>
                            </div>
                        </div>

                        <div class="col-md-6 mt-1-9">
                            <div class="contact-bg rounded text-center">
                                <div class="icon"><i class="fa-regular fa-envelope"></i></div>
                                <h4 class="mb-3">Send Email</h4>
                                <div class="content">
                                    <a href="mailto:abcgopi123@gmail.com">abcgopi123@gmail.com</a>
                                    <!-- <a href="https://www.svipd.com" target="_blank">www.svipd.com</a> -->
                                </div>
                            </div>
                        </div>

                    </div><!-- END inner row -->

                </div>
            </div>

            <div class="col-lg-6 mt-1-9">
                <div class="conatct-form border border-color-light-black bg-secondary rounded">
                    <form class="contact " action="{% url 'contact' %}" method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                     {% if messages %}
                        <div class="mt-3">
                            {% for message in messages %}
                            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                            {% endfor %}
                        </div>
                        {% endif %}

                        <div class="quform-elements">
                            <div class="row">

                                <div class="col-md-6">
                                    <div class="quform-element form-group">
                                        <label>Your Name <span class="quform-required">*</span></label>
                                        <input class="form-control" type="text" name="name" placeholder="Your name here">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="quform-element form-group">
                                        <label>Your Email <span class="quform-required">*</span></label>
                                        <input class="form-control" type="email" name="email" placeholder="Your email here">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="quform-element form-group">
                                        <label>Subject <span class="quform-required">*</span></label>
                                        <input class="form-control" type="text" name="subject" placeholder="Your subject here">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="quform-element form-group">
                                        <label>Phone</label>
                                        <input class="form-control" type="text" name="phone" placeholder="Your phone here">
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="quform-element form-group">
                                        <label>Message <span class="quform-required">*</span></label>
                                        <textarea class="form-control" rows="3" name="message" placeholder="Tell us a few words"></textarea>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <button class="btn-style01 white primary-hover border-0" type="submit">
                                        <span></span>Send Message
                                    </button>
                                </div>

                            </div>
                        </div>

                    </form>
                </div>
            </div>


        </div>
    </div>
</section>

<style>
/* Contact Card Base */
.contact-bg {
    background: #e9ebea; /* Light neutral background */
    color: #333;
    padding: 30px 20px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    cursor: pointer;
    border: 1px solid #e0e0e0;
}

.contact-bg .icon {
    font-size: 36px;
    margin-bottom: 15px;
    color: #007bff;
    transition: transform 0.3s ease, color 0.3s ease;
}

.contact-bg h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    transition: color 0.3s ease;
}

.contact-bg p, .contact-bg .content a {
    color: #555;
    font-size: 14px;
}

.contact-bg .content a {
    display: block;
    text-decoration: none;
    margin-top: 5px;
    transition: color 0.3s ease;
}

/* Hover Effects */
.contact-bg:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 25px rgba(0,0,0,0.15);
    border-color: #007bff;
}

.contact-bg:hover .icon {
    transform: scale(1.2);
    color: #0056b3;
}

.contact-bg:hover h4 {
    color: #0056b3;
}

.contact-bg:hover .content a {
    color: #007bff;
}
</style>

        <!-- SOCIAL ICONS
        ================================================== -->
        <section class="pt-0 ">
            <div class="container-fluid">
                <div class="row justify-content-center">
                    <div class="col-lg-11">
                        <div>
                            <div class="row align-items-center mt-n4">
                                <div class="col-md-7 col-lg mt-4 wow fadeIn" data-wow-delay="100ms">
                                    <h2 class="mb-0 display-20 font-weight-600 text-center"> <span class="font-weight-800 text-primary"> Our Office Location </span></h2><hr>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- CONTACT INFO
        ================================================== -->
        <section class=" bg-light">
            <div class="container">
                <div class="row align-items-center">

                    <!-- Google Map -->
                    <div class="col-md-8 ">
                        <div class="map-box shadow-sm rounded overflow-hidden">
                            <iframe 
                                src="https://www.google.com/maps/embed?pb=!1m17!1m12!1m3!1d3829.701845255878!2d80.44293367514051!3d16.287044584424457!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m2!1m1!2zMTbCsDE3JzEzLjQiTiA4MMKwMjYnNDMuOCJF!5e0!3m2!1sen!2sin!4v1764684814185!5m2!1sen!2sin" 
                                width="100%" 
                                height="420" 
                                style="border:0;" 
                                allowfullscreen="" 
                                loading="lazy">
                            </iframe>
                        </div>
                    </div>

                    <div class="col-md-4 mb-4">
                        <div class="image-box shadow-sm rounded overflow-hidden">
                            <img src="{% static 'img/contact/1.jpeg' %}" 
                                class="img-fluid building-img"
                                alt="Company Building">
                        </div>
                    </div>

                </div>
            </div>
        </section>

        <style>
            .map-box, .image-box {
            transition: all 0.3s ease-in-out;
            border-radius: 12px;
            background: #fdfcfc;
        }

        .map-box:hover, .image-box:hover {
            transform: translateY(-5px);
            box-shadow: 0px 10px 25px rgba(0,0,0,0.08);
        }

        .building-img {
            width: 100%;
            height: 420px;
            object-fit: cover;
            transition: all 0.3s ease-in-out;
        }

        .image-box:hover .building-img {
            transform: scale(1.03);
        }

        </style>
    {% endblock %}