{% extends 'NewTemplates/new_base.html' %}
{% load static %}
{% block head %}
<title>{{ pro_name }}</title>
<meta name="description" content="{{ meta_description }}" />
<meta name="keywords" content="{{ meta_keywords }}" />
{% endblock head %}
{% block body %}
<div class="inner-banner">
    <div class="container">
        <h1>Contact US</h1>
    </div>
</div>
<div class="contentarea">
    <div class="container">
        <div class="row">
            <div class="container">
                {% if success_message %}
                <div id="messageDiv" style="display: block;">
                    <span class="successmsg">{{ success_message }}!</span>
                </div>
                <script>
                    document.addEventListener("DOMContentLoaded", function () {
                        setTimeout(function () {
                            window.location.href = "{{ redirect_url }}";
                        }, 3000);
                    });
                </script>
                {% endif %}
                <div class="row">
                    <div class="col-4 col">
                        {% if selected_country.country_address %}
                        <div class="address">
                            <h2>Office Address</h2>
                            <div>
                                <sp class="ptag">
                                    <svg xmlns="http://www.w3.org/2000/svg" height="16" width="12"
                                        viewBox="0 0 384 512">
                                        <path
                                            d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z" />
                                    </svg>
                                    {{ selected_country.country_address|safe }}
                                </sp>
                            </div>
                            <p class="ptag">
                                <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512">
                                    <path
                                        d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z" />
                                </svg>
                                <span><a href="mailto:contact@surplusmarket.com">contact@surplusmarket.com</a></span>
                            </p>
                            <p class="ptag">
                                <svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512">
                                    <path
                                        d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm90.7 96.7c9.7-2.6 19.9 2.3 23.7 11.6l20 48c3.4 8.2 1 17.6-5.8 23.2L168 231.7c16.6 35.2 45.1 63.7 80.3 80.3l20.2-24.7c5.6-6.8 15-9.2 23.2-5.8l48 20c9.3 3.9 14.2 14 11.6 23.7l-12 44C336.9 378 329 384 320 384C196.3 384 96 283.7 96 160c0-9 6-16.9 14.7-19.3l44-12z" />
                                </svg>
                                {% if selected_country.country_contact %}
                                <span>Phone Number: <a href="tel:{{ selected_country.country_contact }}">{{
                                        selected_country.country_contact }}</a></span>
                                {% else %}
                                <span>Phone Number: <a href="tel:+97430269988">+97430269988</a></span>
                                {% endif %}
                            </p>
                            <!-- {% if selected_country.country_url %}
                            <div class="map">
                                <iframe src="{{ selected_country.con_url }}" width="600" height="450" style="border:0;"
                                    allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
                                </iframe>
                            </div>
                            {% endif %} -->
                        </div>
                        {% else %}
                        <div class="address">
                            <h2>Office Address</h2>
                            <p class="ptag">
                                <svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512">
                                    <path
                                        d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z" />
                                </svg>

                                <span>Building A1,<br>Dubai Digital Park,<br>Silicon Oasis,<br>Dubai - UAE</span>
                            </p>
                            <p class="ptag">
                                <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512">
                                    <path
                                        d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z" />
                                </svg>
                                <span><a href="mailto:contact@surplusmarket.com">contact@surplusmarket.com</a></span>
                            </p>
                            <p class="ptag">
                                <svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512">
                                    <path
                                        d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm90.7 96.7c9.7-2.6 19.9 2.3 23.7 11.6l20 48c3.4 8.2 1 17.6-5.8 23.2L168 231.7c16.6 35.2 45.1 63.7 80.3 80.3l20.2-24.7c5.6-6.8 15-9.2 23.2-5.8l48 20c9.3 3.9 14.2 14 11.6 23.7l-12 44C336.9 378 329 384 320 384C196.3 384 96 283.7 96 160c0-9 6-16.9 14.7-19.3l44-12z" />
                                </svg>
                                <span>Phone Number: <a href="tel:+97430269988">+97430269988</a></span>
                            </p>
                            <!-- <div class="map">
                                <iframe
                                    src="https://www.openstreetmap.org/export/embed.html?bbox=76.26824855804445%2C9.944228913787374%2C76.28022193908693%2C9.950167878769793&amp;layer=mapnik"
                                    width="240" height="200" style="border:0;" allowfullscreen="" loading="lazy"
                                    referrerpolicy="no-referrer-when-downgrade"></iframe>
                            </div> -->
                        </div>
                        {% endif %}
                    </div>
                    <div class="col-8 col">
                        <div class="contact_form">
                            <form action="{% url 'contact_us_form' %}" method="POST" class="row"
                                enctype="multipart/form-data">
                                {% csrf_token %}
                                <div class="col-6">
                                    <label for="name" class="form-label">Name</label>
                                    <input type="text" class="form-control" id="name" name="name" required
                                        placeholder="Name">
                                </div>
                                <div class="col-6">
                                    <label for="email" class="form-label">Email</label>
                                    <input type="email" class="form-control" id="email" name="email" required
                                        placeholder="Email">
                                </div>
                                <div class="col-12">
                                    <label for="phone" class="form-label">Phone Number</label>
                                    <input type="text" class="form-control" id="number" name="number"
                                        placeholder="Number">
                                </div>
                                <div class="col-12">
                                    <label for="message" class="form-label">Message</label>
                                    <textarea class="form-control" id="message" rows="5" name="message" required
                                        placeholder="Message"></textarea>
                                </div>
                                <div class="col-12">
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock body %}