{% extends 'website/base/base.html' %}
{% block title %} Contact {% endblock %}

{% block stylesheets %}


<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

<!-- Stylesheets -->
<link href="../static/website/assets/css/font-awesome-all.css" rel="stylesheet">
<link href="../static/website/assets/css/flaticon.css" rel="stylesheet">
<link href="../static/website/assets/css/owl.css" rel="stylesheet">
<link href="../static/website/assets/css/bootstrap.css" rel="stylesheet">
<link href="../static/website/assets/css/jquery.fancybox.min.css" rel="stylesheet">
<link href="../static/website/assets/css/animate.css" rel="stylesheet">
<link href="../static/website/assets/css/aos.css" rel="stylesheet">
<link href="../static/website/assets/css/nice-select.css" rel="stylesheet">
<link href="../static/website/assets/css/jquery-ui.css" rel="stylesheet">
<link href="../static/website/assets/css/elpath.css" rel="stylesheet">
<link href="../static/website/assets/css/color.css" id="jssDefault" rel="stylesheet">
<link href="../static/website/assets/css/rtl.css" rel="stylesheet">
<link href="../static/website/assets/css/style.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/page-title.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/contact.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/cta.css" rel="stylesheet">
<link href="../static/website/assets/css/responsive.css" rel="stylesheet">

<style>
    body{
            background-image: url('../static/website/assets/images/entire-body.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
</style>


{% endblock stylesheets %}

{% block content %}





        <!-- page-title -->
        <!-- <section class="page-title centred">
            <div class="auto-container">
                <div class="content-box">
                    <h1>Contact Us</h1>
                    <ul class="bread-crumb clearfix">
                        <li><a href="index.html">Home</a></li>
                        <li>Contact Us</li>
                    </ul>
                </div>
            </div>
        </section> -->
        <!-- page-title end -->


        <!-- contact-info-section -->
        <section class="contact-info-section centred pt_150 pb_120">
            <div class="auto-container">
                <div class="sec-title mb_60">
                    <h2 style="color: white;">Our Contact Details</h2>
                </div>
                <div class="row clearfix">
                    <div class="col-lg-4 col-md-6 col-sm-12 info-block">
                        <div class="info-block-one" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="700">
                            <div class="inner-box" style="background: url('../static/website/assets/images/card-bg.png') no-repeat center center; background-size: cover; border-radius: 10px;">
                                <div class="icon-box-121"><i class="icon-40"></i></div>
                                <h3 style="color: white;">Our Location</h3>
                                <p>Office # 1, 1st floor, Al-Ain Plaza, <br />Airport Link Road, Rawalpindi</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12 info-block">
                        <div class="info-block-one" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="900">
                            <div class="inner-box" style="background: url('../static/website/assets/images/card-bg.png') no-repeat center center; background-size: cover; border-radius: 10px;">
                                <div class="icon-box-121"><i class="icon-41"></i></div>
                                <h3 style="color: white;">Email Address</h3>
                                <p><a href="mailto:info@digiinnsolutions.com">info@digiinnsolutions.com</a><br /><a href="mailto:hr@digiinnsolutions.com">hr@digiinnsolutions.com</a></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12 info-block">
                        <div class="info-block-one" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="1100">
                            <div class="inner-box" style="background: url('../static/website/assets/images/card-bg.png') no-repeat center center; background-size: cover; border-radius: 10px;">
                                <div class="icon-box-121"><i class="icon-42"></i></div>
                                <h3 style="color: white;">Phone Number</h3>
                                <p><a href="tel:923163444466">+(92) 316 3444466</a><br /><a href="tel:923304555010">+(92) 330 4555010</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- contact-info-section end -->


        <!-- contact-section -->
        <section class="contact-section p_relative pb_120">
            <div class="auto-container">
                <div class="sec-title mb_40 centred">
                    <h2 style="color: white;">Our Contact Details</h2>
                </div>
                <div class="form-inner">
                    <form id="contact-form">
                        {% csrf_token %}
                        
                        <div class="row clearfix">
                            <div class="col-lg-6 col-md-6 col-sm-12 form-group mb-3">
                                <input type="text" class="form-control" name="username" placeholder="Your Name" required>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 form-group mb-3">
                                <input type="email" class="form-control" name="email" placeholder="Your Email" required>
                            </div>
                        </div>
                    
                        <div class="row clearfix">
                            <div class="col-lg-12 col-md-12 col-sm-12 form-group mb-3">
                                <input type="text" class="form-control" name="contact_no" placeholder="Your Contact Number" required>
                            </div>
                        </div>
                    
                        <div class="row clearfix">
                            <div class="col-lg-12 col-md-12 col-sm-12 form-group mb-3">
                                <textarea class="form-control" name="message" placeholder="Type your message or description" rows="4"></textarea>
                            </div>
                        </div>
                    
                        <div class="row clearfix">
                            <div class="col-lg-12 col-md-12 col-sm-12 form-group message-btn mr-0 Right pt_20 text-center">
                                <button style="border: none;" class="theme-btn btn-two btn btn-primary w-100" type="submit">
                                    <span>Send Message</span>
                                </button>
                            </div>
                        </div>
                    </form>
                    
                    <!-- Success Message -->
                    <div id="success-message" style="display: none; color: green; text-align: center; margin-top: 10px;">
                        Your message has been sent successfully!
                    </div>
                    
                    <script>
                        document.getElementById("contact-form").addEventListener("submit", function(event) {
                            event.preventDefault();  // Prevent normal form submission
                            
                            let formData = new FormData(this);
                            
                            fetch("{% url 'submit_lead' %}", {
                                method: "POST",
                                body: formData,
                                headers: {
                                    "X-CSRFToken": document.querySelector("[name=csrfmiddlewaretoken]").value
                                }
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    document.getElementById("success-message").style.display = "block";
                                    document.getElementById("contact-form").reset();
                                } else {
                                    alert("Something went wrong. Please try again.");
                                }
                            })
                            .catch(error => console.error("Error:", error));
                        });
                    </script>
                </div>
            </div>
        </section>
        <!-- contact-section end -->


       


    {% block javascripts %}
    <!-- jequery plugins -->
    <script src="../static/website/assets/js/jquery.js"></script>
    <script src="../static/website/assets/js/bootstrap.min.js"></script>
    <script src="../static/website/assets/js/owl.js"></script>
    <script src="../static/website/assets/js/wow.js"></script>
    <script src="../static/website/assets/js/jquery.fancybox.js"></script>
    <script src="../static/website/assets/js/appear.js"></script>
    <script src="../static/website/assets/js/isotope.js"></script>
    <script src="../static/website/assets/js/jquery.nice-select.min.js"></script>
    <script src="../static/website/assets/js/aos.js"></script>
    <script src="../static/website/assets/js/validation.js"></script>

    <!-- main-js -->
    <script src="../static/website/assets/js/script.js"></script>

    {% endblock javascripts %}
    {% endblock content %}